@krizaka/config 0.3.0 → 0.4.0

package/README.md

@@ -48,6 +48,7 @@ the package.
 | `@krizaka/config/eslint/next` | `krizakaNext`: `eslint-config-next` (core web vitals + TypeScript, which already carry typescript-eslint, React hooks and import) + the same basics. |
 | `@krizaka/config/eslint/krizaka-ui` | `krizakaUi(options?)`: the four UI rules below. Also `krizakaUiRules` and `krizakaUiRestrictedSyntax(options?)`. |
 | `@krizaka/config/eslint/no-locale-ternary` | `noLocaleTernary(options?)`: `krizaka/no-locale-ternary` — no `locale === "fr" ? … : …` outside routing code. |
+| `@krizaka/config/eslint/ui-warnings` | `krizakaUiWarnings(options?)`: the same two debts as named plugin rules, as warnings — `krizaka/no-light-variant` (no `light:`: tokens do the theming) and `krizaka/no-raw-palette` (no `bg-zinc-900`, `text-violet-400`: a role; `allow` families). `krizaka-ratchet` counts them (`light`, `palette`), so a product adopts them now and brings the counts to 0. |
 | `@krizaka/config/eslint/stack` | `krizakaStack(options?)`: the three stack rules below (warnings). Also `STACK_RULES`. |
 | `@krizaka/config/eslint/plugin` | `krizakaPlugin`: the `krizaka` plugin carrying every rule, for a hand-written config. |
 | `@krizaka/config/dependency-cruiser` | The shared dependency-cruiser config: `krizaka-no-direct-tanstack` (no `@tanstack/*` from an app). |

package/eslint/plugin.js

@@ -1,6 +1,6 @@
 // The `krizaka` ESLint plugin: one object carrying every rule, so that configs registering it compose (flat config
 // refuses two different objects under the same plugin name).
-import { envName, noDirectTanstackImport, noFetchInClientEffect, noLocaleTernaryRule, noLocalTableOrForm } from "./rules.js";
+import { envName, noDirectTanstackImport, noFetchInClientEffect, noLightVariant, noLocaleTernaryRule, noLocalTableOrForm, noRawPalette } from "./rules.js";
 
 /** @type {import("eslint").ESLint.Plugin} */
 export const krizakaPlugin = {
@@ -10,6 +10,8 @@ export const krizakaPlugin = {
     "no-fetch-in-client-effect": noFetchInClientEffect,
     "no-direct-tanstack-import": noDirectTanstackImport,
     "no-local-table-or-form": noLocalTableOrForm,
+    "no-light-variant": noLightVariant,
+    "no-raw-palette": noRawPalette,
     "env-name": envName,
   },
 };

package/eslint/rules.js

@@ -3,7 +3,7 @@
 import { existsSync, readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 
-import { countFormFields, EFFECT_NAMES_SOURCE, FETCH_NAMES_SOURCE, TANSTACK_SCOPE } from "../patterns.js";
+import { countFormFields, EFFECT_NAMES_SOURCE, FETCH_NAMES_SOURCE, LIGHT_VARIANT_SOURCE, paletteSource, TANSTACK_SCOPE } from "../patterns.js";
 
 /** @typedef {import("eslint").Rule.RuleModule} RuleModule */
 /** @typedef {import("estree").Node} Node */
@@ -264,3 +264,40 @@ export const envName = {
     };
   },
 };
