Merge pull request #44 from react18-tools/squize

Squize

examples/pages-router/cache/config.json

@@ -0,0 +1,6 @@
+{
+	"telemetry": {
+		"notifiedAt": "1715050199607",
+		"enabled": false
+	}
+}

examples/pages-router/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3003",
+    "dev": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

examples/tailwind/cache/config.json

@@ -0,0 +1,6 @@
+{
+	"telemetry": {
+		"notifiedAt": "1715050199607",
+		"enabled": false
+	}
+}

examples/tailwind/package.json

@@ -3,26 +3,29 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "clean": "rm -rf .next",
+    "dev": "next dev -p 3003",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit",
+    "start": "next start"
   },
   "dependencies": {
-    "@mayank1513/fork-me": "^2.1.2",
+    "@repo/scripts": "workspace:*",
+    "@repo/shared": "workspace:*",
     "next": "^14.2.4",
     "nextjs-themes": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^14.2.4",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
-    "eslint": "9.5.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.2"

examples/tailwind/src/app/page.tsx

@@ -1,4 +1,3 @@
-import { StarMe } from "@mayank1513/fork-me";
 import Image from "next/image";
 import { ColorSwitch } from "nextjs-themes";
 import Card from "./_components/card";
@@ -48,19 +47,6 @@ export default function Home() {
           title="Examples"
           text="Learn through more examples on official GitHub repo."
         />
-        <StarMe
-          gitHubUrl="https://github.com/react18-tools/nextjs-themes"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
-          <h2 className={"mb-3 text-2xl font-semibold"}>
-            Star Me{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-            Explore and star official <code>nextjs-themes</code> repo.
-          </p>
-        </StarMe>
         <Card
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           title="Deploy"

examples/themes/.eslintrc.js

@@ -0,0 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["@repo/eslint-config/next.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

examples/themes/cache/config.json

@@ -0,0 +1,6 @@
+{
+	"telemetry": {
+		"notifiedAt": "1715050199607",
+		"enabled": false
+	}
+}

examples/themes/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/themes/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+};

examples/themes/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@example/themes",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "clean": "rm -rf .next",
+    "dev": "next dev -p 3004",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit",
+    "start": "next start",
+    "postinstall": "next telemetry disable"
+  },
+  "dependencies": {
+    "@repo/scripts": "workspace:*",
+    "@repo/shared": "workspace:*",
+    "next": "^14.2.4",
+    "nextjs-darkmode": "^1.0.4",
+    "nextjs-themes": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react18-loaders": "^1.1.3"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "^14.2.4",
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.2"
+  }
+}

examples/themes/src/app/layout.tsx

@@ -0,0 +1,15 @@
+import "@repo/shared/dist/index.css";
+import "@repo/shared/dist/global.css";
+import { ThemeSwitcher } from "nextjs-themes";
+
+/** Layout colorScheme is forced to '' to ensure theme is resolved and not darkTheme and lightTheme.*/
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeSwitcher forcedColorScheme="" />
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}

examples/themes/src/app/page.module.css

@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}

examples/themes/src/app/page.tsx

@@ -0,0 +1,25 @@
+import styles from "./page.module.css";
+import { ThemeSelector } from "@repo/shared";
+
+export default function Page() {
+  return (
+    <div className={styles.container}>
+      <h1>Simple Multi Theme</h1>
+      <hr />
+      <p>
+        This example demonstrates how to use <code>nextjs-themes</code> for simple multi-theme
+        switching.
+      </p>
+      <ThemeSelector scope="" />
+      <p>
+        Ensure you set or force <code>colorSchemePreference</code> to an empty string{" "}
+        <code>""</code>. Other values for the color scheme will cause <code>darkTheme</code> and{" "}
+        <code>lightTheme</code> to be assigned as <code>resolvedTheme</code>.
+      </p>
+      <p>
+        Another approach is to use <code>theme</code> instead of <code>resolvedTheme</code>. In CSS,
+        this means using the <code>data-th</code> attribute instead of <code>data-theme</code>.
+      </p>
+    </div>
+  );
+}

