core-components: rewrite layout and icon components to use functions

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/core-components/api-report.md

@@ -74,12 +74,13 @@ export function Avatar(props: AvatarProps): JSX.Element;
 // 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 const Breadcrumbs: ({ children, ...props }: Props_24) => JSX.Element;
+export function Breadcrumbs(props: Props_24): JSX.Element;
 
+// Warning: (ae-forgotten-export) The symbol "IconComponentProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "BrokenImageIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const BrokenImageIcon: IconComponent;
+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)
@@ -91,20 +92,17 @@ export function Button(props: Props): JSX.Element;
 // Warning: (ae-missing-release-tag) "CardTab" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const CardTab: ({
-  children,
-  ...props
-}: PropsWithChildren<CardTabProps>) => JSX.Element;
+export function CardTab(props: PropsWithChildren<CardTabProps>): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "CatalogIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const CatalogIcon: IconComponent;
+export function CatalogIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "ChatIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const ChatIcon: IconComponent;
+export function ChatIcon(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) "CodeSnippet" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -116,25 +114,15 @@ export const CodeSnippet: (props: Props_2) => JSX.Element;
 // 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 const Content: ({
-  className,
-  stretch,
-  noPadding,
-  children,
-  ...props
-}: PropsWithChildren<Props_17>) => JSX.Element;
+export function Content(props: PropsWithChildren<Props_17>): 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)
 //
 // @public (undocumented)
-export const ContentHeader: ({
-  description,
-  title,
-  titleComponent: TitleComponent,
-  children,
-  textAlign,
-}: PropsWithChildren<ContentHeaderProps>) => JSX.Element;
+export function ContentHeader(
+  props: PropsWithChildren<ContentHeaderProps>,
+): 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) "CopyTextButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -162,7 +150,7 @@ export function CreateButton(props: CreateButtonProps): JSX.Element | null;
 // Warning: (ae-missing-release-tag) "DashboardIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const DashboardIcon: IconComponent;
+export function DashboardIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "CustomType" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "DependencyEdge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -229,7 +217,7 @@ export const DismissableBanner: (props: Props_4) => JSX.Element;
 // Warning: (ae-missing-release-tag) "DocsIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const DocsIcon: IconComponent;
+export function DocsIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EdgeProperties" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -248,7 +236,7 @@ type EdgeProperties = {
 // Warning: (ae-missing-release-tag) "EmailIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const EmailIcon: IconComponent;
+export function EmailIcon(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) "EmptyState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -274,11 +262,7 @@ export type ErrorBoundaryProps = {
 // Warning: (ae-missing-release-tag) "ErrorPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const ErrorPage: ({
-  status,
-  statusMessage,
-  additionalInfo,
-}: IErrorPageProps) => JSX.Element;
+export function ErrorPage(props: IErrorPageProps): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "ErrorPanel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -319,7 +303,7 @@ export function GaugeCard(props: Props_13): JSX.Element;
 // Warning: (ae-missing-release-tag) "GitHubIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const GitHubIcon: IconComponent;
+export function GitHubIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "GraphEdge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -336,22 +320,13 @@ type GraphNode<T = CustomType> = dagre_2.Node<DependencyNode<T>>;
 // Warning: (ae-missing-release-tag) "GroupIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const GroupIcon: IconComponent;
+export function GroupIcon(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) "Header" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const Header: ({
-  children,
-  pageTitleOverride,
-  style,
-  subtitle,
-  title,
-  tooltip,
-  type,
-  typeLink,
-}: PropsWithChildren<Props_18>) => JSX.Element;
+export function Header(props: PropsWithChildren<Props_18>): 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) "HeaderIconLinkRow" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -363,31 +338,23 @@ export function HeaderIconLinkRow(props: Props_8): JSX.Element;
 // Warning: (ae-missing-release-tag) "HeaderLabel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const HeaderLabel: ({
