feat: add ability to customize border radius in ui demo (#785)

* feat: add ability to customize border radius in ui demo * fix: remove indent * fix: remove unused variables * fix: export shared functions * fix: move whitespace
alchemyplatform · Jul 30, 2024 · b12c1f6 · b12c1f6
1 parent ae16bd6
commit b12c1f6
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 35 deletions.
diff --git a/account-kit/react/src/tailwind/components/border-vars.ts b/account-kit/react/src/tailwind/components/border-vars.ts
@@ -1,27 +1,30 @@
 import type { AccountKitTheme, ComponentDef } from "../types";
 import { getBorderRadiusBaseVariableName } from "../utils.js";
 
-export const borderRadiusVariables = (theme: AccountKitTheme): ComponentDef => {
-  const { borderRadius } = theme;
-  const borderRadiusValue = (() => {
-    switch (borderRadius) {
-      case "lg":
-        return "24px";
-      case "md":
-        return "16px";
-      case "xs":
-        return "4px";
-      case "none":
-        return "0px";
-      case "sm":
-      default:
-        return "8px";
-    }
-  })();
+export function getBorderRadiusValue(
+  borderRadius: AccountKitTheme["borderRadius"]
+): string {
+  switch (borderRadius) {
+    case "lg":
+      return "24px";
+    case "md":
+      return "16px";
+    case "xs":
+      return "4px";
+    case "none":
+      return "0px";
+    case "sm":
+    default:
+      return "8px";
+  }
+}
 
+export function borderRadiusVariables(theme: AccountKitTheme): ComponentDef {
   return {
     ":root": {
-      [getBorderRadiusBaseVariableName()]: borderRadiusValue,
+      [getBorderRadiusBaseVariableName()]: getBorderRadiusValue(
+        theme.borderRadius
+      ),
     },
   };
-};
+}
diff --git a/account-kit/react/src/tailwind/index.ts b/account-kit/react/src/tailwind/index.ts
@@ -1,6 +1,11 @@
 import { accountKitUi } from "./plugin.js";
 export { getAccountKitContentPath, withAccountKitUi } from "./plugin.js";
 export type * from "./types.js";
-export { createColorSet, getColorVariableName } from "./utils.js";
+export {
+  createColorSet,
+  getColorVariableName,
+  getBorderRadiusBaseVariableName,
+} from "./utils.js";
+export { getBorderRadiusValue } from "./components/border-vars.js";
 
 export default accountKitUi;
diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
@@ -56,7 +56,7 @@ export default function Home() {
 
         {/* Content */}
         <div className="flex flex-1 gap-6 overflow-hidden">
-          <div className="flex flex-col  basis-0 flex-1 bg-white border border-border rounded-lg p-6 overflow-y-scroll">
+          <div className="flex flex-col  basis-0 flex-1 bg-white border border-border rounded-lg p-6 overflow-y-auto">
             <Configuration />
           </div>
           <div className="flex flex-col flex-[2] basis-0 relative bg-white border border-border rounded-lg">

diff --git a/examples/ui-demo/src/app/providers.tsx b/examples/ui-demo/src/app/providers.tsx
@@ -1,10 +1,12 @@
 "use client";
 import { sepolia } from "@aa-sdk/core";
 import { createConfig } from "@account-kit/core";
+import { getBorderRadiusBaseVariableName, getColorVariableName } from "@account-kit/react/tailwind"
 import { AlchemyAccountProvider, AlchemyAccountsProviderProps } from "@account-kit/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PropsWithChildren, Suspense, useEffect, useMemo, useState } from "react";
 import { Config, ConfigContext, DEFAULT_CONFIG } from "./state";
+import { getBorderRadiusValue } from "@account-kit/react/tailwind";
 
 const alchemyConfig = createConfig({
   // required
@@ -33,8 +35,10 @@ export const Providers = (props: PropsWithChildren<{}>) => {
     const root = document.querySelector(':root') as HTMLElement;
 
     const primaryColor = config.ui.primaryColor[config.ui.theme]
-    root?.style.setProperty("--akui-fg-accent-brand", primaryColor)
-    root?.style.setProperty("--akui-btn-primary", primaryColor)
+    root?.style.setProperty(getColorVariableName("fg-accent-brand"), primaryColor)
+    root?.style.setProperty(getColorVariableName("btn-primary"), primaryColor)
+
+    root?.style.setProperty(getBorderRadiusBaseVariableName(), getBorderRadiusValue(config.ui.borderRadius))
 
     if (config.ui.theme === 'dark') {
       root.classList.remove("light")

diff --git a/examples/ui-demo/src/app/state.tsx b/examples/ui-demo/src/app/state.tsx
@@ -1,3 +1,4 @@
+import { AccountKitTheme } from "@account-kit/react/tailwind";
 import { Dispatch, SetStateAction, createContext, useContext } from "react";
 
 export type Config = {
@@ -12,7 +13,7 @@ export type Config = {
             dark: string;
             light: string;
         }
-        borderRadius: 'none' | 'sm' | 'md' | 'lg';
+        borderRadius: AccountKitTheme['borderRadius'];
         illustrationStyle: 'outline' | 'linear' | 'filled' | 'flat';
         logoLight: {
             fileName: string;
@@ -39,7 +40,7 @@ export const DEFAULT_CONFIG: Config = {
             light: '#363FF9',
             dark: '#9AB7FF',
         },
-        borderRadius: 'none',
+        borderRadius: 'sm',
         illustrationStyle: 'outline',
         logoLight: undefined,
         logoDark: undefined,

diff --git a/examples/ui-demo/src/components/configuration/Styling.tsx b/examples/ui-demo/src/components/configuration/Styling.tsx
@@ -6,6 +6,7 @@ import { ThemeSwitch } from "../shared/ThemeSwitch";
 import { FileCode } from "lucide-react";
 import ExternalLink from "../shared/ExternalLink";
 import { IllustrationStyle } from "../icons/illustration-style";
+import { getBorderRadiusValue } from "@account-kit/react/tailwind";
 
 export function Styling({ className }: { className?: string }) {
   const { config, setConfig } = useConfig();
@@ -92,10 +93,10 @@ export function Styling({ className }: { className?: string }) {
 }
 
 const RADIUS_OPTIONS = [
-  { className: "rounded-none", label: "None", id: "none" as const },
-  { className: "rounded", label: "Small", id: "sm" as const },
-  { className: "rounded-md", label: "Medium", id: "md" as const },
-  { className: "rounded-lg", label: "Large", id: "lg" as const },
+  { label: "None", id: "none" as const },
+  { label: "Small", id: "sm" as const },
+  { label: "Medium", id: "md" as const },
+  { label: "Large", id: "lg" as const },
 ];
 
 export function CornerRadiusOptions() {
@@ -120,14 +121,13 @@ export function CornerRadiusOptions() {
     <div className="flex self-stretch gap-3">
       {RADIUS_OPTIONS.map((option) => (
         <button
-          className={`${
-            option.className
-          } py-2 flex-1 basis-0 bg-[#EFF4F9] text-[#363FF9] hover:opacity-80 ${
+          className={`py-2 flex-1 basis-0 bg-[#EFF4F9] text-[#363FF9] hover:opacity-80 ${
             option.id === borderRadius
               ? "border-2 border-[rgba(0, 0, 0, 0.01)]"
               : "border-2 border-white"
           }`}
           style={{
+            borderRadius: getBorderRadiusValue(option.id),
             boxShadow:
               option.id === borderRadius
                 ? "0px 0px 4px 0px rgba(36, 0, 255, 0.7)"
@@ -148,7 +148,7 @@ const options = ["outline", "linear", "filled", "flat"] as const;
 function IllustrationStyleOptions() {
   const {
     config: {
-      ui: { illustrationStyle, primaryColor, theme },
+      ui: { illustrationStyle },
     },
     setConfig,
   } = useConfig();

diff --git a/examples/ui-demo/src/components/preview/CodePreview.tsx b/examples/ui-demo/src/components/preview/CodePreview.tsx
@@ -2,7 +2,7 @@ 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 { Config, DEFAULT_CONFIG, useConfig } from "@/src/app/state";
 import dedent from "dedent";
 import { Check, Copy } from "lucide-react";
 import { useState } from "react";
@@ -80,7 +80,8 @@ function getTailwindCode(config: Config) {
     colors: {
       "btn-primary": createColorSet("${ui.primaryColor.light}", "${ui.primaryColor.dark}"),
       "fg-accent-brand": createColorSet("${ui.primaryColor.light}", "${ui.primaryColor.dark}"),
-    },
+    },${ui.borderRadius !== DEFAULT_CONFIG.ui.borderRadius ? `
+    borderRadius: "${ui.borderRadius}",` : ''}
   })`;
 }