diff --git a/docs/package.json b/docs/package.json index 602ac88fc3..3393252889 100644 --- a/docs/package.json +++ b/docs/package.json @@ -29,7 +29,7 @@ "@emotion/styled": "^11.10.6", "@mdx-js/react": "^1.6.22", "@mui/material": "^5.12.0", - "@swmansion/t-rex-ui": "^0.0.3", + "@swmansion/t-rex-ui": "^0.0.9", "@vercel/og": "^0.6.2", "babel-polyfill": "^6.26.0", "babel-preset-expo": "^9.2.2", diff --git a/docs/src/css/colors.css b/docs/src/css/colors.css index 934a659add..b11c9ef1eb 100644 --- a/docs/src/css/colors.css +++ b/docs/src/css/colors.css @@ -114,9 +114,9 @@ --swm-color-mode-enabled: var(--swm-navy-light-20); --swm-color-mode-disabled-color: var(--swm-navy-light-20); - --swm-color-mode-enabled-landing: var(--swm-off-white); - --swm-color-mode-enabled-color-landing: var(--ifm-font-color-base); - --swm-color-mode-disabled-color-landing: var(--swm-off-white); + --swm-color-mode-enabled-landing: var(--ifm-font-color-base); + --swm-color-mode-enabled-color-landing: var(--swm-off-white); + --swm-color-mode-disabled-color-landing: var(--ifm-font-color-base); /* Typography */ --ifm-heading-color: var(--ifm-color-primary); @@ -211,6 +211,8 @@ --swm-search-hit-border-hover: var(--swm-blue-light-100); --swm-search-hit-active-color: var(--swm-off-white); + --swm-docsearch-hit-source-color: var(--swm-navy-light-100); + --swm-search-hit-results-color: var(--swm-navy-light-40); --swm-search-page-query-text-color: var(--swm-navy-light-100); @@ -375,6 +377,8 @@ --swm-search-hit-border-hover: var(--swm-blue-dark-40); --swm-search-hit-active-color: var(--swm-navy-light-100); + --swm-docsearch-hit-source-color: var(--swm-navy-light-10); + --swm-search-hit-results-color: var(--swm-navy-light-20); --swm-search-page-query-text-color: var(--swm-navy-light-10); diff --git a/docs/src/css/overrides.css b/docs/src/css/overrides.css index d39fd143b9..bcab954495 100644 --- a/docs/src/css/overrides.css +++ b/docs/src/css/overrides.css @@ -1,6 +1,8 @@ :root { --swm-expandable-transition: transform 200ms ease; --ifm-code-font-size: 14px; + --swm-logo-title-width: 177px; + --swm-logo-height: 50px !important; } [class*='plugin-pages'] { @@ -129,3 +131,12 @@ table thead tr { -webkit-text-size-adjust: 100%; } } + +[class*='navbar__link']:not([class*='header-github']):not([role='button']) { + display: none; +} + +/* TODO: Remove after @swmansion-t-rex-ui 0.0.10 patch */ +button[class*='DocSearch-Button'] { + margin: 0 !important; +} diff --git a/docs/src/theme/Admonition/index.js b/docs/src/theme/Admonition/index.js index 888a944a34..d17aa7fa7a 100644 --- a/docs/src/theme/Admonition/index.js +++ b/docs/src/theme/Admonition/index.js @@ -1,141 +1,3 @@ -import React from 'react'; -import clsx from 'clsx'; -import { ThemeClassNames } from '@docusaurus/theme-common'; -import Translate from '@docusaurus/Translate'; -import ThemedImage from '@theme/ThemedImage'; -import styles from './styles.module.css'; -import useBaseUrl from '@docusaurus/useBaseUrl'; +import { Admonition } from '@swmansion/t-rex-ui'; -const AdmonitionConfigs = { - note: { - infimaClassName: 'secondary', - label: ( - - note - - ), - }, - tip: { - infimaClassName: 'success', - label: ( - - tip - - ), - }, - danger: { - infimaClassName: 'danger', - label: ( - - danger - - ), - }, - info: { - infimaClassName: 'info', - label: ( - - info - - ), - }, - caution: { - infimaClassName: 'caution', - label: ( - - caution - - ), - }, -}; -// Legacy aliases, undocumented but kept for retro-compatibility -const aliases = { - secondary: 'note', - important: 'info', - success: 'tip', - warning: 'danger', -}; - -export default function Admonition(props) { - const { - children, - type, - title, - icon: iconProp, - } = processAdmonitionProps(props); - const typeConfig = getAdmonitionConfig(type); - const titleLabel = title ?? typeConfig.label; - - const dangerIcon = { - light: useBaseUrl('/img/danger.svg'), - dark: useBaseUrl('/img/danger-dark.svg'), - }; - - return ( -
-
-
- -
- - {titleLabel} -
-
{children}
-
- ); - - function getAdmonitionConfig(unsafeType) { - const type = aliases[unsafeType] ?? unsafeType; - const config = AdmonitionConfigs[type]; - if (config) { - return config; - } - console.warn( - `No admonition config found for admonition type "${type}". Using Info as fallback.` - ); - return AdmonitionConfigs.info; - } -} - -// Workaround because it's difficult in MDX v1 to provide a MDX title as props -// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682 -function extractMDXAdmonitionTitle(children) { - const items = React.Children.toArray(children); - const mdxAdmonitionTitle = items.find( - (item) => - React.isValidElement(item) && item.props?.mdxType === 'mdxAdmonitionTitle' - ); - const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}; - return { - mdxAdmonitionTitle, - rest, - }; -} - -function processAdmonitionProps(props) { - const { mdxAdmonitionTitle, rest } = extractMDXAdmonitionTitle( - props.children - ); - return { - ...props, - title: props.title ?? mdxAdmonitionTitle, - children: rest, - }; -} +export default Admonition; diff --git a/docs/src/theme/Admonition/styles.module.css b/docs/src/theme/Admonition/styles.module.css deleted file mode 100644 index 29fb108227..0000000000 --- a/docs/src/theme/Admonition/styles.module.css +++ /dev/null @@ -1,84 +0,0 @@ -.admonition { - --ifm-alert-border-radius: 0; - --ifm-alert-padding-vertical: 1.5rem; - --ifm-alert-padding-horizontal: 1.5rem; - - margin-bottom: 1.5em; -} - -.admonitionHeading { - display: flex; - font-family: var(--swm-admonition-heading-font-family); - font-weight: var(--swm-admonition-heading-font-weight); - text-transform: uppercase; - - margin-bottom: 1.1rem; -} - -.admonitionHeading code { - text-transform: none; -} - -.admonitionIcon { - display: flex; - margin-right: 0.4em; - - width: 21px; -} - -.admonitionIcon svg { - display: inline-block; - height: 100%; - width: 100%; -} - -.alert--secondary { - background-color: var(--swm-admonition-color-secondary); - box-shadow: -8px 8px 0 var(--swm-admonition-color-secondary-shadow); -} - -.alert--success { - background-color: var(--swm-admonition-color-success); - box-shadow: -8px 8px 0 var(--swm-admonition-color-success-shadow); -} - -.alert--danger { - background-color: var(--swm-admonition-color-danger); - box-shadow: -8px 8px 0 var(--swm-admonition-color-danger-shadow); -} - -.alert--info { - background-color: var(--swm-admonition-color-info); - box-shadow: -8px 8px 0 var(--swm-admonition-color-info-shadow); -} - -.alert--caution { - background-color: var(--swm-admonition-color-caution); - box-shadow: -8px 8px 0 var(--swm-admonition-color-caution-shadow); -} - -/* Styling for quote blocks (labels surrounded by ` sign) in admonitions. - A direct child of `code` tag is selected, because admonitions can be nested within each other. */ -[class*='admonition-secondary'] > [class*='admonitionContent'] > p code { - background-color: var(--swm-background-quote-secondary); -} - -[class*='admonition-success'] > [class*='admonitionContent'] > p code { - background-color: var(--swm-background-quote-green); -} - -[class*='admonition-danger'] > [class*='admonitionContent'] > p code { - background-color: var(--swm-background-quote-red); -} - -[class*='admonition-info'] > [class*='admonitionContent'] > p code { - background-color: var(--swm-background-quote-blue); -} - -[class*='admonition-caution'] > [class*='admonitionContent'] > p code { - background-color: var(--swm-background-quote-yellow); -} - -.admonitionContent > :last-child { - margin-bottom: 0; -} diff --git a/docs/src/theme/ColorModeToggle/index.js b/docs/src/theme/ColorModeToggle/index.js deleted file mode 100644 index 5a3d2c3b44..0000000000 --- a/docs/src/theme/ColorModeToggle/index.js +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import useIsBrowser from '@docusaurus/useIsBrowser'; -import { translate } from '@docusaurus/Translate'; -import IconLightMode from '@theme/Icon/LightMode'; -import IconDarkMode from '@theme/Icon/DarkMode'; -import styles from './styles.module.css'; -import { useColorScheme } from '@mui/material'; -import usePageType from '@site/src/hooks/usePageType'; -function ColorModeToggle({ className, buttonClassName, value, onChange }) { - const isBrowser = useIsBrowser(); - /* Color scheme switcher from MUI framework. */ - const { setMode } = useColorScheme(); - const { isLanding } = usePageType(); - - const title = translate( - { - message: 'Switch between dark and light mode (currently {mode})', - id: 'theme.colorToggle.ariaLabel', - description: 'The ARIA label for the navbar color mode toggle', - }, - { - mode: - value === 'dark' - ? translate({ - message: 'dark mode', - id: 'theme.colorToggle.ariaLabel.mode.dark', - description: 'The name for the dark color mode', - }) - : translate({ - message: 'light mode', - id: 'theme.colorToggle.ariaLabel.mode.light', - description: 'The name for the light color mode', - }), - } - ); - - const changeTheme = (value) => { - onChange(value); // Default theme switcher - setMode(value); // Color scheme switcher from MUI - }; - - return ( -
- -
- ); -} -export default React.memo(ColorModeToggle); diff --git a/docs/src/theme/ColorModeToggle/styles.module.css b/docs/src/theme/ColorModeToggle/styles.module.css deleted file mode 100644 index c83b157e9b..0000000000 --- a/docs/src/theme/ColorModeToggle/styles.module.css +++ /dev/null @@ -1,84 +0,0 @@ -.toggle { - height: calc(0.8 * var(--swm-logo-height)); - width: calc(1.6 * var(--swm-logo-height)); - - margin-right: 0; -} - -.toggleButton { - -webkit-tap-highlight-color: transparent; - - display: flex; - justify-content: center; - align-items: center; - - width: 100%; - height: 100%; - - border: 1px solid var(--swm-color-mode-enabled); - border-radius: 0; - box-shadow: none; - - transition: background var(--ifm-transition-fast); -} - -.toggleButton:hover { - background: var(--ifm-color-emphasis-200); -} - -.toggleButtonLanding.toggleButton:hover { - background: var(--swm-navy-light-20); -} - -.toggleButtonLanding { - border: 1px solid var(--swm-navy-light-100); -} - -[data-theme='dark'] .toggleButtonLanding { - border: 1px solid var(--swm-off-white); -} - -.toggleButtonDisabled { - cursor: not-allowed; -} - -.iconContainer { - display: flex; - align-items: center; - justify-content: center; - - flex: 1; - height: 100%; - - color: var(--swm-color-mode-disabled-color); -} - -.iconContainer svg { - width: 65%; - height: 65%; -} - -.iconLandingContainer { - color: var(--swm-landing-heading); -} - -.darkIconContainer { - flex: 1; - height: 100%; - transform: scaleX(-1); -} - -[data-theme='dark'] .darkToggleIcon, -[data-theme='light'] .lightToggleIcon { - color: var(--ifm-font-color-base); - background-color: var(--swm-color-mode-enabled); -} - -[data-theme='light'] .iconLandingContainer.lightToggleIcon { - color: var(--swm-white); - background-color: var(--ifm-font-color-base); -} -[data-theme='dark'] .iconLandingContainer.darkToggleIcon { - color: var(--swm-purple-dark-120); - background-color: var(--ifm-font-color-base); -} diff --git a/docs/src/theme/DocCard/index.js b/docs/src/theme/DocCard/index.js index 0dcf162581..b628abf7e8 100644 --- a/docs/src/theme/DocCard/index.js +++ b/docs/src/theme/DocCard/index.js @@ -1,92 +1,3 @@ -import React from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import { - findFirstCategoryLink, - useDocById, -} from '@docusaurus/theme-common/internal'; -import ThemedImage from '@theme/ThemedImage'; -import { translate } from '@docusaurus/Translate'; -import styles from './styles.module.css'; -import useBaseUrl from '@docusaurus/useBaseUrl'; +import { DocCard } from '@swmansion/t-rex-ui'; -function CardContainer({ href, children }) { - return ( - - {children} - - ); -} -function CardLayout({ href, title, description }) { - const cardIcons = { - light: useBaseUrl('/img/card-icon.svg'), - dark: useBaseUrl('/img/card-icon-dark.svg'), - }; - - return ( - -
- -
-
-

- {title} -

- {description && ( -

- {description} -

- )} -
- - ); -} -function CardCategory({ item }) { - const href = findFirstCategoryLink(item); - // Unexpected: categories that don't have a link have been filtered upfront - if (!href) { - return null; - } - return ( - - ); -} -function CardLink({ item }) { - const doc = useDocById(item.docId ?? undefined); - return ( - - ); -} -export default function DocCard({ item }) { - switch (item.type) { - case 'link': - return ; - case 'category': - return ; - default: - throw new Error(`unknown item type ${JSON.stringify(item)}`); - } -} +export default DocCard; diff --git a/docs/src/theme/DocCard/styles.module.css b/docs/src/theme/DocCard/styles.module.css deleted file mode 100644 index ec01c613b7..0000000000 --- a/docs/src/theme/DocCard/styles.module.css +++ /dev/null @@ -1,57 +0,0 @@ -.cardContainer { - --ifm-link-hover-decoration: none; - - box-shadow: none; - border: 1px solid var(--swm-card-border); - border-radius: 0; - background-color: var(--swm-card-background); - - transition: all var(--ifm-transition-fast) ease; - transition-property: border, box-shadow; - - display: flex; - flex-direction: row; -} - -.cardContainer:hover { - border: 1px solid var(--swm-card-border-hover); -} - -.cardContainer *:last-child { - margin-bottom: 0; -} - -/* Prevent labels from overflowing from cards */ -.cardLabels { - min-width: 0; -} - -.cardIconWrapper { - width: 24px; - margin-right: 8px; -} - -.cardIcon { - height: 24px; - min-width: 24px; - - margin: 4px 0 0 0; -} - -.cardContainer h2 { - font-size: 22px; - line-height: 1.3; - letter-spacing: var(--swm-heading-letter-spacing-smaller); -} - -.cardContainer p { - font-size: 16px; -} - -.cardTitle { - font-size: 1.2rem; -} - -.cardDescription { - font-size: 0.8rem; -} diff --git a/docs/src/theme/DocCategoryGeneratedIndexPage/index.js b/docs/src/theme/DocCategoryGeneratedIndexPage/index.js deleted file mode 100644 index d6f9db8eef..0000000000 --- a/docs/src/theme/DocCategoryGeneratedIndexPage/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import DocCategoryGeneratedIndexPage from '@theme-original/DocCategoryGeneratedIndexPage'; -import styles from './styles.module.css'; - -export default function DocCategoryGeneratedIndexPageWrapper(props) { - return ( - <> - - - ); -} diff --git a/docs/src/theme/DocCategoryGeneratedIndexPage/styles.module.css b/docs/src/theme/DocCategoryGeneratedIndexPage/styles.module.css deleted file mode 100644 index d780327145..0000000000 --- a/docs/src/theme/DocCategoryGeneratedIndexPage/styles.module.css +++ /dev/null @@ -1,3 +0,0 @@ -[class*='DocCategoryGeneratedIndexPage'][class*='title'] { - font-size: var(--swm-h1-font-size); -} diff --git a/docs/src/theme/DocItem/Metadata/index.js b/docs/src/theme/DocItem/Metadata/index.js index 593c504ad9..d3ad5244a6 100644 --- a/docs/src/theme/DocItem/Metadata/index.js +++ b/docs/src/theme/DocItem/Metadata/index.js @@ -1,23 +1,3 @@ -import React from 'react'; -import { PageMetadata } from '@docusaurus/theme-common'; -import { useDoc } from '@docusaurus/theme-common/internal'; -export default function DocItemMetadata() { - const { metadata, frontMatter } = useDoc(); +import { DocItemMetadata } from '@swmansion/t-rex-ui'; - if (!metadata) return null; - - const ogImageName = metadata.title - .replace(/[ /]/g, '-') - .replace(/`/g, '') - .replace(/:/g, '') - .toLowerCase(); - - return ( - - ); -} +export default DocItemMetadata; diff --git a/docs/src/theme/DocItem/TOC/Mobile/index.js b/docs/src/theme/DocItem/TOC/Mobile/index.js index bc8b0f989b..5c4a9623e4 100644 --- a/docs/src/theme/DocItem/TOC/Mobile/index.js +++ b/docs/src/theme/DocItem/TOC/Mobile/index.js @@ -1,13 +1,3 @@ -import React from 'react'; -import Mobile from '@theme-original/DocItem/TOC/Mobile'; -import styles from './styles.module.css'; +import { DocItemTOCMobile } from '@swmansion/t-rex-ui'; -export default function TOCMobileWrapper(props) { - return ( - <> -
- -
- - ); -} +export default DocItemTOCMobile; diff --git a/docs/src/theme/DocItem/TOC/Mobile/styles.module.css b/docs/src/theme/DocItem/TOC/Mobile/styles.module.css deleted file mode 100644 index 672b17da41..0000000000 --- a/docs/src/theme/DocItem/TOC/Mobile/styles.module.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Disable table of contents on mobile version. */ -.toc_mobile__wrapper { - display: none; -} diff --git a/docs/src/theme/DocSidebar/Desktop/CollapseButton/index.js b/docs/src/theme/DocSidebar/Desktop/CollapseButton/index.js deleted file mode 100644 index 8bb4cfb2a4..0000000000 --- a/docs/src/theme/DocSidebar/Desktop/CollapseButton/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import { translate } from '@docusaurus/Translate'; -import IconArrow from '@theme/Icon/Arrow'; -import styles from './styles.module.css'; -export default function CollapseButton({ onClick }) { - return ( - - ); -} diff --git a/docs/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css b/docs/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css deleted file mode 100644 index b52cf576ff..0000000000 --- a/docs/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css +++ /dev/null @@ -1,40 +0,0 @@ -:root { - --docusaurus-collapse-button-bg: transparent; - --docusaurus-collapse-button-bg-hover: rgba(0, 0, 0, 0.1); -} - -[data-theme='dark']:root { - --docusaurus-collapse-button-bg: rgba(255, 255, 255, 0.05); - --docusaurus-collapse-button-bg-hover: rgba(255, 255, 255, 0.1); -} - -@media (min-width: 996px) { - .collapseSidebarButton { - display: block !important; - background-color: var(--docusaurus-collapse-button-bg); - height: var(--swm-logo-height); - position: sticky; - bottom: 0; - border-radius: 0; - border: 1px solid var(--ifm-toc-border-color); - } - - .collapseSidebarButtonIcon { - transform: rotate(180deg); - margin-top: 4px; - } - - [dir='rtl'] .collapseSidebarButtonIcon { - transform: rotate(0); - } - - .collapseSidebarButton:hover, - .collapseSidebarButton:focus { - background-color: var(--docusaurus-collapse-button-bg-hover); - } -} - -.collapseSidebarButton { - display: none; - margin: 0; -} diff --git a/docs/src/theme/DocSidebar/Desktop/Content/index.js b/docs/src/theme/DocSidebar/Desktop/Content/index.js deleted file mode 100644 index e654c0d0bb..0000000000 --- a/docs/src/theme/DocSidebar/Desktop/Content/index.js +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useState } from 'react'; -import clsx from 'clsx'; -import { ThemeClassNames } from '@docusaurus/theme-common'; -import { - useAnnouncementBar, - useScrollPosition, -} from '@docusaurus/theme-common/internal'; -import { translate } from '@docusaurus/Translate'; -import DocSidebarItems from '@theme/DocSidebarItems'; -import styles from './styles.module.css'; -function useShowAnnouncementBar() { - const { isActive } = useAnnouncementBar(); - const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive); - useScrollPosition( - ({ scrollY }) => { - if (isActive) { - setShowAnnouncementBar(scrollY === 0); - } - }, - [isActive] - ); - return isActive && showAnnouncementBar; -} -export default function DocSidebarDesktopContent({ path, sidebar, className }) { - const showAnnouncementBar = useShowAnnouncementBar(); - return ( - - ); -} diff --git a/docs/src/theme/DocSidebar/Desktop/Content/styles.module.css b/docs/src/theme/DocSidebar/Desktop/Content/styles.module.css deleted file mode 100644 index 481e055094..0000000000 --- a/docs/src/theme/DocSidebar/Desktop/Content/styles.module.css +++ /dev/null @@ -1,17 +0,0 @@ -@media (min-width: 996px) { - .menu { - flex-grow: 1; - padding: 0.5rem; - padding-left: 2rem; - } - @supports (scrollbar-gutter: stable) { - .menu { - padding: 0.5rem 1rem 0.5rem 2rem; - scrollbar-gutter: stable; - } - } - - .menuWithAnnouncementBar { - margin-bottom: var(--docusaurus-announcement-bar-height); - } -} diff --git a/docs/src/theme/DocSidebar/Desktop/index.js b/docs/src/theme/DocSidebar/Desktop/index.js deleted file mode 100644 index 7e888c25a8..0000000000 --- a/docs/src/theme/DocSidebar/Desktop/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import { useThemeConfig } from '@docusaurus/theme-common'; -import Logo from '@theme/Logo'; -import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton'; -import Content from '@theme/DocSidebar/Desktop/Content'; -import styles from './styles.module.css'; -function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }) { - const { - navbar: { hideOnScroll }, - docs: { - sidebar: { hideable }, - }, - } = useThemeConfig(); - return ( -
- {hideOnScroll && } - - {hideable && } -
- ); -} -export default React.memo(DocSidebarDesktop); diff --git a/docs/src/theme/DocSidebar/Desktop/styles.module.css b/docs/src/theme/DocSidebar/Desktop/styles.module.css deleted file mode 100644 index 3363de081e..0000000000 --- a/docs/src/theme/DocSidebar/Desktop/styles.module.css +++ /dev/null @@ -1,39 +0,0 @@ -@media (min-width: 996px) { - .sidebar { - display: flex; - flex-direction: column; - height: 100%; - padding-top: var(--ifm-navbar-height); - width: var(--doc-sidebar-width); - - background-color: var(--swm-off-background); - } - - .sidebarWithHideableNavbar { - padding-top: 0; - } - - .sidebarHidden { - opacity: 0; - visibility: hidden; - } - - .sidebarLogo { - display: flex !important; - align-items: center; - margin: 0 var(--ifm-navbar-padding-horizontal); - min-height: var(--ifm-navbar-height); - max-height: var(--ifm-navbar-height); - color: inherit !important; - text-decoration: none !important; - } - - .sidebarLogo img { - margin-right: 0.5rem; - height: 2rem; - } -} - -.sidebarLogo { - display: none; -} diff --git a/docs/src/theme/DocSidebar/Mobile/index.js b/docs/src/theme/DocSidebar/Mobile/index.js deleted file mode 100644 index 01cf93496d..0000000000 --- a/docs/src/theme/DocSidebar/Mobile/index.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import { - NavbarSecondaryMenuFiller, - ThemeClassNames, -} from '@docusaurus/theme-common'; -import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; -import DocSidebarItems from '@theme/DocSidebarItems'; - -// eslint-disable-next-line react/function-component-definition -const DocSidebarMobileSecondaryMenu = ({ sidebar, path }) => { - const mobileSidebar = useNavbarMobileSidebar(); - return ( -
    - { - // Mobile sidebar should only be closed if the category has a link - if ((item.type === 'category' && item.href) || item.type === 'link') { - mobileSidebar.toggle(); - } - }} - level={1} - /> -
- ); -}; -function DocSidebarMobile(props) { - return ( - - ); -} -export default React.memo(DocSidebarMobile); diff --git a/docs/src/theme/DocSidebar/Mobile/styles.module.css b/docs/src/theme/DocSidebar/Mobile/styles.module.css deleted file mode 100644 index f3e93eea5f..0000000000 --- a/docs/src/theme/DocSidebar/Mobile/styles.module.css +++ /dev/null @@ -1,8 +0,0 @@ -[class*='navbar-sidebar'] { - --ifm-navbar-background-color: var(--swm-sidebar-background); - --ifm-navbar-sidebar-width: 70vw; -} - -[class*='navbar-sidebar__item'] [class*='navbar-sidebar__back'] { - display: none; -} diff --git a/docs/src/theme/DocSidebar/index.js b/docs/src/theme/DocSidebar/index.js index 652c3113a1..b7f14f7041 100644 --- a/docs/src/theme/DocSidebar/index.js +++ b/docs/src/theme/DocSidebar/index.js @@ -1,20 +1,18 @@ import React from 'react'; -import { useWindowSize } from '@docusaurus/theme-common'; -import DocSidebarDesktop from '@theme/DocSidebar/Desktop'; -import DocSidebarMobile from '@theme/DocSidebar/Mobile'; -import styles from './styles.module.css'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import { DocSidebar } from '@swmansion/t-rex-ui'; -export default function DocSidebar(props) { - const windowSize = useWindowSize(); - // Desktop sidebar visible on hydration: need SSR rendering - const shouldRenderSidebarDesktop = - windowSize === 'desktop' || windowSize === 'ssr'; - // Mobile sidebar not visible on hydration: can avoid SSR rendering - const shouldRenderSidebarMobile = windowSize === 'mobile'; +export default function DocSidebarWrapper(props) { + const titleImages = { + light: useBaseUrl('/img/title.svg'), + dark: useBaseUrl('/img/title-dark.svg'), + }; + + const heroImages = { + logo: useBaseUrl('/img/logo-hero.svg'), + title: useBaseUrl('/img/title.svg'), + }; return ( - <> - {shouldRenderSidebarDesktop && } - {shouldRenderSidebarMobile && } - + ); } diff --git a/docs/src/theme/DocSidebar/styles.module.css b/docs/src/theme/DocSidebar/styles.module.css deleted file mode 100644 index 41025c036a..0000000000 --- a/docs/src/theme/DocSidebar/styles.module.css +++ /dev/null @@ -1,79 +0,0 @@ -[class*='menu__list'] ul { - margin-bottom: 16px; - padding-left: 0; -} - -@media (max-width: 996px) { - [class*='menu__list'] ul { - margin-left: 0; - padding-left: 8px; - } -} - -[class*='menu__list'] ul li a { - padding-left: 0; -} - -[class*='menu__list']:hover { - background-color: transparent !important; -} - -[class*='menu__list-item-collapsible'] a { - margin: 8px 0 8px 0; - - text-decoration: none; - color: var(--ifm-font-color-base); -} - -@media (max-width: 996px) { - [class*='menu__list-item-collapsible'] a { - margin: 4px 0 8px 0; - } -} - -[class*='menu__list-item'] [class*='menu__list']:first-of-type { - --ifm-menu-link-padding-vertical: 6px; - --ifm-menu-link-padding-horizontal: 0; - margin-top: 0 !important; -} - -[class*='menu__list-item-collapsible--active'] { - text-decoration: none; - - background-color: transparent !important; - color: var(--ifm-font-color-base); -} - -[class*='menu__link'] { - white-space: pre-wrap; - overflow-wrap: anywhere; -} - -[class*='menu__link']:not(.menu__link--sublist) { - --ifm-menu-color: var(--swm-sidebar-menu-color); - background-color: transparent; - - transition: color 0.25s; -} - -[class*='menu__link']:not([class*='menu__link--active']):hover, -[class*='menu__list-item-collapsible'] [class*='menu__link--active']:hover { - text-decoration: none; - color: var(--swm-tab-hover); -} - -[class*='menu__link--active'] { - text-decoration: underline; - text-underline-offset: 4px; - - background-color: transparent !important; - color: var(--swm-tab-active); -} - -[class*='menu__link--active']:hover { - text-decoration: underline; - text-underline-offset: 4px; - - background-color: transparent !important; - color: var(--swm-tab-active); -} diff --git a/docs/src/theme/DocSidebarItem/index.js b/docs/src/theme/DocSidebarItem/index.js new file mode 100644 index 0000000000..800308d52b --- /dev/null +++ b/docs/src/theme/DocSidebarItem/index.js @@ -0,0 +1,3 @@ +import { DocSidebarItem } from '@swmansion/t-rex-ui'; + +export default DocSidebarItem; diff --git a/docs/src/theme/DocSidebarItems/index.js b/docs/src/theme/DocSidebarItems/index.js index e41d3986c9..274ae1bf3f 100644 --- a/docs/src/theme/DocSidebarItems/index.js +++ b/docs/src/theme/DocSidebarItems/index.js @@ -1,30 +1,3 @@ -import React, { memo } from 'react'; -import { DocSidebarItemsExpandedStateProvider } from '@docusaurus/theme-common/internal'; -import DocSidebarItem from '@theme/DocSidebarItem'; -import SidebarLabel from '@site/src/components/SidebarLabel'; -import styles from './styles.module.css'; +import { DocSidebarItems } from '@swmansion/t-rex-ui'; -const EXPERIMENTAL_APIs = ['shared-element-transitions/overview']; -const NEW_APIS = ['animations/withClamp']; - -// TODO this item should probably not receive the "activePath" props -// TODO this triggers whole sidebar re-renders on navigation -function DocSidebarItems({ items, ...props }) { - return ( - - {items.map((item, index) => ( -
- - {EXPERIMENTAL_APIs.includes(item.docId) && ( - - )} - {NEW_APIS.includes(item.docId) && ( - - )} -
- ))} - - ); -} -// Optimize sidebar at each "level" -export default memo(DocSidebarItems); +export default DocSidebarItems; diff --git a/docs/src/theme/DocSidebarItems/styles.module.css b/docs/src/theme/DocSidebarItems/styles.module.css deleted file mode 100644 index 6f47f80a4e..0000000000 --- a/docs/src/theme/DocSidebarItems/styles.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.wrapper { - display: flex; -} diff --git a/docs/src/theme/Footer/Copyright/index.js b/docs/src/theme/Footer/Copyright/index.js deleted file mode 100644 index a2a19262d2..0000000000 --- a/docs/src/theme/Footer/Copyright/index.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import ThemedImage from '@theme/ThemedImage'; - -import usePageType from '@site/src/hooks/usePageType'; - -const BRAND_LINK = 'https://swmansion.com/'; - -export default function FooterCopyright({ copyright }) { - const { isDocumentation } = usePageType(); - - const brandLogo = { - light: useBaseUrl('/img/brand.svg'), - dark: useBaseUrl('/img/brand-dark.svg'), - }; - - return ( -
- { - -
- -
- - } -

