[chore] Swizzle docusaurus components to use StyleX for everything

packages/docs/src/theme/Footer/Copyright/index.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import * as stylex from '@stylexjs/stylex';
+
+const styles = stylex.create({
+  copyright: {
+    textAlign: 'center',
+  },
+});
+
+export default function FooterCopyright({ copyright, xstyle }) {
+  return (
+    <div
+      {...stylex.props(styles.copyright, xstyle)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: copyright }}
+    />
+  );
+}

packages/docs/src/theme/Footer/Layout/index.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+
+const MOBILE = '@media (max-width: 996px)';
+const PRINT = '@media print';
+
+const styles = stylex.create({
+  footer: {
+    backgroundColor: 'var(--ifm-footer-background-color)',
+    color: 'var(--ifm-footer-color)',
+    paddingBlock: 'var(--ifm-footer-padding-vertical)',
+    paddingInline: {
+      default: 'var(--ifm-footer-padding-horizontal)',
+      [MOBILE]: 0,
+    },
+    textAlign: 'center',
+    display: {
+      [PRINT]: 'none',
+    },
+  },
+  footerDark: {
+    '--ifm-footer-background-color': '#303846',
+    '--ifm-footer-color': 'var(--ifm-footer-link-color)',
+    '--ifm-footer-link-color': 'var(--ifm-color-secondary)',
+    '--ifm-footer-title-color': 'var(--ifm-color-white)',
+  },
+  container: {
+    marginInline: 'auto',
+    maxWidth: 'var(--ifm-container-width)',
+    paddingInline: 'var(--ifm-spacing-horizontal)',
+    width: '100%',
+  },
+  containerFluid: {
+    maxWidth: 'inherit',
+  },
+  footerContainer: {
+    maxWidth: '960px',
+  },
+  footerBottom: {
+    textAlign: 'center',
+  },
+  marginBottomSm: {
+    marginBottom: '0.5rem',
+  },
+});
+
+export default function FooterLayout({ style, links, logo, copyright }) {
+  const footerStyleProps = stylex.props(
+    styles.footer,
+    style === 'dark' && styles.footerDark,
+  );
+  const footerClassName =
+    [footerStyleProps.className, ThemeClassNames.layout.footer.container]
+      .filter(Boolean)
+      .join(' ') || undefined;
+  const { className: _footerClass, ...footerProps } = footerStyleProps;
+
+  const containerProps = stylex.props(
+    styles.container,
+    styles.containerFluid,
+    styles.footerContainer,
+  );
+  const footerBottomProps = stylex.props(styles.footerBottom);
+  const logoMarginProps = stylex.props(styles.marginBottomSm);
+
+  return (
+    <footer {...footerProps} className={footerClassName}>
+      <div {...containerProps}>
+        {links}
+        {(logo || copyright) && (
+          <div {...footerBottomProps}>
+            {logo && <div {...logoMarginProps}>{logo}</div>}
+            {copyright}
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}

packages/docs/src/theme/Footer/LinkItem/index.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import * as stylex from '@stylexjs/stylex';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+
+const MOBILE = '@media (max-width: 996px)';
+
+const styles = stylex.create({
+  linkItem: {
+    color: {
+      default: 'var(--ifm-footer-link-color)',
+      ':hover': 'var(--ifm-footer-link-hover-color)',
+    },
+    lineHeight: 2,
+    display: {
+      [MOBILE]: 'block',
+    },
+  },
+});
+
+export default function FooterLinkItem({ item, xstyle }) {
+  const { to, href, label, prependBaseUrlToHref, ...props } = item;
+  const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true });
+
+  return (
+    <Link
+      {...stylex.props(styles.linkItem, xstyle)}
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            to: toUrl,
+          })}
+      {...props}
+    >
+      {label}
+      {href && !isInternalUrl(href) && <IconExternalLink />}
+    </Link>
+  );
+}

