docs: refactor to use TypeScript, ESLint, and Tailwind CSS (#4136)
* docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * fix after merge * docs(refactoring): migrated remaining component to TypeScript (#3770) * docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * docs: refactoring second batch of theme components * fix after merge * refactored icons and other components * docs: refactored all components * docs(refactoring): set up and configured Tailwind Css (#3841) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): use tailwind css (#4134) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): refactored all styles to use tailwind css (#4132) * refactored Badge component to use tailwind css * refactored Bordered component to use tailwind css * updated to latest docusaurus * refactored BorderedIcon component to use tailwind css * refactored Feedback component to use tailwind css * refactored icons and footersociallinks to tailwind css * start refactoring of large card * refactored large card styling * refactored until admonitions * refactored until codeblock * refactored until Tabs * refactored Tabs (without testing * finished refactoring styles to tailwind css * upgraded to version 2.4.1 * general fixes * adjusted eslint configurations * fixed ignore files * fixes to large card * fix search styling * fix npx command * updated tabs to use isCodeTabs prop * fixed os tabs * removed os-tabs class in favor of general styling * improvements to buttons * fix for searchbar * fixed redocly download button * chore: added eslint code action (#4135) * small change in commerce modules page
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,195 +0,0 @@
|
||||
import React, {useEffect, useMemo} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
ThemeClassNames,
|
||||
useThemeConfig,
|
||||
usePrevious,
|
||||
useCollapsible,
|
||||
Collapsible
|
||||
} from '@docusaurus/theme-common';
|
||||
import {
|
||||
isActiveSidebarItem,
|
||||
findFirstCategoryLink,
|
||||
useDocSidebarItemsExpandedState,
|
||||
isSamePath,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import Link from '@docusaurus/Link';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import DocSidebarItems from '@theme/DocSidebarItems';
|
||||
import DocSidebarItemIcon from '../Icon';
|
||||
|
||||
// If we navigate to a category and it becomes active, it should automatically
|
||||
// expand itself
|
||||
function useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed}) {
|
||||
const wasActive = usePrevious(isActive);
|
||||
useEffect(() => {
|
||||
const justBecameActive = isActive && !wasActive;
|
||||
if (justBecameActive && collapsed) {
|
||||
updateCollapsed(false);
|
||||
}
|
||||
}, [isActive, wasActive, collapsed, updateCollapsed]);
|
||||
}
|
||||
/**
|
||||
* When a collapsible category has no link, we still link it to its first child
|
||||
* during SSR as a temporary fallback. This allows to be able to navigate inside
|
||||
* the category even when JS fails to load, is delayed or simply disabled
|
||||
* React hydration becomes an optional progressive enhancement
|
||||
* see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
|
||||
* see https://github.com/facebook/docusaurus/issues/3030
|
||||
*/
|
||||
function useCategoryHrefWithSSRFallback(item) {
|
||||
const isBrowser = useIsBrowser();
|
||||
return useMemo(() => {
|
||||
if (item.href) {
|
||||
return item.href;
|
||||
}
|
||||
// In these cases, it's not necessary to render a fallback
|
||||
// We skip the "findFirstCategoryLink" computation
|
||||
if (isBrowser || !item.collapsible) {
|
||||
return undefined;
|
||||
}
|
||||
return findFirstCategoryLink(item);
|
||||
}, [item, isBrowser]);
|
||||
}
|
||||
function CollapseButton({categoryLabel, onClick}) {
|
||||
return (
|
||||
<button
|
||||
aria-label={translate(
|
||||
{
|
||||
id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
|
||||
message: "Toggle the collapsible sidebar category '{label}'",
|
||||
description:
|
||||
'The ARIA label to toggle the collapsible sidebar category',
|
||||
},
|
||||
{label: categoryLabel},
|
||||
)}
|
||||
type="button"
|
||||
className="clean-btn menu__caret"
|
||||
onClick={onClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export default function DocSidebarItemCategory({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
index,
|
||||
...props
|
||||
}) {
|
||||
const {items, label, collapsible, className, href, customProps} = item;
|
||||
const {
|
||||
docs: {
|
||||
sidebar: {autoCollapseCategories},
|
||||
},
|
||||
} = useThemeConfig();
|
||||
const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
const isCurrentPage = isSamePath(href, activePath);
|
||||
const {collapsed, setCollapsed} = useCollapsible({
|
||||
// Active categories are always initialized as expanded. The default
|
||||
// (`item.collapsed`) is only used for non-active categories.
|
||||
initialState: () => {
|
||||
if (!collapsible) {
|
||||
return false;
|
||||
}
|
||||
return isActive ? false : item.collapsed;
|
||||
},
|
||||
});
|
||||
const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
|
||||
// Use this instead of `setCollapsed`, because it is also reactive
|
||||
const updateCollapsed = (toCollapsed = !collapsed) => {
|
||||
setExpandedItem(toCollapsed ? null : index);
|
||||
setCollapsed(toCollapsed);
|
||||
};
|
||||
useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
|
||||
useEffect(() => {
|
||||
if (
|
||||
collapsible &&
|
||||
expandedItem != null &&
|
||||
expandedItem !== index &&
|
||||
autoCollapseCategories
|
||||
) {
|
||||
setCollapsed(true);
|
||||
}
|
||||
}, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemCategory,
|
||||
ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
|
||||
'menu__list-item',
|
||||
{
|
||||
'menu__list-item--collapsed': collapsed,
|
||||
},
|
||||
className,
|
||||
customProps?.sidebar_is_title && 'sidebar-title',
|
||||
customProps?.sidebar_is_group_headline && 'sidebar-group-headline',
|
||||
customProps?.sidebar_is_group_divider && 'sidebar-group-divider',
|
||||
customProps?.sidebar_is_divider_line && 'sidebar-divider-line',
|
||||
customProps?.sidebar_is_back_link && 'sidebar-back-link',
|
||||
customProps?.sidebar_is_soon && 'sidebar-soon-link sidebar-badge-wrapper',
|
||||
)}>
|
||||
<div
|
||||
className={clsx('menu__list-item-collapsible', {
|
||||
'menu__list-item-collapsible--active': isCurrentPage,
|
||||
})}>
|
||||
<Link
|
||||
className={clsx('menu__link', {
|
||||
'menu__link--sublist': collapsible,
|
||||
'menu__link--sublist-caret': !href && collapsible,
|
||||
'menu__link--active': isActive,
|
||||
})}
|
||||
onClick={
|
||||
collapsible
|
||||
? (e) => {
|
||||
onItemClick?.(item);
|
||||
if (href) {
|
||||
updateCollapsed(false);
|
||||
} else {
|
||||
e.preventDefault();
|
||||
updateCollapsed();
|
||||
}
|
||||
}
|
||||
: () => {
|
||||
onItemClick?.(item);
|
||||
}
|
||||
}
|
||||
aria-current={isCurrentPage ? 'page' : undefined}
|
||||
aria-expanded={collapsible ? !collapsed : undefined}
|
||||
href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
|
||||
{...props}>
|
||||
{customProps?.sidebar_icon && (
|
||||
<DocSidebarItemIcon icon={customProps.sidebar_icon} is_title={customProps.sidebar_is_title} />
|
||||
)}
|
||||
{label}
|
||||
</Link>
|
||||
{href && collapsible && (
|
||||
<CollapseButton
|
||||
categoryLabel={label}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
updateCollapsed();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{customProps?.sidebar_is_soon && (
|
||||
<Badge variant='purple' className={`sidebar-soon-badge`}>
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
|
||||
<DocSidebarItems
|
||||
items={items}
|
||||
tabIndex={collapsed ? -1 : 0}
|
||||
onItemClick={onItemClick}
|
||||
activePath={activePath}
|
||||
level={level + 1}
|
||||
/>
|
||||
</Collapsible>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
import React, { type ComponentProps, useEffect, useMemo } from "react"
|
||||
import clsx from "clsx"
|
||||
import {
|
||||
ThemeClassNames,
|
||||
useThemeConfig,
|
||||
usePrevious,
|
||||
Collapsible,
|
||||
useCollapsible,
|
||||
} from "@docusaurus/theme-common"
|
||||
import {
|
||||
isActiveSidebarItem,
|
||||
findFirstCategoryLink,
|
||||
useDocSidebarItemsExpandedState,
|
||||
isSamePath,
|
||||
} from "@docusaurus/theme-common/internal"
|
||||
import Link from "@docusaurus/Link"
|
||||
import { translate } from "@docusaurus/Translate"
|
||||
import useIsBrowser from "@docusaurus/useIsBrowser"
|
||||
import DocSidebarItems from "@theme/DocSidebarItems"
|
||||
import type { Props } from "@theme/DocSidebarItem/Category"
|
||||
import Badge from "@site/src/components/Badge/index"
|
||||
import DocSidebarItemIcon from "@site/src/components/DocSidebarItemIcon"
|
||||
import { ModifiedPropSidebarItemCategory } from "@medusajs/docs"
|
||||
|
||||
type ModifiedProps = Props & {
|
||||
item: ModifiedPropSidebarItemCategory
|
||||
}
|
||||
|
||||
// If we navigate to a category and it becomes active, it should automatically
|
||||
// expand itself
|
||||
function useAutoExpandActiveCategory({
|
||||
isActive,
|
||||
collapsed,
|
||||
updateCollapsed,
|
||||
}: {
|
||||
isActive: boolean
|
||||
collapsed: boolean
|
||||
updateCollapsed: (b: boolean) => void
|
||||
}) {
|
||||
const wasActive = usePrevious(isActive)
|
||||
useEffect(() => {
|
||||
const justBecameActive = isActive && !wasActive
|
||||
if (justBecameActive && collapsed) {
|
||||
updateCollapsed(false)
|
||||
}
|
||||
}, [isActive, wasActive, collapsed, updateCollapsed])
|
||||
}
|
||||
|
||||
/**
|
||||
* When a collapsible category has no link, we still link it to its first child
|
||||
* during SSR as a temporary fallback. This allows to be able to navigate inside
|
||||
* the category even when JS fails to load, is delayed or simply disabled
|
||||
* React hydration becomes an optional progressive enhancement
|
||||
* see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
|
||||
* see https://github.com/facebook/docusaurus/issues/3030
|
||||
*/
|
||||
function useCategoryHrefWithSSRFallback(
|
||||
item: Props["item"]
|
||||
): string | undefined {
|
||||
const isBrowser = useIsBrowser()
|
||||
return useMemo(() => {
|
||||
if (item.href) {
|
||||
return item.href
|
||||
}
|
||||
// In these cases, it's not necessary to render a fallback
|
||||
// We skip the "findFirstCategoryLink" computation
|
||||
if (isBrowser || !item.collapsible) {
|
||||
return undefined
|
||||
}
|
||||
return findFirstCategoryLink(item)
|
||||
}, [item, isBrowser])
|
||||
}
|
||||
|
||||
function CollapseButton({
|
||||
categoryLabel,
|
||||
onClick,
|
||||
}: {
|
||||
categoryLabel: string
|
||||
onClick: ComponentProps<"button">["onClick"]
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
aria-label={translate(
|
||||
{
|
||||
id: "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel",
|
||||
message: "Toggle the collapsible sidebar category '{label}'",
|
||||
description:
|
||||
"The ARIA label to toggle the collapsible sidebar category",
|
||||
},
|
||||
{ label: categoryLabel }
|
||||
)}
|
||||
type="button"
|
||||
className="tw-hidden"
|
||||
onClick={onClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DocSidebarItemCategory({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
index,
|
||||
...props
|
||||
}: ModifiedProps): JSX.Element {
|
||||
const { items, label, collapsible, className, href, customProps } = item
|
||||
const {
|
||||
docs: {
|
||||
sidebar: { autoCollapseCategories },
|
||||
},
|
||||
} = useThemeConfig()
|
||||
const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item)
|
||||
|
||||
const isActive = isActiveSidebarItem(item, activePath)
|
||||
const isCurrentPage = isSamePath(href, activePath)
|
||||
|
||||
const { collapsed, setCollapsed } = useCollapsible({
|
||||
// Active categories are always initialized as expanded. The default
|
||||
// (`item.collapsed`) is only used for non-active categories.
|
||||
initialState: () => {
|
||||
if (!collapsible) {
|
||||
return false
|
||||
}
|
||||
return isActive ? false : item.collapsed
|
||||
},
|
||||
})
|
||||
|
||||
const { expandedItem, setExpandedItem } = useDocSidebarItemsExpandedState()
|
||||
// Use this instead of `setCollapsed`, because it is also reactive
|
||||
const updateCollapsed = (toCollapsed = !collapsed) => {
|
||||
setExpandedItem(toCollapsed ? null : index)
|
||||
setCollapsed(toCollapsed)
|
||||
}
|
||||
useAutoExpandActiveCategory({ isActive, collapsed, updateCollapsed })
|
||||
useEffect(() => {
|
||||
if (
|
||||
collapsible &&
|
||||
expandedItem != null &&
|
||||
expandedItem !== index &&
|
||||
autoCollapseCategories
|
||||
) {
|
||||
setCollapsed(true)
|
||||
}
|
||||
}, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories])
|
||||
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemCategory,
|
||||
ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
|
||||
"menu__list-item",
|
||||
// {
|
||||
// "menu__list-item--collapsed": collapsed,
|
||||
// },
|
||||
className,
|
||||
customProps?.sidebar_is_title && "sidebar-title",
|
||||
customProps?.sidebar_is_group_headline && "sidebar-group-headline",
|
||||
customProps?.sidebar_is_group_divider && "sidebar-group-divider",
|
||||
customProps?.sidebar_is_divider_line && "sidebar-divider-line",
|
||||
customProps?.sidebar_is_back_link && "sidebar-back-link",
|
||||
customProps?.sidebar_is_soon &&
|
||||
"sidebar-soon-link sidebar-badge-wrapper",
|
||||
!customProps?.sidebar_is_title &&
|
||||
"[&_.sidebar-item-icon]:tw-w-[20px] [&_.sidebar-item-icon]:tw-h-[20px]",
|
||||
!customProps?.sidebar_is_title &&
|
||||
!customProps?.sidebar_is_back_link &&
|
||||
"[&_.sidebar-item-icon]:tw-mr-1"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx("menu__list-item-collapsible", {
|
||||
"menu__list-item-collapsible--active": isCurrentPage,
|
||||
})}
|
||||
>
|
||||
<Link
|
||||
className={clsx("menu__link", {
|
||||
"menu__link--sublist": collapsible,
|
||||
"menu__link--sublist-caret": !href && collapsible,
|
||||
"menu__link--active": isActive,
|
||||
})}
|
||||
onClick={
|
||||
collapsible
|
||||
? (e) => {
|
||||
onItemClick?.(item)
|
||||
if (href) {
|
||||
updateCollapsed(false)
|
||||
} else {
|
||||
e.preventDefault()
|
||||
updateCollapsed()
|
||||
}
|
||||
}
|
||||
: () => {
|
||||
onItemClick?.(item)
|
||||
}
|
||||
}
|
||||
aria-current={isCurrentPage ? "page" : undefined}
|
||||
aria-expanded={collapsible ? !collapsed : undefined}
|
||||
href={collapsible ? hrefWithSSRFallback ?? "#" : hrefWithSSRFallback}
|
||||
{...props}
|
||||
>
|
||||
{customProps?.sidebar_icon && (
|
||||
<DocSidebarItemIcon
|
||||
icon={customProps.sidebar_icon}
|
||||
is_title={customProps.sidebar_is_title}
|
||||
is_disabled={customProps?.sidebar_is_soon}
|
||||
/>
|
||||
)}
|
||||
{label}
|
||||
</Link>
|
||||
{href && collapsible && (
|
||||
<CollapseButton
|
||||
categoryLabel={label}
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
updateCollapsed()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{customProps?.sidebar_is_soon && (
|
||||
<Badge variant="purple" className={`sidebar-soon-badge`}>
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
|
||||
<DocSidebarItems
|
||||
items={items}
|
||||
tabIndex={collapsed ? -1 : 0}
|
||||
onItemClick={onItemClick}
|
||||
activePath={activePath}
|
||||
level={level + 1}
|
||||
/>
|
||||
</Collapsible>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import styles from './styles.module.css';
|
||||
import DocSidebarItemIcon from '../Icon';
|
||||
|
||||
export default function DocSidebarItemHtml({item, level, index}) {
|
||||
const {value, defaultStyle, className, customProps} = item;
|
||||
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
defaultStyle && [styles.menuHtmlItem, 'menu__list-item'],
|
||||
className,
|
||||
customProps?.sidebar_is_title && 'sidebar-title',
|
||||
customProps?.sidebar_is_group_headline && 'sidebar-group-headline',
|
||||
customProps?.sidebar_is_group_divider && 'sidebar-group-divider',
|
||||
customProps?.sidebar_is_divider_line && 'sidebar-divider-line',
|
||||
customProps?.sidebar_is_back_link && 'sidebar-back-link',
|
||||
customProps?.sidebar_is_soon && 'sidebar-soon-link sidebar-badge-wrapper',
|
||||
)}
|
||||
|
||||
key={index}
|
||||
>
|
||||
{customProps?.sidebar_icon && (
|
||||
<DocSidebarItemIcon icon={customProps.sidebar_icon} is_title={customProps.sidebar_is_title} />
|
||||
)}
|
||||
<span
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{__html: value}}
|
||||
>
|
||||
|
||||
</span>
|
||||
{customProps?.sidebar_is_soon && (
|
||||
<Badge variant='purple' className={`sidebar-soon-badge`}>
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
import { ThemeClassNames } from "@docusaurus/theme-common"
|
||||
import type { Props } from "@theme/DocSidebarItem/Html"
|
||||
import DocSidebarItemIcon from "@site/src/components/DocSidebarItemIcon"
|
||||
|
||||
import Badge from "@site/src/components/Badge"
|
||||
import { ModifiedPropSidebarItemHtml } from "@medusajs/docs"
|
||||
|
||||
type ModifiedProps = Props & {
|
||||
item: ModifiedPropSidebarItemHtml
|
||||
}
|
||||
|
||||
export default function DocSidebarItemHtml({
|
||||
item,
|
||||
level,
|
||||
index,
|
||||
}: ModifiedProps): JSX.Element {
|
||||
const { value, defaultStyle, className, customProps } = item
|
||||
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
defaultStyle && ["lg:tw-py-[6px] lg:tw-px-1", "menu__list-item"],
|
||||
className,
|
||||
customProps?.sidebar_is_title && "sidebar-title",
|
||||
customProps?.sidebar_is_group_headline && "sidebar-group-headline",
|
||||
customProps?.sidebar_is_group_divider && "sidebar-group-divider",
|
||||
customProps?.sidebar_is_divider_line && "sidebar-divider-line",
|
||||
customProps?.sidebar_is_back_link && "sidebar-back-link",
|
||||
customProps?.sidebar_is_soon &&
|
||||
"sidebar-soon-link sidebar-badge-wrapper",
|
||||
!customProps?.sidebar_is_title &&
|
||||
"[&_.sidebar-item-icon]:tw-w-[20px] [&_.sidebar-item-icon]:tw-h-[20px]",
|
||||
!customProps?.sidebar_is_title &&
|
||||
!customProps?.sidebar_is_back_link &&
|
||||
"[&_.sidebar-item-icon]:tw-mr-1"
|
||||
)}
|
||||
key={index}
|
||||
>
|
||||
{customProps?.sidebar_icon && (
|
||||
<DocSidebarItemIcon
|
||||
icon={customProps.sidebar_icon}
|
||||
is_title={customProps.sidebar_is_title}
|
||||
is_disabled={customProps?.sidebar_is_soon}
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{ __html: value }}
|
||||
></span>
|
||||
{customProps?.sidebar_is_soon && (
|
||||
<Badge variant="purple" className={`sidebar-soon-badge`}>
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
@media (min-width: 997px) {
|
||||
.menuHtmlItem {
|
||||
padding: var(--ifm-menu-link-padding-vertical)
|
||||
var(--ifm-menu-link-padding-horizontal);
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import React from "react"
|
||||
import BorderedIcon from "../../../components/BorderedIcon"
|
||||
import icons from '../../Icon'
|
||||
|
||||
export default function DocSidebarItemIcon ({ icon, is_title }) {
|
||||
const IconComponent = icons[icon]
|
||||
|
||||
return (
|
||||
<>
|
||||
{is_title && (
|
||||
<BorderedIcon icon={null} IconComponent={IconComponent} wrapperClassName={'sidebar-title-icon-wrapper'} iconClassName={'sidebar-item-icon'} />
|
||||
)}
|
||||
{!is_title && <IconComponent className='sidebar-item-icon' />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import {isActiveSidebarItem} from '@docusaurus/theme-common/internal';
|
||||
import Link from '@docusaurus/Link';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import IconExternalLink from '@theme/Icon/ExternalLink';
|
||||
import styles from './styles.module.css';
|
||||
import DocSidebarItemIcon from '../Icon';
|
||||
import Badge from '../../../components/Badge';
|
||||
|
||||
export default function DocSidebarItemLink({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
index,
|
||||
...props
|
||||
}) {
|
||||
const {href, label, className, autoAddBaseUrl, customProps} = item;
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
const isInternalLink = isInternalUrl(href);
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
'menu__list-item',
|
||||
className,
|
||||
customProps?.sidebar_is_title && 'sidebar-title',
|
||||
customProps?.sidebar_is_group_headline && 'sidebar-group-headline',
|
||||
customProps?.sidebar_is_group_divider && 'sidebar-group-divider',
|
||||
customProps?.sidebar_is_divider_line && 'sidebar-divider-line',
|
||||
customProps?.sidebar_is_back_link && 'sidebar-back-link',
|
||||
customProps?.sidebar_is_soon && 'sidebar-soon-link sidebar-badge-wrapper',
|
||||
)}
|
||||
key={label}>
|
||||
<Link
|
||||
className={clsx(
|
||||
'menu__link',
|
||||
!isInternalLink && styles.menuExternalLink,
|
||||
{
|
||||
'menu__link--active': isActive,
|
||||
},
|
||||
)}
|
||||
autoAddBaseUrl={autoAddBaseUrl}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
to={href}
|
||||
{...(isInternalLink && {
|
||||
onClick: onItemClick ? () => onItemClick(item) : undefined,
|
||||
})}
|
||||
{...props}>
|
||||
{customProps?.sidebar_icon && (
|
||||
<DocSidebarItemIcon icon={customProps.sidebar_icon} is_title={customProps.sidebar_is_title} />
|
||||
)}
|
||||
{label}
|
||||
{!isInternalLink && <IconExternalLink />}
|
||||
</Link>
|
||||
{customProps?.sidebar_is_soon && (
|
||||
<Badge variant='purple' className={`sidebar-soon-badge`}>
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
import { ThemeClassNames } from "@docusaurus/theme-common"
|
||||
import { isActiveSidebarItem } from "@docusaurus/theme-common/internal"
|
||||
import Link from "@docusaurus/Link"
|
||||
import isInternalUrl from "@docusaurus/isInternalUrl"
|
||||
import IconExternalLink from "@theme/Icon/ExternalLink"
|
||||
import type { Props } from "@theme/DocSidebarItem/Link"
|
||||
import DocSidebarItemIcon from "@site/src/components/DocSidebarItemIcon"
|
||||
import Badge from "@site/src/components/Badge/index"
|
||||
import { ModifiedPropSidebarItemLink } from "@medusajs/docs"
|
||||
|
||||
type ModifiedProps = Props & {
|
||||
item: ModifiedPropSidebarItemLink
|
||||
}
|
||||
|
||||
export default function DocSidebarItemLink({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
...props
|
||||
}: ModifiedProps): JSX.Element {
|
||||
const { href, label, className, autoAddBaseUrl, customProps } = item
|
||||
const isActive = isActiveSidebarItem(item, activePath)
|
||||
const isInternalLink = isInternalUrl(href)
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
"menu__list-item",
|
||||
className,
|
||||
customProps?.sidebar_is_title && "sidebar-title",
|
||||
customProps?.sidebar_is_group_headline && "sidebar-group-headline",
|
||||
customProps?.sidebar_is_group_divider && "sidebar-group-divider",
|
||||
customProps?.sidebar_is_divider_line && "sidebar-divider-line",
|
||||
customProps?.sidebar_is_back_link && "sidebar-back-link",
|
||||
customProps?.sidebar_is_soon &&
|
||||
"sidebar-soon-link sidebar-badge-wrapper",
|
||||
!customProps?.sidebar_is_title &&
|
||||
"[&_.sidebar-item-icon]:tw-w-[20px] [&_.sidebar-item-icon]:tw-h-[20px]",
|
||||
!customProps?.sidebar_is_title &&
|
||||
!customProps?.sidebar_is_back_link &&
|
||||
"[&_.sidebar-item-icon]:tw-mr-1"
|
||||
)}
|
||||
key={label}
|
||||
>
|
||||
<Link
|
||||
className={clsx("menu__link", !isInternalLink && "tw-items-center", {
|
||||
"menu__link--active": isActive,
|
||||
})}
|
||||
autoAddBaseUrl={autoAddBaseUrl}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
to={href}
|
||||
{...(isInternalLink && {
|
||||
onClick: onItemClick ? () => onItemClick(item) : undefined,
|
||||
})}
|
||||
{...props}
|
||||
>
|
||||
{customProps?.sidebar_icon && (
|
||||
<DocSidebarItemIcon
|
||||
icon={customProps.sidebar_icon}
|
||||
is_title={customProps.sidebar_is_title}
|
||||
is_disabled={customProps?.sidebar_is_soon}
|
||||
/>
|
||||
)}
|
||||
{label}
|
||||
{!isInternalLink && <IconExternalLink />}
|
||||
</Link>
|
||||
{customProps?.sidebar_is_soon && (
|
||||
<Badge variant="purple" className={`sidebar-soon-badge`}>
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.menuExternalLink {
|
||||
align-items: center;
|
||||
}
|
||||
Reference in New Issue
Block a user