@kazee-ds/init 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,35 +1,37 @@
1
- # @kazee-ds/init
2
-
3
- Preview-first setup for an existing standalone React or Vue application. Published CLI 0.1.7 pins React/Vue/styles at 0.5.4 and consumer lint at 0.4.2. Verify the available npm versions before installing. Earlier CLI releases targeted private GitLab.
4
-
5
- From an existing application, preview with `npm exec --yes --package=@kazee-ds/init@0.1.7 -- kazee-init`; append `--apply` after reviewing the plan.
6
-
7
- From the design-system checkout, run:
8
-
9
- ```sh
10
- node packages/init/bin/kazee-init.mjs --dir /absolute/path/to/application
11
- node packages/init/bin/kazee-init.mjs --dir /absolute/path/to/application --apply
12
- ```
13
-
14
- Supply `--framework react|vue` or `--package-manager npm|pnpm|yarn` when detection
15
- is ambiguous or unavailable. Explicit choices do not override conflicting
16
- lockfiles. Yarn means Classic only; modern Yarn requires the manual guide.
17
-
18
- Init adds missing exact Kazee dependencies, merges a public npm scope mapping,
19
- appends a framework-specific managed section to `AGENTS.md`, and generates
20
- `kazee-setup.md`. It preserves unrelated configuration and rejects conflicting
21
- versions, registry mappings, edited managed content, workspaces, Next, and Nuxt.
22
-
23
- Preview never writes files. Apply preflights all four files and attempts to
24
- restore changes after ordinary write failures. Multi-file writes are not
25
- crash-atomic. Symlinked and hardlinked write targets are rejected.
26
-
27
- Public installs need no read credentials. Init neither creates auth entries nor prints existing credentials; unrelated registry settings are preserved.
28
- No installation, network requests, source edits, lockfile updates, Git operations,
29
- or CI changes occur inside init.
30
-
31
- Follow the generated guide to install dependencies, import CSS once, merge the
32
- lint config, and run application checks. ESLint 10 and appropriate parsers remain
33
- the application's responsibility. Bundled versions are not a latest-version query.
34
-
35
- See `docs/consumer-init.md` in the repository for verification and limitations.
1
+ # @kazee-ds/init
2
+
3
+ Version **0.1.9** pins runtime/styles **0.6.0** and lint **0.5.0**, with composition-aware agent templates. Verify publication of these prepared versions before using the registry command. Local commands target the checkout. See [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
4
+
5
+ Preview-first setup for an existing standalone React or Vue application. Preserve the application's framework, package manager and configuration. Earlier CLI releases targeted private GitLab.
6
+
7
+ From an existing application, preview with `npm exec --yes --package=@kazee-ds/init@0.1.9 -- kazee-init`; append `--apply` after reviewing the plan.
8
+
9
+ From the design-system checkout, run:
10
+
11
+ ```sh
12
+ node packages/init/bin/kazee-init.mjs --dir /absolute/path/to/application
13
+ node packages/init/bin/kazee-init.mjs --dir /absolute/path/to/application --apply
14
+ ```
15
+
16
+ Supply `--framework react|vue` or `--package-manager npm|pnpm|yarn` when detection
17
+ is ambiguous or unavailable. Explicit choices do not override conflicting
18
+ lockfiles. Yarn means Classic only; modern Yarn requires the manual guide.
19
+
20
+ Init adds missing exact Kazee dependencies, merges a public npm scope mapping,
21
+ appends a framework-specific managed section to `AGENTS.md`, and generates
22
+ `kazee-setup.md`. It preserves unrelated configuration and rejects conflicting
23
+ versions, registry mappings, edited managed content, workspaces, Next, and Nuxt.
24
+
25
+ Preview never writes files. Apply preflights all four files and attempts to
26
+ restore changes after ordinary write failures. Multi-file writes are not
27
+ crash-atomic. Symlinked and hardlinked write targets are rejected.
28
+
29
+ Public installs need no read credentials. Init neither creates auth entries nor prints existing credentials; unrelated registry settings are preserved.
30
+ No installation, network requests, source edits, lockfile updates, Git operations,
31
+ or CI changes occur inside init.
32
+
33
+ Follow the generated guide to install dependencies, import CSS once, merge the
34
+ lint config, and run application checks. ESLint 10 and appropriate parsers remain
35
+ the application's responsibility. Bundled versions are not a latest-version query.
36
+
37
+ See `docs/consumer-init.md` in the repository for verification and limitations.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kazee-ds/init",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "description": "Preview-first setup for Kazee Design System consumers",
5
5
  "type": "module",
6
6
  "bin": {
package/src/content.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { readFileSync } from 'node:fs';
2
2
 
3
- export const RELEASE = Object.freeze({ framework: '0.5.4', styles: '0.5.4', lint: '0.4.2' });
3
+ export const RELEASE = Object.freeze({ framework: '0.6.0', styles: '0.6.0', lint: '0.5.0' });
4
4
  export const REGISTRY = 'https://registry.npmjs.org/';
5
5
  const INIT_VERSION = JSON.parse(
6
6
  readFileSync(new URL('../package.json', import.meta.url), 'utf8'),
@@ -15,7 +15,7 @@ export function managedRules(framework) {
15
15
  ).replaceAll('\r\n', '\n');
16
16
  const other = framework === 'react' ? 'Vue' : 'React';
17
17
  const filtered = template.replace(new RegExp(`## ${other} API\\n[\\s\\S]*?(?=\\n## |$)`), '');
18
- return `${START}\n<!-- Template revision: 2026-10-28; init ${INIT_VERSION}; ${framework} -->\n${filtered.trim()}\n${END}`;
18
+ return `${START}\n<!-- Template revision: 2026-10-30; init ${INIT_VERSION}; ${framework} -->\n${filtered.trim()}\n${END}`;
19
19
  }
20
20
 
21
21
  export function installCommand(manager, framework) {
@@ -1,63 +1,63 @@
1
- # Kazee Design System consumer rules
2
-
3
- Apply these rules to UI work in this application alongside its existing project instructions. Keep the application's established framework, package manager, routing, localization, data flow, and API contracts.
4
-
5
- ## Check the installed contract first
6
-
7
- - Read this application's `package.json` and lockfile before changing UI. Use its installed package version as the API contract.
8
- - Use the installed version's public catalog. Framework/styles 0.5.4 include the Toast keyboard guard and shared subtle borders; tokens are 0.4.3 and lint is 0.4.2. MCP 0.1.7 retains verified 0.5.1, 0.5.2, 0.5.3 and 0.5.4 catalogs; confirm that exact MCP patch is published before pinning it. Older MCP 0.1.4 labels 0.5.1 as a workspace candidate. Use installed public types if the matching verified catalog is unavailable. Do not assume a component exists in an older version.
9
- - When Kazee MCP is connected, read `get_catalog_versions`, then `list_components`, `get_component_docs`, and `get_component_examples` using this framework and exact installed version. Otherwise inspect the installed package's public types when uncertain. A prop accepted by React Aria, Reka UI, or another UI library is not automatically supported by Kazee components.
10
- - Start file discovery in application source, manifests, and the installed Kazee package's public entry points/types. Do not recursively list all of `node_modules` or investigate React Aria/Reka UI internals for routine component usage.
11
- - Investigate dependency internals only when a concrete type, build, or runtime failure remains unexplained by the public contract. Identify that failure and the relevant file before expanding the search. When the requested behavior, build, and typecheck pass, report the result and any unrun checks instead of continuing speculative API research.
12
- - Browse states in the public [Storybook](https://kazee-design-system-023417.gitlab.io). The catalog may differ from the installed version; check types before copying an example.
13
- - Follow the [installation guide](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/installation.md) for package setup. Reading the guide requires GitLab project access; public npm installation needs no read credentials; historical private GitLab installs require registry access. Storybook is public. Never print, commit, or embed registry tokens in frontend code.
14
-
15
- ## Kazee MCP
16
-
17
- MCP is a read-only reference, not an installer or validator. It needs no token at runtime. Never provide token values to a tool. Candidate catalogs do not establish registry publication. Unknown versions must not be silently replaced with newer APIs. Run the application's actual checks after using examples and report missing or unrun validation.
18
-
19
- ## Reuse the foundation
20
-
21
- - Use Kazee `Button` and `Select` for matching new UI in areas adopting this design system. Preserve existing application abstractions that already wrap them correctly.
22
- - Import from `@kazee-ds/react` or `@kazee-ds/vue` public entry points. Do not copy package source into the application or import private build files.
23
- - Do not bypass these components by importing React Aria or Reka UI directly to recreate their behavior. Keep unrelated existing integrations outside the task unchanged.
24
- - Import `@kazee-ds/styles/index.css` once at the application's global CSS entry. It includes the tokens; do not add a duplicate token stylesheet.
25
- - Use the public props for supported component styling. Do not rely on `className` or `style` on Kazee wrappers, or override their internal classes to create undocumented variants. Style application layout on surrounding elements.
26
- - Common Button variants include `primary`, `secondary`, and `danger`; sizes are `sm`, `md`, and `lg`. Read the exact versioned contract for additional variants, icon-only and pending support. Defaults are `primary` and `md`; use `danger` for destructive actions.
27
-
28
- ## React API
29
-
30
- - Import `Button` and `Select` from `@kazee-ds/react`.
31
- - Button activation: `onPress`; disabled state: `isDisabled`. Do not substitute `onClick` or `disabled`.
32
- - Select requires `label` and `options`. Options have a string `id`, a string `label`, and optional `isDisabled`.
33
- - Controlled Select: `value` (string or `null`) and `onChange` (receives the selected string ID). Uncontrolled Select: `defaultValue`. Do not mix controlled and uncontrolled state.
34
- - Use only documented public props. Do not invent `isLoading`, `loading`, `asChild`, `href`, or additional variants.
35
-
36
- ## Vue API
37
-
38
- - Import `Button` and `Select` from `@kazee-ds/vue`.
39
- - Button activation: `@press`; disabled state: `disabled`. Do not substitute React prop names.
40
- - Select requires `label` and `options`. Options have a string `id`, a string `label`, and optional `isDisabled` (including in Vue).
41
- - Controlled Select: `v-model` with a string or `undefined`. Uncontrolled Select: `defaultValue`. Do not mix controlled and uncontrolled state.
42
- - Use only documented public props. Do not invent `loading`, `asChild`, `href`, or additional variants.
43
-
44
- ## Tokens, themes, and accessibility
45
-
46
- - Use existing semantic color variables for new UI adopting the system, such as `--ds-color-surface-default`, `--ds-color-text-default`, and `--ds-color-border-subtle`. Check the installed token CSS before referencing a variable. Do not invent token names or use primitive color variables as semantic colors.
47
- - Reuse available spacing and radius tokens, such as `--ds-space-4` and `--ds-radius-md`, where they fit. Follow the application's existing conventions for values the foundation does not yet define.
48
- - Preserve the application's existing theme mechanism. If integrating Kazee light/dark modes, coordinate `data-theme="light"` or `data-theme="dark"` at the document root so portal content receives the same theme. Do not create a second theme toggle or interpolate unchecked tenant input into CSS.
49
- - Keep Select's visible label and meaningful Button text. React icon-only buttons need an accessible name via the supported `aria-label` prop; verify the installed contract for other cases.
50
- - Set Button `type="submit"` explicitly when it submits a form; the default is `button`.
51
- - Preserve keyboard access, focus indication, disabled states, and the application's translations. For pending requests, use existing application feedback and guard request handlers; do not add unsupported loading props to Kazee components.
52
-
53
- ## When a component or capability is missing
54
-
55
- - State the gap. Use an existing suitable application component or an accessible native element for the requested screen, and use available tokens where appropriate.
56
- - Keep a necessary fallback local to the application. Do not introduce another component library or redesign unrelated screens as part of routine adoption.
57
- - A shared Kazee component needs a separate contribution in the design-system repository with a shared React/Vue contract and its quality gates. Do not present an application fallback as a published Kazee component.
58
-
59
- ## Verify the change
60
-
61
- - Run the application's relevant build, typecheck, lint, and existing tests using its own scripts. Do not assume design-system monorepo commands exist here.
62
- - For changed interactions, check Button activation and disabled behavior, Select selection, and keyboard focus. Check existing light/dark modes and responsive layout where affected.
63
- - Report what was actually verified and any checks that could not run. These instructions guide agent behavior; they do not install lint rules or enforce CI by themselves.
1
+ # Kazee Design System consumer rules
2
+
3
+ Apply these rules to UI work in this application alongside its existing project instructions. Keep the application's established framework, package manager, routing, localization, data flow, and API contracts.
4
+
5
+ ## Check the installed contract first
6
+
7
+ - Read this application's `package.json` and lockfile before changing UI. Use its installed package version as the API contract.
8
+ - Use the installed version's public catalog. Framework/styles 0.5.5 include the Toast keyboard guard and shared subtle borders; tokens are 0.4.4 and lint is 0.4.2. MCP 0.1.8 retains verified 0.5.1, 0.5.2, 0.5.3 and 0.5.5 catalogs; confirm that exact MCP patch is published before pinning it. Older MCP 0.1.4 labels 0.5.1 as a workspace candidate. Use installed public types if the matching verified catalog is unavailable. Do not assume a component exists in an older version.
9
+ - When Kazee MCP is connected, read `get_catalog_versions`, then `list_components`, `get_component_docs`, and `get_component_examples` using this framework and exact installed version. Otherwise inspect the installed package's public types when uncertain. A prop accepted by React Aria, Reka UI, or another UI library is not automatically supported by Kazee components.
10
+ - Start file discovery in application source, manifests, and the installed Kazee package's public entry points/types. Do not recursively list all of `node_modules` or investigate React Aria/Reka UI internals for routine component usage.
11
+ - Investigate dependency internals only when a concrete type, build, or runtime failure remains unexplained by the public contract. Identify that failure and the relevant file before expanding the search. When the requested behavior, build, and typecheck pass, report the result and any unrun checks instead of continuing speculative API research.
12
+ - Browse states in the public [Storybook](https://kazee-design-system-023417.gitlab.io). The catalog may differ from the installed version; check types before copying an example.
13
+ - Follow the [installation guide](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/installation.md) for package setup. Reading the guide requires GitLab project access; public npm installation needs no read credentials; historical private GitLab installs require registry access. Storybook is public. Never print, commit, or embed registry tokens in frontend code.
14
+
15
+ ## Kazee MCP
16
+
17
+ MCP is a read-only reference, not an installer or validator. It needs no token at runtime. Never provide token values to a tool. Candidate catalogs do not establish registry publication. Unknown versions must not be silently replaced with newer APIs. Run the application's actual checks after using examples and report missing or unrun validation.
18
+
19
+ ## Reuse the foundation
20
+
21
+ - Use Kazee `Button` and `Select` for matching new UI in areas adopting this design system. Preserve existing application abstractions that already wrap them correctly.
22
+ - Import from `@kazee-ds/react` or `@kazee-ds/vue` public entry points. Do not copy package source into the application or import private build files.
23
+ - Do not bypass these components by importing React Aria or Reka UI directly to recreate their behavior. Keep unrelated existing integrations outside the task unchanged.
24
+ - Import `@kazee-ds/styles/index.css` once at the application's global CSS entry. It includes the tokens; do not add a duplicate token stylesheet.
25
+ - Check the installed version before styling. In versions that expose composition, pass Tailwind classes directly to public parts (for example Select.Trigger), use root className/style in React or class/style in Vue, and use the typed classNames map for compact APIs. Older versions may not forward these props. Do not target undocumented internal DOM selectors. Style application layout with application-owned wrappers.
26
+ - Common Button variants include `primary`, `secondary`, and `danger`; sizes are `sm`, `md`, and `lg`. Read the exact versioned contract for additional variants, icon-only and pending support. Defaults are `primary` and `md`; use `danger` for destructive actions.
27
+
28
+ ## React API
29
+
30
+ - Import `Button` and `Select` from `@kazee-ds/react`.
31
+ - Button activation: `onPress`; disabled state: `isDisabled`. Do not substitute `onClick` or `disabled`.
32
+ - Select requires `label` and `options`. Options have a string `id`, a string `label`, and optional `isDisabled`.
33
+ - Controlled Select: `value` (string or `null`) and `onChange` (receives the selected string ID). Uncontrolled Select: `defaultValue`. Do not mix controlled and uncontrolled state.
34
+ - Use only documented public props. Do not invent `isLoading`, `loading`, `asChild`, `href`, or additional variants.
35
+
36
+ ## Vue API
37
+
38
+ - Import `Button` and `Select` from `@kazee-ds/vue`.
39
+ - Button activation: `@press`; disabled state: `disabled`. Do not substitute React prop names.
40
+ - Select requires `label` and `options`. Options have a string `id`, a string `label`, and optional `isDisabled` (including in Vue).
41
+ - Controlled Select: `v-model` with a string or `undefined`. Uncontrolled Select: `defaultValue`. Do not mix controlled and uncontrolled state.
42
+ - Use only documented public props. Do not invent `loading`, `asChild`, `href`, or additional variants.
43
+
44
+ ## Tokens, themes, and accessibility
45
+
46
+ - Use existing semantic color variables for new UI adopting the system, such as `--ds-color-surface-default`, `--ds-color-text-default`, and `--ds-color-border-subtle`. Check the installed token CSS before referencing a variable. Do not invent token names or use primitive color variables as semantic colors.
47
+ - Reuse available spacing and radius tokens, such as `--ds-space-4` and `--ds-radius-md`, where they fit. Follow the application's existing conventions for values the foundation does not yet define.
48
+ - Preserve the application's existing theme mechanism. If integrating Kazee light/dark modes, coordinate `data-theme="light"` or `data-theme="dark"` at the document root so portal content receives the same theme. Do not create a second theme toggle or interpolate unchecked tenant input into CSS.
49
+ - Keep Select's visible label and meaningful Button text. React icon-only buttons need an accessible name via the supported `aria-label` prop; verify the installed contract for other cases.
50
+ - Set Button `type="submit"` explicitly when it submits a form; the default is `button`.
51
+ - Preserve keyboard access, focus indication, disabled states, and the application's translations. For pending requests, use existing application feedback and guard request handlers; do not add unsupported loading props to Kazee components.
52
+
53
+ ## When a component or capability is missing
54
+
55
+ - State the gap. Use an existing suitable application component or an accessible native element for the requested screen, and use available tokens where appropriate.
56
+ - Keep a necessary fallback local to the application. Do not introduce another component library or redesign unrelated screens as part of routine adoption.
57
+ - A shared Kazee component needs a separate contribution in the design-system repository with a shared React/Vue contract and its quality gates. Do not present an application fallback as a published Kazee component.
58
+
59
+ ## Verify the change
60
+
61
+ - Run the application's relevant build, typecheck, lint, and existing tests using its own scripts. Do not assume design-system monorepo commands exist here.
62
+ - For changed interactions, check Button activation and disabled behavior, Select selection, and keyboard focus. Check existing light/dark modes and responsive layout where affected.
63
+ - Report what was actually verified and any checks that could not run. These instructions guide agent behavior; they do not install lint rules or enforce CI by themselves.
@@ -1,135 +1,135 @@
1
- # Consumer lint rules
2
-
3
- [`@kazee-ds/eslint-config`](../packages/eslint-config) provides a reusable ESLint flat configuration. Published version `0.4.2` implements public-import boundaries and selected component API checks, including Input and extended Button variants. Current React/Vue/styles are `0.5.4`; tokens are `0.4.3`. See the [version matrix](versions.md). It is an ESM package for ESLint 10 and Node 22.16 or later, with TypeScript declarations and no runtime dependencies. Adding `AGENTS.md` alone does not enable these checks.
4
-
5
- ## Rules
6
-
7
- | Rule | Reports |
8
- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
9
- | `kazee/public-imports` | Imports from private or nonexistent exports of the four foundation packages, and direct imports from React Aria, React Stately, or Reka UI |
10
- | `kazee/component-api` | Selected unsupported props/events and static Button size/variant values on components imported directly from Kazee |
11
-
12
- The import rule checks static imports, re-exports, literal dynamic imports, and unshadowed literal `require` calls. Public CSS/JSON exports and framework `package.json` exports remain allowed.
13
-
14
- The component rule recognizes React JSX imports (including aliases and namespace imports) and Vue SFC `<script setup>` imports used in templates (including aliases, kebab-case names, and namespace imports). It distinguishes local components from imported Kazee components, including React lexical shadowing and Vue template variables.
15
-
16
- Examples of reported mistakes:
17
-
18
- ```tsx
19
- import { Button } from '@kazee-ds/react';
20
-
21
- // Use onPress and isDisabled.
22
- const save = (
23
- <Button onClick={saveWorkspace} disabled={busy}>
24
- Save
25
- </Button>
26
- );
27
-
28
- // Use an installed supported variant; sm, md, or lg.
29
- const other = (
30
- <Button variant="unsupported" size="xl">
31
- Save
32
- </Button>
33
- );
34
- ```
35
-
36
- ```vue
37
- <script setup lang="ts">
38
- import { Button, Select } from '@kazee-ds/vue';
39
- </script>
40
-
41
- <template>
42
- <!-- Use disabled and @press. -->
43
- <Button :is-disabled="busy" @click="save">Save</Button>
44
- <!-- Use v-model for controlled selection. -->
45
- <Select :value="workspace" label="Workspace" :options="options" />
46
- </template>
47
- ```
48
-
49
- The rule rejects selected unsupported props. Coverage varies by component and version; consult installed public types rather than treating this rule as a complete API schema. Apply application layout and feedback outside the component. It reports diagnostics only; it does not autofix events, change application state, or rewrite imports.
50
-
51
- ## Enable in a consuming application
52
-
53
- Configure public npm access without read credentials using the [installation guide](installation.md). Keep the application's existing ESLint configuration, parsers, plugins, package manager, and lockfile, then install:
54
-
55
- ```sh
56
- npm install --save-dev --save-exact @kazee-ds/eslint-config@0.4.2
57
- ```
58
-
59
- Merge the configuration object into the application's existing flat config, after its framework/parser setup:
60
-
61
- ```js
62
- import { consumerConfig } from '@kazee-ds/eslint-config';
63
-
64
- // Add this object to your existing exported flat-config array.
65
- const kazeeRules = consumerConfig({
66
- files: ['src/**/*.{js,jsx,ts,tsx,vue}'],
67
- });
68
- ```
69
-
70
- `kazeeRules` must actually be included in the exported configuration; declaring it alone does not enable anything. Adjust `files` to the application's source directories (for example `app/` or `components/`). Scope it to areas adopting Kazee if the application still has unrelated headless-library integrations. The config intentionally forbids those imports in its selected files.
71
-
72
- Use an ESLint 10 flat-config setup with a parser that supports the application's syntax: a TypeScript/JSX parser for React, or `vue-eslint-parser` with its TypeScript parser configured for Vue SFCs. The rules use `context.sourceCode` and Vue parser services; they do not configure parsers or add the general framework lint rules themselves.
73
-
74
- Run the application's lint command and ensure it runs in the consuming project's CI. Update the lint package version and lockfile when adopting a different Kazee contract. Existing applications that copied the earlier standalone file can switch their config import to `@kazee-ds/eslint-config`, then remove the unused copy. The monorepo's old `tooling/eslint/consumer.mjs` entry point remains a re-export for compatibility.
75
-
76
- ### Complete React/TypeScript example
77
-
78
- The following minimal `eslint.config.mjs` assumes ESLint 10 and `typescript-eslint` are already installed. Merge the Kazee config into the application's fuller rules rather than discarding its existing checks.
79
-
80
- ```js
81
- import tseslint from 'typescript-eslint';
82
- import { consumerConfig } from '@kazee-ds/eslint-config';
83
-
84
- export default [
85
- { ignores: ['dist/**', 'node_modules/**'] },
86
- ...tseslint.configs.recommended,
87
- {
88
- files: ['src/**/*.{ts,tsx}'],
89
- languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
90
- },
91
- consumerConfig({ files: ['src/**/*.{ts,tsx}'] }),
92
- ];
93
- ```
94
-
95
- ### Complete Vue/TypeScript example
96
-
97
- This minimal `eslint.config.mjs` assumes ESLint 10, `eslint-plugin-vue`, and `typescript-eslint` are already installed. The application owns the parsers; installing Kazee's lint package does not replace them.
98
-
99
- ```js
100
- import tseslint from 'typescript-eslint';
101
- import vue from 'eslint-plugin-vue';
102
- import { consumerConfig } from '@kazee-ds/eslint-config';
103
-
104
- export default [
105
- { ignores: ['dist/**', 'node_modules/**'] },
106
- ...tseslint.configs.recommended,
107
- ...vue.configs['flat/recommended'],
108
- {
109
- files: ['**/*.vue'],
110
- languageOptions: { parserOptions: { parser: tseslint.parser } },
111
- },
112
- consumerConfig({ files: ['src/**/*.{ts,vue}'] }),
113
- ];
114
- ```
115
-
116
- ## Verification in this repository
117
-
118
- ```sh
119
- pnpm test:consumer-lint
120
- pnpm lint
121
- ```
122
-
123
- The test suite checks valid usage, reported mistakes, and false-positive cases. It lives in `packages/eslint-config/test` and runs through the normal package tests in CI's `unit-and-packages` job; `test:consumer-lint` remains a focused alias. The root configuration consumes the workspace package for applications and the existing token/style source scope; it keeps headless imports available to the React/Vue package implementations themselves. Manual sandbox projects are excluded from the root lint command, and can be checked separately with a config using the same rules and appropriate parsers.
124
-
125
- Version `0.1.0` was published and reinstalled from GitLab in isolated React and Vue consumers. Valid usage passed, incorrect APIs/private imports were rejected, and declarations, typechecks, and builds passed. See the [release and verification record](decisions/0007-eslint-config-private-release.md) for evidence and limits.
126
-
127
- ## Limits
128
-
129
- - This is not full prop/type validation. Keep framework typechecking and interaction tests.
130
- - Computed import paths, JSX spreads, Vue `v-bind` objects, dynamic directive arguments, and dynamic size/variant values are not evaluated.
131
- - Components re-exported through an application barrel, Vue Options API registration, globally registered components, and dynamic `<component :is>` usage are outside the initial component rule's scope.
132
- - Rules do not inspect CSS values, prove a global stylesheet import exists, or require every native Button/Select to be replaced.
133
- - These checks guide code usage, not whether an agent read its instruction file or searched dependency internals.
134
-
135
- See the [agent setup guide](agent-setup.md) for complementary instructions.
1
+ # Consumer lint rules
2
+
3
+ [`@kazee-ds/eslint-config`](../packages/eslint-config) provides a reusable ESLint flat configuration. Prepared version `0.5.0` supports the `0.6.0` React/Vue/styles composition contract; tokens stay `0.4.4`. These versions are unpublished candidates. The preceding verified lint release is `0.4.2`. See the [version matrix](versions.md). The package targets ESLint 10 and Node 22.16 or later, with TypeScript declarations and no runtime dependencies. Adding `AGENTS.md` alone does not enable these checks.
4
+
5
+ ## Rules
6
+
7
+ | Rule | Reports |
8
+ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
9
+ | `kazee/public-imports` | Imports from private or nonexistent exports of the four foundation packages, and direct imports from React Aria, React Stately, or Reka UI |
10
+ | `kazee/component-api` | Selected unsupported props/events and static Button size/variant values on components imported directly from Kazee |
11
+
12
+ The import rule checks static imports, re-exports, literal dynamic imports, and unshadowed literal `require` calls. Public CSS/JSON exports and framework `package.json` exports remain allowed.
13
+
14
+ The component rule recognizes React JSX imports (including aliases and namespace imports) and Vue SFC `<script setup>` imports used in templates (including aliases, kebab-case names, and namespace imports). It distinguishes local components from imported Kazee components, including React lexical shadowing and Vue template variables.
15
+
16
+ Examples of reported mistakes:
17
+
18
+ ```tsx
19
+ import { Button } from '@kazee-ds/react';
20
+
21
+ // Use onPress and isDisabled.
22
+ const save = (
23
+ <Button onClick={saveWorkspace} disabled={busy}>
24
+ Save
25
+ </Button>
26
+ );
27
+
28
+ // Use an installed supported variant; sm, md, or lg.
29
+ const other = (
30
+ <Button variant="unsupported" size="xl">
31
+ Save
32
+ </Button>
33
+ );
34
+ ```
35
+
36
+ ```vue
37
+ <script setup lang="ts">
38
+ import { Button, Select } from '@kazee-ds/vue';
39
+ </script>
40
+
41
+ <template>
42
+ <!-- Use disabled and @press. -->
43
+ <Button :is-disabled="busy" @click="save">Save</Button>
44
+ <!-- Use v-model for controlled selection. -->
45
+ <Select :value="workspace" label="Workspace" :options="options" />
46
+ </template>
47
+ ```
48
+
49
+ The rule rejects selected unsupported props. Coverage varies by component and version; consult installed public types rather than treating this rule as a complete API schema. The unpublished composition update allows root className/style (React), class/style (Vue), and typed classNames maps; earlier published versions can still reject these. Public compound parts accept their documented styling props. Framework callback, variant, accessible-name and import checks remain active. It reports diagnostics only; it does not autofix events, change application state, or rewrite imports.
50
+
51
+ ## Enable in a consuming application
52
+
53
+ Configure public npm access without read credentials using the [installation guide](installation.md). Keep the application's existing ESLint configuration, parsers, plugins, package manager, and lockfile, then install:
54
+
55
+ ```sh
56
+ npm install --save-dev --save-exact @kazee-ds/eslint-config@0.5.0
57
+ ```
58
+
59
+ Merge the configuration object into the application's existing flat config, after its framework/parser setup:
60
+
61
+ ```js
62
+ import { consumerConfig } from '@kazee-ds/eslint-config';
63
+
64
+ // Add this object to your existing exported flat-config array.
65
+ const kazeeRules = consumerConfig({
66
+ files: ['src/**/*.{js,jsx,ts,tsx,vue}'],
67
+ });
68
+ ```
69
+
70
+ `kazeeRules` must actually be included in the exported configuration; declaring it alone does not enable anything. Adjust `files` to the application's source directories (for example `app/` or `components/`). Scope it to areas adopting Kazee if the application still has unrelated headless-library integrations. The config intentionally forbids those imports in its selected files.
71
+
72
+ Use an ESLint 10 flat-config setup with a parser that supports the application's syntax: a TypeScript/JSX parser for React, or `vue-eslint-parser` with its TypeScript parser configured for Vue SFCs. The rules use `context.sourceCode` and Vue parser services; they do not configure parsers or add the general framework lint rules themselves.
73
+
74
+ Run the application's lint command and ensure it runs in the consuming project's CI. Update the lint package version and lockfile when adopting a different Kazee contract. Existing applications that copied the earlier standalone file can switch their config import to `@kazee-ds/eslint-config`, then remove the unused copy. The monorepo's old `tooling/eslint/consumer.mjs` entry point remains a re-export for compatibility.
75
+
76
+ ### Complete React/TypeScript example
77
+
78
+ The following minimal `eslint.config.mjs` assumes ESLint 10 and `typescript-eslint` are already installed. Merge the Kazee config into the application's fuller rules rather than discarding its existing checks.
79
+
80
+ ```js
81
+ import tseslint from 'typescript-eslint';
82
+ import { consumerConfig } from '@kazee-ds/eslint-config';
83
+
84
+ export default [
85
+ { ignores: ['dist/**', 'node_modules/**'] },
86
+ ...tseslint.configs.recommended,
87
+ {
88
+ files: ['src/**/*.{ts,tsx}'],
89
+ languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
90
+ },
91
+ consumerConfig({ files: ['src/**/*.{ts,tsx}'] }),
92
+ ];
93
+ ```
94
+
95
+ ### Complete Vue/TypeScript example
96
+
97
+ This minimal `eslint.config.mjs` assumes ESLint 10, `eslint-plugin-vue`, and `typescript-eslint` are already installed. The application owns the parsers; installing Kazee's lint package does not replace them.
98
+
99
+ ```js
100
+ import tseslint from 'typescript-eslint';
101
+ import vue from 'eslint-plugin-vue';
102
+ import { consumerConfig } from '@kazee-ds/eslint-config';
103
+
104
+ export default [
105
+ { ignores: ['dist/**', 'node_modules/**'] },
106
+ ...tseslint.configs.recommended,
107
+ ...vue.configs['flat/recommended'],
108
+ {
109
+ files: ['**/*.vue'],
110
+ languageOptions: { parserOptions: { parser: tseslint.parser } },
111
+ },
112
+ consumerConfig({ files: ['src/**/*.{ts,vue}'] }),
113
+ ];
114
+ ```
115
+
116
+ ## Verification in this repository
117
+
118
+ ```sh
119
+ pnpm test:consumer-lint
120
+ pnpm lint
121
+ ```
122
+
123
+ The test suite checks valid usage, reported mistakes, and false-positive cases. It lives in `packages/eslint-config/test` and runs through the normal package tests in CI's `unit-and-packages` job; `test:consumer-lint` remains a focused alias. The root configuration consumes the workspace package for applications and the existing token/style source scope; it keeps headless imports available to the React/Vue package implementations themselves. Manual sandbox projects are excluded from the root lint command, and can be checked separately with a config using the same rules and appropriate parsers.
124
+
125
+ Version `0.1.0` was published and reinstalled from GitLab in isolated React and Vue consumers. Valid usage passed, incorrect APIs/private imports were rejected, and declarations, typechecks, and builds passed. See the [release and verification record](decisions/0007-eslint-config-private-release.md) for evidence and limits.
126
+
127
+ ## Limits
128
+
129
+ - This is not full prop/type validation. Keep framework typechecking and interaction tests.
130
+ - Computed import paths, JSX spreads, Vue `v-bind` objects, dynamic directive arguments, and dynamic size/variant values are not evaluated.
131
+ - Components re-exported through an application barrel, Vue Options API registration, globally registered components, and dynamic `<component :is>` usage are outside the initial component rule's scope.
132
+ - Rules do not inspect CSS values, prove a global stylesheet import exists, or require every native Button/Select to be replaced.
133
+ - These checks guide code usage, not whether an agent read its instruction file or searched dependency internals.
134
+
135
+ See the [agent setup guide](agent-setup.md) for complementary instructions.