@kazee-ds/init 0.1.7 → 0.1.8
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 +35 -35
- package/package.json +1 -1
- package/src/content.mjs +1 -1
- package/templates/AGENTS.md +63 -63
- package/templates/consumer-lint.md +135 -135
package/README.md
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
# @kazee-ds/init
|
|
2
|
-
|
|
3
|
-
Preview-first setup for an existing standalone React or Vue application. Published CLI 0.1.
|
|
4
|
-
|
|
5
|
-
From an existing application, preview with `npm exec --yes --package=@kazee-ds/init@0.1.
|
|
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
|
+
Preview-first setup for an existing standalone React or Vue application. Published CLI 0.1.8 pins React/Vue/styles at 0.5.5 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.8 -- 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.
|
package/package.json
CHANGED
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.
|
|
3
|
+
export const RELEASE = Object.freeze({ framework: '0.5.5', styles: '0.5.5', lint: '0.4.2' });
|
|
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'),
|
package/templates/AGENTS.md
CHANGED
|
@@ -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.
|
|
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
|
+
- 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,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
|
-
|
|
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. 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.5`; tokens are `0.4.4`. 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.
|