refactor: unify export directive style (#6751)

website/src/components/BrowserWindow/index.tsx

@@ -15,7 +15,7 @@ interface Props {
   url: string;
 }
 
-function BrowserWindow({
+export default function BrowserWindow({
   children,
   minHeight,
   url = 'http://localhost:3000',
@@ -42,5 +42,3 @@ function BrowserWindow({
     </div>
   );
 }
-
-export default BrowserWindow;

website/src/components/ColorGenerator/index.tsx

@@ -34,7 +34,7 @@ function wcagContrast(foreground: string, background: string) {
   return contrast > 7 ? 'AAA 🏅' : contrast > 4.5 ? 'AA 👍' : 'Fail 🔴';
 }
 
-function ColorGenerator(): JSX.Element {
+export default function ColorGenerator(): JSX.Element {
   const {isDarkTheme, setDarkTheme, setLightTheme} = useColorMode();
   const DEFAULT_PRIMARY_COLOR = isDarkTheme
     ? DARK_PRIMARY_COLOR
@@ -301,5 +301,3 @@ ${getAdjustedColors(shades, baseColor)
     </div>
   );
 }
-
-export default ColorGenerator;

website/src/pages/index.tsx

@@ -230,7 +230,7 @@ function FeaturesContainer() {
   );
 }
 
-function Home(): JSX.Element {
+export default function Home(): JSX.Element {
   const {
     siteConfig: {customFields, tagline},
   } = useDocusaurusContext();
@@ -250,5 +250,3 @@ function Home(): JSX.Element {
     </Layout>
   );
 }
-
-export default Home;

website/src/pages/showcase/_components/ShowcaseCard/index.tsx

@@ -59,38 +59,40 @@ function ShowcaseCardTag({tags}: {tags: TagType[]}) {
   );
 }
 
-const ShowcaseCard = memo(({user}: {user: User}) => (
-  <li key={user.title} className="card shadow--md">
-    <div className={clsx('card__image', styles.showcaseCardImage)}>
-      <Image img={user.preview} alt={user.title} />
-    </div>
-    <div className="card__body">
-      <div className={clsx(styles.showcaseCardHeader)}>
-        <h4 className={styles.showcaseCardTitle}>
-          <Link href={user.website} className={styles.showcaseCardLink}>
-            {user.title}
-          </Link>
-        </h4>
-        {user.tags.includes('favorite') && (
-          <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
-        )}
-        {user.source && (
-          <Link
-            href={user.source}
-            className={clsx(
-              'button button--secondary button--sm',
-              styles.showcaseCardSrcBtn,
-            )}>
-            <Translate id="showcase.card.sourceLink">source</Translate>
-          </Link>
-        )}
+function ShowcaseCard({user}: {user: User}) {
+  return (
+    <li key={user.title} className="card shadow--md">
+      <div className={clsx('card__image', styles.showcaseCardImage)}>
+        <Image img={user.preview} alt={user.title} />
       </div>
-      <p className={styles.showcaseCardBody}>{user.description}</p>
-    </div>
-    <ul className={clsx('card__footer', styles.cardFooter)}>
-      <ShowcaseCardTag tags={user.tags} />
-    </ul>
-  </li>
-));
+      <div className="card__body">
+        <div className={clsx(styles.showcaseCardHeader)}>
+          <h4 className={styles.showcaseCardTitle}>
+            <Link href={user.website} className={styles.showcaseCardLink}>
+              {user.title}
+            </Link>
+          </h4>
+          {user.tags.includes('favorite') && (
+            <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
+          )}
+          {user.source && (
+            <Link
+              href={user.source}
+              className={clsx(
+                'button button--secondary button--sm',
+                styles.showcaseCardSrcBtn,
+              )}>
+              <Translate id="showcase.card.sourceLink">source</Translate>
+            </Link>
+          )}
+        </div>
+        <p className={styles.showcaseCardBody}>{user.description}</p>
+      </div>
+      <ul className={clsx('card__footer', styles.cardFooter)}>
+        <ShowcaseCardTag tags={user.tags} />
+      </ul>
+    </li>
+  );
+}
 
-export default ShowcaseCard;
+export default memo(ShowcaseCard);

website/src/pages/showcase/_components/ShowcaseTagSelect/index.tsx

@@ -39,59 +39,58 @@ function replaceSearchTags(search: string, newTags: TagType[]) {
   return searchParams.toString();
 }
 
-const ShowcaseTagSelect = React.forwardRef<HTMLLabelElement, Props>(
-  ({id, icon, label, tag, ...rest}, ref) => {
-    const location = useLocation();
-    const history = useHistory();
-    const [selected, setSelected] = useState(false);
-    useEffect(() => {
-      const tags = readSearchTags(location.search);
-      setSelected(tags.includes(tag));
-    }, [tag, location]);
-    const toggleTag = useCallback(() => {
-      const tags = readSearchTags(location.search);
-      const newTags = toggleListItem(tags, tag);
-      const newSearch = replaceSearchTags(location.search, newTags);
-      history.push({
-        ...location,
-        search: newSearch,
-        state: prepareUserState(),
-      });
-    }, [tag, location, history]);
-    return (
-      <>
-        <input
-          type="checkbox"
-          id={id}
-          className="screen-reader-only"
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              toggleTag();
-            }
-          }}
-          onFocus={(e) => {
-            if (e.relatedTarget) {
-              e.target.nextElementSibling?.dispatchEvent(
-                new KeyboardEvent('focus'),
-              );
-            }
-          }}
-          onBlur={(e) => {
+function ShowcaseTagSelect(
+  {id, icon, label, tag, ...rest}: Props,
+  ref: React.ForwardedRef<HTMLLabelElement>,
+) {
+  const location = useLocation();
+  const history = useHistory();
+  const [selected, setSelected] = useState(false);
+  useEffect(() => {
+    const tags = readSearchTags(location.search);
+    setSelected(tags.includes(tag));
+  }, [tag, location]);
+  const toggleTag = useCallback(() => {
+    const tags = readSearchTags(location.search);
+    const newTags = toggleListItem(tags, tag);
+    const newSearch = replaceSearchTags(location.search, newTags);
+    history.push({
+      ...location,
+      search: newSearch,
+      state: prepareUserState(),
+    });
+  }, [tag, location, history]);
+  return (
+    <>
+      <input
+        type="checkbox"
+        id={id}
+        className="screen-reader-only"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            toggleTag();
+          }
+        }}
+        onFocus={(e) => {
+          if (e.relatedTarget) {
             e.target.nextElementSibling?.dispatchEvent(
-              new KeyboardEvent('blur'),
+              new KeyboardEvent('focus'),
             );
-          }}
-          onChange={toggleTag}
-          checked={selected}
-          {...rest}
-        />
-        <label ref={ref} htmlFor={id} className={styles.checkboxLabel}>
-          {label}
-          {icon}
-        </label>
-      </>
-    );
-  },
-);
+          }
+        }}
+        onBlur={(e) => {
+          e.target.nextElementSibling?.dispatchEvent(new KeyboardEvent('blur'));
+        }}
+        onChange={toggleTag}
+        checked={selected}
+        {...rest}
+      />
+      <label ref={ref} htmlFor={id} className={styles.checkboxLabel}>
+        {label}
+        {icon}
+      </label>
+    </>
+  );
+}
 
