feat: dynamic theme with jotai

mehdibha · Oct 24, 2024 · c5be5b8 · c5be5b8
1 parent 381510f
commit c5be5b8
Show file tree

Hide file tree

Showing 33 changed files with 860 additions and 1,135 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/www/package.json b/www/package.json
@@ -39,7 +39,11 @@
     "fumadocs-ui": "^13.4.10",
     "geist": "^1.2.2",
     "hast-util-to-string": "^3.0.1",
+    "immer": "^10.1.1",
+    "jotai": "^2.10.1",
+    "jotai-immer": "^0.4.1",
     "lucide-react": "^0.311.0",
+    "nanoid": "^5.0.7",
     "next": "14.2.14",
     "next-mdx-remote": "^4.4.1",
     "next-themes": "^0.2.1",

diff --git a/www/public/android-chrome-192x192.png b/www/public/android-chrome-192x192.png
diff --git a/www/public/apple-touch-icon.png b/www/public/apple-touch-icon.png
diff --git a/www/public/favicon-16x16.png b/www/public/favicon-16x16.png
diff --git a/www/public/favicon-32x32.png b/www/public/favicon-32x32.png
diff --git a/www/public/favicon.ico b/www/public/favicon.ico
diff --git a/www/src/__icons__/create-icon.tsx b/www/src/__icons__/create-icon.tsx
@@ -1,12 +1,12 @@
 import React, { forwardRef } from "react";
-import { useConfig } from "@/hooks/use-config";
 
 export const createIcon = (icons: {
   lucide: React.ElementType;
   remix: React.ElementType;
 }) => {
   const Icon = forwardRef<HTMLElement, { className?: string }>((props, ref) => {
-    const { iconLibrary } = useConfig();
+    // TODO: get icon library from config
+    const iconLibrary = "lucide";
     const IconComponent = icons[iconLibrary as keyof typeof icons];
     if (!IconComponent) {
       return null;

diff --git a/www/src/app/apple-icon.png b/www/src/app/apple-icon.png
diff --git a/www/src/app/favicon.ico b/www/src/app/favicon.ico
diff --git a/www/src/app/layout.tsx b/www/src/app/layout.tsx
@@ -25,12 +25,6 @@ export const metadata: Metadata = {
   keywords: config.keywords,
   authors: config.authors,
   creator: config.creator,
-  icons: {
-    icon: "/favicon.ico",
-    shortcut: "/favicon-16x16.png",
-    apple: "/apple-touch-icon.png",
-  },
-  manifest: "/site.webmanifest",
   openGraph: {
     type: "website",
     locale: "en_US",

diff --git a/www/src/app/providers.tsx b/www/src/app/providers.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import { Provider as JotaiProvider } from "jotai";
 import { ThemeProvider } from "next-themes";
 import { RouterProvider } from "react-aria-components";
 
@@ -15,17 +16,19 @@ declare module "react-aria-components" {
 export function Providers({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   return (
-    <RouterProvider navigate={router.push}>
-      <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-        disableTransitionOnChange
-      >
-        <div drawer-wrapper="" className="bg-bg">
-          {children}
-        </div>
-      </ThemeProvider>
-    </RouterProvider>
+    <JotaiProvider>
+      <RouterProvider navigate={router.push}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div drawer-wrapper="" className="bg-bg">
+            {children}
+          </div>
+        </ThemeProvider>
+      </RouterProvider>
+    </JotaiProvider>
   );
 }
diff --git a/www/src/app/themes/clone-theme.tsx b/www/src/app/themes/clone-theme.tsx
@@ -1,30 +1,63 @@
+import React from "react";
+import { useThemes } from "@/hooks/use-themes";
+import { Button } from "@/registry/ui/default/core/button";
+import {
+  DialogRoot,
+  Dialog,
+  DialogFooter,
+} from "@/registry/ui/default/core/dialog";
+import { Form } from "@/registry/ui/default/core/form";
+import { TextField } from "@/registry/ui/default/core/text-field";
+
 export const CloneThemeDialog = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
+  const [name, setName] = React.useState("");
+  const { cloneTheme, currentThemeId } = useThemes();
   return (
     <DialogRoot>
       {children}
       <Dialog title="Clone theme">
         {({ close }) => (
-          <>
-            <TextField label="Name" className="w-full" />
+          <Form
+            onSubmit={(e) => {
+              e.preventDefault();
+              cloneTheme(currentThemeId, { name });
+              setName("");
+              close();
+            }}
+          >
+            <TextField
+              autoFocus
+              label="Name"
+              isRequired
+              value={name}
+              onChange={setName}
+              className="w-full"
+            />
             <DialogFooter>
-              <Button variant="outline" size="sm" onPress={close}>
-                Cancel
-              </Button>
               <Button
-                variant="primary"
+                variant="outline"
                 size="sm"
                 onPress={() => {
+                  setName("");
                   close();
                 }}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="sm"
+                isDisabled={!name}
               >
                 Save theme
               </Button>
             </DialogFooter>
-          </>
+          </Form>
         )}
       </Dialog>
     </DialogRoot>

diff --git a/www/src/app/themes/copy-theme.tsx b/www/src/app/themes/copy-theme.tsx
@@ -0,0 +1,16 @@
+import { Dialog, DialogRoot } from "@/registry/ui/default/core/dialog";
+
+export const CopyThemeDialog = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <DialogRoot>
+      {children}
+      <Dialog title="Copy theme">
+        <p>code here</p>
+      </Dialog>
+    </DialogRoot>
+  );
+};
diff --git a/www/src/app/themes/create-theme.tsx b/www/src/app/themes/create-theme.tsx
@@ -1,41 +1,66 @@
 "use client";
 
 import React from "react";
+import { useThemes } from "@/hooks/use-themes";
 import { Button } from "@/registry/ui/default/core/button";
 import {
   Dialog,
   DialogFooter,
   DialogRoot,
 } from "@/registry/ui/default/core/dialog";
+import { Form } from "@/registry/ui/default/core/form";
 import { TextField } from "@/registry/ui/default/core/text-field";
 
 export const CreateThemeDialog = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
+  const [name, setName] = React.useState("");
+  const { createTheme } = useThemes();
+
   return (
     <DialogRoot>
       {children}
       <Dialog title="Create new theme">
         {({ close }) => (
-          <>
-            <TextField label="Name" className="w-full" />
+          <Form
+            onSubmit={(e) => {
+              e.preventDefault();
+              createTheme({ name });
+              setName("");
+              close();
+            }}
+          >
+            <TextField
+              autoFocus
+              label="Name"
+              isRequired
+              value={name}
+              onChange={setName}
+              className="w-full"
+            />
             <DialogFooter>
-              <Button variant="outline" size="sm" onPress={close}>
-                Cancel
-              </Button>
               <Button
-                variant="primary"
+                variant="outline"
                 size="sm"
                 onPress={() => {
+                  setName("");
                   close();
                 }}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="sm"
+                isDisabled={!name}
               >
                 Save theme
               </Button>
             </DialogFooter>
-          </>
+          </Form>
         )}
       </Dialog>
     </DialogRoot>