@techsio/ui-kit 0.3.1 → 0.4.0

package/README.md

@@ -149,17 +149,70 @@ When overriding, create a file in the brand folder and map the semantic tokens t
     - Keep overrides in dedicated brand folders.
     - Basic components (e.g., Button) belong only in atoms/molecules.
 
-## 7. Publishing and releases
+## 7. Visual Regression Tests (Playwright + Docker)
+
+To keep screenshots stable across machines, run component tests inside Docker.
+
+1. Run Playwright tests in a consistent Linux environment (builds Storybook static output by default):
+
+```bash
+pnpm -C libs/ui test:components
+```
+
+1. Update snapshots (inside Docker):
+
+```bash
+pnpm -C libs/ui test:components:update
+```
+
+Docker image is defined in `docker/development/playwright/Dockerfile`.
+These tests are intentionally Docker-only; running them directly on the host is blocked to keep snapshots reproducible.
+Make sure Storybook is served at `TEST_BASE_URL` (default `http://127.0.0.1:6006` inside the container).
+You can run `pnpm -C libs/ui storybook` on the host and set `TEST_BASE_URL=http://host.docker.internal:6006`,
+or let Playwright start its own `http-server` inside Docker from `storybook-static`.
+For visual stability, stories used in regression tests should rely on local assets (avoid external image URLs).
+
+Optional environment overrides:
+- `TEST_BASE_URL` (default: `http://127.0.0.1:6006` inside the container)
+- `PLAYWRIGHT_STORYBOOK_REBUILD` (default: `1`, rebuilds `storybook-static`; set to `0` to reuse an existing build)
+- `TEST_STORIES` (comma-separated Storybook story ids to run, e.g. `atoms-button--states,molecules-productcard--layout-variants`)
+- `PLAYWRIGHT_WORKERS` (override worker count for parallel runs)
+- `PLAYWRIGHT_PAGE_RESET` (default: `1`, resets cookies/storage between stories; set to `0` for max speed if stable)
+- `DOCKER_PLATFORM` (default: `linux/amd64`)
+- `PLAYWRIGHT_DOCKER_IMAGE` (default: `new-engine-ui-playwright`)
+- `PLAYWRIGHT_DOCKER_SHM_SIZE` (default: `2g`, improves Playwright stability in Docker)
+- `PLAYWRIGHT_DOCKER_IPC` (default: `host`, improves Playwright stability in Docker)
+- `PLAYWRIGHT_DOCKER_SEQUENTIAL` (default: `0`, runs projects in parallel; set to `1` to reduce memory spikes)
+- `PLAYWRIGHT_DOCKER_PROJECTS` (comma-separated Playwright project names to run sequentially; default: `desktop,mobile`)
+
+### Recommendation for `PLAYWRIGHT_WORKERS` and parallelism
+
+- If `PLAYWRIGHT_WORKERS` is not set, the Playwright config defaults to
+    using (CPU cores - 1) workers. This balances parallelism with leaving one
+    core for system processes. You can override it in CI with `PLAYWRIGHT_WORKERS=4` (or
+    another suitable value) depending on your runner size.
+- The test suite enables `fullyParallel` in Playwright config, so tests can run
+    concurrently across files and workers — ensure tests are isolated and use
+    unique snapshot names (the visual tests already include `story.id` in the
+    screenshot filename, which is good).
+
+Example with parallel workers:
+
+```bash
+TEST_BASE_URL=http://127.0.0.1:6006 PLAYWRIGHT_WORKERS=6 pnpm -C libs/ui test:components
+```
+
+## 8. Publishing and releases
 
 - Build + publint: `pnpm -C libs/ui build` runs `rsbuild-plugin-publint` after the build; if exports/entrypoints are wrong, this command fails.
 - Exports only, no barrel: import from explicit subpaths (e.g. `@techsio/ui-kit/atoms/button`, `@techsio/ui-kit/templates/accordion`, `@techsio/ui-kit/utils`). The package root is intentionally not exported.
