From ded280c0d51e41b99d4438875a02b74aaa62c8d6 Mon Sep 17 00:00:00 2001 From: Navin Moorthy Date: Thu, 6 Jan 2022 19:18:38 +0530 Subject: [PATCH] =?UTF-8?q?feat(interactive-codeblock):=20=E2=9C=A8=20add?= =?UTF-8?q?=20tw=20with=20codeblock=20bug=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dist/index.js | 240 +++--------------- .../dist/types/bleed.d.ts | 6 - .../dist/types/callout.d.ts | 14 - .../dist/types/index.d.ts | 7 +- .../package.json | 4 +- .../nextra-renderlesskit-theme-docs/yalc.sig | 2 +- components/Bleed.tsx | 18 ++ components/Callout.tsx | 40 +++ components/ComponentLinks.tsx | 2 +- components/InteractiveCodeblock.tsx | 63 ++++- components/PropsTable.tsx | 2 +- components/RegionTable.tsx | 10 +- components/index.ts | 6 + package.json | 3 +- .../components/feedback/circular-progress.mdx | 2 +- pages/docs/components/feedback/progress.mdx | 2 +- pages/docs/components/feedback/spinner.mdx | 2 +- pages/docs/components/forms/checkbox.mdx | 4 +- pages/docs/components/forms/input.mdx | 4 +- pages/docs/components/forms/radio.mdx | 4 +- pages/docs/components/forms/select.mdx | 4 +- pages/docs/components/forms/slider.mdx | 4 +- pages/docs/components/forms/switch.mdx | 4 +- pages/docs/components/forms/textarea.mdx | 4 +- pages/docs/components/primitives/avatar.mdx | 2 +- pages/docs/components/primitives/badge.mdx | 4 +- pages/docs/components/primitives/box.mdx | 3 +- pages/docs/components/primitives/button.mdx | 10 +- pages/docs/components/primitives/icon.mdx | 3 +- pages/docs/components/primitives/tag.mdx | 4 +- pages/docs/getting-started.mdx | 2 +- pages/guides/usage-with-cra.mdx | 2 +- pages/guides/usage-with-nextjs.mdx | 2 +- yalc.lock | 2 +- yarn.lock | 95 ++++++- 35 files changed, 292 insertions(+), 288 deletions(-) delete mode 100644 .yalc/nextra-renderlesskit-theme-docs/dist/types/bleed.d.ts delete mode 100644 .yalc/nextra-renderlesskit-theme-docs/dist/types/callout.d.ts create mode 100644 components/Bleed.tsx create mode 100644 components/Callout.tsx create mode 100644 components/index.ts diff --git a/.yalc/nextra-renderlesskit-theme-docs/dist/index.js b/.yalc/nextra-renderlesskit-theme-docs/dist/index.js index b2426b1..9202ba9 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/dist/index.js +++ b/.yalc/nextra-renderlesskit-theme-docs/dist/index.js @@ -287,9 +287,10 @@ var init_wasm_loader = __esm({ }); // src/index.tsx -import React21, { useMemo as useMemo5, useState as useState6 } from "react"; +import React18, { useMemo as useMemo5, useState as useState6 } from "react"; +import { RenderlesskitProvider } from "@renderlesskit/react-tailwind"; import { SkipNavContent } from "@reach/skip-nav"; -import cn9 from "classnames"; +import cn8 from "classnames"; import { useRouter as useRouter7 } from "next/router"; import { ThemeProvider } from "next-themes"; @@ -1388,10 +1389,10 @@ function Search2() { import React14 from "react"; import { useTheme } from "next-themes"; function ThemeSwitch() { - const { theme: theme2, setTheme } = useTheme(); + const { theme, setTheme } = useTheme(); const mounted = use_mounted_default(); const toggleTheme = () => { - setTheme(theme2 === "dark" ? "light" : "dark"); + setTheme(theme === "dark" ? "light" : "dark"); }; return /* @__PURE__ */ React14.createElement("button", { className: "text-current p-2 cursor-pointer focus:ring outline-none", @@ -1401,7 +1402,7 @@ function ThemeSwitch() { if (e.key === "Enter") toggleTheme(); } - }, mounted && theme2 === "dark" ? /* @__PURE__ */ React14.createElement("svg", { + }, mounted && theme === "dark" ? /* @__PURE__ */ React14.createElement("svg", { fill: "none", viewBox: "0 0 24 24", width: "24", @@ -1413,7 +1414,7 @@ function ThemeSwitch() { strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" - })) : mounted && theme2 === "light" ? /* @__PURE__ */ React14.createElement("svg", { + })) : mounted && theme === "light" ? /* @__PURE__ */ React14.createElement("svg", { fill: "none", viewBox: "0 0 24 24", width: "24", @@ -1724,180 +1725,6 @@ function ToC({ // src/index.tsx import "focus-visible"; - -// src/bleed.tsx -import React18 from "react"; -import cn8 from "classnames"; -var Bleed = ({ full, children }) => { - return /* @__PURE__ */ React18.createElement("div", { - className: cn8("bleed relative mt-6 -mx-6 md:-mx-8 2xl:-mx-24", { full }) - }, children); -}; - -// src/callout.tsx -import React19 from "react"; -var themes = { - default: "bg-orange-100 text-orange-800 dark:text-orange-300 dark:bg-orange-200 dark:bg-opacity-10", - error: "bg-red-200 text-red-900 dark:text-red-200 dark:bg-red-600 dark:bg-opacity-30", - warning: "bg-yellow-200 text-yellow-900 dark:text-yellow-200 dark:bg-yellow-700 dark:bg-opacity-30" -}; -var Callout = ({ - children, - type = "default", - emoji = "\u{1F4A1}" -}) => { - return /* @__PURE__ */ React19.createElement("div", { - className: `${themes[type]} flex rounded-lg callout mt-6` - }, /* @__PURE__ */ React19.createElement("div", { - className: "pl-3 pr-2 py-2 select-none text-xl", - style: { - fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' - } - }, emoji), /* @__PURE__ */ React19.createElement("div", { - className: "pr-4 py-2" - }, children)); -}; - -// src/codeblock.tsx -import React20 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 Highlight2, { - defaultProps as defaultProps2 -} from "prism-react-renderer"; -import theme from "prism-react-renderer/themes/palenight"; -var THEME2 = { - 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__ */ React20.createElement("code", __spreadValues({}, rest), children); - const highlightedLines = highlight ? highlight.split(",").map(Number) : []; - const language = className.replace(/language-/, ""); - return /* @__PURE__ */ React20.createElement("div", { - className: "relative" - }, /* @__PURE__ */ React20.createElement(Highlight2, __spreadProps(__spreadValues({}, defaultProps2), { - code: children.trim(), - language, - theme: THEME2 - }), ({ className: className2, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React20.createElement("code", { - className: className2, - style: __spreadValues({}, style) - }, tokens.map((line, i) => /* @__PURE__ */ React20.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__ */ React20.createElement("span", __spreadValues({ - key - }, getTokenProps({ token, key })))))))), !noCopy && /* @__PURE__ */ React20.createElement(CopyButton, { - code: children.trim() - })); -}; -var CopyButton = ({ code }) => { - const { hasCopied, onCopy } = useClipboard(code); - return /* @__PURE__ */ React20.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] = React20.useState(code.trim()); - React20.useEffect(() => { - console.log("%ccode", "color: #e57373", code); - if (code) - setEditorCode(code.trim()); - }, [code]); - console.log("%ceditorCode", "color: #f200e2", editorCode); - const scope = __spreadValues({ - React: React20 - }, Renderlesskit); - const liveProviderProps = __spreadValues({ - theme, - language, - code: editorCode, - scope, - noInline - }, rest); - console.log("%cliveProviderProps", "color: #731d1d", liveProviderProps); - if (live) { - return /* @__PURE__ */ React20.createElement(RenderlesskitProvider, null, /* @__PURE__ */ React20.createElement(LiveProvider, __spreadValues({ - transformCode: (rawCode) => transformer(rawCode, language, props.noInline) - }, liveProviderProps), /* @__PURE__ */ React20.createElement(LivePreview, { - className: "p-6 bg-white border border-gray-600 rounded-md rounded-b-none" - }), /* @__PURE__ */ React20.createElement("div", { - className: "relative" - }, /* @__PURE__ */ React20.createElement(LiveEditor, { - className: "font-mono text-sm rounded-md rounded-t-none" - }), /* @__PURE__ */ React20.createElement(CopyButton, { - code: editorCode - })), /* @__PURE__ */ React20.createElement(LiveError, { - className: "mt-0 text-xs text-red-500 bg-red-100 rounded-md rounded-t-none" - }))); - } - if (render) { - return /* @__PURE__ */ React20.createElement("div", null, /* @__PURE__ */ React20.createElement(RenderlesskitProvider, null, /* @__PURE__ */ React20.createElement(LiveProvider, __spreadValues({ - transformCode: (rawCode) => transformer(rawCode, language, props.noInline) - }, liveProviderProps), /* @__PURE__ */ React20.createElement(LivePreview, { - style: { fontFamily: "'Inter', sans-serif" } - })))); - } - return /* @__PURE__ */ React20.createElement(StaticCode, __spreadValues({ - noCopy, - className - }, props), editorCode); -}; - -// src/index.tsx function useDirectoryInfo(pageMap) { const { locale, defaultLocale, asPath } = useRouter7(); return useMemo5(() => { @@ -1911,13 +1738,13 @@ function useDirectoryInfo(pageMap) { }, [pageMap, locale, defaultLocale, asPath]); } function Body({ meta, toc, filepathWithName, navLinks, children }) { - return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(SkipNavContent, null), meta.full ? /* @__PURE__ */ React21.createElement("article", { + return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(SkipNavContent, null), meta.full ? /* @__PURE__ */ React18.createElement("article", { className: "relative pt-16 w-full overflow-x-hidden" - }, children) : /* @__PURE__ */ React21.createElement("article", { + }, children) : /* @__PURE__ */ React18.createElement("article", { className: "docs-container relative pt-16 pb-16 px-6 md:px-8 w-full max-w-full flex min-w-0" - }, /* @__PURE__ */ React21.createElement("main", { + }, /* @__PURE__ */ React18.createElement("main", { className: "max-w-screen-md mx-auto pt-4 z-10 min-w-0 w-full" - }, /* @__PURE__ */ React21.createElement(theme_default, null, children), /* @__PURE__ */ React21.createElement(footer_default, { + }, /* @__PURE__ */ React18.createElement(theme_default, null, children), /* @__PURE__ */ React18.createElement(footer_default, { filepathWithName }, navLinks)), toc)); } @@ -1945,71 +1772,71 @@ var Layout = (props) => { }, [config.i18n, locale]); const [menu, setMenu] = useState6(false); if (activeType === "nav") { - return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Head, { + return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Head, { title, locale, meta - }), /* @__PURE__ */ React21.createElement(MenuContext.Provider, { + }), /* @__PURE__ */ React18.createElement(MenuContext.Provider, { value: { menu, setMenu, defaultMenuCollapsed: !!config.defaultMenuCollapsed } - }, /* @__PURE__ */ React21.createElement("div", { - className: cn9("nextra-container main-container flex flex-col", { + }, /* @__PURE__ */ React18.createElement("div", { + className: cn8("nextra-container main-container flex flex-col", { rtl: isRTL, page: true }) - }, /* @__PURE__ */ React21.createElement(Navbar, { + }, /* @__PURE__ */ React18.createElement(Navbar, { isRTL, flatDirectories, flatPageDirectories - }), /* @__PURE__ */ React21.createElement(ActiveAnchor, null, /* @__PURE__ */ React21.createElement("div", { + }), /* @__PURE__ */ React18.createElement(ActiveAnchor, null, /* @__PURE__ */ React18.createElement("div", { className: "flex flex-1 h-full" - }, /* @__PURE__ */ React21.createElement(Sidebar, { + }, /* @__PURE__ */ React18.createElement(Sidebar, { directories: flatPageDirectories, flatDirectories, fullDirectories: directories, mdShow: false, headings - }), /* @__PURE__ */ React21.createElement(Body, { + }), /* @__PURE__ */ React18.createElement(Body, { meta, filepathWithName, navLinks: null }, children)))))); } - return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Head, { + return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Head, { title, locale, meta - }), /* @__PURE__ */ React21.createElement(MenuContext.Provider, { + }), /* @__PURE__ */ React18.createElement(MenuContext.Provider, { value: { menu, setMenu, defaultMenuCollapsed: !!config.defaultMenuCollapsed } - }, /* @__PURE__ */ React21.createElement("div", { - className: cn9("nextra-container main-container flex flex-col", { + }, /* @__PURE__ */ React18.createElement("div", { + className: cn8("nextra-container main-container flex flex-col", { rtl: isRTL }) - }, /* @__PURE__ */ React21.createElement(Navbar, { + }, /* @__PURE__ */ React18.createElement(Navbar, { isRTL, flatDirectories, flatPageDirectories - }), /* @__PURE__ */ React21.createElement(ActiveAnchor, null, /* @__PURE__ */ React21.createElement("div", { + }), /* @__PURE__ */ React18.createElement(ActiveAnchor, null, /* @__PURE__ */ React18.createElement("div", { className: "flex flex-1 h-full" - }, /* @__PURE__ */ React21.createElement(Sidebar, { + }, /* @__PURE__ */ React18.createElement(Sidebar, { directories: docsDirectories, flatDirectories, fullDirectories: directories, headings - }), /* @__PURE__ */ React21.createElement(Body, { + }), /* @__PURE__ */ React18.createElement(Body, { meta, filepathWithName, - toc: /* @__PURE__ */ React21.createElement(ToC, { + toc: /* @__PURE__ */ React18.createElement(ToC, { headings: config.floatTOC ? headings : null }), - navLinks: /* @__PURE__ */ React21.createElement(NavLinks, { + navLinks: /* @__PURE__ */ React18.createElement(NavLinks, { flatDirectories: flatDocsDirectories, currentIndex: activeIndex, isRTL @@ -2019,17 +1846,14 @@ var Layout = (props) => { var DocsLayout = (opts, config) => { const extendedConfig = Object.assign({}, default_config_default, config); return (props) => { - return /* @__PURE__ */ React21.createElement(ThemeConfigContext.Provider, { + return /* @__PURE__ */ React18.createElement(ThemeConfigContext.Provider, { value: extendedConfig - }, /* @__PURE__ */ React21.createElement(ThemeProvider, { + }, /* @__PURE__ */ React18.createElement(ThemeProvider, { attribute: "class" - }, /* @__PURE__ */ React21.createElement(Layout, __spreadValues(__spreadValues({}, opts), props)))); + }, /* @__PURE__ */ React18.createElement(RenderlesskitProvider, null, /* @__PURE__ */ React18.createElement(Layout, __spreadValues(__spreadValues({}, opts), props))))); }; }; var src_default = DocsLayout; export { - Bleed, - Callout, - CodeBlock, src_default as default }; diff --git a/.yalc/nextra-renderlesskit-theme-docs/dist/types/bleed.d.ts b/.yalc/nextra-renderlesskit-theme-docs/dist/types/bleed.d.ts deleted file mode 100644 index fa67ca6..0000000 --- a/.yalc/nextra-renderlesskit-theme-docs/dist/types/bleed.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; -interface BleedProps { - full: boolean; -} -export declare const Bleed: React.FC; -export default Bleed; diff --git a/.yalc/nextra-renderlesskit-theme-docs/dist/types/callout.d.ts b/.yalc/nextra-renderlesskit-theme-docs/dist/types/callout.d.ts deleted file mode 100644 index bef9fbc..0000000 --- a/.yalc/nextra-renderlesskit-theme-docs/dist/types/callout.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -declare const themes: { - default: string; - error: string; - warning: string; -}; -interface CalloutProps { - /** Callout Theme default to 'default' */ - type?: keyof typeof themes; - /** default emoji 💡*/ - emoji: string; -} -export declare const Callout: React.FC; -export default Callout; diff --git a/.yalc/nextra-renderlesskit-theme-docs/dist/types/index.d.ts b/.yalc/nextra-renderlesskit-theme-docs/dist/types/index.d.ts index a037b07..d3d1d63 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/dist/types/index.d.ts +++ b/.yalc/nextra-renderlesskit-theme-docs/dist/types/index.d.ts @@ -1,11 +1,6 @@ import React from "react"; import { PageOpt } from "nextra"; import "focus-visible"; -declare const DocsLayout: (opts: PageOpt, config: DocsThemeConfig) => (props: any) => JSX.Element; -export default DocsLayout; -export { Bleed } from "./bleed"; -export { Callout } from "./callout"; -export { CodeBlock } from "./codeblock"; export interface DocsThemeConfig { docsRepositoryBase?: string; titleSuffix?: string | React.FC<{ @@ -50,3 +45,5 @@ export interface DocsThemeConfig { }>; floatTOC?: boolean; } +declare const DocsLayout: (opts: PageOpt, config: DocsThemeConfig) => (props: any) => JSX.Element; +export default DocsLayout; diff --git a/.yalc/nextra-renderlesskit-theme-docs/package.json b/.yalc/nextra-renderlesskit-theme-docs/package.json index 1e3533a..55f260e 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/package.json +++ b/.yalc/nextra-renderlesskit-theme-docs/package.json @@ -65,7 +65,6 @@ ] }, "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", @@ -78,7 +77,6 @@ "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": { @@ -92,5 +90,5 @@ "emoji": "emoji", "editor": false }, - "yalcSig": "4464d2e91e1615036505dc20e320df3b" + "yalcSig": "2c850273244d7f6958f42b9d89733f00" } diff --git a/.yalc/nextra-renderlesskit-theme-docs/yalc.sig b/.yalc/nextra-renderlesskit-theme-docs/yalc.sig index b8df2d3..8fbd8e1 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/yalc.sig +++ b/.yalc/nextra-renderlesskit-theme-docs/yalc.sig @@ -1 +1 @@ -4464d2e91e1615036505dc20e320df3b \ No newline at end of file +2c850273244d7f6958f42b9d89733f00 \ No newline at end of file diff --git a/components/Bleed.tsx b/components/Bleed.tsx new file mode 100644 index 0000000..1b4515d --- /dev/null +++ b/components/Bleed.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import cn from "classnames"; + +interface BleedProps { + full: boolean; +} + +export const Bleed: React.FC = ({ full, children }) => { + return ( +
+ {children} +
+ ); +}; + +export default Bleed; diff --git a/components/Callout.tsx b/components/Callout.tsx new file mode 100644 index 0000000..a8a7178 --- /dev/null +++ b/components/Callout.tsx @@ -0,0 +1,40 @@ +import React from "react"; + +const themes = { + default: + "bg-orange-100 text-orange-800 dark:text-orange-300 dark:bg-orange-200 dark:bg-opacity-10", + error: + "bg-red-200 text-red-900 dark:text-red-200 dark:bg-red-600 dark:bg-opacity-30", + warning: + "bg-yellow-200 text-yellow-900 dark:text-yellow-200 dark:bg-yellow-700 dark:bg-opacity-30", +}; + +interface CalloutProps { + /** Callout Theme default to 'default' */ + type?: keyof typeof themes; + /** default emoji 💡*/ + emoji: string; +} + +export const Callout: React.FC = ({ + children, + type = "default", + emoji = "💡", +}) => { + return ( +
+
+ {emoji} +
+
{children}
+
+ ); +}; + +export default Callout; diff --git a/components/ComponentLinks.tsx b/components/ComponentLinks.tsx index 1ea01ab..36818b7 100644 --- a/components/ComponentLinks.tsx +++ b/components/ComponentLinks.tsx @@ -8,7 +8,7 @@ type ComponentLinkProps = { theme: string; }; -const ComponentLinks: React.FC = ({ +export const ComponentLinks: React.FC = ({ github, story, theme, diff --git a/components/InteractiveCodeblock.tsx b/components/InteractiveCodeblock.tsx index 65e954f..2169cda 100644 --- a/components/InteractiveCodeblock.tsx +++ b/components/InteractiveCodeblock.tsx @@ -1,13 +1,18 @@ import React from "react"; +import { LiveEditor, LiveError, LivePreview, LiveProvider } from "react-live"; import { + Button, Checkbox, runIfFn, Select, useHasMounted, useTheme, } from "@renderlesskit/react-tailwind"; +import * as Renderlesskit from "@renderlesskit/react-tailwind"; +import { useClipboard } from "@chakra-ui/hooks"; import { get } from "lodash"; -import { CodeBlock } from "nextra-renderlesskit-theme-docs"; +import prismTheme from "prism-react-renderer/themes/palenight"; +import { tw } from "twind"; type TemplateFunctionProps = { booleanProps: string[]; @@ -28,7 +33,7 @@ type InteractiveCodeblockProps = { const wrapperStyles = "mt-2 flex items-center flex-wrap space-x-4"; -const InteractiveCodeblock = (props: InteractiveCodeblockProps) => { +export const InteractiveCodeblock = (props: InteractiveCodeblockProps) => { const { children = "", themeProps = {}, @@ -40,15 +45,12 @@ const InteractiveCodeblock = (props: InteractiveCodeblockProps) => { 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], @@ -74,13 +76,31 @@ const InteractiveCodeblock = (props: InteractiveCodeblockProps) => { props: { ...themeStates, ...booleanStates, ...choiceStates }, }); + const scope = { + React, + ...Renderlesskit, + tw, + }; + const mounted = useHasMounted(); if (!mounted) return null; return (
- + transformer(rawCode)} + code={code} + scope={scope} + theme={prismTheme} + > +
+ + +
+ + +
{booleanProps.map(name => { return ( @@ -168,3 +188,34 @@ const printProps = (props: string[]) => { function capitalizeFirstLetter(string: string) { return string.charAt(0).toUpperCase() + string.slice(1); } + +export type CopyButtonProps = { + code: string; +}; + +export const CopyButton: React.FC = ({ code }) => { + const { hasCopied, onCopy } = useClipboard(code); + + return ( + + + + ); +}; + +const transformer = (rawCode: string) => { + const code = rawCode + // remove imports + .replace(/((^|)import[^;]+[; ]+)+/gi, "") + // replace `export default => {*};` with `render(() => {*});` + .replace(/export default \(\) => {((.|\n)*)};/, "render(() => {$1});") + // replace `export default => (*);` with `render(*);` + .replace(/export default \(\) => \(((.|\n)*)\);/, "render($1);") + // replace `export default => *;` with `render(*);` + .replace(/export default \(\) => ((.|\n)*);/, "render($1);") + .replace(/export default ((.|\n)*);/, "render($1);"); + + return `<>${code}`; +}; diff --git a/components/PropsTable.tsx b/components/PropsTable.tsx index cf97676..925bc57 100644 --- a/components/PropsTable.tsx +++ b/components/PropsTable.tsx @@ -27,7 +27,7 @@ type PropsTableProps = { "aria-labelledby"?: string; }; -const PropsTable: React.FC = ({ +export const PropsTable: React.FC = ({ data, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, diff --git a/components/RegionTable.tsx b/components/RegionTable.tsx index 29441c4..bbcbb8d 100644 --- a/components/RegionTable.tsx +++ b/components/RegionTable.tsx @@ -1,11 +1,11 @@ import React from "react"; import { Box, BoxProps } from "@renderlesskit/react-tailwind"; -export function RegionTable({ +export const RegionTable = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props -}: BoxProps) { +}: BoxProps) => { return ( ); -} +}; + +export default RegionTable; diff --git a/components/index.ts b/components/index.ts new file mode 100644 index 0000000..1a1c166 --- /dev/null +++ b/components/index.ts @@ -0,0 +1,6 @@ +export * from "./Bleed"; +export * from "./Callout"; +export * from "./ComponentLinks"; +export * from "./InteractiveCodeblock"; +export * from "./PropsTable"; +export * from "./RegionTable"; diff --git a/package.json b/package.json index a0a4ed6..687dcd1 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,8 @@ "nextra-renderlesskit-theme-docs": "link:.yalc/nextra-renderlesskit-theme-docs", "react": "17.0.2", "react-dom": "17.0.2", - "react-live": "2.3.0" + "react-live": "2.2.3", + "twind": "^0.16.16" }, "devDependencies": { "@babel/core": "7.16.7", diff --git a/pages/docs/components/feedback/circular-progress.mdx b/pages/docs/components/feedback/circular-progress.mdx index 10d41e8..ac3968a 100644 --- a/pages/docs/components/feedback/circular-progress.mdx +++ b/pages/docs/components/feedback/circular-progress.mdx @@ -1,4 +1,4 @@ -import ComponentLinks from "@/components/ComponentLinks"; +import { ComponentLinks } from "@/components/index"; # CircularProgress diff --git a/pages/docs/components/feedback/progress.mdx b/pages/docs/components/feedback/progress.mdx index 628e3b4..0d22bf9 100644 --- a/pages/docs/components/feedback/progress.mdx +++ b/pages/docs/components/feedback/progress.mdx @@ -1,4 +1,4 @@ -import ComponentLinks from "@/components/ComponentLinks"; +import { ComponentLinks } from "@/components/index"; # Progress diff --git a/pages/docs/components/feedback/spinner.mdx b/pages/docs/components/feedback/spinner.mdx index a432ee1..a6985ed 100644 --- a/pages/docs/components/feedback/spinner.mdx +++ b/pages/docs/components/feedback/spinner.mdx @@ -1,4 +1,4 @@ -import ComponentLinks from "@/components/ComponentLinks"; +import { ComponentLinks } from "@/components/index"; # Spinner diff --git a/pages/docs/components/forms/checkbox.mdx b/pages/docs/components/forms/checkbox.mdx index bdfa30b..7772e1a 100644 --- a/pages/docs/components/forms/checkbox.mdx +++ b/pages/docs/components/forms/checkbox.mdx @@ -1,6 +1,6 @@ -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { Callout } from "@/components/index"; -import ComponentLinks from "@/components/ComponentLinks"; +import { ComponentLinks } from "@/components/index"; # Checkbox diff --git a/pages/docs/components/forms/input.mdx b/pages/docs/components/forms/input.mdx index 34941e8..7ab1906 100644 --- a/pages/docs/components/forms/input.mdx +++ b/pages/docs/components/forms/input.mdx @@ -1,5 +1,5 @@ -import ComponentLinks from "@/components/ComponentLinks"; -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { ComponentLinks } from "@/components/index"; +import { Callout } from "@/components/index"; # Input diff --git a/pages/docs/components/forms/radio.mdx b/pages/docs/components/forms/radio.mdx index b1ac3f6..cc6c73f 100644 --- a/pages/docs/components/forms/radio.mdx +++ b/pages/docs/components/forms/radio.mdx @@ -1,6 +1,6 @@ -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { Callout } from "@/components/index"; -import ComponentLinks from "@/components/ComponentLinks"; +import { ComponentLinks } from "@/components/index"; # Radio diff --git a/pages/docs/components/forms/select.mdx b/pages/docs/components/forms/select.mdx index 34941e8..7ab1906 100644 --- a/pages/docs/components/forms/select.mdx +++ b/pages/docs/components/forms/select.mdx @@ -1,5 +1,5 @@ -import ComponentLinks from "@/components/ComponentLinks"; -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { ComponentLinks } from "@/components/index"; +import { Callout } from "@/components/index"; # Input diff --git a/pages/docs/components/forms/slider.mdx b/pages/docs/components/forms/slider.mdx index 3fe2b95..71ca4d0 100644 --- a/pages/docs/components/forms/slider.mdx +++ b/pages/docs/components/forms/slider.mdx @@ -1,6 +1,6 @@ -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { Callout } from "@/components/index"; -import ComponentLinks from "@/components/ComponentLinks"; +import { ComponentLinks } from "@/components/index"; # Slider diff --git a/pages/docs/components/forms/switch.mdx b/pages/docs/components/forms/switch.mdx index 6d09a91..a0e9229 100644 --- a/pages/docs/components/forms/switch.mdx +++ b/pages/docs/components/forms/switch.mdx @@ -1,5 +1,5 @@ -import ComponentLinks from "@/components/ComponentLinks"; -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { ComponentLinks } from "@/components/index"; +import { Callout } from "@/components/index"; # Switch diff --git a/pages/docs/components/forms/textarea.mdx b/pages/docs/components/forms/textarea.mdx index 1aa405e..a2852e7 100644 --- a/pages/docs/components/forms/textarea.mdx +++ b/pages/docs/components/forms/textarea.mdx @@ -1,5 +1,5 @@ -import ComponentLinks from "@/components/ComponentLinks"; -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { ComponentLinks } from "@/components/index"; +import { Callout } from "@/components/index"; # Textarea diff --git a/pages/docs/components/primitives/avatar.mdx b/pages/docs/components/primitives/avatar.mdx index 4a8a57f..01bb1f1 100644 --- a/pages/docs/components/primitives/avatar.mdx +++ b/pages/docs/components/primitives/avatar.mdx @@ -1,4 +1,4 @@ -import ComponentLinks from "@/components/ComponentLinks"; +import { ComponentLinks } from "@/components/index"; # Avatar diff --git a/pages/docs/components/primitives/badge.mdx b/pages/docs/components/primitives/badge.mdx index fbc7cc7..37f56ab 100644 --- a/pages/docs/components/primitives/badge.mdx +++ b/pages/docs/components/primitives/badge.mdx @@ -1,6 +1,4 @@ -import { Callout } from "nextra-renderlesskit-theme-docs"; -import ComponentLinks from "@/components/ComponentLinks"; -import PropsTable from "@/components/PropsTable"; +import { Callout, ComponentLinks, PropsTable } from "@/components/index"; # Badge diff --git a/pages/docs/components/primitives/box.mdx b/pages/docs/components/primitives/box.mdx index af7b3e1..3f32a33 100644 --- a/pages/docs/components/primitives/box.mdx +++ b/pages/docs/components/primitives/box.mdx @@ -1,5 +1,4 @@ -import ComponentLinks from "@/components/ComponentLinks"; -import PropsTable from "@/components/PropsTable"; +import { ComponentLinks, PropsTable } from "@/components/index"; # Box diff --git a/pages/docs/components/primitives/button.mdx b/pages/docs/components/primitives/button.mdx index faa3cda..a1facbe 100644 --- a/pages/docs/components/primitives/button.mdx +++ b/pages/docs/components/primitives/button.mdx @@ -1,7 +1,9 @@ -import { Callout } from "nextra-renderlesskit-theme-docs"; -import InteractiveCodeblock from "@/components/InteractiveCodeblock"; -import ComponentLinks from "@/components/ComponentLinks"; -import PropsTable from "@/components/PropsTable"; +import { + Callout, + ComponentLinks, + InteractiveCodeblock, + PropsTable, +} from "@/components/index"; # Button diff --git a/pages/docs/components/primitives/icon.mdx b/pages/docs/components/primitives/icon.mdx index 47fb782..8fa0e43 100644 --- a/pages/docs/components/primitives/icon.mdx +++ b/pages/docs/components/primitives/icon.mdx @@ -1,5 +1,4 @@ -import ComponentLinks from "@/components/ComponentLinks"; -import PropsTable from "@/components/PropsTable"; +import { ComponentLinks, PropsTable } from "@/components/index"; # Icon diff --git a/pages/docs/components/primitives/tag.mdx b/pages/docs/components/primitives/tag.mdx index 6e33267..de68a8d 100644 --- a/pages/docs/components/primitives/tag.mdx +++ b/pages/docs/components/primitives/tag.mdx @@ -1,6 +1,4 @@ -import { Callout } from "nextra-renderlesskit-theme-docs"; - -import ComponentLinks from "@/components/ComponentLinks"; +import { Callout, ComponentLinks } from "@/components/index"; # Tag diff --git a/pages/docs/getting-started.mdx b/pages/docs/getting-started.mdx index 7ef6f5f..5769d0a 100644 --- a/pages/docs/getting-started.mdx +++ b/pages/docs/getting-started.mdx @@ -1,4 +1,4 @@ -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { Callout } from "@/components/index"; # Getting Started diff --git a/pages/guides/usage-with-cra.mdx b/pages/guides/usage-with-cra.mdx index 7152204..f0b95a7 100644 --- a/pages/guides/usage-with-cra.mdx +++ b/pages/guides/usage-with-cra.mdx @@ -1,4 +1,4 @@ -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { Callout } from "@/components/index"; # Setting up CRA with Renderlesskit diff --git a/pages/guides/usage-with-nextjs.mdx b/pages/guides/usage-with-nextjs.mdx index ff498d8..161e902 100644 --- a/pages/guides/usage-with-nextjs.mdx +++ b/pages/guides/usage-with-nextjs.mdx @@ -1,4 +1,4 @@ -import { Callout } from "nextra-renderlesskit-theme-docs"; +import { Callout } from "@/components/index"; # Setting up Next.js with Renderlesskit diff --git a/yalc.lock b/yalc.lock index d90dd60..5e87bbf 100644 --- a/yalc.lock +++ b/yalc.lock @@ -2,7 +2,7 @@ "version": "v1", "packages": { "nextra-renderlesskit-theme-docs": { - "signature": "4464d2e91e1615036505dc20e320df3b", + "signature": "2c850273244d7f6958f42b9d89733f00", "link": true }, "nextra": { diff --git a/yarn.lock b/yarn.lock index e8ac667..058cb22 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4219,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@^2.4.1: + version "2.6.12" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" + integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== + core-js@^3.14.0: version "3.20.2" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.2.tgz#46468d8601eafc8b266bd2dd6bf9dee622779581" @@ -4381,7 +4386,7 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" -csstype@^3.0.2, csstype@^3.0.4: +csstype@^3.0.2, csstype@^3.0.4, csstype@^3.0.5: version "3.0.10" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA== @@ -4722,11 +4727,25 @@ dom-iterator@^1.0.0: component-props "1.1.1" component-xor "0.0.4" +dom-serializer@^1.0.1: + version "1.3.2" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91" + integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig== + dependencies: + domelementtype "^2.0.1" + domhandler "^4.2.0" + entities "^2.0.0" + domain-browser@4.19.0: version "4.19.0" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-4.19.0.tgz#1093e17c0a17dbd521182fe90d49ac1370054af1" integrity sha512-fRA+BaAWOR/yr/t7T9E9GJztHPeFjj8U35ajyAjCDtAAnTn1Rc1f6W6VGPJrO1tkQv9zWu+JRof7z6oQtiYVFQ== +domelementtype@^2.0.1, domelementtype@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57" + integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A== + domexception@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304" @@ -4734,6 +4753,22 @@ domexception@^2.0.1: dependencies: webidl-conversions "^5.0.0" +domhandler@^4.0.0, domhandler@^4.2.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626" + integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g== + dependencies: + domelementtype "^2.2.0" + +domutils@^2.5.2: + version "2.8.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135" + integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A== + dependencies: + dom-serializer "^1.0.1" + domelementtype "^2.2.0" + domhandler "^4.2.0" + dot-prop@^5.1.0, dot-prop@^5.2.0: version "5.3.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88" @@ -4822,6 +4857,11 @@ enquirer@^2.3.5: dependencies: ansi-colors "^4.1.1" +entities@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" + integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A== + error-ex@^1.3.1: version "1.3.2" resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" @@ -6092,6 +6132,16 @@ html-escaper@^2.0.0: resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453" integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg== +htmlparser2@^6.0.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7" + integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A== + dependencies: + domelementtype "^2.0.1" + domhandler "^4.0.0" + domutils "^2.5.2" + entities "^2.0.0" + http-cache-semantics@3.8.1: version "3.8.1" resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2" @@ -9138,7 +9188,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, prism-react-renderer@^1.0.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== @@ -9166,6 +9216,15 @@ prompts@^2.0.1, prompts@^2.3.1: kleur "^3.0.3" sisteransi "^1.0.5" +prop-types@^15.5.8: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + prop-types@^15.7.2: version "15.8.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.0.tgz#d237e624c45a9846e469f5f31117f970017ff588" @@ -9351,6 +9410,19 @@ 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.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/react-live/-/react-live-2.2.3.tgz#260f99194213799f0005e473e7a4154c699d6a7c" + integrity sha512-tpKruvfytNETuzO3o1mrQUj180GVrq35IE8F5gH1NJVPt4szYCx83/dOSCOyjgRhhc3gQvl0pQ3k/CjOjwJkKQ== + dependencies: + buble "0.19.6" + core-js "^2.4.1" + dom-iterator "^1.0.0" + prism-react-renderer "^1.0.1" + prop-types "^15.5.8" + react-simple-code-editor "^0.10.0" + unescape "^1.0.1" + react-live@2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/react-live/-/react-live-2.3.0.tgz#09fbac361903970e7cf51cee60729eeb164a5d87" @@ -9389,6 +9461,11 @@ react-remove-scroll@^2.4.3: use-callback-ref "^1.2.3" use-sidecar "^1.0.1" +react-simple-code-editor@^0.10.0: + version "0.10.0" + resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373" + integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA== + 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" @@ -10396,6 +10473,11 @@ style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +style-vendorizer@^2.0.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/style-vendorizer/-/style-vendorizer-2.1.1.tgz#5f06601c1724cfb314fe1153e7e442c58dde771c" + integrity sha512-gVO6Cwxtg8iX0X1W4xMhSc5WbQpiIBQDkhq3JkwebMRRgyhCfuvMrnPlTAGTRjfQPGRmzgjCOZ4drehTnLahHA== + styled-jsx@5.0.0-beta.3: version "5.0.0-beta.3" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.3.tgz#400d16179b5dff10d5954ab8be27a9a1b7780dd2" @@ -10761,6 +10843,15 @@ tty-browserify@0.0.1: resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.1.tgz#3f05251ee17904dfd0677546670db9651682b811" integrity sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw== +twind@^0.16.16: + version "0.16.16" + resolved "https://registry.yarnpkg.com/twind/-/twind-0.16.16.tgz#76959cd21897528f9a2631a293e3381b668332ad" + integrity sha512-UlAYjkGCdgjg4xU1SIwRW0PpG0anZrY32+kS2jYsi32yb4RuW0ttzaI1OglgwAUk/rZwzoINilnIFORzOSFZag== + dependencies: + csstype "^3.0.5" + htmlparser2 "^6.0.0" + style-vendorizer "^2.0.0" + type-check@^0.4.0, type-check@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"