v1.3.2

- editor open button with only icon
- add close button on sidebar
- double click to copy single color

Author: programming-with-ia

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-theme-editor",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Shadcn Theme Editor",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,7 +16,8 @@
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && python ./update-css-file.py && npm link && npm pack",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "release": "release-it"
+    "release": "release-it",
+    "clean": "rimraf dist"
   },
   "keywords": [
     "shadcn-theme-editor",

src/components/SideBarColors.tsx

@@ -10,7 +10,10 @@ import { useEmittor } from "emittor";
 import { themeEmittor } from "../lib/emittors";
 
 function print(...props: any) {
-  if (typeof window !== "undefined" && (window as any).shadcnThemeEditorDebugMode) {
+  if (
+    typeof window !== "undefined" &&
+    (window as any).shadcnThemeEditorDebugMode
+  ) {
     console.log(...props);
   }
 }
@@ -28,7 +31,6 @@ const ZodTheme = z.array(
 );
 
 function SideBarColors() {
-  // const { resolvedTheme: currentTheme } = useTheme();
 
   const { resolvedTheme } = useTheme();
   const [currentTheme, setCurrentTheme] = useState<string | undefined>();
@@ -53,22 +55,16 @@ function SideBarColors() {
         const isValid = ZodTheme.parse(theme);
         print("theme is valid and appling", isValid);
         print("applied theme", theme);
-        themeEmittor.applyTheme(theme)
-        // setColorsProperties(theme);
-        // setColors(theme);
+        themeEmittor.applyTheme(theme);
         return;
       } catch (error) {
         print("invalid theme found in localStorage");
         // localStorage.removeItem(LOCAL_STORAGE_KEY+":"+currentTheme); //* remove key
       }
     }
-    // resetTheme()
-    // theme = getColors(true) as any;
-    // theme = getDefaultTheme()
     print("theme not found in localStorage");
     print("Now theme: ", theme);
-    // setColors(theme as any);
-    themeEmittor.setDefaultTheme()
+    themeEmittor.setDefaultTheme();
   }, [currentTheme]);
   return (
     <>

src/components/editor-open.tsx

@@ -1,19 +1,20 @@
 "use client";
 import { useState } from "react";
 import { Sidebar } from "./sidebar";
-import { Button } from "./ui/button";
+import { IoColorPalette } from "react-icons/io5";
+import clsx from "clsx";
 
 function EditorOpenBtn() {
-  const [IsOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <div id="shadcn-theme-editor">
-      <Button
-        onClick={() => setIsOpen(!IsOpen)}
-        className="fixed bottom-2 right-2 z-[35] opacity-50 hover:opacity-100"
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={clsx("rounded-full p-3 fixed border shadow-md drop-shadow-sm bottom-2 right-2 z-[35]", isOpen?"bg-primary text-primary-foreground":"text-primary bg-primary-foreground opacity-50 hover:opacity-100")}
       >
-        {IsOpen ? "Close" : "Open"} Theme Editor
-      </Button>
-      <Sidebar isOpen={IsOpen} />
+        <IoColorPalette size={24} />
+      </button>
+      <Sidebar state={{isOpen, setIsOpen}} />
     </div>
   );
 }

src/components/icons.tsx

@@ -81,3 +81,22 @@ export const Lock = (props: SVGProps<SVGSVGElement>) => (
     </g>
   </svg>
 );
+
+export const X = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-x"
+    {...props}
+  >
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </svg>
+);

src/components/item.tsx

@@ -27,9 +27,10 @@ export function Item({
   return (
     <Button
       variant={"colorbtn"}
+      className=" select-none"
       asChild
       title={theme.variable + ": " + HSL2ComputedColor(theme.color) + ";"}
-      onClick={() =>
+      onDoubleClick={() =>
         copy2clipboard(
           theme.variable + ": " + HSL2ComputedColor(theme.color) + ";"
         )

src/components/random.tsx

@@ -1,18 +1,13 @@
-import React, { useEffect, useState } from "react";
+import { 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 { SystemThemes, themeModes, ThemeWithHSLColor } from "../lib/theme";
 import { themeEmittor } from "../lib/emittors";
 
 function RandomBtn() {
@@ -34,17 +29,13 @@ function RandomBtn() {
     let theme;
 
     if (SystemThemes.includes(resolvedTheme as any)) {
-      theme = themes[
-        resolvedTheme as themeModes
-      ] as ThemeWithHSLColor[];
+      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);
     }
-    themeEmittor.applyTheme(theme)
-    // themeEmittor.e.setState(theme)
-    // setColorsProperties(theme);
+    themeEmittor.applyTheme(theme);
   };
   const LockIcon = lockPrimary ? Lock : UnLock;
   return (

src/components/reset-theme.tsx

@@ -16,9 +16,7 @@ export function ResetTheme() {
         e.ctrlKey
           ? ls.deleteAllThemes()
           : localStorage.removeItem(LOCAL_STORAGE_KEY + ":" + currentTheme),
-        // resetTheme(),
         themeEmittor.setDefaultTheme()
-        // window.location.reload()
       )}
     >
       <ResetIcon />

src/components/sidebar.tsx

@@ -5,16 +5,21 @@ import { CopyTheme } from "./copy-theme";
 import ThemeToggle from "./theme-toggle";
 import RandomBtn from "./random";
 import SidebarSection from "./sidebar-section";
+import { Button } from "./ui/button";
+import { X } from "./icons";
 
-export function Sidebar({ isOpen }: { isOpen: boolean }) {
+export function Sidebar({ state }: { state: {isOpen: boolean, setIsOpen: (state: boolean)=>void} }) {
   return (
     <aside
       role="dialog"
       className={cn(
-        "fixed customScrollBar duration-500 left-0 inset-y-0 z-50 hidden h-screen max-h-screen w-fit shrink-0 bg-background overflow-y-auto py-6 pl-8 pr-6 lg:py-8 border-r-2 shadow-md drop-shadow-sm",
-        isOpen && "md:flex flex-col"
+        "fixed customScrollBar group duration-500 left-0 inset-y-0 z-50 hidden h-screen max-h-screen w-fit shrink-0 bg-background overflow-y-auto py-6 pl-8 pr-6 lg:py-8 border-r-2 shadow-md drop-shadow-sm",
+        state.isOpen && "md:flex flex-col"
       )}
     >
+      <Button onClick={()=>state.setIsOpen(!state.isOpen)} className="fixed top-0 right-0 m-2 opacity-0 group-hover:opacity-50 hover:!opacity-100" size={"toolbtn"} variant={"toolbtn"}>
+        <X className="size-5" />
+      </Button>
       <div className="flex items-center px-2 py-1 font-semibold">
         Shadcn Theme Editor
       </div>

src/components/theme-toggle.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { useTheme } from "next-themes";
 import { cn } from "../lib/utils";
 import { SVGProps, useEffect, useRef, useState } from "react";