- - ©{' '} - - Software Mansion - - {' ' + new Date().getFullYear()}. - - {` ${copyright}`} -

-
- ); -} diff --git a/docs/src/theme/Footer/Copyright/styles.module.css b/docs/src/theme/Footer/Copyright/styles.module.css deleted file mode 100644 index f76bf3caf2..0000000000 --- a/docs/src/theme/Footer/Copyright/styles.module.css +++ /dev/null @@ -1,65 +0,0 @@ -footer { - --ifm-footer-padding-vertical: 33px; - --ifm-footer-padding-horizontal: 4rem; - --ifm-footer-background-color: transparent; -} - -@media (max-width: 996px) { - footer { - --ifm-footer-padding-vertical: 1.5em; - } -} - -.footer { - display: flex; - justify-content: flex-start; - background-color: none; - align-items: center; -} - -@media (max-width: 996px) { - .footer { - flex-direction: column; - align-items: flex-start; - } -} - -footer p { - color: var(--swm-copyright-color); - margin-bottom: 0; - - text-align: left; -} - -footer p.landing { - color: var(--swm-copyright-color-landing); -} - -@media (max-width: 996px) { - footer [class*='footer__copyright'] { - padding: 0 8px 0 8px; - } -} - -.footer__brand { - color: var(--swm-brand-copyright-color); -} - -.footer__brand a { - text-decoration: none; -} - -.footer__logo { - display: flex; - justify-content: center; - align-items: center; - margin-right: 40px; -} - -@media (max-width: 996px) { - .footer__logo { - width: 60px; - height: 32px; - margin: 0 0 1rem 0; - } -} diff --git a/docs/src/theme/Footer/Layout/index.js b/docs/src/theme/Footer/Layout/index.js deleted file mode 100644 index e9e22de681..0000000000 --- a/docs/src/theme/Footer/Layout/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; -import usePageType from '@site/src/hooks/usePageType'; - -export default function FooterLayout({ style, links, logo, copyright }) { - const { isLanding } = usePageType(); - - return ( -
-
- {links} - {(logo || copyright) && ( -
- {logo &&
{logo}
} - {copyright} -
- )} -
-
- ); -} diff --git a/docs/src/theme/Footer/Layout/styles.module.css b/docs/src/theme/Footer/Layout/styles.module.css deleted file mode 100644 index 9eef21e113..0000000000 --- a/docs/src/theme/Footer/Layout/styles.module.css +++ /dev/null @@ -1,15 +0,0 @@ -footer { - position: relative; -} - -.footerLanding { - --ifm-footer-background-color: transparent; - --ifm-footer-padding-horizontal: 0; - position: relative; -} - -@media (min-width: 996px) and (max-width: 1280px) { - .footerLanding [class*='footer__copyright'] { - padding: 0 2rem; - } -} diff --git a/docs/src/theme/Footer/index.js b/docs/src/theme/Footer/index.js new file mode 100644 index 0000000000..9e9ef474cd --- /dev/null +++ b/docs/src/theme/Footer/index.js @@ -0,0 +1,3 @@ +import { Footer } from '@swmansion/t-rex-ui'; + +export default Footer; diff --git a/docs/src/theme/Logo/LogoStyling.tsx b/docs/src/theme/Logo/LogoStyling.tsx deleted file mode 100644 index 17ab55d135..0000000000 --- a/docs/src/theme/Logo/LogoStyling.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react'; -import Link from '@docusaurus/Link'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { useThemeConfig, type NavbarLogo } from '@docusaurus/theme-common'; -import ThemedImage from '@theme/ThemedImage'; -import type { Props } from '@theme/Logo'; -import usePageType from '@site/src/hooks/usePageType'; -import styles from './styles.module.css'; - -interface LogoProps extends Props { - readonly titleImages?: { light: string; dark: string }; - readonly heroImages?: { - logo: string; - title: string; - }; -} - -const getWrappedImage = (className: string, image: JSX.Element) => { - return className ?
{image}
: image; -}; - -const LogoThemedImage = ({ - logo, - alt, - imageClassName, -}: { - logo: NavbarLogo; - alt: string; - imageClassName?: string; -}) => { - const sources = { - light: useBaseUrl(logo.src), - dark: useBaseUrl(logo.srcDark || logo.src), - }; - const themedImage = ( - - ); - - // Is this extra div really necessary? - // introduced in https://github.com/facebook/docusaurus/pull/5666 - return getWrappedImage(imageClassName, themedImage); -}; - -const LogoStyling = (props: LogoProps): JSX.Element => { - const { - siteConfig: { title }, - } = useDocusaurusContext(); - const { - navbar: { title: navbarTitle, logo }, - } = useThemeConfig(); - const { isLanding } = usePageType(); - const { - titleImages, - heroImages, - imageClassName, - titleClassName, - ...propsRest - } = props; - const logoLink = useBaseUrl(logo?.href || '/'); - - // If visible title is shown, fallback alt text should be - // an empty string to mark the logo as decorative. - const fallbackAlt = navbarTitle ? '' : title; - - // Use logo alt text if provided (including empty string), - // and provide a sensible fallback otherwise. - const alt = logo?.alt ?? fallbackAlt; - - const HeroLogo: NavbarLogo = { - src: props.heroImages.logo, - }; - - const titleImage = { - docs: , - }; - - return ( - - {logo && !isLanding ? ( - <> - - - ) : ( - - )} - {titleImages && getWrappedImage(titleClassName, titleImage.docs)} - - ); -}; - -export default LogoStyling; diff --git a/docs/src/theme/Logo/index.js b/docs/src/theme/Logo/index.js deleted file mode 100644 index 861efacf7c..0000000000 --- a/docs/src/theme/Logo/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import LogoStyling from '@site/src/theme/Logo/LogoStyling'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import usePageType from '@site/src/hooks/usePageType'; -import styles from './styles.module.css'; - -export default function LogoWrapper(props) { - const { isLanding } = usePageType(); - - const titleImages = { - light: useBaseUrl('/img/title.svg'), - dark: useBaseUrl('/img/title-dark.svg'), - }; - - const heroImages = { - logo: useBaseUrl('/img/logo-hero.svg'), - title: useBaseUrl('/img/title.svg'), - }; - - return ( -
- -
- ); -} diff --git a/docs/src/theme/Logo/styles.module.css b/docs/src/theme/Logo/styles.module.css deleted file mode 100644 index b5e536ae91..0000000000 --- a/docs/src/theme/Logo/styles.module.css +++ /dev/null @@ -1,58 +0,0 @@ -:root { - --swm-logo-height: 50px; -} - -.navbar__logo { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - width: 230px; -} - -[class*='sidebar'] .navbar__logo { - display: flex; - justify-content: flex-start; - width: 100%; -} - -@media (max-width: 996px) { - .navbar__logo { - width: 50px; - } -} - -.navbar__logo img { - height: var(--swm-logo-height); -} - -/* Hide logo on mobile sidebar */ -[class*='navbar-sidebar'] [class*='navbar__logo'] { - display: none; -} - -/* Logo shown on the sidebar after scrolling down the page. */ -@media (min-width: 996px) { - [class*='sidebar'] [class*='navbar__logo'] { - display: flex; - padding-left: 1.5rem; - align-items: center; - height: 60px; - } -} - -.navbar__title > img { - height: var(--swm-logo-height); - width: 100%; -} -.navbar__title { - margin-left: 1.23rem; - height: var(--swm-logo-height); - width: 177px; -} - -@media (max-width: 996px) { - .navbar__title { - display: none; - } -} diff --git a/docs/src/theme/Navbar/Content/index.js b/docs/src/theme/Navbar/Content/index.js deleted file mode 100644 index c014592673..0000000000 --- a/docs/src/theme/Navbar/Content/index.js +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react'; -import { - useThemeConfig, - ErrorCauseBoundary, - useWindowSize, -} from '@docusaurus/theme-common'; -import { - splitNavbarItems, - useNavbarMobileSidebar, -} from '@docusaurus/theme-common/internal'; -import NavbarItem from '@theme/NavbarItem'; -import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'; -import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'; -import NavbarLogo from '@theme/Navbar/Logo'; -import styles from './styles.module.css'; -import clsx from 'clsx'; -import usePageType from '@site/src/hooks/usePageType'; -import AlgoliaSearchBar from '@site/src/components/AlgoliaSearchBar'; - -function useNavbarItems() { - return useThemeConfig().navbar.items; -} - -function NavbarItems({ items, isDocumentation = true }) { - return ( - <> - {items.map((item, i) => ( - - new Error( - `A theme navbar item failed to render. -Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: -${JSON.stringify(item, null, 2)}`, - { cause: error } - ) - }> - - - ))} - - ); -} -function NavbarContentLayout({ left, right }) { - const { isLanding } = usePageType(); - - return ( -
-
- {left} -
-
- {right} -
-
- ); -} - -export default function NavbarContent() { - const windowSize = useWindowSize(); - const isMobile = windowSize === 'mobile'; - - const { isDocumentation, isLanding } = usePageType(); - const mobileSidebar = useNavbarMobileSidebar(); - const items = useNavbarItems(); - const [leftItems, rightItems] = splitNavbarItems(items); - const searchBarItem = items.find((item) => item.type === 'search'); - return ( - -
- -
- - {/* {!isDocumentation && ( - - )} */} - {!searchBarItem && !isMobile && !isLanding && } - {!isMobile && isDocumentation && ( - - )} - - } - right={ - <> - {!isDocumentation && ( - - )} - item.label !== 'Docs') - } - isDocumentation={isDocumentation} - /> - {!mobileSidebar.disabled && !isLanding && ( - - )} - - } - /> - ); -} diff --git a/docs/src/theme/Navbar/Content/styles.module.css b/docs/src/theme/Navbar/Content/styles.module.css deleted file mode 100644 index 7b1b4567c8..0000000000 --- a/docs/src/theme/Navbar/Content/styles.module.css +++ /dev/null @@ -1,126 +0,0 @@ -nav { - --ifm-navbar-padding-vertical: 0 1.25rem; - --ifm-navbar-padding-horizontal: 0 0; - --ifm-navbar-height: 60px; - - --ifm-navbar-shadow: none; -} - -.colorModeToggle { - display: flex; - align-items: center; - justify-content: flex-end; -} - -@media (max-height: 768px) { - nav { - --ifm-navbar-height: 56px; - } -} - -@media (max-width: 996px) { - nav { - --ifm-navbar-padding-vertical: 0; - --ifm-navbar-padding-horizontal: 1.5em; - } -} - -@media (min-width: 996px) { - .logoWrapper { - display: flex; - padding-left: 1.5rem; - } - .logoWrapperLanding { - display: flex; - justify-content: center; - } - .colorModeToggle { - margin: 0 1.5rem; - } -} - -[class*='navbar__inner'] { - align-items: center; -} - -/* In other pages than documentation, Docusaurus disables margin-right for the last element on the right side. - * This block disables this behavior. - */ - -[class*='dropdown__menu'] { - background-color: var(--swm-dropdown-versions-background); - border-radius: 4px; - margin-top: 0; - padding: 8px; - width: 100%; -} - -[class*='logoWrapperLanding'] img { - height: 50px; -} - -[class*='navbar__title'] img { - width: 177px; -} - -[class*='logoWrapperLanding'] a { - display: flex; -} - -[class*='navbar__items--left-landing'] { - gap: 1.5rem; - display: flex; - align-items: flex-start; -} - -[class*='navbar__items--left-landing'] > div:nth-child(2) { - margin-top: 0.25rem; -} - -@media (min-width: 768px) { - [class*='navbar__items--left-landing'] { - gap: 3rem; - } -} - -@media (min-width: 996px) { - [class*='navbar__items--right'] > :last-child { - padding: var(--ifm-navbar-item-padding-vertical) - var(--ifm-navbar-item-padding-horizontal); - } - [class*='navbar__items--left-landing'] { - gap: 5rem; - } - [class*='navbar__items--left'] { - flex: 1; - width: 100%; - } -} - -[class*='dropdown__link--active'] { - color: var(--swm-dropdown-versions-item-active) !important; - background-color: var(--swm-dropdown-versions-item-background-active); -} - -[class*='dropdown__link--active']:hover { - color: var(--swm-dropdown-versions-item-active-hover) !important; -} - -@media (max-width: 996px) { - [class*='navbar__item'] { - display: flex; - padding: 0; - } - [class*='navbar__items--left-landing'] > div:nth-child(2) { - margin-top: 0.5rem; - } - [class*='navbar__items--right-landing'] { - gap: 2.5rem; - } -} - -@media (max-width: 420px) { - [class*='navbar__items'] { - font-size: 18px; - } -} diff --git a/docs/src/theme/Navbar/Layout/index.js b/docs/src/theme/Navbar/Layout/index.js deleted file mode 100644 index c0d4d79446..0000000000 --- a/docs/src/theme/Navbar/Layout/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import { useThemeConfig } from '@docusaurus/theme-common'; -import { - useHideableNavbar, - useNavbarMobileSidebar, -} from '@docusaurus/theme-common/internal'; -import { translate } from '@docusaurus/Translate'; -import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar'; -import styles from './styles.module.css'; -import usePageType from '@site/src/hooks/usePageType'; - -function NavbarBackdrop(props) { - return ( -
- ); -} - -export default function NavbarLayout({ children }) { - const { - navbar: { hideOnScroll, style }, - } = useThemeConfig(); - const mobileSidebar = useNavbarMobileSidebar(); - const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll); - const { isLanding } = usePageType(); - - return ( -
- -
- ); -} diff --git a/docs/src/theme/Navbar/Layout/styles.module.css b/docs/src/theme/Navbar/Layout/styles.module.css deleted file mode 100644 index 973609ff97..0000000000 --- a/docs/src/theme/Navbar/Layout/styles.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.navbarHideable { - transition: transform var(--ifm-transition-fast) ease; -} - -.navbarHidden { - transform: translate3d(0, calc(-100% - 2px), 0); -} - -[class*='navbar-sidebar__backdrop'] { - background-color: var(--swm-sidebar-backdrop); -} - -.navbarLanding { - position: relative; - background-color: transparent; - padding-top: 2rem; - padding: 0 1.25rem 0 1.5rem; -} diff --git a/docs/src/theme/Navbar/MobileSidebar/Layout/index.js b/docs/src/theme/Navbar/MobileSidebar/Layout/index.js deleted file mode 100644 index a2a8b96ad1..0000000000 --- a/docs/src/theme/Navbar/MobileSidebar/Layout/index.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; -import AlgoliaSearchBar from '@site/src/components/AlgoliaSearchBar'; -import usePageType from '@site/src/hooks/usePageType'; -import { useAllDocsData } from '@docusaurus/plugin-content-docs/client'; -import { useLocation } from '@docusaurus/router'; - -function isActive(path, locationPathname) { - return locationPathname.startsWith(path); -} - -export default function NavbarMobileSidebarLayout({ header, secondaryMenu }) { - const { isLanding } = usePageType(); - - const data = useAllDocsData(); - const { versions } = data.default; - const reversed = [...versions].reverse(); - - const location = useLocation(); - const activeVersion = reversed.find((version) => - isActive(version.path, location.pathname) - ); - - return ( -
- {header} - {!isLanding && } -
-
{secondaryMenu}
-
-
-
- Versions: - {reversed.map((version) => { - return ( - - {version.label} - - ); - })} -
- -
- -
-
- ); -} diff --git a/docs/src/theme/Navbar/MobileSidebar/Layout/styles.module.css b/docs/src/theme/Navbar/MobileSidebar/Layout/styles.module.css deleted file mode 100644 index e21f4d6dfa..0000000000 --- a/docs/src/theme/Navbar/MobileSidebar/Layout/styles.module.css +++ /dev/null @@ -1,61 +0,0 @@ -[class*='navbar-sidebar__items'] { - --swm-navbar-sidebar-items-height: 127px; /* Overall height of additional items in mobile sidebar */ - height: calc( - 100% - var(--ifm-navbar-height) - var(--swm-navbar-sidebar-items-height) - ); - padding-left: 1rem; -} - -[class*='navbar-sidebar__back'] { - display: none; -} - -[class*='navbar-sidebar__backdrop'] { - display: block; -} - -[class*='navbar-sidebar__brand'] { - padding-left: 20px; -} - -@media (max-width: 996px) { - [class*='navbar-sidebar__brand'] { - --ifm-navbar-height: 68px; - } -} - -[class*='navbar-sidebar'] { - background-color: var(--swm-off-background); -} - -.sidebarGithubIcon { - width: 26px; - height: 26px; - cursor: pointer; -} - -.sidebarFooter { - display: flex; - align-items: center; - justify-content: space-between; - font-weight: var(--ifm-font-weight-semibold); - - padding: 0 1em; - - height: 4em; - background-color: var(--swm-sidebar-elements-background); -} - -.sidebarVersionLabel { - margin-right: 12px; -} - -.sidebarVersion { - margin: 0 8px; - color: var(--swm-sidebar-elements-version-inactive); -} - -.active { - color: var(--swm-sidebar-elements-version-text); - text-decoration: underline; -} diff --git a/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js b/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js deleted file mode 100644 index a58ca7f91b..0000000000 --- a/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { useThemeConfig } from '@docusaurus/theme-common'; -import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; -import NavbarItem from '@theme/NavbarItem'; - -function useNavbarItems() { - // TODO temporary casting until ThemeConfig type is improved - return useThemeConfig().navbar.items; -} - -const ignoredClassNames = ['header-github']; - -// Filter items on mobile sidebar (such as GitHub icon) that contains specified className -function filterIgnoredItems(items) { - return items.filter((item) => - item.className ? !ignoredClassNames.includes(item.className) : item - ); -} - -// The primary menu displays the navbar items -export default function NavbarMobilePrimaryMenu() { - const mobileSidebar = useNavbarMobileSidebar(); - - // TODO how can the order be defined for mobile? - // Should we allow providing a different list of items? - const items = useNavbarItems(); - const filteredItems = filterIgnoredItems(items); - - return ( -
    - {filteredItems.map((item, i) => ( - mobileSidebar.toggle()} - key={i} - /> - ))} -
