packages/ui: Add code components

apps/dashboard/knip.json

@@ -15,7 +15,8 @@
 		"fast-xml-parser",
 		"@workspace/ui",
 		"tailwindcss-animate",
-		"@radix-ui/react-tooltip"
+		"@radix-ui/react-tooltip",
+		"shiki"
 	],
 	"next": true,
 	"project": ["src/**"]

apps/dashboard/src/@/components/ui/code/code.client.tsx

@@ -1,71 +1,3 @@
 "use client";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import type { BundledLanguage } from "shiki";
-import { getCodeHtml } from "./getCodeHtml";
-import { PlainTextCodeBlock } from "./plaintext-code";
-import { RenderCode } from "./RenderCode";
 
-export type CodeProps = {
-  code: string;
-  lang: BundledLanguage;
-  className?: string;
-  scrollableClassName?: string;
-  keepPreviousDataOnCodeChange?: boolean;
-  copyButtonClassName?: string;
-  scrollableContainerClassName?: string;
-  shadowColor?: string;
-  ignoreFormattingErrors?: boolean;
-  onCopy?: (code: string) => void;
-};
-
-export const CodeClient: React.FC<CodeProps> = ({
-  code,
-  lang,
-  className,
-  scrollableClassName,
-  keepPreviousDataOnCodeChange = false,
-  copyButtonClassName,
-  ignoreFormattingErrors,
-  scrollableContainerClassName,
-  shadowColor,
-  onCopy,
-}) => {
-  const codeQuery = useQuery({
-    placeholderData: keepPreviousDataOnCodeChange
-      ? keepPreviousData
-      : undefined,
-    queryFn: () =>
-      getCodeHtml(code, lang, {
-        ignoreFormattingErrors: ignoreFormattingErrors,
-      }),
-    queryKey: ["html", code],
-    retry: false,
-  });
-
-  if (!codeQuery.data) {
-    return (
-      <PlainTextCodeBlock
-        className={className}
-        code={code}
-        copyButtonClassName={copyButtonClassName}
-        onCopy={onCopy}
-        scrollableClassName={scrollableClassName}
-        scrollableContainerClassName={scrollableContainerClassName}
-        shadowColor={shadowColor}
-      />
-    );
-  }
-
-  return (
-    <RenderCode
-      className={className}
-      code={codeQuery.data.formattedCode}
-      copyButtonClassName={copyButtonClassName}
-      html={codeQuery.data.html}
-      onCopy={onCopy}
-      scrollableClassName={scrollableClassName}
-      scrollableContainerClassName={scrollableContainerClassName}
-      shadowColor={shadowColor}
-    />
-  );
-};
+export { CodeClient } from "@workspace/ui/components/code/code.client";

apps/dashboard/src/@/components/ui/code/code.server.tsx

@@ -1,22 +1,4 @@
-import type { BundledLanguage } from "shiki";
-import { getCodeHtml } from "./getCodeHtml";
-import { RenderCode } from "./RenderCode";
-
-export type CodeProps = {
-  code: string;
-  lang: BundledLanguage;
-  className?: string;
-  ignoreFormattingErrors?: boolean;
-};
-
-export const CodeServer: React.FC<CodeProps> = async ({
-  code,
-  lang,
-  className,
-  ignoreFormattingErrors,
-}) => {
-  const { html, formattedCode } = await getCodeHtml(code, lang, {
-    ignoreFormattingErrors,
-  });
-  return <RenderCode className={className} code={formattedCode} html={html} />;
-};
+export {
+  type CodeProps,
+  CodeServer,
+} from "@workspace/ui/components/code/code.server";

apps/dashboard/src/@/components/ui/code/plaintext-code.tsx

@@ -1,29 +1 @@
-import { cn } from "@/lib/utils";
-import { CodeBlockContainer } from "./CodeBlockContainer";
-
-export function PlainTextCodeBlock(props: {
-  code: string;
-  copyButtonClassName?: string;
-  className?: string;
-  scrollableClassName?: string;
-  codeClassName?: string;
-  scrollableContainerClassName?: string;
-  shadowColor?: string;
-  onCopy?: (code: string) => void;
-}) {
-  return (
-    <CodeBlockContainer
-      className={props.className}
-      codeToCopy={props.code}
-      copyButtonClassName={props.copyButtonClassName}
-      onCopy={props.onCopy}
-      scrollableClassName={props.scrollableClassName}
-      scrollableContainerClassName={props.scrollableContainerClassName}
-      shadowColor={props.shadowColor}
-    >
-      <code className={cn("block whitespace-pre", props.codeClassName)}>
-        {props.code}
-      </code>
-    </CodeBlockContainer>
-  );
-}
+export { PlainTextCodeBlock } from "@workspace/ui/components/code/plaintext-code";

