@krizaka/config 0.4.2 → 0.6.0

package/README.md

@@ -151,6 +151,7 @@ npx krizaka-ratchet --json      # in CI: the same check, machine-readable
 | `directTanstackImport` | `from` / `import` / `import(` / `require(` of `"@tanstack/…"` |
 | `localTableOrForm` | `<table`, and `<form` … `</form>` holding more fields than `maxFormFields` (default 1) |
 | `retiredImport` | an import of a dependency listed in `retire` (e.g. `["framer-motion"]`): the way out of a dependency |
+| `routeStateSelection` | a Tabs / chip group / choice grid / segmented switch (incl. `RadioGroup.Root variant="segmented"`) / toggle group of a view driven by local state (`value`, `defaultValue`, `onValueChange`) without `routeKey`, and without `// @ephemeral: <reason>`: the URL is the state |
 
 The UI counters scan `app/**/*.tsx`, `components/**/*.tsx` and `src/**/*.tsx` by default (`node_modules`, `dist`,
 `.next` never), or the globs given on the command line; the stack counters scan every source file (`js`, `jsx`, `mjs`,

package/bin/krizaka-ratchet.mjs

@@ -27,6 +27,7 @@ const LABELS = {
   directTanstackImport: "direct @tanstack/* imports",
   localTableOrForm: "hand-written tables / forms",
   retiredImport: "imports of retired deps",
+  routeStateSelection: "selections in local state (not the URL)",
 };
 
 let args;

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, noLightVariant, noLocaleTernaryRule, noLocalTableOrForm, noRawPalette } from "./rules.js";
+import { envName, noDirectTanstackImport, noFamilySwitcher, noFetchInClientEffect, noLightVariant, noLocaleTernaryRule, noLocalTableOrForm, noRawPalette,routeStateSelection } from "./rules.js";
 
 /** @type {import("eslint").ESLint.Plugin} */
 export const krizakaPlugin = {
@@ -13,6 +13,8 @@ export const krizakaPlugin = {
     "no-light-variant": noLightVariant,
     "no-raw-palette": noRawPalette,
     "env-name": envName,
+    "no-family-switcher": noFamilySwitcher,
+    "route-state-selection": routeStateSelection,
   },
 };
 

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, LIGHT_VARIANT_SOURCE, paletteSource, TANSTACK_SCOPE } from "../patterns.js";
+import { countFormFields, EFFECT_NAMES_SOURCE, FETCH_NAMES_SOURCE, isLocalSelection, LIGHT_VARIANT_SOURCE, paletteSource, TANSTACK_SCOPE } from "../patterns.js";
 
 /** @typedef {import("eslint").Rule.RuleModule} RuleModule */
 /** @typedef {import("estree").Node} Node */
@@ -100,6 +100,51 @@ export const noDirectTanstackImport = {
   },
 };
 
