v1.4.0-alpha.2

Author: programming-with-ia

.gitattributes

@@ -0,0 +1 @@
+/app export-ignore

.npmignore

@@ -13,3 +13,4 @@ tempCodeRunnerFile.*
 .release-it.json
 .github
 .vscode
+.gitattributes

rollup.config.js

@@ -25,12 +25,12 @@ export default [
       {
         file: packageJson.main,
         format: "cjs",
-        sourcemap: true,
+        // sourcemap: true,
       },
       {
         file: packageJson.module,
         format: "esm",
-        sourcemap: true,
+        // sourcemap: true,
       },
 
     ],
@@ -61,4 +61,12 @@ export default [
     plugins: [dts.default()],
     external: [/\.css$/],
   },
-];
+];
+
+// export default {
+//   input: 'src/index.js',
+//   output: 'dist/index.js',
+//   format: 'esm',
+//   exports: 'named', /** Disable warning for default imports */
+//   sourcemap: true,
+// };

src/components/SideBarColors.tsx

@@ -1,39 +1,19 @@
-import { getColors, ls, resetTheme, setColorsProperties } from "../lib/utils";
-import React, { useEffect, useState } from "react";
+import { getColors, ls, print } from "../lib/utils";
+import { useEffect, useState } from "react";
 import { Item } from "./item";
-import { ThemeWithHSLColor } from "../lib/theme";
 import { useTheme } from "next-themes";
 import { useDebounceCallback } from "../hooks/useDebounceCallback";
-import z from "zod";
 import { LOCAL_STORAGE_KEY } from "../lib/consts";
 import { useEmittor } from "emittor";
 import { themeEmittor } from "../lib/emittors";
-
-function print(...props: any) {
-  if (
-    typeof window !== "undefined" &&
-    (window as any).shadcnThemeEditorDebugMode
-  ) {
-    console.log(...props);
-  }
-}
-
-const ZodTheme = z.array(
-  z.object({
-    title: z.string(),
-    variable: z.string(),
-    color: z.object({
-      h: z.number(),
-      s: z.number(),
-      l: z.number(),
-    }),
-  })
-);
+import { setSavedTheme } from "../lib/set-saved-theme";
+import { useIsMount } from "../hooks/useIsMount";
 
 function SideBarColors() {
-
   const { resolvedTheme } = useTheme();
   const [currentTheme, setCurrentTheme] = useState<string | undefined>();
+  const isMount = useIsMount();
+
   useEffect(() => {
     setCurrentTheme(resolvedTheme);
   }, [resolvedTheme]);
@@ -45,27 +25,21 @@ function SideBarColors() {
   }, 2000);
 
   useEffect(() => {
-    // resetTheme();
-    print("reading theme", LOCAL_STORAGE_KEY + ":" + currentTheme);
-    let theme = ls.getLocalStorageItem<ThemeWithHSLColor[]>(
-      LOCAL_STORAGE_KEY + ":" + currentTheme
-    );
-    if (theme) {
+    let isSavedThemeApplied = false;
+    if (typeof colors == "undefined" || isMount) {
+      // If colors are not defined (i.e., they haven't been set by other functions yet, meaning it's the first time),
+      // or if this is due to a re-render caused by dependency changes (e.g., when currentTheme is updated).
       try {
-        const isValid = ZodTheme.parse(theme);
-        print("theme is valid and appling", isValid);
-        print("applied theme", theme);
-        themeEmittor.applyTheme(theme);
+        isSavedThemeApplied = setSavedTheme(currentTheme);
         return;
-      } catch (error) {
-        print("invalid theme found in localStorage");
-        // localStorage.removeItem(LOCAL_STORAGE_KEY+":"+currentTheme); //* remove key
-      }
+      } catch (error) {}
+    }
+
+    if (typeof colors == "undefined") {
+      themeEmittor.setDefaultTheme();
     }
-    print("theme not found in localStorage");
-    print("Now theme: ", theme);
-    themeEmittor.setDefaultTheme();
   }, [currentTheme]);
+
   return (
     <>
       {colors?.map((color) => (

src/components/icons.tsx

@@ -115,4 +115,13 @@ const ColorPalette = ({size, ...props}: SVGProps<SVGSVGElement> & { size: number
     <path d="M416 352c-12.6-.84-21-4-28-12-14-16-14-36 5.49-52.48l32.82-29.14c50.27-44.41 50.27-117.21 0-161.63C389.26 64.14 339.54 48 287.86 48c-60.34 0-123.39 22-172 65.11-90.46 80-90.46 210.92 0 290.87 45 39.76 105.63 59.59 165.64 60h1.84c60 0 119.07-19.5 161.2-56.77C464 390 464 385 444.62 355.56 440 348 431 353 416 352zM112 208a32 32 0 1 1 32 32 32 32 0 0 1-32-32zm40 135a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm40-199a32 32 0 1 1 32 32 32 32 0 0 1-32-32zm64 271a48 48 0 1 1 48-48 48 48 0 0 1-48 48zm72-239a32 32 0 1 1 32-32 32 32 0 0 1-32 32z" />
   </svg>
 );
+export const Icons = {
+  ResetIcon,
+  CopyIcon,
+  Dices,
+  UnLock,
+  Lock,
+  X,
+  ColorPalette,
+}
 export default ColorPalette;

src/index.ts

@@ -1,3 +1,7 @@
 import "./tailwind.css";
 import ShadcnThemeEditor from "./components/editor-open";
+import { setSavedTheme } from "./lib/set-saved-theme";
+export { Icons } from "./components/icons";
+
+export { setSavedTheme };
 export default ShadcnThemeEditor;

src/lib/set-saved-theme.ts

@@ -0,0 +1,20 @@
+import { LOCAL_STORAGE_KEY } from "./consts";
+import { themeEmittor } from "./emittors";
+import { type ThemeWithHSLColor } from "./theme";
+import { ls, ZodTheme } from "./utils";
+
+export function setSavedTheme(theme: string | undefined){
+    let lsTheme = ls.getLocalStorageItem<ThemeWithHSLColor[]>(
+      LOCAL_STORAGE_KEY + ":" + theme
+    );
+    if (lsTheme) {
+      try {
+        const isValid = ZodTheme.parse(lsTheme);
+        themeEmittor.applyTheme(lsTheme);
+        return true;
+      } catch (error) {
+        // localStorage.removeItem(LOCAL_STORAGE_KEY+":"+currentTheme); //* remove key
+      }
+    }
+    return false
+  }

src/lib/utils.ts

@@ -5,6 +5,7 @@ import {
   themeColors,
 } from "./theme";
 import { LOCAL_STORAGE_KEY } from "./consts";
+import { z } from "zod";
 
 export function cn(...inputs: ClassValue[]) {
   return clsx(inputs);
@@ -124,3 +125,24 @@ export const ls = {
 export function saveTheme(key: string | undefined, theme: ThemeWithHSLColor[]){
   ls.setLocalStorage(LOCAL_STORAGE_KEY + ":" + key, theme);
 }
+
+export function print(...props: any) {
+  if (
+    typeof window !== "undefined" &&
+    (window as any).shadcnThemeEditorDebugMode
+  ) {
+    console.log(...props);
+  }
+}
+
+export const ZodTheme = z.array(
+  z.object({
+    title: z.string(),
+    variable: z.string(),
+    color: z.object({
+      h: z.number(),
+      s: z.number(),
+      l: z.number(),
+    }),
+  })
+);