feat(codeblock): ✨ add finished codeblock to mdx components

components/ClipBoardCopyButton.tsx

@@ -1,24 +1,25 @@
-import { Button } from "@adaptui/react-tailwind";
 import { useClipboard } from "@chakra-ui/hooks";
 
-import { CopiedIcon, CopyIcon } from "./Icons";
+import { CopyButton } from "./CopyButton";
+import { Tooltip, TooltipProps } from "./Tooltip";
 
-export type ClipboardCopyButtonProps = {
+export type ClipboardCopyButtonProps = TooltipProps & {
   content: string;
 };
 
 export const ClipboardCopyButton: React.FC<ClipboardCopyButtonProps> = ({
   content,
+  ...props
 }) => {
   const { hasCopied, onCopy } = useClipboard(content);
 
   return (
-    <Button
-      size="sm"
-      onClick={onCopy}
-      iconOnly={hasCopied ? <CopiedIcon /> : <CopyIcon />}
+    <Tooltip
+      withArrow
+      placement="left"
+      anchor={<CopyButton hasCopied={hasCopied} onCopy={onCopy} />}
+      content={hasCopied ? "Copied!" : "Copy"}
+      {...props}
     />
   );
 };
-
-export default ClipboardCopyButton;

components/Codeblock/CopyCodeButton.tsx → components/Codeblock/CopyCodeBlockButton.tsx

@@ -1,4 +1,4 @@
-import ClipboardCopyButton from "../ClipBoardCopyButton";
+import { ClipboardCopyButton } from "../ClipBoardCopyButton";
 
 export type CopyCodeBlockButtonProps = {
   code: string;
@@ -10,10 +10,8 @@ export const CopyCodeBlockButton: React.FC<
   const { code } = props;
 
   return (
-    <span className="absolute right-0 -top-2 -translate-x-2 translate-y-4 transform">
+    <span className="absolute right-2 top-2">
       <ClipboardCopyButton content={code} />
     </span>
   );
 };
-
-export default CopyCodeBlockButton;

components/Codeblock/index.tsx

@@ -7,18 +7,21 @@ import lightTheme from "prism-react-renderer/themes/vsLight";
 
 import { scope } from "../../utils";
 
-import CopyCodeBlockButton from "./CopyCodeButton";
+import { CopyCodeBlockButton } from "./CopyCodeBlockButton";
+import { transformer } from "./transformer";
 
 export type CodeblockProps = {
   code: string;
   noCopy?: boolean;
   noInline?: boolean;
+  children?: React.ReactNode | any;
 };
 
 export const Codeblock = (props: CodeblockProps) => {
-  const { code, noCopy, noInline, ...rest } = props;
+  const { code, noCopy, noInline, children, ...rest } = props;
+  const _code = children?.props?.children?.props?.children ?? code;
 
-  const [editorCode, setEditorCode] = React.useState(code.trim());
+  const [editorCode, setEditorCode] = React.useState(_code.trim());
   const handleChange = React.useCallback((code: string) => {
     setEditorCode(code.trim());
   }, []);
@@ -35,7 +38,10 @@ export const Codeblock = (props: CodeblockProps) => {
 
   return (
     <AdaptUIProvider>
-      <LiveProvider {...liveProviderProps}>
+      <LiveProvider
+        transformCode={rawCode => transformer(rawCode, noInline)}
+        {...liveProviderProps}
+      >
         <div className="mt-6 rounded-md border border-[#ededed] bg-transparent">
           <LivePreview className="rounded-t-md bg-white-900 p-6" />
           <div className="relative">
@@ -52,4 +58,4 @@ export const Codeblock = (props: CodeblockProps) => {
   );
 };
 
-export default Codeblock;
+export * from "./CopyCodeBlockButton";

components/Codeblock/transformer.ts

@@ -0,0 +1,15 @@
+export const transformer = (rawCode: any, noInline: any) => {
+  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 const App = ((.|\n)*);/, "render($1);")
+    .replace(/export default ((.|\n)*);/, "render($1);");
+
+  return !noInline ? `<>${code}</>` : code;
+};

components/CopyButton.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from "react";
+import { Button, ButtonProps } from "@adaptui/react-tailwind";
+
+import { CopiedIcon, CopyIcon } from "./Icons";
+
+export type CopyButtonProps = ButtonProps & {
+  hasCopied: boolean;
+  onCopy: () => void;
+};
+
+export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
+  (props, ref) => {
+    const { onCopy, hasCopied, ...rest } = props;
+
+    return (
+      <Button
+        ref={ref}
+        size="sm"
+        onClick={onCopy}
+        iconOnly={hasCopied ? <CopiedIcon /> : <CopyIcon />}
+        {...rest}
+      />
+    );
+  },
+);

components/InteractiveCodeblock.tsx

@@ -17,7 +17,7 @@ import lightTheme from "prism-react-renderer/themes/vsLight";
 import { setup, tw } from "twind";
 import * as colors from "twind/colors";
 
-import CopyCodeBlockButton from "./Codeblock/CopyCodeButton";
+import { CopyCodeBlockButton } from "./Codeblock/CopyCodeBlockButton";
 
 setup({
   preflight: false, // do not include base style reset (default: use tailwind preflight)

components/Pre.tsx

@@ -0,0 +1,15 @@
+import { CopyCodeBlockButton } from "./Codeblock/CopyCodeBlockButton";
+
+export const Pre = (props: { children?: React.ReactNode }) => {
+  const { children, ...rest } = props;
+  console.log("%cprops", "color: #00ff88", props);
+
+  return (
+    <div className="relative">
+      <pre {...rest}>
+        <>{children}</>
+      </pre>
+      <CopyCodeBlockButton code={"copy"} />
+    </div>
+  );
+};

components/Tooltip.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import {
+  Tooltip as AdaptTooltip,
+  TooltipProps as AdaptTooltipProps,
+  TooltipWrapper,
+} from "@adaptui/react-tailwind";
+
+export type TooltipProps = AdaptTooltipProps & {};
+
+export const Tooltip: React.FC<TooltipProps> = props => {
+  return (
+    <AdaptTooltip {...props}>
+      <TooltipWrapper style={{ zIndex: 9999 }} />
+    </AdaptTooltip>
+  );
+};

components/index.ts

@@ -1,5 +1,8 @@
+export * from "./ClipBoardCopyButton";
 export * from "./Codeblock";
 export * from "./ComponentLinks";
 export * from "./InteractiveCodeblock";
+export * from "./Pre";
 export * from "./PropsTable";
 export * from "./RegionTable";
+export * from "./Tooltip";

package.json

@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@adaptui/react": "1.0.0-alpha.7",
-    "@adaptui/react-tailwind": "0.1.0-alpha.3",
+    "@adaptui/react-tailwind": "0.1.0-alpha.4",
     "@chakra-ui/hooks": "2.0.4",
     "@reach/skip-nav": "0.17.0",
     "ariakit": "2.0.0-next.34",
@@ -83,6 +83,7 @@
     "@babel/core": "7.18.9",
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",
+    "@mdx-js/react": "^2.1.2",
     "@next/eslint-plugin-next": "12.2.2",
     "@release-it/conventional-changelog": "5.0.0",
     "@testing-library/dom": "8.16.0",

pages/_app.tsx

@@ -1,7 +1,9 @@
 import type { ReactElement, ReactNode } from "react";
 import { AdaptUIProvider } from "@adaptui/react-tailwind";
+import { MDXProvider } from "@mdx-js/react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
+import { mdxComponents } from "utils";
 
 import "@/styles/global.css";
 import "@/styles/nextra.css";
@@ -19,7 +21,9 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 
   return getLayout(
     <AdaptUIProvider>
-      <Component {...pageProps} />
+      <MDXProvider components={mdxComponents}>
+        <Component {...pageProps} />
+      </MDXProvider>
     </AdaptUIProvider>,
   );
 }