diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..fc81d71 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +/app export-ignore diff --git a/.npmignore b/.npmignore index 8b032cb..ab8a0e4 100644 --- a/.npmignore +++ b/.npmignore @@ -13,3 +13,4 @@ tempCodeRunnerFile.* .release-it.json .github .vscode +.gitattributes diff --git a/rollup.config.js b/rollup.config.js index bc71b5c..8b0f4e0 100644 --- a/rollup.config.js +++ b/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$/], }, -]; \ No newline at end of file +]; + +// export default { +// input: 'src/index.js', +// output: 'dist/index.js', +// format: 'esm', +// exports: 'named', /** Disable warning for default imports */ +// sourcemap: true, +// }; \ No newline at end of file diff --git a/src/components/SideBarColors.tsx b/src/components/SideBarColors.tsx index 60cd25b..b4e4d6c 100644 --- a/src/components/SideBarColors.tsx +++ b/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(); + 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( - 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) => ( diff --git a/src/components/icons.tsx b/src/components/icons.tsx index ddd4ece..a299ef2 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -115,4 +115,13 @@ const ColorPalette = ({size, ...props}: SVGProps & { size: number ); +export const Icons = { + ResetIcon, + CopyIcon, + Dices, + UnLock, + Lock, + X, + ColorPalette, +} export default ColorPalette; diff --git a/src/index.ts b/src/index.ts index 3d244a0..31ae406 100644 --- a/src/index.ts +++ b/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; diff --git a/src/lib/set-saved-theme.ts b/src/lib/set-saved-theme.ts new file mode 100644 index 0000000..80ca322 --- /dev/null +++ b/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( + 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 + } \ No newline at end of file diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 7a46bf6..6c7d401 100644 --- a/src/lib/utils.ts +++ b/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(), + }), + }) +);