+/** Oussama, 2026-10-22: « changer les tabs doit changer les routes » — a selection of a page lives in the URL. */
+/** @type {RuleModule} */
+export const routeStateSelection = {
+  meta: {
+    type: "problem",
+    docs: { description: "A Tabs / segmented / toggle / chip-group selection in a page keeps its state in the URL (routeKey), not in local state." },
+    schema: [],
+    messages: {
+      local:
+        "This selection is local state: changing it does not change the URL. Bind it to the route with `routeKey=\"…\"` (and `routeValues`, see `useRouteState` in @krizaka/ui/router), or justify it with `// @ephemeral: <reason>` on this line or the one above.",
+    },
+  },
+  create(context) {
+    const source = context.sourceCode;
+    return {
+      JSXOpeningElement: (/** @type {Node} */ node) => {
+        const lines = source.lines;
+        const line = /** @type {import("estree").SourceLocation} */ (node.loc).start.line;
+        if (isLocalSelection(source.getText(node), lines[line - 2] ?? "")) context.report({ node, messageId: "local" });
+      },
+    };
+  },
+};
+
+/** Oussama, 2026-10-22: krizaka.com is the only way back between the sites; no site carries the family switcher. */
+/** @type {RuleModule} */
+export const noFamilySwitcher = {
+  meta: {
+    type: "problem",
+    docs: { description: "Forbid the family switcher (NavBar.Family): krizaka.com is the only link back between the Krizaka sites." },
+    schema: [],
+    messages: {
+      family:
+        "No family switcher (NavBar.Family) on any site: krizaka.com is the only way back. The footer carries one quiet « A Krizaka project » link to https://www.krizaka.com (SiteFooter).",
+    },
+  },
+  create(context) {
+    return {
+      "JSXMemberExpression[object.name='NavBar'][property.name='Family']": (/** @type {Node} */ node) => context.report({ node, messageId: "family" }),
+      "JSXIdentifier[name='NavBarFamily']": (/** @type {Node} */ node) => context.report({ node, messageId: "family" }),
+      "ImportSpecifier[imported.name='NavBarFamily']": (/** @type {Node} */ node) => context.report({ node, messageId: "family" }),
+    };
+  },
+};
+
 /** S2, S3: a table is `@krizaka/ui/data-table`, a form is `@krizaka/ui/form` — except a form of a single field. */
 /** @type {RuleModule} */
 export const noLocalTableOrForm = {

package/eslint/stack.js

@@ -8,6 +8,8 @@ export const STACK_RULES = Object.freeze([
   "krizaka/no-fetch-in-client-effect",
   "krizaka/no-direct-tanstack-import",
   "krizaka/no-local-table-or-form",
+  "krizaka/no-family-switcher",
+  "krizaka/route-state-selection",
 ]);
 
 /**
@@ -32,6 +34,10 @@ export function krizakaStack({
         "krizaka/no-fetch-in-client-effect": severity,
         "krizaka/no-direct-tanstack-import": severity,
         "krizaka/no-local-table-or-form": [severity, { maxFormFields }],
+        // Never a warning: the family switcher is gone from every site (krizaka.com is the only way back).
+        "krizaka/no-family-switcher": "error",
+        // A selection of a view (tabs, segmented, toggles, chip groups) lives in the URL, not in local state.
+        "krizaka/route-state-selection": severity,
       },
     },
   ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/config",
-  "version": "0.4.2",
+  "version": "0.6.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",
@@ -108,7 +108,7 @@
         "ratchet/ratchet.js",
         "patterns.js"
       ],
-      "limit": "8 kB",
+      "limit": "9 kB",
       "gzip": true
     }
   ],

package/patterns.js

@@ -115,3 +115,57 @@ export function balancedArguments(source, open) {
   }
   return source.slice(open + 1);
 }
+
+// ── Selections live in the URL (Oussama, 2026-10-22: « changer les tabs doit changer les routes ») ──────────────────────
+// Read by the ESLint rule krizaka/route-state-selection and by the ratchet.
+
+/** The selection components whose choice belongs in the URL: tabs, a segmented switch, toggle groups, chip groups, choice tiles. */
+export const SELECTION_COMPONENTS = Object.freeze(["Tabs.Root", "TabsRoot", "Chip.Group", "ChipGroup", "ChoiceGrid", "SegmentedControl", "ToggleGroup", "ToggleGroup.Root", "RadioGroup.Root"]);
+
+/** The props that make a selection local: its own value, its starting value, its change handler. */
+export const LOCAL_SELECTION_PROPS = Object.freeze(["value", "defaultValue", "onValueChange"]);
+
+/** The prop that binds it to the URL. */
+export const ROUTE_KEY_PROP = "routeKey";
+
+/** The justification that keeps a local selection: `// @ephemeral: a hover card's tab` on the line or the line above. */
+export const EPHEMERAL_SOURCE = String.raw`@ephemeral:\s*\S`;
+
+
+/** The opening tags (`<Tabs.Root … >`) of the selection components in a source text, each with the line above it. */
+export function selectionTags(/** @type {string} */ source) {
+  /** @type {{ tag: string, before: string }[]} */
+  const found = [];
+  const names = SELECTION_COMPONENTS.map((n) => n.replace(".", "\\.")).join("|");
+  for (const open of source.matchAll(new RegExp(`<(?:${names})(?![\\w.])`, "g"))) {
+    let depth = 0;
+    let end = open.index;
+    for (; end < source.length; end += 1) {
+      const c = source[end];
+      if (c === "{") depth += 1;
+      else if (c === "}") depth -= 1;
+      else if (c === ">" && depth === 0) break;
+    }
+    const lineStart = source.lastIndexOf("\n", open.index - 1);
+    const before = lineStart < 0 ? "" : source.slice(source.lastIndexOf("\n", lineStart - 1) + 1, lineStart);
+    found.push({ tag: source.slice(open.index, end + 1), before });
+  }
+  return found;
+}
+
+/**
+ * Is this opening tag a selection driven by local state? `tag` is its source (`<Tabs.Root value={x} onValueChange={set}>`),
+ * `before` the text of the line above it.
+ * @param {string} tag
+ * @param {string} [before]
+ */
+export function isLocalSelection(tag, before = "") {
+  const name = /^<([A-Za-z][\w.]*)/.exec(tag)?.[1];
+  if (!name || !SELECTION_COMPONENTS.includes(name)) return false;
+  // A radio group is a form field unless it is drawn as a segmented switch (`variant="segmented"`): that one is a view's selection.
+  if (name === "RadioGroup.Root" && !/\bvariant\s*=\s*["']segmented["']/.test(tag)) return false;
+  const hasProp = (/** @type {string} */ prop) => new RegExp(`\\b${prop}\\s*(=|\\{|\\s|/?>)`).test(tag);
+  if (hasProp(ROUTE_KEY_PROP)) return false;
+  if (new RegExp(EPHEMERAL_SOURCE).test(tag) || new RegExp(EPHEMERAL_SOURCE).test(before)) return false;
+  return LOCAL_SELECTION_PROPS.some((prop) => new RegExp(`\\b${prop}\\s*=`).test(tag));
+}

package/ratchet/ratchet.js

@@ -14,8 +14,10 @@ import {
   EFFECT_CALL_SOURCE,
   FETCH_CALL_SOURCE,
   importSource,
+  isLocalSelection,
   LIGHT_VARIANT_SOURCE,
   paletteSource,
+  selectionTags,
   TABLE_OR_FORM_SOURCE,
   TANSTACK_SCOPE,
   USE_CLIENT_SOURCE,
@@ -30,7 +32,7 @@ export const DEFAULT_STACK_GLOBS = Object.freeze(
 const IGNORE = ["**/node_modules/**", "**/dist/**", "**/.next/**", "**/storybook-static/**", "**/coverage/**"];
 
 /** @typedef {"palette" | "light" | "arbitraryVar" | "classNameTemplate"} UiCounterName */
-/** @typedef {"fetchInClientEffect" | "directTanstackImport" | "localTableOrForm" | "retiredImport"} StackCounterName */
+/** @typedef {"fetchInClientEffect" | "directTanstackImport" | "localTableOrForm" | "retiredImport" | "routeStateSelection"} StackCounterName */
 /** @typedef {UiCounterName | StackCounterName} CounterName */
 /** @typedef {Record<CounterName, number>} Counters */
 /**
@@ -51,6 +53,7 @@ export const STACK_COUNTERS = /** @type {const} */ ([
   "directTanstackImport",
   "localTableOrForm",
   "retiredImport",
+  "routeStateSelection",
 ]);
 /** Every counter, in report order. */
 export const COUNTERS = /** @type {const} */ ([...UI_COUNTERS, ...STACK_COUNTERS]);
@@ -111,6 +114,7 @@ export function countStackSource(source, { retire = [], maxFormFields = 1 } = {}
     directTanstackImport: source.match(new RegExp(importSource([TANSTACK_SCOPE]), "g"))?.length ?? 0,
     localTableOrForm,
     retiredImport: source.match(new RegExp(importSource(retire), "g"))?.length ?? 0,
+    routeStateSelection: selectionTags(source).filter(({ tag, before }) => isLocalSelection(tag, before)).length,
   };
 }