-- Automated releases: `libs/ui/release.config.mjs` uses semantic-release (tag format `ui-kit-v<version>`) to bump versions, update changelog, and publish to npm. While we are <1.0.0, `BREAKING CHANGE` commits are forced to “minor” bumps to stay in 0.x; remove that release rule when stabilizing for 1.0.0+ to restore SemVer majors.
-- Security posture: releases are restricted to GitHub Actions (`GITHUB_ACTIONS` required), npm publishes use provenance (`NPM_CONFIG_PROVENANCE=true`), and tokens live only in Actions secrets (`GH_TOKEN`, `NPM_TOKEN`). Keep secrets in a protected environment for extra safety.
-- CI workflow: `.github/workflows/ui-release.yml` builds `libs/ui` and runs semantic-release on `master`/`main` with `GH_TOKEN` and `NPM_TOKEN` secrets.
+- Automated releases: `libs/ui/release.config.mjs` uses semantic-release (tag format `ui-kit-v<version>`) to publish to npm and create GitHub releases without pushing generated version/changelog commits back to the protected branch. While we are <1.0.0, `BREAKING CHANGE` commits are forced to “minor” bumps to stay in 0.x; remove that release rule when stabilizing for 1.0.0+ to restore SemVer majors.
+- Security posture: releases are restricted to GitHub Actions (`GITHUB_ACTIONS` required), npm publishes use trusted publishing through GitHub OIDC (`id-token: write`) and do not require an npm token.
+- CI workflow: `.github/workflows/ui-release.yml` builds `libs/ui` and runs semantic-release on `master`/`main` with the workflow `GITHUB_TOKEN`. Use the manual `force_release` dispatch to publish missed UI changes after a skipped release.
 - Local dry run: `pnpm -C libs/ui semantic-release --dry-run`.
 - Commit format: follow Conventional Commits (`feat:`, `fix:`, `chore:`, `BREAKING CHANGE:`) so semantic-release can infer the correct version bump.
-- Required CI secrets: `GH_TOKEN` (repo write) and `NPM_TOKEN` (publish).
+- Required CI secrets: none for npm publishing; npm trusted publishing must be configured on npmjs.com for this repository and workflow path.
 
-## 8. Conclusion
+## 9. Conclusion
 
 This README serves as the single source of truth for building and maintaining our design system. By adhering to these guidelines, you ensure that our UI remains consistent, flexible, and scalable across multiple brands. If you have any questions or suggestions, please reach out to the design system team.

