chore(components): 🎨 update all components used

adaptui · Feb 23, 2022 · a642987 · a642987 · vercel · Feb 23, 2022
1 parent debf459
commit a642987
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 139 deletions.
diff --git a/components/Bleed.tsx b/components/Bleed.tsx
@@ -5,7 +5,9 @@ interface BleedProps {
   full: boolean;
 }
 
-export const Bleed: React.FC<BleedProps> = ({ full, children }) => {
+export const Bleed: React.FC<BleedProps> = props => {
+  const { full, children } = props;
+
   return (
     <div
       className={cn("bleed relative -mx-6 mt-6 md:-mx-8 2xl:-mx-24", { full })}

diff --git a/components/Callout.tsx b/components/Callout.tsx
@@ -12,15 +12,14 @@ const themes = {
 interface CalloutProps {
   /** Callout Theme default to 'default'  */
   type?: keyof typeof themes;
+
   /** default emoji 💡*/
   emoji: string;
 }
 
-export const Callout: React.FC<CalloutProps> = ({
-  children,
-  type = "default",
-  emoji = "💡",
-}) => {
+export const Callout: React.FC<CalloutProps> = props => {
+  const { children, type = "default", emoji = "💡" } = props;
+
   return (
     <div className={`${themes[type]} callout mt-6 flex rounded-lg`}>
       <div

diff --git a/components/Codeblock.tsx b/components/Codeblock.tsx
@@ -3,19 +3,14 @@ import { LiveEditor, LiveError, LivePreview, LiveProvider } from "react-live";
 import * as Reakit from "reakit";
 import * as Renderlesskit from "@renderlesskit/react-tailwind";
 import { RenderlesskitProvider } from "@renderlesskit/react-tailwind";
-import { useClipboard } from "@chakra-ui/hooks";
 import { useTheme } from "next-themes";
-import Highlight, { defaultProps, Language } from "prism-react-renderer";
+import Highlight, { defaultProps } from "prism-react-renderer";
 import darkTheme from "prism-react-renderer/themes/vsDark";
 import lightTheme from "prism-react-renderer/themes/vsLight";
 import { setup, tw } from "twind";
 import * as colors from "twind/colors";
 
-export type StaticCodeProps = {
-  className?: string;
-  highlight?: string;
-  noCopy?: boolean;
-};
+import CopyButton from "./CopyButton";
 
 setup({
   preflight: false, // do not include base style reset (default: use tailwind preflight)
@@ -43,25 +38,25 @@ setup({
   darkMode: "class", // use a different dark mode strategy (default: 'media')
 });
 
+export type StaticCodeProps = {
+  highlight?: string;
+  noCopy?: boolean;
+};
+
 export const StaticCode: React.FC<StaticCodeProps> = props => {
-  const { children, className, highlight, noCopy, ...rest } = props;
+  const { children, highlight, noCopy } = props;
 
   const { theme, systemTheme } = useTheme();
   const renderedTheme = theme === "system" ? systemTheme : theme;
 
-  if (!className) return <code {...rest}>{children}</code>;
-
   const highlightedLines = highlight ? highlight.split(",").map(Number) : [];
 
-  // https://mdxjs.com/guides/syntax-highlighting#all-together
-  const language = className.replace(/language-/, "") as Language;
-
   return (
     <div className="relative">
       <Highlight
         {...defaultProps}
+        language="jsx"
         code={(children as string).trim()}
-        language={language}
         theme={renderedTheme === "dark" ? darkTheme : lightTheme}
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
@@ -94,55 +89,16 @@ export const StaticCode: React.FC<StaticCodeProps> = props => {
   );
 };
 
-export type CopyButtonProps = {
-  code: string;
-};
-
-export const CopyButton: React.FC<CopyButtonProps> = ({ code }) => {
-  const { hasCopied, onCopy } = useClipboard(code);
-
-  return (
-    <button
-      className="absolute right-0 -top-2 -translate-x-2 translate-y-4 transform rounded-md bg-white px-4 py-1 text-xs text-gray-800"
-      onClick={onCopy}
-    >
-      {hasCopied ? "Copied!" : "Copy"}
-    </button>
-  );
-};
-
-const transformer = (
-  rawCode: string,
-  language: Language,
-  noInline?: boolean,
-) => {
-  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 language === "jsx" && !noInline ? `<>${code}</>` : code;
-};
-
 export type CodeblockProps = {
-  className?: string;
   live?: boolean;
   render?: boolean;
   noCopy?: boolean;
   noInline?: boolean;
 };
 
 export const Codeblock: React.FC<CodeblockProps> = props => {
-  const { children, className, live, render, noCopy, noInline, ...rest } =
-    props;
+  const { children, live, render, noCopy, noInline, ...rest } = props;
   const code = children;
-  const language = className?.replace(/language-/, "") as Language;
   const [editorCode, setEditorCode] = React.useState((code as string).trim());
   const { theme, systemTheme } = useTheme();
   const renderedTheme = theme === "system" ? systemTheme : theme;
@@ -159,7 +115,6 @@ export const Codeblock: React.FC<CodeblockProps> = props => {
   };
   const liveProviderProps = {
     theme: renderedTheme === "dark" ? darkTheme : lightTheme,
-    language,
     code: editorCode,
     scope,
     noInline,
@@ -169,12 +124,7 @@ export const Codeblock: React.FC<CodeblockProps> = props => {
   if (live) {
     return (
       <RenderlesskitProvider>
-        <LiveProvider
-          transformCode={rawCode =>
-            transformer(rawCode, language, props.noInline)
-          }
-          {...liveProviderProps}
-        >
+        <LiveProvider {...liveProviderProps}>
           <div className="mt-6 rounded-md border border-gray-500 bg-transparent">
             <LivePreview className="p-6" />
             <div className="relative">
@@ -190,23 +140,16 @@ export const Codeblock: React.FC<CodeblockProps> = props => {
 
   if (render) {
     return (
-      <div>
-        <RenderlesskitProvider>
-          <LiveProvider
-            transformCode={rawCode =>
-              transformer(rawCode, language, props.noInline)
-            }
-            {...liveProviderProps}
-          >
-            <LivePreview style={{ fontFamily: "'Inter', sans-serif" }} />
-          </LiveProvider>
-        </RenderlesskitProvider>
-      </div>
+      <RenderlesskitProvider>
+        <LiveProvider {...liveProviderProps}>
+          <LivePreview style={{ fontFamily: "'Inter', sans-serif" }} />
+        </LiveProvider>
+      </RenderlesskitProvider>
     );
   }
 
   return (
-    <StaticCode noCopy={noCopy} className={className} {...props}>
+    <StaticCode noCopy={noCopy} {...props}>
       {editorCode}
     </StaticCode>
   );

diff --git a/components/ComponentLinks.tsx b/components/ComponentLinks.tsx
@@ -21,13 +21,17 @@ export const ComponentLinks: React.FC<ComponentLinkProps> = ({
     "https://renderlesskit-react-tailwind.vercel.app/?path=/story/";
 
   return (
-    <ButtonGroup size="md" variant="outline" className="component-links mt-5">
+    <ButtonGroup
+      size="md"
+      variant="outline"
+      className="component-links mt-5 flex-wrap"
+    >
       {github && (
         <Button
           as={Link}
           isExternal
           variant="outline"
-          className="no-underline"
+          className="my-2 no-underline"
           prefix={<SiGithub />}
           href={`${githubBase}${github}`}
         >
@@ -40,7 +44,7 @@ export const ComponentLinks: React.FC<ComponentLinkProps> = ({
           as={Link}
           isExternal
           variant="outline"
-          className="no-underline"
+          className="my-2 no-underline"
           prefix={<SiGithub />}
           href={`${themeBase}${theme}.ts`}
         >
@@ -53,7 +57,7 @@ export const ComponentLinks: React.FC<ComponentLinkProps> = ({
           as={Link}
           isExternal
           variant="outline"
-          className="no-underline"
+          className="my-2 no-underline"
           prefix={<SiStorybook />}
           href={`${storybookBase}${story}`}
         >

diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@renderlesskit/react-tailwind";
+import { useClipboard } from "@chakra-ui/hooks";
+
+export type CopyButtonProps = {
+  code: string;
+};
+
+export const CopyButton: React.FC<CopyButtonProps> = ({ code }) => {
+  const { hasCopied, onCopy } = useClipboard(code);
+
+  return (
+    <span className="absolute right-0 -top-2 -translate-x-2 translate-y-4 transform">
+      <Button size="sm" onClick={onCopy}>
+        {hasCopied ? "Copied!" : "Copy"}
+      </Button>
+    </span>
+  );
+};
+
+export default CopyButton;
diff --git a/components/InteractiveCodeblock.tsx b/components/InteractiveCodeblock.tsx
@@ -2,29 +2,22 @@ import React from "react";
 import { LiveEditor, LiveError, LivePreview, LiveProvider } from "react-live";
 import * as Reakit from "reakit";
 import {
-  Button,
   Checkbox,
+  RenderlesskitProvider,
   runIfFn,
   Select,
   useHasMounted,
   useTheme as useRenderlessTheme,
 } from "@renderlesskit/react-tailwind";
 import * as Renderlesskit from "@renderlesskit/react-tailwind";
-import { useClipboard } from "@chakra-ui/hooks";
 import { get } from "lodash";
 import { useTheme } from "next-themes";
 import darkTheme from "prism-react-renderer/themes/vsDark";
 import lightTheme from "prism-react-renderer/themes/vsLight";
 import { setup, tw } from "twind";
 import * as colors from "twind/colors";
 
-type TemplateFunctionProps = {
-  booleanProps: string[];
-  themeProps: string[];
-  choiceProps: string[];
-  spreadProps: string;
-  props: Record<string, any>;
-};
+import CopyButton from "./CopyButton";
 
 setup({
   preflight: false, // do not include base style reset (default: use tailwind preflight)
@@ -52,6 +45,14 @@ setup({
   darkMode: "class", // use a different dark mode strategy (default: 'media')
 });
 
+type TemplateFunctionProps = {
+  booleanProps: string[];
+  themeProps: string[];
+  choiceProps: string[];
+  spreadProps: string;
+  props: Record<string, any>;
+};
+
 type TemplateFunction = (props: TemplateFunctionProps) => string;
 
 type InteractiveCodeblockProps = {
@@ -122,21 +123,22 @@ export const InteractiveCodeblock = (props: InteractiveCodeblockProps) => {
 
   return (
     <div className="mt-6">
-      <LiveProvider
-        transformCode={rawCode => transformer(rawCode)}
-        code={code}
-        scope={scope}
-        theme={renderedTheme === "dark" ? darkTheme : lightTheme}
-      >
-        <div className="mt-6 rounded-md border border-gray-500 bg-transparent">
-          <LivePreview className="p-6" />
-          <div className="relative">
-            <LiveEditor className="rounded-md rounded-t-none !bg-slate-100 !font-mono text-sm leading-6 tracking-tighter dark:!bg-prime-300 dark:!bg-opacity-10" />
-            <CopyButton code={code} />
+      <RenderlesskitProvider>
+        <LiveProvider
+          code={code}
+          scope={scope}
+          theme={renderedTheme === "dark" ? darkTheme : lightTheme}
+        >
+          <div className="mt-6 rounded-md border border-gray-500 bg-transparent">
+            <LivePreview className="p-6" />
+            <div className="relative">
+              <LiveEditor className="rounded-md rounded-t-none !bg-slate-100 !font-mono text-sm leading-6 tracking-tighter dark:!bg-prime-300 dark:!bg-opacity-10" />
+              <CopyButton code={code} />
+            </div>
           </div>
-        </div>
-        <LiveError className="mt-0 rounded-md rounded-t-none bg-red-100 text-xs text-red-500" />
-      </LiveProvider>
+          <LiveError className="mt-0 rounded-md rounded-t-none bg-red-100 text-xs text-red-500" />
+        </LiveProvider>
+      </RenderlesskitProvider>
       <div className={wrapperStyles}>
         {booleanProps.map(name => {
           return (
@@ -224,34 +226,3 @@ const printProps = (props: string[]) => {
 function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-
-type CopyButtonProps = {
-  code: string;
-};
-
-const CopyButton: React.FC<CopyButtonProps> = ({ code }) => {
-  const { hasCopied, onCopy } = useClipboard(code);
-
-  return (
-    <span className="absolute right-0 -top-2 -translate-x-2 translate-y-4 transform">
-      <Button size="sm" onClick={onCopy}>
-        {hasCopied ? "Copied!" : "Copy"}
-      </Button>
-    </span>
-  );
-};
-
-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/RegionTable.tsx b/components/RegionTable.tsx
@@ -13,7 +13,7 @@ export const RegionTable = ({
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       tabIndex={0}
-      className="region-table relative mt-8"
+      className="region-table relative mt-8 overflow-auto"
     >
       <Box as="table" className="border-0 outline-none" {...props} />
     </Box>