@keboola/design 1.2.1 → 1.3.1

package/README.md

@@ -49,6 +49,31 @@ $ yarn test:ui
 
 For more information, read [Vitest's documentation](https://vitest.dev/guide/)
 
+### Component tests (Storybook Vitest addon)
+
+Every story is also run as a test via the [Storybook Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) (UT-4117):
+
+- **render / smoke** — the story mounts in a real browser without throwing (catches broken imports, runtime errors, bad props);
+- **interaction** — each story's `play()` function runs as a test.
+
+```bash
+yarn workspace @keboola/design test:stories
+```
+
+This is the cheap, low-flakiness base layer for testing stories. Screenshot/visual regression is a separate, complementary layer (UT-4060) — the Vitest addon does **not** do screenshot comparison.
+
+**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`.
+- `.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.
+
+**Prerequisites:** build the workspace deps once (`yarn build --filter='@keboola/design^...'`) and install the browser (`yarn workspace @keboola/design exec playwright install chromium`).
+
+**Adding coverage:** nothing to do — every CSF `*.stories.tsx` is picked up automatically. Add a `play()` to a story to turn it into an interaction test. (MDX docs pages — `src/**/*.mdx` — are not executed as tests; the addon only runs CSF stories.)
+
+**Runs locally only for now.** There's no CI workflow yet — in CI (2-core runner) browser mode costs ~35 s per story file, so the suite needs a CI-viability pass (browser `isolate: false`, cached Vite deps, sharding, or nightly) before it's wired in. Tracked in UT-4191. Adding `@storybook/addon-a11y` for per-story accessibility checks is a separate follow-up.
+
 ### Icons
 
 All icons should use the `Icon` component, which is a wrapper around `FontAwesomeIcon`. Browse the available icons in the Storybook `Icons` page.

package/dist/icon-names.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var icons = require('@awesome.me/kit-be8bcf7e5e/icons');
+
+// src/icon-names.ts
+var getAvailableIconNames = () => {
+  const names = /* @__PURE__ */ new Set();
+  for (const def of Object.values(icons.fas)) {
+    if (def !== null && typeof def === "object" && "iconName" in def && typeof def.iconName === "string") {
+      names.add(def.iconName);
+    }
+  }
+  return [...names].sort();
+};
+
+exports.getAvailableIconNames = getAvailableIconNames;
+//# sourceMappingURL=icon-names.cjs.map
+//# sourceMappingURL=icon-names.cjs.map

package/dist/icon-names.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon-names.ts"],"names":["fas"],"mappings":";;;;;AAMO,IAAM,wBAAwB,MAAgB;AACnD,EAAA,MAAM,KAAA,uBAAY,GAAA,EAAY;AAC9B,EAAA,KAAA,MAAW,GAAA,IAAO,MAAA,CAAO,MAAA,CAAOA,SAAG,CAAA,EAAG;AACpC,IAAA,IACE,GAAA,KAAQ,IAAA,IACR,OAAO,GAAA,KAAQ,QAAA,IACf,cAAc,GAAA,IACd,OAAO,GAAA,CAAI,QAAA,KAAa,QAAA,EACxB;AACA,MAAA,KAAA,CAAM,GAAA,CAAI,IAAI,QAAQ,CAAA;AAAA,IACxB;AAAA,EACF;AACA,EAAA,OAAO,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,EAAK;AACzB","file":"icon-names.cjs","sourcesContent":["import { fas } from '@awesome.me/kit-be8bcf7e5e/icons';\n\n/**\n * Reads available FontAwesome solid icon names from the FA kit.\n * Returns deduplicated, sorted kebab-case icon names (e.g. \"chart-bar\", \"circle-check\").\n */\nexport const getAvailableIconNames = (): string[] => {\n  const names = new Set<string>();\n  for (const def of Object.values(fas)) {\n    if (\n      def !== null &&\n      typeof def === 'object' &&\n      'iconName' in def &&\n      typeof def.iconName === 'string'\n    ) {\n      names.add(def.iconName);\n    }\n  }\n  return [...names].sort();\n};\n"]}

package/dist/icon-names.js

@@ -0,0 +1,16 @@
+import { fas } from '@awesome.me/kit-be8bcf7e5e/icons';
+
+// src/icon-names.ts
+var getAvailableIconNames = () => {
+  const names = /* @__PURE__ */ new Set();
+  for (const def of Object.values(fas)) {
+    if (def !== null && typeof def === "object" && "iconName" in def && typeof def.iconName === "string") {
+      names.add(def.iconName);
+    }
+  }
+  return [...names].sort();
+};
+
+export { getAvailableIconNames };
+//# sourceMappingURL=icon-names.js.map
+//# sourceMappingURL=icon-names.js.map

package/dist/icon-names.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon-names.ts"],"names":[],"mappings":";;;AAMO,IAAM,wBAAwB,MAAgB;AACnD,EAAA,MAAM,KAAA,uBAAY,GAAA,EAAY;AAC9B,EAAA,KAAA,MAAW,GAAA,IAAO,MAAA,CAAO,MAAA,CAAO,GAAG,CAAA,EAAG;AACpC,IAAA,IACE,GAAA,KAAQ,IAAA,IACR,OAAO,GAAA,KAAQ,QAAA,IACf,cAAc,GAAA,IACd,OAAO,GAAA,CAAI,QAAA,KAAa,QAAA,EACxB;AACA,MAAA,KAAA,CAAM,GAAA,CAAI,IAAI,QAAQ,CAAA;AAAA,IACxB;AAAA,EACF;AACA,EAAA,OAAO,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,EAAK;AACzB","file":"icon-names.js","sourcesContent":["import { fas } from '@awesome.me/kit-be8bcf7e5e/icons';\n\n/**\n * Reads available FontAwesome solid icon names from the FA kit.\n * Returns deduplicated, sorted kebab-case icon names (e.g. \"chart-bar\", \"circle-check\").\n */\nexport const getAvailableIconNames = (): string[] => {\n  const names = new Set<string>();\n  for (const def of Object.values(fas)) {\n    if (\n      def !== null &&\n      typeof def === 'object' &&\n      'iconName' in def &&\n      typeof def.iconName === 'string'\n    ) {\n      names.add(def.iconName);\n    }\n  }\n  return [...names].sort();\n};\n"]}