@karni/ui 0.0.0-stage → 0.3.1

package/eslint-plugin/rules/no-direct-http.js

@@ -0,0 +1,128 @@
+/**
+ * karni/no-direct-http — direct HTTP/WS clients (fetch, axios,
+ * XMLHttpRequest, new WebSocket) are banned outside the generated client
+ * directory (allowPatterns, default **-slash-api). Data access goes through
+ * the generated typed hooks and the KarniClient from @karni/ui.
+ */
+import { docsUrl } from "../lib/docs.js";
+import { matchesAny } from "../lib/glob.js";
+
+const DEFAULT_ALLOW_PATTERNS = ["**/api/**"];
+const GLOBAL_OBJECTS = new Set(["window", "globalThis", "self"]);
+
+/** True when `name` resolves to a declared (shadowing) binding in scope. */
+function isShadowed(sourceCode, node, name) {
+  let scope = sourceCode.getScope(node);
+  while (scope) {
+    const variable = scope.set.get(name);
+    if (variable && variable.defs.length > 0) return true;
+    scope = scope.upper;
+  }
+  return false;
+}
+
+/** Matches `fetch(...)`, `window.fetch(...)`, `globalThis.fetch(...)`. */
+function calleeIsGlobal(sourceCode, callee, name) {
+  if (callee.type === "Identifier" && callee.name === name) {
+    return !isShadowed(sourceCode, callee, name);
+  }
+  if (
+    callee.type === "MemberExpression" &&
+    !callee.computed &&
+    callee.object.type === "Identifier" &&
+    GLOBAL_OBJECTS.has(callee.object.name) &&
+    callee.property.type === "Identifier" &&
+    callee.property.name === name
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function checkAxiosSource(context, sourceNode) {
+  if (!sourceNode || sourceNode.type !== "Literal") return;
+  if (typeof sourceNode.value !== "string") return;
+  if (sourceNode.value !== "axios" && !sourceNode.value.startsWith("axios/")) return;
+  context.report({ node: sourceNode, messageId: "axios" });
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      url: docsUrl("no-direct-http"),
+      description:
+        "Ban fetch/axios/XMLHttpRequest/new WebSocket outside the generated api client directory: use the generated typed hooks or KarniClient.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allowPatterns: {
+            type: "array",
+            items: { type: "string" },
+            description:
+              "Glob patterns of file paths where direct HTTP is allowed (the generated client's home).",
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      fetch:
+        "Direct fetch() outside the api client directory. Use the generated typed hooks " +
+        "(useResourceList/useResourceItem/useResourceMutations) or the KarniClient from " +
+        "@karni/ui — raw HTTP lives only under the allowed api/ paths. " +
+        "Opt out only with an explained disable: " +
+        "// eslint-disable-next-line karni/no-direct-http -- <reason>",
+      axios:
+        "Do not add axios. Karni already ships an HTTP layer: the generated typed hooks and " +
+        "createKarniClient from @karni/ui. " +
+        "Opt out only with an explained disable: " +
+        "// eslint-disable-next-line karni/no-direct-http -- <reason>",
+      xhr:
+        "XMLHttpRequest outside the api client directory. Use the generated typed hooks or " +
+        "the KarniClient from @karni/ui instead. " +
+        "Opt out only with an explained disable: " +
+        "// eslint-disable-next-line karni/no-direct-http -- <reason>",
+      websocket:
+        "new WebSocket() outside the api client directory. Wrap realtime transports in the " +
+        "api/ layer next to the KarniClient so every consumer shares one implementation. " +
+        "Opt out only with an explained disable: " +
+        "// eslint-disable-next-line karni/no-direct-http -- <reason>",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] ?? {};
+    const allowPatterns = options.allowPatterns ?? DEFAULT_ALLOW_PATTERNS;
+    if (matchesAny(context.filename, allowPatterns)) {
+      return {};
+    }
+    const { sourceCode } = context;
+    return {
+      CallExpression(node) {
+        if (calleeIsGlobal(sourceCode, node.callee, "fetch")) {
+          context.report({ node, messageId: "fetch" });
+          return;
+        }
+        if (node.callee.type === "Identifier" && node.callee.name === "require") {
+          checkAxiosSource(context, node.arguments[0]);
+        }
+      },
+      NewExpression(node) {
+        if (calleeIsGlobal(sourceCode, node.callee, "XMLHttpRequest")) {
+          context.report({ node, messageId: "xhr" });
+        } else if (calleeIsGlobal(sourceCode, node.callee, "WebSocket")) {
+          context.report({ node, messageId: "websocket" });
+        }
+      },
+      ImportDeclaration(node) {
+        checkAxiosSource(context, node.source);
+      },
+      ImportExpression(node) {
+        checkAxiosSource(context, node.source);
+      },
+    };
+  },
+};

