docs: create docs workspace (#5174)
* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
This commit is contained in:
Shahed Nasser
GitHub
238
www/apps/docs/src/theme/DocSidebarItem/Category/index.tsx
Normal file
238
www/apps/docs/src/theme/DocSidebarItem/Category/index.tsx
Normal file
@@ -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 { ModifiedPropSidebarItemCategory } from "@medusajs/docs"
|
||||
import DocSidebarItemIcon from "../../../components/DocSidebarItemIcon"
|
||||
import { Badge } from "docs-ui"
|
||||
|
||||
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="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]:w-[20px] [&_.sidebar-item-icon]:h-[20px]",
|
||||
!customProps?.sidebar_is_title &&
|
||||
!customProps?.sidebar_is_back_link &&
|
||||
"[&_.sidebar-item-icon]:mr-0.75"
|
||||
)}
|
||||
>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
60
www/apps/docs/src/theme/DocSidebarItem/Html/index.tsx
Normal file
60
www/apps/docs/src/theme/DocSidebarItem/Html/index.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
import { ThemeClassNames } from "@docusaurus/theme-common"
|
||||
import type { Props } from "@theme/DocSidebarItem/Html"
|
||||
import { ModifiedPropSidebarItemHtml } from "@medusajs/docs"
|
||||
import DocSidebarItemIcon from "../../../components/DocSidebarItemIcon"
|
||||
import { Badge } from "docs-ui"
|
||||
|
||||
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:py-[6px] lg: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]:w-[20px] [&_.sidebar-item-icon]:h-[20px]",
|
||||
!customProps?.sidebar_is_title &&
|
||||
!customProps?.sidebar_is_back_link &&
|
||||
"[&_.sidebar-item-icon]:mr-0.75"
|
||||
)}
|
||||
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>
|
||||
)
|
||||
}
|
||||
78
www/apps/docs/src/theme/DocSidebarItem/Link/index.tsx
Normal file
78
www/apps/docs/src/theme/DocSidebarItem/Link/index.tsx
Normal file
@@ -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 { ModifiedPropSidebarItemLink } from "@medusajs/docs"
|
||||
import DocSidebarItemIcon from "../../../components/DocSidebarItemIcon"
|
||||
import { Badge } from "docs-ui"
|
||||
|
||||
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]:w-[20px] [&_.sidebar-item-icon]:h-[20px]",
|
||||
!customProps?.sidebar_is_title &&
|
||||
!customProps?.sidebar_is_back_link &&
|
||||
"[&_.sidebar-item-icon]:mr-0.75"
|
||||
)}
|
||||
key={label}
|
||||
>
|
||||
<Link
|
||||
className={clsx("menu__link", !isInternalLink && "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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user