apps/playground-web/knip.json

@@ -5,7 +5,8 @@
     "server-only",
     "@workspace/ui",
     "tailwindcss-animate",
-    "@radix-ui/react-tooltip"
+    "@radix-ui/react-tooltip",
+    "prettier"
   ],
   "next": true,
   "project": ["src/**"]

apps/playground-web/src/app/insight/[blueprint_slug]/blueprint-playground.client.tsx

@@ -17,7 +17,7 @@ import {
   useForm,
 } from "react-hook-form";
 import { z } from "zod";
-import { CodeClient, CodeLoading } from "@/components/code/code.client";
+import { CodeClient } from "@/components/code/code.client";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Form, FormField, FormItem, FormMessage } from "@/components/ui/form";
@@ -724,7 +724,6 @@ function ResponseSection(props: {
           className="rounded-none border-none bg-transparent"
           code={formattedData || ""}
           lang="json"
-          loader={<CodeLoading />}
           scrollableClassName="h-full"
           scrollableContainerClassName="h-full"
           // shadowColor="hsl(var(--muted)/50%)"

apps/playground-web/src/app/payments/components/CodeGen.tsx

@@ -1,19 +1,26 @@
 import { lazy, Suspense } from "react";
-import { CodeLoading } from "../../../components/code/code.client";
+import { LoadingDots } from "../../../components/ui/LoadingDots";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
 
-const CodeClient = lazy(() => import("../../../components/code/code.client"));
+const CodeClient = lazy(() =>
+  import("../../../components/code/code.client").then((m) => ({
+    default: m.CodeClient,
+  })),
+);
+
+function CodeLoading() {
+  return (
+    <div className="flex min-h-[300px] grow items-center justify-center bg-card border rounded-lg">
+      <LoadingDots />
+    </div>
+  );
+}
 
 export function CodeGen(props: { options: BridgeComponentsPlaygroundOptions }) {
   return (
     <div className="flex w-full grow flex-col">
       <Suspense fallback={<CodeLoading />}>
-        <CodeClient
-          className="grow"
-          code={getCode(props.options)}
-          lang="tsx"
-          loader={<CodeLoading />}
-        />
+        <CodeClient className="grow" code={getCode(props.options)} lang="tsx" />
       </Suspense>
     </div>
   );

apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-code.tsx

@@ -1,4 +1,4 @@
-import { Code } from "../../../../components/code/code";
+import { CodeServer } from "@/components/code/code";
 import { airdropExample } from "../constants";
 
 export function AirdropCode() {
@@ -15,7 +15,7 @@ export function AirdropCode() {
       <h3 className="mb-2 font-semibold text-xl tracking-tight">
         Send Airdrop Transaction Request
       </h3>
-      <Code code={engineAirdropSendCode} lang="typescript" />
+      <CodeServer code={engineAirdropSendCode} lang="typescript" />
 
       <div className="h-8" />
 
@@ -28,7 +28,7 @@ export function AirdropCode() {
           of the transaction using the following code.
         </p>
       </div>
-      <Code code={engineAirdropGetStatus} lang="typescript" />
+      <CodeServer code={engineAirdropGetStatus} lang="typescript" />
     </div>
   );
 }

apps/playground-web/src/app/transactions/mint-tokens/_components/mint-code.tsx

@@ -1,4 +1,4 @@
-import { Code } from "../../../../components/code/code";
+import { CodeServer } from "@/components/code/code";
 import { mintExample } from "../constants";
 
 export function MintCode() {
@@ -15,7 +15,7 @@ export function MintCode() {
       <h3 className="mb-2 font-semibold text-xl tracking-tight">
         Send Transaction Request to Mint Dynamic NFTs
       </h3>
-      <Code code={engineMintCode} lang="typescript" />
+      <CodeServer code={engineMintCode} lang="typescript" />
 
       <div className="h-8" />
 
@@ -28,7 +28,7 @@ export function MintCode() {
           the transaction using the following code.
         </p>
       </div>
-      <Code code={getEngineStatusCode} lang="typescript" />
+      <CodeServer code={getEngineStatusCode} lang="typescript" />
     </div>
   );
 }

apps/playground-web/src/app/transactions/webhooks/_components/webhooks-preview.tsx

@@ -19,8 +19,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import CodeClient from "../../../../components/code/code.client";
-import { LoadingDots } from "../../../../components/ui/LoadingDots";
+import { CodeClient } from "../../../../components/code/code.client";
 import { Label } from "../../../../components/ui/label";
 import { Spinner } from "../../../../components/ui/Spinner";
 import { THIRDWEB_CLIENT } from "../../../../lib/client";
@@ -147,11 +146,6 @@ export function EngineWebhooksPreview() {
               className="grow rounded-none border-none"
               code={JSON.stringify(engineTxStatusQuery.data, null, 2)}
               lang="json"
-              loader={
-                <div className="flex grow items-center justify-center">
-                  <LoadingDots />
-                </div>
-              }
               scrollableContainerClassName="h-full"
             />
           </div>

apps/playground-web/src/app/wallets/sign-in/components/CodeGen.tsx

@@ -1,11 +1,21 @@
 import { lazy, Suspense } from "react";
-import { CodeLoading } from "../../../../components/code/code.client";
+import { LoadingDots } from "../../../../components/ui/LoadingDots";
 import type { ConnectPlaygroundOptions } from "./types";
 
-const CodeClient = lazy(
-  () => import("../../../../components/code/code.client"),
+const CodeClient = lazy(() =>
+  import("../../../../components/code/code.client").then((m) => ({
+    default: m.CodeClient,
+  })),
 );
 
+function CodeLoading() {
+  return (
+    <div className="flex min-h-[300px] grow items-center justify-center rounded-lg border bg-card">
+      <LoadingDots />
+    </div>
+  );
+}
+
 export function CodeGen(props: { connectOptions: ConnectPlaygroundOptions }) {
   return (
     <div className="flex w-full grow flex-col">
@@ -14,8 +24,6 @@ export function CodeGen(props: { connectOptions: ConnectPlaygroundOptions }) {
           className="xl:h-[calc(100vh-100px)]"
           code={getCode(props.connectOptions)}
           lang="tsx"
-          // Need to add max-h in both places - TODO figure out a better way
-          loader={<CodeLoading />}
           scrollableClassName="xl:h-[calc(100vh-100px)]"
         />
       </Suspense>

apps/playground-web/src/components/account-abstraction/5792-get-capabilities.tsx

@@ -8,7 +8,7 @@ import {
 } from "thirdweb/react";
 import { createWallet, inAppWallet } from "thirdweb/wallets";
 import { THIRDWEB_CLIENT } from "../../lib/client";
-import CodeClient from "../code/code.client";
+import { CodeClient } from "../code/code.client";
 
 export function Eip5792GetCapabilitiesPreview() {
   const capabilities = useCapabilities();
@@ -48,7 +48,6 @@ export function Eip5792GetCapabilitiesPreview() {
               className="max-h-[500px] w-[400px] overflow-y-auto"
               code={JSON.stringify(capabilities.data, null, 2)}
               lang="json"
-              loader={<div className="mt-24 w-full">Loading...</div>}
               scrollableClassName="h-full"
               scrollableContainerClassName="h-full"
             />

apps/playground-web/src/components/code/code-example.tsx

@@ -2,7 +2,7 @@ import { Code2Icon, EyeIcon } from "lucide-react";
 import type { JSX } from "react";
 import type { BundledLanguage } from "shiki";
 import { ClientOnly } from "../ClientOnly";
-import { Code } from "./code";
+import { CodeServer } from "./code";
 
 type CodeExampleProps = {
   preview: JSX.Element;
@@ -35,7 +35,7 @@ export const CodeExample: React.FC<CodeExampleProps> = ({
       <div className="grid grid-cols-1 overflow-hidden rounded-lg border bg-card md:grid-cols-2">
         <div className="flex grow flex-col border-b md:border-r md:border-b-0">
           <TabName icon={Code2Icon} name="Code" />
-          <Code
+          <CodeServer
             className="h-full rounded-none border-none"
             code={code}
             lang={lang}