package/eslint-plugin/rules/no-raw-elements.js

@@ -0,0 +1,65 @@
+/**
+ * karni/no-raw-elements — raw data-entry/table JSX elements are banned in
+ * project code; @karni/ui is their only home. Each message names the
+ * component to compose instead.
+ */
+import { docsUrl } from "../lib/docs.js";
+import { matchesAny } from "../lib/glob.js";
+
+const REPLACEMENTS = {
+  table: "ResourceTable",
+  form: "ResourceForm",
+  input: "Input (or ResourceForm, which renders the right field for you)",
+  select: "Select / ResourceSelect",
+  textarea: "Textarea (or ResourceForm)",
+};
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      url: docsUrl("no-raw-elements"),
+      description:
+        "Ban raw <table>/<form>/<input>/<select>/<textarea> JSX outside @karni/ui: compose the shipped components instead of rebuilding them.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allow: {
+            type: "array",
+            items: { type: "string" },
+            description: "Glob patterns of file paths where raw elements are allowed.",
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      rawElement:
+        "Raw <{{element}}> is Karni boilerplate — compose {{replacement}} from @karni/ui instead. " +
+        "Opt out only with an explained disable: " +
+        "// eslint-disable-next-line karni/no-raw-elements -- <reason>",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] ?? {};
+    const allow = options.allow ?? [];
+    if (allow.length > 0 && matchesAny(context.filename, allow)) {
+      return {};
+    }
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier") return;
+        const element = node.name.name;
+        if (!Object.hasOwn(REPLACEMENTS, element)) return;
+        context.report({
+          node: node.name,
+          messageId: "rawElement",
+          data: { element, replacement: REPLACEMENTS[element] },
+        });
+      },
+    };
+  },
+};

package/eslint-plugin/rules.json

@@ -0,0 +1,26 @@
+[
+  {
+    "id": "karni/no-raw-elements",
+    "title": "Raw <table>/<form>/<input>/<select>/<textarea> in project code",
+    "why": "@karni/ui ships these as schema-driven components (sorting, pagination, validation, accessibility). Rebuilding them per page is the boilerplate Karni exists to remove, and the copies drift.",
+    "fix": "Compose the component the message names: ResourceTable for <table>, ResourceForm for <form>, Input / Select / ResourceSelect / Textarea for fields (ResourceForm renders the right field for you). Opt out only with `// eslint-disable-next-line karni/no-raw-elements -- <reason>`."
+  },
+  {
+    "id": "karni/max-page-lines",
+    "title": "A page file is longer than its cap (50 lines by default)",
+    "why": "Pages compose @karni/ui components; a long page is rebuilding something Karni ships.",
+    "fix": "Compose Page / ResourceTable / ResourceForm / ResourceDetail and their props, or move logic into hooks and components. Opt out only with `/* eslint-disable karni/max-page-lines -- <reason> */`."
+  },
+  {
+    "id": "karni/no-deep-imports",
+    "title": "An import reaches into @karni/ui internals",
+    "why": "Only the package root is public API (docs/stability.md); internals change without notice, and a vendored copy forks the component.",
+    "fix": "Import from \"@karni/ui\" and compose or extend the exported component. Opt out only with `// eslint-disable-next-line karni/no-deep-imports -- <reason>`."
+  },
+  {
+    "id": "karni/no-direct-http",
+    "title": "fetch / axios / XMLHttpRequest / WebSocket outside the api client",
+    "why": "The generated typed hooks and KarniClient handle auth, errors, retries and types in one place; ad-hoc HTTP calls bypass all of it.",
+    "fix": "Use the generated typed hooks (useResourceList / useResourceItem / useResourceMutations) or createKarniClient from @karni/ui; keep transports under the api/ directory. Opt out only with `// eslint-disable-next-line karni/no-direct-http -- <reason>`."
+  }
+]