examples/themes/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "exclude": ["node_modules"],
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["src", "next.config.js", "next-env.d.ts", ".next/types/**/*.ts"]
+}

examples/themes/turbo.json

@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "//"
+  ],
+  "tasks": {
+    "build": {
+      "outputs": [
+        ".next/**",
+        "!.next/cache/**"
+      ]
+    }
+  }
+}

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # nextjs-themes
 
+## 4.0.4-squize.0
+
+### Patch Changes
+
+- 04ea9ea: Attempt to Squeeze out...
+
 ## 4.0.3
 
 ### Patch Changes

lib/src/client/color-switch/color-switch.tsx

@@ -40,7 +40,7 @@ export const ColorSwitch = ({
       // skipcq: JS-0417
       onClick={() => toggleColorScheme(skipSystem)}
       // @ts-expect-error -- setting custom attribute
-      style={{ "--s": `${size}px` }}
+      style={{ "--s": size + "px" }}
       {...props}
     />
   );

lib/src/client/switcher/switcher.tsx

@@ -41,7 +41,7 @@ export const Switcher = ({
   targetSelector,
   themeTransition,
 }: ThemeSwitcherProps) => {
-  const k = targetSelector || `#${DEFAULT_ID}`;
+  const k = targetSelector || "#" + DEFAULT_ID;
 
   const [state, setState] = useThemeStore(targetSelector);
   const [forced] = useForcedStore(targetSelector);

lib/src/client/theme-switcher/no-fouc.ts

@@ -46,8 +46,8 @@ export const noFOUCScript = (
     const el = document.querySelector(key) ?? document.documentElement;
     let classes = [];
     keys.forEach((key, index) => {
-      classes.push(`${key}-${values[index]}`);
-      el.setAttribute(`data-${key}`, values[index]);
+      classes.push(key + "-" + values[index]);
+      el.setAttribute("data-" + key, values[index]);
     });
     classes[0] = values[0];
     if (styles) classes = classes.map(cls => styles[cls] ?? cls);

lib/src/client/theme-switcher/theme-switcher.tsx

@@ -46,14 +46,14 @@ const Script = ({
   forcedColorScheme,
 }: ThemeSwitcherProps) => {
   const args = [
-    targetSelector || `#${DEFAULT_ID}`,
+    targetSelector || "#" + DEFAULT_ID,
     initialState,
     styles,
     forcedTheme,
     forcedColorScheme,
   ] as ScriptArgs;
   // handle client side exceptions when script is not run. <- for client side apps like vite or CRA
-  if (typeof window !== "undefined" && !window.m) noFOUCScript(...args);
+  typeof window !== "undefined" && noFOUCScript(...args);
   return (
     <script
       // skipcq: JS-0440

lib/src/store.ts

@@ -27,7 +27,7 @@ export const initialState: ThemeStoreType = {
 
 /** @internal store */
 export const useThemeStore = (targetSelector?: string) => {
-  const key = targetSelector ?? `#${DEFAULT_ID}`;
+  const key = targetSelector ?? "#" + DEFAULT_ID;
   return useRGS<ThemeStoreType>(key, () => {
     const str = typeof m !== "undefined" && localStorage.getItem(key);
     return str ? { ...JSON.parse(str), s: m.matches ? DARK : LIGHT } : initialState;

packages/shared/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.2-squize.0
+
+### Patch Changes
+
+- Updated dependencies [04ea9ea]
+  - [email protected]
+
 ## 0.0.1
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.1",
+  "version": "0.0.2-squize.0",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",

packages/shared/src/client/theme-controller/index.ts

@@ -1,2 +1,3 @@
 export * from "./theme-controller";
 export * from "./themes";
+export * from "./theme-selector";

packages/shared/src/global.scss

@@ -125,13 +125,20 @@ body,
   display: flex;
   flex-direction: column;
   background: var(--bg-color);
+  color: var(--text-color);
 }
 
 a {
   color: inherit;
   text-decoration: none;
 }
 
+code {
+  padding: 1px 5px;
+  box-shadow: 0 0 2px currentColor inset;
+  border-radius: 20px;
+}
+
 // utils
 .grow {
   flex-grow: 1;