@karni/ui 0.0.0-stage → 0.3.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,289 @@
-# Temporary Holding Version
+# @karni/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Schema-driven React components for [Karni](https://github.com/cbsshekhawat18-lab/karni#readme) backends. Point it at a
+Karni API's OpenAPI schema and get working tables, forms, detail views and auth —
+plus the themable primitives they are built from — without regenerating boilerplate.
+
+- **Resource components** — `ResourceTable`, `ResourceForm`, `ResourceDetail`,
+  `ResourceSelect` render themselves from the backend schema (`/api/schema/`).
+- **Hooks** — `useResourceList`, `useResourceItem`, `useResourceMutations`,
+  `useSchema` on TanStack Query, with a shared `karniKeys` key factory.
+- **Auth** — `AuthProvider`, `useAuth`, `AuthGuard`, `usePermission` for Karni's
+  JWT or session auth modes.
+- **Primitives** — Button, Input, Textarea, Select, Checkbox, Switch, Label,
+  Tabs, DropdownMenu, Skeleton: Radix-based, token-themed, `forwardRef`,
+  `className`-mergeable.
+
+The package ships **dual ESM/CJS** output plus `.d.ts` files: `import` resolves
+`dist/index.js`, `require()` resolves `dist/index.cjs` (same for
+`@karni/ui/tailwind-preset`, whose CJS form exposes the preset as `.default`).
+The `@karni/ui/eslint-plugin` export stays ESM-only (flat config). Peer
+dependencies are resolved by your bundler or by Node.
+
+## Install
+
+```sh
+npm install @karni/ui @tanstack/react-query @tanstack/react-table react-hook-form @hookform/resolvers zod
+```
+
+Peer dependencies: `react` / `react-dom` (18 or 19), `@tanstack/react-query` v5,
+`@tanstack/react-table` v8, `react-hook-form` v7, `@hookform/resolvers` and `zod` v3.
+The project also needs `tailwindcss` (v3.4+ or v4) as a build tool — a
+devDependency, as `karni new` sets it up: it compiles the classes the
+components use and is never imported at runtime, so it is not a peer.
+
+## Quick start
+
+```tsx
+import { AuthProvider, KarniProvider, ResourceTable, createKarniClient } from "@karni/ui";
+import "@karni/ui/styles.css";
+
+const client = createKarniClient({ baseUrl: "/api" });
+
+export function App() {
+  return (
+    <KarniProvider client={client}>
+      <AuthProvider>
+        <ResourceTable resource="events" />
+      </AuthProvider>
+    </KarniProvider>
+  );
+}
+```
+
+`KarniProvider` creates a TanStack `QueryClient` when you do not pass one
+(`queryClient` prop is the escape hatch). `AuthProvider` reads the auth mode from
+the schema root (`x-karni-auth-mode`); override it with `mode="jwt" | "session"`.
+
+## Styling
+
+All component colors resolve through `--karni-*` CSS custom properties defined in
+`@karni/ui/styles.css` (light values on `:root`, dark values under `.dark`).
+Import it once, then wire Tailwind so the token-backed utility classes
+(`bg-primary`, `text-muted-foreground`, …) exist in your build.
+
+### Tailwind v3 (preset)
+
+```ts
+// tailwind.config.ts
+import karniPreset from "@karni/ui/tailwind-preset";
+
+export default {
+  presets: [karniPreset],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    // So Tailwind sees the classes used inside @karni/ui:
+    "./node_modules/@karni/ui/dist/**/*.js",
+  ],
+};
+```
+
+```ts
+// main.tsx
+import "@karni/ui/styles.css";
+import "./index.css"; // your @tailwind base/components/utilities file
+```
+
+### Tailwind v4 (CSS-first recipe)
+
+Tailwind v4 has no `presets` array; map the tokens in CSS instead:
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "@karni/ui/styles.css";
+
+/* Scan the library's shipped output for class names. */
+@source "../node_modules/@karni/ui/dist";
+
+/* Dark mode is class-based: add `dark` to <html> (or any ancestor). */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Map Tailwind color/radius theme slots onto the --karni-* tokens. */
+@theme inline {
+  --color-background: hsl(var(--karni-background));
+  --color-foreground: hsl(var(--karni-foreground));
+  --color-card: hsl(var(--karni-card));
+  --color-card-foreground: hsl(var(--karni-card-foreground));
+  --color-popover: hsl(var(--karni-popover));
+  --color-popover-foreground: hsl(var(--karni-popover-foreground));
+  --color-primary: hsl(var(--karni-primary));
+  --color-primary-foreground: hsl(var(--karni-primary-foreground));
+  --color-secondary: hsl(var(--karni-secondary));
+  --color-secondary-foreground: hsl(var(--karni-secondary-foreground));
+  --color-muted: hsl(var(--karni-muted));
+  --color-muted-foreground: hsl(var(--karni-muted-foreground));
+  --color-accent: hsl(var(--karni-accent));
+  --color-accent-foreground: hsl(var(--karni-accent-foreground));
+  --color-destructive: hsl(var(--karni-destructive));
+  --color-destructive-foreground: hsl(var(--karni-destructive-foreground));
+  --color-border: hsl(var(--karni-border));
+  --color-input: hsl(var(--karni-input));
+  --color-ring: hsl(var(--karni-ring));
+  --color-chart-1: hsl(var(--karni-chart-1));
+  --color-chart-2: hsl(var(--karni-chart-2));
+  --color-chart-3: hsl(var(--karni-chart-3));
+  --color-chart-4: hsl(var(--karni-chart-4));
+  --color-chart-5: hsl(var(--karni-chart-5));
+  --radius-lg: var(--karni-radius);
+  --radius-md: calc(var(--karni-radius) - 2px);
+  --radius-sm: calc(var(--karni-radius) - 4px);
+}
+```
+
+### Theming and dark mode
+
+Override any token after importing the stylesheet — components pick it up
+everywhere, in both Tailwind versions:
+
+```css
+:root {
+  --karni-primary: 262 83% 58%; /* HSL triplet, no hsl() wrapper */
+  --karni-radius: 0.75rem;
+}
+```
+
+Toggle dark mode by adding/removing the `dark` class on `<html>`. Chart series
+colors are `--karni-chart-1` … `--karni-chart-5`.
+
+## Resource components
+
+Every resource component takes the backend's resource name (the router prefix)
+and renders from the schema. They are defaults, not cages — each one exposes
+override props, and you can always drop down to the hooks + primitives.
+
+```tsx
+// Table: server-driven pagination, sorting, search and filters
+<ResourceTable
+  resource="events"
+  columns={[{ field: "title" }, { field: "starts_at" }]} // optional override
+  onRowClick={(row) => navigate(`/events/${row.id}`)}
+/>
+
+// Form: fields, labels, and Zod validation derived from the schema.
+// No `id` → create; with `id` it loads the item and PATCHes dirty fields.
+<ResourceForm
+  resource="events"
+  onSuccess={(created) => navigate(`/events/${created.id}`)}
+  fields={{ internal_notes: { hidden: true }, venue: { label: "Location" } }}
+/>
+
+// Detail + relation picker
+<ResourceDetail resource="events" id={eventId} />
+<ResourceSelect resource="venues" value={venueId} onChange={setVenueId} />
+```
+
+Audit fields — `AUDIT_FIELDS`: `id`, `created_at`, `updated_at`, `created_by`,
+`updated_by`, which every Karni resource carries — never lead the screen.
+`ResourceTable` hides their columns by default (domain fields come first, in
+schema order; rows are still keyed by `id`). Show one by naming it in `columns`
+(`{ field: "created_at" }`), or show all of them after the domain columns with
+`showAuditFields`. `ResourceDetail` lists them last, in a muted "Record" group,
+and still honours `fields` overrides for them. `ResourceForm` never renders them
+(they are read-only).
+
+A create form starts from the schema's defaults (a model's `default=`), and a
+cleared optional field is left out of the request rather than sent as `null`
+(`null` is sent only for nullable fields).
+
+Validation schemas are generated at runtime with `zodFor(schema, "create" | "update")`;
+`displayLabel(obj)` picks a human label for relation objects.
+
+## Hooks
+
+```tsx
+const { data, isLoading } = useResourceList<Event>("events", {
+  page: 1,
+  pageSize: 25,
+  ordering: "-starts_at",
+  search: "conf",
+  filters: { status: "published" },
+});
+
+const event = useResourceItem<Event>("events", id);
+const { create, update, remove } = useResourceMutations<Event>("events");
+```
+
+List responses are DRF pages: `{ count, next, previous, results }`
+(the `Paginated<T>` type). Mutations invalidate `karniKeys.resource(resource)`
+on success; pass `invalidateKeys` to invalidate more. Use `karniKeys` for any
+manual cache work so your keys and the library's keys never drift.
+
+## Auth
+
+```tsx
+const { user, status, login, logout } = useAuth();
+const { hasRole, isAuthenticated } = usePermission();
+
+<AuthGuard roles={["admin"]} fallback={<LoginPage />}>
+  <AdminPanel />
+</AuthGuard>;
+```
+
+In JWT mode the refresh token is stored via a pluggable `TokenStorage`; the
+default is `localStorage` (simple, but readable by any XSS on your page — use
+`createMemoryTokenStorage()` or your own adapter for stricter setups, at the
+cost of logout-on-reload). Session mode uses cookies + CSRF headers and needs no
+token storage.
+
+## Primitives and escape hatches
+
+Primitives are exported directly (`Button`, `Input`, `Select`, …) and follow
+three rules:
+
+1. **`className` always merges** via `cn()` (clsx + tailwind-merge), so your
+   classes win over the component's own.
+2. **Refs are forwarded** to the underlying element.
+3. **Composition over configuration** — e.g. `buttonVariants()` is exported to
+   style any element as a button, and the styled Radix parts
+   (`SelectRoot`/`SelectTrigger`/`SelectContent`/`SelectItem`, the
+   `DropdownMenu*` family, `Tabs*`) are exported for fully custom composition.
+
+`Select` note: Radix reserves the empty string, so the composed `Select` maps
+"no selection" through an internal `"__karni_empty__"` sentinel. Consumers only
+ever see `null`; pass `clearable` to render a clear item that emits `null`.
+Option values `""` and `"__karni_empty__"` are reserved.
+
+The `variants()` helper (a dependency-free cva-style utility) and `cn()` are
+exported for building your own components in the same style.
+
+## Manifest for coding agents
+
+The published package contains `dist/manifest.json` —
+`{ "components": [...], "hooks": [...], "roles": {...} }` — generated from the
+public barrel (and a static scan of the `registerComponentRole` call sites) at
+build time. AI coding agents can read it (export path
+`@karni/ui/manifest.json`) to discover what exists instead of crawling source.
+
+## ESLint plugin
+
+`@karni/ui/eslint-plugin` ships the Karni frontend enforcement rules
+(`karni/no-raw-elements`, `karni/max-page-lines`, `karni/no-deep-imports`,
+`karni/no-direct-http`) as a flat-config preset for ESLint >= 9:
+
+```js
+// eslint.config.js
+import karni from "@karni/ui/eslint-plugin";
+export default [...karni.configs.recommended];
+```
+
+Every rule is an error; opt-outs are disable comments with a REQUIRED reason
+(`// eslint-disable-next-line karni/no-direct-http -- <reason>`). See
+`docs/enforcement.md` at the repo root.
+
+## Development
+
+```sh
+npm install
+npm run build      # tsc --noEmit && vite build && generate manifest
+npm test           # vitest (jsdom + testing-library + msw)
+npm run lint       # eslint 9 flat config (strict TS, no `any`, D7, karni/* dogfood)
+npm run storybook  # Storybook 8 (react-vite) with a light/dark toolbar
+```
+
+Before the first `npm run storybook`, generate the MSW worker once:
+`npx msw init public/`.
+
+The source of truth for color discipline is enforced by tests: no Tailwind
+palette classes or raw color literals in component source — tokens only
+(see `src/components/primitives/no-color-literals.test.ts`).