From cefd23aef516b8c934a8a1a5752679b2a3a26848 Mon Sep 17 00:00:00 2001 From: immi Date: Fri, 23 Aug 2024 01:37:08 +0500 Subject: [PATCH] v1.3.0-alpha.1 --- README.md | 11 ++++++++ package.json | 2 +- src/components/random.tsx | 19 ++++++++----- src/components/sidebar-section.tsx | 43 ++++++++++++++++++++++++++++++ src/components/sidebar.tsx | 6 ++--- src/hooks/useLocalStroageTheme.ts | 11 ++++++++ src/lib/create-theme-config.ts | 3 +-- src/lib/theme.ts | 3 +++ src/lib/utils.ts | 5 ++++ 9 files changed, 91 insertions(+), 12 deletions(-) create mode 100644 src/components/sidebar-section.tsx create mode 100644 src/hooks/useLocalStroageTheme.ts diff --git a/README.md b/README.md index 3fa15b8..cacaba2 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,17 @@ and use logo

+## Upcoming Features + +- Randomize +- use [jln themes](https://ui.jln.dev/) directly in your project + +## Special Thanks + +I would like to extend my heartfelt thanks to the following individuals and projects: + +- **[Julian](https://github.com/jln13x)** - for creating [ui.jln.dev](https://ui.jln.dev/), 10000+ Themes for shadcn/ui. + ## 📄 License This project is licensed under the `ℹī¸ MIT` License. diff --git a/package.json b/package.json index d596edb..c5e41a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "shadcn-theme-editor", - "version": "1.2.0-alpha.1", + "version": "1.3.0-alpha.1", "description": "Shadcn Theme Editor", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/src/components/random.tsx b/src/components/random.tsx index 1461738..fac1ece 100644 --- a/src/components/random.tsx +++ b/src/components/random.tsx @@ -2,17 +2,24 @@ import React, { useState } from 'react' import { Button } from './ui/button' import { createRandomTheme } from '../lib/create-theme-config' import { useTheme } from 'next-themes' -import { getComputedHSLColor, setColorsProperties } from '../lib/utils' +import { getComputedHSLColor, saveTheme, setColorsProperties } from '../lib/utils' import { Dices, Lock, UnLock } from './icons'; +import { ReadonlyThemeWithHSLColor, SystemThemes, themeModes } from '../lib/theme' function RandomBtn() { - const { systemTheme } = useTheme() + const { resolvedTheme=""+undefined, systemTheme="dark" } = useTheme(); const [lockPrimary, setLockPrimary] = useState(true); const onClickHandler = ()=>{ - const themes = createRandomTheme(lockPrimary ? getComputedHSLColor("--primary"): undefined) - const theme = themes[systemTheme!] ?? themes.dark - // const theme = themes.dark - console.log(theme) + 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) } const LockIcon = lockPrimary? Lock: UnLock diff --git a/src/components/sidebar-section.tsx b/src/components/sidebar-section.tsx new file mode 100644 index 0000000..0bc21fd --- /dev/null +++ b/src/components/sidebar-section.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { CompoProps } from "../../app/src/types/types"; +import { cn } from "../lib/utils"; + +function Header({ + children, + label, +}: { + children?: React.ReactNode; + label: string; +}) { + return ( +
+ {label} {children} +
+ ); +} + +function Section({ + className, + children, +}: { + className?: string; + children: React.ReactNode; +}) { + return ( +
{children}
+ ); +} + +const SidebarSection = { + Header, + Root: Section, + Seperator() { + return
; + }, +}; + +export default SidebarSection; diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index 67748b3..c5db7c4 100644 --- a/src/components/sidebar.tsx +++ b/src/components/sidebar.tsx @@ -4,6 +4,7 @@ import SideBarColors from "./SideBarColors"; import { CopyTheme } from "./copy-theme"; import ThemeToggle from "./theme-toggle"; import RandomBtn from "./random"; +import SidebarSection from "./sidebar-section"; export function Sidebar({ isOpen }: { isOpen: boolean }) { return ( @@ -17,13 +18,12 @@ export function Sidebar({ isOpen }: { isOpen: boolean }) {
Shadcn Theme Editor
-
- Theming +
-
+
diff --git a/src/hooks/useLocalStroageTheme.ts b/src/hooks/useLocalStroageTheme.ts new file mode 100644 index 0000000..f48ae76 --- /dev/null +++ b/src/hooks/useLocalStroageTheme.ts @@ -0,0 +1,11 @@ +import React, { useEffect, useState } from 'react' + +function useLocalStroageTheme(theme?:string) { + const [isLocalThemeApply, setIsLocalThemeApply] = useState(false); + useEffect(() => { + + }, [theme]); + return {isLocalThemeApply} +} + +export default useLocalStroageTheme \ No newline at end of file diff --git a/src/lib/create-theme-config.ts b/src/lib/create-theme-config.ts index cdb0001..427c935 100644 --- a/src/lib/create-theme-config.ts +++ b/src/lib/create-theme-config.ts @@ -3,10 +3,9 @@ import { Colord, extend } from "colord"; import a11yPlugin from "colord/plugins/a11y"; import harmoniesPlugin from "colord/plugins/harmonies"; -import { getColorTitle, ReadonlyThemeWithHSLColor, ShadCnPropritiesType } from "./theme"; +import { getColorTitle, ReadonlyThemeWithHSLColor, type ShadCnPropritiesType, type themeModes } from './theme'; type Hsl = HslColor; -type themeModes = "light" | "dark" // type Hsl = { // h: number; // s: number; diff --git a/src/lib/theme.ts b/src/lib/theme.ts index 313e2cc..1b92867 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -91,6 +91,9 @@ export type ShadCnPropritiesType = (typeof themeColors)[number]["variable"]; export type ReadonlyThemeWithColor = (typeof themeColors)[number] & { color: string; }; +export const SystemThemes = ["light", "dark"] as const; +export type themeModes = typeof SystemThemes[number] + export type ReadonlyThemeWithHSLColor = (typeof themeColors)[number] & { color: HslColor; }; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index d177fcb..fa4edbc 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -4,6 +4,7 @@ import { type ShadCnPropritiesType, themeColors, } from "./theme"; +import { LOCAL_STORAGE_KEY } from "./consts"; export function cn(...inputs: ClassValue[]) { return clsx(inputs); @@ -103,3 +104,7 @@ export const ls = { } }, }; + +export function saveTheme(key: string | undefined, theme: ReadonlyThemeWithHSLColor[]){ + ls.setLocalStorage(LOCAL_STORAGE_KEY + ":" + key, theme); +}