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

docs: update design + colors (#7593)

Browse Source 
Update design and colors in docs to match those in Figma
This commit is contained in:
Shahed Nasser
2024-06-04 10:41:24 +03:00
committed by GitHub
parent ecfbfcc707
commit c38f6d07c2
45 changed files with 1511 additions and 804 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
www/packages/docs-ui/src/components/CodeBlock/index.tsx
View File

@@ -3,14 +3,13 @@
import React, { useMemo, useState } from "react"
import clsx from "clsx"
import { HighlightProps, Highlight, themes } from "prism-react-renderer"
import { ApiRunner, CopyButton, Tooltip, Link } from "@/components"
import { ApiRunner } from "@/components"
import { useColorMode } from "@/providers"
import { ExclamationCircle, PlaySolid, SquareTwoStack } from "@medusajs/icons"
import { CodeBlockHeader, CodeBlockHeaderMeta } from "./Header"
import { CodeBlockLine } from "./Line"
import { ApiAuthType, ApiDataOptions, ApiMethod } from "types"
import { CSSTransition } from "react-transition-group"
import { GITHUB_ISSUES_PREFIX } from "../.."
import { CodeBlockActions, CodeBlockActionsProps } from "./Actions"
export type Highlight = {
line: number
@@ -20,6 +19,7 @@ export type Highlight = {
export type CodeBlockMetaFields = {
title?: string
hasTabs?: boolean
npm2yarn?: boolean
highlights?: string[][]
apiTesting?: boolean
@@ -48,6 +48,7 @@ export type CodeBlockProps = {
export const CodeBlock = ({
source,
hasTabs = false,
lang = "",
className,
collapsed = false,
@@ -67,6 +68,10 @@ export const CodeBlock = ({
const { colorMode } = useColorMode()
const [showTesting, setShowTesting] = useState(false)
const hasInnerCodeBlock = useMemo(
() => hasTabs || title.length > 0,
[hasTabs, title]
)
const canShowApiTesting = useMemo(
() =>
apiTesting !== undefined &&
@@ -78,10 +83,7 @@ export const CodeBlock = ({
const bgColor = useMemo(
() =>
clsx(
blockStyle === "loud" && [
colorMode === "light" && "bg-medusa-code-bg-base",
colorMode === "dark" && "bg-medusa-bg-component",
],
blockStyle === "loud" && "bg-medusa-contrast-bg-base",
blockStyle === "subtle" && [
colorMode === "light" && "bg-medusa-bg-subtle",
colorMode === "dark" && "bg-medusa-code-bg-base",
@@ -93,13 +95,10 @@ export const CodeBlock = ({
const lineNumbersColor = useMemo(
() =>
clsx(
blockStyle === "loud" && [
colorMode === "light" && "text-medusa-code-text-subtle",
colorMode === "dark" && "text-medusa-fg-muted",
],
blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
blockStyle === "subtle" && [
colorMode === "light" && "text-medusa-fg-muted",
colorMode === "dark" && "text-medusa-code-text-subtle",
colorMode === "dark" && "text-medusa-contrast-fg-secondary",
]
),
[blockStyle, colorMode]
@@ -108,10 +107,7 @@ export const CodeBlock = ({
const borderColor = useMemo(
() =>
clsx(
blockStyle === "loud" && [
colorMode === "light" && "border-medusa-code-border",
colorMode === "dark" && "border-medusa-border-base",
],
blockStyle === "loud" && "border-transparent",
blockStyle === "subtle" && [
colorMode === "light" && "border-medusa-border-base",
colorMode === "dark" && "border-medusa-code-border",
@@ -120,21 +116,48 @@ export const CodeBlock = ({
[blockStyle, colorMode]
)
const iconColor = useMemo(
const boxShadow = useMemo(
() =>
clsx(
blockStyle === "loud" &&
"shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
blockStyle === "subtle" && "shadow-none"
),
[blockStyle]
)
const innerBgColor = useMemo(
() =>
clsx(
blockStyle === "loud" && [
colorMode === "light" && "text-medusa-code-icon",
colorMode === "dark" && "text-medusa-fg-muted",
hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
!hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
],
blockStyle === "subtle" && [
colorMode === "light" && "text-medusa-fg-muted",
colorMode === "dark" && "text-medusa-code-icon",
]
blockStyle === "subtle" && bgColor
),
[blockStyle, colorMode]
[blockStyle, bgColor, hasInnerCodeBlock]
)
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"
),
[blockStyle, hasInnerCodeBlock]
)
const language = useMemo(() => {
const lowerLang = lang.toLowerCase()
// due to a hydration error in json, for now we just assign it to plain
return lowerLang === "json" ? "plain" : lowerLang
}, [lang])
if (!source.length) {
return <></>
}
@@ -147,164 +170,120 @@ export const CodeBlock = ({
tooltipText: highlight.length >= 3 ? highlight[2] : undefined,
}))
const actionsProps: Omit<CodeBlockActionsProps, "inHeader"> = {
source,
canShowApiTesting,
onApiTesting: setShowTesting,
blockStyle,
noReport,
noCopy,
}
return (
<>
{title && (
<CodeBlockHeader
title={title}
blockStyle={blockStyle}
badgeLabel={rest.badgeLabel}
badgeColor={rest.badgeColor}
/>
)}
<div
className={clsx(
"relative mb-docs_1 rounded-b-docs_DEFAULT",
"w-full max-w-full border",
bgColor,
borderColor,
collapsed && "max-h-[400px] overflow-auto",
!title && "rounded-t-docs_DEFAULT",
hasInnerCodeBlock && "rounded-docs_lg",
!hasInnerCodeBlock && "rounded-docs_DEFAULT",
!hasTabs && boxShadow,
(blockStyle === "loud" || colorMode !== "light") &&
"code-block-highlight-dark",
blockStyle === "subtle" &&
colorMode === "light" &&
"code-block-highlight-light",
className
"code-block-highlight-light"
)}
>
<Highlight
theme={
blockStyle === "loud" || colorMode === "dark"
? {
...themes.vsDark,
plain: {
...themes.vsDark.plain,
backgroundColor:
blockStyle === "loud"
? colorMode === "light"
? "#111827"
: "#27282D"
: "#1B1B1F",
},
}
: {
...themes.vsLight,
plain: {
...themes.vsLight.plain,
backgroundColor: "#F9FAFB",
},
}
}
code={source.trim()}
language={lang.toLowerCase()}
{...rest}
{title && (
<CodeBlockHeader
title={title}
blockStyle={blockStyle}
badgeLabel={rest.badgeLabel}
badgeColor={rest.badgeColor}
actionsProps={{
...actionsProps,
inHeader: true,
}}
/>
)}
<div
className={clsx(
"relative mb-docs_1",
"w-full max-w-full border",
bgColor,
borderColor,
collapsed && "max-h-[400px] overflow-auto",
hasInnerCodeBlock && "p-[5px] !pt-0 rounded-b-docs_lg",
!hasInnerCodeBlock && "rounded-docs_DEFAULT",
className
)}
>
{({ className: preClassName, style, tokens, ...rest }) => (
<>
<pre
style={{ ...style, fontStretch: "100%" }}
className={clsx(
"relative !my-0 break-words bg-transparent !outline-none",
"overflow-auto break-words rounded-docs_DEFAULT p-0 xs:max-w-[83%]",
preClassName
)}
>
<code
<Highlight
theme={
blockStyle === "loud" || colorMode === "dark"
? themes.vsDark
: themes.vsLight
}
code={source.trim()}
language={language}
{...rest}
>
{({
className: preClassName,
style: { backgroundColor, ...style },
tokens,
...rest
}) => (
<div className={clsx(innerBorderClasses, innerBgColor)}>
<pre
style={{ ...style, fontStretch: "100%" }}
className={clsx(
"text-code-body font-monospace table min-w-full pb-docs_1.5 print:whitespace-pre-wrap",
tokens.length > 1 && "pt-docs_1 pr-docs_1",
tokens.length <= 1 && "!py-docs_0.25 px-[6px]"
"relative !my-0 break-words bg-transparent !outline-none",
"overflow-auto break-words p-0",
"rounded-docs_DEFAULT",
!hasInnerCodeBlock &&
tokens.length <= 1 &&
"px-docs_0.5 py-[6px]",
!title.length && "xs:max-w-[83%]",
preClassName
)}
>
{tokens.map((line, i) => {
const highlightedLines = transformedHighlights.filter(
(highlight) => highlight.line - 1 === i
)
<code
className={clsx(
"text-code-body font-monospace table min-w-full print:whitespace-pre-wrap",
tokens.length > 1 && "py-docs_0.75",
tokens.length <= 1 && "!py-[6px] px-docs_0.5"
)}
>
{tokens.map((line, i) => {
const highlightedLines = transformedHighlights.filter(
(highlight) => highlight.line - 1 === i
)
return (
<CodeBlockLine
line={line}
lineNumber={i}
highlights={highlightedLines}
showLineNumber={!noLineNumbers && tokens.length > 1}
key={i}
bgColorClassName={bgColor}
lineNumberColorClassName={lineNumbersColor}
{...rest}
/>
)
})}
</code>
</pre>
<div
className={clsx(
"absolute hidden md:flex md:justify-end",
"xs:rounded xs:absolute xs:right-0 xs:top-0 xs:w-[calc(10%+24px)] xs:h-full xs:bg-transparent",
tokens.length === 1 && "md:right-[6px] md:top-0",
tokens.length > 1 && "md:right-docs_1 md:top-docs_1"
)}
>
{canShowApiTesting && (
<Tooltip
text="Test API"
tooltipClassName="font-base"
className={clsx(
"h-fit",
tokens.length === 1 && "p-[6px]",
tokens.length > 1 && "px-[6px] pb-[6px]"
)}
>
<PlaySolid
className={clsx("cursor-pointer", iconColor)}
onClick={() => setShowTesting(true)}
/>
</Tooltip>
)}
{!noReport && (
<Tooltip
text="Report Issue"
tooltipClassName="font-base"
className={clsx(
"h-fit",
tokens.length === 1 && "p-[6px]",
tokens.length > 1 && "px-[6px] pb-[6px]"
)}
>
<Link
href={`${GITHUB_ISSUES_PREFIX}&title=${encodeURIComponent(
`Docs(Code Issue): `
)}`}
target="_blank"
className={clsx(
blockStyle === "loud" && "hover:bg-medusa-code-bg-base",
"bg-transparent border-none cursor-pointer rounded",
"[&:not(:first-child)]:ml-docs_0.5",
"inline-flex justify-center items-center invisible xs:visible"
)}
rel="noreferrer"
>
<ExclamationCircle className={clsx(iconColor)} />
</Link>
</Tooltip>
)}
{!noCopy && (
<CopyButton
text={source}
tooltipClassName="font-base"
className={clsx(
"h-fit",
tokens.length === 1 && "p-[6px]",
tokens.length > 1 && "px-[6px] pb-[6px]"
)}
>
<SquareTwoStack className={clsx(iconColor)} />
</CopyButton>
return (
<CodeBlockLine
line={line}
lineNumber={i}
highlights={highlightedLines}
showLineNumber={!noLineNumbers && tokens.length > 1}
key={i}
lineNumberColorClassName={lineNumbersColor}
{...rest}
/>
)
})}
</code>
</pre>
{!title && (
<CodeBlockActions
{...actionsProps}
inHeader={false}
isSingleLine={tokens.length <= 1}
/>
)}
</div>
</>
)}
</Highlight>
)}
</Highlight>
</div>
</div>
{canShowApiTesting && (
<CSSTransition