diff --git a/pkgs/clan-app/ui/.storybook/main.ts b/pkgs/clan-app/ui/.storybook/main.ts index 0702d9972..023ff5179 100644 --- a/pkgs/clan-app/ui/.storybook/main.ts +++ b/pkgs/clan-app/ui/.storybook/main.ts @@ -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; diff --git a/pkgs/clan-app/ui/.storybook/preview.ts b/pkgs/clan-app/ui/.storybook/preview.ts index b1bbb8cda..65c63a900 100644 --- a/pkgs/clan-app/ui/.storybook/preview.ts +++ b/pkgs/clan-app/ui/.storybook/preview.ts @@ -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"; diff --git a/pkgs/clan-app/ui/.storybook/vitest.setup.ts b/pkgs/clan-app/ui/.storybook/vitest.setup.ts index ce819e8ca..513ad1f8f 100644 --- a/pkgs/clan-app/ui/.storybook/vitest.setup.ts +++ b/pkgs/clan-app/ui/.storybook/vitest.setup.ts @@ -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"; diff --git a/pkgs/clan-app/ui/package-lock.json b/pkgs/clan-app/ui/package-lock.json index 8a55b1dae..9227a300e 100644 --- a/pkgs/clan-app/ui/package-lock.json +++ b/pkgs/clan-app/ui/package-lock.json @@ -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": { diff --git a/pkgs/clan-app/ui/package.json b/pkgs/clan-app/ui/package.json index 4acc6b401..0ba5c5567 100644 --- a/pkgs/clan-app/ui/package.json +++ b/pkgs/clan-app/ui/package.json @@ -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", diff --git a/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx b/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx index 8111ef54d..80fbda7b1 100644 --- a/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx @@ -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) => (
@@ -20,14 +19,14 @@ const AlertExamples = (props: AlertProps) => (
); -const meta: Meta = { +const meta: Meta = { title: "Components/Alert", component: AlertExamples, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; 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 ; + }, + play: async ({ canvas, userEvent, args }) => { + await userEvent.click(canvas.getByRole("button")); + await expect(args.onDismiss).toHaveBeenCalled(); }, }; diff --git a/pkgs/clan-app/ui/src/components/Button/Button.stories.tsx b/pkgs/clan-app/ui/src/components/Button/Button.stories.tsx index 234ead19a..9e1d550bc 100644 --- a/pkgs/clan-app/ui/src/components/Button/Button.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Button/Button.stories.tsx @@ -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 = (props) => ( ); -const meta: Meta = { +const meta: Meta = { title: "Components/Button", component: ButtonExamples, }; @@ -211,15 +210,13 @@ export default meta; type Story = StoryObj; -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) => (
diff --git a/pkgs/clan-app/ui/src/components/CubeConstruction/CubeConstruction.stories.tsx b/pkgs/clan-app/ui/src/components/CubeConstruction/CubeConstruction.stories.tsx index 7549a7e14..a6149ae87 100644 --- a/pkgs/clan-app/ui/src/components/CubeConstruction/CubeConstruction.stories.tsx +++ b/pkgs/clan-app/ui/src/components/CubeConstruction/CubeConstruction.stories.tsx @@ -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 = { title: "Components/CubeConstruction", component: CubeConstruction, globals: { @@ -12,7 +12,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: {}, diff --git a/pkgs/clan-app/ui/src/components/Divider/Divider.stories.tsx b/pkgs/clan-app/ui/src/components/Divider/Divider.stories.tsx index 5657727f6..95b0b08c6 100644 --- a/pkgs/clan-app/ui/src/components/Divider/Divider.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Divider/Divider.stories.tsx @@ -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 = { +const meta: Meta = { title: "Components/Divider", component: Divider, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; @@ -30,7 +30,7 @@ export const Vertical: Story = { orientation: "vertical", }, decorators: [ - (Story: Story) => ( + (Story) => (
@@ -43,5 +43,5 @@ export const VerticalInverted: Story = { inverted: true, ...Vertical.args, }, - decorators: [...Vertical.decorators], + decorators: Vertical.decorators, }; diff --git a/pkgs/clan-app/ui/src/components/Form/Checkbox.stories.tsx b/pkgs/clan-app/ui/src/components/Form/Checkbox.stories.tsx index dd7256a72..b3feacd9e 100644 --- a/pkgs/clan-app/ui/src/components/Form/Checkbox.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Form/Checkbox.stories.tsx @@ -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) => ( ); -const meta = { +const meta: Meta = { title: "Components/Form/Checkbox", component: Examples, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story, { args }) => { return (
@@ -41,7 +41,7 @@ const meta = { ); }, ], -} satisfies Meta; +}; export default meta; diff --git a/pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx b/pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx index 77b8a447b..d6bca85c0 100644 --- a/pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx @@ -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) => (
); -const meta = { +const meta: Meta = { title: "Components/Form/Fieldset", component: FieldsetExamples, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story, { args }) => { return (
@@ -36,7 +36,7 @@ const meta = { ); }, ], -} satisfies Meta; +}; export default meta; diff --git a/pkgs/clan-app/ui/src/components/Form/HostFileInput.stories.tsx b/pkgs/clan-app/ui/src/components/Form/HostFileInput.stories.tsx index d62e6f864..692739376 100644 --- a/pkgs/clan-app/ui/src/components/Form/HostFileInput.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Form/HostFileInput.stories.tsx @@ -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) => (
); -const meta = { +const meta: Meta = { title: "Components/Form/HostFileInput", component: Examples, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story, { args }) => { return (
@@ -49,7 +49,7 @@ const meta = { ); }, ], -} satisfies Meta; +}; export default meta; diff --git a/pkgs/clan-app/ui/src/components/Form/MachineTags.stories.tsx b/pkgs/clan-app/ui/src/components/Form/MachineTags.stories.tsx index b69a05308..825d06c1c 100644 --- a/pkgs/clan-app/ui/src/components/Form/MachineTags.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Form/MachineTags.stories.tsx @@ -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 = { title: "Components/MachineTags", component: MachineTags, -} satisfies Meta; +}; export default meta; diff --git a/pkgs/clan-app/ui/src/components/Form/TextArea.stories.tsx b/pkgs/clan-app/ui/src/components/Form/TextArea.stories.tsx index 1cc92751d..04e23c871 100644 --- a/pkgs/clan-app/ui/src/components/Form/TextArea.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Form/TextArea.stories.tsx @@ -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) => (
); -const meta = { +const meta: Meta = { title: "Components/Form/TextArea", component: Examples, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story, { args }) => { return (
@@ -41,7 +41,7 @@ const meta = { ); }, ], -} satisfies Meta; +}; export default meta; diff --git a/pkgs/clan-app/ui/src/components/Form/TextInput.stories.tsx b/pkgs/clan-app/ui/src/components/Form/TextInput.stories.tsx index ea78930d0..c61089bc8 100644 --- a/pkgs/clan-app/ui/src/components/Form/TextInput.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Form/TextInput.stories.tsx @@ -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) => (
); -const meta = { +const meta: Meta = { title: "Components/Form/TextInput", component: Examples, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story, { args }) => { return (
@@ -43,7 +43,7 @@ const meta = { ); }, ], -} satisfies Meta; +}; export default meta; diff --git a/pkgs/clan-app/ui/src/components/Icon/Icon.stories.tsx b/pkgs/clan-app/ui/src/components/Icon/Icon.stories.tsx index f65e4a655..a8542ef2f 100644 --- a/pkgs/clan-app/ui/src/components/Icon/Icon.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Icon/Icon.stories.tsx @@ -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 = (props) => (
); -const meta: Meta = { +const meta: Meta = { title: "Components/Icon", component: IconExamples, decorators: [ - (Story: StoryObj, context: StoryContext) => ( -
+ (Story, { args }) => ( +
), @@ -71,7 +71,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; diff --git a/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx b/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx index 4b665cedf..0aeed77a5 100644 --- a/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx @@ -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) => (
); -const meta: Meta = { +const meta: Meta = { title: "Components/Loader", component: LoaderExamples, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Primary: Story = { args: { diff --git a/pkgs/clan-app/ui/src/components/LoadingBar/LadingBar.stories.tsx b/pkgs/clan-app/ui/src/components/LoadingBar/LadingBar.stories.tsx index 37eb3cea1..eb74c0c25 100644 --- a/pkgs/clan-app/ui/src/components/LoadingBar/LadingBar.stories.tsx +++ b/pkgs/clan-app/ui/src/components/LoadingBar/LadingBar.stories.tsx @@ -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 = { title: "Components/LoadingBar", component: LoadingBar, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story) => { return (
@@ -17,6 +17,6 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; diff --git a/pkgs/clan-app/ui/src/components/Logo/Logo.stories.tsx b/pkgs/clan-app/ui/src/components/Logo/Logo.stories.tsx index 184fc7dec..86280a205 100644 --- a/pkgs/clan-app/ui/src/components/Logo/Logo.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Logo/Logo.stories.tsx @@ -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 = (props) => (
); -const meta: Meta = { +const meta: Meta = { title: "Components/Logo", component: LogoExamples, decorators: [ - (Story: StoryObj, context: StoryContext) => ( -
+ (Story, { args }) => ( +
), @@ -25,7 +25,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; diff --git a/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.stories.tsx b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.stories.tsx index 5d3e49884..3f5c9dd6e 100644 --- a/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.stories.tsx +++ b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.stories.tsx @@ -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 = { +const meta: Meta = { title: "Components/MachineStatus", component: MachineStatus, decorators: [ - (Story: StoryObj) => ( + (Story) => (
@@ -18,7 +15,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Loading: Story = { args: {}, diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx b/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx index b39510639..a8fd3d9d0 100644 --- a/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx @@ -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 = { +const meta: Meta = { title: "Components/Modal", component: Modal, - render: (args: ModalProps) => ( + render: (args) => ( = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { diff --git a/pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx b/pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx index 6be586a14..a138c7b5b 100644 --- a/pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx +++ b/pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx @@ -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 = { +const meta: Meta = { title: "Components/NavSection", component: NavSection, decorators: [ - (Story: StoryObj) => ( + (Story) => (
@@ -18,7 +15,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { diff --git a/pkgs/clan-app/ui/src/components/Search/Search.stories.tsx b/pkgs/clan-app/ui/src/components/Search/Search.stories.tsx index bf8331629..fb2d392d1 100644 --- a/pkgs/clan-app/ui/src/components/Search/Search.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Search/Search.stories.tsx @@ -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 = { title: "Components/Search", component: Search, -} satisfies Meta>; +}; export default meta; -type Story = StoryObj>; +type Story = StoryObj; // 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) => { + render: (args) => { return (
@@ -130,7 +126,7 @@ export const Loading: Story = { options: [], renderItem: () => , }, - render: (args: SearchProps) => { + render: (args) => { return (
@@ -235,7 +231,7 @@ export const Multiple: Story = { ); }, }, - render: (args: SearchMultipleProps) => { + render: (args) => { return (
diff --git a/pkgs/clan-app/ui/src/components/Search/TagSelect.stories.tsx b/pkgs/clan-app/ui/src/components/Search/TagSelect.stories.tsx index 379345e24..578a59f26 100644 --- a/pkgs/clan-app/ui/src/components/Search/TagSelect.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Search/TagSelect.stories.tsx @@ -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 = { title: "Components/Custom/SelectStepper", component: TagSelect, -} satisfies Meta>; +}; export default meta; @@ -17,7 +17,7 @@ interface Item { label: string; } -type Story = StoryObj>; +type Story = StoryObj; const Item = (item: Item) => ( >, - render: (args: TagSelectProps) => { + }, + render: (args) => { const [state, setState] = createSignal([]); return ( diff --git a/pkgs/clan-app/ui/src/components/Select/Select.stories.tsx b/pkgs/clan-app/ui/src/components/Select/Select.stories.tsx index 8ea5edf02..57bd0c63d 100644 --- a/pkgs/clan-app/ui/src/components/Select/Select.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Select/Select.stories.tsx @@ -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 = { -// title: "Components/Select", -// component: Select, -// }; -const meta = { +const meta: Meta = { title: "Components/Form/Select", component: Select, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story) => { return (
@@ -22,11 +17,11 @@ const meta = { ); }, ], -} satisfies Meta; +}; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { diff --git a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx index 8db303f48..8c39ef210 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx @@ -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 = { +const meta: Meta = { title: "Components/Sidebar", component: Sidebar, render: () => { @@ -144,7 +139,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; const mockFetcher = ( method: K, diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx index b198ae6a9..d72982ebf 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx @@ -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; const profiles = { ron: { @@ -28,18 +22,13 @@ const profiles = { }, }; -const meta: Meta = { +const meta: Meta = { title: "Components/SidebarPane", component: SidebarPane, - decorators: [ - ( - Story: StoryObj, - context: StoryContext, - ) => - () => , - ], }; +type Story = StoryObj; + 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) => ( = { +const meta: Meta = { title: "Components/Tag", component: Tag, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; 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(); }, diff --git a/pkgs/clan-app/ui/src/components/TagGroup/TagGroup.stories.tsx b/pkgs/clan-app/ui/src/components/TagGroup/TagGroup.stories.tsx index 3f4a4c750..705d5b408 100644 --- a/pkgs/clan-app/ui/src/components/TagGroup/TagGroup.stories.tsx +++ b/pkgs/clan-app/ui/src/components/TagGroup/TagGroup.stories.tsx @@ -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 = { +const meta: Meta = { title: "Components/TagGroup", component: TagGroup, decorators: [ - (Story: StoryObj) => ( + (Story) => ( /* for some reason w-x from tailwind was not working */
@@ -16,7 +16,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { diff --git a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx b/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx index 1f11be750..0331d1d7f 100644 --- a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx @@ -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 = { +const meta: Meta = { title: "Components/Toolbar", component: Toolbar, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; 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) => (
diff --git a/pkgs/clan-app/ui/src/components/Tooltip/Tooltip.stories.tsx b/pkgs/clan-app/ui/src/components/Tooltip/Tooltip.stories.tsx index 027ed7f52..51d050cf2 100644 --- a/pkgs/clan-app/ui/src/components/Tooltip/Tooltip.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Tooltip/Tooltip.stories.tsx @@ -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 = { +const meta: Meta = { title: "Components/Tooltip", component: Tooltip, decorators: [ - (Story: StoryObj) => ( + (Story) => (
), ], - render: (args: TooltipProps) => ( + render: (args) => (
= { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { diff --git a/pkgs/clan-app/ui/src/components/Typography/Typography.stories.tsx b/pkgs/clan-app/ui/src/components/Typography/Typography.stories.tsx index 7dacb3ab3..5f2dd25fc 100644 --- a/pkgs/clan-app/ui/src/components/Typography/Typography.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Typography/Typography.stories.tsx @@ -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 = (props) => ( ); -const meta: Meta = { +const meta: Meta = { title: "Components/Typography", component: TypographyExamples, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const BodyCondensed: Story = { args: { diff --git a/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.stories.tsx b/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.stories.tsx index 41c071c43..9b9127364 100644 --- a/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.stories.tsx +++ b/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.stories.tsx @@ -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 = { +const meta: Meta = { title: "Modals/ClanSettings", component: ClanSettingsModal, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -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, -}; diff --git a/pkgs/clan-app/ui/src/scene/splash.stories.tsx b/pkgs/clan-app/ui/src/scene/splash.stories.tsx index 0d39b1cc9..a7f8c3cba 100644 --- a/pkgs/clan-app/ui/src/scene/splash.stories.tsx +++ b/pkgs/clan-app/ui/src/scene/splash.stories.tsx @@ -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 = { diff --git a/pkgs/clan-app/ui/src/types/index.d.ts b/pkgs/clan-app/ui/src/types/index.d.ts deleted file mode 100644 index 25ed621a0..000000000 --- a/pkgs/clan-app/ui/src/types/index.d.ts +++ /dev/null @@ -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 extends ComponentType - ? ComponentAnnotations> - : ComponentAnnotations; - /** - * 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 extends ComponentType - ? AnnotatedStoryFn> - : AnnotatedStoryFn; - /** - * 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 extends { - render?: ArgsStoryFn; - component?: infer Component; - args?: infer DefaultArgs; - } - ? Simplify< - (Component extends ComponentType - ? ComponentProps - : unknown) & - ArgsFromMeta - > extends infer TArgs - ? StoryAnnotations< - SolidRenderer, - TArgs, - SetOptional< - TArgs, - keyof TArgs & keyof (DefaultArgs & ActionArgs) - > - > - : never - : TMetaOrCmpOrArgs extends ComponentType - ? StoryAnnotations> - : StoryAnnotations; - type ActionArgs = { - [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 = DecoratorFunction< - SolidRenderer, - TArgs - >; - export type Loader = LoaderFunction; - export type StoryContext = GenericStoryContext< - SolidRenderer, - TArgs - >; - export type Preview = ProjectAnnotations; -} -//# sourceMappingURL=index.d.ts.map diff --git a/pkgs/clan-app/ui/src/workflows/AddMachine/AddMachine.stories.tsx b/pkgs/clan-app/ui/src/workflows/AddMachine/AddMachine.stories.tsx index fef1ebec6..19ffa746e 100644 --- a/pkgs/clan-app/ui/src/workflows/AddMachine/AddMachine.stories.tsx +++ b/pkgs/clan-app/ui/src/workflows/AddMachine/AddMachine.stories.tsx @@ -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 = { title: "workflows/add-machine", component: AddMachine, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story) => { const Routes: RouteDefinition[] = [ { path: "/clans/:clanURI", diff --git a/pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.stories.tsx b/pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.stories.tsx index dc3f313e1..9d7c1347a 100644 --- a/pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.stories.tsx +++ b/pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.stories.tsx @@ -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 = { title: "workflows/install", component: InstallModal, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story) => { const Routes: RouteDefinition[] = [ { path: "/clans/:clanURI", @@ -198,10 +198,9 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; 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", diff --git a/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.stories.tsx b/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.stories.tsx index 242df8329..c6b9dc3c6 100644 --- a/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.stories.tsx +++ b/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.stories.tsx @@ -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 = { 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; 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", diff --git a/pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx b/pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx index f69ab9576..20b5ce5c7 100644 --- a/pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx +++ b/pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx @@ -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 = { title: "workflows/service", component: ServiceWorkflow, decorators: [ - (Story: StoryObj, context: StoryContext) => { + (Story) => { const Routes: RouteDefinition[] = [ { path: "/clans/:clanURI", @@ -163,7 +163,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; // export const Default: Story = { // args: {},