packages/docs/src/theme/Footer/Links/MultiColumn/index.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import LinkItem from '@theme/Footer/LinkItem';
+
+const MOBILE = '@media (max-width: 996px)';
+
+const styles = stylex.create({
+  row: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    marginInline: 'calc(var(--ifm-spacing-horizontal) * -1)',
+    marginBottom: '1rem',
+  },
+  col: {
+    // '--ifm-col-width': '100%',
+    // flexBasis: 'var(--ifm-col-width)',
+    flexGrow: 1,
+    flexShrink: 0,
+    marginLeft: 0,
+    // maxWidth: 'var(--ifm-col-width)',
+    paddingInline: 'var(--ifm-spacing-horizontal)',
+    width: {
+      [MOBILE]: '100%',
+    },
+    marginBottom: {
+      [MOBILE]: 'calc(var(--ifm-spacing-vertical) * 3)',
+    },
+  },
+  title: {
+    color: 'var(--ifm-footer-title-color)',
+    fontFamily: 'var(--ifm-font-family-base)',
+    fontSize: 'var(--ifm-h4-font-size)',
+    fontWeight: 'var(--ifm-font-weight-bold)',
+    lineHeight: 'var(--ifm-heading-line-height)',
+    marginBottom: 'var(--ifm-heading-margin-bottom)',
+  },
+  list: {
+    listStyle: 'none',
+    marginBottom: 0,
+    paddingLeft: 0,
+  },
+  item: {
+    marginTop: 0,
+  },
+});
+
+function ColumnLinkItem({ item, xstyle }) {
+  return item.html ? (
+    <li
+      {...stylex.props(styles.item, xstyle)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: item.html }}
+    />
+  ) : (
+    <li key={item.href ?? item.to} {...stylex.props(styles.item, xstyle)}>
+      <LinkItem item={item} />
+    </li>
+  );
+}
+
+function Column({ column, xstyle }) {
+  const columnProps = stylex.props(styles.col, xstyle);
+  const { className: _colClass, ...columnRest } = columnProps;
+  const columnClassName =
+    [ThemeClassNames.layout.footer.column, columnProps.className]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  return (
+    <div {...columnRest} className={columnClassName}>
+      <div {...stylex.props(styles.title)}>{column.title}</div>
+      <ul {...stylex.props(styles.list)}>
+        {column.items.map((item, i) => (
+          <ColumnLinkItem item={item} key={i} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function FooterLinksMultiColumn({ columns, xstyle }) {
+  return (
+    <div {...stylex.props(styles.row, xstyle)}>
+      {columns.map((column, i) => (
+        <Column column={column} key={i} />
+      ))}
+    </div>
+  );
+}

packages/docs/src/theme/Footer/Links/Simple/index.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import * as stylex from '@stylexjs/stylex';
+import LinkItem from '@theme/Footer/LinkItem';
+
+const MOBILE = '@media (max-width: 996px)';
+
+const styles = stylex.create({
+  wrapper: {
+    textAlign: 'center',
+    marginBottom: '1rem',
+  },
+  links: {
+    marginBottom: '1rem',
+  },
+  separator: {
+    marginInline: 'var(--ifm-footer-link-horizontal-spacing)',
+    display: {
+      [MOBILE]: 'none',
+    },
+  },
+  linkItem: {
+    color: {
+      default: 'var(--ifm-footer-link-color)',
+      ':hover': 'var(--ifm-footer-link-hover-color)',
+    },
+    lineHeight: 2,
+    display: {
+      [MOBILE]: 'block',
+    },
+    width: {
+      [MOBILE]: 'max-content',
+    },
+  },
+});
+
+function Separator({ xstyle }) {
+  return <span {...stylex.props(styles.separator, xstyle)} />;
+}
+
+function SimpleLinkItem({ item, xstyle }) {
+  return item.html ? (
+    <span
+      {...stylex.props(styles.linkItem, xstyle)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: item.html }}
+    />
+  ) : (
+    <LinkItem item={item} xstyle={xstyle} />
+  );
+}
+
+export default function FooterLinksSimple({ links, xstyle }) {
+  return (
+    <div {...stylex.props(styles.wrapper, xstyle)}>
+      <div {...stylex.props(styles.links)}>
+        {links.map((item, i) => (
+          <React.Fragment key={i}>
+            <SimpleLinkItem item={item} />
+            {links.length !== i + 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}

packages/docs/src/theme/Footer/Links/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { isMultiColumnFooterLinks } from '@docusaurus/theme-common';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+
+export default function FooterLinks({ links }) {
+  return isMultiColumnFooterLinks(links) ? (
+    <FooterLinksMultiColumn columns={links} />
+  ) : (
+    <FooterLinksSimple links={links} />
+  );
+}