feat:eslint plugin (#16)

* eslint plugin ready to test

* working eslint plugin

* working v1

* published beta.1 lint package

* add correct deps

* update lockfile

Author: Austin1serb

eslint.config.js

@@ -67,21 +67,4 @@ export default [
 	},
 
 	/* 5 - JSX files */
-	{
-		files: ['**/*.jsx'],
-		plugins: { node: nodePlugin, import: importPlugin },
-		languageOptions: {
-			ecmaVersion: 'latest',
-			sourceType: 'module',
-			globals: { ...nodeGlobals, ...browserGlobals },
-			parserOptions: { ecmaFeatures: { jsx: true } },
-		},
-		rules: {
-			'node/no-unsupported-features/es-syntax': 'off',
-			'import/no-unresolved': 'error',
-			'import/named': 'error',
-			'import/default': 'error',
-			'import/no-absolute-path': 'error',
-		},
-	},
 ];

package.json

@@ -8,13 +8,16 @@
 	"workspaces": [
 		"packages/*"
 	],
-	"packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad",
+	"packageManager": "pnpm@10.13.1",
 	"references": [
 		{
 			"path": "packages/core"
 		},
 		{
 			"path": "packages/cli"
+		},
+		{
+			"path": "packages/eslint-plugin-react-zero-ui"
 		}
 	],
 	"scripts": {
@@ -37,15 +40,16 @@
 		"size": "npx esbuild ./packages/core/dist/index.js --bundle --minify --format=esm --external:react --define:process.env.NODE_ENV='\"production\"' | gzip -c | wc -c"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.30.1",
-		"@types/node": "^24.0.13",
-		"esbuild": "^0.25.6",
-		"eslint": "^9.30.1",
+		"@eslint/js": "^9.32.0",
+		"@types/node": "^24.1.0",
+		"esbuild": "^0.25.8",
+		"eslint": "^9.32.0",
 		"eslint-plugin-import": "^2.32.0",
 		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-react-zero-ui": "workspace:*",
 		"prettier": "^3.6.2",
 		"release-please": "^17.1.1",
 		"tsx": "^4.20.3",
-		"typescript": "^5.8.3"
+		"typescript": "^5.9.2"
 	}
-}
+}

packages/core/__tests__/fixtures/next/app/LintFailures.tsx

@@ -0,0 +1,52 @@
+'use client';
+import { useScopedUI } from '@react-zero-ui/core';
+
+/**
+ * This component is intentionally WRONG.
+ * – Missing data-attr on <section>
+ * – Missing ref attachment on <aside>
+ *
+ * The Zero-UI ESLint rule should flag both.
+ */
+export default function LintFailures() {
+	// #1  Setter attached but no data-scope attr  →  missingAttr error
+	const [scope, setScope] = useScopedUI<'off' | 'on'>('scope', 'off');
+
+	// #2  No ref at all  →  missingRef error
+	const [, setDialog] = useScopedUI<'open' | 'closed'>('dialog', 'closed');
+
+	return (
+		<main className="space-y-6 p-6">
+			{/* ❌ lint error expected here */}
+			<section
+				ref={setScope.ref}
+				className="scope-off:bg-red-100 scope-on:bg-red-600 scope-on:text-white p-4 rounded">
+				<button
+					className="border px-3 py-1"
+					onClick={() => setScope((prev) => (prev === 'on' ? 'off' : 'on'))}>
+					Toggle scope
+				</button>
+			</section>
+
+			{/* ❌ second lint error (missing .ref) */}
+			<aside className="dialog-open:block dialog-closed:hidden">
+				This dialog was never linked via <code>ref</code>
+			</aside>
+		</main>
+	);
+}
+
+/* ------------------------------------------------------------------ *
+ |  Correct version (for reference)                                   |
+ * ------------------------------------------------------------------ *
+  const [scope, setScope] = useScopedUI<'off' | 'on'>('scope', 'off');
+  <section
+    data-scope={scope}
+    ref={setScope.ref}
+  >
+    …
+  </section>
+
+  const [, setDialog] = useScopedUI<'open'|'closed'>('dialog','closed');
+  <aside ref={setDialog.ref} data-dialog="closed">…</aside>
+*/

packages/core/__tests__/fixtures/next/app/test/page.jsx

@@ -16,6 +16,7 @@
 		"@tailwindcss/postcss": "^4.1.10",
 		"@types/node": "24.0.0",
 		"@types/react": "19.1.7",
+		"eslint-plugin-react-zero-ui": "0.0.1-beta.1",
 		"postcss": "^8.5.5",
 		"tailwindcss": "^4.1.10",
 		"typescript": "5.8.3"

packages/core/__tests__/fixtures/next/package.json

@@ -94,4 +94,4 @@
 		"@types/react": "^19.1.8",
 		"tsx": "^4.20.3"
 	}
-}
+}

packages/core/package.json

@@ -0,0 +1,14 @@
+/* AUTO-GENERATED - DO NOT EDIT */
+export declare const bodyAttributes: {
+  "data-child": "closed" | "open";
+  "data-faq": "closed" | "open";
+  "data-mobile": "false" | "true";
+  "data-number": "1" | "2";
+  "data-scope": "off" | "on";
+  "data-theme": "dark" | "light";
+  "data-theme-2": "dark" | "light";
+  "data-theme-three": "dark" | "light";
+  "data-toggle-boolean": "false" | "true";
+  "data-toggle-function": "black" | "blue" | "green" | "red" | "white";
+  "data-use-effect-theme": "dark" | "light";
+};

packages/eslint-plugin-react-zero-ui/__tests__/fixtures/next/.zero-ui/attributes.d.ts

@@ -0,0 +1,14 @@
+/* AUTO-GENERATED - DO NOT EDIT */
+export const bodyAttributes = {
+  "data-child": "closed",
+  "data-faq": "closed",
+  "data-mobile": "false",
+  "data-number": "1",
+  "data-scope": "off",
+  "data-theme": "light",
+  "data-theme-2": "light",
+  "data-theme-three": "light",
+  "data-toggle-boolean": "true",
+  "data-toggle-function": "white",
+  "data-use-effect-theme": "light"
+};

packages/eslint-plugin-react-zero-ui/__tests__/fixtures/next/.zero-ui/attributes.js

@@ -0,0 +1,20 @@
+import { type UISetterFn } from '@react-zero-ui/core';
+
+export function ChildComponent({ setIsOpen }: { setIsOpen: UISetterFn }) {
+	return (
+		<div
+			className="child-closed:bg-gray-100 child-open:bg-gray-900 child-open:text-white"
+			data-testid="child-container">
+			<button
+				type="button"
+				onClick={() => setIsOpen((prev) => (prev === 'closed' ? 'open' : 'closed'))}
+				className="border-2 border-red-500"
+				data-testid="child-toggle">
+				Toggle Child
+			</button>
+			<div className="child-closed:bg-gray-100 child-open:bg-gray-900 flex">
+				Child: <span className="child-open:block child-closed:hidden">Open</span> <span className="child-closed:block child-open:hidden">Closed</span>
+			</div>
+		</div>
+	);
+}