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
27
www/apps/docs/src/theme/Navbar/ColorModeToggle/index.tsx
Normal file
27
www/apps/docs/src/theme/Navbar/ColorModeToggle/index.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from "react"
|
||||
import { useColorMode, useThemeConfig } from "@docusaurus/theme-common"
|
||||
import ColorModeToggle from "@theme/ColorModeToggle"
|
||||
import type { Props } from "@theme/Navbar/ColorModeToggle"
|
||||
import clsx from "clsx"
|
||||
|
||||
export default function NavbarColorModeToggle({
|
||||
className,
|
||||
}: Props): JSX.Element | null {
|
||||
const disabled = useThemeConfig().colorMode.disableSwitch
|
||||
const { colorMode, setColorMode } = useColorMode()
|
||||
|
||||
if (disabled) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<ColorModeToggle
|
||||
className={clsx("text-ui-fg-muted", className)}
|
||||
buttonClassName={clsx(
|
||||
"hover:!bg-medusa-button-neutral-hover dark:hover:!bg-medusa-button-neutral-hover-dark"
|
||||
)}
|
||||
value={colorMode}
|
||||
onChange={setColorMode}
|
||||
/>
|
||||
)
|
||||
}
|
||||
167
www/apps/docs/src/theme/Navbar/Content/index.tsx
Normal file
167
www/apps/docs/src/theme/Navbar/Content/index.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import React, { type ReactNode } from "react"
|
||||
import { useThemeConfig } from "@docusaurus/theme-common"
|
||||
import {
|
||||
splitNavbarItems,
|
||||
useNavbarMobileSidebar,
|
||||
} from "@docusaurus/theme-common/internal"
|
||||
import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem"
|
||||
import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"
|
||||
import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle"
|
||||
import NavbarLogo from "@theme/Navbar/Logo"
|
||||
import NavbarActions from "../../../components/Navbar/Actions"
|
||||
import { ThemeConfig } from "@medusajs/docs"
|
||||
import useIsBrowser from "@docusaurus/useIsBrowser"
|
||||
import clsx from "clsx"
|
||||
import { useSidebar } from "../../../providers/Sidebar"
|
||||
import { Tooltip } from "docs-ui"
|
||||
import { ChevronDoubleLeftMiniSolid, Sidebar } from "@medusajs/icons"
|
||||
|
||||
function useNavbarItems() {
|
||||
// TODO temporary casting until ThemeConfig type is improved
|
||||
return useThemeConfig().navbar.items as NavbarItemConfig[]
|
||||
}
|
||||
|
||||
function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
{items.map((item, i) => (
|
||||
<NavbarItem {...item} key={i} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function NavbarContentLayout({
|
||||
left,
|
||||
right,
|
||||
}: {
|
||||
left: ReactNode
|
||||
right: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-wrap justify-between items-center w-full",
|
||||
"lg:max-w-xl mx-auto py-0.5 px-1"
|
||||
)}
|
||||
>
|
||||
<div className={clsx("items-center flex flex-1 min-w-0 gap-1.5")}>
|
||||
{left}
|
||||
</div>
|
||||
<div
|
||||
className={clsx("items-center flex lg:flex-1 min-w-0", "justify-end")}
|
||||
>
|
||||
{right}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NavbarContent(): JSX.Element {
|
||||
const mobileSidebar = useNavbarMobileSidebar()
|
||||
|
||||
const items = useNavbarItems()
|
||||
const [leftItems, rightItems] = splitNavbarItems(items)
|
||||
const {
|
||||
navbarActions,
|
||||
docs: {
|
||||
sidebar: { hideable },
|
||||
},
|
||||
} = useThemeConfig() as ThemeConfig
|
||||
const sidebarContext = useSidebar()
|
||||
const isBrowser = useIsBrowser()
|
||||
|
||||
const isApple = isBrowser
|
||||
? navigator.userAgent.toLowerCase().indexOf("mac") !== 0
|
||||
: true
|
||||
|
||||
return (
|
||||
<NavbarContentLayout
|
||||
left={
|
||||
// TODO stop hardcoding items?
|
||||
<>
|
||||
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
|
||||
<NavbarLogo />
|
||||
<NavbarItems items={leftItems} />
|
||||
</>
|
||||
}
|
||||
right={
|
||||
// TODO stop hardcoding items?
|
||||
// Ask the user to add the respective navbar items => more flexible
|
||||
<div className="flex gap-0.5">
|
||||
<NavbarItems items={rightItems} />
|
||||
{hideable && sidebarContext?.hasSidebar && (
|
||||
<NavbarActions
|
||||
items={[
|
||||
{
|
||||
type: "button",
|
||||
html: !sidebarContext?.hiddenSidebarContainer
|
||||
? `<span class="text-compact-x-small-plus">Close sidebar <kbd class="${clsx(
|
||||
"bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
|
||||
"border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
|
||||
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
|
||||
"inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none ml-0.5"
|
||||
)}">${isApple ? "⌘" : "Ctrl"}</kbd>
|
||||
<kbd class="${clsx(
|
||||
"bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
|
||||
"border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
|
||||
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
|
||||
"inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none"
|
||||
)}">I</kbd></span>`
|
||||
: `<span class="text-compact-x-small-plus">Lock sidebar open <kbd class="${clsx(
|
||||
"bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
|
||||
"border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
|
||||
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
|
||||
"inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none ml-0.5"
|
||||
)}">${isApple ? "⌘" : "Ctrl"}</kbd>
|
||||
<kbd class="${clsx(
|
||||
"bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
|
||||
"border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
|
||||
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
|
||||
"inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none"
|
||||
)}">I</kbd></span>`,
|
||||
events: {
|
||||
onClick: sidebarContext?.onCollapse,
|
||||
onMouseEnter: () => {
|
||||
if (!sidebarContext?.hiddenSidebarContainer) {
|
||||
sidebarContext?.setFloatingSidebar(false)
|
||||
} else {
|
||||
sidebarContext?.setFloatingSidebar(true)
|
||||
}
|
||||
},
|
||||
onMouseLeave: () => {
|
||||
setTimeout(() => {
|
||||
if (
|
||||
!document.querySelector(
|
||||
".theme-doc-sidebar-container:hover"
|
||||
)
|
||||
) {
|
||||
sidebarContext?.setFloatingSidebar(false)
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
},
|
||||
Icon: !sidebarContext?.hiddenSidebarContainer ? (
|
||||
<Sidebar className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
|
||||
) : (
|
||||
<ChevronDoubleLeftMiniSolid className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
|
||||
),
|
||||
buttonType: "icon",
|
||||
},
|
||||
]}
|
||||
className="sidebar-toggler"
|
||||
/>
|
||||
)}
|
||||
<Tooltip text="Switch theme">
|
||||
<NavbarColorModeToggle
|
||||
className={clsx(
|
||||
"navbar-action-icon-item !w-2 !h-2 [&>button]:!rounded"
|
||||
)}
|
||||
/>
|
||||
</Tooltip>
|
||||
<NavbarActions items={navbarActions} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
44
www/apps/docs/src/theme/Navbar/Layout/index.tsx
Normal file
44
www/apps/docs/src/theme/Navbar/Layout/index.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
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 type { Props } from "@theme/Navbar/Layout"
|
||||
|
||||
export default function NavbarLayout({ children }: Props): JSX.Element {
|
||||
const {
|
||||
navbar: { hideOnScroll, style },
|
||||
} = useThemeConfig()
|
||||
const mobileSidebar = useNavbarMobileSidebar()
|
||||
const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll)
|
||||
return (
|
||||
<nav
|
||||
ref={navbarRef}
|
||||
aria-label={translate({
|
||||
id: "theme.NavBar.navAriaLabel",
|
||||
message: "Main",
|
||||
description: "The ARIA label for the main navigation",
|
||||
})}
|
||||
className={clsx(
|
||||
"navbar",
|
||||
"navbar--fixed-top",
|
||||
hideOnScroll && [
|
||||
"transition-transform",
|
||||
!isNavbarVisible && "translate-x-0 translate-y-[calc(-100%-2px)]",
|
||||
],
|
||||
{
|
||||
"navbar--dark": style === "dark",
|
||||
"navbar--primary": style === "primary",
|
||||
"navbar-sidebar--show": mobileSidebar.shown,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
<NavbarMobileSidebar />
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
20
www/apps/docs/src/theme/Navbar/Logo/index.tsx
Normal file
20
www/apps/docs/src/theme/Navbar/Logo/index.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from "react"
|
||||
import Logo from "@theme/Logo"
|
||||
import MobileLogo from "../../MobileLogo"
|
||||
|
||||
export default function NavbarLogo(): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<Logo
|
||||
className="navbar__brand hidden lg:block"
|
||||
imageClassName="navbar__logo"
|
||||
titleClassName="navbar__title text--truncate"
|
||||
/>
|
||||
<MobileLogo
|
||||
className="navbar__brand lg:hidden mx-auto"
|
||||
imageClassName="navbar__logo"
|
||||
titleClassName="navbar__title text--truncate"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from "react"
|
||||
import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal"
|
||||
import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"
|
||||
import IconClose from "@theme/Icon/Close"
|
||||
import NavbarLogo from "@theme/Navbar/Logo"
|
||||
import clsx from "clsx"
|
||||
|
||||
function CloseButton() {
|
||||
const mobileSidebar = useNavbarMobileSidebar()
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(
|
||||
"bg-transparent border-0 text-inherit cursor-pointer p-0",
|
||||
"flex ml-auto"
|
||||
)}
|
||||
onClick={() => mobileSidebar.toggle()}
|
||||
>
|
||||
<IconClose color="var(--ifm-color-emphasis-600)" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NavbarMobileSidebarHeader(): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"items-center shadow-navbar dark:shadow-navbar-dark",
|
||||
"flex flex-1 h-navbar py-0.75 px-1.5"
|
||||
)}
|
||||
>
|
||||
<NavbarLogo />
|
||||
<NavbarColorModeToggle
|
||||
className={clsx(
|
||||
"[&>button]:hover:bg-medusa-button-neutral-hover dark:[&>button]:hover:bg-medusa-button-neutral-hover-dark",
|
||||
"[&>button]:!rounded"
|
||||
)}
|
||||
/>
|
||||
<CloseButton />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
import { useNavbarSecondaryMenu } from "@docusaurus/theme-common/internal"
|
||||
import type { Props } from "@theme/Navbar/MobileSidebar/Layout"
|
||||
|
||||
export default function NavbarMobileSidebarLayout({
|
||||
primaryMenu,
|
||||
secondaryMenu,
|
||||
}: Props): JSX.Element {
|
||||
const { shown: secondaryMenuShown } = useNavbarSecondaryMenu()
|
||||
return (
|
||||
<div className="navbar-sidebar top-[57px] shadow-none">
|
||||
<div
|
||||
className={clsx("navbar-sidebar__items", {
|
||||
"navbar-sidebar__items--show-secondary": secondaryMenuShown,
|
||||
})}
|
||||
>
|
||||
<div className="navbar-sidebar__item menu">{primaryMenu}</div>
|
||||
<div className="navbar-sidebar__item menu">{secondaryMenu}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal"
|
||||
import { translate } from "@docusaurus/Translate"
|
||||
import { Sidebar, XMark } from "@medusajs/icons"
|
||||
|
||||
export default function MobileSidebarToggle(): JSX.Element {
|
||||
const { toggle, shown } = useNavbarMobileSidebar()
|
||||
return (
|
||||
<button
|
||||
onClick={toggle}
|
||||
aria-label={translate({
|
||||
id: "theme.docs.sidebar.toggleSidebarButtonAriaLabel",
|
||||
message: "Toggle navigation bar",
|
||||
description:
|
||||
"The ARIA label for hamburger menu button of mobile navigation",
|
||||
})}
|
||||
aria-expanded={shown}
|
||||
className="navbar__toggle !block lg:!hidden clean-btn"
|
||||
type="button"
|
||||
>
|
||||
{!shown && (
|
||||
<Sidebar className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
|
||||
)}
|
||||
{shown && (
|
||||
<XMark className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
10
www/apps/docs/src/theme/Navbar/Search/index.tsx
Normal file
10
www/apps/docs/src/theme/Navbar/Search/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
import type { Props } from "@theme/Navbar/Search"
|
||||
|
||||
export default function NavbarSearch({
|
||||
children,
|
||||
className,
|
||||
}: Props): JSX.Element {
|
||||
return <div className={clsx("flex", className)}>{children}</div>
|
||||
}
|
||||
Reference in New Issue
Block a user