Integrate @cartridge/ui-next to keychain

packages/keychain/package.json

@@ -20,6 +20,7 @@
     "@cartridge/controller": "workspace:^",
     "@cartridge/penpal": "^6.2.3",
     "@cartridge/ui": "workspace:^",
+    "@cartridge/ui-next": "workspace:^",
     "@cartridge/utils": "workspace:^",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -66,6 +67,7 @@
     "@types/js-cookie": "^3.0.2",
     "@types/node": "^20.6.0",
     "@types/react-dom": "^18.2.7",
+    "autoprefixer": "^10.4.18",
     "concurrently": "^9.0.1",
     "eslint": "^8.23.0",
     "eslint-config-next": "^12.2.5",
@@ -74,8 +76,10 @@
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "playwright": "^1.47.1",
+    "postcss": "^8.4.35",
     "prettier": "^2.7.1",
     "storybook": "^8.2.9",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "wait-on": "^8.0.1"
   },

packages/keychain/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/keychain/src/components/Provider/index.tsx

@@ -35,7 +35,7 @@ export function Provider({ children }: PropsWithChildren) {
     <ChakraProvider theme={chakraTheme}>
       <CartridgeAPIProvider url={ENDPOINT}>
         <QueryClientProvider client={queryClient}>
-          <ControllerThemeProvider value={controllerTheme}>
+          <ControllerThemeProvider value={controllerTheme} theme={preset}>
             <ConnectionProvider value={connection}>
               <PostHogProvider client={posthog}>{children}</PostHogProvider>
             </ConnectionProvider>

packages/keychain/src/components/connect/Upgrade.tsx

@@ -18,9 +18,9 @@ export const Upgrade = () => {
       executionError={upgrade.error}
     >
       <Content>
-        <Text color="text.secondary" fontSize="sm" pb="10px">
+        <div className="text-sm text-muted-foreground pb-2">
           Install the latest to continue
-        </Text>
+        </div>
         <VStack
           w="full"
           align="left"

packages/keychain/src/hooks/theme.tsx

@@ -5,6 +5,7 @@ import {
   defaultPresets,
 } from "@cartridge/controller";
 import { CartridgeTheme } from "@cartridge/ui";
+import { useThemeEffect } from "@cartridge/ui-next";
 import { useColorMode } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import {
@@ -18,15 +19,18 @@ import {
 const ControllerThemeContext = createContext<ControllerTheme>(undefined);
 
 export function ControllerThemeProvider({
+  theme,
   value,
   children,
-}: ProviderProps<ControllerTheme>) {
+}: ProviderProps<ControllerTheme> & { theme: ControllerThemePreset }) {
   const { setColorMode } = useColorMode();
 
   useEffect(() => {
     setColorMode(value.colorMode);
   }, [setColorMode, value.colorMode]);
 
+  useThemeEffect({ theme, assetUrl: "/" });
+
   return (
     <ControllerThemeContext.Provider value={value}>
       {children}

packages/keychain/src/index.css

@@ -0,0 +1,7 @@
+@import "@cartridge/ui-next/dist/themes/default.css";
+@import "@cartridge/ui-next/dist/themes/dark.css";
+@import "@cartridge/ui-next/dist/themes/fonts.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/keychain/src/pages/_app.tsx

@@ -6,6 +6,8 @@ import { useEffect } from "react";
 import { Provider } from "components/Provider";
 import { ErrorBoundary } from "components/ErrorBoundary";
 
+import "../index.css";
+
 const inter = Inter({ subsets: ["latin"] });
 const ibmPlexMono = IBM_Plex_Mono({
   weight: "600",

packages/keychain/tailwind.config.ts

@@ -0,0 +1,22 @@
+import { cartridgeTWPreset } from "@cartridge/ui-next/preset";
+import { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/**/*.{html,ts,tsx}",
+    "./node_modules/@cartridge/ui-next/dist/**/*.{js,jsx}",
+  ],
+  presets: [cartridgeTWPreset],
+  theme: {
+    extend: {
+      width: {
+        desktop: "432px",
+      },
+      height: {
+        desktop: "600px",
+      },
+    },
+  },
+};
+
+export default config;

packages/profile/src/components/context/theme.tsx

@@ -1,12 +1,7 @@
 import { ControllerThemePreset, defaultPresets } from "@cartridge/controller";
+import { useThemeEffect } from "@cartridge/ui-next";
 import { hexToHsl } from "@cartridge/utils";
-import {
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { createContext, useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
 type ColorScheme = "dark" | "light" | "system";
@@ -64,13 +59,6 @@ export function ThemeProvider({
     },
     [storageKey],
   );
-
-  const appliedColorMode = useMemo(() => {
-    return document.documentElement.className.includes("dark")
-      ? "dark"
-      : "light";
-  }, []);
-
   const [theme, setTheme] = useState<ControllerThemePreset>(initialState.theme);
   const themeParam = searchParams.get("theme");
 
@@ -80,7 +68,13 @@ export function ThemeProvider({
     setTheme(JSON.parse(decodeURIComponent(themeParam)));
   }, [themeParam]);
 
+  useThemeEffect({ theme, assetUrl: import.meta.env.VITE_KEYCHAIN_URL });
+
   useEffect(() => {
+    const appliedColorMode = document.documentElement.className.includes("dark")
+      ? "dark"
+      : "light";
+
     document.documentElement.style.setProperty(
       "--theme-icon-url",
       `url("${import.meta.env.VITE_KEYCHAIN_URL}${theme.icon}")`,
@@ -113,7 +107,7 @@ export function ThemeProvider({
         hexToHsl(val),
       );
     }
-  }, [theme, appliedColorMode]);
+  }, [theme]);
 
   const value = {
     colorScheme,

packages/ui-next/src/hooks.ts

@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import { hexToHsl } from "@cartridge/utils";
+
+export function useThemeEffect({
+  theme,
+  assetUrl,
+}: {
+  theme: ControllerThemePreset;
+  assetUrl: string;
+}) {
+  useEffect(() => {
+    const appliedColorMode = document.documentElement.className.includes("dark")
+      ? "dark"
+      : "light";
+
+    document.documentElement.style.setProperty(
+      "--theme-icon-url",
+      `url("${assetUrl}${theme.icon}")`,
+    );
+    const coverUrl =
+      typeof theme.cover === "string"
+        ? `url("${assetUrl}${theme.cover}")`
+        : `url("${assetUrl}${theme.cover[appliedColorMode]}")`;
+    document.documentElement.style.setProperty("--theme-cover-url", coverUrl);
+
+    if (!theme.colors) return;
+
+    if (theme.colors?.primary) {
+      const val =
+        typeof theme.colors.primary === "string"
+          ? theme.colors?.primary
+          : theme.colors?.primary[appliedColorMode];
+      document.documentElement.style.setProperty("--primary", hexToHsl(val));
+    }
+
+    if (theme.colors?.primaryForeground) {
+      const val =
+        typeof theme.colors.primaryForeground === "string"
+          ? theme.colors?.primaryForeground
+          : theme.colors?.primaryForeground[appliedColorMode];
+      document.documentElement.style.setProperty(
+        "--primary-foreground",
+        hexToHsl(val),
+      );
+    }
+  }, [theme, assetUrl]);
+}
+
+// dup of @cartridge/controller/types
+type ColorMode = "light" | "dark";
+type ControllerTheme = {
+  id: string;
+  name: string;
+  icon: string;
+  cover: ThemeValue<string>;
+  colorMode: ColorMode;
+};
+type ControllerThemePreset = Omit<ControllerTheme, "colorMode"> & {
+  colors?: ControllerColors;
+};
+type ControllerColors = {
+  primary?: ControllerColor;
+  primaryForeground?: ControllerColor;
+};
+type ControllerColor = ThemeValue<string>;
+type ThemeValue<T> =
+  | T
+  | {
+      dark: T;
+      light: T;
+    };

packages/ui-next/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./components";
+export * from "./hooks";
 export * from "./utils";

packages/ui-next/tsconfig.json

@@ -11,6 +11,7 @@
   },
   "include": [
     "src/components/**/*",
+    "src/hooks.ts",
     "src/index.ts",
     "src/preset.ts",
     "src/utils.ts",