package/package.json

@@ -1,6 +1,155 @@
 {
   "name": "@karni/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.1",
+  "description": "React components for the Karni Django + React framework: schema-driven resource tables, forms, detail views and auth, generated from the backend's OpenAPI document, plus themable primitives and an ESLint preset.",
+  "keywords": [
+    "react",
+    "django",
+    "django-rest-framework",
+    "openapi",
+    "typescript",
+    "components",
+    "ui",
+    "tanstack-query",
+    "react-hook-form",
+    "zod",
+    "tailwind",
+    "radix",
+    "ai-agents",
+    "karni"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cbsshekhawat18-lab/karni.git",
+    "directory": "packages/karni-ui"
+  },
+  "homepage": "https://github.com/cbsshekhawat18-lab/karni/tree/main/packages/karni-ui#readme",
+  "bugs": {
+    "url": "https://github.com/cbsshekhawat18-lab/karni/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "eslint-plugin",
+    "!eslint-plugin/**/*.test.*",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tailwind-preset": {
+      "types": "./dist/tailwind-preset.d.ts",
+      "import": "./dist/tailwind-preset.js",
+      "require": "./dist/tailwind-preset.cjs"
+    },
+    "./manifest.json": "./dist/manifest.json",
+    "./eslint-plugin": "./eslint-plugin/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc --noEmit && vite build && node scripts/generate-manifest.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  },
+  "peerDependencies": {
+    "eslint": ">=9.0.0",
+    "@hookform/resolvers": "^3.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.0.0",
+    "zod": "^3.23.0"
+  },
+  "dependencies": {
+    "@eslint-community/eslint-plugin-eslint-comments": "^4.8.1",
+    "@radix-ui/react-checkbox": "^1.4.1",
+    "@radix-ui/react-dialog": "^1.3.1",
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
+    "@radix-ui/react-label": "^2.1.17",
+    "@radix-ui/react-popover": "^1.3.1",
+    "@radix-ui/react-select": "^2.4.1",
+    "@radix-ui/react-switch": "^1.4.1",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "@radix-ui/react-toast": "^1.3.1",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.5",
+    "@hookform/resolvers": "^3.9.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/react": "^8.3.0",
+    "@storybook/react-vite": "^8.3.0",
+    "@tanstack/react-query": "^5.104.3",
+    "@tanstack/react-table": "^8.20.5",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^20.16.0",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^15.15.0",
+    "jsdom": "^25.0.0",
+    "msw": "^2.4.4",
+    "msw-storybook-addon": "^2.0.3",
+    "postcss": "^8.5.30",
+    "prettier": "^3.9.10",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.90.0",
+    "storybook": "^8.3.0",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.71.2",
+    "vite": "^6.4.4",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^4.1.12",
+    "zod": "^3.23.8"
+  },
+  "peerDependenciesMeta": {
+    "eslint": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "overrides": {
+    "postcss-selector-parser": "^7.1.7",
+    "uuid": "^11.1.1"
+  }
+}