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
144
www/apps/docs/src/theme/CodeBlock/Content/String.tsx
Normal file
144
www/apps/docs/src/theme/CodeBlock/Content/String.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
import { useThemeConfig, usePrismTheme } from "@docusaurus/theme-common"
|
||||
import {
|
||||
parseCodeBlockTitle,
|
||||
parseLanguage,
|
||||
parseLines,
|
||||
containsLineNumbers,
|
||||
useCodeWordWrap,
|
||||
} from "@docusaurus/theme-common/internal"
|
||||
import Highlight, { defaultProps, type Language } from "prism-react-renderer"
|
||||
import Line from "@theme/CodeBlock/Line"
|
||||
import Container from "@theme/CodeBlock/Container"
|
||||
import type { Props } from "@theme/CodeBlock/Content/String"
|
||||
import useIsBrowser from "@docusaurus/useIsBrowser"
|
||||
import { ThemeConfig } from "@medusajs/docs"
|
||||
import { CopyButton, Tooltip } from "docs-ui"
|
||||
import { ExclamationCircleSolid, SquareTwoStackSolid } from "@medusajs/icons"
|
||||
|
||||
export default function CodeBlockString({
|
||||
children,
|
||||
className: blockClassName = "",
|
||||
metastring,
|
||||
title: titleProp,
|
||||
showLineNumbers: showLineNumbersProp,
|
||||
language: languageProp,
|
||||
noReport = false,
|
||||
noCopy = false,
|
||||
}: Props): JSX.Element {
|
||||
const {
|
||||
prism: { defaultLanguage, magicComments },
|
||||
reportCodeLinkPrefix = "",
|
||||
} = useThemeConfig() as ThemeConfig
|
||||
const language =
|
||||
languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage
|
||||
const prismTheme = usePrismTheme()
|
||||
const wordWrap = useCodeWordWrap()
|
||||
const isBrowser = useIsBrowser()
|
||||
|
||||
// We still parse the metastring in case we want to support more syntax in the
|
||||
// future. Note that MDX doesn't strip quotes when parsing metastring:
|
||||
// "title=\"xyz\"" => title: "\"xyz\""
|
||||
const title = parseCodeBlockTitle(metastring) || titleProp
|
||||
|
||||
const { lineClassNames, code } = parseLines(children, {
|
||||
metastring,
|
||||
language,
|
||||
magicComments,
|
||||
})
|
||||
const showLineNumbers = showLineNumbersProp ?? containsLineNumbers(metastring)
|
||||
|
||||
return (
|
||||
<Container
|
||||
as="div"
|
||||
className={clsx(
|
||||
blockClassName,
|
||||
language &&
|
||||
!blockClassName.includes(`language-${language}`) &&
|
||||
`language-${language}`
|
||||
)}
|
||||
>
|
||||
{title && <div>{title}</div>}
|
||||
<div className={clsx("relative rounded-[inherit]")}>
|
||||
<Highlight
|
||||
{...defaultProps}
|
||||
theme={prismTheme}
|
||||
code={code}
|
||||
language={(language ?? "text") as Language}
|
||||
>
|
||||
{({ className, tokens, getLineProps, getTokenProps }) => (
|
||||
<>
|
||||
<pre
|
||||
tabIndex={0}
|
||||
ref={wordWrap.codeBlockRef}
|
||||
className={clsx("m-0 p-0", "thin-scrollbar", className)}
|
||||
>
|
||||
<code
|
||||
className={clsx(
|
||||
"font-[inherit] float-left min-w-full print:whitespace-pre-wrap",
|
||||
showLineNumbers &&
|
||||
tokens.length > 1 &&
|
||||
"table p-1 code-block-numbering",
|
||||
title && "p-1",
|
||||
!title && tokens.length > 1 && "p-1",
|
||||
!title && tokens.length === 1 && "py-0.5 pr-0.5 pl-1"
|
||||
)}
|
||||
>
|
||||
{tokens.map((line, i) => (
|
||||
<Line
|
||||
key={i}
|
||||
line={line}
|
||||
getLineProps={getLineProps}
|
||||
getTokenProps={getTokenProps}
|
||||
classNames={lineClassNames[i]}
|
||||
showLineNumbers={showLineNumbers && tokens.length > 1}
|
||||
/>
|
||||
))}
|
||||
</code>
|
||||
</pre>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex gap-x-0.125 absolute right-1",
|
||||
tokens.length === 1 && "top-0.25",
|
||||
tokens.length > 1 && "top-1"
|
||||
)}
|
||||
>
|
||||
{!noReport && (
|
||||
<Tooltip text="Report Incorrect Code">
|
||||
<a
|
||||
href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(
|
||||
`Docs(Code Issue): Code Issue in ${
|
||||
isBrowser ? location.pathname : ""
|
||||
}`
|
||||
)}`}
|
||||
target="_blank"
|
||||
className={clsx(
|
||||
"bg-transparent border-none p-0.25 cursor-pointer rounded",
|
||||
"hover:bg-medusa-code-bg-base dark:hover:bg-medusa-code-bg-base-dark [&:not(:first-child)]:ml-0.5",
|
||||
"inline-flex justify-center items-center invisible xs:visible"
|
||||
)}
|
||||
rel="noreferrer"
|
||||
>
|
||||
<ExclamationCircleSolid className="text-medusa-code-icon dark:text-medusa-code-icon-dark" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
)}
|
||||
{!noCopy && (
|
||||
<CopyButton
|
||||
buttonClassName={clsx(
|
||||
"flex bg-transparent border-none p-0.25 cursor-pointer rounded"
|
||||
)}
|
||||
text={code}
|
||||
>
|
||||
<SquareTwoStackSolid className="text-medusa-code-icon dark:text-medusa-code-icon-dark" />
|
||||
</CopyButton>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Highlight>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
59
www/apps/docs/src/theme/CodeBlock/index.tsx
Normal file
59
www/apps/docs/src/theme/CodeBlock/index.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React, { isValidElement, type ReactNode } from "react"
|
||||
import useIsBrowser from "@docusaurus/useIsBrowser"
|
||||
import ElementContent from "@theme/CodeBlock/Content/Element"
|
||||
import StringContent from "@theme/CodeBlock/Content/String"
|
||||
import type { Props } from "@theme/CodeBlock"
|
||||
import clsx from "clsx"
|
||||
|
||||
/**
|
||||
* Best attempt to make the children a plain string so it is copyable. If there
|
||||
* are react elements, we will not be able to copy the content, and it will
|
||||
* return `children` as-is; otherwise, it concatenates the string children
|
||||
* together.
|
||||
*/
|
||||
function maybeStringifyChildren(children: ReactNode): ReactNode {
|
||||
if (React.Children.toArray(children).some((el) => isValidElement(el))) {
|
||||
return children
|
||||
}
|
||||
// The children is now guaranteed to be one/more plain strings
|
||||
return Array.isArray(children) ? children.join("") : (children as string)
|
||||
}
|
||||
|
||||
export default function CodeBlock({
|
||||
children: rawChildren,
|
||||
noReport = false,
|
||||
noCopy = false,
|
||||
...props
|
||||
}: Props): JSX.Element {
|
||||
// The Prism theme on SSR is always the default theme but the site theme can
|
||||
// be in a different mode. React hydration doesn't update DOM styles that come
|
||||
// from SSR. Hence force a re-render after mounting to apply the current
|
||||
// relevant styles.
|
||||
const isBrowser = useIsBrowser()
|
||||
const children = maybeStringifyChildren(rawChildren)
|
||||
const CodeBlockComp =
|
||||
typeof children === "string" ? StringContent : ElementContent
|
||||
|
||||
const title = props.title
|
||||
delete props.title
|
||||
|
||||
return (
|
||||
<div className="code-wrapper">
|
||||
{title && <div className="code-header">{title}</div>}
|
||||
<CodeBlockComp
|
||||
key={String(isBrowser)}
|
||||
noReport={noReport}
|
||||
noCopy={noCopy}
|
||||
{...props}
|
||||
className={clsx(
|
||||
!title && "rounded",
|
||||
title && "!rounded-t-none !rounded-b",
|
||||
props.className
|
||||
)}
|
||||
showLineNumbers={true}
|
||||
>
|
||||
{children as string}
|
||||
</CodeBlockComp>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user