yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(ui): upgrade to storybook 9

Browse Source 
Replaces rollup with wasm version for portability.
This commit is contained in:
Brian McGee
2025-06-12 15:08:33 +01:00
parent 1ad8b85b15
commit 85328ab55e
17 changed files with 1414 additions and 10188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
pkgs/clan-app/ui/.storybook/main.ts
View File

@@ -1,34 +1,32 @@
import { createRequire } from "module";
import { dirname, join } from "path";
import { mergeConfig } from "vite";
import type { StorybookConfig } from "@kachurun/storybook-solid-vite";
const require = createRequire(import.meta.url);
const getAbsolutePath = (pkg: string) =>
dirname(require.resolve(join(pkg, "package.json")));
const config: StorybookConfig = {
framework: "@kachurun/storybook-solid-vite",
stories: ["../src/components/**/*.mdx", "../src/components/**/*.stories.tsx"],
addons: [
getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("@storybook/addon-essentials"),
getAbsolutePath("@storybook/addon-interactions"),
"@storybook/addon-links",
"@storybook/addon-docs",
"@storybook/addon-a11y",
"@storybook/addon-onboarding",
],
framework: {
name: "@kachurun/storybook-solid-vite",
options: {},
},
async viteFinal(config) {
return mergeConfig(config, {
define: { "process.env": {} },
});
},
docs: {
autodocs: "tag",
},
core: {
disableTelemetry: true,
},
typescript: {
reactDocgen: "react-docgen-typescript",
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
// 👇 Default prop filter, which excludes props from node_modules
propFilter: (prop: any) =>
prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
},
},
};
export default config;

9
pkgs/clan-app/ui/.storybook/preview.ts
View File

