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

ui: use storybook-solidjs-vite for storybook

Browse Source
This commit is contained in:
Glen Huang
2025-10-23 22:44:40 +08:00
parent 0c3fd40120
commit c159ef79d2
39 changed files with 326 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,31 +1,20 @@
import { mergeConfig } from "vite";
import type { StorybookConfig } from "@kachurun/storybook-solid-vite";
import type { StorybookConfig } from "storybook-solidjs-vite";
const config: StorybookConfig = {
framework: "@kachurun/storybook-solid-vite",
export default {
framework: "storybook-solidjs-vite",
stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx"],
addons: [
"@storybook/addon-links",
"@storybook/addon-docs",
"@storybook/addon-a11y",
{
name: "@storybook/addon-vitest",
options: {
cli: false,
},
},
],
async viteFinal(config) {
return mergeConfig(config, {
define: { "process.env": {} },
});
},
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;
} satisfies StorybookConfig;

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

@@ -1,4 +1,4 @@
import type { Preview } from "@kachurun/storybook-solid-vite";
import type { Preview } from "storybook-solidjs-vite";
import "../src/index.css";
import "./preview.css";

2
pkgs/clan-app/ui/.storybook/vitest.setup.ts
View File

@@ -1,4 +1,4 @@
import { setProjectAnnotations } from "@kachurun/storybook-solid-vite";
import { setProjectAnnotations } from "storybook-solidjs-vite";
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
import * as projectAnnotations from "./preview";

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

@@ -26,12 +26,11 @@
},
"devDependencies": {
"@eslint/js": "^9.3.0",
"@kachurun/storybook-solid-vite": "^9.0.11",
"@linaria/core": "^6.3.0",
"@storybook/addon-a11y": "^9.0.8",
"@storybook/addon-docs": "^9.0.8",
"@storybook/addon-links": "^9.0.8",
"@storybook/addon-vitest": "^9.0.8",
"@storybook/addon-a11y": "^9.1.13",
"@storybook/addon-docs": "^9.1.13",
"@storybook/addon-links": "^9.1.13",
"@storybook/addon-vitest": "^9.1.13",
"@types/node": "^22.15.19",
"@types/three": "^0.176.0",
"@vitest/browser": "^3.2.3",
@@ -46,7 +45,8 @@
"postcss": "^8.4.38",
"postcss-url": "^10.1.3",
"prettier": "^3.2.5",
"storybook": "^9.0.8",
"storybook": "^9.1.13",
"storybook-solidjs-vite": "^9.0.3",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"typescript-eslint": "^8.32.1",
@@ -1325,6 +1325,26 @@
"node": ">=12"
}
},
"node_modules/@joshwooding/vite-plugin-react-docgen-typescript": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.6.2.tgz",
"integrity": "sha512-QsQrpmROMwdJGPPaaWfG5lvfd+nhprqq258phge/1LqdNd3RsqmUaP694nhLC9G1nDfu0ngL3OLKoGVHvkIyCw==",
"dev": true,
"license": "MIT",
"dependencies": {
"glob": "^10.0.0",
"react-docgen-typescript": "^2.2.2"
},
"peerDependencies": {
"typescript": ">= 4.3.x",
"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.12",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
@@ -1360,26 +1380,6 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@kachurun/storybook-solid-vite": {
"version": "9.0.11",
"resolved": "https://registry.npmjs.org/@kachurun/storybook-solid-vite/-/storybook-solid-vite-9.0.11.tgz",
"integrity": "sha512-1Q1GqkVu6V/oa/XrxJym2F0tSOIFwWbeKtCpfegavLINwMBSKCdvtSnmW6LhClnii9AMv0/7a06F2eemCMDGgg==",
"deprecated": "This package is deprecated. Use storybook-solidjs-vite instead: https://www.npmjs.com/package/storybook-solidjs-vite",
"dev": true,
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"@storybook/builder-vite": "^9.0.0",
"solid-js": "*",
"storybook": "^9.0.0",
"typescript": ">= 4.9.x",
"vite": "^5.0.0 || ^6.0.0",
"vite-plugin-solid": "*"
}
},
"node_modules/@kobalte/core": {
"version": "0.13.10",
"resolved": "https://registry.npmjs.org/@kobalte/core/-/core-0.13.10.tgz",
@@ -2251,9 +2251,9 @@
}
},
"node_modules/@storybook/addon-a11y": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-9.0.15.tgz",
"integrity": "sha512-/oborGUeN7KT6jyTMhGRET9tXvZ080OCB/Hw6txSfsVxgZ4Z1QTJcOreejHGeYyxHN1ugEJ26K95agk4M13WZg==",
"version": "9.1.13",
"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-9.1.13.tgz",
"integrity": "sha512-4enIl1h2XSZnFKUQJJoZbp1X40lzdj7f5JE15ZhU1al4z6hHWp7i2zD7ySyDpEbMypBCz1xnLvyiyw79m1fp7w==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2265,20 +2265,20 @@
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^9.0.15"
"storybook": "^9.1.13"
}
},
"node_modules/@storybook/addon-docs": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.0.15.tgz",
"integrity": "sha512-HOb45DkF23T1tRzakb9q33qnBRso15S/GM28ippPZWi5ZXR9RAyKVgOSMA/ViEpK4ezASxN+Tee+H7m4ksEFZw==",
"version": "9.1.13",
"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.1.13.tgz",
"integrity": "sha512-V1nCo7bfC3kQ5VNVq0VDcHsIhQf507m+BxMA5SIYiwdJHljH2BXpW2fL3FFn9gv9Wp57AEEzhm+wh4zANaJgkg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@mdx-js/react": "^3.0.0",
"@storybook/csf-plugin": "9.0.15",
"@storybook/icons": "^1.2.12",
"@storybook/react-dom-shim": "9.0.15",
"@storybook/csf-plugin": "9.1.13",
"@storybook/icons": "^1.4.0",
"@storybook/react-dom-shim": "9.1.13",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"ts-dedent": "^2.0.0"
@@ -2288,13 +2288,13 @@
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^9.0.15"
"storybook": "^9.1.13"
}
},
"node_modules/@storybook/addon-links": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-9.0.15.tgz",
"integrity": "sha512-DedEsoPOiRUupN9yuFaw9vwZe1QqK4QfC0Z9/0TxRNFdKffaakNJnPjnlrQn+R0eojYCRm9U9kdzOthM7/BgvQ==",
"version": "9.1.13",
"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-9.1.13.tgz",
"integrity": "sha512-wx33RA5PPRSepVAjR0hMFp2IXoPgjwNAHIP92aoi2QQFS3+NHlf1I4vXEPpHU6lc0WBwM43qvLSI0qTAyZd8Nw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2306,7 +2306,7 @@
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"storybook": "^9.0.15"
"storybook": "^9.1.13"
},
"peerDependenciesMeta": {
"react": {
@@ -2315,9 +2315,9 @@
}
},
"node_modules/@storybook/addon-vitest": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/@storybook/addon-vitest/-/addon-vitest-9.0.15.tgz",
"integrity": "sha512-4TynzdZgJMsvneT5lZGp+WrUoFtp8+LRL3y35EepJa3GMBc+9WgsKQrso+xnDQh1gLvVNe46n3klZvunVr4AFA==",
"version": "9.1.13",
"resolved": "https://registry.npmjs.org/@storybook/addon-vitest/-/addon-vitest-9.1.13.tgz",
"integrity": "sha512-g/wkQ8i1GGlsoHEe6bjWic+ESokWhuMBxAa9FDLW9KDf0L1DMyQqFFJFnGoo99zCNRVJcSXgzZTFp6SCt3FKog==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2333,7 +2333,7 @@
"peerDependencies": {
"@vitest/browser": "^3.0.0",
"@vitest/runner": "^3.0.0",
"storybook": "^9.0.15",
"storybook": "^9.1.13",
"vitest": "^3.0.0"
},
"peerDependenciesMeta": {
@@ -2348,30 +2348,10 @@
}
}
},
"node_modules/@storybook/builder-vite": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.0.15.tgz",
"integrity": "sha512-ogPec1V+e3MgTY5DBlq/6hBBui0Y4TmolYQh0eL3cATHrwZlwkTTDWQfsOnMALd5w+4Jq8n0gk0cQgR5rh1FHw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@storybook/csf-plugin": "9.0.15",
"ts-dedent": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^9.0.15",
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
}
},
"node_modules/@storybook/csf-plugin": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-9.0.15.tgz",
"integrity": "sha512-KszyGjrocMiNbkmpBGARF1ugLYMVaw1J8Z31kmwTHsMgMZwAKcOsofJ0fPgFno0yV59DUVkWxVBdPs9V0hhvxA==",
"version": "9.1.13",
"resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-9.1.13.tgz",
"integrity": "sha512-EMpzYuyt9FDcxxfBChWzfId50y8QMpdenviEQ8m+pa6c+ANx3pC5J6t7y0khD8TQu815sTy+nc6cc8PC45dPUA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2382,7 +2362,7 @@
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^9.0.15"
"storybook": "^9.1.13"
}
},
"node_modules/@storybook/global": {
@@ -2407,9 +2387,9 @@
}
},
"node_modules/@storybook/react-dom-shim": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-9.0.15.tgz",
"integrity": "sha512-X5VlYKoZSIMU9HEshIwtNzp41nPt4kiJtJ2c5HzFa5F6M8rEHM5n059CGcCZQqff3FnZtK/y6v/kCVZO+8oETA==",
"version": "9.1.13",
"resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-9.1.13.tgz",
"integrity": "sha512-/tMr9TmV3+98GEQO0S03k4gtKHGCpv9+k9Dmnv+TJK3TBz7QsaFEzMwe3gCgoTaebLACyVveDiZkWnCYAWB6NA==",
"dev": true,
"license": "MIT",
"funding": {
@@ -2419,7 +2399,7 @@
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"storybook": "^9.0.15"
"storybook": "^9.1.13"
}
},
"node_modules/@swc/helpers": {
@@ -6911,6 +6891,16 @@
"node": ">=0.10.0"
}
},
"node_modules/react-docgen-typescript": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.4.0.tgz",
"integrity": "sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"typescript": ">= 4.3.x"
}
},
"node_modules/react-dom": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
@@ -7382,9 +7372,9 @@
"license": "MIT"
},
"node_modules/storybook": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/storybook/-/storybook-9.0.15.tgz",
"integrity": "sha512-r9hwcSMM3dq7dkMveaWFTosrmyHCL2FRrV3JOwVnVWraF6GtCgp2k+r4hsYtyp1bY3zdmK9e4KYzXsGs5q1h/Q==",
"version": "9.1.13",
"resolved": "https://registry.npmjs.org/storybook/-/storybook-9.1.13.tgz",
"integrity": "sha512-G3KZ36EVzXyHds72B/qtWiJnhUpM0xOUeYlDcO9DSHL1bDTv15cW4+upBl+mcBZrDvU838cn7Bv4GpF+O5MCfw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -7392,6 +7382,7 @@
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/user-event": "^14.6.1",
"@vitest/expect": "3.2.4",
"@vitest/mocker": "3.2.4",
"@vitest/spy": "3.2.4",
"better-opn": "^3.0.2",
"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
@@ -7416,6 +7407,53 @@
}
}
},
"node_modules/storybook-solidjs-vite": {
"version": "9.0.3",
"resolved": "https://registry.npmjs.org/storybook-solidjs-vite/-/storybook-solidjs-vite-9.0.3.tgz",
"integrity": "sha512-buPxAw8ED0rhx2YjYLM/Eh55uyoTn70LthQBFDet+TJMnQ4gWltGIy5tNCstTQPp8OyfDTlEmLRvKsxbYpg3RQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@joshwooding/vite-plugin-react-docgen-typescript": "^0.6.1",
"@storybook/builder-vite": "^9.1.1",
"@storybook/global": "^5.0.0",
"vite-plugin-solid": "^2.11.8"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"solid-js": "^1.9.0",
"storybook": "^9.0.0",
"typescript": ">= 4.9.x",
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/storybook-solidjs-vite/node_modules/@storybook/builder-vite": {
"version": "9.1.13",
"resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.1.13.tgz",
"integrity": "sha512-pmtIjU02ASJOZKdL8DoxWXJgZnpTDgD5WmMnjKJh9FaWmc2YiCW2Y6VRxPox96OM655jYHQe5+UIbk3Cwtwb4A==",
"dev": true,
"license": "MIT",
"dependencies": {
"@storybook/csf-plugin": "9.1.13",
"ts-dedent": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^9.1.13",
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
}
},
"node_modules/storybook/node_modules/semver": {
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -8397,9 +8435,9 @@
}
},
"node_modules/vite-plugin-solid": {
"version": "2.11.7",
"resolved": "https://registry.npmjs.org/vite-plugin-solid/-/vite-plugin-solid-2.11.7.tgz",
"integrity": "sha512-5TgK1RnE449g0Ryxb9BXqem89RSy7fE8XGVCo+Gw84IHgPuPVP7nYNP6WBVAaY/0xw+OqfdQee+kusL0y3XYNg==",
"version": "2.11.10",
"resolved": "https://registry.npmjs.org/vite-plugin-solid/-/vite-plugin-solid-2.11.10.tgz",
"integrity": "sha512-Yr1dQybmtDtDAHkii6hXuc1oVH9CPcS/Zb2jN/P36qqcrkNnVPsMTzQ06jyzFPFjj3U1IYKMVt/9ZqcwGCEbjw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -8413,7 +8451,7 @@
"peerDependencies": {
"@testing-library/jest-dom": "^5.16.6 || ^5.17.0 || ^6.*",
"solid-js": "^1.7.2",
"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
},
"peerDependenciesMeta": {
"@testing-library/jest-dom": {

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

@@ -12,21 +12,19 @@
"check": "tsc --noEmit --skipLibCheck && eslint ./src --fix",
"test": "vitest run --project unit --typecheck",
"vite": "vite",
"storybook": "storybook",
"knip": "knip --fix",
"storybook-dev": "storybook dev -p 6006",
"storybook": "storybook dev -p 6006",
"test-storybook": "vitest run --project storybook",
"test-storybook-update-snapshots": "vitest run --project storybook --update"
},
"license": "MIT",
"devDependencies": {
"@eslint/js": "^9.3.0",
"@kachurun/storybook-solid-vite": "^9.0.11",
"@linaria/core": "^6.3.0",
"@storybook/addon-a11y": "^9.0.8",
"@storybook/addon-docs": "^9.0.8",
"@storybook/addon-links": "^9.0.8",
"@storybook/addon-vitest": "^9.0.8",
"@storybook/addon-a11y": "^9.1.13",
"@storybook/addon-docs": "^9.1.13",
"@storybook/addon-links": "^9.1.13",
"@storybook/addon-vitest": "^9.1.13",
"@types/node": "^22.15.19",
"@types/three": "^0.176.0",
"@vitest/browser": "^3.2.3",
@@ -41,7 +39,8 @@
"postcss": "^8.4.38",
"postcss-url": "^10.1.3",
"prettier": "^3.2.5",
"storybook": "^9.0.8",
"storybook": "^9.1.13",
"storybook-solidjs-vite": "^9.0.3",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"typescript-eslint": "^8.32.1",

18
pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx
View File

@@ -1,7 +1,6 @@
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { Alert, AlertProps } from "@/src/components/Alert/Alert";
import { expect, fn } from "storybook/test";
import { StoryContext } from "@kachurun/storybook-solid-vite";
const AlertExamples = (props: AlertProps) => (
<div class="grid w-fit grid-cols-2 gap-8">
@@ -20,14 +19,14 @@ const AlertExamples = (props: AlertProps) => (
</div>
);
const meta: Meta<AlertProps> = {
const meta: Meta<typeof AlertExamples> = {
title: "Components/Alert",
component: AlertExamples,
};
export default meta;
type Story = StoryObj<AlertProps>;
type Story = StoryObj<typeof meta>;
export const Info: Story = {
args: {
@@ -92,10 +91,13 @@ export const InfoDismiss: Story = {
args: {
...Info.args,
onDismiss: fn(),
play: async ({ canvas, step, userEvent, args }: StoryContext) => {
await userEvent.click(canvas.getByRole("button"));
await expect(args.onDismiss).toHaveBeenCalled();
},
},
render(args) {
return <Alert {...args} />;
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(canvas.getByRole("button"));
await expect(args.onDismiss).toHaveBeenCalled();
},
};

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

@@ -1,8 +1,7 @@
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { Button, ButtonProps } from "./Button";
import { Component } from "solid-js";
import { expect, fn, within } from "storybook/test";
import { StoryContext } from "@kachurun/storybook-solid-vite";
const getCursorStyle = (el: Element) => window.getComputedStyle(el).cursor;
@@ -202,7 +201,7 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
</>
);
const meta: Meta<ButtonProps> = {
const meta: Meta<typeof ButtonExamples> = {
title: "Components/Button",
component: ButtonExamples,
};
@@ -211,15 +210,13 @@ export default meta;
type Story = StoryObj<ButtonProps>;
const timeout = process.env.NODE_ENV === "test" ? 500 : 2000;
export const Primary: Story = {
args: {
hierarchy: "primary",
onClick: fn(),
},
play: async ({ canvasElement, step, userEvent, args }: StoryContext) => {
play: async ({ canvasElement, step, userEvent, args }) => {
const canvas = within(canvasElement);
const buttons = await canvas.findAllByRole("button");
@@ -264,7 +261,7 @@ export const GhostPrimary: Story = {
},
play: Primary.play,
decorators: [
(Story: StoryObj) => (
(Story) => (
<div class="p-10 bg-def-3">
<Story />
</div>

6
pkgs/clan-app/ui/src/components/CubeConstruction/CubeConstruction.stories.tsx
View File

@@ -1,7 +1,7 @@
import { CubeConstruction } from "./CubeConstruction";
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { Meta, StoryObj } from "storybook-solidjs-vite";
const meta: Meta = {
const meta: Meta<typeof CubeConstruction> = {
title: "Components/CubeConstruction",
component: CubeConstruction,
globals: {
@@ -12,7 +12,7 @@ const meta: Meta = {
export default meta;
type Story = StoryObj;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {},

12
pkgs/clan-app/ui/src/components/Divider/Divider.stories.tsx
View File

@@ -1,14 +1,14 @@
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { Divider, DividerProps } from "@/src/components/Divider/Divider";
import { Meta, StoryObj } from "storybook-solidjs-vite";
import { Divider } from "@/src/components/Divider/Divider";
const meta: Meta<DividerProps> = {
const meta: Meta<typeof Divider> = {
title: "Components/Divider",
component: Divider,
};
export default meta;
type Story = StoryObj<DividerProps>;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};
@@ -30,7 +30,7 @@ export const Vertical: Story = {
orientation: "vertical",
},
decorators: [
(Story: Story) => (
(Story) => (
<div class="h-32 w-full">
<Story />
</div>
@@ -43,5 +43,5 @@ export const VerticalInverted: Story = {
inverted: true,
...Vertical.args,
},
decorators: [...Vertical.decorators],
decorators: Vertical.decorators,
};

14
pkgs/clan-app/ui/src/components/Form/Checkbox.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import cx from "classnames";
import { Checkbox, CheckboxProps } from "@/src/components/Form/Checkbox";
@@ -23,17 +23,17 @@ const Examples = (props: CheckboxProps) => (
</div>
);
const meta = {
const meta: Meta<typeof Examples> = {
title: "Components/Form/Checkbox",
component: Examples,
decorators: [
(Story: StoryObj, context: StoryContext<CheckboxProps>) => {
(Story, { args }) => {
return (
<div
class={cx({
"w-[600px]": (context.args.orientation || "vertical") == "vertical",
"w-[1024px]": context.args.orientation == "horizontal",
"bg-inv-acc-3": context.args.inverted,
"w-[600px]": (args.orientation || "vertical") == "vertical",
"w-[1024px]": args.orientation == "horizontal",
"bg-inv-acc-3": args.inverted,
})}
>
<Story />
@@ -41,7 +41,7 @@ const meta = {
);
},
],
} satisfies Meta<CheckboxProps>;
};
export default meta;

14
pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import {
Fieldset,
FieldsetFieldProps,
@@ -18,17 +18,17 @@ const FieldsetExamples = (props: FieldsetProps) => (
</div>
);
const meta = {
const meta: Meta<typeof FieldsetExamples> = {
title: "Components/Form/Fieldset",
component: FieldsetExamples,
decorators: [
(Story: StoryObj, context: StoryContext<FieldsetProps>) => {
(Story, { args }) => {
return (
<div
class={cx({
"w-[600px]": (context.args.orientation || "vertical") == "vertical",
"w-[512px]": context.args.orientation == "horizontal",
"bg-inv-acc-3": context.args.inverted,
"w-[600px]": (args.orientation || "vertical") == "vertical",
"w-[512px]": args.orientation == "horizontal",
"bg-inv-acc-3": args.inverted,
})}
>
<Story />
@@ -36,7 +36,7 @@ const meta = {
);
},
],
} satisfies Meta<FieldsetProps>;
};
export default meta;

14
pkgs/clan-app/ui/src/components/Form/HostFileInput.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import cx from "classnames";
import {
HostFileInput,
@@ -31,17 +31,17 @@ const Examples = (props: HostFileInputProps) => (
</div>
);
const meta = {
const meta: Meta<typeof Examples> = {
title: "Components/Form/HostFileInput",
component: Examples,
decorators: [
(Story: StoryObj, context: StoryContext<HostFileInputProps>) => {
(Story, { args }) => {
return (
<div
class={cx({
"w-[600px]": (context.args.orientation || "vertical") == "vertical",
"w-[1024px]": context.args.orientation == "horizontal",
"bg-inv-acc-3": context.args.inverted,
"w-[600px]": (args.orientation || "vertical") == "vertical",
"w-[1024px]": args.orientation == "horizontal",
"bg-inv-acc-3": args.inverted,
})}
>
<Story />
@@ -49,7 +49,7 @@ const meta = {
);
},
],
} satisfies Meta<HostFileInputProps>;
};
export default meta;

8
pkgs/clan-app/ui/src/components/Form/MachineTags.stories.tsx
View File

@@ -1,12 +1,12 @@
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import { MachineTags, MachineTagsProps } from "./MachineTags";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { MachineTags } from "./MachineTags";
import { createForm, setValue } from "@modular-forms/solid";
import { Button } from "../Button/Button";
const meta = {
const meta: Meta<typeof MachineTags> = {
title: "Components/MachineTags",
component: MachineTags,
} satisfies Meta<MachineTagsProps>;
};
export default meta;

14
pkgs/clan-app/ui/src/components/Form/TextArea.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import cx from "classnames";
import { TextArea, TextAreaProps } from "./TextArea";
@@ -23,17 +23,17 @@ const Examples = (props: TextAreaProps) => (
</div>
);
const meta = {
const meta: Meta<typeof Examples> = {
title: "Components/Form/TextArea",
component: Examples,
decorators: [
(Story: StoryObj, context: StoryContext<TextAreaProps>) => {
(Story, { args }) => {
return (
<div
class={cx({
"w-[600px]": (context.args.orientation || "vertical") == "vertical",
"w-[1024px]": context.args.orientation == "horizontal",
"bg-inv-acc-3": context.args.inverted,
"w-[600px]": (args.orientation || "vertical") == "vertical",
"w-[1024px]": args.orientation == "horizontal",
"bg-inv-acc-3": args.inverted,
})}
>
<Story />
@@ -41,7 +41,7 @@ const meta = {
);
},
],
} satisfies Meta<TextAreaProps>;
};
export default meta;

14
pkgs/clan-app/ui/src/components/Form/TextInput.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import cx from "classnames";
import { TextInput, TextInputProps } from "@/src/components/Form/TextInput";
import Icon from "../Icon/Icon";
@@ -25,17 +25,17 @@ const Examples = (props: TextInputProps) => (
</div>
);
const meta = {
const meta: Meta<typeof Examples> = {
title: "Components/Form/TextInput",
component: Examples,
decorators: [
(Story: StoryObj, context: StoryContext<TextInputProps>) => {
(Story, { args }) => {
return (
<div
class={cx({
"w-[600px]": (context.args.orientation || "vertical") == "vertical",
"w-[1024px]": context.args.orientation == "horizontal",
"bg-inv-acc-3": context.args.inverted,
"w-[600px]": (args.orientation || "vertical") == "vertical",
"w-[1024px]": args.orientation == "horizontal",
"bg-inv-acc-3": args.inverted,
})}
>
<Story />
@@ -43,7 +43,7 @@ const meta = {
);
},
],
} satisfies Meta<TextInputProps>;
};
export default meta;

10
pkgs/clan-app/ui/src/components/Icon/Icon.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryObj, StoryContext } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { Component, For } from "solid-js";
import Icon, { IconProps, IconVariant } from "./Icon";
import cx from "classnames";
@@ -57,12 +57,12 @@ const IconExamples: Component<IconProps> = (props) => (
</div>
);
const meta: Meta<IconProps> = {
const meta: Meta<typeof IconExamples> = {
title: "Components/Icon",
component: IconExamples,
decorators: [
(Story: StoryObj, context: StoryContext<IconProps>) => (
<div class={cx(context.args.inverted || false ? "bg-inv-acc-3" : "")}>
(Story, { args }) => (
<div class={cx(args.inverted || false ? "bg-inv-acc-3" : "")}>
<Story />
</div>
),
@@ -71,7 +71,7 @@ const meta: Meta<IconProps> = {
export default meta;
type Story = StoryObj<IconProps>;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};

6
pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { Loader, LoaderProps } from "@/src/components/Loader/Loader";
const LoaderExamples = (props: LoaderProps) => (
@@ -9,14 +9,14 @@ const LoaderExamples = (props: LoaderProps) => (
</div>
);
const meta: Meta<LoaderProps> = {
const meta: Meta<typeof LoaderExamples> = {
title: "Components/Loader",
component: LoaderExamples,
};
export default meta;
type Story = StoryObj<LoaderProps>;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {

8
pkgs/clan-app/ui/src/components/LoadingBar/LadingBar.stories.tsx
View File

@@ -1,11 +1,11 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { LoadingBar } from "./LoadingBar";
const meta: Meta = {
const meta: Meta<typeof LoadingBar> = {
title: "Components/LoadingBar",
component: LoadingBar,
decorators: [
(Story: StoryObj, context: StoryContext<unknown>) => {
(Story) => {
return (
<div class={"flex w-fit items-center justify-center bg-slate-500 p-10"}>
<Story />
@@ -17,6 +17,6 @@ const meta: Meta = {
export default meta;
type Story = StoryObj;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};

10
pkgs/clan-app/ui/src/components/Logo/Logo.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { Component, For } from "solid-js";
import { Logo, LogoProps, LogoVariant } from "./Logo";
import cx from "classnames";
@@ -11,12 +11,12 @@ const LogoExamples: Component<LogoProps> = (props) => (
</div>
);
const meta: Meta<LogoProps> = {
const meta: Meta<typeof LogoExamples> = {
title: "Components/Logo",
component: LogoExamples,
decorators: [
(Story: StoryObj, context: StoryContext<LogoProps>) => (
<div class={cx(context.args.inverted || false ? "bg-inv-acc-3" : "")}>
(Story, { args }) => (
<div class={cx(args.inverted || false ? "bg-inv-acc-3" : "")}>
<Story />
</div>
),
@@ -25,7 +25,7 @@ const meta: Meta<LogoProps> = {
export default meta;
type Story = StoryObj<LogoProps>;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};

13
pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.stories.tsx
View File

@@ -1,14 +1,11 @@
import {
MachineStatus,
MachineStatusProps,
} from "@/src/components/MachineStatus/MachineStatus";
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
import { Meta, StoryObj } from "storybook-solidjs-vite";
const meta: Meta<MachineStatusProps> = {
const meta: Meta<typeof MachineStatus> = {
title: "Components/MachineStatus",
component: MachineStatus,
decorators: [
(Story: StoryObj) => (
(Story) => (
<div class="p-5 bg-inv-1">
<Story />
</div>
@@ -18,7 +15,7 @@ const meta: Meta<MachineStatusProps> = {
export default meta;
type Story = StoryObj<MachineStatusProps>;
type Story = StoryObj<typeof meta>;
export const Loading: Story = {
args: {},

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

@@ -1,17 +1,16 @@
import { TagProps } from "@/src/components/Tag/Tag";
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { Meta, StoryObj } from "storybook-solidjs-vite";
import { fn } from "storybook/test";
import { Modal, ModalProps } from "@/src/components/Modal/Modal";
import { Modal } from "@/src/components/Modal/Modal";
import { Fieldset, FieldsetFieldProps } from "@/src/components/Form/Fieldset";
import { TextInput } from "@/src/components/Form/TextInput";
import { TextArea } from "@/src/components/Form/TextArea";
import { Checkbox } from "@/src/components/Form/Checkbox";
import { Button } from "../Button/Button";
const meta: Meta<ModalProps> = {
const meta: Meta<typeof Modal> = {
title: "Components/Modal",
component: Modal,
render: (args: ModalProps) => (
render: (args) => (
<Modal
{...args}
children={
@@ -68,7 +67,7 @@ const meta: Meta<ModalProps> = {
export default meta;
type Story = StoryObj<TagProps>;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {

13
pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx
View File

@@ -1,14 +1,11 @@
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import {
NavSection,
NavSectionProps,
} from "@/src/components/NavSection/NavSection";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { NavSection } from "@/src/components/NavSection/NavSection";
const meta: Meta<NavSectionProps> = {
const meta: Meta<typeof NavSection> = {
title: "Components/NavSection",
component: NavSection,
decorators: [
(Story: StoryObj) => (
(Story) => (
<div class="w-96">
<Story />
</div>
@@ -18,7 +15,7 @@ const meta: Meta<NavSectionProps> = {
export default meta;
type Story = StoryObj<NavSectionProps>;
type Story = StoryObj<typeof NavSection>;
export const Default: Story = {
args: {

22
pkgs/clan-app/ui/src/components/Search/Search.stories.tsx
View File

@@ -1,24 +1,20 @@
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { Meta, StoryObj } from "storybook-solidjs-vite";
import { Search, SearchProps } from "./Search";
import { Search } from "./Search";
import Icon from "../Icon/Icon";
import { Combobox } from "@kobalte/core/combobox";
import { Typography } from "../Typography/Typography";
import {
ItemRenderOptions,
SearchMultiple,
SearchMultipleProps,
} from "./MultipleSearch";
import { ItemRenderOptions, SearchMultiple } from "./MultipleSearch";
import { Show } from "solid-js";
const meta = {
const meta: Meta<typeof Search> = {
title: "Components/Search",
component: Search,
} satisfies Meta<SearchProps<unknown>>;
};
export default meta;
type Story = StoryObj<SearchProps<unknown>>;
type Story = StoryObj<typeof meta>;
// To test the virtualizer, we can generate a list of modules
function generateModules(count: number): Module[] {
@@ -107,7 +103,7 @@ export const Default: Story = {
);
},
},
render: (args: SearchProps<Module>) => {
render: (args) => {
return (
<div class="fixed bottom-10 left-1/2 mb-2 w-[30rem] -translate-x-1/2">
<Search<Module>
@@ -130,7 +126,7 @@ export const Loading: Story = {
options: [],
renderItem: () => <span></span>,
},
render: (args: SearchProps<Module>) => {
render: (args) => {
return (
<div class="absolute bottom-1/3 w-3/4 px-3">
<Search<Module>
@@ -235,7 +231,7 @@ export const Multiple: Story = {
);
},
},
render: (args: SearchMultipleProps<MachineOrTag>) => {
render: (args) => {
return (
<div class="absolute bottom-1/3 w-3/4 px-3">
<SearchMultiple<MachineOrTag>

14
pkgs/clan-app/ui/src/components/Search/TagSelect.stories.tsx
View File

@@ -1,14 +1,14 @@
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { Meta, StoryObj } from "storybook-solidjs-vite";
import { TagSelect, TagSelectProps } from "./TagSelect";
import { TagSelect } from "./TagSelect";
import { Tag } from "../Tag/Tag";
import Icon from "../Icon/Icon";
import { createSignal } from "solid-js";
const meta = {
const meta: Meta<typeof TagSelect> = {
title: "Components/Custom/SelectStepper",
component: TagSelect,
} satisfies Meta<TagSelectProps<string>>;
};
export default meta;
@@ -17,7 +17,7 @@ interface Item {
label: string;
}
type Story = StoryObj<TagSelectProps<Item>>;
type Story = StoryObj<typeof meta>;
const Item = (item: Item) => (
<Tag
@@ -42,8 +42,8 @@ export const Default: Story = {
{ value: "corge", label: "Corge" },
{ value: "grault", label: "Grault" },
],
} satisfies Partial<TagSelectProps<Item>>,
render: (args: TagSelectProps<Item>) => {
},
render: (args) => {
const [state, setState] = createSignal<Item[]>([]);
return (
<TagSelect<Item>

17
pkgs/clan-app/ui/src/components/Select/Select.stories.tsx
View File

@@ -1,18 +1,13 @@
import { TagProps } from "@/src/components/Tag/Tag";
import { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import { Meta, StoryObj } from "storybook-solidjs-vite";
import { Select, SelectProps } from "./Select";
import { Select } from "./Select";
import { Fieldset } from "../Form/Fieldset";
// const meta: Meta<SelectProps> = {
// title: "Components/Select",
// component: Select,
// };
const meta = {
const meta: Meta<typeof Select> = {
title: "Components/Form/Select",
component: Select,
decorators: [
(Story: StoryObj, context: StoryContext<SelectProps>) => {
(Story) => {
return (
<div class={`w-[600px]`}>
<Fieldset>
@@ -22,11 +17,11 @@ const meta = {
);
},
],
} satisfies Meta<SelectProps>;
};
export default meta;
type Story = StoryObj<TagProps>;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {

13
pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx
View File

@@ -1,10 +1,5 @@
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import {
createMemoryHistory,
MemoryRouter,
Route,
RouteSectionProps,
} from "@solidjs/router";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { createMemoryHistory, MemoryRouter, Route } from "@solidjs/router";
import { Sidebar } from "@/src/components/Sidebar/Sidebar";
import { Suspense } from "solid-js";
import { addClanURI, resetStore } from "@/src/stores/clan";
@@ -106,7 +101,7 @@ const staticSections = [
},
];
const meta: Meta<RouteSectionProps> = {
const meta: Meta<typeof Sidebar> = {
title: "Components/Sidebar",
component: Sidebar,
render: () => {
@@ -144,7 +139,7 @@ const meta: Meta<RouteSectionProps> = {
export default meta;
type Story = StoryObj<RouteSectionProps>;
type Story = StoryObj<typeof meta>;
const mockFetcher = <K extends OperationNames>(
method: K,

23
pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx
View File

@@ -1,8 +1,5 @@
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import {
SidebarPane,
SidebarPaneProps,
} from "@/src/components/Sidebar/SidebarPane";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { SidebarPane } from "@/src/components/Sidebar/SidebarPane";
import { SidebarSection } from "./SidebarSection";
import { Divider } from "@/src/components/Divider/Divider";
import { TextInput } from "@/src/components/Form/TextInput";
@@ -14,9 +11,6 @@ import { splitProps } from "solid-js";
import { Typography } from "@/src/components/Typography/Typography";
import { MachineTags } from "@/src/components/Form/MachineTags";
import { setValue } from "@modular-forms/solid";
import { StoryContext } from "@kachurun/storybook-solid-vite";
type Story = StoryObj<SidebarPaneProps>;
const profiles = {
ron: {
@@ -28,18 +22,13 @@ const profiles = {
},
};
const meta: Meta<SidebarPaneProps> = {
const meta: Meta<typeof SidebarPane> = {
title: "Components/SidebarPane",
component: SidebarPane,
decorators: [
(
Story: StoryObj<SidebarPaneProps>,
context: StoryContext<SidebarPaneProps>,
) =>
() => <Story {...context.args} />,
],
};
type Story = StoryObj<typeof meta>;
export default meta;
export const Default: Story = {
@@ -51,7 +40,7 @@ export const Default: Story = {
},
// We have to provide children within a custom render function to ensure we aren't creating any reactivity outside the
// solid-js scope.
render: (args: SidebarPaneProps) => (
render: (args) => (
<SidebarPane
{...args}
children={

10
pkgs/clan-app/ui/src/components/Tag/Tag.stories.tsx
View File

@@ -1,16 +1,16 @@
import { Tag, TagProps } from "@/src/components/Tag/Tag";
import { Meta, type StoryContext, StoryObj } from "@kachurun/storybook-solid";
import { Tag } from "@/src/components/Tag/Tag";
import { Meta, StoryObj } from "storybook-solidjs-vite";
import { fn } from "storybook/test";
import Icon from "../Icon/Icon";
const meta: Meta<TagProps> = {
const meta: Meta<typeof Tag> = {
title: "Components/Tag",
component: Tag,
};
export default meta;
type Story = StoryObj<TagProps>;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
@@ -43,7 +43,7 @@ export const WithAction: Story = {
icon: IconAction,
interactive: true,
},
play: async ({ canvas, step, userEvent, args }: StoryContext) => {
play: async ({ canvas, step, userEvent, args }) => {
await userEvent.click(canvas.getByRole("button"));
// await expect(args.icon.onClick).toHaveBeenCalled();
},

10
pkgs/clan-app/ui/src/components/TagGroup/TagGroup.stories.tsx
View File

@@ -1,11 +1,11 @@
import { TagGroup, TagGroupProps } from "@/src/components/TagGroup/TagGroup";
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { TagGroup } from "@/src/components/TagGroup/TagGroup";
import { Meta, StoryObj } from "storybook-solidjs-vite";
const meta: Meta<TagGroupProps> = {
const meta: Meta<typeof TagGroup> = {
title: "Components/TagGroup",
component: TagGroup,
decorators: [
(Story: StoryObj) => (
(Story) => (
/* for some reason w-x from tailwind was not working */
<div style="width: 196px">
<Story />
@@ -16,7 +16,7 @@ const meta: Meta<TagGroupProps> = {
export default meta;
type Story = StoryObj<TagGroupProps>;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {

9
pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx
View File

@@ -1,19 +1,18 @@
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { Toolbar, ToolbarProps } from "@/src/components/Toolbar/Toolbar";
import { Meta, StoryObj } from "storybook-solidjs-vite";
import { Toolbar } from "@/src/components/Toolbar/Toolbar";
import { ToolbarButton } from "./ToolbarButton";
const meta: Meta<ToolbarProps> = {
const meta: Meta<typeof Toolbar> = {
title: "Components/Toolbar",
component: Toolbar,
};
export default meta;
type Story = StoryObj<ToolbarProps>;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
// We have to specify children inside a render function to avoid issues with reactivity outside a solid-js context.
// @ts-expect-error: args in storybook is not typed correctly. This is a storybook issue.
render: (args) => (
<div class="flex h-[80vh]">
<div class="mt-auto">

12
pkgs/clan-app/ui/src/components/Tooltip/Tooltip.stories.tsx
View File

@@ -1,18 +1,18 @@
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { Tooltip, TooltipProps } from "@/src/components/Tooltip/Tooltip";
import { Meta, StoryObj } from "storybook-solidjs-vite";
import { Tooltip } from "@/src/components/Tooltip/Tooltip";
import { Typography } from "@/src/components/Typography/Typography";
const meta: Meta<TooltipProps> = {
const meta: Meta<typeof Tooltip> = {
title: "Components/Tooltip",
component: Tooltip,
decorators: [
(Story: StoryObj<TooltipProps>) => (
(Story) => (
<div class="p-16">
<Story />
</div>
),
],
render: (args: TooltipProps) => (
render: (args) => (
<div class="p-16">
<Tooltip
{...args}
@@ -33,7 +33,7 @@ const meta: Meta<TooltipProps> = {
export default meta;
type Story = StoryObj<TooltipProps>;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {

6
pkgs/clan-app/ui/src/components/Typography/Typography.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { Family, Hierarchy, Typography, Weight } from "./Typography";
import { Component, For, Show } from "solid-js";
@@ -73,14 +73,14 @@ const TypographyExamples: Component<TypographyExamplesProps> = (props) => (
</table>
);
const meta: Meta<TypographyExamplesProps> = {
const meta: Meta<typeof TypographyExamples> = {
title: "Components/Typography",
component: TypographyExamples,
};
export default meta;
type Story = StoryObj<TypographyExamplesProps>;
type Story = StoryObj<typeof meta>;
export const BodyCondensed: Story = {
args: {

60
pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.stories.tsx
View File

@@ -1,45 +1,43 @@
import { fn } from "storybook/test";
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
import { ClanSettingsModal, ClanSettingsModalProps } from "./ClanSettingsModal";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { ClanSettingsModal } from "./ClanSettingsModal";
const meta: Meta<ClanSettingsModalProps> = {
const meta: Meta<typeof ClanSettingsModal> = {
title: "Modals/ClanSettings",
component: ClanSettingsModal,
};
export default meta;
type Story = StoryObj<ClanSettingsModalProps>;
type Story = StoryObj<typeof meta>;
const props: ClanSettingsModalProps = {
onClose: fn(),
model: {
uri: "/home/foo/my-clan",
details: {
name: "Sol",
description: null,
icon: null,
},
fieldsSchema: {
name: {
readonly: true,
reason: null,
readonly_members: [],
export const Default: Story = {
args: {
onClose: fn(),
model: {
uri: "/home/foo/my-clan",
details: {
name: "Sol",
description: null,
icon: null,
},
description: {
readonly: false,
reason: null,
readonly_members: [],
},
icon: {
readonly: false,
reason: null,
readonly_members: [],
fieldsSchema: {
name: {
readonly: true,
reason: null,
readonly_members: [],
},
description: {
readonly: false,
reason: null,
readonly_members: [],
},
icon: {
readonly: false,
reason: null,
readonly_members: [],
},
},
},
},
};
export const Default: Story = {
args: props,
};

2
pkgs/clan-app/ui/src/scene/splash.stories.tsx
View File

@@ -1,4 +1,4 @@
import { Meta, StoryObj } from "@kachurun/storybook-solid";
import { Meta, StoryObj } from "storybook-solidjs-vite";
import { Splash } from "./splash";
const meta: Meta = {

90
pkgs/clan-app/ui/src/types/index.d.ts vendored
View File

@@ -1,90 +0,0 @@
// @ts-nocheck
declare module "@kachurun/storybook-solid" {
import type { SolidRenderer } from "types";
import type {
AnnotatedStoryFn,
Args,
ArgsFromMeta,
ArgsStoryFn,
ComponentAnnotations,
DecoratorFunction,
LoaderFunction,
ProjectAnnotations,
StoryAnnotations,
StoryContext as GenericStoryContext,
StrictArgs,
} from "@storybook/types";
import type { Component as ComponentType, ComponentProps } from "solid-js";
import type { SetOptional, Simplify } from "type-fest";
export type {
ArgTypes,
Args,
Parameters,
StrictArgs,
} from "@storybook/types";
export type { SolidRenderer };
/**
* Metadata to configure the stories for a component.
*
* @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
*/
export type Meta<TCmpOrArgs = Args> =
TCmpOrArgs extends ComponentType<any>
? ComponentAnnotations<SolidRenderer, ComponentProps<TCmpOrArgs>>
: ComponentAnnotations<SolidRenderer, TCmpOrArgs>;
/**
* Story function that represents a CSFv2 component example.
*
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
*/
export type StoryFn<TCmpOrArgs = Args> =
TCmpOrArgs extends ComponentType<any>
? AnnotatedStoryFn<SolidRenderer, ComponentProps<TCmpOrArgs>>
: AnnotatedStoryFn<SolidRenderer, TCmpOrArgs>;
/**
* Story function that represents a CSFv3 component example.
*
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
*/
export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
render?: ArgsStoryFn<SolidRenderer, any>;
component?: infer Component;
args?: infer DefaultArgs;
}
? Simplify<
(Component extends ComponentType<any>
? ComponentProps<Component>
: unknown) &
ArgsFromMeta<SolidRenderer, TMetaOrCmpOrArgs>
> extends infer TArgs
? StoryAnnotations<
SolidRenderer,
TArgs,
SetOptional<
TArgs,
keyof TArgs & keyof (DefaultArgs & ActionArgs<TArgs>)
>
>
: never
: TMetaOrCmpOrArgs extends ComponentType<any>
? StoryAnnotations<SolidRenderer, ComponentProps<TMetaOrCmpOrArgs>>
: StoryAnnotations<SolidRenderer, TMetaOrCmpOrArgs>;
type ActionArgs<TArgs> = {
[P in keyof TArgs as TArgs[P] extends (...args: any[]) => any
? ((...args: any[]) => void) extends TArgs[P]
? P
: never
: never]: TArgs[P];
};
export type Decorator<TArgs = StrictArgs> = DecoratorFunction<
SolidRenderer,
TArgs
>;
export type Loader<TArgs = StrictArgs> = LoaderFunction<SolidRenderer, TArgs>;
export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<
SolidRenderer,
TArgs
>;
export type Preview = ProjectAnnotations<SolidRenderer>;
}
//# sourceMappingURL=index.d.ts.map

4
pkgs/clan-app/ui/src/workflows/AddMachine/AddMachine.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { AddMachine } from "@/src/workflows/AddMachine/AddMachine";
import {
createMemoryHistory,
@@ -62,7 +62,7 @@ const meta: Meta<typeof AddMachine> = {
title: "workflows/add-machine",
component: AddMachine,
decorators: [
(Story: StoryObj, context: StoryContext) => {
(Story) => {
const Routes: RouteDefinition[] = [
{
path: "/clans/:clanURI",

19
pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { InstallModal } from "./InstallMachine";
import {
createMemoryHistory,
@@ -161,7 +161,7 @@ const meta: Meta<typeof InstallModal> = {
title: "workflows/install",
component: InstallModal,
decorators: [
(Story: StoryObj, context: StoryContext) => {
(Story) => {
const Routes: RouteDefinition[] = [
{
path: "/clans/:clanURI",
@@ -198,10 +198,9 @@ const meta: Meta<typeof InstallModal> = {
export default meta;
type Story = StoryObj<typeof InstallModal>;
type Story = StoryObj<typeof meta>;
export const Init: Story = {
description: "Welcome step for the installation workflow",
args: {
open: true,
machineName: "Test Machine",
@@ -209,7 +208,6 @@ export const Init: Story = {
},
};
export const CreateInstallerProse: Story = {
description: "Prose step for creating an installer",
args: {
open: true,
machineName: "Test Machine",
@@ -217,7 +215,6 @@ export const CreateInstallerProse: Story = {
},
};
export const CreateInstallerImage: Story = {
description: "Configure the image to install",
args: {
open: true,
machineName: "Test Machine",
@@ -225,7 +222,6 @@ export const CreateInstallerImage: Story = {
},
};
export const CreateInstallerDisk: Story = {
description: "Select a disk to install the image on",
args: {
open: true,
machineName: "Test Machine",
@@ -233,7 +229,6 @@ export const CreateInstallerDisk: Story = {
},
};
export const CreateInstallerProgress: Story = {
description: "Showed while the USB stick is being flashed",
args: {
open: true,
machineName: "Test Machine",
@@ -241,7 +236,6 @@ export const CreateInstallerProgress: Story = {
},
};
export const CreateInstallerDone: Story = {
description: "Installation done step",
args: {
open: true,
machineName: "Test Machine",
@@ -249,7 +243,6 @@ export const CreateInstallerDone: Story = {
},
};
export const InstallConfigureAddress: Story = {
description: "Installation configure address step",
args: {
open: true,
machineName: "Test Machine",
@@ -257,7 +250,6 @@ export const InstallConfigureAddress: Story = {
},
};
export const InstallCheckHardware: Story = {
description: "Installation check hardware step",
args: {
open: true,
machineName: "Test Machine",
@@ -265,7 +257,6 @@ export const InstallCheckHardware: Story = {
},
};
export const InstallSelectDisk: Story = {
description: "Select disk to install the system on",
args: {
open: true,
machineName: "Test Machine",
@@ -273,7 +264,6 @@ export const InstallSelectDisk: Story = {
},
};
export const InstallVars: Story = {
description: "Fill required credentials and data for the installation",
args: {
open: true,
machineName: "Test Machine",
@@ -281,7 +271,6 @@ export const InstallVars: Story = {
},
};
export const InstallSummary: Story = {
description: "Summary of the installation steps",
args: {
open: true,
machineName: "Test Machine",
@@ -289,7 +278,6 @@ export const InstallSummary: Story = {
},
};
export const InstallProgress: Story = {
description: "Shown while the installation is in progress",
args: {
open: true,
machineName: "Test Machine",
@@ -297,7 +285,6 @@ export const InstallProgress: Story = {
},
};
export const InstallDone: Story = {
description: "Shown after the installation is done",
args: {
open: true,
machineName: "Test Machine",

7
pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import {
createMemoryHistory,
MemoryRouter,
@@ -134,7 +134,7 @@ const meta: Meta<typeof UpdateModal> = {
title: "workflows/update",
component: UpdateModal,
decorators: [
(Story: StoryObj, context: StoryContext) => {
(Story) => {
const Routes: RouteDefinition[] = [
{
path: "/clans/:clanURI",
@@ -174,14 +174,12 @@ export default meta;
type Story = StoryObj<typeof UpdateModal>;
export const Init: Story = {
description: "Welcome step for the update workflow",
args: {
open: true,
machineName: "Jon",
},
};
export const Address: Story = {
description: "Welcome step for the update workflow",
args: {
open: true,
machineName: "Jon",
@@ -189,7 +187,6 @@ export const Address: Story = {
},
};
export const UpdateProgress: Story = {
description: "Welcome step for the update workflow",
args: {
open: true,
machineName: "Jon",

6
pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx
View File

@@ -1,4 +1,4 @@
import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { ServiceWorkflow } from "./Service";
import {
createMemoryHistory,
@@ -126,7 +126,7 @@ const meta: Meta<typeof ServiceWorkflow> = {
title: "workflows/service",
component: ServiceWorkflow,
decorators: [
(Story: StoryObj, context: StoryContext) => {
(Story) => {
const Routes: RouteDefinition[] = [
{
path: "/clans/:clanURI",
@@ -163,7 +163,7 @@ const meta: Meta<typeof ServiceWorkflow> = {
export default meta;
type Story = StoryObj<typeof ServiceWorkflow>;
type Story = StoryObj<typeof meta>;
// export const Default: Story = {
// args: {},