package/dist/.storybook/decorator.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type VariantGroupProps = {
+    title: string;
+    children: ReactNode;
+    fullWidth?: boolean;
+};
+export declare function VariantGroup({ title, children, fullWidth, }: VariantGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function VariantContainer({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=decorator.d.ts.map

package/dist/.storybook/decorator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorator.d.ts","sourceRoot":"","sources":["../../.storybook/decorator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CAanB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAErE"}

package/dist/.storybook/main.d.ts

@@ -0,0 +1,4 @@
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+declare const config: StorybookConfig;
+export default config;
+//# sourceMappingURL=main.d.ts.map

package/dist/.storybook/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../.storybook/main.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAE9D,QAAA,MAAM,MAAM,EAAE,eAoBb,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/.storybook/preview.d.ts

@@ -0,0 +1,5 @@
+import type { Preview } from "@storybook/react";
+import "../src/tokens/index.css";
+declare const preview: Preview;
+export default preview;
+//# sourceMappingURL=preview.d.ts.map

package/dist/.storybook/preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../.storybook/preview.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,yBAAyB,CAAA;AAEhC,QAAA,MAAM,OAAO,EAAE,OA4Cd,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/.storybook/test-runner.d.ts

@@ -0,0 +1,12 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+type JestConfig = {
+    modulePathIgnorePatterns?: string[];
+    testTimeout?: number;
+    [key: string]: unknown;
+};
+type TestRunnerConfigWithJest = TestRunnerConfig & {
+    getJestConfig: (config: JestConfig) => JestConfig;
+};
+declare const testRunnerConfig: TestRunnerConfigWithJest;
+export default testRunnerConfig;
+//# sourceMappingURL=test-runner.d.ts.map

package/dist/.storybook/test-runner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-runner.d.ts","sourceRoot":"","sources":["../../.storybook/test-runner.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAkB/D,KAAK,UAAU,GAAG;IAChB,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG,gBAAgB,GAAG;IACjD,aAAa,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC;CACnD,CAAC;AASF,QAAA,MAAM,gBAAgB,EAAE,wBAavB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/atoms/badge.js

@@ -2,60 +2,78 @@ import { jsx } from "react/jsx-runtime";
 import { tv } from "../utils.js";
 const badgeVariants = tv({
     base: [
-        'inline-flex items-center justify-center',
-        'p-badge',
-        'rounded-badge border-badge-border',
-        'text-badge-size font-badge',
-        'border-(length:--border-width-badge-dynamic)'
+        "inline-flex items-center justify-center",
+        "rounded-badge border-badge-border",
+        "border-(length:--border-width-badge)"
     ],
     variants: {
         variant: {
             primary: [
-                'bg-badge-bg-primary text-badge-fg-primary border-badge-border-primary'
+                "border-badge-border-primary bg-badge-bg-primary text-badge-fg-primary"
             ],
             secondary: [
-                'bg-badge-bg-secondary text-badge-fg-secondary border-badge-border-secondary'
+                "border-badge-border-secondary bg-badge-bg-secondary text-badge-fg-secondary"
             ],
             tertiary: [
-                'bg-badge-bg-tertiary text-badge-fg-tertiary border-badge-border-tertiary'
+                "border-badge-border-tertiary bg-badge-bg-tertiary text-badge-fg-tertiary"
             ],
             discount: [
-                'bg-badge-bg-discount text-badge-fg-discount border-badge-border-discount'
+                "border-badge-border-discount bg-badge-bg-discount text-badge-fg-discount"
             ],
             info: [
-                'bg-badge-bg-info text-badge-fg-info border-badge-border-info'
+                "border-badge-border-info bg-badge-bg-info text-badge-fg-info"
             ],
             success: [
-                'bg-badge-bg-success text-badge-fg-success border-badge-border-success'
+                "border-badge-border-success bg-badge-bg-success text-badge-fg-success"
             ],
             warning: [
-                'bg-badge-bg-warning text-badge-fg-warning border-badge-border-warning'
+                "border-badge-border-warning bg-badge-bg-warning text-badge-fg-warning"
             ],
             danger: [
-                'bg-badge-bg-danger text-badge-fg-danger border-badge-border-danger'
+                "border-badge-border-danger bg-badge-bg-danger text-badge-fg-danger"
             ],
             outline: [
-                'bg-badge-bg-outline text-badge-fg-outline border-badge-border-outline'
+                "border-badge-border-outline bg-badge-bg-outline text-badge-fg-outline"
             ],
             dynamic: []
+        },
+        size: {
+            sm: [
+                "text-badge-sm font-badge-sm",
+                "p-badge-sm"
+            ],
+            md: [
+                "text-badge-md font-badge-md",
+                "p-badge-md"
+            ],
+            lg: [
+                "text-badge-lg font-badge-lg",
+                "p-badge-lg"
+            ],
+            xl: [
+                "text-badge-xl font-badge-xl",
+                "p-badge-xl"
+            ]
         }
     },
     defaultVariants: {
-        variant: 'info'
+        variant: "info",
+        size: "md"
     }
 });
-function Badge({ variant, className, children, style, ...props }) {
-    const isDynamic = 'dynamic' === variant;
+function Badge({ variant, size, className, children, style, ...props }) {
+    const isDynamic = "dynamic" === variant;
     const { bgColor, fgColor, borderColor, ...restProps } = props;
     const dynamicStyles = isDynamic ? {
         ...style,
-        'background-color': bgColor,
+        backgroundColor: bgColor,
         color: fgColor,
-        'border-color': borderColor
+        borderColor: borderColor
     } : style;
     return /*#__PURE__*/ jsx("span", {
         className: badgeVariants({
             variant,
+            size,
             className
         }),
         style: dynamicStyles,