# `@nancyzeng0210/tvu-design-system/eslint-plugin`

ESLint plugin for consumer products of the TVU Design System.

Bundled inside the main `@nancyzeng0210/tvu-design-system` npm package; consumers don't install a separate plugin package.

## Install

The plugin ships with the library. Just install the library and add the plugin to your ESLint config.

```bash
pnpm add -D @nancyzeng0210/tvu-design-system eslint
```

## Usage (ESLint 9 flat config)

```js
// eslint.config.js
import tvuPlugin from '@nancyzeng0210/tvu-design-system/eslint-plugin'

export default [
  tvuPlugin.configs.recommended,
]
```

Or pick rules individually:

```js
import tvuPlugin from '@nancyzeng0210/tvu-design-system/eslint-plugin'

export default [
  {
    plugins: { '@nancyzeng0210/tvu-design-system': tvuPlugin },
    rules: {
      '@nancyzeng0210/tvu-design-system/no-hardcoded-color': 'error',
      '@nancyzeng0210/tvu-design-system/no-inline-svg': 'warn',
    },
  },
]
```

## Rules

| Rule | Severity (recommended) | Description |
|---|---|---|
| `no-hardcoded-color` | error | Forbids hex color literals (`#abc`, `#aabbcc`, `#aabbccdd`). Use TVU design tokens (`var(--brand)`, etc.) — see `src/tokens/variables.css` for the full set. Whitelist: `#fff` / `#000`. |
| `no-inline-svg` | error | Forbids inline `<svg>` elements, Unicode arrow glyphs (▲▼←→ etc.), and emoji status markers (🔴✅⚠️ etc.). Use the TVU icon registry: `import { ArrowUpIcon } from '@nancyzeng0210/tvu-design-system/icons/esm'`. |
| `icon-from-dist` | error | Icon asset imports must use the documented subpath exports (`@nancyzeng0210/tvu-design-system/icons/esm` or `/icons/svg/<name>`), not deep imports into `/dist/icons/...` or `/src/icons/...`. |
| `no-base-component-import` | error | Disallows importing base/internal components (named `Base*` or from `/components/` / `/src/components/` subpaths). Use top-level canonical exports: `import { Button } from '@nancyzeng0210/tvu-design-system'`. See [AGENTS.md 硬规则 #6](../AGENTS.md). |

## Disable on a single line

```vue
<template>
  <!-- eslint-disable-next-line @nancyzeng0210/tvu-design-system/no-hardcoded-color -->
  <div style="color: #ff0000">Bug repro fixture — do not copy</div>
</template>
```

## Relationship to `audit-product-code.mjs`

The same R1/R2 rules are also available as a standalone CLI for consumers not using ESLint:

```bash
pnpm exec audit-product-code --dir packages/my-app/src
```

ESLint plugin and CLI overlap intentionally — pick whichever fits your tooling. The ESLint plugin is preferred for editor-integrated feedback; the CLI is preferred for CI gates where ESLint is not configured.