+
+/**
+ * A rule that reports the className strings (literals and template chunks, in `className` attributes) matching a pattern.
+ * @param {(options: { allow?: string[] }) => RegExp} pattern
+ * @param {string} message
+ * @returns {RuleModule}
+ */
+function classNameRule(pattern, message) {
+  return {
+    meta: {
+      type: "suggestion",
+      docs: { description: message },
+      schema: [{ type: "object", properties: { allow: { type: "array", items: { type: "string" } } }, additionalProperties: false }],
+      messages: { found: message },
+    },
+    create(context) {
+      const options = /** @type {{ allow?: string[] }} */ (context.options[0] ?? {});
+      const regex = pattern(options);
+      const check = (/** @type {Node} */ node, /** @type {unknown} */ value) => {
+        if (typeof value === "string" && regex.test(value)) context.report({ node, messageId: "found" });
+      };
+      return {
+        "JSXAttribute[name.name='className'] Literal": (/** @type {any} */ node) => check(node, node.value),
+        "JSXAttribute[name.name='className'] TemplateElement": (/** @type {any} */ node) => check(node, node.value.cooked),
+      };
+    },
+  };
+}
+
+/** `krizaka/no-light-variant`: a theme is a set of tokens, never a `light:` variant (a dark island: `.theme-dark`). */
+export const noLightVariant = classNameRule(() => new RegExp(LIGHT_VARIANT_SOURCE), "`light:` is forbidden in products: a theme is a set of tokens. A dark island? `.theme-dark` on the ancestor.");
+
+/** `krizaka/no-raw-palette`: a component reads a role (`bg-surface-1`, `text-accent`), never a palette step (`bg-zinc-900`). */
+export const noRawPalette = classNameRule(
+  ({ allow = [] }) => new RegExp(paletteSource(allow)),
+  "Raw palette colour: use a role (bg-surface-1, text-fg-secondary, border-border-default, text-accent, text-danger).",
+);

package/eslint/ui-warnings.js

@@ -0,0 +1,28 @@
+// The two UI rules as named plugin rules, for the adoption: `krizaka/no-light-variant` (no `light:` — tokens do the
+// theming) and `krizaka/no-raw-palette` (no `bg-zinc-900`, `text-violet-400`… — a role). Warnings: krizaka-ratchet counts
+// the same patterns (`light`, `palette`), so a product adopts them now and brings each count to 0 by the end of its
+// adoption. `krizakaUi()` stays the strict (error) set, on `no-restricted-syntax`.
+import { krizakaPlugin } from "./plugin.js";
+
+/** The rule names, as configured. */
+export const UI_WARNING_RULES = Object.freeze(["krizaka/no-light-variant", "krizaka/no-raw-palette"]);
+
+/**
+ * Flat config: the two named UI rules on a product's components.
+ * @param {{ allow?: string[], files?: string[], ignores?: string[], severity?: "warn" | "error" }} [options]
+ *   `allow`: palette families tolerated for documented, isolated cases.
+ * @returns {import("eslint").Linter.Config[]}
+ */
+export function krizakaUiWarnings({ allow = [], files = ["**/*.{jsx,tsx}"], ignores = [], severity = "warn" } = {}) {
+  return [
+    {
+      name: "krizaka/ui-warnings",
+      files,
+      ...(ignores.length > 0 ? { ignores } : {}),
+      plugins: { krizaka: krizakaPlugin },
+      rules: { "krizaka/no-light-variant": severity, "krizaka/no-raw-palette": [severity, { allow }] },
+    },
+  ];
+}
+
+export default krizakaUiWarnings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/config",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The shared configuration of every Krizaka JavaScript repository: ESLint flat configs (base, Next.js, the four UI rules, the three stack rules, no locale ternary), the dependency-cruiser boundary, tsconfig bases, Prettier, EditorConfig, and the krizaka-ratchet debt counter.",
   "keywords": [
     "krizaka",
@@ -12,7 +12,7 @@
     "dependency-cruiser",
     "tanstack"
   ],
-  "homepage": "https://github.com/krizaka/krizaka-ui/tree/main/packages/config#readme",
+  "homepage": "https://www.krizaka.com/en/docs/ui",
   "bugs": "https://github.com/krizaka/krizaka-ui/issues",
   "repository": {
     "type": "git",
@@ -28,6 +28,7 @@
     "./eslint/krizaka-ui": "./eslint/krizaka-ui.js",
     "./eslint/no-locale-ternary": "./eslint/no-locale-ternary.js",
     "./eslint/stack": "./eslint/stack.js",
+    "./eslint/ui-warnings": "./eslint/ui-warnings.js",
     "./eslint/env-names": "./eslint/env-names.js",
     "./eslint/plugin": "./eslint/plugin.js",
     "./dependency-cruiser": "./dependency-cruiser.cjs",