feat: add code preview snippets (#760)

* feat: hook up color and theme variables

* feat: remove app dark mode

* feat: add code snippets

* feat: add tailwind comment and default config

* feat: add dedent package

examples/ui-demo/package.json

@@ -16,6 +16,7 @@
     "@uiw/react-color": "^2.3.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dedent": "^1.5.3",
     "lucide-react": "^0.394.0",
     "next": "14.2.3",
     "react": "^18",

examples/ui-demo/src/app/state.tsx

@@ -22,7 +22,7 @@ export type Config = {
     }
 }
 
-type ConfigType = { config: Config; setConfig: Dispatch<SetStateAction<Config>>}
+export type ConfigContextType = { config: Config; setConfig: Dispatch<SetStateAction<Config>>}
 
 export const DEFAULT_CONFIG: Config = {
     auth: {
@@ -40,12 +40,12 @@ export const DEFAULT_CONFIG: Config = {
     },
 }
 
-export const ConfigContext = createContext<ConfigType>({
+export const ConfigContext = createContext<ConfigContextType>({
     config: DEFAULT_CONFIG,
     setConfig: () => undefined,
 });
 
-export function useConfig(): ConfigType {
+export function useConfig(): ConfigContextType {
     const configContext = useContext(ConfigContext);
 
     if (!configContext) {

examples/ui-demo/src/components/configuration/Authentication.tsx

@@ -5,11 +5,30 @@ import { MailIcon } from "../icons/mail"
 import { WalletIcon } from "../icons/wallet"
 import { SocialIcon } from "../icons/social"
 import { BiometricIcon } from "../icons/biometric"
+import { useConfig } from "@/src/app/state"
 
 export const Authentication = ({ className }: { className?: string }) => {
-  const [emailActive, setEmailActive] = useState(true)
-  const [walletsActive, setWalletsActive] = useState(false)
-  const [passkeysActive, setPasskeysActive] = useState(false)
+  const { config, setConfig } = useConfig()
+
+  const setWalletsActive = (active: boolean) => {
+    setConfig((prev) => ({
+      ...prev,
+      auth: {
+        ...prev.auth,
+        showExternalWallets: active
+      }
+    }))
+  }
+
+  const setPasskeysActive = (active: boolean) => {
+    setConfig((prev) => ({
+      ...prev,
+      auth: {
+        ...prev.auth,
+        addPasskey: active
+      }
+    }))
+  }
 
   return (
     <div className={cn('flex flex-col gap-6', className)}>
@@ -18,13 +37,13 @@ export const Authentication = ({ className }: { className?: string }) => {
         <AuthMethod
           icon={<MailIcon />}
           name="Email"
-          active={emailActive}
+          active={config.auth.showEmail}
           disabled
         />
         <AuthMethod
           icon={<WalletIcon />}
           name="External wallets"
-          active={walletsActive}
+          active={config.auth.showExternalWallets}
           setActive={setWalletsActive}
         />
         <AuthMethod
@@ -40,7 +59,7 @@ export const Authentication = ({ className }: { className?: string }) => {
           icon={<BiometricIcon />}
           name="Add passkey on signup"
           details={<p className="text-xs font-secondary-foreground">Prompt users to add a passkey after signing up with <span className="font-bold">email</span> or <span className="font-bold">social auth</span></p>}
-          active={passkeysActive}
+          active={config.auth.addPasskey}
           setActive={setPasskeysActive}
         />
       </div>

examples/ui-demo/src/components/preview/CodePreview.tsx

@@ -2,12 +2,15 @@ import { cn } from "@/lib/utils";
 import ExternalLink from "../shared/ExternalLink";
 
 import { Roboto_Mono } from "next/font/google";
+import { Config, useConfig } from "@/src/app/state";
+import dedent from "dedent";
 const robotoMono = Roboto_Mono({
   subsets: ["latin"],
   display: "swap",
 });
 
 export function CodePreview() {
+  const { config } = useConfig()
   return (
     <div className="flex flex-col gap-6 p-6 overflow-y-auto">
       <div className="flex flex-col gap-2">
@@ -25,11 +28,11 @@ export function CodePreview() {
       </div>
       <div className="flex flex-col gap-4">
         <div className="font-semibold text-secondary">Style</div>
-        <CodeBlock title="tailwind.config.ts" code={styleCode} />
+        <CodeBlock title="tailwind.config.ts" code={getTailwindCode(config)} />
       </div>
       <div className="flex flex-col gap-4">
         <div className="font-semibold text-secondary">Config</div>
-        <CodeBlock title="src/app/page.tsx" code={styleCode} />
+        <CodeBlock title="src/app/config.ts" code={getConfigCode(config)} />
       </div>
     </div>
   );
@@ -50,9 +53,51 @@ function CodeBlock({ title, code }: { title: string; code: string }) {
   );
 }
 
-const styleCode = `import { withAccountKitUi } from "@alchemy/aa-alchemy/tailwind";
-import type { Config } from "tailwindcss";
 
-const config: Config = <your tailwind config>;
-export default withAccountKitUi(config);
-`;
+function getTailwindCode(config: Config) {
+  const { ui } = config
+  // TODO: separate primaryColor for light and dark mode
+  return dedent`
+  import { withAccountKitUi, createColorSet } from "@alchemy/aa-alchemy/tailwind";
+  import type { Config } from "tailwindcss";
+
+  // wrap your existing tailwind config with 'withAccountKitUi'
+  // docs on setting up tailwind here: https://tailwindcss.com/docs/installation
+  export default withAccountKitUi(<your tailwind config>, {
+    // override account kit themes
+    colors: {
+      "btn-primary": createColorSet("${ui.primaryColor}", "${ui.primaryColor}"),
+      "fg-accent-brand": createColorSet("${ui.primaryColor}", "${ui.primaryColor}"),
+    },
+  })`;
+}
+
+function getConfigCode(config: Config) {
+  const sections = []
+
+  if (config.auth.showEmail) {
+    sections.push([{ type: "email" }])
+  }
+
+  if (config.auth.showExternalWallets) {
+    sections.push([{ type: "injected" }])
+  }
+
+  sections.push([{ type: "passkey" }])
+
+  return dedent`
+  const config = createConfig({
+    // required
+    rpcUrl: "/api/rpc",
+    chain: sepolia,
+    ssr: true,
+  });
+  
+  const uiConfig = {
+    auth: {
+      sections: ${JSON.stringify(sections)},
+      addPasskeyOnSignup: ${config.auth.addPasskey},
+    },
+  };
+`
+}

yarn.lock

@@ -12019,7 +12019,7 @@ dedent@0.7.0, dedent@^0.7.0:
   resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
-dedent@^1.5.1:
+dedent@^1.5.1, dedent@^1.5.3:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-1.5.3.tgz#99aee19eb9bae55a67327717b6e848d0bf777e5a"
   integrity sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==