@@ -1,4 +1,4 @@
import type { Preview } from "@kachurun/storybook-solid";
import type { Preview } from "@kachurun/storybook-solid-vite";
import "@/src/components/v2/index.css";
import "../src/index.css";
@@ -8,13 +8,6 @@ export const preview: Preview = {
tags: ["autodocs"],
parameters: {
docs: { toc: true },
backgrounds: {
values: [
{ name: "Dark", value: "#333" },
{ name: "Light", value: "#ffffff" },
],
default: "Light",
},
// automatically create action args for all props that start with "on"
actions: { argTypesRegex: "^on.*" },
controls: {

12
pkgs/clan-app/ui/.storybook/test-runner.ts
View File

@@ -1,12 +0,0 @@
import type { TestRunnerConfig } from "@storybook/test-runner";
const config: TestRunnerConfig = {
async postVisit(page, context) {
// the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root
const elementHandler = await page.$("#storybook-root");
const innerHTML = await elementHandler.innerHTML();
expect(innerHTML).toMatchSnapshot();
},
};
export default config;

8
pkgs/clan-app/ui/.storybook/vitest.setup.ts Normal file
View File

@@ -0,0 +1,8 @@
import { setProjectAnnotations } from "@kachurun/storybook-solid-vite";
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
import * as projectAnnotations from "./preview";
// This is an important step to apply the right configuration when testing your stories.
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

7510
pkgs/clan-app/ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

45
pkgs/clan-app/ui/package.json
View File

@@ -10,31 +10,32 @@
"convert-html": "node gtk.webview.js",
"serve": "vite preview",
"check": "tsc --noEmit --skipLibCheck && eslint ./src",
"test": "vitest run --typecheck",
"test": "vitest run --project unit --typecheck",
"storybook": "storybook",
"storybook-build": "storybook build",
"storybook-dev": "storybook dev -p 6006",
"test-storybook": "test-storybook --browsers chromium --ci",
"test-storybook-update-snapshots": "npm run test-storybook -- --updateSnapshot",
"test-storybook": "vitest run --project storybook",
"test-storybook-update-snapshots": "vitest run --project storybook --update",
"test-storybook-static": "npm run storybook-build && concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server storybook-static --port 6006 --silent' 'wait-on tcp:127.0.0.1:6006 && npm run test-storybook'"
},
"license": "MIT",
"devDependencies": {
"@babel/plugin-syntax-import-attributes": "^7.27.1",
"@eslint/js": "^9.3.0",
"@kachurun/storybook-solid": "^8.6.7",
"@kachurun/storybook-solid-vite": "^8.6.7",
"@storybook/addon-essentials": "^8.6.14",
"@storybook/addon-interactions": "^8.6.14",
"@storybook/addon-links": "^8.6.14",
"@storybook/addon-viewport": "^8.6.14",
"@storybook/builder-vite": "^8.6.14",
"@storybook/test-runner": "^0.22.0",
"@kachurun/storybook-solid-vite": "^9.0.11",
"@storybook/addon-a11y": "^9.0.8",
"@storybook/addon-docs": "^9.0.8",
"@storybook/addon-links": "^9.0.8",
"@storybook/addon-onboarding": "^9.0.8",
"@storybook/addon-viewport": "^9.0.8",
"@storybook/addon-vitest": "^9.0.8",
"@tailwindcss/typography": "^0.5.13",
"@types/json-schema": "^7.0.15",
"@types/node": "^22.15.19",
"@types/three": "^0.176.0",
"@typescript-eslint/parser": "^8.32.1",
"@vitest/browser": "^3.2.3",
"@vitest/coverage-v8": "^3.2.3",
"autoprefixer": "^10.4.19",
"classnames": "^2.5.1",
"concurrently": "^9.1.2",
@@ -42,19 +43,19 @@
"eslint-plugin-tailwindcss": "^3.17.0",
"http-server": "^14.1.1",
"jsdom": "^26.1.0",
"playwright": "~1.52.0",
"postcss": "^8.4.38",
"postcss-url": "^10.1.3",
"prettier": "^3.2.5",
"solid-devtools": "^0.34.0",
"storybook": "^8.6.14",
"storybook-addon-pseudo-states": "^4.0.3",
"storybook": "^9.0.8",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"typescript-eslint": "^8.32.1",
"vite": "^6.3.5",
"vite-plugin-solid": "^2.8.2",
"vite-plugin-solid-svg": "^0.8.1",
"vitest": "^3.1.4",
"vitest": "^3.2.3",
"wait-on": "^8.0.3"
},
"dependencies": {
@@ -64,7 +65,6 @@
"@modular-forms/solid": "^0.25.1",
"@solid-primitives/storage": "^4.3.2",
"@solidjs/router": "^0.15.3",
"@storybook/test": "^8.6.14",
"@tanstack/eslint-plugin-query": "^5.51.12",
"@tanstack/solid-query": "^5.76.0",
"corvu": "^0.7.1",
@@ -74,5 +74,20 @@
"solid-markdown": "^2.0.13",
"solid-toast": "^0.5.0",
"three": "^0.176.0"
},
"optionalDependencies": {
"@esbuild/darwin-arm64": "^0.25.4",
"@esbuild/darwin-x64": "^0.25.4",
"@esbuild/linux-arm64": "^0.25.4",
"@esbuild/linux-x64": "^0.25.4"
},
"overrides": {
"vite": {
"rollup": "npm:@rollup/wasm-node@^4.34.9"
},
"@rollup/rollup-darwin-x64": "npm:@rollup/wasm-node@^4.34.9",
"@rollup/rollup-linux-x64": "npm:@rollup/wasm-node@^4.34.9",
"@rollup/rollup-darwin-arm64": "npm:@rollup/wasm-node@^4.34.9",
"@rollup/rollup-linux-arm64": "npm:@rollup/wasm-node@^4.34.9"
}
}

1
pkgs/clan-app/ui/src/components/icon/index.tsx
View File

@@ -89,7 +89,6 @@ const Icon: Component<IconProps> = (props) => {
width={iconProps.size || 16}
height={iconProps.size || 16}
viewBox="0 0 48 48"
// @ts-expect-error: dont know, fix this type nit later
ref={iconProps.ref}
{...iconProps}
/>

2
pkgs/clan-app/ui/src/components/v2/Button/Button.mdx
View File

@@ -1,4 +1,4 @@
import { DocsStory, Meta, Canvas } from "@storybook/blocks";
import { DocsStory, Meta, Canvas } from "@storybook/addon-docs/blocks";
import * as ButtonStories from "./Button.stories";

11
pkgs/clan-app/ui/src/components/v2/Button/Button.stories.tsx
View File

@@ -1,7 +1,9 @@
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import { Button, ButtonProps } from "./Button";
import { Component } from "solid-js";
import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
import { expect, fn, waitFor } from "storybook/test";
import { PlayFunctionContext } from "storybook/internal/csf";
import { StoryContext } from "@kachurun/storybook-solid-vite";
const getCursorStyle = (el: Element) => window.getComputedStyle(el).cursor;
@@ -160,9 +162,8 @@ export const Primary: Story = {
mockTimers: true,
},
},
play: async ({ args, canvasElement, step }) => {
const canvas = within(canvasElement);
play: async ({ canvas, step, userEvent, args }: StoryContext) => {
const buttons = await canvas.findAllByRole("button");
for (const button of buttons) {
@@ -233,8 +234,8 @@ export const GhostPrimary: Story = {
},
play: Primary.play,
decorators: [
(Story) => (
<div class="bg-def-3 p-10">
(Story: StoryObj) => (
<div class="p-10 bg-def-3">
<Story />
</div>
),

1863
pkgs/clan-app/ui/src/components/v2/Button/__snapshots__/Button.stories.tsx.snap
View File

File diff suppressed because it is too large Load Diff

1
pkgs/clan-app/ui/src/components/v2/Icon/Icon.tsx
View File

@@ -116,7 +116,6 @@ const Icon: Component<IconProps> = (props) => {
width={iconProps.size || "1em"}
height={iconProps.size || "1em"}
viewBox="0 0 48 48"
// @ts-expect-error: dont know, fix this type nit later
ref={iconProps.ref}
{...iconProps}
/>

1071
pkgs/clan-app/ui/src/components/v2/Icon/__snapshots__/Icon.stories.tsx.snap
View File

File diff suppressed because it is too large Load Diff

23
pkgs/clan-app/ui/src/components/v2/Loader/__snapshots__/Loader.stories.tsx.snap
View File

@@ -1,23 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Components/Loader Primary smoke-test 1`] = `
<div class="loader primary">
<div class="wrapper">
<div class="parent">
</div>
</div>
<div class="child">
</div>
</div>
`;
exports[`Components/Loader Secondary smoke-test 1`] = `
<div class="loader secondary">
<div class="wrapper">
<div class="parent">
</div>
</div>
<div class="child">
</div>
</div>
`;

2
pkgs/clan-app/ui/src/components/v2/Typography/Typography.mdx
View File

@@ -1,4 +1,4 @@
import { DocsStory, Meta, Canvas } from "@storybook/blocks";
import { DocsStory, Meta, Canvas } from "@storybook/addon-docs/blocks";
import * as TypographyStories from "./Typography.stories";

955
pkgs/clan-app/ui/src/components/v2/Typography/__snapshots__/Typography.stories.tsx.snap
View File

@@ -1,955 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Components/Typography Body smoke-test 1`] = `
<table class="w-full min-w-max table-auto text-left">
<tbody>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-body">
body / default / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-body">
body / default / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-body">
body / default / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-s font-body">
body / s / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-s font-body">
body / s / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-s font-body">
body / s / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xs font-body">
body / xs / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xs font-body">
body / xs / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xs font-body">
body / xs / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xxs font-body">
body / xxs / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xxs font-body">
body / xxs / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xxs font-body">
body / xxs / bold
</span>
</td>
</tr>
</tbody>
</table>
`;
exports[`Components/Typography BodyCondensed smoke-test 1`] = `
<table class="w-full min-w-max table-auto text-left">
<tbody>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold
</span>
</td>
</tr>
</tbody>
</table>
`;
exports[`Components/Typography Colors smoke-test 1`] = `
<table class="w-full min-w-max table-auto text-left">
<tbody>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / quaternary
</span>
<br>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / quaternary
</span>
<br>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / quaternary
</span>
<br>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / inherit
</span>
<br>
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / primary
</span>
<br>
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / secondary
</span>
<br>
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / tertiary
</span>
<br>
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / quaternary
</span>
<br>
</td>
</tr>
</tbody>
</table>
`;
exports[`Components/Typography ColorsInverted smoke-test 1`] = `
<table class="w-full min-w-max table-auto text-left text-white bg-inv-1">
<tbody>
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-default font-body">
body / default / normal / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-default font-body">
body / default / medium / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-default font-body">
body / default / bold / quaternary
</span>
<br>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-s font-body">
body / s / normal / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-s font-body">
body / s / medium / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-s font-body">
body / s / bold / quaternary
</span>
<br>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xs font-body">
body / xs / normal / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xs font-body">
body / xs / medium / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xs font-body">
body / xs / bold / quaternary
</span>
<br>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xxs font-body">
body / xxs / normal / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xxs font-body">
body / xxs / medium / quaternary
</span>
<br>
</td>
<td class="px-6 py-2 ">
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / inherit
</span>
<br>
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / primary
</span>
<br>
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / secondary
</span>
<br>
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / tertiary
</span>
<br>
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xxs font-body">
body / xxs / bold / quaternary
</span>
<br>
</td>
</tr>
</tbody>
</table>
`;
exports[`Components/Typography Headline smoke-test 1`] = `
<table class="w-full min-w-max table-auto text-left">
<tbody>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-headline">
headline / default / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-headline">
headline / default / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-headline">
headline / default / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-headline">
headline / m / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-headline">
headline / m / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-headline">
headline / m / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-headline">
headline / l / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-headline">
headline / l / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-headline">
headline / l / bold
</span>
</td>
</tr>
</tbody>
</table>
`;
exports[`Components/Typography LabelCondensed smoke-test 1`] = `
<table class="w-full min-w-max table-auto text-left">
<tbody>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-label">
label / default / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-label">
label / default / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-label">
label / default / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-label">
label / s / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-label">
label / s / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-label">
label / s / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-label">
label / xs / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-label">
label / xs / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-label">
label / xs / bold
</span>
</td>
</tr>
</tbody>
</table>
`;
exports[`Components/Typography LabelMono smoke-test 1`] = `
<table class="w-full min-w-max table-auto text-left">
<tbody>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-mono font-weight-normal font-size-default font-label">
label / default / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-mono font-weight-medium font-size-default font-label">
label / default / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-mono font-weight-bold font-size-default font-label">
label / default / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-mono font-weight-normal font-size-s font-label">
label / s / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-mono font-weight-medium font-size-s font-label">
label / s / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-mono font-weight-bold font-size-s font-label">
label / s / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-mono font-weight-normal font-size-xs font-label">
label / xs / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-mono font-weight-medium font-size-xs font-label">
label / xs / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-mono font-weight-bold font-size-xs font-label">
label / xs / bold
</span>
</td>
</tr>
</tbody>
</table>
`;
exports[`Components/Typography Teaser smoke-test 1`] = `
<table class="w-full min-w-max table-auto text-left">
<tbody>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-teaser">
teaser / default / bold
</span>
</td>
</tr>
</tbody>
</table>
`;
exports[`Components/Typography Title smoke-test 1`] = `
<table class="w-full min-w-max table-auto text-left">
<tbody>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-title">
title / default / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-title">
title / default / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-title">
title / default / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-title">
title / m / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-title">
title / m / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-title">
title / m / bold
</span>
</td>
</tr>
<tr class="border-b border-def-3 even:bg-def-2">
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-title">
title / l / normal
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-title">
title / l / medium
</span>
</td>
<td class="px-6 py-2 ">
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-title">
title / l / bold
</span>
</td>
</tr>
</tbody>
</table>
`;

2
pkgs/clan-app/ui/tsconfig.json
View File

@@ -8,7 +8,7 @@
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": ["vite-plugin-solid-svg/types-component-solid", "vite/client"],
"types": ["vite/client", "vite-plugin-solid-svg/types-component-solid"],
"noEmit": true,
"resolveJsonModule": true,
"allowJs": true,

53
pkgs/clan-app/ui/vitest.config.ts Normal file
View File

@@ -0,0 +1,53 @@
import path from "node:path";
import { fileURLToPath } from "node:url";
import solid from "vite-plugin-solid";
import { defineConfig, mergeConfig } from "vitest/config";
// @ts-expect-error the type is a bit funky, but it's working
import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
const dirname =
typeof __dirname !== "undefined"
? __dirname
: path.dirname(fileURLToPath(import.meta.url));
import viteConfig from "./vite.config";
export default mergeConfig(
viteConfig,
defineConfig({
plugins: [solid()],
test: {
projects: [
{
test: {
name: "unit",
},
},
{
extends: path.join(dirname, "vite.config.ts"),
plugins: [
// The plugin will run tests for the stories defined in your Storybook config
// See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
storybookTest({
configDir: path.join(dirname, ".storybook"),
}),
],
test: {
name: "storybook",
browser: {
// Enable browser-based testing for UI components
enabled: true,
headless: true,
provider: "playwright",
instances: [{ browser: "chromium" }],
},
// This setup file applies Storybook project annotations for Vitest
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
setupFiles: [".storybook/vitest.setup.ts"],
},
},
],
},
}),
);