chore: restructure to monorepo, add demos

Author: universse

.github/workflows/publish.yml

@@ -32,7 +32,7 @@ jobs:
         run: pnpm i --ignore-scripts
 
       - name: Build
-        run: pnpm build
+        run: pnpm --filter=palettez build
 
       - name: Publish
         id: changesets

.gitignore

@@ -8,8 +8,19 @@ yarn-error.log*
 .pnpm-debug.log
 
 # Builds
-dist*
+dist
 .astro
+.next
+out
+build
+.cache
+
+# Verce
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
 
 # Personal
 ideas.md

README.md

@@ -1,14 +1,14 @@
 # Palettez
 
-A flexible and powerful theme management library for JavaScript applications
+A flexible, framework-agnostic theme management library for JavaScript applications
 
 ## Features
 
 - Manage parallel themes with multiple options, for eg:
   - Color scheme: light, dark, system
   - Contrast preference: standard, high
   - Spacing: compact, comfortable, spacious
-- Persist theme selection to client or server storage
+- Persist theme selection to client storage and optionally server storage
 - No theme flicker on page load
 - Dynamically change themes based on system settings
 - Sync theme selection across tabs and windows
@@ -64,9 +64,9 @@ For client-side persistence (eg. localStorage), it's recommended to initialize P
     })
 
     themeManager.subscribe((_, resolvedThemes) => {
-      Object.entries(resolvedThemes).forEach(([theme, optionKey]) => {
+      for (const [theme, optionKey] of Object.entries(resolvedThemes)) {
         document.documentElement.dataset[theme] = optionKey
-      })
+      }
     })
 
     await themeManager.restore()
@@ -137,7 +137,7 @@ const themeManager = create({
   },
 
   // optional, specify your own storage solution. localStorage is used by default.
-  getStorage: () => {
+  storageAdapter: () => {
     return {
       getItem: (key: string) => {
         try {
@@ -185,16 +185,37 @@ import { read } from 'palettez'
 const themeManager = read('palettez')
 ```
 
-### Methods
+### Properties & Methods
 
 ```ts
+themeManager.themesAndOptions
+// [
+//   { key: 'colorScheme', 
+//     label: 'Color scheme',
+//     options: [
+//       { key: 'system', value: 'System' },
+//       { key: 'light', value: 'Light' },
+//       { key: 'dark', value: 'Dark' },
+//     ]
+//   },
+//   {
+//     key: 'contrast',
+//     label: 'Contrast',
+//     options: [
+//       { key: 'system', value: 'System' },
+//       { key: 'standard', value: 'Standard' },
+//       { key: 'high', value: 'High' },
+//     ]
+//   }
+// ]
+
 themeManager.getThemes() // { colorScheme: 'system', contrast: 'standard' }
 themeManager.getResolvedThemes() // { colorScheme: 'light', contrast: 'standard' }
 themeManager.setThemes({ contrast: 'high' })
 themeManager.restore() // restore persisted theme selection
 themeManager.sync() // useful for syncing theme selection across tabs and windows
 themeManager.clear() // clear persisted theme selection
-themeManager.subscribe((themes, resolvedThemes) => { /* ... */ })
+themeManager.subscribe((themes, resolvedThemes) => { /* ... */ }) // return unsubscribe function
 ```
 
 ## React Integration
@@ -215,7 +236,7 @@ export function ThemeSelect() {
     sync,
     clear,
     subscribe,
-  } = usePalettez('palettez')
+  } = usePalettez()
 
   return themesAndOptions.map((theme) => (
     <div key={theme.key}>

demo/src/pages/_style.css

@@ -1,20 +1,21 @@
 {
-	"name": "demo",
+	"name": "demo-astro",
 	"private": true,
 	"type": "module",
 	"scripts": {
 		"dev": "astro dev --port 3000"
 	},
 	"dependencies": {
-		"astro": "4.13.2",
-		"palettez": "*",
+		"astro": "4.13.3",
+		"palettez": "workspace:*",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
 		"@astrojs/node": "8.3.2",
-		"@astrojs/react": "3.6.1",
+		"@astrojs/react": "3.6.2",
 		"@types/react": "18.3.3",
-		"@types/react-dom": "18.3.0"
+		"@types/react-dom": "18.3.0",
+		"typescript": "5.5.4"
 	}
 }

demo/src/pages/ssr.astro

@@ -1,11 +1,13 @@
 import { usePalettez } from 'palettez/react'
 
-export function ThemeSelect() {
-	const { themesAndOptions, themes, setThemes } = usePalettez('palettez')
+export function ClientThemeSelect() {
+	const { themesAndOptions, themes, setThemes } = usePalettez(
+		window.palettez.read(),
+	)
 
 	return themesAndOptions.map((theme) => (
 		<div key={theme.key}>
-			<label htmlFor={theme.key}>{theme.label}</label>
+			<label htmlFor={theme.key}>{theme.label}</label>{' '}
 			<select
 				id={theme.key}
 				name={theme.key}