-  label,
-  value,
-  url,
-}: HeaderLabelProps) => JSX.Element;
+export function HeaderLabel(props: HeaderLabelProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "HeaderTabsProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "HeaderTabs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const HeaderTabs: ({
-  tabs,
-  onChange,
-  selectedIndex,
-}: HeaderTabsProps) => JSX.Element;
+export function HeaderTabs(props: HeaderTabsProps): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "HelpIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const HelpIcon: IconComponent;
+export function HelpIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "HomepageTimer" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const HomepageTimer: () => JSX.Element | null;
+export function HomepageTimer(_props: {}): JSX.Element | null;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "HorizontalScrollGrid" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -414,26 +381,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 const InfoCard: ({
-  title,
-  subheader,
-  divider,
-  deepLink,
-  slackChannel,
-  errorBoundaryProps,
-  variant,
-  children,
-  headerStyle,
-  headerProps,
-  action,
-  actionsClassName,
-  actions,
-  cardClassName,
-  actionsTopRight,
-  className,
-  noPadding,
-  titleTypographyProps,
-}: Props_19) => JSX.Element;
+export function InfoCard(props: Props_19): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "InfoCardVariants" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -444,7 +392,7 @@ export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
 // Warning: (ae-missing-release-tag) "IntroCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const IntroCard: (props: IntroCardProps) => JSX.Element;
+export function IntroCard(props: IntroCardProps): JSX.Element;
 
 // Warning: (tsdoc-malformed-html-name) Invalid HTML element: Expecting an HTML name
 // Warning: (tsdoc-escape-greater-than) The ">" character should be escaped using a backslash to avoid confusion with an HTML tag
@@ -452,16 +400,7 @@ export const IntroCard: (props: IntroCardProps) => JSX.Element;
 // Warning: (ae-missing-release-tag) "ItemCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public @deprecated
-export const ItemCard: ({
-  description,
-  tags,
-  title,
-  type,
-  subtitle,
-  label,
-  onClick,
-  href,
-}: ItemCardProps) => JSX.Element;
+export function ItemCard(props: ItemCardProps): JSX.Element;
 
 // Warning: (tsdoc-escape-greater-than) The ">" character should be escaped using a backslash to avoid confusion with an HTML tag
 // Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
@@ -472,7 +411,7 @@ export const ItemCard: ({
 // Warning: (ae-missing-release-tag) "ItemCardGrid" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export const ItemCardGrid: (props: ItemCardGridProps) => JSX.Element;
+export function ItemCardGrid(props: ItemCardGridProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "styles" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "ItemCardGridProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -491,7 +430,7 @@ export type ItemCardGridProps = Partial<WithStyles<typeof styles>> & {
 // Warning: (ae-missing-release-tag) "ItemCardHeader" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export const ItemCardHeader: (props: ItemCardHeaderProps) => JSX.Element;
+export function ItemCardHeader(props: ItemCardHeaderProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "styles" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "ItemCardHeaderProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -567,20 +506,15 @@ export function OverflowTooltip(props: Props_12): JSX.Element;
 // 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 const Page: ({
-  themeId,
-  children,
-}: PropsWithChildren<Props_20>) => JSX.Element;
+export function Page(props: PropsWithChildren<Props_20>): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "PageWithHeaderProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "PageWithHeader" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const PageWithHeader: ({
-  themeId,
-  children,
-  ...props
-}: PropsWithChildren<PageWithHeaderProps>) => JSX.Element;
+export function PageWithHeader(
+  props: PropsWithChildren<PageWithHeaderProps>,
+): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "Progress" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -645,11 +579,7 @@ export function Select(props: SelectProps): JSX.Element;
 // 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 const Sidebar: ({
-  openDelayMs,
-  closeDelayMs,
-  children,
-}: PropsWithChildren<Props_21>) => JSX.Element;
+export function Sidebar(props: PropsWithChildren<Props_21>): 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)
 //
@@ -959,7 +889,7 @@ export const SidebarDivider: React_2.ComponentType<
 // Warning: (ae-missing-release-tag) "SidebarIntro" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const SidebarIntro: () => JSX.Element | null;
+export function SidebarIntro(_props: {}): JSX.Element | null;
 
 // Warning: (ae-forgotten-export) The symbol "SidebarItemProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "SidebarItem" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -972,7 +902,7 @@ export const SidebarItem: React_2.ForwardRefExoticComponent<
 // Warning: (ae-missing-release-tag) "SidebarPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const SidebarPage: (props: PropsWithChildren<{}>) => JSX.Element;
