Merge pull request #25 from react18-tools/tailwind

Tailwind

Author: mayank1513

.github/workflows/docs.yml

@@ -0,0 +1,45 @@
+name: Update dependencies and Docs
+
+on:
+  push:
+    branches: [main]
+  schedule:
+    - cron: "0 0 */2 * *"
+jobs:
+  doc:
+    if: github.event.repository.owner.login == 'react18-tools'
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: write
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/setup-node@v3
+        with:
+          registry-url: https://registry.npmjs.org
+          node-version: 20
+      - run: npm i -g pnpm && pnpm i
+        name: Install dependencies
+      - name: Test
+        run: npm test
+      - run: git status && git clean -f -d && git status
+        name: clean up working directory
+      - run: npx @turbo/codemod update . && pnpm update --latest -w
+        name: Update dependencies
+      - run: pnpm build
+        name: Build all apps to make sure it is not broken due to dependency upgrades
+      - name: Run unit tests
+        run: pnpm test
+      - name: Generate/update docs
+        run: pnpm doc
+      - name: Setup Git
+        run: |
+          git config --global user.name "mayank1513"
+          git config --global user.email "[email protected]"
+          git fetch
+          git checkout main
+      - name: Save upgraded packages back to repo
+        run: git add . && git commit -m "upgrade deps && docs" && git push origin main

.github/workflows/publish.yml

@@ -4,7 +4,7 @@ name: Publish to NPM
 on:
   push:
     branches: [main]
-    paths: "packages/react18-themes/package.json"
+    paths: "lib/react18-themes/package.json"
 
 jobs:
   publish:
@@ -15,7 +15,7 @@ jobs:
 
     defaults:
       run:
-        working-directory: ./packages/react18-themes
+        working-directory: ./lib/react18-themes
 
     steps:
       - uses: actions/checkout@v3

.github/workflows/test.yml

@@ -24,12 +24,12 @@ jobs:
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v3
         with:
-          directory: ./packages/react18-themes
+          directory: ./lib/react18-themes
           token: ${{ secrets.CODECOV_TOKEN }}
           flags: fork-me
       - uses: paambaati/[email protected]
         continue-on-error: true
         env:
           CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
         with:
-          coverageLocations: ./packages/react18-themes/coverage/*.xml:clover
+          coverageLocations: ./lib/react18-themes/coverage/*.xml:clover

README.md

@@ -23,6 +23,8 @@ This project is inspired by `next-themes`. `next-themes` is an awesome package,
 - ✅ Class or data attribute selector
 - ✅ Manipulate theme via `useTheme` hook
 - ✅ Doccumented with [Typedoc](https://react18-tools.github.io/react18-themes) ([Docs](https://react18-tools.github.io/react18-themes))
+- ✅ Use combinations of [data-th=""] and [data-color-scheme=""] for dark/light varients of themes
+- ✅ Use [data-csp=""] to style based on colorSchemePreference.
 
 Check out the [live example](https://react18-themes.vercel.app/).
 

examples/nextjs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # nextjs-example
 
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 0.0.11
 
 ### Patch Changes

examples/nextjs/app/layout.tsx

@@ -6,9 +6,11 @@ import Link from "next/link";
 
 const inter = Inter({ subsets: ["latin"] });
 const forcedPages: ForcedPage[] = [
-	[/forced-color-scheme\/dark/, { colorScheme: "dark" }],
-	[/forced-color-scheme\/light/, { colorScheme: "light" }],
-	...[...darkThemes, ...lightThemes].map(th => [new RegExp(`themed-page/${th}`), { theme: "light" }] as ForcedPage),
+	{ pathMatcher: /forced-color-scheme\/dark/, props: { forcedColorScheme: "dark" } },
+	{ pathMatcher: /forced-color-scheme\/light/, props: { forcedColorScheme: "light" } },
+	...[...darkThemes, ...lightThemes].map(
+		theme => ({ pathMatcher: new RegExp(`themed-page/${theme}`), props: { forcedTheme: theme } }) as ForcedPage,
+	),
 ];
 
 export default function RootLayout({ children }: { children: React.ReactNode }): JSX.Element {

examples/nextjs/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nextjs-example",
-	"version": "0.0.11",
+	"version": "0.0.12",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --port 3002",
@@ -10,14 +10,14 @@
 	},
 	"dependencies": {
 		"@mayank1513/fork-me": "^2.0.0",
-		"next": "^14.0.3",
+		"next": "^14.0.4",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react18-themes": "workspace:*",
 		"shared-ui": "workspace:*"
 	},
 	"devDependencies": {
-		"@next/eslint-plugin-next": "^14.0.3",
+		"@next/eslint-plugin-next": "^14.0.4",
 		"@types/node": "^20.10.4",
 		"@types/react": "^18.2.42",
 		"@types/react-dom": "^18.2.17",

examples/remix/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 ### Patch Changes
 
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
+## null
+
+### Patch Changes
+
 - Updated dependencies [170b3f2]
   - [email protected]
   - [email protected]

examples/remix/package.json

@@ -4,8 +4,8 @@
 	"sideEffects": false,
 	"type": "module",
 	"scripts": {
-		"build": "remix build",
-		"dev": "remix dev --manual",
+		"build-remix": "remix build",
+		"dev-remix": "remix dev --manual",
 		"start": "remix-serve ./build/index.js",
 		"typecheck": "tsc"
 	},

examples/remix/remix.config.js

@@ -1,7 +1,7 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 export default {
 	ignoredRouteFiles: ["**/.*"],
-	watchPaths: ["../../packages/react18-themes", "../../packages/shared-ui"],
+	watchPaths: ["../../lib/react18-themes", "../../packages/shared-ui"],
 	serverDependenciesToBundle: ["react18-themes", "shared-ui"],
 	// appDirectory: "app",
 	// assetsBuildDirectory: "public/build",