docs: refactor to use TypeScript, ESLint, and Tailwind CSS (#4136)
* docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * fix after merge * docs(refactoring): migrated remaining component to TypeScript (#3770) * docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * docs: refactoring second batch of theme components * fix after merge * refactored icons and other components * docs: refactored all components * docs(refactoring): set up and configured Tailwind Css (#3841) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): use tailwind css (#4134) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): refactored all styles to use tailwind css (#4132) * refactored Badge component to use tailwind css * refactored Bordered component to use tailwind css * updated to latest docusaurus * refactored BorderedIcon component to use tailwind css * refactored Feedback component to use tailwind css * refactored icons and footersociallinks to tailwind css * start refactoring of large card * refactored large card styling * refactored until admonitions * refactored until codeblock * refactored until Tabs * refactored Tabs (without testing * finished refactoring styles to tailwind css * upgraded to version 2.4.1 * general fixes * adjusted eslint configurations * fixed ignore files * fixes to large card * fix search styling * fix npx command * updated tabs to use isCodeTabs prop * fixed os tabs * removed os-tabs class in favor of general styling * improvements to buttons * fix for searchbar * fixed redocly download button * chore: added eslint code action (#4135) * small change in commerce modules page
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,111 +0,0 @@
|
||||
import Highlight, {defaultProps} from 'prism-react-renderer';
|
||||
import React from 'react';
|
||||
import {
|
||||
containsLineNumbers,
|
||||
parseCodeBlockTitle,
|
||||
parseLanguage,
|
||||
parseLines,
|
||||
useCodeWordWrap,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import {usePrismTheme, useThemeConfig} from '@docusaurus/theme-common';
|
||||
|
||||
import Container from '@theme/CodeBlock/Container';
|
||||
import CopyButton from '../../CopyButton';
|
||||
import Line from '@theme/CodeBlock/Line';
|
||||
import Tooltip from '../../Tooltip';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import IconAlert from '../../Icon/Alert';
|
||||
import IconCopy from '../../Icon/Copy';
|
||||
|
||||
export default function CodeBlockString({
|
||||
children,
|
||||
className: blockClassName = '',
|
||||
metastring,
|
||||
title: titleProp,
|
||||
showLineNumbers: showLineNumbersProp = true,
|
||||
language: languageProp,
|
||||
noReport = false,
|
||||
noCopy = false
|
||||
}) {
|
||||
const {
|
||||
prism: {defaultLanguage, magicComments},
|
||||
reportCodeLinkPrefix
|
||||
} = useThemeConfig();
|
||||
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 className={styles.codeBlockTitle}>{title}</div>}
|
||||
<div className={styles.codeBlockContent}>
|
||||
<Highlight
|
||||
{...defaultProps}
|
||||
theme={prismTheme}
|
||||
code={code}
|
||||
language={language ?? 'text'}>
|
||||
{({className, tokens, getLineProps, getTokenProps}) => (
|
||||
<pre
|
||||
/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
|
||||
tabIndex={0}
|
||||
ref={wordWrap.codeBlockRef}
|
||||
className={clsx(className, styles.codeBlock, 'thin-scrollbar', tokens.length === 1 ? styles.thinCodeWrapper : '')}>
|
||||
<code
|
||||
className={clsx(
|
||||
styles.codeBlockLines,
|
||||
showLineNumbers && tokens.length > 1 && styles.codeBlockLinesWithNumbering,
|
||||
tokens.length === 1 ? 'thin-code' : ''
|
||||
)}>
|
||||
{tokens.map((line, i) => (
|
||||
<Line
|
||||
key={i}
|
||||
line={line}
|
||||
getLineProps={getLineProps}
|
||||
getTokenProps={getTokenProps}
|
||||
classNames={lineClassNames[i]}
|
||||
showLineNumbers={showLineNumbers && tokens.length > 1}
|
||||
/>
|
||||
))}
|
||||
</code>
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
<div className={styles.buttonGroup}>
|
||||
{!noReport && (
|
||||
<Tooltip text="Report Incorrect Code">
|
||||
<a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} target="_blank" className='report-code code-action img-url'>
|
||||
<IconAlert />
|
||||
</a>
|
||||
</Tooltip>
|
||||
)}
|
||||
{!noCopy && (
|
||||
<CopyButton buttonClassName='code-action code-action-copy' text={code}>
|
||||
<IconCopy />
|
||||
</CopyButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
148
www/docs/src/theme/CodeBlock/Content/String.tsx
Normal file
148
www/docs/src/theme/CodeBlock/Content/String.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
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 CopyButton from "@site/src/components//CopyButton"
|
||||
import useIsBrowser from "@docusaurus/useIsBrowser"
|
||||
import { ThemeConfig } from "@medusajs/docs"
|
||||
import Tooltip from "@site/src/components/Tooltip"
|
||||
import IconAlert from "@site/src/theme/Icon/Alert"
|
||||
import IconCopy from "@site/src/theme/Icon/Copy"
|
||||
|
||||
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("tw-relative tw-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("tw-m-0 tw-p-0", "thin-scrollbar", className)}
|
||||
>
|
||||
<code
|
||||
className={clsx(
|
||||
"tw-font-[inherit] tw-float-left tw-min-w-full print:tw-whitespace-pre-wrap",
|
||||
showLineNumbers &&
|
||||
tokens.length > 1 &&
|
||||
"tw-table tw-p-1 code-block-numbering",
|
||||
title && "tw-p-1",
|
||||
!title && tokens.length > 1 && "tw-p-1",
|
||||
!title &&
|
||||
tokens.length === 1 &&
|
||||
"tw-py-0.5 tw-pr-0.5 tw-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(
|
||||
"tw-flex tw-gap-x-[2px] tw-absolute tw-right-1",
|
||||
tokens.length === 1 && "tw-top-[4px]",
|
||||
tokens.length > 1 && "tw-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(
|
||||
"tw-bg-transparent tw-border-none tw-p-[4px] tw-cursor-pointer tw-rounded",
|
||||
"hover:tw-bg-medusa-code-tab-hover [&:not(:first-child)]:tw-ml-0.5",
|
||||
"tw-inline-flex tw-justify-center tw-items-center tw-invisible xs:tw-visible"
|
||||
)}
|
||||
rel="noreferrer"
|
||||
>
|
||||
<IconAlert iconColorClassName="tw-fill-medusa-code-block-action" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
)}
|
||||
{!noCopy && (
|
||||
<CopyButton
|
||||
buttonClassName={clsx(
|
||||
"tw-flex tw-bg-transparent tw-border-none tw-p-[4px] tw-cursor-pointer tw-rounded"
|
||||
)}
|
||||
text={code}
|
||||
>
|
||||
<IconCopy iconColorClassName="tw-fill-medusa-code-block-action" />
|
||||
</CopyButton>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Highlight>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
.codeBlockContent {
|
||||
position: relative;
|
||||
/* rtl:ignore */
|
||||
direction: ltr;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
--ifm-pre-background: var(--prism-background-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.codeBlockStandalone {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.codeBlockLines {
|
||||
font: inherit;
|
||||
/* rtl:ignore */
|
||||
float: left;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.codeBlockLinesWithNumbering {
|
||||
display: table;
|
||||
padding: var(--ifm-pre-padding) 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.codeBlockLines {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonGroup {
|
||||
display: flex;
|
||||
column-gap: 2px;
|
||||
position: absolute;
|
||||
right: var(--ifm-pre-padding);
|
||||
top: var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
.buttonGroup button:focus-visible,
|
||||
.buttonGroup button:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.thinCodeWrapper + .buttonGroup {
|
||||
top: calc(var(--ifm-pre-padding) / 4 - 2px) !important;
|
||||
}
|
||||
|
||||
:global(.theme-code-block:hover) .buttonGroup button {
|
||||
opacity: 0.4;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import React, {isValidElement} from 'react';
|
||||
|
||||
import ElementContent from '@theme/CodeBlock/Content/Element';
|
||||
import StringContent from '@theme/CodeBlock/Content/String';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
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;
|
||||
}
|
||||
export default function CodeBlock({children: rawChildren, noReport = false, noCopy = false, ...props}) {
|
||||
// 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={`${props.className} ${title ? '' : 'no-header-block'}`}>
|
||||
{children}
|
||||
</CodeBlockComp>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
59
www/docs/src/theme/CodeBlock/index.tsx
Normal file
59
www/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 && "tw-rounded",
|
||||
title && "!tw-rounded-t-none !tw-rounded-b",
|
||||
props.className
|
||||
)}
|
||||
showLineNumbers={true}
|
||||
>
|
||||
{children as string}
|
||||
</CodeBlockComp>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user