-export default ShowcaseTagSelect;
+export default React.forwardRef(ShowcaseTagSelect);

website/src/pages/showcase/index.tsx

@@ -325,7 +325,7 @@ function ShowcaseCards() {
   );
 }
 
-function Showcase(): JSX.Element {
+export default function Showcase(): JSX.Element {
   return (
     <Layout title={TITLE} description={DESCRIPTION}>
       <main className="margin-vert--lg">
@@ -336,5 +336,3 @@ function Showcase(): JSX.Element {
     </Layout>
   );
 }
-
-export default Showcase;

website/src/pages/versions.tsx

@@ -34,7 +34,7 @@ function ReleaseNotesLabel() {
   );
 }
 
-function Version(): JSX.Element {
+export default function Version(): JSX.Element {
   const {
     siteConfig: {organizationName, projectName},
   } = useDocusaurusContext();
@@ -191,5 +191,3 @@ function Version(): JSX.Element {
     </Layout>
   );
 }
-
-export default Version;

website/src/plugins/changelog/theme/ChangelogAuthor/index.tsx

@@ -11,7 +11,7 @@ import type {Props} from '@theme/BlogPostAuthor';
 
 import styles from './styles.module.css';
 
-function ChangelogAuthor({author}: Props): JSX.Element {
+export default function ChangelogAuthor({author}: Props): JSX.Element {
   const {name, url, imageURL} = author;
   return (
     <div className="avatar margin-bottom--sm">
@@ -33,5 +33,3 @@ function ChangelogAuthor({author}: Props): JSX.Element {
     </div>
   );
 }
-
-export default ChangelogAuthor;

website/src/plugins/changelog/theme/ChangelogItem/index.tsx

@@ -18,7 +18,7 @@ import type {Props} from '@theme/BlogPostItem';
 import styles from './styles.module.css';
 import ChangelogAuthors from '@theme/ChangelogAuthors';
 
-function ChangelogItem(props: Props): JSX.Element {
+export default function ChangelogItem(props: Props): JSX.Element {
   const {withBaseUrl} = useBaseUrlUtils();
   const {
     children,
@@ -75,5 +75,3 @@ function ChangelogItem(props: Props): JSX.Element {
     </article>
   );
 }
-
-export default ChangelogItem;

website/src/plugins/changelog/theme/ChangelogList/index.tsx

@@ -15,7 +15,7 @@ import ChangelogItem from '@theme/ChangelogItem';
 
 import styles from './styles.module.css';
 
-function ChangelogList(props: Props): JSX.Element {
+export default function ChangelogList(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
   const {blogDescription, blogTitle} = metadata;
 
@@ -88,5 +88,3 @@ function ChangelogList(props: Props): JSX.Element {
     </BlogLayout>
   );
 }
-
-export default ChangelogList;

website/src/plugins/changelog/theme/ChangelogPage/index.tsx

@@ -18,7 +18,7 @@ import Link from '@docusaurus/Link';
 // This page doesn't change anything. It's just swapping BlogPostItem with our
 // own ChangelogItem. We don't want to apply the swizzled item to the actual
 // blog.
-function BlogPostPage(props: Props): JSX.Element {
+export default function BlogPostPage(props: Props): JSX.Element {
   const {content: BlogPostContents, sidebar} = props;
   const {assets, metadata} = BlogPostContents;
   const {
@@ -99,5 +99,3 @@ function BlogPostPage(props: Props): JSX.Element {
     </BlogLayout>
   );
 }
-
-export default BlogPostPage;

website/src/plugins/changelog/theme/IconExpand/index.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 
 import type {Props} from '@theme/IconExpand';
 
-function IconExpand({expanded, ...props}: Props): JSX.Element {
+export default function IconExpand({expanded, ...props}: Props): JSX.Element {
   if (expanded) {
     return (
       <svg
@@ -33,5 +33,3 @@ function IconExpand({expanded, ...props}: Props): JSX.Element {
     </svg>
   );
 }
-
-export default IconExpand;

website/src/plugins/changelog/theme/types.d.ts

@@ -15,6 +15,5 @@ declare module '@theme/IconExpand' {
     expanded?: boolean;
   }
 
-  const IconExpand: (props: Props) => JSX.Element;
-  export default IconExpand;
+  export default function IconExpand(props: Props): JSX.Element;
 }

website/src/plugins/featureRequests/FeatureRequestsPage.tsx

@@ -14,7 +14,11 @@ import styles from './styles.module.css';
 
 const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91';
 
-function FeatureRequests({basePath}: {basePath: string}): JSX.Element {
+export default function FeatureRequests({
+  basePath,
+}: {
+  basePath: string;
+}): JSX.Element {
   useEffect(() => {
     cannyScript();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -34,5 +38,3 @@ function FeatureRequests({basePath}: {basePath: string}): JSX.Element {
     </Layout>
   );
 }
-
-export default FeatureRequests;

website/src/theme/ReactLiveScope/index.ts

@@ -9,10 +9,8 @@ import React from 'react';
 import * as components from './components';
 
 // Add react-live imports you need here
-const ReactLiveScope = {
+export default {
   React,
   ...React,
   ...components,
 };
-
-export default ReactLiveScope;