From 180ebebc91cbdff5070298dcd8de44b03344eaf4 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Tue, 27 Feb 2024 16:05:48 +0530 Subject: [PATCH 1/7] fix package name --- .github/workflows/publish.yml | 12 ++++++++- .tkb | 49 +++++++++++------------------------ README.md | 20 +++++++------- lib/nthul/lite.js | 3 ++- lib/nthul/package.json | 8 +++--- 5 files changed, 42 insertions(+), 50 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 05d49997..f7228c98 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -43,16 +43,26 @@ jobs: OWNER: ${{ github.event.repository.owner.login }} REPO: ${{ github.event.repository.name }} + - name: Publish package with long name for better SEO + continue-on-error: true + run: | + cd dist + sed -i -e "s/.*name.*/\t\"name\": \"nextjs-themes-ultra\",/" package.json + npm publish --provenance --access public + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} + # Publish lite version - run: node lite.js && pnpm build && pnpm publish-package && node scope.js && pnpm publish-package env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} + OWNER: ${{ github.event.repository.owner.login }} - name: Publish package with long name for better SEO continue-on-error: true run: | cd dist - sed -i -e "s/.*name.*/\t\"name\": \"nextjs-themes-ultralight\",/" package.json + sed -i -e "s/.*name.*/\t\"name\": \"nextjs-themes-ultralite\",/" package.json npm publish --provenance --access public env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} diff --git a/.tkb b/.tkb index cc7961a0..101ffdac 100644 --- a/.tkb +++ b/.tkb @@ -1,40 +1,25 @@ { "scope": "Workspace", "tasks": { - "task-ZJpp-dpxx3KxRMsAPNuMC": { - "id": "task-ZJpp-dpxx3KxRMsAPNuMC", - "description": "Implement tests", - "columnId": "column-done" - }, - "4CTOhRPjKrEAW5AHYsV7P": { - "id": "4CTOhRPjKrEAW5AHYsV7P", - "description": "Update doc comments", - "columnId": "column-done" - }, - "RtA7NBfPOlfnVHqk54rMD": { - "id": "RtA7NBfPOlfnVHqk54rMD", - "description": "update readme", - "columnId": "column-done" - }, - "fqhes_YS14GQopOUs7K-7": { - "id": "fqhes_YS14GQopOUs7K-7", - "description": "update workflows to replace mayank1513", - "columnId": "column-done" - }, "-FlzW8htLo-6jz5-ZqjEx": { "id": "-FlzW8htLo-6jz5-ZqjEx", "description": "update examples to showcase edge cases", - "columnId": "column-doing" + "columnId": "column-done" }, "p1R-Q4atxMo-29mSa7mb6": { "id": "p1R-Q4atxMo-29mSa7mb6", "description": "Remove scoped packages from turborepo-template", + "columnId": "column-done" + }, + "J1yONFe2BVs5GbQJj1SXG": { + "id": "J1yONFe2BVs5GbQJj1SXG", + "description": "Add ThemeContainer server component", "columnId": "column-todo" }, - "a7ksr41sN7kQNaH8Io-dV": { - "id": "a7ksr41sN7kQNaH8Io-dV", - "description": "Add support for css modules", - "columnId": "column-done" + "G-1H47JpSI69kav1qZ-kp": { + "id": "G-1H47JpSI69kav1qZ-kp", + "description": "Test setting theme from useEffect without any delay", + "columnId": "column-todo" } }, "columns": [ @@ -42,25 +27,21 @@ "id": "column-todo", "title": "To do", "tasksIds": [ - "p1R-Q4atxMo-29mSa7mb6" + "J1yONFe2BVs5GbQJj1SXG", + "G-1H47JpSI69kav1qZ-kp" ] }, { "id": "column-doing", "title": "Doing", - "tasksIds": [ - "-FlzW8htLo-6jz5-ZqjEx" - ] + "tasksIds": [] }, { "id": "column-done", "title": "Done", "tasksIds": [ - "a7ksr41sN7kQNaH8Io-dV", - "RtA7NBfPOlfnVHqk54rMD", - "fqhes_YS14GQopOUs7K-7", - "task-ZJpp-dpxx3KxRMsAPNuMC", - "4CTOhRPjKrEAW5AHYsV7P" + "p1R-Q4atxMo-29mSa7mb6", + "-FlzW8htLo-6jz5-ZqjEx" ] } ] diff --git a/README.md b/README.md index e6057197..48c2d777 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# Nextjs-Themes-Ultralight +# Nextjs-Themes-Ultra -[![test](https://github.com/react18-tools/nextjs-themes-ultralight/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/nextjs-themes-ultralight/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/85f6447e649201924a2c/maintainability)](https://codeclimate.com/github/react18-tools/nextjs-themes-ultralight/maintainability) [![codecov](https://codecov.io/gh/react18-tools/nextjs-themes-ultralight/graph/badge.svg)](https://codecov.io/gh/react18-tools/nextjs-themes-ultralight) [![Version](https://img.shields.io/npm/v/nthul.svg?colorB=green)](https://www.npmjs.com/package/nthul) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nthul.svg)](https://www.npmjs.com/package/nthul) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/nthul) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) +[![test](https://github.com/react18-tools/nextjs-themes-ultra/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/nextjs-themes-ultra/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/85f6447e649201924a2c/maintainability)](https://codeclimate.com/github/react18-tools/nextjs-themes-ultra/maintainability) [![codecov](https://codecov.io/gh/react18-tools/nextjs-themes-ultra/graph/badge.svg)](https://codecov.io/gh/react18-tools/nextjs-themes-ultra) [![Version](https://img.shields.io/npm/v/nthul.svg?colorB=green)](https://www.npmjs.com/package/nthul) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nthul.svg)](https://www.npmjs.com/package/nthul) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/nthul) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) 🤟 👉 [Unleash the Power of React Server Components](https://medium.com/javascript-in-plain-english/unleash-the-power-of-react-server-components-eb3fe7201231) -> A canonical package with a longer and more descriptive name is also published - `nextjs-themes-ultralight` +> A canonical package with a longer and more descriptive name is also published - `nextjs-themes-ultra` ## Motivation @@ -42,7 +42,7 @@ I will update the main library [`nextjs-themes`](https://github.com/react18-tool ✅ Manipulate theme via `useTheme` hook -✅ Documented with [Typedoc](https://react18-tools.github.io/nextjs-themes-ultralight) ([Docs](https://react18-tools.github.io/nextjs-themes-ultralight)) +✅ Documented with [Typedoc](https://react18-tools.github.io/nextjs-themes-ultra) ([Docs](https://react18-tools.github.io/nextjs-themes-ultra)) ✅ Use combinations of `th-` and `dark` or `light` classes for dark/light variants of themes @@ -50,11 +50,11 @@ I will update the main library [`nextjs-themes`](https://github.com/react18-tool ✅ Works with all build systems/tools/frameworks for React18 -> Feel free to [request](https://github.com/react18-tools/nextjs-themes-ultralight/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=) or [discuss](https://github.com/react18-tools/nextjs-themes-ultralight/discussions) new features or [report bugs](https://github.com/react18-tools/nextjs-themes-ultralight/issues/new?assignees=&labels=&projects=&template=bug_report.md&title=). +> Feel free to [request](https://github.com/react18-tools/nextjs-themes-ultra/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=) or [discuss](https://github.com/react18-tools/nextjs-themes-ultra/discussions) new features or [report bugs](https://github.com/react18-tools/nextjs-themes-ultra/issues/new?assignees=&labels=&projects=&template=bug_report.md&title=). ## Install -> A canonical package with a longer and more descriptive name is also published - `nextjs-themes-ultralight` +> A canonical package with a longer and more descriptive name is also published - `nextjs-themes-ultra` ```bash $ pnpm add nthul @@ -167,7 +167,7 @@ An elegant color-switch to toggle coloe-schemes ("dark" | "light" | "system"). ### HTML & CSS -That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, `nextjs-themes-ultralight` modifies the className on the `html` element, which you can easily use to style your app: +That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, `nthul` modifies the className on the `html` element, which you can easily use to style your app: ```css :root { @@ -210,7 +210,7 @@ That's it, your Next.js app fully supports dark mode, including System preferenc } ``` -Also see [Example CSS file](https://github.com/react18-tools/nextjs-themes-ultralight/blob/main/packages/shared-ui/src/globals.css) +Also see [Example CSS file](https://github.com/react18-tools/nextjs-themes-ultra/blob/main/packages/shared-ui/src/globals.css). #### When using `ServerTarget` @@ -328,7 +328,7 @@ export default function Page() { } ``` -> We are open to listening your feedback - [Discussions](https://github.com/react18-tools/nextjs-themes-ultralight/discussions) +> We are open to listening your feedback - [Discussions](https://github.com/react18-tools/nextjs-themes-ultra/discussions) ### With Styled Components and any CSS-in-JS @@ -428,7 +428,7 @@ cd nthul pnpm dev ``` -### 🤩 Don't forger to start [this repo](https://github.com/react18-tools/nextjs-themes-ultralight)! +### 🤩 Don't forger to start [this repo](https://github.com/react18-tools/nextjs-themes-ultra)! Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE) diff --git a/lib/nthul/lite.js b/lib/nthul/lite.js index 1850b551..928da1da 100644 --- a/lib/nthul/lite.js +++ b/lib/nthul/lite.js @@ -1,3 +1,4 @@ +/* eslint-disable no-undef -- ok*/ "use strict"; const fs = require("node:fs"); @@ -18,5 +19,5 @@ const owner = process.env.OWNER; readMe = readMe.replace(new RegExp(`$${owner}/${ref}`, "g"), tmp); readMe = readMe.replace(new RegExp(ref, "g"), packageJson.name); readMe = readMe.replace(new RegExp(tmp, "g"), `$${owner}/${ref}`); -readMe = readMe.replace(/## Want Lite Version(.|\n|\r)*You need r18gs as a peer-dependency/m, ""); +readMe = readMe.replace(/## Want Lite Version(?:.|\n|\r)*You need r18gs as a peer-dependency/m, ""); fs.writeFileSync(readMePath, readMe); diff --git a/lib/nthul/package.json b/lib/nthul/package.json index 66ffb46d..b68be335 100644 --- a/lib/nthul/package.json +++ b/lib/nthul/package.json @@ -8,12 +8,12 @@ "types": "./index.ts", "repository": { "type": "git", - "url": "git+https://github.com/react18-tools/nextjs-themes-ultralight.git" + "url": "git+https://github.com/react18-tools/nextjs-themes-ultra.git" }, "bugs": { - "url": "https://github.com/react18-tools/nextjs-themes-ultralight/issues" + "url": "https://github.com/react18-tools/nextjs-themes-ultra/issues" }, - "homepage": "https://github.com/react18-tools/nextjs-themes-ultralight/tree/main/lib/fork-me#readme", + "homepage": "https://github.com/react18-tools/nextjs-themes-ultra/tree/main/lib/fork-me#readme", "sideEffects": false, "license": "MIT", "scripts": { @@ -63,7 +63,7 @@ "nextjs13", "nextjs14", "nextjs-themes", - "nextjs-themes-ultralight", + "nextjs-themes-ultra", "nextjs13-themes", "nextjs14-themes", "tailwind", From 7cb7f226a201f42702a6c54a7bb890b30f6b4263 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Wed, 28 Feb 2024 08:38:19 +0530 Subject: [PATCH 2/7] Fix lite.js --- .github/workflows/publish.yml | 1 - lib/nthul/lite.js | 9 +++++---- lib/nthul/src/client/theme-switcher/theme-switcher.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index f7228c98..270dcb1b 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -56,7 +56,6 @@ jobs: - run: node lite.js && pnpm build && pnpm publish-package && node scope.js && pnpm publish-package env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} - OWNER: ${{ github.event.repository.owner.login }} - name: Publish package with long name for better SEO continue-on-error: true diff --git a/lib/nthul/lite.js b/lib/nthul/lite.js index 928da1da..bccff00e 100644 --- a/lib/nthul/lite.js +++ b/lib/nthul/lite.js @@ -8,16 +8,17 @@ const packageJson = require(path.resolve(__dirname, "package.json")); const ref = packageJson.name; packageJson.peerDependencies.r18gs = "^0"; +delete packageJson.dependencies; packageJson.name = `${packageJson.name}-lite`; fs.writeFileSync(path.resolve(__dirname, "package.json"), JSON.stringify(packageJson, null, 2)); const readMePath = path.resolve(__dirname, "..", "..", "README.md"); let readMe = fs.readFileSync(readMePath, { encoding: "utf8" }); -const tmp = "!--|--!"; -const owner = process.env.OWNER; -readMe = readMe.replace(new RegExp(`$${owner}/${ref}`, "g"), tmp); +const tmp = "!---!"; +const owner = "react18-tools"; +readMe = readMe.replace(new RegExp(`${owner}/${ref}`, "g"), tmp); readMe = readMe.replace(new RegExp(ref, "g"), packageJson.name); -readMe = readMe.replace(new RegExp(tmp, "g"), `$${owner}/${ref}`); +readMe = readMe.replace(new RegExp(tmp, "g"), `${owner}/${ref}`); readMe = readMe.replace(/## Want Lite Version(?:.|\n|\r)*You need r18gs as a peer-dependency/m, ""); fs.writeFileSync(readMePath, readMe); diff --git a/lib/nthul/src/client/theme-switcher/theme-switcher.tsx b/lib/nthul/src/client/theme-switcher/theme-switcher.tsx index 9f2fbb69..3e6f4a5c 100644 --- a/lib/nthul/src/client/theme-switcher/theme-switcher.tsx +++ b/lib/nthul/src/client/theme-switcher/theme-switcher.tsx @@ -11,7 +11,7 @@ export interface ThemeSwitcherProps { dontSync?: boolean; /** force apply CSS transition property to all the elements during theme switching. E.g., `all .3s` */ themeTransition?: string; - /** provide styles object if you are using CSS/SCSS modules. */ + /** provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules. */ styles?: Record; } From 1119db62c7a8491625cb84edfeaf97d9cdc50a48 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Wed, 28 Feb 2024 08:42:30 +0530 Subject: [PATCH 3/7] update packages --- examples/nextjs/package.json | 4 ++-- examples/vite/package.json | 8 ++++---- lib/nthul/package.json | 8 ++++---- packages/shared-ui/package.json | 6 +++--- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index e616b241..b089fe89 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -19,8 +19,8 @@ }, "devDependencies": { "@next/eslint-plugin-next": "^14.1.0", - "@types/node": "^20.11.20", - "@types/react": "^18.2.58", + "@types/node": "^20.11.21", + "@types/react": "^18.2.60", "@types/react-dom": "^18.2.19", "eslint-config-custom": "workspace:*", "tsconfig": "workspace:*", diff --git a/examples/vite/package.json b/examples/vite/package.json index 205a669c..2891d9b7 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -17,12 +17,12 @@ "shared-ui": "workspace:*" }, "devDependencies": { - "@types/react": "^18.2.58", + "@types/react": "^18.2.60", "@types/react-dom": "^18.2.19", - "@typescript-eslint/eslint-plugin": "^7.0.2", - "@typescript-eslint/parser": "^7.0.2", + "@typescript-eslint/eslint-plugin": "^7.1.0", + "@typescript-eslint/parser": "^7.1.0", "@vitejs/plugin-react-swc": "^3.6.0", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "typescript": "^5.3.3", diff --git a/lib/nthul/package.json b/lib/nthul/package.json index b68be335..d4e9190a 100644 --- a/lib/nthul/package.json +++ b/lib/nthul/package.json @@ -26,8 +26,8 @@ "devDependencies": { "@testing-library/react": "^14.2.1", "@turbo/gen": "^1.12.4", - "@types/node": "^20.11.20", - "@types/react": "^18.2.58", + "@types/node": "^20.11.21", + "@types/react": "^18.2.60", "@types/react-dom": "^18.2.19", "@vitejs/plugin-react": "^4.2.1", "@vitest/coverage-v8": "^1.3.1", @@ -39,7 +39,7 @@ "react": "^18.2.0", "tsconfig": "workspace:*", "tsup": "^8.0.2", - "typedoc": "^0.25.8", + "typedoc": "^0.25.9", "typescript": "^5.3.3", "vite-tsconfig-paths": "^4.3.1", "vitest": "^1.3.1" @@ -89,6 +89,6 @@ "turborepo-trmplate" ], "dependencies": { - "r18gs": "^0.0.3" + "r18gs": "^0.1.0" } } diff --git a/packages/shared-ui/package.json b/packages/shared-ui/package.json index 5e234888..55ca69da 100644 --- a/packages/shared-ui/package.json +++ b/packages/shared-ui/package.json @@ -11,8 +11,8 @@ }, "devDependencies": { "@mayank1513/fork-me": "^2.0.1", - "@types/node": "^20.11.20", - "@types/react": "^18.2.58", + "@types/node": "^20.11.21", + "@types/react": "^18.2.60", "@types/react-dom": "^18.2.19", "eslint-config-custom": "workspace:*", "next": "^14.1.0", @@ -22,6 +22,6 @@ "typescript": "5.3.3" }, "dependencies": { - "eslint": "^8.56.0" + "eslint": "^8.57.0" } } From 30b6821875b29b24fcc41db141246ff628977a79 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Wed, 28 Feb 2024 08:56:24 +0530 Subject: [PATCH 4/7] Add deepsource --- .deepsource.toml | 1 + 1 file changed, 1 insertion(+) create mode 100644 .deepsource.toml diff --git a/.deepsource.toml b/.deepsource.toml new file mode 100644 index 00000000..2ebc2a05 --- /dev/null +++ b/.deepsource.toml @@ -0,0 +1 @@ +version = 1 \ No newline at end of file From 633408e87582def56b5486ed30290456fdeb2a94 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Wed, 28 Feb 2024 09:18:31 +0530 Subject: [PATCH 5/7] fix CSS modules support --- .../src/client/theme-switcher/theme-switcher.tsx | 6 +++--- .../src/server/server-target/server-target.tsx | 15 +++++---------- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/lib/nthul/src/client/theme-switcher/theme-switcher.tsx b/lib/nthul/src/client/theme-switcher/theme-switcher.tsx index 3e6f4a5c..12cd9075 100644 --- a/lib/nthul/src/client/theme-switcher/theme-switcher.tsx +++ b/lib/nthul/src/client/theme-switcher/theme-switcher.tsx @@ -87,8 +87,8 @@ export interface ApplyClassesProps { } function applyClasses({ targets, theme, resolvedColorScheme, styles }: ApplyClassesProps) { - let cls = ["dark", "light", theme, resolvedColorScheme]; - if (styles) cls = cls.map(c => styles[c]); + let cls = ["dark", "light", `th-${theme}`, resolvedColorScheme]; + if (styles) cls = cls.map(c => styles[c] ?? c); targets.forEach(t => { t?.classList.remove(cls[0]); // dark @@ -96,7 +96,7 @@ function applyClasses({ targets, theme, resolvedColorScheme, styles }: ApplyClas t?.classList.forEach(c => { if (/(?:^|_)th-/.exec(c)) t.classList.remove(c); }); - t?.classList.add(`th-${cls[2]}`); // theme + t?.classList.add(cls[2]); // theme t?.classList.add(cls[3]); // resolvedColorScheme }); } diff --git a/lib/nthul/src/server/server-target/server-target.tsx b/lib/nthul/src/server/server-target/server-target.tsx index dbfe9a31..87b297aa 100644 --- a/lib/nthul/src/server/server-target/server-target.tsx +++ b/lib/nthul/src/server/server-target/server-target.tsx @@ -29,18 +29,13 @@ interface ServerTargetProps { export function ServerTarget({ tag, targetId, styles }: ServerTargetProps) { const key = targetId || DEFAULT_ID; const val = cookies().get(key)?.value ?? ",light"; - let [theme, cs] = val.split(",") as [string, string]; + const [theme, cs] = val.split(",") as [string, string]; /** to increase specificity for scoped targets. */ - let specificity = targetId ? "nth-scoped" : ""; + const specificity = targetId ? "nth-scoped" : ""; - if (styles) { - theme = styles[theme]; - cs = styles[cs]; - specificity = styles[specificity] ?? ""; - } - - const cls = `th-${theme} ${cs} ${specificity}`; + let classNames = [`th-${theme}`, cs, specificity]; + if (styles) classNames = classNames.map(cls => styles[cls] ?? cls); const Tag = tag ?? "div"; - return ; + return ; } From 223e7f9b54763cc61c88d66eaaf08d3be9ff5fc6 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Wed, 28 Feb 2024 09:34:42 +0530 Subject: [PATCH 6/7] Add force theme component to easily create page with forced theme --- .tkb | 4 +-- .../server/force-theme/force-theme.test.tsx | 17 +++++++++++ .../src/server/force-theme/force-theme.tsx | 29 +++++++++++++++++++ lib/nthul/src/server/force-theme/index.ts | 1 + lib/nthul/src/server/index.ts | 1 + .../server-target/server-target.test.tsx | 4 +-- .../generators/templates/component.test.hbs | 2 +- 7 files changed, 53 insertions(+), 5 deletions(-) create mode 100644 lib/nthul/src/server/force-theme/force-theme.test.tsx create mode 100644 lib/nthul/src/server/force-theme/force-theme.tsx create mode 100644 lib/nthul/src/server/force-theme/index.ts diff --git a/.tkb b/.tkb index 101ffdac..470fbd1e 100644 --- a/.tkb +++ b/.tkb @@ -14,7 +14,7 @@ "J1yONFe2BVs5GbQJj1SXG": { "id": "J1yONFe2BVs5GbQJj1SXG", "description": "Add ThemeContainer server component", - "columnId": "column-todo" + "columnId": "column-done" }, "G-1H47JpSI69kav1qZ-kp": { "id": "G-1H47JpSI69kav1qZ-kp", @@ -27,7 +27,6 @@ "id": "column-todo", "title": "To do", "tasksIds": [ - "J1yONFe2BVs5GbQJj1SXG", "G-1H47JpSI69kav1qZ-kp" ] }, @@ -40,6 +39,7 @@ "id": "column-done", "title": "Done", "tasksIds": [ + "J1yONFe2BVs5GbQJj1SXG", "p1R-Q4atxMo-29mSa7mb6", "-FlzW8htLo-6jz5-ZqjEx" ] diff --git a/lib/nthul/src/server/force-theme/force-theme.test.tsx b/lib/nthul/src/server/force-theme/force-theme.test.tsx new file mode 100644 index 00000000..fa4921bf --- /dev/null +++ b/lib/nthul/src/server/force-theme/force-theme.test.tsx @@ -0,0 +1,17 @@ +import { cleanup, render, screen } from "@testing-library/react"; +import { afterEach, describe, test } from "vitest"; +import { ForceTheme } from "./force-theme"; + +describe("force-theme", () => { + afterEach(cleanup); + + test("check specificity class exists", ({ expect }) => { + render(); + expect(screen.getByTestId("force-theme").classList).toContain("nth-scoped"); + }); + + test("force theme", ({ expect }) => { + render(); + expect(screen.getByTestId("force-theme").classList).toContain("th-my-theme"); + }); +}); diff --git a/lib/nthul/src/server/force-theme/force-theme.tsx b/lib/nthul/src/server/force-theme/force-theme.tsx new file mode 100644 index 00000000..76ed51c1 --- /dev/null +++ b/lib/nthul/src/server/force-theme/force-theme.tsx @@ -0,0 +1,29 @@ +import * as React from "react"; +import type { HTMLProps } from "react"; + +interface ForceThemeProps extends HTMLProps { + /** @defaultValue 'div' */ + tag?: keyof JSX.IntrinsicElements; + children?: React.ReactNode; + theme?: string; + colorScheme?: "dark" | "light"; + /** provide styles object if you are using CSS/SCSS modules. */ + styles?: Record; +} + +/** + * # ForceTheme + * + */ +export function ForceTheme({ children, tag, theme, colorScheme, styles, className, ...props }: ForceThemeProps) { + let classNames = [theme ? `th-${theme}` : "", colorScheme ?? "", "nth-scoped"]; + if (styles) classNames = classNames.map(cls => styles[cls] ?? cls); + if (className) classNames.push(className); + const Tag = tag ?? "div"; + return ( + // @ts-expect-error: too complex types for props. + + {children} + + ); +} diff --git a/lib/nthul/src/server/force-theme/index.ts b/lib/nthul/src/server/force-theme/index.ts new file mode 100644 index 00000000..fec657a7 --- /dev/null +++ b/lib/nthul/src/server/force-theme/index.ts @@ -0,0 +1 @@ +export * from "./force-theme"; diff --git a/lib/nthul/src/server/index.ts b/lib/nthul/src/server/index.ts index b439d6a4..15bb3baa 100644 --- a/lib/nthul/src/server/index.ts +++ b/lib/nthul/src/server/index.ts @@ -5,4 +5,5 @@ * */ // server component exports +export * from "./force-theme"; export * from "./server-target"; diff --git a/lib/nthul/src/server/server-target/server-target.test.tsx b/lib/nthul/src/server/server-target/server-target.test.tsx index 926f423d..ad288e15 100644 --- a/lib/nthul/src/server/server-target/server-target.test.tsx +++ b/lib/nthul/src/server/server-target/server-target.test.tsx @@ -37,11 +37,11 @@ describe("server-target", () => { }, }; const styles = { - [THEME]: `moduled-${THEME}`, + [`th-${THEME}`]: `moduled-${THEME}`, dark: `moduled-dark`, light: `moduled-light`, }; render(); - expect(screen.getByTestId("server-target").className).toBe(`th-${styles[THEME]} ${styles[COLOR_SCHEME]} `); + expect(screen.getByTestId("server-target").className).toBe(`${styles[`th-${THEME}`]} ${styles[COLOR_SCHEME]} `); }); }); diff --git a/lib/nthul/turbo/generators/templates/component.test.hbs b/lib/nthul/turbo/generators/templates/component.test.hbs index f08ba2b0..c816743b 100644 --- a/lib/nthul/turbo/generators/templates/component.test.hbs +++ b/lib/nthul/turbo/generators/templates/component.test.hbs @@ -2,7 +2,7 @@ import { cleanup, render, screen } from "@testing-library/react"; import { afterEach, describe, test } from "vitest"; import { {{ pascalCase name }} } from "./{{ kebabCase name }}"; -describe.concurrent("{{ kebabCase name }}", () => { +describe("{{ kebabCase name }}", () => { afterEach(cleanup); test("check if h1 heading exists", ({ expect }) => { From ffef8e1ad385e2b6bb07c15e1fc2256d153a8a27 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Wed, 28 Feb 2024 09:41:07 +0530 Subject: [PATCH 7/7] Changeset --- examples/nextjs/CHANGELOG.md | 8 ++++++++ examples/nextjs/package.json | 2 +- examples/vite/CHANGELOG.md | 8 ++++++++ examples/vite/package.json | 2 +- lib/nthul/CHANGELOG.md | 7 +++++++ lib/nthul/package.json | 2 +- 6 files changed, 26 insertions(+), 3 deletions(-) diff --git a/examples/nextjs/CHANGELOG.md b/examples/nextjs/CHANGELOG.md index 06b7582d..a5438e7c 100644 --- a/examples/nextjs/CHANGELOG.md +++ b/examples/nextjs/CHANGELOG.md @@ -1,5 +1,13 @@ # nextjs-example +## 0.0.3 + +### Patch Changes + +- Updated dependencies + - nthul@0.2.0 + - shared-ui@0.0.0 + ## 0.0.2 ### Patch Changes diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index b089fe89..0590168e 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "nextjs-example", - "version": "0.0.2", + "version": "0.0.3", "private": true, "scripts": { "dev": "next dev", diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md index 68a8b01f..057819df 100644 --- a/examples/vite/CHANGELOG.md +++ b/examples/vite/CHANGELOG.md @@ -1,5 +1,13 @@ # vite-example +## 0.0.3 + +### Patch Changes + +- Updated dependencies + - nthul@0.2.0 + - shared-ui@0.0.0 + ## 0.0.2 ### Patch Changes diff --git a/examples/vite/package.json b/examples/vite/package.json index 2891d9b7..20508319 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,7 +1,7 @@ { "name": "vite-example", "private": true, - "version": "0.0.2", + "version": "0.0.3", "type": "module", "scripts": { "dev": "vite --port 3001", diff --git a/lib/nthul/CHANGELOG.md b/lib/nthul/CHANGELOG.md index ba737b62..ab738c8d 100644 --- a/lib/nthul/CHANGELOG.md +++ b/lib/nthul/CHANGELOG.md @@ -1,5 +1,12 @@ # @mayank1513/fork-me +## 0.2.0 + +### Minor Changes + +- Add ForceTheme component for easily creating forced pages. + Fix CSS Modules Support. + ## 0.1.0 ### Minor Changes diff --git a/lib/nthul/package.json b/lib/nthul/package.json index d4e9190a..3cf97fbd 100644 --- a/lib/nthul/package.json +++ b/lib/nthul/package.json @@ -2,7 +2,7 @@ "name": "nthul", "author": "Mayank Kumar Chaudhari ", "private": false, - "version": "0.1.0", + "version": "0.2.0", "description": "Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.", "main": "./index.ts", "types": "./index.ts",