From 5010fe7561740d045822c3176c5cd44addb55d84 Mon Sep 17 00:00:00 2001 From: Navin Moorthy Date: Tue, 4 Jan 2022 20:38:57 +0530 Subject: [PATCH] =?UTF-8?q?feat(codeblock):=20=F0=9F=90=9B=20add=20interac?= =?UTF-8?q?tive=20code=20editor=20&=20propstable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dist/codeblock.d.ts | 19 ++ .../dist/codeblock.js | 175 ++++++++++++++++++ .../dist/index.js | 28 +-- .../dist/types.d.ts | 20 -- .../package.json | 8 +- .../nextra-renderlesskit-theme-docs/style.css | 68 +++---- .../nextra-renderlesskit-theme-docs/yalc.sig | 2 +- components/InteractiveCodeblock.tsx | 169 +++++++++++++++++ components/PropsTable.tsx | 31 ++-- package.json | 10 +- pages/docs/components/primitives/badge.mdx | 20 ++ pages/docs/components/primitives/button.mdx | 101 +++++++++- pages/docs/components/primitives/icon.mdx | 53 ++++++ tailwind.config.js | 15 +- yalc.lock | 2 +- yarn.lock | 138 +++++++++++--- 16 files changed, 740 insertions(+), 119 deletions(-) create mode 100644 .yalc/nextra-renderlesskit-theme-docs/dist/codeblock.d.ts create mode 100644 .yalc/nextra-renderlesskit-theme-docs/dist/codeblock.js create mode 100644 components/InteractiveCodeblock.tsx diff --git a/.yalc/nextra-renderlesskit-theme-docs/dist/codeblock.d.ts b/.yalc/nextra-renderlesskit-theme-docs/dist/codeblock.d.ts new file mode 100644 index 0000000..dd1a824 --- /dev/null +++ b/.yalc/nextra-renderlesskit-theme-docs/dist/codeblock.d.ts @@ -0,0 +1,19 @@ +import React from "react"; +export declare type StaticCodeProps = { + className?: string; + highlight?: string; + noCopy?: boolean; +}; +export declare const StaticCode: React.FC; +export declare type CopyButtonProps = { + code: string; +}; +export declare const CopyButton: React.FC; +export declare type CodeBlockProps = { + className?: string; + live?: boolean; + render?: boolean; + noCopy?: boolean; + noInline?: boolean; +}; +export declare const CodeBlock: React.FC; diff --git a/.yalc/nextra-renderlesskit-theme-docs/dist/codeblock.js b/.yalc/nextra-renderlesskit-theme-docs/dist/codeblock.js new file mode 100644 index 0000000..09fd095 --- /dev/null +++ b/.yalc/nextra-renderlesskit-theme-docs/dist/codeblock.js @@ -0,0 +1,175 @@ +var __defProp = Object.defineProperty; +var __defProps = Object.defineProperties; +var __getOwnPropDescs = Object.getOwnPropertyDescriptors; +var __getOwnPropSymbols = Object.getOwnPropertySymbols; +var __hasOwnProp = Object.prototype.hasOwnProperty; +var __propIsEnum = Object.prototype.propertyIsEnumerable; +var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; +var __spreadValues = (a, b) => { + for (var prop in b || (b = {})) + if (__hasOwnProp.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + if (__getOwnPropSymbols) + for (var prop of __getOwnPropSymbols(b)) { + if (__propIsEnum.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + } + return a; +}; +var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); +var __objRest = (source, exclude) => { + var target = {}; + for (var prop in source) + if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) + target[prop] = source[prop]; + if (source != null && __getOwnPropSymbols) + for (var prop of __getOwnPropSymbols(source)) { + if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) + target[prop] = source[prop]; + } + return target; +}; + +// src/codeblock.tsx +import React from "react"; +import { LiveEditor, LiveError, LivePreview, LiveProvider } from "react-live"; +import * as Renderlesskit from "@renderlesskit/react-tailwind"; +import { RenderlesskitProvider } from "@renderlesskit/react-tailwind"; +import { useClipboard } from "@chakra-ui/hooks"; +import Highlight, { + defaultProps +} from "prism-react-renderer"; +import theme from "prism-react-renderer/themes/palenight"; +var THEME = { + plain: { + backgroundColor: "transparent" + }, + styles: [ + { + types: ["keyword", "builtin"], + style: { + color: "#ff0078", + fontWeight: "bold" + } + }, + { + types: ["comment"], + style: { + color: "#999", + fontStyle: "italic" + } + }, + { + types: ["variable", "language-javascript"], + style: { + color: "#0076ff" + } + }, + { + types: ["attr-name"], + style: { + color: "#d9931e", + fontStyle: "normal" + } + }, + { + types: ["boolean", "regex"], + style: { + color: "#d9931e" + } + } + ] +}; +var StaticCode = (props) => { + const _a = props, { children, className, highlight, noCopy } = _a, rest = __objRest(_a, ["children", "className", "highlight", "noCopy"]); + if (!className) + return /* @__PURE__ */ React.createElement("code", __spreadValues({}, rest), children); + const highlightedLines = highlight ? highlight.split(",").map(Number) : []; + const language = className.replace(/language-/, ""); + return /* @__PURE__ */ React.createElement("div", { + className: "relative" + }, /* @__PURE__ */ React.createElement(Highlight, __spreadProps(__spreadValues({}, defaultProps), { + code: children.trim(), + language, + theme: THEME + }), ({ className: className2, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React.createElement("code", { + className: className2, + style: __spreadValues({}, style) + }, tokens.map((line, i) => /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({ + key: i + }, getLineProps({ line, key: i })), { + style: highlightedLines.includes(i + 1) ? { + background: "var(--c-highlight)", + margin: "0 -1rem", + padding: "0 1rem" + } : {} + }), line.map((token, key) => /* @__PURE__ */ React.createElement("span", __spreadValues({ + key + }, getTokenProps({ token, key })))))))), !noCopy && /* @__PURE__ */ React.createElement(CopyButton, { + code: children.trim() + })); +}; +var CopyButton = ({ code }) => { + const { hasCopied, onCopy } = useClipboard(code); + return /* @__PURE__ */ React.createElement("button", { + className: "absolute right-0 px-4 py-1 text-xs text-gray-800 transform -translate-x-2 translate-y-4 bg-white rounded-md -top-2", + onClick: onCopy + }, hasCopied ? "COPIED!" : "COPY"); +}; +var transformer = (rawCode, language, noInline) => { + const code = rawCode.replace(/((^|)import[^;]+[; ]+)+/gi, "").replace(/export default \(\) => {((.|\n)*)};/, "render(() => {$1});").replace(/export default \(\) => \(((.|\n)*)\);/, "render($1);").replace(/export default \(\) => ((.|\n)*);/, "render($1);").replace(/export default ((.|\n)*);/, "render($1);"); + return language === "jsx" && !noInline ? `<>${code}` : code; +}; +var CodeBlock = (props) => { + const _a = props, { code, className, live, render, noCopy, noInline } = _a, rest = __objRest(_a, ["code", "className", "live", "render", "noCopy", "noInline"]); + const language = className == null ? void 0 : className.replace(/language-/, ""); + const [editorCode, setEditorCode] = React.useState(code.trim()); + React.useEffect(() => { + console.log("%ccode", "color: #e57373", code); + if (code) + setEditorCode(code.trim()); + }, [code]); + console.log("%ceditorCode", "color: #f200e2", editorCode); + const scope = __spreadValues({ + React + }, Renderlesskit); + const liveProviderProps = __spreadValues({ + theme, + language, + code: editorCode, + scope, + noInline + }, rest); + console.log("%cliveProviderProps", "color: #731d1d", liveProviderProps); + if (live) { + return /* @__PURE__ */ React.createElement(RenderlesskitProvider, null, /* @__PURE__ */ React.createElement(LiveProvider, __spreadValues({ + transformCode: (rawCode) => transformer(rawCode, language, props.noInline) + }, liveProviderProps), /* @__PURE__ */ React.createElement(LivePreview, { + className: "p-6 bg-white border border-gray-600 rounded-md rounded-b-none" + }), /* @__PURE__ */ React.createElement("div", { + className: "relative" + }, /* @__PURE__ */ React.createElement(LiveEditor, { + className: "font-mono text-sm rounded-md rounded-t-none" + }), /* @__PURE__ */ React.createElement(CopyButton, { + code: editorCode + })), /* @__PURE__ */ React.createElement(LiveError, { + className: "mt-0 text-xs text-red-500 bg-red-100 rounded-md rounded-t-none" + }))); + } + if (render) { + return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(RenderlesskitProvider, null, /* @__PURE__ */ React.createElement(LiveProvider, __spreadValues({ + transformCode: (rawCode) => transformer(rawCode, language, props.noInline) + }, liveProviderProps), /* @__PURE__ */ React.createElement(LivePreview, { + style: { fontFamily: "'Inter', sans-serif" } + })))); + } + return /* @__PURE__ */ React.createElement(StaticCode, __spreadValues({ + noCopy, + className + }, props), editorCode); +}; +export { + CodeBlock, + CopyButton, + StaticCode +}; diff --git a/.yalc/nextra-renderlesskit-theme-docs/dist/index.js b/.yalc/nextra-renderlesskit-theme-docs/dist/index.js index 5ad46a6..30b4cd8 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/dist/index.js +++ b/.yalc/nextra-renderlesskit-theme-docs/dist/index.js @@ -325,7 +325,7 @@ var defaultTheme = { logo: /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { className: "mr-2 font-extrabold hidden md:inline" }, "Nextra"), /* @__PURE__ */ React2.createElement("span", { - className: "text-slate-600 font-normal hidden md:inline" + className: "text-oldGray-600 font-normal hidden md:inline" }, "The Next Docs Builder")), head: /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("meta", { name: "msapplication-TileColor", @@ -876,7 +876,7 @@ var NextLink = ({ route, title, isRTL }) => { return /* @__PURE__ */ React7.createElement(Link2, { href: route }, /* @__PURE__ */ React7.createElement("a", { - className: cn("text-lg font-medium p-4 -m-4 no-underline text-slate-600 hover:text-blue-600 flex items-center", { "ml-2": !isRTL, "mr-2": isRTL }), + className: cn("text-lg font-medium p-4 -m-4 no-underline text-oldGray-600 hover:text-blue-600 flex items-center", { "ml-2": !isRTL, "mr-2": isRTL }), title }, title, /* @__PURE__ */ React7.createElement(arrow_right_default, { className: cn("transform inline flex-shrink-0", { @@ -889,7 +889,7 @@ var PrevLink = ({ route, title, isRTL }) => { return /* @__PURE__ */ React7.createElement(Link2, { href: route }, /* @__PURE__ */ React7.createElement("a", { - className: cn("text-lg font-medium p-4 -m-4 no-underline text-slate-600 hover:text-blue-600 flex items-center", { "mr-2": !isRTL, "ml-2": isRTL }), + className: cn("text-lg font-medium p-4 -m-4 no-underline text-oldGray-600 hover:text-blue-600 flex items-center", { "mr-2": !isRTL, "ml-2": isRTL }), title }, /* @__PURE__ */ React7.createElement(arrow_right_default, { className: cn("transform inline flex-shrink-0", { @@ -957,7 +957,7 @@ var Footer = ({ }, children, /* @__PURE__ */ React7.createElement("hr", null), config.footer ? /* @__PURE__ */ React7.createElement("div", { className: "mt-24 flex justify-between flex-col-reverse md:flex-row items-center md:items-end" }, /* @__PURE__ */ React7.createElement("span", { - className: "text-slate-600" + className: "text-oldGray-600" }, render_component_default(config.footerText, { locale })), /* @__PURE__ */ React7.createElement("div", { className: "mt-6" }), config.footerEditLink ? /* @__PURE__ */ React7.createElement(EditPageLink, { @@ -1067,16 +1067,16 @@ function LocaleSwitch({ options, isRTL }) { })), /* @__PURE__ */ React11.createElement("span", { className: "sr-only" }, "Languages")), mounted ? /* @__PURE__ */ React11.createElement("ul", { - className: cn2("locale-dropdown absolute block bg-white dark:bg-dark border dark:border-slate-700 py-1 rounded shadow-lg", { "right-0": !isRTL, "left-0": isRTL }) + className: cn2("locale-dropdown absolute block bg-white dark:bg-dark border dark:border-oldGray-700 py-1 rounded shadow-lg", { "right-0": !isRTL, "left-0": isRTL }) }, Array.isArray(options) && options.map((l) => /* @__PURE__ */ React11.createElement("li", { key: l.locale }, /* @__PURE__ */ React11.createElement(Link3, { href: asPath, locale: l.locale }, /* @__PURE__ */ React11.createElement("a", { - className: cn2("block no-underline text-current py-2 px-4 hover:bg-slate-200 dark:hover:bg-slate-800 whitespace-nowrap", { + className: cn2("block no-underline text-current py-2 px-4 hover:bg-oldGray-200 dark:hover:bg-oldGray-800 whitespace-nowrap", { "font-semibold": locale === l.locale, - "bg-slate-100 dark:bg-slate-900": locale === l.locale + "bg-oldGray-100 dark:bg-oldGray-900": locale === l.locale }) }, l.text))))) : null); } @@ -1182,7 +1182,7 @@ var Search = ({ directories = [] }) => { }), show ? null : /* @__PURE__ */ React12.createElement("div", { className: "hidden sm:flex absolute inset-y-0 right-0 py-1.5 pr-1.5" }, /* @__PURE__ */ React12.createElement("kbd", { - className: "inline-flex items-center px-2 font-sans text-sm font-medium text-slate-400 dark:text-slate-800 dark:border-slate-800 border rounded" + className: "inline-flex items-center px-2 font-sans text-sm font-medium text-oldGray-400 dark:text-oldGray-800 dark:border-oldGray-800 border rounded" }, "/"))), renderList && /* @__PURE__ */ React12.createElement("ul", { className: "absolute left-0 z-20 w-full p-0 m-0 mt-1 list-none border divide-y rounded shadow-md md:right-0 top-100 md:w-auto" }, results.map((res, i) => { @@ -1242,7 +1242,7 @@ var Item2 = ({ title, active, href, onMouseOver, excerpt }) => { }, /* @__PURE__ */ React13.createElement("span", { className: "font-semibold" }, title), excerpt ? /* @__PURE__ */ React13.createElement("div", { - className: "text-slate-600" + className: "text-oldGray-600" }, /* @__PURE__ */ React13.createElement(TextWithHighlights, { content: excerpt.text, ranges: excerpt.highlight_ranges @@ -1368,7 +1368,7 @@ function Search2() { }), show ? null : /* @__PURE__ */ React13.createElement("div", { className: "hidden sm:flex absolute inset-y-0 right-0 py-1.5 pr-1.5" }, /* @__PURE__ */ React13.createElement("kbd", { - className: "inline-flex items-center px-2 font-sans text-sm font-medium text-slate-400 dark:text-slate-800 dark:border-slate-800 border rounded" + className: "inline-flex items-center px-2 font-sans text-sm font-medium text-oldGray-400 dark:text-oldGray-800 dark:border-oldGray-800 border rounded" }, "/"))), renderList && /* @__PURE__ */ React13.createElement("ul", { className: "absolute z-20 p-0 m-0 mt-1 divide-y top-full" }, results.map((res, i) => { @@ -1450,7 +1450,7 @@ function Navbar({ const activeRoute = getFSRoute(asPath, locale).split("#")[0]; const { menu, setMenu } = useMenuContext(); return /* @__PURE__ */ React15.createElement("nav", { - className: "flex items-center bg-white z-20 fixed top-0 left-0 right-0 h-16 border-b border-slate-200 px-6 dark:bg-dark dark:border-slate-900 bg-opacity-[.97] dark:bg-opacity-100" + className: "flex items-center bg-white z-20 fixed top-0 left-0 right-0 h-16 border-b border-oldGray-200 px-6 dark:bg-dark dark:border-oldGray-900 bg-opacity-[.97] dark:bg-opacity-100" }, /* @__PURE__ */ React15.createElement("div", { className: "w-full flex items-center mr-2" }, /* @__PURE__ */ React15.createElement(Link6, { @@ -1469,7 +1469,7 @@ function Navbar({ href, key: page.route }, /* @__PURE__ */ React15.createElement("a", { - className: cn5("no-underline whitespace-nowrap mr-4 hidden md:inline-block", page.route === activeRoute || activeRoute.startsWith(page.route + "/") ? "text-current" : "text-slate-500") + className: cn5("no-underline whitespace-nowrap mr-4 hidden md:inline-block", page.route === activeRoute || activeRoute.startsWith(page.route + "/") ? "text-current" : "text-oldGray-500") }, page.title)); }) : null, /* @__PURE__ */ React15.createElement("div", { className: "flex-1" @@ -1662,7 +1662,7 @@ function Sidebar({ height: "calc(100vh - 4rem)" } }, /* @__PURE__ */ React16.createElement("div", { - className: "sidebar border-slate-200 dark:border-slate-900 w-full p-4 pb-40 md:pb-16 h-full overflow-y-auto" + className: "sidebar border-oldGray-200 dark:border-oldGray-900 w-full p-4 pb-40 md:pb-16 h-full overflow-y-auto" }, /* @__PURE__ */ React16.createElement("div", { className: "mb-4 block md:hidden" }, config.customSearch || (config.search ? config.unstable_stork ? /* @__PURE__ */ React16.createElement(Search2, null) : /* @__PURE__ */ React16.createElement(search_default, { @@ -1716,7 +1716,7 @@ function ToC({ style: indent(heading.depth) }, /* @__PURE__ */ React17.createElement("a", { href: `#${slug}`, - className: cn7("no-underline hover:text-slate-900 dark:hover:text-slate-100", state && state.isActive ? "text-slate-900 dark:text-slate-100 font-semibold" : "text-slate-600") + className: cn7("no-underline hover:text-oldGray-900 dark:hover:text-oldGray-100", state && state.isActive ? "text-oldGray-900 dark:text-oldGray-100 font-semibold" : "text-oldGray-600") }, text)); })) : null); } diff --git a/.yalc/nextra-renderlesskit-theme-docs/dist/types.d.ts b/.yalc/nextra-renderlesskit-theme-docs/dist/types.d.ts index d3903f1..5dc7c8c 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/dist/types.d.ts +++ b/.yalc/nextra-renderlesskit-theme-docs/dist/types.d.ts @@ -1,24 +1,4 @@ /// -import { Heading } from "mdast"; -export interface PageMapItem { - name: string; - route: string; - locale?: string; - children?: PageMapItem[]; - frontMatter?: Record; - meta?: Record; - active?: boolean; -} -export interface PageOpt { - filename: string; - route: string; - meta: Record; - pageMap: PageMapItem[]; - titleText: string | null; - headings?: Heading[]; - hasH1: boolean; -} -export { Heading }; export interface DocsThemeConfig { docsRepositoryBase?: string; titleSuffix?: string | React.FC<{ diff --git a/.yalc/nextra-renderlesskit-theme-docs/package.json b/.yalc/nextra-renderlesskit-theme-docs/package.json index 5d35f71..642b3b5 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/package.json +++ b/.yalc/nextra-renderlesskit-theme-docs/package.json @@ -29,6 +29,9 @@ }, "./bleed": { "import": "./dist/bleed.js" + }, + "./codeblock": { + "import": "./dist/codeblock.js" } }, "main": "dist/index.js", @@ -70,8 +73,10 @@ ] }, "dependencies": { + "@chakra-ui/hooks": "1.7.1", "@mdx-js/react": "2.0.0-rc.2", "@reach/skip-nav": "0.16.0", + "@renderlesskit/react-tailwind": "0.0.1-alpha.37", "classnames": "2.3.1", "focus-visible": "5.2.0", "github-slugger": "1.4.0", @@ -81,6 +86,7 @@ "next-themes": "0.0.15", "parse-git-url": "1.0.1", "prism-react-renderer": "1.2.1", + "react-live": "2.3.0", "title": "3.4.3" }, "peerDependencies": { @@ -94,5 +100,5 @@ "emoji": "emoji", "editor": false }, - "yalcSig": "ecdf36723a243c305d9261fd73b2c6b3" + "yalcSig": "0a6245f7e065a391412a9662a582e25b" } diff --git a/.yalc/nextra-renderlesskit-theme-docs/style.css b/.yalc/nextra-renderlesskit-theme-docs/style.css index c409621..b0d09bf 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/style.css +++ b/.yalc/nextra-renderlesskit-theme-docs/style.css @@ -12,7 +12,7 @@ body { @apply bg-white; } .dark body { - @apply bg-dark text-slate-100; + @apply bg-dark text-oldGray-100; } h1 { @@ -23,7 +23,7 @@ h2 { @apply pb-1 border-b; } .dark h2 { - @apply border-slate-900; + @apply border-oldGray-900; } h3 { @apply text-2xl font-semibold tracking-tight mt-8; @@ -53,18 +53,18 @@ hr { @apply my-8; } .dark hr { - @apply border-slate-900; + @apply border-oldGray-900; } code { - @apply text-slate-800 bg-slate-500 bg-opacity-25 rounded; + @apply text-oldGray-800 bg-oldGray-500 bg-opacity-25 rounded; box-decoration-break: clone; } .dark code { - @apply text-slate-300 bg-slate-800; + @apply text-oldGray-300 bg-oldGray-800; } pre { - @apply p-4 bg-slate-200 rounded-lg mt-6 mb-4 overflow-x-auto; - @apply dark:bg-slate-800; + @apply p-4 bg-oldGray-200 rounded-lg mt-6 mb-4 overflow-x-auto; + @apply dark:bg-oldGray-800; } pre code { @apply p-0 text-sm text-black bg-transparent rounded-none inline-block min-w-full; @@ -88,31 +88,31 @@ a code { @apply ring; } .sidebar .active-anchor { - @apply font-semibold text-slate-900 dark:text-white; + @apply font-semibold text-oldGray-900 dark:text-white; } .sidebar li.active > a { - @apply font-semibold text-black bg-slate-200; + @apply font-semibold text-black bg-oldGray-200; } .dark .sidebar li.active > a { - @apply text-white bg-slate-800; + @apply text-white bg-oldGray-800; } .sidebar button, .sidebar a { - @apply block w-full text-left text-base no-underline text-slate-600 mt-1 p-2 rounded select-none outline-none; + @apply block w-full text-left text-base no-underline text-oldGray-600 mt-1 p-2 rounded select-none outline-none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .dark .sidebar button, .dark .sidebar a { - @apply text-slate-500; + @apply text-oldGray-500; } .sidebar a:hover, .sidebar button:hover { - @apply text-slate-900 bg-slate-100; + @apply text-oldGray-900 bg-oldGray-100; } .dark .sidebar a:hover, .dark .sidebar button:hover { - @apply text-white bg-slate-900; + @apply text-white bg-oldGray-900; } article ul { @apply list-disc ml-6 mt-6; @@ -124,8 +124,8 @@ article ol { @apply list-decimal ml-6 mt-6; } article blockquote { - @apply italic pl-6 border-l-2 border-slate-300 text-slate-700; - @apply dark:border-slate-700 dark:text-slate-400; + @apply italic pl-6 border-l-2 border-oldGray-300 text-oldGray-700; + @apply dark:border-oldGray-700 dark:text-oldGray-400; } .subheading-anchor { @@ -140,10 +140,10 @@ article blockquote { } .anchor-icon { opacity: 0; - @apply ml-2 text-slate-500 select-none; + @apply ml-2 text-oldGray-500 select-none; } .dark .anchor-icon { - @apply text-slate-700; + @apply text-oldGray-700; } h2 a { @@ -165,36 +165,36 @@ h2 a { /* Search */ .nextra-search input { - @apply border-slate-300 text-slate-900; + @apply border-oldGray-300 text-oldGray-900; } .dark .nextra-search input { - @apply bg-dark border-slate-800 text-slate-100; + @apply bg-dark border-oldGray-800 text-oldGray-100; } .nextra-search input::placeholder { - @apply text-slate-400; + @apply text-oldGray-400; } .dark .nextra-search input::placeholder { - @apply text-slate-700; + @apply text-oldGray-700; } .nextra-search ul { - @apply rounded border bg-white text-slate-100 border-slate-300 divide-slate-300 overflow-hidden shadow-lg list-none; + @apply rounded border bg-white text-oldGray-100 border-oldGray-300 divide-oldGray-300 overflow-hidden shadow-lg list-none; } .dark .nextra-search ul { - @apply bg-dark text-slate-100 border-slate-700 divide-slate-700; + @apply bg-dark text-oldGray-100 border-oldGray-700 divide-oldGray-700; } .nextra-search ul li { - @apply text-slate-800; + @apply text-oldGray-800; } .nextra-search ul li.active, .nextra-search ul a:focus li { - @apply bg-slate-200; + @apply bg-oldGray-200; } .dark .nextra-search ul li { - @apply text-slate-300; + @apply text-oldGray-300; } .dark .nextra-search ul li.active, .dark .nextra-search ul a:focus li { - @apply bg-slate-800; + @apply bg-oldGray-800; } .nextra-search ul li .highlight { @apply bg-yellow-300; @@ -258,12 +258,12 @@ table { @apply p-0; } table tr { - @apply m-0 p-0 border-t border-slate-300; - @apply dark:border-slate-700; + @apply m-0 p-0 border-t border-oldGray-300; + @apply dark:border-oldGray-700; } table tr:nth-child(2n) { - @apply bg-slate-100; - @apply dark:bg-slate-900; + @apply bg-oldGray-100; + @apply dark:bg-oldGray-900; } table tr th { @apply font-semibold; @@ -279,8 +279,8 @@ table tr td[align="right"] { table tr th, table tr td { @apply text-left; - @apply m-0 px-4 py-2 border border-slate-300; - @apply dark:border-slate-700; + @apply m-0 px-4 py-2 border border-oldGray-300; + @apply dark:border-oldGray-700; } .table-container { overflow: auto; diff --git a/.yalc/nextra-renderlesskit-theme-docs/yalc.sig b/.yalc/nextra-renderlesskit-theme-docs/yalc.sig index 982475f..716e485 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/yalc.sig +++ b/.yalc/nextra-renderlesskit-theme-docs/yalc.sig @@ -1 +1 @@ -ecdf36723a243c305d9261fd73b2c6b3 \ No newline at end of file +0a6245f7e065a391412a9662a582e25b \ No newline at end of file diff --git a/components/InteractiveCodeblock.tsx b/components/InteractiveCodeblock.tsx new file mode 100644 index 0000000..128ef58 --- /dev/null +++ b/components/InteractiveCodeblock.tsx @@ -0,0 +1,169 @@ +import React from "react"; +import { + Checkbox, + runIfFn, + Select, + useHasMounted, + useTheme, +} from "@renderlesskit/react-tailwind"; +import { get } from "lodash"; +import { CodeBlock } from "nextra-renderlesskit-theme-docs/codeblock"; + +type TemplateFunctionProps = { + booleanProps: string[]; + themeProps: string[]; + choiceProps: string[]; + spreadProps: string; + props: Record; +}; +type TemplateFunction = (props: TemplateFunctionProps) => string; + +type InteractiveCodeblockProps = { + booleanProps: string[]; + themeProps: Record; + choiceProps: Record; + children?: TemplateFunction; +}; + +const wrapperStyles = "mt-2 flex items-center flex-wrap space-x-4"; + +const InteractiveCodeblock = (props: InteractiveCodeblockProps) => { + const { + children = "", + themeProps = {}, + choiceProps = {}, + booleanProps = [], + } = props; + + const theme = useTheme(); + const [booleanStates, onBooleanStateChange] = React.useState< + Record + >({}); + console.log("%cbooleanStates", "color: #00a3cc", booleanStates); + const [themeStates, setThemeStates] = React.useState>( + {}, + ); + console.log("%cthemeStates", "color: #ff0000", themeStates); + const [choiceStates, setChoiceState] = React.useState>( + {}, + ); + console.log("%cchoiceStates", "color: #00e600", choiceStates); + + const finalBooleanProps = Object.keys(booleanStates).filter( + key => booleanStates[key], + ); + const finalThemeProps = Object.keys(themeStates).map(key => + mapThemeProps(key, themeStates), + ); + const finalChoiceProps = Object.keys(choiceStates).map(key => + mapChoiceProps(key, choiceStates), + ); + + const spreadProps = [finalBooleanProps, finalThemeProps, finalChoiceProps] + .map(printProps) + .join("") + .trimEnd() + .replace(/\s\s+/, " "); + + const code = runIfFn(children, { + spreadProps, + themeProps: finalThemeProps, + choiceProps: finalChoiceProps, + booleanProps: finalBooleanProps, + props: { ...themeStates, ...booleanStates, ...choiceStates }, + }); + + const mounted = useHasMounted(); + + if (!mounted) return null; + + return ( +
+ +
+ {booleanProps.map(name => { + return ( + { + onBooleanStateChange(prev => ({ ...prev, [name]: !!value })); + }} + /> + ); + })} +
+
+ {Object.keys(themeProps).map(name => { + const themeKey = themeProps[name]; + return ( + + ); + })} + {Object.keys(choiceProps).map(name => { + const values = choiceProps[name]; + + return ( + + ); + })} +
+
+ ); +}; + +export default InteractiveCodeblock; + +const mapThemeProps = (name: string, unions: Record) => { + return unions[name] && `${name}="${unions[name]}"`; +}; +const mapChoiceProps = (name: string, unions: Record) => { + return unions[name] && `${name}={${unions[name]}}`; +}; + +const printProps = (props: string[]) => { + return " " + props.filter(Boolean).join(" "); +}; + +function capitalizeFirstLetter(string: string) { + return string.charAt(0).toUpperCase() + string.slice(1); +} diff --git a/components/PropsTable.tsx b/components/PropsTable.tsx index efe1943..cf97676 100644 --- a/components/PropsTable.tsx +++ b/components/PropsTable.tsx @@ -80,7 +80,7 @@ const PropsTable: React.FC = ({ {description && ( - {/* */} + + + {themeKey + ? Object.keys(get(theme, themeKey)).join(" | ") + : type} + + } + > + + ``` + +## API Reference + + diff --git a/pages/docs/components/primitives/button.mdx b/pages/docs/components/primitives/button.mdx index b2db783..3f3ecf2 100644 --- a/pages/docs/components/primitives/button.mdx +++ b/pages/docs/components/primitives/button.mdx @@ -1,6 +1,7 @@ import Callout from "nextra-renderlesskit-theme-docs/callout"; - +import InteractiveCodeblock from "@/components/InteractiveCodeblock"; import ComponentLinks from "@/components/ComponentLinks"; +import PropsTable from "@/components/PropsTable"; # Button @@ -21,6 +22,16 @@ import { Button, ButtonGroup, IconButton } from "@renderlesskit/react-tailwind"; can also be set as `attached` - **IconButton:** Accessible button to show an icon +## Usage + +Default Button + + `Click me`} + booleanProps={["loading"]} + themeProps={{ size: "button.size.common", variant: "button.variant.common" }} +/> + ## Button sizes ```jsx live @@ -142,3 +153,91 @@ You can also put IconButton inside IconButton ``` + +## API Reference + +### Button + + + +### ButtonGroup + + + +### IconButton + + diff --git a/pages/docs/components/primitives/icon.mdx b/pages/docs/components/primitives/icon.mdx index fff59b1..47fb782 100644 --- a/pages/docs/components/primitives/icon.mdx +++ b/pages/docs/components/primitives/icon.mdx @@ -1,4 +1,5 @@ import ComponentLinks from "@/components/ComponentLinks"; +import PropsTable from "@/components/PropsTable"; # Icon @@ -58,3 +59,55 @@ const CheckIcon = createIcon({ export default () => ; ``` + +## API Reference + +### Icon + + = React.ElementType", + description: + "Polymorphic as prop, change the component to a different HTML tag or custom component.", + }, + +]} /> + +### createIcon + +', + description: + "Default props automatically passed to the component; overwriteable", + }, + ]} +/> diff --git a/tailwind.config.js b/tailwind.config.js index e32d273..9bf1a28 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,7 +9,20 @@ module.exports = { darkMode: "class", theme: { extend: { - colors: { dark: "#111" }, + colors: { + dark: "#111", + oldGray: { + 100: "#f7fafc", + 200: "#edf2f7", + 300: "#e2e8f0", + 400: "#cbd5e0", + 500: "#a0aec0", + 600: "#718096", + 700: "#4a5568", + 800: "#2d3748", + 900: "#1a202c", + }, + }, }, }, plugins: [], diff --git a/yalc.lock b/yalc.lock index 567a415..3bd0eb9 100644 --- a/yalc.lock +++ b/yalc.lock @@ -2,7 +2,7 @@ "version": "v1", "packages": { "nextra-renderlesskit-theme-docs": { - "signature": "ecdf36723a243c305d9261fd73b2c6b3", + "signature": "0a6245f7e065a391412a9662a582e25b", "link": true }, "nextra": { diff --git a/yarn.lock b/yarn.lock index 69f4b91..e8ac667 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2275,23 +2275,23 @@ conventional-recommended-bump "^6.1.0" prepend-file "^2.0.0" -"@renderlesskit/react-tailwind@0.0.1-alpha.33": - version "0.0.1-alpha.33" - resolved "https://registry.yarnpkg.com/@renderlesskit/react-tailwind/-/react-tailwind-0.0.1-alpha.33.tgz#6cfba0cc5400f6625f27220b5881de1fd45b7989" - integrity sha512-AyCQMNGDV4O54kMLDA5NZEtJkHDu6+mop9+lD2ogZxG98sKBeuyNpsFDyDYXxa+MXNn98n9FGa1ZazIlA5FbwQ== +"@renderlesskit/react-tailwind@0.0.1-alpha.37": + version "0.0.1-alpha.37" + resolved "https://registry.yarnpkg.com/@renderlesskit/react-tailwind/-/react-tailwind-0.0.1-alpha.37.tgz#2cf69b70e009a53ac88520ae3f4efe83c8426699" + integrity sha512-iALqm4pQiu9gIsLMIA8P+uFDoPAVFZ/gRwboE6u07D9fc8emg3V9CeUCiZsOjrnXRICmSCAAeuKkT6ePDG/N8Q== dependencies: "@react-aria/live-announcer" "^3.0.1" - "@renderlesskit/react" "^0.9.2" + "@renderlesskit/react" "^0.10.1" reakit "^1.3.11" reakit-system "^0.15.2" reakit-utils "^0.15.2" reakit-warning "^0.6.2" tailwind-merge "^1.1.1" -"@renderlesskit/react@^0.9.2": - version "0.9.2" - resolved "https://registry.yarnpkg.com/@renderlesskit/react/-/react-0.9.2.tgz#33aabe8fe1edfae87e9b52e249948c76296e87e2" - integrity sha512-wPPHcTM80I7XpMLqfQQn2T53iTYv0kGDfBpT4b0kUw3KGYxPC+vV23yzv1aLvTbx4+508SN4LvXxzui7yldoCg== +"@renderlesskit/react@^0.10.1": + version "0.10.1" + resolved "https://registry.yarnpkg.com/@renderlesskit/react/-/react-0.10.1.tgz#cbc3acdc6b834fed85f1b6085a74f283917c8993" + integrity sha512-qRtk1KSnBtIYBG/dIKYoxW052kyrwBzIg5SRu/J3+eDZXUiXfKTjCpNWaOe0TIps7RZ7QS7HEHkyxBYvEnlKbg== dependencies: "@chakra-ui/counter" "^1.2.1" "@chakra-ui/hooks" "^1.7.1" @@ -2475,6 +2475,13 @@ dependencies: "@babel/types" "^7.3.0" +"@types/buble@^0.20.0": + version "0.20.1" + resolved "https://registry.yarnpkg.com/@types/buble/-/buble-0.20.1.tgz#cba009801fd417b0d2eb8fa6824b537842e05803" + integrity sha512-itmN3lGSTvXg9IImY5j290H+n0B3PpZST6AgEfJJDXfaMx2cdJJZro3/Ay+bZZdIAa25Z5rnoo9rHiPCbANZoQ== + dependencies: + magic-string "^0.25.0" + "@types/cacheable-request@^6.0.1": version "6.0.2" resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.2.tgz#c324da0197de0a98a2312156536ae262429ff6b9" @@ -2644,10 +2651,10 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.5.tgz#57ca67ec4e57ad9e4ef5a6bab48a15387a1c83e0" integrity sha512-w3mrvNXLeDYV1GKTZorGJQivK6XLCoGwpnyJFbJVK/aTBQUxOCaa/GlFAAN3OTDFcb7h5tiFG+YXCO2By+riZw== -"@types/node@17.0.6": - version "17.0.6" - resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.6.tgz#cc1589c9ee853b389e67e8fb4384e0f250a139b9" - integrity sha512-+XBAjfZmmivILUzO0HwBJoYkAyyySSLg5KCGBDFLomJo0sV6szvVLAf4ANZZ0pfWzgEds5KmGLG9D5hfEqOhaA== +"@types/node@17.0.7": + version "17.0.7" + resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.7.tgz#4a53d8332bb65a45470a2f9e2611f1ced637a5cb" + integrity sha512-1QUk+WAUD4t8iR+Oj+UgI8oJa6yyxaB8a8pHaC8uqM6RrS1qbL7bf3Pwl5rHv0psm2CuDErgho6v5N+G+5fwtQ== "@types/normalize-package-data@^2.4.0": version "2.4.1" @@ -3481,6 +3488,18 @@ bser@2.1.1: dependencies: node-int64 "^0.4.0" +buble@0.19.6: + version "0.19.6" + resolved "https://registry.yarnpkg.com/buble/-/buble-0.19.6.tgz#915909b6bd5b11ee03b1c885ec914a8b974d34d3" + integrity sha512-9kViM6nJA1Q548Jrd06x0geh+BG2ru2+RMDkIHHgJY/8AcyCs34lTHwra9BX7YdPrZXd5aarkpr/SY8bmPgPdg== + dependencies: + chalk "^2.4.1" + magic-string "^0.25.1" + minimist "^1.2.0" + os-homedir "^1.0.1" + regexpu-core "^4.2.0" + vlq "^1.0.0" + buffer-alloc-unsafe@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0" @@ -3645,7 +3664,7 @@ chalk@2.3.0: escape-string-regexp "^1.0.5" supports-color "^4.0.0" -chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.2: +chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== @@ -3944,6 +3963,16 @@ compare-func@^2.0.0: array-ify "^1.0.0" dot-prop "^5.1.0" +component-props@1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/component-props/-/component-props-1.1.1.tgz#f9b7df9b9927b6e6d97c9bd272aa867670f34944" + integrity sha1-+bffm5kntubZfJvScqqGdnDzSUQ= + +component-xor@0.0.4: + version "0.0.4" + resolved "https://registry.yarnpkg.com/component-xor/-/component-xor-0.0.4.tgz#c55d83ccc1b94cd5089a4e93fa7891c7263e59aa" + integrity sha1-xV2DzMG5TNUImk6T+niRxyY+Wao= + compute-scroll-into-view@1.0.14: version "1.0.14" resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.14.tgz#80e3ebb25d6aa89f42e533956cb4b16a04cfe759" @@ -4190,6 +4219,11 @@ core-js-pure@^3.19.0: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.1.tgz#f7a2c62f98de83e4da8fca7b78846d3a2f542145" integrity sha512-yeNNr3L9cEBwNy6vhhIJ0nko7fE7uFO6PgawcacGt2VWep4WqQx0RiqlkgSP7kqUMC1IKdfO9qPeWXcUheHLVQ== +core-js@^3.14.0: + version "3.20.2" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.2.tgz#46468d8601eafc8b266bd2dd6bf9dee622779581" + integrity sha512-nuqhq11DcOAbFBV4zCbKeGbKQsUDRqTX0oqx7AttUBuqe3h20ixsE039QHelbL6P4h+9kytVqyEtyZ6gsiwEYw== + core-util-is@~1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" @@ -4680,6 +4714,14 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9: resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz#caa6d08f60388d0bb4539dd75fe458a9a1d0014c" integrity sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g== +dom-iterator@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad" + integrity sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig== + dependencies: + component-props "1.1.1" + component-xor "0.0.4" + domain-browser@4.19.0: version "4.19.0" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-4.19.0.tgz#1093e17c0a17dbd521182fe90d49ac1370054af1" @@ -7548,6 +7590,13 @@ macos-release@^2.5.0: resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.5.0.tgz#067c2c88b5f3fb3c56a375b2ec93826220fa1ff2" integrity sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g== +magic-string@^0.25.0, magic-string@^0.25.1: + version "0.25.7" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051" + integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA== + dependencies: + sourcemap-codec "^1.4.4" + make-dir@^1.0.0: version "1.3.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c" @@ -8631,6 +8680,11 @@ os-browserify@0.3.0: resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27" integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc= +os-homedir@^1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3" + integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M= + os-name@4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/os-name/-/os-name-4.0.1.tgz#32cee7823de85a8897647ba4d76db46bf845e555" @@ -9084,7 +9138,7 @@ pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.4.2: ansi-styles "^5.0.0" react-is "^17.0.1" -prism-react-renderer@1.2.1: +prism-react-renderer@1.2.1, prism-react-renderer@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz#392460acf63540960e5e3caa699d851264e99b89" integrity sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg== @@ -9297,6 +9351,20 @@ react-is@^16.13.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-live@2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/react-live/-/react-live-2.3.0.tgz#09fbac361903970e7cf51cee60729eeb164a5d87" + integrity sha512-b+Nc7x/bLu2sPX/If1uncrmUvYtXTqxY8QpzBw/X76SA3QJ1ggU0Ld6X5phLXZ469+XWO5lOU7OpAt0JoTyZPQ== + dependencies: + "@types/buble" "^0.20.0" + buble "0.19.6" + core-js "^3.14.0" + dom-iterator "^1.0.0" + prism-react-renderer "^1.2.1" + prop-types "^15.7.2" + react-simple-code-editor "^0.11.0" + unescape "^1.0.1" + react-refresh@0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" @@ -9321,6 +9389,11 @@ react-remove-scroll@^2.4.3: use-callback-ref "^1.2.3" use-sidecar "^1.0.1" +react-simple-code-editor@^0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz#bb57c7c29b570f2ab229872599eac184f5bc673c" + integrity sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw== + react-style-singleton@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66" @@ -9497,7 +9570,7 @@ regexpp@^3.2.0: resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2" integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg== -regexpu-core@^4.7.1: +regexpu-core@^4.2.0, regexpu-core@^4.7.1: version "4.8.0" resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.8.0.tgz#e5605ba361b67b1718478501327502f4479a98f0" integrity sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg== @@ -10039,6 +10112,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== +sourcemap-codec@^1.4.4: + version "1.4.8" + resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" + integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== + space-separated-tokens@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b" @@ -10395,10 +10473,10 @@ tailwind-merge@^1.1.1: dependencies: hashlru "^2.3.0" -tailwindcss@3.0.8: - version "3.0.8" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.8.tgz#6c751c3d2ee8e1fa18b108303b73f44a5e868992" - integrity sha512-Yww1eRYO1AxITJmW/KduZPxNvYdHuedeKwPju9Oakp7MdiixRi5xkpLhirsc81QCxHL0eoce6qKmxXwYGt4Cjw== +tailwindcss@3.0.9: + version "3.0.9" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.9.tgz#6755dba95dfa092d14f304ff47703a28c2c07138" + integrity sha512-X8TVifxDWfiNXInOeBofTteXAtZ5f0HnLs/uV4jDQNShc33Jb7qjYbk4VwI365rWAzcqYTks+9kesf3xH7Y35A== dependencies: arg "^5.0.1" chalk "^4.1.2" @@ -10420,7 +10498,6 @@ tailwindcss@3.0.8: postcss-value-parser "^4.2.0" quick-lru "^5.1.1" resolve "^1.20.0" - tmp "^0.2.1" tar-stream@^1.5.2: version "1.6.2" @@ -10547,13 +10624,6 @@ tmp@^0.0.33: dependencies: os-tmpdir "~1.0.2" -tmp@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" - integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ== - dependencies: - rimraf "^3.0.0" - tmpl@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -10785,6 +10855,13 @@ unbzip2-stream@^1.0.9: buffer "^5.2.1" through "^2.3.8" +unescape@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/unescape/-/unescape-1.0.1.tgz#956e430f61cad8a4d57d82c518f5e6cc5d0dda96" + integrity sha512-O0+af1Gs50lyH1nUu3ZyYS1cRh01Q/kUKatTOkSs7jukXE6/NebucDVxyiDsA9AQ4JC1V1jUH9EO8JX2nMDgGQ== + dependencies: + extend-shallow "^2.0.1" + unicode-canonical-property-names-ecmascript@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc" @@ -11090,6 +11167,11 @@ vfile@^5.0.0: unist-util-stringify-position "^3.0.0" vfile-message "^3.0.0" +vlq@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.1.tgz#c003f6e7c0b4c1edd623fd6ee50bbc0d6a1de468" + integrity sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w== + vm-browserify@1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"