+export function SidebarPage(props: PropsWithChildren<{}>): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "SidebarPinStateContext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1260,9 +1190,7 @@ export const SidebarScrollWrapper: React_2.ComponentType<
 // Warning: (ae-missing-release-tag) "SidebarSearchField" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const SidebarSearchField: (
-  props: SidebarSearchFieldProps,
-) => JSX.Element;
+export function SidebarSearchField(props: SidebarSearchFieldProps): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "SidebarSpace" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1806,7 +1734,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 const SignInPage: (props: Props_22) => JSX.Element;
+export function SignInPage(props: Props_22): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "SignInProviderConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1925,15 +1853,7 @@ export type Tab = {
 // 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 const TabbedCard: ({
-  slackChannel,
-  errorBoundaryProps,
-  children,
-  title,
-  deepLink,
-  value,
-  onChange,
-}: PropsWithChildren<Props_23>) => JSX.Element;
+export function TabbedCard(props: PropsWithChildren<Props_23>): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "TabbedLayout" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 // Warning: (ae-missing-release-tag) "TabbedLayout" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -2028,7 +1948,7 @@ export function useQueryParamState<T>(
 // Warning: (ae-missing-release-tag) "UserIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const UserIcon: IconComponent;
+export function UserIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "useSupportConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -2038,7 +1958,7 @@ export function useSupportConfig(): SupportConfig;
 // Warning: (ae-missing-release-tag) "WarningIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const WarningIcon: IconComponent;
+export function WarningIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
 // Warning: (tsdoc-param-tag-with-invalid-optional-name) The @param should not include a JSDoc-style optional name; it must not be enclosed in '[ ]' brackets.

packages/core-components/src/icons/icons.tsx

@@ -15,27 +15,48 @@
  */
 
 import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { useApp, IconComponent } from '@backstage/core-plugin-api';
 
-const overridableSystemIcon = (key: string): IconComponent => {
-  const Component: IconComponent = props => {
-    const app = useApp();
-    const Icon = app.getSystemIcon(key);
-    return Icon ? <Icon {...props} /> : <MuiBrokenImageIcon {...props} />;
-  };
-  return Component;
-};
+type IconComponentProps = ComponentProps<IconComponent>;
+
+function useSystemIcon(key: string, props: IconComponentProps) {
+  const app = useApp();
+  const Icon = app.getSystemIcon(key);
+  return Icon ? <Icon {...props} /> : <MuiBrokenImageIcon {...props} />;
+}
 
 // Should match the list of overridable system icon keys in @backstage/core-app-api
-export const BrokenImageIcon = overridableSystemIcon('brokenImage');
-export const CatalogIcon = overridableSystemIcon('catalog');
-export const ChatIcon = overridableSystemIcon('chat');
-export const DashboardIcon = overridableSystemIcon('dashboard');
-export const DocsIcon = overridableSystemIcon('docs');
-export const EmailIcon = overridableSystemIcon('email');
-export const GitHubIcon = overridableSystemIcon('github');
-export const GroupIcon = overridableSystemIcon('group');
-export const HelpIcon = overridableSystemIcon('help');
-export const UserIcon = overridableSystemIcon('user');
-export const WarningIcon = overridableSystemIcon('warning');
+export function BrokenImageIcon(props: IconComponentProps) {
+  return useSystemIcon('brokenImage', props);
+}
+export function CatalogIcon(props: IconComponentProps) {
+  return useSystemIcon('catalog', props);
+}
+export function ChatIcon(props: IconComponentProps) {
+  return useSystemIcon('chat', props);
+}
+export function DashboardIcon(props: IconComponentProps) {
+  return useSystemIcon('dashboard', props);
+}
+export function DocsIcon(props: IconComponentProps) {
+  return useSystemIcon('docs', props);
+}
+export function EmailIcon(props: IconComponentProps) {
+  return useSystemIcon('email', props);
+}
+export function GitHubIcon(props: IconComponentProps) {
+  return useSystemIcon('github', props);
+}
+export function GroupIcon(props: IconComponentProps) {
+  return useSystemIcon('group', props);
+}
+export function HelpIcon(props: IconComponentProps) {
+  return useSystemIcon('help', props);
+}
+export function UserIcon(props: IconComponentProps) {
+  return useSystemIcon('user', props);
+}
+export function WarningIcon(props: IconComponentProps) {
+  return useSystemIcon('warning', props);
+}

