@keboola/design 2.1.0 → 3.1.0

package/README.md

@@ -1,15 +1,14 @@
 # @keboola/design
 
-The Keboola design system — shadcn-aligned, Radix-underneath, FontAwesome icons.
+The Keboola design system — shadcn-aligned, Radix-underneath, Lucide icons.
 
 [![npm version](https://img.shields.io/npm/v/@keboola/design.svg)](https://www.npmjs.com/package/@keboola/design)
-[![Storybook](https://img.shields.io/badge/Storybook-live-FF4785)](https://design-hh9143njj-keboola.vercel.app)
+[![Storybook](https://img.shields.io/badge/Storybook-live-FF4785)](https://design-keboola.vercel.app/)
 
-📦 **Storybook:** https://design-hh9143njj-keboola.vercel.app
-
-<!-- TODO (UT-3991 follow-up, Wave D-2): replace with canonical production URL once design Storybook hosting is confirmed -->
+📦 **Storybook:** https://design-keboola.vercel.app/
 
 📖 **Decision tree:** [`AGENTS.md`](./AGENTS.md) — which component to use when.
+🎨 **Tokens:** [`DESIGN.md`](./DESIGN.md) — canonical token surface in [google-labs-code/design.md](https://github.com/google-labs-code/design.md) format; validated by `yarn lint --filter=@keboola/design`.
 🎨 **Branding:** [`../../docs/branding.md`](../../docs/branding.md) (lands with PR #5674).
 
 ## Install
@@ -64,7 +63,7 @@ This is the cheap, low-flakiness base layer for testing stories. Screenshot/visu
 
 **How it's wired:**
 
-- `vitest.storybook.config.ts` — a separate Vitest config (browser mode, Playwright Chromium provider) so `yarn test` stays jsdom-only and browser-free; story tests are opt-in via `test:stories`.
+- `vitest.config.ts` — a separate Vitest config (browser mode, Playwright Chromium provider) so `yarn test` stays jsdom-only and browser-free; story tests are opt-in via `test:stories`. It is named `vitest.config.ts` (not `vitest.storybook.config.ts`) so the Storybook "Run tests" button (`@storybook/addon-vitest`) can discover it — the addon only scans `vitest.workspace.*` / `vitest.config.*` / `vite.config.*` names; under any other name it falls back to `vite.config.ts` and crashes the dev server (UT-4243). The jsdom `test` script therefore pins `--config vite.config.ts` explicitly.
 - `.storybook/vitest.setup.ts` — applies the Storybook `preview` annotations (decorators, globals) so tests render exactly like Storybook.
 - `optimizeDeps.entries` crawls every story up front so Vite optimizes all story dependencies in one pass — without it, a heavy dep (mermaid, codemirror, …) discovered mid-run makes Vite re-optimize and 404 in-flight imports.
 
@@ -112,7 +111,7 @@ Worked examples: `src/components/Button/Button.stories.tsx` (click + disabled),
 
 **Timing-sensitive:** `HoverCard` is the only test driven by a real `userEvent.hover` past a 200 ms open delay (its `findByText` carries a raised timeout). It passes headlessly today, but it's the most likely flake if CI is slow — `Tooltip` deliberately opens via keyboard focus to avoid this. Watch it when wiring CI.
 
-**Runs in CI per-PR (non-blocking).** The `.github/workflows/storybook-component-tests.yml` workflow runs the full suite, wired into `branch.yml` (the `story-tests` job) and gated on the same `detect-affected` design signal as the Storybook deploy — so it only runs when this package (or something it depends on) changes. It is non-blocking: a red run surfaces in the PR Checks tab but doesn't gate the merge. Browser mode isolates per file by default (~35 s/file on a 2-core runner, ~60 min for all 104), so `vitest.storybook.config.ts` sets `isolate: false` + `fileParallelism: false` + `maxWorkers: 1` to reuse one browser context across files, and the workflow caches Vite's optimized deps to skip the ~27 s dep pre-bundling on warm runs — bringing the run down to a few minutes. If the suite ever exceeds ~5-6 min, the documented fallback is sharding across a job matrix (and/or full-suite nightly + changed-stories-only on PR). Tracked in UT-4191. Adding `@storybook/addon-a11y` for per-story accessibility checks is a separate follow-up.
+**Runs in CI per-PR (non-blocking).** The `.github/workflows/storybook-component-tests.yml` workflow runs the full suite, wired into `branch.yml` (the `story-tests` job) and gated on the same `detect-affected` design signal as the Storybook deploy — so it only runs when this package (or something it depends on) changes. It is non-blocking: a red run surfaces in the PR Checks tab but doesn't gate the merge. Browser mode isolates per file by default (~35 s/file on a 2-core runner, ~60 min for all 104), so `vitest.config.ts` sets `isolate: false` + `fileParallelism: false` + `maxWorkers: 1` to reuse one browser context across files, and the workflow caches Vite's optimized deps to skip the ~27 s dep pre-bundling on warm runs — bringing the run down to a few minutes. If the suite ever exceeds ~5-6 min, the documented fallback is sharding across a job matrix (and/or full-suite nightly + changed-stories-only on PR). Tracked in UT-4191. Adding `@storybook/addon-a11y` for per-story accessibility checks is a separate follow-up.
 
 #### Story-test coverage (UT-4189)
 
@@ -132,6 +131,8 @@ Same prerequisites as `test:stories` (build workspace deps, install Chromium). R
 
 ### Icons
 
-All icons should use the `Icon` component, which is a wrapper around `FontAwesomeIcon`. Browse the available icons in the Storybook `Icons` page.
+Import icons directly from `@keboola/design/icons` — a wildcard re-export of [lucide-react](https://lucide.dev) plus Keboola-custom inline-SVG icons. See `AGENTS.md` for the full mapping and conventions.
 
-When using custom icons (prefix `fak`), pass the icon as a tuple: `<Icon icon={['fak', 'custom-icon']} />`.
+```tsx
+import { ChevronDown, Keboola } from '@keboola/design/icons';
+```