diff --git a/.changeset/tiny-beers-joke.md b/.changeset/tiny-beers-joke.md new file mode 100644 index 0000000000..bcecb1c022 --- /dev/null +++ b/.changeset/tiny-beers-joke.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Added documentation for exported symbols. diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 61d9ad5b90..4a94135b4a 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -9,7 +9,7 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstageIdentityApi } from '@backstage/core-plugin-api'; import { BackstageTheme } from '@backstage/theme'; import { Breadcrumbs as Breadcrumbs_2 } from '@material-ui/core'; -import { ButtonProps } from '@material-ui/core'; +import { ButtonProps as ButtonProps_2 } from '@material-ui/core'; import { CardHeaderProps } from '@material-ui/core'; import { Column } from '@material-table/core'; import { ComponentClass } from 'react'; @@ -29,7 +29,6 @@ import { NavLinkProps } from 'react-router-dom'; import { Overrides } from '@material-ui/core/styles/overrides'; import { ProfileInfoApi } from '@backstage/core-plugin-api'; import { PropsWithChildren } from 'react'; -import PropTypes from 'prop-types'; import { default as React_2 } from 'react'; import * as React_3 from 'react'; import { ReactElement } from 'react'; @@ -49,7 +48,7 @@ import { WithStyles } from '@material-ui/core'; // Warning: (ae-missing-release-tag) "AlertDisplay" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // -// @public (undocumented) +// @public export function AlertDisplay(_props: {}): JSX.Element | null; // Warning: (ae-missing-release-tag) "Alignment" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -66,10 +65,9 @@ enum Alignment { UP_RIGHT = 'UR', } -// Warning: (ae-forgotten-export) The symbol "AvatarProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "Avatar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // -// @public (undocumented) +// @public export function Avatar(props: AvatarProps): JSX.Element; // Warning: (ae-missing-release-tag) "AvatarClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -77,6 +75,15 @@ export function Avatar(props: AvatarProps): JSX.Element; // @public (undocumented) export type AvatarClassKey = 'avatar'; +// Warning: (ae-missing-release-tag) "AvatarProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public +export interface AvatarProps { + customStyles?: CSSProperties; + displayName?: string; + picture?: string; +} + // Warning: (ae-missing-release-tag) "BackstageContentClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -120,7 +127,7 @@ export type BottomLinkProps = { // Warning: (ae-missing-release-tag) "Breadcrumbs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Breadcrumbs(props: Props_24): JSX.Element; +export function Breadcrumbs(props: Props_21): JSX.Element; // Warning: (ae-missing-release-tag) "BreadcrumbsClickableTextClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -138,11 +145,15 @@ export type BreadcrumbsStyledBoxClassKey = 'root'; // @public (undocumented) export function BrokenImageIcon(props: IconComponentProps): JSX.Element; -// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "ButtonType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // -// @public (undocumented) -export function Button(props: Props): JSX.Element; +// @public +export function Button(props: ButtonProps): JSX.Element; + +// Warning: (ae-missing-release-tag) "ButtonProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public +export type ButtonProps = ButtonProps_2 & Omit; // Warning: (ae-missing-release-tag) "CardActionsTopRightClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -175,17 +186,29 @@ export function ChatIcon(props: IconComponentProps): JSX.Element; // @public (undocumented) export type ClosedDropdownClassKey = 'icon'; -// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "CodeSnippet" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // -// @public (undocumented) -export const CodeSnippet: (props: Props_2) => JSX.Element; +// @public +export function CodeSnippet(props: CodeSnippetProps): JSX.Element; + +// Warning: (ae-missing-release-tag) "CodeSnippetProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public +export interface CodeSnippetProps { + customStyle?: any; + highlightedNumbers?: number[]; + // Warning: (tsdoc-reference-missing-identifier) Syntax error in declaration reference: expecting a member identifier + language: string; + showCopyCodeButton?: boolean; + showLineNumbers?: boolean; + text: string; +} // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "Content" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Content(props: PropsWithChildren): JSX.Element; +export function Content(props: PropsWithChildren): JSX.Element; // Warning: (ae-forgotten-export) The symbol "ContentHeaderProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "ContentHeader" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -205,29 +228,32 @@ export type ContentHeaderClassKey = | 'description' | 'title'; -// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "CopyTextButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // Warning: (ae-missing-release-tag) "CopyTextButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // -// @public (undocumented) -export function CopyTextButton(props: Props_3): JSX.Element; +// @public +export function CopyTextButton(props: CopyTextButtonProps): JSX.Element; -// @public (undocumented) -export namespace CopyTextButton { - var // (undocumented) - propTypes: { - text: PropTypes.Validator; - tooltipDelay: PropTypes.Requireable; - tooltipText: PropTypes.Requireable; - }; +// Warning: (ae-missing-release-tag) "CopyTextButtonProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public +export interface CopyTextButtonProps { + text: string; + tooltipDelay?: number; + tooltipText?: string; } -// Warning: (ae-forgotten-export) The symbol "CreateButtonProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "CreateButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // -// @public (undocumented) +// @public export function CreateButton(props: CreateButtonProps): JSX.Element | null; +// Warning: (ae-missing-release-tag) "CreateButtonProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public +export type CreateButtonProps = { + title: string; +} & Partial>; + // Warning: (ae-missing-release-tag) "CustomProviderClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -342,7 +368,7 @@ enum Direction { // Warning: (ae-missing-release-tag) "DismissableBanner" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const DismissableBanner: (props: Props_4) => JSX.Element; +export const DismissableBanner: (props: Props) => JSX.Element; // Warning: (ae-missing-release-tag) "DismissbleBannerClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -384,7 +410,7 @@ export function EmailIcon(props: IconComponentProps): JSX.Element; // Warning: (ae-missing-release-tag) "EmptyState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function EmptyState(props: Props_5): JSX.Element; +export function EmptyState(props: Props_2): JSX.Element; // Warning: (ae-missing-release-tag) "EmptyStateClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -459,7 +485,7 @@ export type FeatureCalloutCircleClassKey = // // @public (undocumented) export function FeatureCalloutCircular( - props: PropsWithChildren, + props: PropsWithChildren, ): JSX.Element; // Warning: (ae-missing-release-tag) "FiltersContainerClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -471,13 +497,13 @@ export type FiltersContainerClassKey = 'root' | 'title'; // Warning: (ae-missing-release-tag) "Gauge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Gauge(props: Props_14): JSX.Element; +export function Gauge(props: Props_11): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "GaugeCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function GaugeCard(props: Props_13): JSX.Element; +export function GaugeCard(props: Props_10): JSX.Element; // Warning: (ae-missing-release-tag) "GaugeCardClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -515,7 +541,7 @@ export function GroupIcon(props: IconComponentProps): JSX.Element; // Warning: (ae-missing-release-tag) "Header" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Header(props: PropsWithChildren): JSX.Element; +export function Header(props: PropsWithChildren): JSX.Element; // Warning: (ae-missing-release-tag) "HeaderClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -535,7 +561,7 @@ export type HeaderClassKey = // Warning: (ae-missing-release-tag) "HeaderIconLinkRow" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function HeaderIconLinkRow(props: Props_8): JSX.Element; +export function HeaderIconLinkRow(props: Props_5): JSX.Element; // Warning: (ae-missing-release-tag) "HeaderIconLinkRowClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -583,7 +609,7 @@ export function HomepageTimer(_props: {}): JSX.Element | null; // // @public (undocumented) export function HorizontalScrollGrid( - props: PropsWithChildren, + props: PropsWithChildren, ): JSX.Element; // Warning: (ae-missing-release-tag) "HorizontalScrollGridClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -627,7 +653,7 @@ export type IconLinkVerticalProps = { // Warning: (ae-missing-release-tag) "InfoCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function InfoCard(props: Props_19): JSX.Element; +export function InfoCard(props: Props_16): JSX.Element; // Warning: (ae-missing-release-tag) "InfoCardClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -726,7 +752,7 @@ enum LabelPosition { // Warning: (ae-missing-release-tag) "Lifecycle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Lifecycle(props: Props_10): JSX.Element; +export function Lifecycle(props: Props_7): JSX.Element; // Warning: (ae-missing-release-tag) "LifecycleClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -737,7 +763,7 @@ export type LifecycleClassKey = 'alpha' | 'beta'; // Warning: (ae-missing-release-tag) "LinearGauge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function LinearGauge(props: Props_15): JSX.Element | null; +export function LinearGauge(props: Props_12): JSX.Element | null; // Warning: (ae-missing-release-tag) "LinkType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -761,7 +787,7 @@ export type LoginRequestListItemClassKey = 'root'; // Warning: (ae-missing-release-tag) "MarkdownContent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export function MarkdownContent(props: Props_11): JSX.Element; +export function MarkdownContent(props: Props_8): JSX.Element; // Warning: (ae-missing-release-tag) "MarkdownContentClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -797,7 +823,7 @@ export type MicDropClassKey = 'micDrop'; // Warning: (ae-missing-release-tag) "MissingAnnotationEmptyState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function MissingAnnotationEmptyState(props: Props_6): JSX.Element; +export function MissingAnnotationEmptyState(props: Props_3): JSX.Element; // Warning: (ae-missing-release-tag) "MissingAnnotationEmptyStateClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -827,7 +853,7 @@ export type OpenedDropdownClassKey = 'icon'; // Warning: (ae-missing-release-tag) "OverflowTooltip" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function OverflowTooltip(props: Props_12): JSX.Element; +export function OverflowTooltip(props: Props_9): JSX.Element; // Warning: (ae-missing-release-tag) "OverflowTooltipClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -838,7 +864,7 @@ export type OverflowTooltipClassKey = 'container'; // Warning: (ae-missing-release-tag) "Page" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Page(props: PropsWithChildren): JSX.Element; +export function Page(props: PropsWithChildren): JSX.Element; // Warning: (ae-missing-release-tag) "PageClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -937,7 +963,7 @@ export type SelectInputBaseClassKey = 'root' | 'input'; // Warning: (ae-missing-release-tag) "Sidebar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Sidebar(props: PropsWithChildren): JSX.Element; +export function Sidebar(props: PropsWithChildren): JSX.Element; // Warning: (ae-missing-release-tag) "SIDEBAR_INTRO_LOCAL_STORAGE" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -2129,7 +2155,7 @@ export const SidebarSpacer: React_2.ComponentType< // Warning: (ae-missing-release-tag) "SignInPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function SignInPage(props: Props_22): JSX.Element; +export function SignInPage(props: Props_19): JSX.Element; // Warning: (ae-missing-release-tag) "SignInPageClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -2218,7 +2244,7 @@ export function StatusWarning(props: PropsWithChildren<{}>): JSX.Element; // Warning: (ae-missing-release-tag) "StructuredMetadataTable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function StructuredMetadataTable(props: Props_16): JSX.Element; +export function StructuredMetadataTable(props: Props_13): JSX.Element; // Warning: (ae-missing-release-tag) "StructuredMetadataTableListClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -2300,7 +2326,7 @@ export type TabBarClassKey = 'indicator' | 'flexContainer' | 'root'; // Warning: (ae-missing-release-tag) "TabbedCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function TabbedCard(props: PropsWithChildren): JSX.Element; +export function TabbedCard(props: PropsWithChildren): JSX.Element; // Warning: (ae-missing-release-tag) "TabbedCardClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // diff --git a/packages/core-components/package.json b/packages/core-components/package.json index e3c06c1e6a..49e15d9813 100644 --- a/packages/core-components/package.json +++ b/packages/core-components/package.json @@ -38,7 +38,6 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", "@types/dagre": "^0.7.44", - "@types/prop-types": "^15.7.3", "@types/react": "*", "@types/react-sparklines": "^1.7.0", "@types/react-text-truncate": "^0.14.0", diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index f3e102d9a0..f43dbd08dd 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -21,6 +21,13 @@ import { Alert } from '@material-ui/lab'; import { AlertMessage, useApi, alertApiRef } from '@backstage/core-plugin-api'; import pluralize from 'pluralize'; +/** + * Displays alerts from {@link @backstage/core-plugin-api#AlertApi} + * + * @remarks + * + * Shown as SnackBar at the top of the page + */ // TODO: improve on this and promote to a shared component for use by all apps. export function AlertDisplay(_props: {}) { const [messages, setMessages] = useState>([]); diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 604d093971..0156c58b92 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -39,12 +39,31 @@ const useStyles = makeStyles( { name: 'BackstageAvatar' }, ); -export type AvatarProps = { +/** + * Properties for {@link Avatar} + */ +export interface AvatarProps { + /** + * A display name, which will be used to generate initials as a fallback in case a picture is not provided. + */ displayName?: string; + /** + * URL to avatar image source + */ picture?: string; + /** + * Custom styles applied to avatar + */ customStyles?: CSSProperties; -}; +} +/** + * Component rendering an Avatar + * + * @remarks + * + * Based on https://v4.mui.com/components/avatars/#avatar with some styling adjustment and two-letter initials + */ export function Avatar(props: AvatarProps) { const { displayName, picture, customStyles } = props; const classes = useStyles(); diff --git a/packages/core-components/src/components/Avatar/index.ts b/packages/core-components/src/components/Avatar/index.ts index 4d00450f2d..f1ef69d401 100644 --- a/packages/core-components/src/components/Avatar/index.ts +++ b/packages/core-components/src/components/Avatar/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ export { Avatar } from './Avatar'; -export type { AvatarClassKey } from './Avatar'; +export type { AvatarClassKey, AvatarProps } from './Avatar'; diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx index e52285312b..0fbadc4dff 100644 --- a/packages/core-components/src/components/Button/Button.tsx +++ b/packages/core-components/src/components/Button/Button.tsx @@ -21,17 +21,28 @@ import { import React from 'react'; import { Link, LinkProps } from '../Link'; -type Props = MaterialButtonProps & Omit; - -declare function ButtonType(props: Props): JSX.Element; +/** + * Properties for {@link Button} + * + * @remarks + * + * See {@link https://v4.mui.com/api/button/#props | Material-UI Button Props} for all properties + */ +export type ButtonProps = MaterialButtonProps & + Omit; /** - * Thin wrapper on top of material-ui's Button component + * Thin wrapper on top of material-ui's {@link https://v4.mui.com/components/buttons/ | Button} component + * + * @remarks + * * Makes the Button to utilise react-router */ -const ActualButton = React.forwardRef((props, ref) => ( +declare function ButtonType(props: ButtonProps): JSX.Element; + +const ActualButton = React.forwardRef((props, ref) => ( -)) as { (props: Props): JSX.Element }; +)) as { (props: ButtonProps): JSX.Element }; // TODO(Rugvip): We use this as a workaround to make the exported type be a // function, which makes our API reference docs much nicer. diff --git a/packages/core-components/src/components/Button/index.ts b/packages/core-components/src/components/Button/index.ts index e2aa3aff98..b3dc40e6e7 100644 --- a/packages/core-components/src/components/Button/index.ts +++ b/packages/core-components/src/components/Button/index.ts @@ -13,5 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - export { Button } from './Button'; +export type { ButtonProps } from './Button'; diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx index 6417151ff4..3ce041a819 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx @@ -21,16 +21,53 @@ import { useTheme } from '@material-ui/core'; import { BackstageTheme } from '@backstage/theme'; import { CopyTextButton } from '../CopyTextButton'; -type Props = { +/** + * Properties for {@link CodeSnippet} + */ +export interface CodeSnippetProps { + /** + * Code Snippet text + */ text: string; + /** + * Language used by {@link .text} + */ language: string; + /** + * Whether to show line number + * + * @remarks + * + * Default: false + */ showLineNumbers?: boolean; + /** + * Whether to show button to copy code snippet + * + * @remarks + * + * Default: false + */ showCopyCodeButton?: boolean; + /** + * Array of line numbers to highlight + */ highlightedNumbers?: number[]; + /** + * Custom styles applied to code + * + * @remarks + * + * Passed to {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter} + */ customStyle?: any; -}; +} -export const CodeSnippet = (props: Props) => { +/** + * Thin wrapper on top of {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter} + * providing consistent theming and copy code button + */ +export function CodeSnippet(props: CodeSnippetProps) { const { text, language, @@ -70,4 +107,4 @@ export const CodeSnippet = (props: Props) => { )} ); -}; +} diff --git a/packages/core-components/src/components/CodeSnippet/index.tsx b/packages/core-components/src/components/CodeSnippet/index.tsx index bafcf145e9..10ad489007 100644 --- a/packages/core-components/src/components/CodeSnippet/index.tsx +++ b/packages/core-components/src/components/CodeSnippet/index.tsx @@ -15,3 +15,4 @@ */ export { CodeSnippet } from './CodeSnippet'; +export type { CodeSnippetProps } from './CodeSnippet'; diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx index 2d3afff1dc..2d2fb4006a 100644 --- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx +++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx @@ -17,41 +17,55 @@ import { errorApiRef, useApi } from '@backstage/core-plugin-api'; import { IconButton, Tooltip } from '@material-ui/core'; import CopyIcon from '@material-ui/icons/FileCopy'; -import PropTypes from 'prop-types'; import React, { MouseEventHandler, useEffect, useState } from 'react'; import { useCopyToClipboard } from 'react-use'; /** - * Copy text button with visual feedback in the form of + * Properties for {@link CopyTextButton} + */ +export interface CopyTextButtonProps { + /** + * The text to be copied + */ + text: string; + /** + * Number of milliseconds that the tooltip is shown + * + * @remarks + * + * Default: 1000 + */ + tooltipDelay?: number; + /** + * Text to show in the tooltip when user has clicked the button + * + * @remarks + * + * Default: "Text copied to clipboard" + */ + tooltipText?: string; +} + +/** + * Copy text button with visual feedback + * + * @remarks + * + * Visual feedback takes form of: * - a hover color * - click ripple * - Tooltip shown when user has clicked * - * Properties: - * - text: the text to be copied - * - tooltipDelay: Number os ms to show the tooltip, default: 1000ms - * - tooltipText: Text to show in the tooltip when user has clicked the button, default: "Text - * copied to clipboard" + * @example * - * Example: - * + * `` */ -type Props = { - text: string; - tooltipDelay?: number; - tooltipText?: string; -}; - -const defaultProps = { - tooltipDelay: 1000, - tooltipText: 'Text copied to clipboard', -}; - -export function CopyTextButton(props: Props) { - const { text, tooltipDelay, tooltipText } = { - ...defaultProps, - ...props, - }; +export function CopyTextButton(props: CopyTextButtonProps) { + const { + text, + tooltipDelay = 1000, + tooltipText = 'Text copied to clipboard', + } = props; const errorApi = useApi(errorApiRef); const [open, setOpen] = useState(false); const [{ error }, copyToClipboard] = useCopyToClipboard(); @@ -85,10 +99,3 @@ export function CopyTextButton(props: Props) { ); } - -// Type check for the JS files using this core component -CopyTextButton.propTypes = { - text: PropTypes.string.isRequired, - tooltipDelay: PropTypes.number, - tooltipText: PropTypes.string, -}; diff --git a/packages/core-components/src/components/CopyTextButton/index.tsx b/packages/core-components/src/components/CopyTextButton/index.tsx index a90975fa77..9c8ced5035 100644 --- a/packages/core-components/src/components/CopyTextButton/index.tsx +++ b/packages/core-components/src/components/CopyTextButton/index.tsx @@ -15,3 +15,4 @@ */ export { CopyTextButton } from './CopyTextButton'; +export type { CopyTextButtonProps } from './CopyTextButton'; diff --git a/packages/core-components/src/components/CreateButton/CreateButton.tsx b/packages/core-components/src/components/CreateButton/CreateButton.tsx index 1ca4fdaa97..c6b9b7abed 100644 --- a/packages/core-components/src/components/CreateButton/CreateButton.tsx +++ b/packages/core-components/src/components/CreateButton/CreateButton.tsx @@ -20,10 +20,16 @@ import React from 'react'; import { Link as RouterLink, LinkProps } from 'react-router-dom'; import AddCircleOutline from '@material-ui/icons/AddCircleOutline'; -type CreateButtonProps = { +/** + * Properties for {@link CreateButton} + */ +export type CreateButtonProps = { title: string; } & Partial>; +/** + * Responsive Button giving consistent UX for creation of different things + */ export function CreateButton(props: CreateButtonProps) { const { title, to } = props; const isXSScreen = useMediaQuery(theme => diff --git a/packages/core-components/src/components/CreateButton/index.ts b/packages/core-components/src/components/CreateButton/index.ts index f0e4cbe646..270ce063a4 100644 --- a/packages/core-components/src/components/CreateButton/index.ts +++ b/packages/core-components/src/components/CreateButton/index.ts @@ -15,3 +15,4 @@ */ export { CreateButton } from './CreateButton'; +export type { CreateButtonProps } from './CreateButton';