asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: add routing page (#9550)

Browse Source 
- Add a new homepage to `book` project for the routing page
- Move all main doc pages to be under `/v2/learn` (and added redirects + fixed links across docs)
- Other: add admin components to resources dropdown + fixes to search on mobile.

Closes DX-955

Preview: https://docs-v2-git-docs-router-page-medusajs.vercel.app/v2
This commit is contained in:
Shahed Nasser
2024-10-18 08:24:34 +00:00
committed by GitHub
parent 7a47f5211d
commit 0a37675f0e
223 changed files with 2549 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/packages/docs-ui/src/components/BorderedIcon/index.tsx
+5 -2
View File
@@ -1,6 +1,7 @@
import React from "react"
import clsx from "clsx"
import { IconProps } from "@medusajs/icons/dist/types"
import Image from "next/image"
export type BorderedIconProps = {
icon?: string
@@ -29,9 +30,11 @@ export const BorderedIcon = ({
>
<span className={clsx("rounded-docs_xs", wrapperClassName)}>
{!IconComponent && (
<img
<Image
src={icon || ""}
className={clsx(iconClassName, "bordered-icon")}
className={clsx(iconClassName, "bordered-icon rounded-docs_xs")}
width={28}
height={28}
alt=""
/>
)}
www/packages/docs-ui/src/components/Breadcrumbs/index.tsx
+1 -1
View File
@@ -93,7 +93,7 @@ export const Breadcrumbs = () => {
className={clsx(
"flex items-center gap-docs_0.25",
"text-medusa-fg-muted text-compact-small",
"mb-docs_1"
"mb-docs_1 flex-wrap"
)}
>
{Array.from(breadcrumbItems).map(([link, title], index) => (
www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx
+4 -9
View File
@@ -42,10 +42,7 @@ export const CardDefaultLayout = ({
)}
{image && (
<BorderedIcon
wrapperClassName={clsx(
"p-[4.5px] bg-medusa-bg-component-hover",
iconClassName
)}
wrapperClassName={clsx("bg-medusa-bg-base", iconClassName)}
icon={image}
/>
)}
@@ -53,19 +50,17 @@ export const CardDefaultLayout = ({
className={clsx("flex flex-col flex-1 overflow-auto", contentClassName)}
>
{title && (
<div className="text-compact-small-plus text-medusa-fg-base truncate">
<div className="text-small-plus text-medusa-fg-base truncate">
{title}
</div>
)}
{text && (
<span className="text-compact-small text-medusa-fg-subtle">
{text}
</span>
<span className="text-small-plus text-medusa-fg-subtle">{text}</span>
)}
{children}
</div>
{badge && <Badge {...badge} />}
<span className="text-medusa-fg-muted">
<span className="text-medusa-fg-subtle">
{isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
</span>
www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx
+12 -7
View File
@@ -2,7 +2,7 @@ import React from "react"
import { CardProps } from "../.."
import { useIsExternalLink } from "../../../.."
import clsx from "clsx"
import { ArrowRightMini, ArrowUpRightOnBox } from "@medusajs/icons"
import { ArrowUpRightOnBox, TriangleRightMini } from "@medusajs/icons"
import Link from "next/link"
export const CardLargeLayout = ({
@@ -30,11 +30,16 @@ export const CardLargeLayout = ({
"shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
href &&
"group-hover:shadow-elevation-card-hover group-hover:dark:shadow-elevation-card-hover-dark",
"px-docs_0.75 py-docs_0.5 flex justify-center items-center"
"px-docs_0.75 py-docs_0.5 flex justify-center items-center w-full"
)}
>
{IconComponent && (
<IconComponent className="w-docs_2 h-docs_2 text-medusa-fg-subtle" />
<IconComponent
className="text-medusa-fg-subtle"
width={32}
height={32}
viewBox="0 0 32 32"
/>
)}
{image && (
<img src={image} alt={title || text || ""} className="w-[144px]" />
@@ -44,12 +49,12 @@ export const CardLargeLayout = ({
<div className="flex gap-docs_0.25 items-center text-medusa-fg-base">
{title && <span className="text-compact-small-plus">{title}</span>}
{href && isExternal && <ArrowUpRightOnBox />}
{href && !isExternal && <ArrowRightMini />}
{href && !isExternal && (
<TriangleRightMini className="group-hover:translate-x-docs_0.125 transition-transform" />
)}
</div>
{text && (
<span className="text-compact-small text-medusa-fg-subtle">
{text}
</span>
<span className="text-small-plus text-medusa-fg-subtle">{text}</span>
)}
</div>
{href && (
www/packages/docs-ui/src/components/Card/Layout/Mini/index.tsx
+97
View File
@@ -0,0 +1,97 @@
"use client"
import React from "react"
import clsx from "clsx"
import { CardProps } from "../.."
import { BorderedIcon, ThemeImage, useIsExternalLink } from "../../../.."
import Link from "next/link"
import Image from "next/image"
import { ArrowUpRightOnBox, TriangleRightMini } from "@medusajs/icons"
export const CardLayoutMini = ({
icon,
image,
themeImage,
title,
text,
href,
}: CardProps) => {
const isExternal = useIsExternalLink({ href })
return (
<div
className={clsx(
"relative rounded-docs_DEFAULT border-medusa-fg-on-inverted border",
"shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
"hover:shadow-elevation-card-hover dark:hover:shadow-elevation-card-hover-dark",
"bg-medusa-tag-neutral-bg dark:bg-medusa-bg-component",
"hover:bg-medusa-tag-neutral-bg-hover dark:hover:bg-medusa-bg-component-hover",
"w-fit transition-all"
)}
>
<div
className={clsx(
"rounded-docs_DEFAULT flex gap-docs_0.75 py-docs_0.25",
"pl-docs_0.25 pr-docs_0.75 items-center"
)}
>
{icon && (
<BorderedIcon
wrapperClassName={clsx("p-[4.5px] bg-medusa-bg-component-hover")}
IconComponent={icon}
/>
)}
{image && (
<Image
src={image}
className={clsx(
"shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
"rounded-docs_xs"
)}
width={45}
height={36}
alt={title || text || ""}
style={{
width: "45px",
height: "36px",
}}
/>
)}
{themeImage && (
<ThemeImage
{...themeImage}
className={clsx(
"shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
"rounded-docs_xs"
)}
width={45}
height={36}
alt={title || text || ""}
style={{
width: "45px",
height: "36px",
}}
/>
)}
<div className="flex flex-col">
{title && (
<span className="text-x-small-plus text-medusa-fg-base">
{title}
</span>
)}
{text && (
<span className="text-x-small-plus text-medusa-fg-subtle">
{text}
</span>
)}
</div>
<span className="text-medusa-fg-subtle">
{isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
</span>
{href && (
<Link href={href} className="absolute left-0 top-0 w-full h-full" />
)}
</div>
</div>
)
}
www/packages/docs-ui/src/components/Card/index.tsx
+8 -1
View File
@@ -4,11 +4,16 @@ import { CardDefaultLayout } from "./Layout/Default"
import { IconProps } from "@medusajs/icons/dist/types"
import { CardLargeLayout } from "./Layout/Large"
import { CardFillerLayout } from "./Layout/Filler"
import { CardLayoutMini } from "./Layout/Mini"
export type CardProps = {
type?: "default" | "large" | "filler"
type?: "default" | "large" | "filler" | "mini"
icon?: React.FC<IconProps>
image?: string
themeImage?: {
light: string
dark: string
}
title?: string
text?: string
href?: string
@@ -25,6 +30,8 @@ export const Card = ({ type = "default", ...props }: CardProps) => {
return <CardLargeLayout {...props} />
case "filler":
return <CardFillerLayout {...props} />
case "mini":
return <CardLayoutMini {...props} />
default:
return <CardDefaultLayout {...props} />
}
www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
+27 -11
View File
@@ -24,6 +24,7 @@ type CodeBlockLineProps = {
lineNumberColorClassName: string
lineNumberBgClassName: string
isTerminal: boolean
animateTokenHighlights?: boolean
} & Pick<RenderProps, "getLineProps" | "getTokenProps">
export const CodeBlockLine = ({
@@ -36,6 +37,7 @@ export const CodeBlockLine = ({
lineNumberColorClassName,
lineNumberBgClassName,
isTerminal,
animateTokenHighlights = false,
}: CodeBlockLineProps) => {
const lineProps = getLineProps({ line, key: lineNumber })
@@ -94,6 +96,16 @@ export const CodeBlockLine = ({
if (currentPositionInHighlightedText === highlight.text!.length) {
// matching text was found, break loop
endIndex = tokenIndex
const trimmedContent = token.content.trimEnd()
const endingSpacesLength =
token.content.length - trimmedContent.length
if (endingSpacesLength) {
line.splice(tokenIndex + 1, 0, {
content: new Array(endingSpacesLength).fill(" ").join(""),
types: ["plain"],
})
token.content = trimmedContent
}
return true
}
})
@@ -197,19 +209,26 @@ export const CodeBlockLine = ({
const getTokensElm = ({
tokens,
isTokenHighlighted,
isLineHighlighted,
offset,
}: {
tokens: Token[]
isTokenHighlighted: boolean
isLineHighlighted: boolean
offset: number
}) => (
<span
className={clsx(
isTokenHighlighted && "lg:bg-medusa-contrast-border-base cursor-default"
<span className={clsx(isTokenHighlighted && "relative")}>
{isTokenHighlighted && (
<span
className={clsx(
animateTokenHighlights && [
"animate-fast animate-growWidth animation-fill-forwards",
],
!animateTokenHighlights && "w-full",
"absolute left-0 top-0 h-full z-0",
"lg:bg-medusa-alpha-white-alpha-6 lg:border lg:border-medusa-alpha-white-alpha-12",
"lg:rounded-docs_xs scale-x-[1.05]"
)}
/>
)}
>
{tokens.map((token, key) => {
const tokenKey = offset + key
const { className: tokenClassName, ...rest } = getTokenProps({
@@ -221,8 +240,7 @@ export const CodeBlockLine = ({
key={tokenKey}
className={clsx(
tokenClassName,
(isTokenHighlighted || isLineHighlighted) &&
"!text-medusa-contrast-fg-primary"
isTokenHighlighted && "relative z-[1]"
)}
{...rest}
/>
@@ -242,7 +260,7 @@ export const CodeBlockLine = ({
{...lineProps}
className={clsx(
"table-row",
isHighlightedLine && "bg-medusa-contrast-border-base",
isHighlightedLine && "bg-medusa-alpha-white-alpha-6",
lineProps.className
)}
>
@@ -287,7 +305,6 @@ export const CodeBlockLine = ({
tokens,
isTokenHighlighted: isHighlighted,
offset,
isLineHighlighted: isHighlightedLine,
})}
</Tooltip>
)}
@@ -296,7 +313,6 @@ export const CodeBlockLine = ({
tokens,
isTokenHighlighted: isHighlighted,
offset,
isLineHighlighted: isHighlightedLine,
})}
</React.Fragment>
)
www/packages/docs-ui/src/components/CodeBlock/index.tsx
+90 -43
View File
@@ -47,11 +47,23 @@ export type CodeBlockStyle = "loud" | "subtle" | "inline"
export type CodeBlockProps = {
source: string
lang?: string
wrapperClassName?: string
innerClassName?: string
className?: string
collapsed?: boolean
blockStyle?: CodeBlockStyle
children?: React.ReactNode
style?: React.HTMLAttributes<HTMLDivElement>["style"]
forceNoTitle?: boolean
animateTokenHighlights?: boolean
overrideColors?: {
bg?: string
innerBg?: string
lineNumbersBg?: string
border?: string
innerBorder?: string
boxShadow?: string
}
} & CodeBlockMetaFields &
Omit<HighlightProps, "code" | "language" | "children">
@@ -59,7 +71,10 @@ export const CodeBlock = ({
source,
hasTabs = false,
lang = "",
wrapperClassName,
innerClassName,
className,
overrideColors = {},
collapsed = false,
title = "",
highlights = [],
@@ -73,6 +88,8 @@ export const CodeBlock = ({
expandButtonLabel,
isTerminal,
style,
forceNoTitle = false,
animateTokenHighlights,
...rest
}: CodeBlockProps) => {
if (!source && typeof children === "string") {
@@ -94,6 +111,10 @@ export const CodeBlock = ({
: isTerminal
}, [isTerminal, lang])
const codeTitle = useMemo(() => {
if (forceNoTitle) {
return ""
}
if (title) {
return title
}
@@ -107,7 +128,7 @@ export const CodeBlock = ({
}
return "Code"
}, [title, isTerminalCode, hasTabs])
}, [title, isTerminalCode, hasTabs, forceNoTitle])
const hasInnerCodeBlock = useMemo(
() => hasTabs || codeTitle.length > 0,
[hasTabs, codeTitle]
@@ -123,72 +144,90 @@ export const CodeBlock = ({
const bgColor = useMemo(
() =>
clsx(
blockStyle === "loud" && "bg-medusa-contrast-bg-base",
blockStyle === "subtle" && [
colorMode === "light" && "bg-medusa-bg-subtle",
colorMode === "dark" && "bg-medusa-code-bg-base",
overrideColors.bg,
!overrideColors.bg && [
blockStyle === "loud" && "bg-medusa-contrast-bg-base",
blockStyle === "subtle" && [
colorMode === "light" && "bg-medusa-bg-subtle",
colorMode === "dark" && "bg-medusa-code-bg-base",
],
]
),
[blockStyle, colorMode]
[blockStyle, colorMode, overrideColors]
)
const lineNumbersColor = useMemo(
() =>
clsx(
blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
blockStyle === "subtle" && [
colorMode === "light" && "text-medusa-fg-muted",
colorMode === "dark" && "text-medusa-contrast-fg-secondary",
overrideColors.lineNumbersBg,
!overrideColors.lineNumbersBg && [
blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
blockStyle === "subtle" && [
colorMode === "light" && "text-medusa-fg-muted",
colorMode === "dark" && "text-medusa-contrast-fg-secondary",
],
]
),
[blockStyle, colorMode]
[blockStyle, colorMode, overrideColors]
)
const borderColor = useMemo(
() =>
clsx(
blockStyle === "loud" && "border-0",
blockStyle === "subtle" && [
colorMode === "light" && "border-medusa-border-base",
colorMode === "dark" && "border-medusa-code-border",
overrideColors.border,
!overrideColors.border && [
blockStyle === "loud" && "border-0",
blockStyle === "subtle" && [
colorMode === "light" && "border-medusa-border-base",
colorMode === "dark" && "border-medusa-code-border",
],
]
),
[blockStyle, colorMode]
[blockStyle, colorMode, overrideColors]
)
const boxShadow = useMemo(
() =>
clsx(
blockStyle === "loud" &&
"shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
blockStyle === "subtle" && "shadow-none"
overrideColors.boxShadow,
!overrideColors.boxShadow && [
blockStyle === "loud" &&
"shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
blockStyle === "subtle" && "shadow-none",
]
),
[blockStyle]
[blockStyle, overrideColors]
)
const innerBgColor = useMemo(
() =>
clsx(
blockStyle === "loud" && [
hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
!hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
],
blockStyle === "subtle" && bgColor
overrideColors.innerBg,
!overrideColors.innerBg && [
blockStyle === "loud" && [
hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
!hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
],
blockStyle === "subtle" && bgColor,
]
),
[blockStyle, bgColor, hasInnerCodeBlock]
[blockStyle, bgColor, hasInnerCodeBlock, overrideColors]
)
const innerBorderClasses = useMemo(
() =>
clsx(
blockStyle === "loud" && [
hasInnerCodeBlock &&
"border border-solid border-medusa-contrast-border-bot rounded-docs_DEFAULT",
!hasInnerCodeBlock && "border-transparent rounded-docs_DEFAULT",
],
blockStyle === "subtle" && "border-transparent rounded-docs_DEFAULT"
overrideColors.innerBorder,
!overrideColors.innerBorder && [
blockStyle === "loud" && [
hasInnerCodeBlock &&
"border border-solid border-medusa-contrast-border-bot rounded-docs_DEFAULT",
!hasInnerCodeBlock && "border-transparent rounded-docs_DEFAULT",
],
blockStyle === "subtle" && "border-transparent rounded-docs_DEFAULT",
]
),
[blockStyle, hasInnerCodeBlock]
[blockStyle, hasInnerCodeBlock, overrideColors]
)
const language = useMemo(() => {
@@ -227,6 +266,7 @@ export const CodeBlock = ({
lineNumberColorClassName={lineNumbersColor}
lineNumberBgClassName={innerBgColor}
isTerminal={isTerminalCode}
animateTokenHighlights={animateTokenHighlights}
{...highlightProps}
/>
)
@@ -309,7 +349,8 @@ export const CodeBlock = ({
blockStyle === "loud" && "code-block-highlight",
blockStyle === "subtle" &&
colorMode === "light" &&
"code-block-highlight-light"
"code-block-highlight-light",
wrapperClassName
)}
>
{codeTitle && (
@@ -327,7 +368,7 @@ export const CodeBlock = ({
<div
className={clsx(
"relative mb-docs_1",
"w-full max-w-full border",
"w-full max-w-full border code-block-elm",
bgColor,
borderColor,
collapsed && "max-h-[400px] overflow-auto",
@@ -350,7 +391,12 @@ export const CodeBlock = ({
...rest
}) => (
<div
className={clsx(innerBorderClasses, innerBgColor, "relative")}
className={clsx(
innerBorderClasses,
innerBgColor,
"relative",
innerClassName
)}
ref={codeContainerRef}
>
{collapsibleType === "start" && (
@@ -406,13 +452,14 @@ export const CodeBlock = ({
})}
</code>
</pre>
{!hasInnerCodeBlock && (
<CodeBlockActions
{...actionsProps}
inHeader={false}
isSingleLine={tokens.length <= 1}
/>
)}
{!hasInnerCodeBlock &&
(!noCopy || !noReport || canShowApiTesting) && (
<CodeBlockActions
{...actionsProps}
inHeader={false}
isSingleLine={tokens.length <= 1}
/>
)}
{collapsibleType === "end" && (
<>
<CodeBlockCollapsibleFade
www/packages/docs-ui/src/components/EditButton/index.tsx
+2 -1
View File
@@ -13,7 +13,8 @@ export const EditButton = ({ filePath }: EditButtonProps) => {
href={`https://github.com/medusajs/medusa/edit/develop${filePath}`}
className={clsx(
"flex w-fit gap-docs_0.25 my-docs_2 items-center",
"text-medusa-fg-muted hover:text-medusa-fg-subtle"
"text-medusa-fg-muted hover:text-medusa-fg-subtle",
"text-compact-small-plus"
)}
>
<span>Edit this page</span>
www/packages/docs-ui/src/components/Feedback/index.tsx
+11 -3
View File
@@ -32,6 +32,7 @@ export type FeedbackProps = {
extraData?: ExtraData
vertical?: boolean
showLongForm?: boolean
showDottedSeparator?: boolean
} & React.HTMLAttributes<HTMLDivElement>
export const Feedback = ({
@@ -50,6 +51,7 @@ export const Feedback = ({
extraData = {},
vertical = false,
showLongForm = false,
showDottedSeparator = true,
}: FeedbackProps) => {
const [showForm, setShowForm] = useState(false)
const [submittedFeedback, setSubmittedFeedback] = useState(false)
@@ -121,7 +123,9 @@ export const Feedback = ({
return (
<div className={clsx(className)}>
<DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
{showDottedSeparator && (
<DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
)}
<SwitchTransition mode="out-in">
<CSSTransition
key={
@@ -151,7 +155,9 @@ export const Feedback = ({
)}
ref={inlineFeedbackRef}
>
<Label>{question}</Label>
<Label className={"text-compact-small text-medusa-fg-subtle"}>
{question}
</Label>
<div
className={clsx(
"flex gap-docs_0.5",
@@ -299,7 +305,9 @@ export const Feedback = ({
</>
</CSSTransition>
</SwitchTransition>
<DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
{showDottedSeparator && (
<DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
)}
</div>
)
}
www/packages/docs-ui/src/components/IconHeadline/index.tsx
+15
View File
@@ -0,0 +1,15 @@
import React from "react"
type IconHeadlineProps = {
title: string
icon: React.ReactNode
}
export const IconHeadline = ({ title, icon }: IconHeadlineProps) => {
return (
<div className="flex gap-docs_0.5 text-medusa-fg-base">
{icon}
<span className="text-small-plus">{title}</span>
</div>
)
}
www/packages/docs-ui/src/components/Icons/Book/index.tsx
+63
View File
@@ -0,0 +1,63 @@
import React from "react"
import { IconProps } from "@medusajs/icons/dist/types"
export const BookIcon = (props: IconProps) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_10569_98393)">
<path
opacity="0.3"
d="M13.5556 1.55566H5.11111V11.3334H13.5556V1.55566Z"
fill="currentColor"
/>
<path
d="M5.11111 1.55566V11.3334"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2.44444 12.889V3.33344C2.44444 2.35122 3.24 1.55566 4.22222 1.55566H13.5556V11.3334"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.66666 14.4445H4C3.14133 14.4445 2.44444 13.7485 2.44444 12.8889C2.44444 12.0294 3.14133 11.3334 4 11.3334H13.5556C12.9858 12.0836 12.9031 13.5974 13.5556 14.4445H4.66666Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.77777 4.66675H10.8889"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.77777 7.33337H10.8889"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_10569_98393">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
)
}
www/packages/docs-ui/src/components/Icons/CalendarRefresh/index.tsx
+70
View File
@@ -0,0 +1,70 @@
import React from "react"
import { IconProps } from "@medusajs/icons/dist/types"
export const CalendarRefreshIcon = (props: IconProps) => {
return (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_10681_55295)">
<path
opacity="0.3"
d="M3.99829 8.44374C3.99829 6.48006 5.59017 4.88818 7.55385 4.88818H24.4427C26.4065 4.88818 27.9983 6.48006 27.9983 8.44374V11.1104H3.99829V8.44374Z"
fill="currentColor"
/>
<path
d="M10.2209 4.88808V1.33252"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21.7756 4.88808V1.33252"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.99829 11.1099H27.9983"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M25.3313 23.5543H29.7757V19.1099"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M27.9983 15.0624V8.44374C27.9983 6.48107 26.4072 4.88818 24.4427 4.88818H7.55385C5.5894 4.88818 3.99829 6.48107 3.99829 8.44374V23.5548C3.99829 25.5175 5.5894 27.1104 7.55385 27.1104H15.8507"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28.4427 28.2431C27.5521 29.1871 26.2881 29.7773 24.8872 29.7773C22.1867 29.7773 19.9983 27.5888 19.9983 24.8884C19.9983 22.188 22.1867 19.9995 24.8872 19.9995C26.9601 19.9995 28.7307 21.2902 29.4436 23.1106"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_10681_55295">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}
www/packages/docs-ui/src/components/Icons/ChefHat/index.tsx
+65
View File
@@ -0,0 +1,65 @@
import React from "react"
import { IconProps } from "@medusajs/icons/dist/types"
export const ChefHatIcon = (props: IconProps) => {
return (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_10681_55312)">
<path
opacity="0.3"
fillRule="evenodd"
clipRule="evenodd"
d="M21.4896 7.07933C20.7301 4.77472 18.5587 3.11133 15.9998 3.11133C13.4401 3.11133 11.2694 4.77558 10.5105 7.08111C9.55229 6.67222 8.47444 6.54599 7.32421 6.78244C5.24066 7.21088 3.5589 8.94777 3.19445 11.0438C2.60957 14.4109 5.18557 17.3336 8.44421 17.3336V24.4447H23.5553V17.3336C26.8122 17.3336 29.3882 14.4127 28.8069 11.0473C28.4442 8.94955 26.7625 7.21266 24.6789 6.78244C23.5269 6.54422 22.4496 6.67044 21.4896 7.07933Z"
fill="currentColor"
/>
<path
d="M8.44446 24.4446H23.5556"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.7777 21.3335V24.4446"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.2222 21.3335V24.4446"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.5101 7.08108C9.55191 6.67219 8.47456 6.54596 7.32434 6.78241C5.24078 7.21085 3.55902 8.94774 3.19458 11.0437C2.60969 14.4109 5.18569 17.3335 8.44434 17.3335V27.1113C8.44434 28.0926 9.2408 28.8891 10.2221 28.8891H21.7777C22.759 28.8891 23.5555 28.0926 23.5555 27.1113V17.3335C26.8124 17.3335 29.3884 14.4126 28.807 11.0473C28.4444 8.94952 26.7626 7.21263 24.679 6.78241C23.527 6.54419 22.4497 6.67041 21.4897 7.0793"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.2222 8.88911C10.2222 5.69799 12.8088 3.11133 15.9999 3.11133C19.1911 3.11133 21.7777 5.69799 21.7777 8.88911"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_10681_55312">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}
www/packages/docs-ui/src/components/Icons/ImageBinary/index.tsx
+69
View File
@@ -0,0 +1,69 @@
import React from "react"
import { IconProps } from "@medusajs/icons/dist/types"
export const ImageBinaryIcon = (props: IconProps) => {
return (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_10681_55277)">
<path
opacity="0.3"
fillRule="evenodd"
clipRule="evenodd"
d="M6.6664 5.78027C4.70272 5.78027 3.11084 7.37215 3.11084 9.33583V22.6692C3.11084 24.6329 4.70272 26.2247 6.6664 26.2247H7.13191L17.3331 16.0236V5.78027H6.6664Z"
fill="currentColor"
/>
<path
d="M7.11084 26.2244L17.3331 16.0022"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.3331 26.2247H6.6664C4.70195 26.2247 3.11084 24.6336 3.11084 22.6692V9.33583C3.11084 7.37138 4.70195 5.78027 6.6664 5.78027H17.3331"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.222 15.1134C11.4493 15.1134 12.4442 14.1185 12.4442 12.8912C12.4442 11.6639 11.4493 10.6689 10.222 10.6689C8.99467 10.6689 7.99976 11.6639 7.99976 12.8912C7.99976 14.1185 8.99467 15.1134 10.222 15.1134Z"
fill="currentColor"
/>
<path
d="M26.222 27.1133C27.9402 27.1133 29.3331 25.1234 29.3331 22.6688C29.3331 20.2142 27.9402 18.2244 26.222 18.2244C24.5037 18.2244 23.1108 20.2142 23.1108 22.6688C23.1108 25.1234 24.5037 27.1133 26.222 27.1133Z"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M26.2216 13.7795V4.89062C26.2216 4.89062 25.203 6.68263 23.043 7.09507"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.3331 3.11328V28.8911"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_10681_55277">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}
www/packages/docs-ui/src/components/Icons/PuzzleColored/index.tsx
+35
View File
@@ -0,0 +1,35 @@
import React from "react"
import { IconProps } from "@medusajs/icons/dist/types"
export const PuzzleColoredIcon = (props: IconProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
{...props}
>
<g clipPath="url(#clip0_10683_56033)">
<path
opacity="0.3"
d="M13.1111 7.33325C13.4418 7.33325 13.7476 7.43814 14 7.61503V5.55547C14 4.57414 13.2044 3.7777 12.2222 3.7777H10.1627C10.3387 3.52525 10.4444 3.22036 10.4444 2.88881C10.4444 2.02925 9.74755 1.33325 8.88888 1.33325C8.03022 1.33325 7.33333 2.02925 7.33333 2.88881C7.33333 3.22036 7.43822 3.52525 7.61511 3.7777H5.55555C4.57333 3.7777 3.77777 4.57414 3.77777 5.55547V7.61503C3.52533 7.43903 3.21955 7.33325 2.88888 7.33325C2.03022 7.33325 1.33333 8.02925 1.33333 8.88881C1.33333 9.74836 2.03022 10.4444 2.88888 10.4444C3.21955 10.4444 3.52533 10.3395 3.77777 10.1626V12.2221C3.77777 13.2035 4.57333 13.9999 5.55555 13.9999H7.61511C7.43911 13.7475 7.33333 13.4426 7.33333 13.111C7.33333 12.2515 8.03022 11.5555 8.88888 11.5555C9.74755 11.5555 10.4444 12.2515 10.4444 13.111C10.4444 13.4426 10.3396 13.7475 10.1627 13.9999H12.2222C13.2044 13.9999 14 13.2035 14 12.2221V10.1626C13.7476 10.3386 13.4418 10.4444 13.1111 10.4444C12.2524 10.4444 11.5556 9.74836 11.5556 8.88881C11.5556 8.02925 12.2524 7.33325 13.1111 7.33325Z"
fill="currentColor"
/>
<path
d="M13.1111 7.33325C13.4418 7.33325 13.7476 7.43814 14 7.61503V5.55547C14 4.57414 13.2044 3.7777 12.2222 3.7777H10.1627C10.3387 3.52525 10.4444 3.22036 10.4444 2.88881C10.4444 2.02925 9.74755 1.33325 8.88888 1.33325C8.03022 1.33325 7.33333 2.02925 7.33333 2.88881C7.33333 3.22036 7.43822 3.52525 7.61511 3.7777H5.55555C4.57333 3.7777 3.77777 4.57414 3.77777 5.55547V7.61503C3.52533 7.43903 3.21955 7.33325 2.88888 7.33325C2.03022 7.33325 1.33333 8.02925 1.33333 8.88881C1.33333 9.74836 2.03022 10.4444 2.88888 10.4444C3.21955 10.4444 3.52533 10.3395 3.77777 10.1626V12.2221C3.77777 13.2035 4.57333 13.9999 5.55555 13.9999H7.61511C7.43911 13.7475 7.33333 13.4426 7.33333 13.111C7.33333 12.2515 8.03022 11.5555 8.88888 11.5555C9.74755 11.5555 10.4444 12.2515 10.4444 13.111C10.4444 13.4426 10.3396 13.7475 10.1627 13.9999H12.2222C13.2044 13.9999 14 13.2035 14 12.2221V10.1626C13.7476 10.3386 13.4418 10.4444 13.1111 10.4444C12.2524 10.4444 11.5556 9.74836 11.5556 8.88881C11.5556 8.02925 12.2524 7.33325 13.1111 7.33325Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_10683_56033">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
)
}
www/packages/docs-ui/src/components/Icons/ScrollText/index.tsx
+68
View File
@@ -0,0 +1,68 @@
import React from "react"
import { IconProps } from "@medusajs/icons/dist/types"
export const ScrollTextIcon = (props: IconProps) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_10703_107758)">
<path
opacity="0.3"
d="M1.55556 3.33333C1.55556 2.59695 2.15251 2 2.88889 2C3.62527 2 4.22222 2.59695 4.22222 3.33333V6H1.74604C1.64084 6 1.55556 5.91472 1.55556 5.80952V3.33333Z"
fill="currentColor"
/>
<path
opacity="0.3"
d="M6.90213 11.3335H14.4444V13.1113C14.4444 13.6022 14.0465 14.0002 13.5556 14.0002H6.90213V11.3335Z"
fill="currentColor"
/>
<path
d="M13.1111 14C13.8471 14 14.4444 13.4027 14.4444 12.6667V11.7778C14.4444 11.5324 14.2453 11.3333 14 11.3333H7.33334C7.088 11.3333 6.88889 11.5324 6.88889 11.7778V12.6667C6.88889 13.4027 6.29156 14 5.55556 14C4.81956 14 4.22222 13.4027 4.22222 12.6667V3.33333C4.22222 2.59733 3.62489 2 2.88889 2C2.15289 2 1.55556 2.59733 1.55556 3.33333V5.11111C1.55556 5.60178 1.95378 6 2.44445 6H4.22222"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.1111 14H5.55556"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2.88889 2H11.3333C12.0693 2 12.6667 2.59733 12.6667 3.33333V9.11111"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6.66666 5.11108H10.2222"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6.66666 7.77783H10.2222"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_10703_107758">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
)
}
www/packages/docs-ui/src/components/Icons/Shop/index.tsx
+68
View File
@@ -0,0 +1,68 @@
import React from "react"
import { IconProps } from "@medusajs/icons/dist/types"
export const ShopIcon = (props: IconProps) => {
return (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_10681_55260)">
<path
opacity="0.3"
d="M24.2998 3.11401H7.70064C7.06242 3.11401 6.4722 3.45712 6.15575 4.01179L3.12286 9.33624C3.96731 11.1691 5.80731 12.4473 7.95842 12.4473C9.57264 12.4473 11.002 11.7149 11.9798 10.5825C12.9575 11.7149 14.3869 12.4473 16.0011 12.4473C17.6153 12.4473 19.0429 11.7167 20.0206 10.5842C20.9984 11.7167 22.4278 12.4473 24.0402 12.4473C26.1895 12.4473 28.0313 11.1691 28.8758 9.33624L25.8464 4.01179C25.53 3.45712 24.938 3.11401 24.2998 3.11401Z"
fill="currentColor"
/>
<path
opacity="0.3"
d="M12.8902 28.4474V23.114C12.8902 21.3967 14.284 20.0029 16.0013 20.0029C17.7186 20.0029 19.1124 21.3967 19.1124 23.114V28.4474"
fill="currentColor"
/>
<path
d="M6.66809 28.8914V16.8914"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M25.3346 16.8914V28.8914"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M24.2998 3.11401H7.70064C7.06242 3.11401 6.4722 3.45712 6.15575 4.01179L3.12286 9.33624C3.96731 11.1691 5.80731 12.4473 7.95842 12.4473C9.57264 12.4473 11.002 11.7149 11.9798 10.5825C12.9575 11.7149 14.3869 12.4473 16.0011 12.4473C17.6153 12.4473 19.0429 11.7167 20.0206 10.5842C20.9984 11.7167 22.4278 12.4473 24.0402 12.4473C26.1895 12.4473 28.0313 11.1691 28.8758 9.33624L25.8464 4.01179C25.53 3.45712 24.938 3.11401 24.2998 3.11401Z"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.8902 28.4474V23.114C12.8902 21.3967 14.284 20.0029 16.0013 20.0029C17.7186 20.0029 19.1124 21.3967 19.1124 23.114V28.4474"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.11243 28.8914H28.8902"
stroke="currentColor"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_10681_55260">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}
www/packages/docs-ui/src/components/Icons/WindowPaintbrush/index.tsx
+57
View File
@@ -0,0 +1,57 @@
import React from "react"
import { IconProps } from "@medusajs/icons/dist/types"
export const WindowPaintbrushIcon = (props: IconProps) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_10703_107733)">
<path
opacity="0.3"
d="M5.11111 10.5022C7.03289 11.08 8.59289 11.128 9.86756 9.82311C10.6364 9.05155 10.6364 7.8 9.86756 7.02755C9.09867 6.25511 7.85778 6.24444 7.08267 7.02755C5.82223 8.30222 6.92267 9.512 5.11111 10.5022Z"
fill="currentColor"
/>
<path
d="M10.4445 8.21954L14.9653 3.70132C15.456 3.21065 15.456 2.41421 14.9653 1.92354C14.4747 1.43288 13.6782 1.43288 13.1876 1.92354L8.65956 6.45332"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.11111 10.5022C7.03289 11.08 8.59289 11.128 9.86756 9.82311C10.6364 9.05155 10.6364 7.8 9.86756 7.02755C9.09867 6.25511 7.85778 6.24444 7.08267 7.02755C5.82223 8.30222 6.92267 9.512 5.11111 10.5022Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.4444 7.36357V11.7778C14.4444 12.76 13.6489 13.5556 12.6667 13.5556H3.33334C2.35111 13.5556 1.55556 12.76 1.55556 11.7778V4.22224C1.55556 3.24001 2.35111 2.44446 3.33334 2.44446H9.52445"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.77778 5.33333C4.14597 5.33333 4.44445 5.03485 4.44445 4.66667C4.44445 4.29848 4.14597 4 3.77778 4C3.40959 4 3.11111 4.29848 3.11111 4.66667C3.11111 5.03485 3.40959 5.33333 3.77778 5.33333Z"
fill="currentColor"
/>
<path
d="M5.99999 5.33333C6.36818 5.33333 6.66666 5.03485 6.66666 4.66667C6.66666 4.29848 6.36818 4 5.99999 4C5.63181 4 5.33333 4.29848 5.33333 4.66667C5.33333 5.03485 5.63181 5.33333 5.99999 5.33333Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_10703_107733">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
)
}
www/packages/docs-ui/src/components/Icons/index.tsx
+8
View File
@@ -1,8 +1,16 @@
export * from "./AiAssistant"
export * from "./Book"
export * from "./CalendarRefresh"
export * from "./ChefHat"
export * from "./CircleDottedLine"
export * from "./DecisionProcess"
export * from "./ImageBinary"
export * from "./PuzzleColored"
export * from "./QuestionMark"
export * from "./ScrollText"
export * from "./ShadedBg"
export * from "./Shop"
export * from "./StripeColored"
export * from "./ThumbDown"
export * from "./ThumbUp"
export * from "./WindowPaintbrush"
www/packages/docs-ui/src/components/Link/index.tsx
+13 -1
View File
@@ -2,6 +2,7 @@ import React from "react"
import NextLink from "next/link"
import type { LinkProps as NextLinkProps } from "next/link"
import clsx from "clsx"
import { TriangleRightMini } from "@medusajs/icons"
export type LinkProps = {
href?: string
@@ -9,9 +10,16 @@ export type LinkProps = {
className?: string
target?: string
rel?: string
withIcon?: boolean
} & Partial<NextLinkProps>
export const Link = ({ href, children, className, ...rest }: LinkProps) => {
export const Link = ({
href,
children,
className,
withIcon = false,
...rest
}: LinkProps) => {
if (href?.replace(/#.*$/, "").endsWith("page.mdx")) {
href = href.replace("/page.mdx", "")
}
@@ -21,10 +29,14 @@ export const Link = ({ href, children, className, ...rest }: LinkProps) => {
{...rest}
className={clsx(
"text-medusa-fg-interactive hover:text-medusa-fg-interactive-hover",
withIcon && "flex gap-0.25 items-center group",
className
)}
>
{children}
{withIcon && (
<TriangleRightMini className="group-hover:translate-x-docs_0.125 transition-transform" />
)}
</NextLink>
)
}
www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx
+57 -42
View File
@@ -6,7 +6,7 @@ import {
SidebarLeft,
TimelineVertical,
} from "@medusajs/icons"
import React, { useRef, useState } from "react"
import React, { useMemo, useRef, useState } from "react"
import {
Button,
getOsShortcut,
@@ -17,10 +17,11 @@ import {
import clsx from "clsx"
import { HouseIcon } from "../../Icons/House"
import { MainNavThemeMenu } from "./ThemeMenu"
import { MenuItem } from "types"
export const MainNavDesktopMenu = () => {
const [isOpen, setIsOpen] = useState(false)
const { setDesktopSidebarOpen } = useSidebar()
const { setDesktopSidebarOpen, isSidebarShown } = useSidebar()
const ref = useRef(null)
useClickOutside({
@@ -28,6 +29,59 @@ export const MainNavDesktopMenu = () => {
onClickOutside: () => setIsOpen(false),
})
const items: MenuItem[] = useMemo(() => {
const items: MenuItem[] = [
{
type: "link",
icon: <HouseIcon />,
title: "Homepage",
link: "https://docs.medusajs.com/v2",
},
{
type: "link",
icon: <TimelineVertical />,
title: "Changelog",
link: "https://medusajs.com/changelog",
},
{
type: "link",
icon: <QuestionMarkCircle />,
title: "Troubleshooting",
link: "https://docs.medusajs.com/v2/resources/troubleshooting",
},
]
if (isSidebarShown) {
items.push(
{
type: "divider",
},
{
type: "action",
title: "Hide Sidebar",
icon: <SidebarLeft />,
shortcut: `${getOsShortcut()}\\`,
action: () => {
setDesktopSidebarOpen((prev) => !prev)
setIsOpen(false)
},
}
)
}
items.push(
{
type: "divider",
},
{
type: "custom",
content: <MainNavThemeMenu />,
}
)
return items
}, [isSidebarShown])
return (
<div
className="relative hidden lg:flex justify-center items-center"
@@ -45,46 +99,7 @@ export const MainNavDesktopMenu = () => {
"absolute top-[calc(100%+8px)] right-0 min-w-[200px]",
!isOpen && "hidden"
)}
items={[
{
type: "link",
icon: <HouseIcon />,
title: "Homepage",
link: "https://medusajs.com",
},
{
type: "link",
icon: <TimelineVertical />,
title: "Changelog",
link: "https://medusajs.com/changelog",
},
{
type: "link",
icon: <QuestionMarkCircle />,
title: "Troubleshooting",
link: "https://docs.medusajs.com/v2/resources/troubleshooting",
},
{
type: "divider",
},
{
type: "action",
title: "Hide Sidebar",
icon: <SidebarLeft />,
shortcut: `${getOsShortcut()}\\`,
action: () => {
setDesktopSidebarOpen((prev) => !prev)
setIsOpen(false)
},
},
{
type: "divider",
},
{
type: "custom",
content: <MainNavThemeMenu />,
},
]}
items={items}
/>
</div>
)
www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx
+15 -17
View File
@@ -4,7 +4,7 @@ import { TriangleDownMini } from "@medusajs/icons"
import clsx from "clsx"
import React, { useRef, useState } from "react"
import { NavigationItemDropdown } from "types"
import { Menu, useClickOutside } from "../../../.."
import { Menu } from "../../../.."
type MainNavItemDropdownProps = {
item: NavigationItemDropdown
@@ -16,15 +16,15 @@ export const MainNavItemDropdown = ({
isActive,
}: MainNavItemDropdownProps) => {
const [isOpen, setIsOpen] = useState(false)
const ref = useRef(null)
useClickOutside({
elmRef: ref,
onClickOutside: () => setIsOpen(false),
})
const ref = useRef<HTMLDivElement>(null)
return (
<div className={clsx("relative")} ref={ref}>
<div
className={clsx("relative")}
ref={ref}
onMouseOver={() => setIsOpen(true)}
onMouseLeave={() => setIsOpen(false)}
>
<div
className={clsx(
"cursor-pointer flex gap-docs_0.25 items-center",
@@ -35,21 +35,19 @@ export const MainNavItemDropdown = ({
]
)}
tabIndex={-1}
onClick={() => setIsOpen((prev) => !prev)}
>
<span className="text-compact-small-plus">{item.title}</span>
<TriangleDownMini
className={clsx("transition-transform", isOpen && "rotate-180")}
/>
</div>
<Menu
className={clsx(
"absolute top-[calc(100%+4px)] -left-docs_0.75 min-w-[190px]",
!isOpen && "hidden"
)}
items={item.children}
itemsOnClick={() => setIsOpen(false)}
/>
<div className="absolute top-full -left-docs_0.75 pt-docs_0.25">
<Menu
className={clsx("min-w-[190px]", !isOpen && "hidden")}
items={item.children}
itemsOnClick={() => setIsOpen(false)}
/>
</div>
</div>
)
}
www/packages/docs-ui/src/components/MainNav/Items/index.tsx
+7 -2
View File
@@ -6,14 +6,19 @@ import clsx from "clsx"
import { MainNavItemLink } from "./Link"
import { MainNavItemDropdown } from "./Dropdown"
export const MainNavItems = () => {
type MainNavItemsProps = {
className?: string
}
export const MainNavItems = ({ className }: MainNavItemsProps) => {
const { navItems, activeItemIndex } = useMainNav()
return (
<ul
className={clsx(
"hidden lg:flex justify-start gap-docs_1 items-center",
"my-docs_0.75"
"my-docs_0.75",
className
)}
>
{navItems.map((item, index) => {
www/packages/docs-ui/src/components/MainNav/index.tsx
+19 -11
View File
@@ -17,33 +17,41 @@ import { MainNavDesktopMenu } from "./DesktopMenu"
import { SidebarLeftIcon } from "../Icons/SidebarLeft"
import { MainNavMobileMenu } from "./MobileMenu"
export const MainNav = () => {
type MainNavProps = {
className?: string
itemsClassName?: string
}
export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
const { reportIssueLink, editDate } = useMainNav()
const { setMobileSidebarOpen } = useSidebar()
const { setMobileSidebarOpen, isSidebarShown } = useSidebar()
return (
<div
className={clsx(
"flex justify-between items-center",
"px-docs_1 w-full z-20",
"sticky top-0 bg-medusa-bg-base"
"sticky top-0 bg-medusa-bg-base",
className
)}
>
<div className="flex items-center gap-docs_1">
<div className="flex items-center gap-[10px]">
<Button
className="lg:hidden my-docs_0.75 !p-[6.5px]"
variant="transparent-clear"
onClick={() => setMobileSidebarOpen(true)}
>
<SidebarLeftIcon />
</Button>
{isSidebarShown && (
<Button
className="lg:hidden my-docs_0.75 !p-[6.5px]"
variant="transparent-clear"
onClick={() => setMobileSidebarOpen(true)}
>
<SidebarLeftIcon />
</Button>
)}
<BorderedIcon
IconComponent={MedusaIcon}
iconWrapperClassName="my-[14px]"
/>
</div>
<MainNavItems />
<MainNavItems className={itemsClassName} />
</div>
<div className="flex items-center gap-docs_0.75 my-docs_0.75">
<div className="lg:flex items-center gap-docs_0.5 text-medusa-fg-subtle hidden">
www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export const SearchModalOpener = ({
<Button
variant="transparent"
onClick={handleOpen}
className="hidden sm:flex !p-[6.5px]"
className="flex !p-[6.5px]"
>
<MagnifyingGlass className="text-medusa-fg-subtle" />
</Button>
www/packages/docs-ui/src/components/Search/index.tsx
+3 -15
View File
@@ -91,7 +91,7 @@ export const Search = ({
setFilters(filterOptions.map((option) => option.value))
}
}}
className="px-docs_1 pt-docs_1 bg-medusa-bg-base"
className="px-docs_1 pt-docs_1 bg-medusa-bg-base z-10"
/>
)}
<InstantSearch
@@ -101,7 +101,7 @@ export const Search = ({
preserveSharedStateOnUnmount: true,
}}
>
<div className={clsx("bg-medusa-bg-base flex")}>
<div className={clsx("bg-medusa-bg-base flex z-[1]")}>
<SearchBox
classNames={{
root: clsx(
@@ -113,7 +113,7 @@ export const Search = ({
input: clsx(
"w-full h-full px-docs_1 py-docs_0.75 text-medusa-fg-base",
"placeholder:text-medusa-fg-muted bg-medusa-bg-base",
"md:rounded-t-docs_xl text-compact-medium",
"md:rounded-t-docs_xl text-compact-large sm:text-compact-medium",
"appearance-none search-cancel:hidden border-0 active:outline-none focus:outline-none"
),
submit: clsx("absolute top-[18px] left-docs_1 btn-clear p-0"),
@@ -131,18 +131,6 @@ export const Search = ({
formRef={searchBoxRef}
loadingIconComponent={() => <SpinnerLoading />}
/>
<Button
variant="transparent"
className={clsx(
"bg-medusa-bg-base block md:hidden",
"border-0 border-solid",
"border-medusa-border-base border-b",
"pr-docs_1"
)}
onClick={() => setIsOpen(false)}
>
<XMark className="text-medusa-fg-muted" />
</Button>
</div>
<div className="md:flex-initial h-[calc(100%-95px)] lg:max-h-[calc(100%-140px)] lg:min-h-[calc(100%-140px)]">
<SearchEmptyQueryBoundary
www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx
+5 -4
View File
@@ -2,7 +2,7 @@
// @refresh reset
import React, { useCallback, useEffect, useMemo, useRef } from "react"
import React, { useEffect, useMemo, useRef } from "react"
import { SidebarItemLink as SidebarItemlinkType } from "types"
import {
checkSidebarItemVisibility,
@@ -34,7 +34,7 @@ export const SidebarItemLink = ({
const active = useMemo(() => isLinkActive(item, true), [isLinkActive, item])
const ref = useRef<HTMLLIElement>(null)
const newTopCalculator = useCallback(() => {
const newTopCalculator = useMemo(() => {
if (!sidebarRef.current || !ref.current) {
return 0
}
@@ -45,7 +45,8 @@ export const SidebarItemLink = ({
return (
itemBoundingRect.top -
(sidebarBoundingRect.top + sidebarTopHeight) +
sidebarRef.current.scrollTop
sidebarRef.current.scrollTop -
10 // remove extra margin just in case
)
}, [sidebarTopHeight, sidebarRef, ref])
@@ -64,7 +65,7 @@ export const SidebarItemLink = ({
})
} else {
sidebarRef.current.scrollTo({
top: newTopCalculator(),
top: newTopCalculator,
})
}
}
www/packages/docs-ui/src/components/Sidebar/Top/index.tsx
+9 -2
View File
@@ -5,6 +5,7 @@ import { SidebarChild } from "../Child"
import { InteractiveSidebarItem } from "types"
import { SidebarTopMobileClose } from "./MobileClose"
import { DottedSeparator } from "../../.."
import clsx from "clsx"
export type SidebarTopProps = {
parentItem?: InteractiveSidebarItem
@@ -13,9 +14,15 @@ export type SidebarTopProps = {
export const SidebarTop = React.forwardRef<HTMLDivElement, SidebarTopProps>(
function SidebarTop({ parentItem }, ref) {
return (
<div className="pt-docs_0.25">
<div
className={clsx(
"pt-docs_0.25 sticky top-0 z-[5]",
"bg-medusa-bg-base lg:bg-medusa-bg-subtle"
)}
ref={ref}
>
<SidebarTopMobileClose />
<div ref={ref}>
<div>
{parentItem && (
<>
<SidebarChild item={parentItem} />
www/packages/docs-ui/src/components/Sidebar/index.tsx
+10 -14
View File
@@ -3,12 +3,12 @@
import React, { useMemo, useRef } from "react"
import { useSidebar } from "@/providers"
import clsx from "clsx"
import { DottedSeparator, Loading } from "@/components"
import { Loading } from "@/components"
import { SidebarItem } from "./Item"
import { CSSTransition, SwitchTransition } from "react-transition-group"
import { SidebarTop, SidebarTopProps } from "./Top"
import useResizeObserver from "@react-hook/resize-observer"
import { useClickOutside, useKeyboardShortcut } from "@/hooks"
import useResizeObserver from "@react-hook/resize-observer"
export type SidebarProps = {
className?: string
@@ -30,10 +30,9 @@ export const Sidebar = ({
setMobileSidebarOpen,
staticSidebarItems,
sidebarRef,
sidebarTopHeight,
setSidebarTopHeight,
desktopSidebarOpen,
setDesktopSidebarOpen,
setSidebarTopHeight,
} = useSidebar()
useClickOutside({
elmRef: sidebarWrapperRef,
@@ -92,11 +91,6 @@ export const Sidebar = ({
ref={sidebarWrapperRef}
>
<ul className={clsx("h-full w-full", "flex flex-col")}>
<SidebarTop
{...sidebarTopProps}
parentItem={sidebarItems.parentItem}
ref={sidebarTopRef}
/>
<SwitchTransition>
<CSSTransition
key={sidebarItems.parentItem?.title || "home"}
@@ -110,14 +104,16 @@ export const Sidebar = ({
<div
className={clsx(
"overflow-y-scroll clip",
"py-docs_0.75 flex-1"
"pb-docs_0.75 flex-1 max-h-screen"
)}
ref={sidebarRef}
style={{
maxHeight: `calc(100vh - ${sidebarTopHeight}px)`,
}}
id="sidebar"
>
<SidebarTop
{...sidebarTopProps}
parentItem={sidebarItems.parentItem}
ref={sidebarTopRef}
/>
{/* MOBILE SIDEBAR - keeping this in case we need it in the future */}
{/* <div className={clsx("lg:hidden")}>
{!sidebarItems.mobile.length && !staticSidebarItems && (
@@ -134,7 +130,7 @@ export const Sidebar = ({
{sidebarItems.mobile.length > 0 && <DottedSeparator />}
</div> */}
{/* DESKTOP SIDEBAR */}
<div className="mt-docs_0.75 lg:mt-0">
<div className="pt-docs_0.75">
{!sidebarItems.default.length && !staticSidebarItems && (
<Loading className="px-0" />
)}
www/packages/docs-ui/src/components/VerticalCodeTabs/index.tsx
+105
View File
@@ -0,0 +1,105 @@
"use client"
import React from "react"
import { CodeBlock, CodeBlockProps } from "../CodeBlock"
import clsx from "clsx"
export type VerticalCodeTab = {
title: string
code: CodeBlockProps
} & Record<string, unknown>
export type VerticalCodeTabsProps = {
tabs: VerticalCodeTab[]
className?: string
selectedTabIndex: number
setSelectedTabIndex: (value: number) => void
}
export const VerticalCodeTabs = ({
tabs,
className,
selectedTabIndex,
setSelectedTabIndex,
}: VerticalCodeTabsProps) => {
return (
<div
className={clsx(
"rounded-[20px] bg-medusa-bg-subtle p-docs_0.5",
"shadow-elevation-modal dark:shadow-elevation-modal-dark",
className
)}
>
<div
className={clsx(
"rounded-docs_lg bg-medusa-contrast-bg-base h-full",
"shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
"flex flex-col"
)}
>
<div
className={clsx(
"px-docs_1 py-docs_0.75",
"flex gap-[6px] items-center"
)}
>
{new Array(3).fill(0).map((_, index) => (
<span
className={clsx(
"inline-block rounded-full w-[10px] h-[10px]",
"bg-medusa-contrast-border-bot border border-medusa-contrast-border-bot"
)}
key={index}
/>
))}
</div>
<div
className={clsx(
"flex flex-1 gap-[6px] items-start px-[5px] pb-[5px]"
)}
>
<ul className="2xl:w-[180px] flex flex-col gap-[6px] shrink-0">
{tabs.map((tab, index) => (
<li
className={clsx(
"px-docs_0.75 py-[11px]",
"rounded-docs_DEFAULT border border-medusa-contrast-border-bot",
"text-code-body font-monospace cursor-pointer",
selectedTabIndex === index &&
"text-medusa-contrast-fg-primary bg-medusa-contrast-border-bot",
selectedTabIndex !== index &&
"text-medusa-contrast-fg-secondary bg-medusa-contrast-bg-subtle hover:bg-medusa-contrast-border-bot"
)}
onClick={() => setSelectedTabIndex(index)}
key={index}
>
{tab.title}
</li>
))}
</ul>
<div className="flex-1 h-[388px] max-w-full overflow-hidden rounded-docs_DEFAULT [&_pre]:min-h-full">
<CodeBlock
{...tabs[selectedTabIndex].code}
noCopy={true}
noReport={true}
forceNoTitle={true}
wrapperClassName="h-full !rounded-docs_DEFAULT"
className={clsx(
"overflow-auto h-full max-h-full !mb-0 !rounded-docs_DEFAULT",
"!border !border-medusa-contrast-border-bot"
)}
innerClassName="h-full"
animateTokenHighlights
overrideColors={{
bg: "bg-medusa-contrast-bg-subtle",
innerBg: "bg-medusa-contrast-bg-subtle",
lineNumbersBg: "bg-medusa-contrast-bg-subtle",
boxShadow: "shadow-none",
}}
/>
</div>
</div>
</div>
</div>
)
}
www/packages/docs-ui/src/components/index.ts
+2
View File
@@ -26,6 +26,7 @@ export * from "./Feedback"
export * from "./Feedback/Solutions"
export * from "./Heading"
export * from "./HooksLoader"
export * from "./IconHeadline"
export * from "./Icons"
export * from "./InlineIcon"
export * from "./InlineThemeImage"
@@ -73,5 +74,6 @@ export * from "./ThemeImage"
export * from "./Toggle"
export * from "./Tooltip"
export * from "./TypeList"
export * from "./VerticalCodeTabs"
export * from "./WorkflowDiagram"
export * from "./ZoomImg"
www/packages/docs-ui/src/constants.tsx
+6 -1
View File
@@ -7,7 +7,7 @@ export const GITHUB_UI_ISSUES_PREFIX = `https://github.com/medusajs/ui/issues/ne
export const navDropdownItems: NavigationItem[] = [
{
type: "link",
path: `/v2`,
path: `/v2/learn`,
title: "Get Started",
project: "book",
},
@@ -55,6 +55,11 @@ export const navDropdownItems: NavigationItem[] = [
title: "UI Library",
link: "/ui",
},
{
type: "link",
title: "Admin Components",
link: "/v2/resources/admin-components",
},
{
type: "link",
title: "Storefront Development",
www/packages/docs-ui/src/layouts/barebone.tsx
+19
View File
@@ -0,0 +1,19 @@
import clsx from "clsx"
import React from "react"
export type BareboneLayoutProps = {
htmlClassName?: string
children: React.ReactNode
}
export const BareboneLayout = ({
htmlClassName,
children,
}: BareboneLayoutProps) => {
return (
<html lang="en" className={clsx("h-full w-full", htmlClassName)}>
<head />
{children}
</html>
)
}
www/packages/docs-ui/src/layouts/index.ts
+1
View File
@@ -1,3 +1,4 @@
export * from "./barebone"
export * from "./root"
export * from "./tight"
export * from "./wide"
www/packages/docs-ui/src/layouts/root.tsx
+23 -28
View File
@@ -5,47 +5,42 @@ import { Toc } from "../components/Toc"
import { MainContentLayout, MainContentLayoutProps } from "./main-content"
export type RootLayoutProps = {
ProvidersComponent: React.FC<{ children: React.ReactNode }>
bodyClassName?: string
showToc?: boolean
sidebarProps?: SidebarProps
htmlClassName?: string
bodyClassName?: string
showPagination?: boolean
feedbackComponent?: React.ReactNode
editComponent?: React.ReactNode
showBreadcrumbs?: boolean
ProvidersComponent: React.FC<{ children: React.ReactNode }>
} & MainContentLayoutProps
export const RootLayout = ({
ProvidersComponent,
sidebarProps,
htmlClassName,
bodyClassName,
sidebarProps,
showToc = true,
ProvidersComponent,
...mainProps
}: RootLayoutProps) => {
return (
<html lang="en" className={clsx("h-full w-full", htmlClassName)}>
<head />
<body
className={clsx(
"bg-medusa-bg-subtle font-base text-medium w-full",
"text-medusa-fg-subtle",
"h-screen overflow-hidden",
"grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
bodyClassName
)}
>
<RootProviders>
<ProvidersComponent>
<Sidebar {...sidebarProps} />
<div className={clsx("relative", "h-screen", "flex")}>
<MainContentLayout {...mainProps} />
{showToc && <Toc />}
</div>
</ProvidersComponent>
</RootProviders>
</body>
</html>
<body
className={clsx(
"bg-medusa-bg-subtle font-base text-medium w-full",
"text-medusa-fg-subtle",
"h-screen overflow-hidden",
"grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
bodyClassName
)}
>
<RootProviders>
<ProvidersComponent>
<Sidebar {...sidebarProps} />
<div className={clsx("relative", "h-screen", "flex")}>
<MainContentLayout {...mainProps} />
{showToc && <Toc />}
</div>
</ProvidersComponent>
</RootProviders>
</body>
)
}
www/packages/docs-ui/src/providers/Search/index.tsx
+1 -1
View File
@@ -228,7 +228,7 @@ export const SearchProvider = ({
"!p-0 overflow-hidden relative h-full",
"flex flex-col justify-between"
)}
modalContainerClassName="sm:h-[480px] sm:max-h-[480px]"
modalContainerClassName="!h-[480px] max-h-[480px]"
open={isOpen}
onClose={() => setIsOpen(false)}
passedRef={modalRef}
www/packages/docs-ui/src/providers/Sidebar/index.tsx
+9
View File
@@ -61,6 +61,7 @@ export type SidebarContextType = {
updatePersistedCategoryState: (title: string, opened: boolean) => void
getPersistedCategoryState: (title: string) => boolean | undefined
persistState: boolean
isSidebarShown: boolean
} & SidebarStyleOptions
export const SidebarContext = createContext<SidebarContextType | null>(null)
@@ -280,6 +281,13 @@ export const SidebarProvider = ({
const getResolvedScrollableElement = useCallback(() => {
return scrollableElement || window
}, [scrollableElement])
const isSidebarShown = useMemo(() => {
if (!isBrowser) {
return true
}
return document.getElementsByTagName("aside").length > 0
}, [isBrowser])
const isItemLoaded = useCallback(
(path: string) => {
@@ -589,6 +597,7 @@ export const SidebarProvider = ({
updatePersistedCategoryState,
getPersistedCategoryState,
persistState,
isSidebarShown,
}}
>
{children}