- ); -} diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js new file mode 100644 index 0000000000..d8e869034b --- /dev/null +++ b/docs/src/theme/Navbar/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import { Navbar } from '@swmansion/t-rex-ui'; + +export default function NavbarWrapper(props) { + const titleImages = { + light: useBaseUrl('/img/title.svg'), + dark: useBaseUrl('/img/title-dark.svg'), + }; + + const heroImages = { + logo: useBaseUrl('/img/logo-hero.svg'), + }; + return ( + + ); +} diff --git a/docs/src/theme/PaginatorNavLink/index.js b/docs/src/theme/PaginatorNavLink/index.js index 615a34b815..2c48b35574 100644 --- a/docs/src/theme/PaginatorNavLink/index.js +++ b/docs/src/theme/PaginatorNavLink/index.js @@ -1,43 +1,3 @@ -import React from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import styles from './styles.module.css'; -import ThemedImage from '@theme/ThemedImage'; -import useBaseUrl from '@docusaurus/useBaseUrl'; +import { PaginatorNavLink } from '@swmansion/t-rex-ui'; -export default function PaginatorNavLink(props) { - const { permalink, title, subLabel, isNext } = props; - const rightArrow = { - light: useBaseUrl('/img/arrow-right.svg'), - dark: useBaseUrl('/img/arrow-right-dark.svg'), - }; - - const leftArrow = { - light: useBaseUrl('/img/arrow-left.svg'), - dark: useBaseUrl('/img/arrow-left-dark.svg'), - }; - - return ( - - {subLabel && ( -
-
- -
-
{subLabel}
-
- )} -
{title}
- - ); -} +export default PaginatorNavLink; diff --git a/docs/src/theme/PaginatorNavLink/styles.module.css b/docs/src/theme/PaginatorNavLink/styles.module.css deleted file mode 100644 index 2f93c6c366..0000000000 --- a/docs/src/theme/PaginatorNavLink/styles.module.css +++ /dev/null @@ -1,66 +0,0 @@ -.pagination { - display: flex; - flex-direction: column; - - padding: 1em 0; - border: none; - - --ifm-pagination-nav-border-radius: 0; -} - -/* Main class for sublabel, used by Docusaurus. */ -[class*='pagination-nav__sublabel'] { - margin-bottom: 0; - color: var(--swm-paginator-sublabel); - - font-size: var(--swm-paginator-sublabel-font-size); - text-transform: var(--swm-paginator-sublabel-text-transform); -} - -.paginationSublabel { - display: flex; - align-items: center; -} - -.paginationNext { - flex-direction: row-reverse; -} - -.paginationPrevious { - justify-content: flex-start; -} - -.paginationArrow { - display: flex; - align-items: center; - justify-content: center; -} - -.paginationNext .paginationArrow { - margin-left: 12px; - margin-right: 6px; -} - -.paginationPrevious .paginationArrow { - margin-left: 6px; - margin-right: 12px; -} - -/* Main class for label, used by Docusaurus. */ -[class*='pagination-nav__label'] { - color: var(--swm-paginator-label); - transition: color 0.25s; - - font-size: var(--swm-paginator-label-font-size); - font-weight: var(--swm-paginator-label-font-weight); -} - -.pagination:hover [class*='pagination-nav__label'] { - color: var(--swm-paginator-label-hover); -} - -/* Remove arrows from labels that are being added by default by Docusaurus. */ -[class*='pagination-nav__label']:before, -[class*='pagination-nav__label']:after { - content: none !important; -} diff --git a/docs/src/theme/SearchBar/index.js b/docs/src/theme/SearchBar/index.js deleted file mode 100644 index 102108fd5e..0000000000 --- a/docs/src/theme/SearchBar/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import SearchBar from '@theme-original/SearchBar'; -import styles from './styles.module.css'; - -export default function SearchBarWrapper(props) { - return ( - <> - - - ); -} diff --git a/docs/src/theme/SearchBar/styles.module.css b/docs/src/theme/SearchBar/styles.module.css deleted file mode 100644 index 2ad6dff42c..0000000000 --- a/docs/src/theme/SearchBar/styles.module.css +++ /dev/null @@ -1,134 +0,0 @@ -[class*='DocSearch-Modal'] { - --docsearch-modal-background: var(--swm-off-background); - --docsearch-spacing: 16px; -} - -@media (max-width: 768px) { - [class*='DocSearch-Modal'] { - --docsearch-spacing: 24px; - } -} - -@media (min-width: 768px) { - [class*='DocSearch-SearchBar'] { - padding: 24px var(--docsearch-spacing) 0 !important; - } -} - -[class*='DocSearch-Footer'] { - --docsearch-footer-height: 52px; - --docsearch-spacing: 18px; -} - -[class*='DocSearch-Form'] { - --docsearch-searchbox-shadow: none; - --docsearch-spacing: 16px; - --docsearch-searchbox-focus-background: var(--swm-searchbar-background); - - border: 1px solid var(--swm-searchbar-border); - border-radius: 0 !important; -} - -[class*='DocSearch-Form'] [class*='DocSearch-Input'] { - padding: 0 0 0 6px; -} - -[class*='DocSearch-Input']::placeholder { - color: var(--swm-searchbar-text-color) !important; -} - -[class*='DocSearch-Hit-source'] { - font-size: 20px !important; - line-height: 1.3 !important; - letter-spacing: var(--swm-heading-letter-spacing-smaller); - - padding: 0 !important; - margin: 24px 0 8px 0 !important; -} - -@media (max-width: 768px) { - [class*='DocSearch-Hit-source'] { - margin: 24px 0 16px 0 !important; - } -} - -[class*='DocSearch-Hit'], -[class*='DocSearch-Hit'] a { - border-radius: 0 !important; -} - -[class*='DocSearch-Hit'] a { - --docsearch-hit-shadow: none; - --docsearch-hit-background: var(--swm-search-hit-background); - border: 1px solid var(--swm-search-hit-border); -} - -[class*='DocSearch-Hit'][aria-selected='true'] a { - --docsearch-highlight-color: var(--swm-search-hit-background-hover); - border: 1px solid var(--swm-search-hit-border-hover); -} - -@media (max-width: 768px) { - [class*='DocSearch-Hit'] a, - [class*='DocSearch-Hit'][aria-selected='true'] a { - border: none; - } -} - -[class*='DocSearch-Hits'] *[aria-selected='false'] { - --docsearch-hit-active-color: var(--ifm-font-color-base) !important; -} - -[class*='DocSearch-Hits'] *[aria-selected='true'] { - --docsearch-hit-active-color: var(--swm-search-hit-active-color) !important; -} - -[class*='DocSearch-Hits'] mark { - text-decoration: underline; - text-underline-offset: 2px; -} - -[class*='DocSearch-Hit-Container'] { - --docsearch-hit-color: var(--ifm-font-color-base); - font-weight: 400; -} - -[class*='DocSearch-Hit-content-wrapper'] { - font-weight: 400 !important; -} - -[class*='DocSearch-Hit-title'] { - font-size: 16px !important; -} - -[class*='DocSearch-Hit-path'], -[class*='DocSearch-Hit-icon'] { - --docsearch-muted-color: var(--ifm-font-color-base); - font-size: 14px !important; -} - -[class*='DocSearch-Hit-action-button'] { - color: var(--docsearch-hit-active-color) !important; -} - -[class*='DocSearch-HitsFooter'] { - --docsearch-muted-color: var(--ifm-font-color-base); - font-size: 18px !important; - padding: 20px var(--docsearch-spacing) 22px var(--docsearch-spacing) !important; -} - -@media (max-width: 768px) { - [class*='DocSearch-HitsFooter'] { - font-size: 12px !important; - padding: 24px var(--docsearch-spacing); - } -} - -[class*='DocSearch-HitsFooter'] a { - border: none; -} - -[class*='DocSearch-Commands-Key'], -[class*='DocSearch-Label'] { - --docsearch-muted-color: var(--swm-search-hit-results-color); -} diff --git a/docs/src/theme/SearchPage/index.js b/docs/src/theme/SearchPage/index.js index a7899d015f..2daf999043 100644 --- a/docs/src/theme/SearchPage/index.js +++ b/docs/src/theme/SearchPage/index.js @@ -1,479 +1,3 @@ -/* eslint-disable jsx-a11y/no-autofocus */ -import React, { useEffect, useReducer, useRef, useState } from 'react'; -import clsx from 'clsx'; -import algoliaSearchHelper from 'algoliasearch-helper'; -import algoliaSearch from 'algoliasearch/lite'; -import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; -import Head from '@docusaurus/Head'; -import Link from '@docusaurus/Link'; -import { useAllDocsData } from '@docusaurus/plugin-content-docs/client'; -import { - HtmlClassNameProvider, - useEvent, - usePluralForm, - useSearchQueryString, -} from '@docusaurus/theme-common'; -import { useTitleFormatter } from '@docusaurus/theme-common/internal'; -import Translate, { translate } from '@docusaurus/Translate'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { - useAlgoliaThemeConfig, - useSearchResultUrlProcessor, -} from '@docusaurus/theme-search-algolia/client'; -import Layout from '@theme/Layout'; -import ThemedImage from '@theme/ThemedImage'; -import styles from './styles.module.css'; -// Very simple pluralization: probably good enough for now -function useDocumentsFoundPlural() { - const { selectMessage } = usePluralForm(); - return (count) => - selectMessage( - count, - translate( - { - id: 'theme.SearchPage.documentsFound.plurals', - description: - 'Pluralized label for "{count} documents found". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)', - message: 'One document found|{count} documents found', - }, - { count } - ) - ); -} -function useDocsSearchVersionsHelpers() { - const allDocsData = useAllDocsData(); - // State of the version select menus / algolia facet filters - // docsPluginId -> versionName map - const [searchVersions, setSearchVersions] = useState(() => - Object.entries(allDocsData).reduce( - (acc, [pluginId, pluginData]) => ({ - ...acc, - [pluginId]: pluginData.versions[0].name, - }), - {} - ) - ); - // Set the value of a single select menu - const setSearchVersion = (pluginId, searchVersion) => - setSearchVersions((s) => ({ ...s, [pluginId]: searchVersion })); - const versioningEnabled = Object.values(allDocsData).some( - (docsData) => docsData.versions.length > 1 - ); - return { - allDocsData, - versioningEnabled, - searchVersions, - setSearchVersion, - }; -} -// We want to display one select per versioned docs plugin instance -function SearchVersionSelectList({ docsSearchVersionsHelpers }) { - const versionedPluginEntries = Object.entries( - docsSearchVersionsHelpers.allDocsData - ) - // Do not show a version select for unversioned docs plugin instances - .filter(([, docsData]) => docsData.versions.length > 1); - return ( -
- {versionedPluginEntries.map(([pluginId, docsData]) => { - const labelPrefix = - versionedPluginEntries.length > 1 ? `${pluginId}: ` : ''; - return ( - - ); - })} -
- ); -} +import { SearchPage } from '@swmansion/t-rex-ui'; -const breadcrumbsArrows = { - light: '/img/breadcrumb-arrow-light.svg', - dark: '/img/breadcrumb-arrow-dark.svg', -}; - -function SearchPageContent() { - const { - i18n: { currentLocale }, - } = useDocusaurusContext(); - const { - algolia: { appId, apiKey, indexName }, - } = useAlgoliaThemeConfig(); - const processSearchResultUrl = useSearchResultUrlProcessor(); - const documentsFoundPlural = useDocumentsFoundPlural(); - const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers(); - const [searchQuery, setSearchQuery] = useSearchQueryString(); - const initialSearchResultState = { - items: [], - query: null, - totalResults: null, - totalPages: null, - lastPage: null, - hasMore: null, - loading: null, - }; - const [searchResultState, searchResultStateDispatcher] = useReducer( - (prevState, data) => { - switch (data.type) { - case 'reset': { - return initialSearchResultState; - } - case 'loading': { - return { ...prevState, loading: true }; - } - case 'update': { - if (searchQuery !== data.value.query) { - return prevState; - } - return { - ...data.value, - items: - data.value.lastPage === 0 - ? data.value.items - : prevState.items.concat(data.value.items), - }; - } - case 'advance': { - const hasMore = prevState.totalPages > prevState.lastPage + 1; - return { - ...prevState, - lastPage: hasMore ? prevState.lastPage + 1 : prevState.lastPage, - hasMore, - }; - } - default: - return prevState; - } - }, - initialSearchResultState - ); - const algoliaClient = algoliaSearch(appId, apiKey); - const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, { - hitsPerPage: 15, - advancedSyntax: true, - disjunctiveFacets: ['language', 'docusaurus_tag'], - }); - algoliaHelper.on( - 'result', - ({ results: { query, hits, page, nbHits, nbPages } }) => { - if (query === '' || !Array.isArray(hits)) { - searchResultStateDispatcher({ type: 'reset' }); - return; - } - const sanitizeValue = (value) => - value.replace( - /algolia-docsearch-suggestion--highlight/g, - 'search-result-match' - ); - const items = hits.map( - ({ - url, - _highlightResult: { hierarchy }, - _snippetResult: snippet = {}, - }) => { - const titles = Object.keys(hierarchy).map((key) => - sanitizeValue(hierarchy[key].value) - ); - return { - title: titles.pop(), - url: processSearchResultUrl(url), - summary: snippet.content - ? `${sanitizeValue(snippet.content.value)}...` - : '', - breadcrumbs: titles, - }; - } - ); - searchResultStateDispatcher({ - type: 'update', - value: { - items, - query, - totalResults: nbHits, - totalPages: nbPages, - lastPage: page, - hasMore: nbPages > page + 1, - loading: false, - }, - }); - } - ); - const [loaderRef, setLoaderRef] = useState(null); - const prevY = useRef(0); - const observer = useRef( - ExecutionEnvironment.canUseIntersectionObserver && - new IntersectionObserver( - (entries) => { - const { - isIntersecting, - boundingClientRect: { y: currentY }, - } = entries[0]; - if (isIntersecting && prevY.current > currentY) { - searchResultStateDispatcher({ type: 'advance' }); - } - prevY.current = currentY; - }, - { threshold: 1 } - ) - ); - const getTitle = () => - searchQuery - ? translate( - { - id: 'theme.SearchPage.existingResultsTitle', - message: 'Search results for "{query}"', - description: 'The search page title for non-empty query', - }, - { - query: searchQuery, - } - ) - : translate({ - id: 'theme.SearchPage.emptyResultsTitle', - message: 'Search the documentation', - description: 'The search page title for empty query', - }); - const makeSearch = useEvent((page = 0) => { - algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default'); - algoliaHelper.addDisjunctiveFacetRefinement('language', currentLocale); - Object.entries(docsSearchVersionsHelpers.searchVersions).forEach( - ([pluginId, searchVersion]) => { - algoliaHelper.addDisjunctiveFacetRefinement( - 'docusaurus_tag', - `docs-${pluginId}-${searchVersion}` - ); - } - ); - algoliaHelper.setQuery(searchQuery).setPage(page).search(); - }); - useEffect(() => { - if (!loaderRef) { - return undefined; - } - const currentObserver = observer.current; - if (currentObserver) { - currentObserver.observe(loaderRef); - return () => currentObserver.unobserve(loaderRef); - } - return () => true; - }, [loaderRef]); - useEffect(() => { - searchResultStateDispatcher({ type: 'reset' }); - if (searchQuery) { - searchResultStateDispatcher({ type: 'loading' }); - setTimeout(() => { - makeSearch(); - }, 300); - } - }, [searchQuery, docsSearchVersionsHelpers.searchVersions, makeSearch]); - useEffect(() => { - if (!searchResultState.lastPage || searchResultState.lastPage === 0) { - return; - } - makeSearch(searchResultState.lastPage); - }, [makeSearch, searchResultState.lastPage]); - return ( - - - {useTitleFormatter(getTitle())} - {/* - We should not index search pages - See https://github.com/facebook/docusaurus/pull/3233 - */} - - - -
-

{getTitle()}

- -
e.preventDefault()}> -
- setSearchQuery(e.target.value)} - value={searchQuery} - autoComplete="off" - autoFocus - /> -
- - {docsSearchVersionsHelpers.versioningEnabled && ( - - )} - - -
-
- {!!searchResultState.totalResults && - documentsFoundPlural(searchResultState.totalResults)} -
- - -
- - {searchResultState.items.length > 0 ? ( -
- {searchResultState.items.map( - ({ title, url, summary, breadcrumbs }, i) => ( -
-

- -

- - {breadcrumbs.length > 0 && ( - - )} - - {summary && ( -

- )} -

- ) - )} -
- ) : ( - [ - searchQuery && !searchResultState.loading && ( -

- - No results were found - -

- ), - !!searchResultState.loading && ( -
- ), - ] - )} - - {searchResultState.hasMore && ( -
- - Fetching new results... - -
- )} -
- - ); -} -export default function SearchPage() { - return ( - - - - ); -} +export default SearchPage; diff --git a/docs/src/theme/SearchPage/styles.module.css b/docs/src/theme/SearchPage/styles.module.css deleted file mode 100644 index 3a2f012d4f..0000000000 --- a/docs/src/theme/SearchPage/styles.module.css +++ /dev/null @@ -1,164 +0,0 @@ -.searchContainer { - width: 60%; -} - -.searchQueryLabel { - margin-bottom: 21px; -} - -.searchQueryInput, -.searchVersionInput { - border-radius: 0; - border: 1px solid var(--swm-searchbar-border); - font: var(--ifm-font-size-base) var(--ifm-font-family-base); - padding: 1rem 20px; - width: 100%; - background: var(--swm-searchbar-background); - color: var(--swm-search-page-query-text-color); - margin-bottom: 0.5rem; - transition: border var(--ifm-transition-fast) ease; -} - -.searchQueryInput:focus, -.searchVersionInput:focus { - border-color: var(--swm-searchbar-border-hover); - outline: none; -} - -.searchQueryInput::placeholder { - color: var(--docsearch-muted-color); -} - -.searchResultsRow { - margin: 46px 0 51px 0; -} - -.searchResultsColumn { - font-size: 18px; - padding: 0; -} - -.searchLogoColumn { - padding: 0; -} - -.algoliaLogo { - max-width: 150px; -} - -.algoliaLogoPathFill { - fill: var(--ifm-font-color-base); -} - -.searchResultItem { - padding: 1rem 0; -} - -.searchResultItem:not(:last-child) { - border-bottom: 1px solid var(--swm-searchbar-border); -} - -.searchResultItemHeading { - margin-bottom: 0; - - color: var(--ifm-font-color-base); - font-weight: var(--swm-search-page-heading-font-weight); - font-size: var(--swm-h3-font-size); -} - -.searchResultItem [class*='breadcrumbs__item'] { - color: var(--ifm-font-color-base); - font-size: 16px; -} - -.searchResultItem [class*='breadcrumbs__item']::after { - display: none; -} - -.breadcrumbArrow { - margin: 0 var(--ifm-breadcrumb-spacing); -} - -.searchResultItemPath { - --ifm-breadcrumb-separator-size-multiplier: 1; - margin-top: 0.5rem; - - color: var(--ifm-color-content-secondary); - font-size: 0.8rem; -} - -.searchResultItemSummary { - margin: 0.5rem 0 0; - font-size: 14px; -} - -.searchResultItemSeparator { - --ifm-hr-background-color: var(--swm-navy-light-20); - margin: 0; -} - -@media only screen and (max-width: 996px) { - .searchContainer { - width: 100%; - } - - .searchVersionColumn { - max-width: 40% !important; - } - - .searchResultsColumn { - max-width: 60% !important; - } - - .searchLogoColumn { - max-width: 40% !important; - padding-left: 0 !important; - } -} - -@media screen and (max-width: 576px) { - .searchQueryColumn { - max-width: 100% !important; - } - - .searchVersionColumn { - max-width: 100% !important; - padding-left: var(--ifm-spacing-horizontal) !important; - } -} - -.loadingSpinner { - width: 3rem; - height: 3rem; - border: 0.4em solid var(--swm-navy-light-10); - border-top-color: var(--swm-navy-light-80); - border-radius: 50%; - animation: loading-spin 1s linear infinite; - margin: 0 auto; -} - -@keyframes loading-spin { - 100% { - transform: rotate(360deg); - } -} - -.loader { - margin-top: 2rem; -} - -:global(.search-result-match) { - padding: 0.09em 0; - - font-style: inherit; - text-decoration: underline; - text-decoration-skip-ink: none; - text-underline-offset: 2px; -} - -/* Larger underline offset in headings */ -[class*='searchResultItemHeading'] [class*='search-result-match'], -[class*='searchResultItemHeading']:hover { - text-underline-offset: 4px; - text-decoration-skip-ink: none; -} diff --git a/docs/src/theme/TOCCollapsible/index.js b/docs/src/theme/TOCCollapsible/index.js new file mode 100644 index 0000000000..81bfb454ae --- /dev/null +++ b/docs/src/theme/TOCCollapsible/index.js @@ -0,0 +1,3 @@ +import { TOCCollapsible } from '@swmansion/t-rex-ui'; + +export default TOCCollapsible; diff --git a/docs/src/theme/TOCItems/Tree.js b/docs/src/theme/TOCItems/Tree.js index 9d93abf1dc..4983afc968 100644 --- a/docs/src/theme/TOCItems/Tree.js +++ b/docs/src/theme/TOCItems/Tree.js @@ -1,35 +1,3 @@ -import React from 'react'; -import styles from './styles.module.css'; -import clsx from 'clsx'; -// Recursive component rendering the toc tree -function TOCItemTree({ toc, className, linkClassName, isChild }) { - if (!toc.length) { - return null; - } - return ( - - ); -} -// Memo only the tree root is enough -export default React.memo(TOCItemTree); +import { TOCItemTree } from '@swmansion/t-rex-ui'; + +export default TOCItemTree; diff --git a/docs/src/theme/TOCItems/index.js b/docs/src/theme/TOCItems/index.js new file mode 100644 index 0000000000..086bd62715 --- /dev/null +++ b/docs/src/theme/TOCItems/index.js @@ -0,0 +1,3 @@ +import { TOCItems } from '@swmansion/t-rex-ui'; + +export default TOCItems; diff --git a/docs/src/theme/TOCItems/styles.module.css b/docs/src/theme/TOCItems/styles.module.css deleted file mode 100644 index 73a184ec2f..0000000000 --- a/docs/src/theme/TOCItems/styles.module.css +++ /dev/null @@ -1,15 +0,0 @@ -.tocItems span { - font-weight: 500; - font-size: 16px; - line-height: 1.2; -} - -.tocItems a[class*='active'] span { - text-decoration: underline; - text-underline-offset: 4px; -} - -.tocItems a code { - padding: 0; - background-color: inherit; -} diff --git a/docs/yarn.lock b/docs/yarn.lock index ecdb05ba28..0ec667a51c 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1128,7 +1128,7 @@ "@babel/plugin-transform-arrow-functions@^7.0.0-0": version "7.24.1" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz#2bf263617060c9cc45bcdbf492b8cc805082bf27" + resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz#2bf263617060c9cc45bcdbf492b8cc805082bf27" integrity sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw== dependencies: "@babel/helper-plugin-utils" "^7.24.0" @@ -1337,7 +1337,7 @@ "@babel/plugin-transform-nullish-coalescing-operator@^7.0.0-0": version "7.24.1" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz#0cd494bb97cb07d428bd651632cb9d4140513988" + resolved "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz#0cd494bb97cb07d428bd651632cb9d4140513988" integrity sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw== dependencies: "@babel/helper-plugin-utils" "^7.24.0" @@ -1487,7 +1487,7 @@ "@babel/plugin-transform-shorthand-properties@^7.0.0-0": version "7.24.1" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.1.tgz#ba9a09144cf55d35ec6b93a32253becad8ee5b55" + resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.1.tgz#ba9a09144cf55d35ec6b93a32253becad8ee5b55" integrity sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA== dependencies: "@babel/helper-plugin-utils" "^7.24.0" @@ -1516,7 +1516,7 @@ "@babel/plugin-transform-template-literals@^7.0.0-0": version "7.24.1" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz#15e2166873a30d8617e3e2ccadb86643d327aab7" + resolved "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz#15e2166873a30d8617e3e2ccadb86643d327aab7" integrity sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g== dependencies: "@babel/helper-plugin-utils" "^7.24.0" @@ -3204,10 +3204,10 @@ "@svgr/plugin-jsx" "^6.5.1" "@svgr/plugin-svgo" "^6.5.1" -"@swmansion/t-rex-ui@^0.0.3": - version "0.0.3" - resolved "https://registry.npmjs.org/@swmansion/t-rex-ui/-/t-rex-ui-0.0.3.tgz#d672fdb98081392a213db4e814b822cd1633e09d" - integrity sha512-K6uhhF404lRawaf5LBfBPv9yVX4Ld4g+s7rNw+Ggzirp2/i7wNS1lWhm0aK8jM59luBX3NcGUc3UWXC7GaTi0A== +"@swmansion/t-rex-ui@^0.0.9": + version "0.0.9" + resolved "https://registry.npmjs.org/@swmansion/t-rex-ui/-/t-rex-ui-0.0.9.tgz#192c8e6beabcbb885b37e485157b610e2b8599b9" + integrity sha512-4FoJP/7RFeDB36YEvRd0dvqZ7jbq9xipbyOFk0uM7Dpc9xgkO3ZVhPuS6lbHOvN3L8/rvBE/d6nDRZH3yd8Y9g== dependencies: "@docsearch/react" "^3.6.0" "@docusaurus/core" "^2.4.3" @@ -7082,7 +7082,7 @@ got@^9.6.0: graceful-fs@^4.1.11, graceful-fs@^4.1.3: version "4.2.11" - resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3" + resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3" integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ== graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9: @@ -11892,7 +11892,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: source-map@^0.7.3, source-map@^0.7.4: version "0.7.4" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656" + resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656" integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA== space-separated-tokens@^1.0.0: