v1.3.0-beta

Author: programming-with-ia

.gitignore

@@ -26,3 +26,4 @@ dist-ssr
 site
 todo_*
 tempCodeRunnerFile.*
+*.tgz

.npmignore

@@ -6,4 +6,8 @@ tsconfig.json
 .gitignore
 site
 tailwind.config.js
-*.py
+*.py
+*.tgz
+screenshots
+tempCodeRunnerFile.*
+.release-it.json

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-theme-editor",
-  "version": "1.3.0-alpha.2",
+  "version": "1.3.0-beta",
   "description": "Shadcn Theme Editor",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,7 +14,7 @@
   },
   "homepage": "https://github.com/programming-with-ia/shadcn-theme-editor#readme",
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs && python ./update-css-file.py && npm link",
+    "build": "rollup -c --bundleConfigAsCjs && python ./update-css-file.py && npm link && npm pack",
     "test": "echo \"Error: no test specified\" && exit 1",
     "release": "release-it"
   },
@@ -62,6 +62,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "colord": "^2.9.3",
+    "emittor": "^0.1.0",
     "lodash.debounce": "^4.0.8",
     "zod": "^3.23.8"
   }

package.json

@@ -1,14 +1,16 @@
 import { getColors, ls, resetTheme, setColorsProperties } from "../lib/utils";
 import React, { useEffect, useState } from "react";
 import { Item } from "./item";
-import { ReadonlyThemeWithHSLColor } from "../lib/theme";
+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 ((window as any).shadcnThemeEditorDebugMode) {
+  if (typeof window !== "undefined" && (window as any).shadcnThemeEditorDebugMode) {
     console.log(...props);
   }
 }
@@ -34,38 +36,39 @@ function SideBarColors() {
     setCurrentTheme(resolvedTheme);
   }, [resolvedTheme]);
 
-  const [colors, setColors] = useState<
-    ReadonlyThemeWithHSLColor[] | undefined
-  >();
-  // console.log("Current Theme is: ", currentTheme);
+  const [colors, setColors] = useEmittor(themeEmittor.e);
   const saveLocalStorage = useDebounceCallback(() => {
     print("Saving the theme to local storage");
     ls.setLocalStorage(LOCAL_STORAGE_KEY + ":" + currentTheme, getColors(true));
   }, 2000);
 
   useEffect(() => {
-    resetTheme();
+    // resetTheme();
     print("reading theme", LOCAL_STORAGE_KEY + ":" + currentTheme);
-    let theme = ls.getLocalStorageItem<ReadonlyThemeWithHSLColor[]>(
+    let theme = ls.getLocalStorageItem<ThemeWithHSLColor[]>(
       LOCAL_STORAGE_KEY + ":" + currentTheme
     );
     if (theme) {
       try {
         const isValid = ZodTheme.parse(theme);
         print("theme is valid and appling", isValid);
         print("applied theme", theme);
-        setColorsProperties(theme);
-        setColors(theme);
+        themeEmittor.applyTheme(theme)
+        // setColorsProperties(theme);
+        // setColors(theme);
         return;
       } catch (error) {
         print("invalid theme found in localStorage");
         // localStorage.removeItem(LOCAL_STORAGE_KEY+":"+currentTheme); //* remove key
       }
     }
-    theme = getColors(true) as any;
+    // resetTheme()
+    // theme = getColors(true) as any;
+    // theme = getDefaultTheme()
     print("theme not found in localStorage");
     print("Now theme: ", theme);
-    setColors(theme as any);
+    // setColors(theme as any);
+    themeEmittor.setDefaultTheme()
   }, [currentTheme]);
   return (
     <>

src/components/SideBarColors.tsx

@@ -1,4 +1,4 @@
-import { ReadonlyThemeWithHSLColor } from "../lib/theme";
+import { ThemeWithHSLColor } from "../lib/theme";
 import React, { useEffect, useState } from "react";
 import { Button } from "./ui/button";
 import { copy2clipboard, HSL2ComputedColor, setStyleColor } from "../lib/utils";
@@ -9,7 +9,7 @@ export function Item({
   theme,
   onSave,
 }: {
-  theme: ReadonlyThemeWithHSLColor;
+  theme: ThemeWithHSLColor;
   onSave: () => void;
 }) {
   const [color, setColor] = useState<string>("#000");

src/components/item.tsx

@@ -1,33 +1,76 @@
-import React, { useState } from 'react'
-import { Button } from './ui/button'
-import { createRandomTheme } from '../lib/create-theme-config'
-import { useTheme } from 'next-themes'
-import { getComputedHSLColor, saveTheme, setColorsProperties } from '../lib/utils'
-import { Dices, Lock, UnLock } from './icons';
-import { ReadonlyThemeWithHSLColor, SystemThemes, themeModes } from '../lib/theme'
+import React, { useEffect, useState } from "react";
+import { Button } from "./ui/button";
+import { createRandomTheme } from "../lib/create-theme-config";
+import { useTheme } from "next-themes";
+import {
+  getComputedHSLColor,
+  saveTheme,
+  setColorsProperties,
+} from "../lib/utils";
+import { Dices, Lock, UnLock } from "./icons";
+import {
+  SystemThemes,
+  themeModes,
+  ThemeWithHSLColor,
+} from "../lib/theme";
+import { themeEmittor } from "../lib/emittors";
 
 function RandomBtn() {
-  const { resolvedTheme=""+undefined, systemTheme="dark" } = useTheme();
-    const [lockPrimary, setLockPrimary] = useState(true);
-    const onClickHandler = ()=>{
-      const themes = createRandomTheme(lockPrimary ? getComputedHSLColor("--primary"): undefined)
-      let theme;
+  const {
+    resolvedTheme: NresolvedTheme = "" + undefined,
+    systemTheme: NsystemTheme = "dark",
+  } = useTheme();
+  const [resolvedTheme, setResolvedTheme] = useState<string>();
+  const [systemTheme, setSystemTheme] = useState<string>();
+  useEffect(() => {
+    setResolvedTheme(NresolvedTheme);
+    setSystemTheme(NsystemTheme);
+  }, [NresolvedTheme, NsystemTheme]);
+  const [lockPrimary, setLockPrimary] = useState(true);
+  const onClickHandler = () => {
+    const themes = createRandomTheme(
+      lockPrimary ? getComputedHSLColor("--primary") : undefined
+    );
+    let theme;
 
-      if (SystemThemes.includes(resolvedTheme as any)){
-        theme = themes[resolvedTheme as themeModes] as ReadonlyThemeWithHSLColor[];
-        SystemThemes.forEach(theme=> saveTheme(resolvedTheme, themes[theme])) // save both themes
-      } else {
-        theme = themes[systemTheme] as ReadonlyThemeWithHSLColor[];
-        saveTheme(resolvedTheme, theme)
-      }
-        setColorsProperties(theme)
+    if (SystemThemes.includes(resolvedTheme as any)) {
+      theme = themes[
+        resolvedTheme as themeModes
+      ] as ThemeWithHSLColor[];
+      SystemThemes.forEach((theme) => saveTheme(theme, themes[theme])); // save both themes
+    } else {
+      theme = themes[systemTheme as themeModes] as ThemeWithHSLColor[];
+      saveTheme(resolvedTheme, theme);
     }
-    const LockIcon = lockPrimary? Lock: UnLock
+    themeEmittor.applyTheme(theme)
+    // themeEmittor.e.setState(theme)
+    // setColorsProperties(theme);
+  };
+  const LockIcon = lockPrimary ? Lock : UnLock;
   return (
-    <Button onClick={onClickHandler} title={'Generate Random theme, Primary is '+(lockPrimary? "locked": "not locked")} variant={"colorbtn"} className='cursor-pointer'>
-        <Dices className='size-5' /> Randomize <LockIcon onClick={(e)=>console.log(setLockPrimary(!lockPrimary), lockPrimary, e.stopPropagation())} aria-label={(lockPrimary ?'unlock' : 'lock')+ ' primary color'} className='ml-auto size-6 hover:opacity-80 rounded-md hover:bg-background hover:fill-foreground p-0.5 fill-current'/>
+    <Button
+      onClick={onClickHandler}
+      title={
+        "Generate Random theme, Primary is " +
+        (lockPrimary ? "locked" : "not locked")
+      }
+      variant={"colorbtn"}
+      className="cursor-pointer"
+    >
+      <Dices className="size-5" /> Randomize{" "}
+      <LockIcon
+        onClick={(e) =>
+          console.log(
+            setLockPrimary(!lockPrimary),
+            lockPrimary,
+            e.stopPropagation()
+          )
+        }
+        aria-label={(lockPrimary ? "unlock" : "lock") + " primary color"}
+        className="ml-auto size-6 hover:opacity-80 rounded-md hover:bg-background hover:fill-foreground p-0.5 fill-current"
+      />
     </Button>
-  )
+  );
 }
 
-export default RandomBtn
+export default RandomBtn;

src/components/random.tsx

@@ -2,6 +2,8 @@ import { Button } from "./ui/button";
 import { LOCAL_STORAGE_KEY } from "../lib/consts";
 import { useTheme } from "next-themes";
 import { ResetIcon } from "./icons";
+import { ls } from "../lib/utils";
+import { themeEmittor } from "../lib/emittors";
 
 export function ResetTheme() {
   const { resolvedTheme: currentTheme } = useTheme();
@@ -10,10 +12,13 @@ export function ResetTheme() {
       title="Reset to the default theme"
       variant={"toolbtn"}
       size="toolbtn"
-      onClick={() => (
-        localStorage.removeItem(LOCAL_STORAGE_KEY + ":" + currentTheme),
+      onClick={(e) => (
+        e.ctrlKey
+          ? ls.deleteAllThemes()
+          : localStorage.removeItem(LOCAL_STORAGE_KEY + ":" + currentTheme),
         // resetTheme(),
-        window.location.reload()
+        themeEmittor.setDefaultTheme()
+        // window.location.reload()
       )}
     >
       <ResetIcon />

src/components/reset-theme.tsx

@@ -1,22 +1,27 @@
 import React from "react";
-import { CompoProps } from "../../app/src/types/types";
 import { cn } from "../lib/utils";
 
 function Header({
   children,
   label,
+  href
 }: {
   children?: React.ReactNode;
   label: string;
+  href?: string;
 }) {
+  const Comp = href ? "a": "div"
   return (
-    <div
+    <Comp
+      href={href}
+      target={href? "_blank": undefined}
       className={cn(
-        "mb-1 flex items-center justify-between pl-2 py-1 text-sm font-semibold gap-2"
+        "mb-1 mt-2 flex items-center justify-between pl-2 py-1 text-sm font-semibold gap-2",
+        href && "hover:underline underline-offset-1"
       )}
     >
       {label} {children}
-    </div>
+    </Comp>
   );
 }
 
@@ -34,7 +39,7 @@ function Section({
 
 const SidebarSection = {
   Header,
-  Root: Section,
+  Body: Section,
   Seperator() {
     return <hr className="my-2" />;
   },

src/components/sidebar-section.tsx

@@ -15,7 +15,7 @@ export function Sidebar({ isOpen }: { isOpen: boolean }) {
         isOpen && "md:flex flex-col"
       )}
     >
-      <div className="mb-1 flex items-center px-2 py-1 font-semibold">
+      <div className="flex items-center px-2 py-1 font-semibold">
         Shadcn Theme Editor
       </div>
       <SidebarSection.Header label="Theming">
@@ -25,11 +25,14 @@ export function Sidebar({ isOpen }: { isOpen: boolean }) {
         </div>
       </SidebarSection.Header>
 
-      <div className="text-sm flex flex-col flex-1">
+      <SidebarSection.Body className="flex-1">
         <SideBarColors />
-        <hr className="my-2" />
+      </SidebarSection.Body>
+      {/* <SidebarSection.Seperator /> */}
+      <SidebarSection.Header label="ui.jln.dev" href="https://ui.jln.dev/" />
+      <SidebarSection.Body>
         <RandomBtn />
-      </div>
+      </SidebarSection.Body>
       <footer className="flex flex-col gap-2 text-sm pt-4 mt-2 border-t -mb-4">
         <div className="flex flex-wrap justify-between gap-2">
           <a