packages/core-components/src/layout/BottomLink/BottomLink.tsx

@@ -41,7 +41,8 @@ export type BottomLinkProps = {
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
 };
 
-export const BottomLink = ({ link, title, onClick }: BottomLinkProps) => {
+export function BottomLink(props: BottomLinkProps) {
+  const { link, title, onClick } = props;
   const classes = useStyles();
 
   return (
@@ -59,4 +60,4 @@ export const BottomLink = ({ link, title, onClick }: BottomLinkProps) => {
       </Link>
     </div>
   );
-};
+}

packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx

@@ -41,7 +41,8 @@ const StyledBox = withStyles({
   },
 })(Box);
 
-export const Breadcrumbs = ({ children, ...props }: Props) => {
+export function Breadcrumbs(props: Props) {
+  const { children, ...restProps } = props;
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
     null,
   );
@@ -65,7 +66,7 @@ export const Breadcrumbs = ({ children, ...props }: Props) => {
   const open = Boolean(anchorEl);
   return (
     <Fragment>
-      <MaterialBreadcrumbs aria-label="breadcrumb" {...props}>
+      <MaterialBreadcrumbs aria-label="breadcrumb" {...restProps}>
         {childrenArray.length > 1 && <StyledBox clone>{firstPage}</StyledBox>}
         {childrenArray.length > 2 && <StyledBox clone>{secondPage}</StyledBox>}
         {hasHiddenBreadcrumbs && (
@@ -96,4 +97,4 @@ export const Breadcrumbs = ({ children, ...props }: Props) => {
       </Popover>
     </Fragment>
   );
-};
+}

packages/core-components/src/layout/Content/Content.tsx

@@ -47,17 +47,12 @@ type Props = {
   className?: string;
 };
 
-export const Content = ({
-  className,
-  stretch,
-  noPadding,
-  children,
-  ...props
-}: PropsWithChildren<Props>) => {
+export function Content(props: PropsWithChildren<Props>) {
+  const { className, stretch, noPadding, children, ...restProps } = props;
   const classes = useStyles();
   return (
     <article
-      {...props}
+      {...restProps}
       className={classNames(classes.root, className, {
         [classes.stretch]: stretch,
         [classes.noPadding]: noPadding,
@@ -66,4 +61,4 @@ export const Content = ({
       {children}
     </article>
   );
-};
+}

packages/core-components/src/layout/ContentHeader/ContentHeader.tsx

@@ -82,13 +82,14 @@ type ContentHeaderProps = {
   textAlign?: 'left' | 'right' | 'center';
 };
 
-export const ContentHeader = ({
-  description,
-  title,
-  titleComponent: TitleComponent = undefined,
-  children,
-  textAlign = 'left',
-}: PropsWithChildren<ContentHeaderProps>) => {
+export function ContentHeader(props: PropsWithChildren<ContentHeaderProps>) {
+  const {
+    description,
+    title,
+    titleComponent: TitleComponent = undefined,
+    children,
+    textAlign = 'left',
+  } = props;
   const classes = useStyles({ textAlign })();
 
   const renderedTitle = TitleComponent ? (
@@ -112,4 +113,4 @@ export const ContentHeader = ({
       </div>
     </>
   );
-};
+}

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -47,11 +47,8 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
 }));
 
-export const ErrorPage = ({
-  status,
-  statusMessage,
-  additionalInfo,
-}: IErrorPageProps) => {
+export function ErrorPage(props: IErrorPageProps) {
+  const { status, statusMessage, additionalInfo } = props;
   const classes = useStyles();
   const navigate = useNavigate();
   const support = useSupportConfig();
@@ -82,4 +79,4 @@ export const ErrorPage = ({
       </Grid>
     </Grid>
   );
-};
+}

packages/core-components/src/layout/Header/Header.tsx

@@ -174,16 +174,17 @@ const SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {
   );
 };
 
-export const Header = ({
-  children,
-  pageTitleOverride,
-  style,
-  subtitle,
-  title,
-  tooltip,
-  type,
-  typeLink,
-}: PropsWithChildren<Props>) => {
+export function Header(props: PropsWithChildren<Props>) {
+  const {
+    children,
+    pageTitleOverride,
+    style,
+    subtitle,
+    title,
+    tooltip,
+    type,
+    typeLink,
+  } = props;
   const classes = useStyles();
   const configApi = useApi(configApiRef);
   const appTitle = configApi.getOptionalString('app.title') || 'Backstage';
@@ -216,4 +217,4 @@ export const Header = ({
       </header>
     </>
   );
-};
+}

packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx

@@ -66,7 +66,8 @@ export type HeaderActionMenuProps = {
   actionItems: ActionItemProps[];
 };
 
-export const HeaderActionMenu = ({ actionItems }: HeaderActionMenuProps) => {
+export function HeaderActionMenu(props: HeaderActionMenuProps) {
+  const { actionItems } = props;
   const [open, setOpen] = React.useState(false);
   const anchorElRef = React.useRef(null);
 
@@ -103,4 +104,4 @@ export const HeaderActionMenu = ({ actionItems }: HeaderActionMenuProps) => {
       </Popover>
     </Fragment>
   );
-};
+}

packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx

@@ -51,7 +51,8 @@ type HeaderLabelProps = {
   url?: string;
 };
 
-export const HeaderLabel = ({ label, value, url }: HeaderLabelProps) => {
+export function HeaderLabel(props: HeaderLabelProps) {
+  const { label, value, url } = props;
   const classes = useStyles();
   const content = (
     <HeaderLabelContent
@@ -67,4 +68,4 @@ export const HeaderLabel = ({ label, value, url }: HeaderLabelProps) => {
       </span>
     </Grid>
   );
-};
+}

packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx

@@ -55,11 +55,8 @@ type HeaderTabsProps = {
   onChange?: (index: number) => void;
   selectedIndex?: number;
 };
-export const HeaderTabs = ({
-  tabs,
-  onChange,
-  selectedIndex,
-}: HeaderTabsProps) => {
+export function HeaderTabs(props: HeaderTabsProps) {
+  const { tabs, onChange, selectedIndex } = props;
   const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);
   const styles = useStyles();
 
@@ -101,4 +98,4 @@ export const HeaderTabs = ({
       </Tabs>
     </div>
   );
-};
+}

packages/core-components/src/layout/HomepageTimer/HomepageTimer.tsx

@@ -67,7 +67,7 @@ function getTimes(configApi: ConfigApi) {
   return clocks;
 }
 
-export const HomepageTimer = () => {
+export function HomepageTimer(_props: {}) {
   const configApi = useApi(configApiRef);
 
   const defaultTimes: TimeObj[] = [];
@@ -99,4 +99,4 @@ export const HomepageTimer = () => {
     );
   }
   return null;
-};
+}

packages/core-components/src/layout/InfoCard/InfoCard.tsx

@@ -128,26 +128,27 @@ type Props = {
   titleTypographyProps?: object;
 };
 
-export const InfoCard = ({
-  title,
-  subheader,
-  divider = true,
-  deepLink,
-  slackChannel,
-  errorBoundaryProps,
-  variant,
-  children,
-  headerStyle,
-  headerProps,
-  action,
-  actionsClassName,
-  actions,
-  cardClassName,
-  actionsTopRight,
-  className,
-  noPadding,
-  titleTypographyProps,
-}: Props): JSX.Element => {
+export function InfoCard(props: Props): JSX.Element {
+  const {
+    title,
+    subheader,
+    divider = true,
+    deepLink,
+    slackChannel,
+    errorBoundaryProps,
+    variant,
+    children,
+    headerStyle,
+    headerProps,
+    action,
+    actionsClassName,
+    actions,
+    cardClassName,
+    actionsTopRight,
+    className,
+    noPadding,
+    titleTypographyProps,
+  } = props;
   const classes = useStyles();
   /**
    * If variant is specified, we build up styles for that particular variant for both
@@ -214,4 +215,4 @@ export const InfoCard = ({
       </ErrorBoundary>
     </Card>
   );
-};
+}

packages/core-components/src/layout/ItemCard/ItemCard.tsx

@@ -62,16 +62,9 @@ type ItemCardProps = {
  * @deprecated Use plain MUI <Card> and composable helpers instead.
  * @see https://material-ui.com/components/cards/
  */
-export const ItemCard = ({
-  description,
-  tags,
-  title,
-  type,
-  subtitle,
-  label,
-  onClick,
-  href,
-}: ItemCardProps) => {
+export function ItemCard(props: ItemCardProps) {
+  const { description, tags, title, type, subtitle, label, onClick, href } =
+    props;
   return (
     <Card>
       <CardMedia>
@@ -101,4 +94,4 @@ export const ItemCard = ({
       </CardActions>
     </Card>
   );
-};
+}

packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx

@@ -51,7 +51,7 @@ export type ItemCardGridProps = Partial<WithStyles<typeof styles>> & {
  * This can be useful for e.g. overriding gridTemplateColumns to adapt the
  * minimum size of the cells to fit the content better.
  */
-export const ItemCardGrid = (props: ItemCardGridProps) => {
+export function ItemCardGrid(props: ItemCardGridProps) {
   const { children, ...otherProps } = props;
   const classes = useStyles(otherProps);
   return (
@@ -59,4 +59,4 @@ export const ItemCardGrid = (props: ItemCardGridProps) => {
       {children}
     </div>
   );
-};
+}

packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx

@@ -72,7 +72,7 @@ export type ItemCardHeaderProps = Partial<WithStyles<typeof styles>> & {
  *   <ItemCardHeader title="Hello" classes={{ root: myClassName }} />
  * </code>
  */
-export const ItemCardHeader = (props: ItemCardHeaderProps) => {
+export function ItemCardHeader(props: ItemCardHeaderProps) {
   const { title, subtitle, children } = props;
   const classes = useStyles(props);
   return (
@@ -90,4 +90,4 @@ export const ItemCardHeader = (props: ItemCardHeaderProps) => {
       {children}
     </div>
   );
-};
+}

packages/core-components/src/layout/Page/Page.tsx

@@ -34,7 +34,8 @@ type Props = {
   themeId: string;
 };
 
-export const Page = ({ themeId, children }: PropsWithChildren<Props>) => {
+export function Page(props: PropsWithChildren<Props>) {
+  const { themeId, children } = props;
   const classes = useStyles();
   return (
     <ThemeProvider
@@ -46,4 +47,4 @@ export const Page = ({ themeId, children }: PropsWithChildren<Props>) => {
       <div className={classes.root}>{children}</div>
     </ThemeProvider>
   );
-};
+}

packages/core-components/src/layout/Page/PageWithHeader.tsx

@@ -23,13 +23,12 @@ type PageWithHeaderProps = ComponentProps<typeof Header> & {
   themeId: string;
 };
 
-export const PageWithHeader = ({
-  themeId,
-  children,
-  ...props
-}: PropsWithChildren<PageWithHeaderProps>) => (
-  <Page themeId={themeId}>
-    <Header {...props} />
-    {children}
-  </Page>
-);
+export function PageWithHeader(props: PropsWithChildren<PageWithHeaderProps>) {
+  const { themeId, children, ...restProps } = props;
+  return (
+    <Page themeId={themeId}>
+      <Header {...restProps} />
+      {children}
+    </Page>
+  );
+}

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -74,11 +74,12 @@ type Props = {
   closeDelayMs?: number;
 };
 
-export const Sidebar = ({
-  openDelayMs = sidebarConfig.defaultOpenDelayMs,
-  closeDelayMs = sidebarConfig.defaultCloseDelayMs,
-  children,
-}: PropsWithChildren<Props>) => {
+export function Sidebar(props: PropsWithChildren<Props>) {
+  const {
+    openDelayMs = sidebarConfig.defaultOpenDelayMs,
+    closeDelayMs = sidebarConfig.defaultCloseDelayMs,
+    children,
+  } = props;
   const classes = useStyles();
   const isSmallScreen = useMediaQuery<BackstageTheme>(theme =>
     theme.breakpoints.down('md'),
@@ -149,4 +150,4 @@ export const Sidebar = ({
       </SidebarContext.Provider>
     </div>
   );
-};
+}

packages/core-components/src/layout/Sidebar/Intro.tsx

@@ -74,7 +74,7 @@ type IntroCardProps = {
   onClose: () => void;
 };
 
-export const IntroCard = (props: IntroCardProps) => {
+export function IntroCard(props: IntroCardProps) {
   const classes = useStyles();
   const { text, onClose } = props;
   const handleClose = () => onClose();
@@ -97,7 +97,7 @@ export const IntroCard = (props: IntroCardProps) => {
       </div>
     </div>
   );
-};
+}
 
 type SidebarIntroLocalStorage = {
   starredItemsDismissed: boolean;
@@ -127,7 +127,7 @@ Keep an eye out for the little star icon (⭐) next to the plugin name and give
 const recentlyViewedIntroText =
   'And your recently viewed plugins will pop up here!';
 
-export const SidebarIntro = () => {
+export function SidebarIntro(_props: {}) {
   const { isOpen } = useContext(SidebarContext);
   const defaultValue = {
     starredItemsDismissed: false,
@@ -177,4 +177,4 @@ export const SidebarIntro = () => {
       )}
     </>
   );
-};
+}

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -282,7 +282,7 @@ type SidebarSearchFieldProps = {
   to?: string;
 };
 
-export const SidebarSearchField = (props: SidebarSearchFieldProps) => {
+export function SidebarSearchField(props: SidebarSearchFieldProps) {
   const [input, setInput] = useState('');
   const classes = useStyles();
 
@@ -334,7 +334,7 @@ export const SidebarSearchField = (props: SidebarSearchFieldProps) => {
       </SidebarItem>
     </div>
   );
-};
+}
 
 export const SidebarSpace = styled('div')({
   flex: 1,

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -49,7 +49,7 @@ export const SidebarPinStateContext = createContext<SidebarPinStateContextType>(
   },
 );
 
-export const SidebarPage = (props: PropsWithChildren<{}>) => {
+export function SidebarPage(props: PropsWithChildren<{}>) {
   const [isPinned, setIsPinned] = useState(() =>
     LocalStorage.getSidebarPinState(),
   );
@@ -71,4 +71,4 @@ export const SidebarPage = (props: PropsWithChildren<{}>) => {
       <div className={classes.root}>{props.children}</div>
     </SidebarPinStateContext.Provider>
   );
-};
+}

packages/core-components/src/layout/SignInPage/SignInPage.tsx

@@ -192,10 +192,10 @@ export const SingleSignInPage = ({
   );
 };
 
-export const SignInPage = (props: Props) => {
+export function SignInPage(props: Props) {
   if ('provider' in props) {
     return <SingleSignInPage {...props} />;
   }
 
   return <MultiSignInPage {...props} />;
-};
+}

packages/core-components/src/layout/TabbedCard/TabbedCard.tsx

@@ -62,15 +62,16 @@ type Props = {
   deepLink?: BottomLinkProps;
 };
 
-const TabbedCard = ({
-  slackChannel,
-  errorBoundaryProps,
-  children,
-  title,
-  deepLink,
-  value,
-  onChange,
-}: PropsWithChildren<Props>) => {
+export function TabbedCard(props: PropsWithChildren<Props>) {
+  const {
+    slackChannel,
+    errorBoundaryProps,
+    children,
+    title,
+    deepLink,
+    value,
+    onChange,
+  } = props;
   const tabsClasses = useTabsStyles();
   const [selectedIndex, selectIndex] = useState(0);
 
@@ -111,7 +112,7 @@ const TabbedCard = ({
       </ErrorBoundary>
     </Card>
   );
-};
+}
 
 const useCardTabStyles = makeStyles(theme => ({
   root: {
@@ -135,10 +136,9 @@ type CardTabProps = TabProps & {
   children: ReactNode;
 };
 
-const CardTab = ({ children, ...props }: PropsWithChildren<CardTabProps>) => {
+export function CardTab(props: PropsWithChildren<CardTabProps>) {
+  const { children, ...restProps } = props;
   const classes = useCardTabStyles();
 
-  return <Tab disableRipple classes={classes} {...props} />;
-};
-
-export { TabbedCard, CardTab };
+  return <Tab disableRipple classes={classes} {...restProps} />;
+}