From 7141fe2ffe92fbd805b37a5a8bed3a355853e568 Mon Sep 17 00:00:00 2001 From: Riccardo Perra Date: Thu, 16 Nov 2023 08:53:58 +0100 Subject: [PATCH] storybook html plugin --- packages/storybook/.storybook/main.ts | 21 ++- packages/storybook/.storybook/preview.tsx | 14 +- packages/storybook/package.json | 6 +- pnpm-lock.yaml | 201 +++++++++++++++++----- 4 files changed, 190 insertions(+), 52 deletions(-) diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts index 17f836c..c90aafe 100644 --- a/packages/storybook/.storybook/main.ts +++ b/packages/storybook/.storybook/main.ts @@ -1,6 +1,7 @@ -import type { StorybookConfig } from "storybook-solidjs-vite"; - import { join, dirname } from "path"; +import { mergeConfig } from "vite"; +import { StorybookConfig } from "@storybook/html-vite"; +import solidPlugin from "vite-plugin-solid"; /** * This function is used to resolve the absolute path of a package. @@ -18,13 +19,27 @@ const config: StorybookConfig = { getAbsolutePath("@storybook/addon-interactions"), getAbsolutePath("storybook-dark-mode"), ], + core: { + builder: "@storybook/builder-vite", + }, framework: { - name: getAbsolutePath("storybook-solidjs-vite"), + name: "@storybook/html-vite", options: {}, }, docs: { autodocs: "tag", }, + async viteFinal(config) { + console.log(config); + // Merge custom configuration into the default config + return mergeConfig(config, { + plugins: [solidPlugin()], + // Add dependencies to pre-optimization + optimizeDeps: { + include: ["storybook-dark-mode"], + }, + }); + }, }; export default config; diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx index 6aac1e2..739b3ac 100644 --- a/packages/storybook/.storybook/preview.tsx +++ b/packages/storybook/.storybook/preview.tsx @@ -2,12 +2,12 @@ import { Preview } from "storybook-solidjs"; import { themes, ThemeVars } from "@storybook/theming"; import { DARK_MODE_EVENT_NAME, useDarkMode } from "storybook-dark-mode"; import { addons } from "@storybook/addons"; -import { Component, createEffect, createSignal, FlowProps } from "solid-js"; +import { createEffect, createSignal, FlowProps } from "solid-js"; import "./reset.css"; import "./global.css"; import "./global-ve.css"; import { DocsContainer, DocsContainerProps } from "@storybook/blocks"; -import { themeVars } from "@codeui/kit"; +import { render } from "solid-js/web"; function ThemeWrapper(props: FlowProps) { const [darkMode, setDarkMode] = createSignal(true); @@ -23,9 +23,17 @@ function ThemeWrapper(props: FlowProps) { return
{props.children}
; } +let disposeStory: () => void; + export const decorators = [ (Story: () => any) => { - return {Story()}; + disposeStory?.(); + + const solidRoot = document.createElement("div"); + + disposeStory = render(() => ThemeWrapper({ children: Story }), solidRoot); + + return solidRoot; }, ]; diff --git a/packages/storybook/package.json b/packages/storybook/package.json index a81080e..866e365 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -20,6 +20,8 @@ "@storybook/api": "^7.5.3", "@storybook/blocks": "7.5.3", "@storybook/components": "^7.5.3", + "@storybook/html": "^7.5.3", + "@storybook/html-vite": "^7.5.3", "@storybook/manager-api": "^7.5.3", "@storybook/testing-library": "0.2.2", "@storybook/theming": "^7.5.3", @@ -35,8 +37,8 @@ "vite-tsconfig-paths": "^4.2.1" }, "dependencies": { - "@kobalte/core": "^0.11.0", - "@kobalte/utils": "^0.9.0", + "@kobalte/core": "^0.11.0", + "@kobalte/utils": "^0.9.0", "@vanilla-extract/css": "^1.11.0", "solid-js": "^1.7.3" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 810a7e3..de67ea7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -246,6 +246,12 @@ importers: '@storybook/components': specifier: ^7.5.3 version: 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/html': + specifier: ^7.5.3 + version: 7.5.3(@babel/core@7.23.3) + '@storybook/html-vite': + specifier: ^7.5.3 + version: 7.5.3(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(vite@4.5.0) '@storybook/manager-api': specifier: ^7.5.3 version: 7.5.3(react-dom@18.2.0)(react@18.2.0) @@ -5925,8 +5931,46 @@ packages: - supports-color dev: true - /@storybook/builder-vite@7.6.0-alpha.4(typescript@5.0.4)(vite@4.5.0): - resolution: {integrity: sha512-1Ngtw/3bNp6SfA+PHxCpvEWDxsIWhLJa9iN4TyDjOe6TIWGCVI1M1LMQzzqRAJGG8WzB2ViHDrr82h6S5NfdIA==} + /@storybook/builder-vite@7.5.3(typescript@5.0.4)(vite@4.5.0): + resolution: {integrity: sha512-c104V3O75OCVnfZj0Jr70V09g0KSbPGvQK2Zh31omXGvakG8XrhWolYxkmjOcForJmAqsXnKs/nw3F75Gp853g==} + peerDependencies: + '@preact/preset-vite': '*' + typescript: '>= 4.3.x' + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + vite-plugin-glimmerx: '*' + peerDependenciesMeta: + '@preact/preset-vite': + optional: true + typescript: + optional: true + vite-plugin-glimmerx: + optional: true + dependencies: + '@storybook/channels': 7.5.3 + '@storybook/client-logger': 7.5.3 + '@storybook/core-common': 7.5.3 + '@storybook/csf-plugin': 7.5.3 + '@storybook/node-logger': 7.5.3 + '@storybook/preview': 7.5.3 + '@storybook/preview-api': 7.5.3 + '@storybook/types': 7.5.3 + '@types/find-cache-dir': 3.2.1 + browser-assert: 1.2.1 + es-module-lexer: 0.9.3 + express: 4.18.2 + find-cache-dir: 3.3.2 + fs-extra: 11.1.1 + magic-string: 0.30.5 + rollup: 3.29.4 + typescript: 5.0.4 + vite: 4.5.0(@types/node@18.16.0)(less@4.2.0) + transitivePeerDependencies: + - encoding + - supports-color + dev: true + + /@storybook/builder-vite@7.6.0-alpha.6(typescript@5.0.4)(vite@4.5.0): + resolution: {integrity: sha512-yOf0CHi9w/e7vZIkaQUMMAUnX4EYTnKQSyIX5nxmz+c6V2IZxR1MvzJ+FEds83rn5L6aNTEMOYq0uQPDSpiBPA==} peerDependencies: '@preact/preset-vite': '*' typescript: '>= 4.3.x' @@ -5940,14 +5984,14 @@ packages: vite-plugin-glimmerx: optional: true dependencies: - '@storybook/channels': 7.6.0-alpha.4 - '@storybook/client-logger': 7.6.0-alpha.4 - '@storybook/core-common': 7.6.0-alpha.4 - '@storybook/csf-plugin': 7.6.0-alpha.4 - '@storybook/node-logger': 7.6.0-alpha.4 - '@storybook/preview': 7.6.0-alpha.4 - '@storybook/preview-api': 7.6.0-alpha.4 - '@storybook/types': 7.6.0-alpha.4 + '@storybook/channels': 7.6.0-alpha.6 + '@storybook/client-logger': 7.6.0-alpha.6 + '@storybook/core-common': 7.6.0-alpha.6 + '@storybook/csf-plugin': 7.6.0-alpha.6 + '@storybook/node-logger': 7.6.0-alpha.6 + '@storybook/preview': 7.6.0-alpha.6 + '@storybook/preview-api': 7.6.0-alpha.6 + '@storybook/types': 7.6.0-alpha.6 '@types/find-cache-dir': 3.2.1 browser-assert: 1.2.1 es-module-lexer: 0.9.3 @@ -5974,11 +6018,11 @@ packages: tiny-invariant: 1.3.1 dev: true - /@storybook/channels@7.6.0-alpha.4: - resolution: {integrity: sha512-6rkrHZ6twZwHdVnIdB79Pbn2g+3o1NpxG1hcfHPI2cuZqfJ5W9PnKifbmIYqkkySpW5VBnECjHX2gpx5og0X9Q==} + /@storybook/channels@7.6.0-alpha.6: + resolution: {integrity: sha512-QoLtN3mPqgSvWTO59XM//1T3ttDyUtWI2Q5qeQMvOq8H4i4rSGpCkywN6OPVivAgCiHSKSCC9C3yE/xISzjf1g==} dependencies: - '@storybook/client-logger': 7.6.0-alpha.4 - '@storybook/core-events': 7.6.0-alpha.4 + '@storybook/client-logger': 7.6.0-alpha.6 + '@storybook/core-events': 7.6.0-alpha.6 '@storybook/global': 5.0.0 qs: 6.11.2 telejson: 7.2.0 @@ -6037,14 +6081,21 @@ packages: - utf-8-validate dev: true + /@storybook/client-api@7.5.3: + resolution: {integrity: sha512-5fzH+S6mx3fTIzLgRiubL2/oN+2cg2sGyDqcXj39vovRzzRjJlG8IHj9wD7TRYR0AiUTGrnGklQmrX/NpuTrBQ==} + dependencies: + '@storybook/client-logger': 7.5.3 + '@storybook/preview-api': 7.5.3 + dev: true + /@storybook/client-logger@7.5.3: resolution: {integrity: sha512-vUFYALypjix5FoJ5M/XUP6KmyTnQJNW1poHdW7WXUVSg+lBM6E5eAtjTm0hdxNNDH8KSrdy24nCLra5h0X0BWg==} dependencies: '@storybook/global': 5.0.0 dev: true - /@storybook/client-logger@7.6.0-alpha.4: - resolution: {integrity: sha512-wHBwRMBEunUo5hKHUfMpekdzFOy6+i75tf041RVoldVpsmcaCSm5aTFJX6UfEEMKGpVZlkLF/9Q8N9PaxtwLBQ==} + /@storybook/client-logger@7.6.0-alpha.6: + resolution: {integrity: sha512-ptcacMUCbcQecAkh2LsPFvvEpgsPLOVeMLjrSBahqQhaJGb9YL7N9jZ+UTcq0iK9vjf7B7KFvBcWrazHRROeTg==} dependencies: '@storybook/global': 5.0.0 dev: true @@ -6093,6 +6144,13 @@ packages: - '@types/react-dom' dev: true + /@storybook/core-client@7.5.3: + resolution: {integrity: sha512-sIviDytbhos02TVXxU8XLymzty7IAtLs5e16hv49JSdBp47iBajRaNBmBj/l+sgTH+3M+R6gP8yGFMsZSCnU2g==} + dependencies: + '@storybook/client-logger': 7.5.3 + '@storybook/preview-api': 7.5.3 + dev: true + /@storybook/core-common@7.5.3: resolution: {integrity: sha512-WGMwjtVUxUzFwQz7Mgs0gLuNebIGNV55dCdZgurx2/y6QOkJ2v8D0b3iL+xKMV4B5Nwoc2DsM418Y+Hy3UQd+w==} dependencies: @@ -6124,12 +6182,12 @@ packages: - supports-color dev: true - /@storybook/core-common@7.6.0-alpha.4: - resolution: {integrity: sha512-mu8cY/0IWT+NxtiUwF7niR+1d4gC6J0WPwnS/yB036wx1Px3fewjPZqo2SBqWyOEfNfq8t74l3xk6gWbxHZhcA==} + /@storybook/core-common@7.6.0-alpha.6: + resolution: {integrity: sha512-HCq1ONotCK2yLC9XF/o4mXblZ07S1GKifj2bupavln1iQacgIRYY8/Lq7AWsBJMgmOYTl+Mx0CeLVjtEXij8uw==} dependencies: - '@storybook/core-events': 7.6.0-alpha.4 - '@storybook/node-logger': 7.6.0-alpha.4 - '@storybook/types': 7.6.0-alpha.4 + '@storybook/core-events': 7.6.0-alpha.6 + '@storybook/node-logger': 7.6.0-alpha.6 + '@storybook/types': 7.6.0-alpha.6 '@types/find-cache-dir': 3.2.1 '@types/node': 18.16.3 '@types/node-fetch': 2.6.9 @@ -6161,8 +6219,8 @@ packages: ts-dedent: 2.2.0 dev: true - /@storybook/core-events@7.6.0-alpha.4: - resolution: {integrity: sha512-JnLkKAZBsuNvWPysbjQJ2i5G1it5afzeN/wtQMG4dofUCbxvmDDUdjFkPqriLOp1YPdgpdhAl3MLGpWz4mqqDQ==} + /@storybook/core-events@7.6.0-alpha.6: + resolution: {integrity: sha512-MOWI+AD4F4/bvwjVZtPX9lNLMJEiBhPn/lzS50OY4CQmARsp4Obnr/sH6VnoLLAou655OWGQYvnOjritwved+A==} dependencies: ts-dedent: 2.2.0 dev: true @@ -6203,7 +6261,7 @@ packages: pretty-hrtime: 1.0.3 prompts: 2.4.2 read-pkg-up: 7.0.1 - semver: 7.5.0 + semver: 7.5.4 telejson: 7.2.0 tiny-invariant: 1.3.1 ts-dedent: 2.2.0 @@ -6227,10 +6285,10 @@ packages: - supports-color dev: true - /@storybook/csf-plugin@7.6.0-alpha.4: - resolution: {integrity: sha512-07Q5fYQp7RpZvjcADbMk7txeRHLD6rkPrpnELru6O0kCZUnmEyp2HDoP1yVWn5pctF4fd4pybp+/+/8SpT05rg==} + /@storybook/csf-plugin@7.6.0-alpha.6: + resolution: {integrity: sha512-b86z3sv8lkEVrg3YYYfgrWc4tTvNnxFMDv3bHkP2FkuzkPKUs3EAM7yXHrr+sZ/0ThDXitLfrIBnAD3YIHCGlg==} dependencies: - '@storybook/csf-tools': 7.6.0-alpha.4 + '@storybook/csf-tools': 7.6.0-alpha.6 unplugin: 1.5.0 transitivePeerDependencies: - supports-color @@ -6252,15 +6310,15 @@ packages: - supports-color dev: true - /@storybook/csf-tools@7.6.0-alpha.4: - resolution: {integrity: sha512-9HoOhnNbbLO0Ws+IVZ61Lq4m1FnvRt2JKfChyEECjmi9Nk6YMYNScebTISFR/gu2PFKgM1OdwzwaEqn/wt9wfA==} + /@storybook/csf-tools@7.6.0-alpha.6: + resolution: {integrity: sha512-qHkwe5vNB9kmqN9zux7d3brtLAJugEa2JDBVbTQS3fVbUYRjL5WnTYOfuPzxEyYtaUTpVJMZjs2rgRAixN3yzQ==} dependencies: '@babel/generator': 7.23.3 '@babel/parser': 7.23.3 '@babel/traverse': 7.23.3 '@babel/types': 7.23.3 '@storybook/csf': 0.1.1 - '@storybook/types': 7.6.0-alpha.4 + '@storybook/types': 7.6.0-alpha.6 fs-extra: 11.1.1 recast: 0.23.4 ts-dedent: 2.2.0 @@ -6296,6 +6354,50 @@ packages: resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} dev: true + /@storybook/html-vite@7.5.3(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(vite@4.5.0): + resolution: {integrity: sha512-EWrkhPaQH1SEKmchoNwiBMZJHDrA6/UsDeX4fmiMh35C5yhQeGuzgIYSYgwjq3O0ITcF394lyAhyI9HSPT+W5g==} + engines: {node: ^14.18 || >=16} + dependencies: + '@storybook/addons': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/builder-vite': 7.5.3(typescript@5.0.4)(vite@4.5.0) + '@storybook/client-api': 7.5.3 + '@storybook/core-server': 7.5.3 + '@storybook/html': 7.5.3(@babel/core@7.23.3) + '@storybook/node-logger': 7.5.3 + '@storybook/preview-web': 7.5.3 + magic-string: 0.30.5 + transitivePeerDependencies: + - '@babel/core' + - '@preact/preset-vite' + - bufferutil + - encoding + - react + - react-dom + - supports-color + - typescript + - utf-8-validate + - vite + - vite-plugin-glimmerx + dev: true + + /@storybook/html@7.5.3(@babel/core@7.23.3): + resolution: {integrity: sha512-QvGWcuamYGoSTU8ubi+44qlBNpThkFU7SB2iBBmYCqHr3V9bR539PHoKIdyvbOSGSi1QJRYnuh9tHXNnyOtXFg==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@babel/core': '*' + dependencies: + '@babel/core': 7.23.3 + '@storybook/core-client': 7.5.3 + '@storybook/docs-tools': 7.5.3 + '@storybook/global': 5.0.0 + '@storybook/preview-api': 7.5.3 + '@storybook/types': 7.5.3 + ts-dedent: 2.2.0 + transitivePeerDependencies: + - encoding + - supports-color + dev: true + /@storybook/instrumenter@7.5.3: resolution: {integrity: sha512-p6b+/6ohTCKxWn00bXT8KBqVjXUOxeILnJtLlG83USLQCpI+XVkpmK57HYuydqEwy/1XjG+4S4ntPk9VVz3u7w==} dependencies: @@ -6343,8 +6445,8 @@ packages: resolution: {integrity: sha512-7ZZDw/q3hakBj1FngsBjaHNIBguYAWojp7R1fFTvwkeunCi21EUzZjRBcqp10kB6BP3/NLX32bIQknsCWD76rQ==} dev: true - /@storybook/node-logger@7.6.0-alpha.4: - resolution: {integrity: sha512-rOZq9nsb/BC3tzovVWdWhEyQDd/QZDneoAn80107lw1or6j96otnXIlOc6HIwCIxKGN/12TUMdd1u5K4z3qlZQ==} + /@storybook/node-logger@7.6.0-alpha.6: + resolution: {integrity: sha512-SiBVkOLQa/mxffveHKwipEaA5en4QPQ8C3yk5Rbx/caU+RzLFFh0ctfGcxoP6Jcto5WE0Clkzs+9+hHxIDJRcA==} dev: true /@storybook/postinstall@7.5.3: @@ -6370,15 +6472,15 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/preview-api@7.6.0-alpha.4: - resolution: {integrity: sha512-IJa59daKgyeRQ3q07llaCTJeEDBJhHNY4wmev0FiB4+vkGfAz9i81nHs0tv1+yCzVTW710nSjOr+wjKoGHgxXw==} + /@storybook/preview-api@7.6.0-alpha.6: + resolution: {integrity: sha512-cNa+ECEUmElyGXn17cgn89JWA0flYuLvAfhnDIuGPsHZkNe2DkT7ci3cc8SXYpTn0+NS6G+tdhkgA+EuWAjaaw==} dependencies: - '@storybook/channels': 7.6.0-alpha.4 - '@storybook/client-logger': 7.6.0-alpha.4 - '@storybook/core-events': 7.6.0-alpha.4 + '@storybook/channels': 7.6.0-alpha.6 + '@storybook/client-logger': 7.6.0-alpha.6 + '@storybook/core-events': 7.6.0-alpha.6 '@storybook/csf': 0.1.1 '@storybook/global': 5.0.0 - '@storybook/types': 7.6.0-alpha.4 + '@storybook/types': 7.6.0-alpha.6 '@types/qs': 6.9.10 dequal: 2.0.3 lodash: 4.17.21 @@ -6389,8 +6491,19 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/preview@7.6.0-alpha.4: - resolution: {integrity: sha512-95rVBo2dMQ9pJ2saitYW5d3kF4w+QuDhClQeg8SJIW27O6gE2jXq+JOwLEx53OC0XYr5cPWV1r50YWxfco7R/g==} + /@storybook/preview-web@7.5.3: + resolution: {integrity: sha512-OaOSwJGg6o3S6n+w6Dq5+A9l4wfyRD7EInaWxLlw171pYh3vgC3dTooWMWeLZnwEVLr5GMmOG+yv3+++uEuPUg==} + dependencies: + '@storybook/client-logger': 7.5.3 + '@storybook/preview-api': 7.5.3 + dev: true + + /@storybook/preview@7.5.3: + resolution: {integrity: sha512-Hf90NlLaSrdMZXPOHDCMPjTywVrQKK0e5CtzqWx/ZQz91JDINxJD+sGj2wZU+wuBtQcTtlsXc9OewlJ+9ETwIw==} + dev: true + + /@storybook/preview@7.6.0-alpha.6: + resolution: {integrity: sha512-LwwSPrxE6787uCA7EyWT1eesPY9rd2FmZoC+o8y9xubItZAHaO2RSLaMtYdaTXoDZQIySWP6LLAjU44ZcrjVeA==} dev: true /@storybook/react-dom-shim@7.5.3(react-dom@18.2.0)(react@18.2.0): @@ -6463,10 +6576,10 @@ packages: file-system-cache: 2.3.0 dev: true - /@storybook/types@7.6.0-alpha.4: - resolution: {integrity: sha512-/h+YXp02WCP2w+DktLbrgjE8aVrM9Pp4gtHDxzqgn9lUqMyf9LN8beeserMeGGj4xgSnwE+7YsSWDV+TUEYHUA==} + /@storybook/types@7.6.0-alpha.6: + resolution: {integrity: sha512-tnIcX4fWrsON6NatmpMys/8wbnVojERygqLuY9UzdBw9eG/gMq4jlEj2CaRDSZw4TS5/RhTBM6jdsfc5tgU7eg==} dependencies: - '@storybook/channels': 7.6.0-alpha.4 + '@storybook/channels': 7.6.0-alpha.6 '@types/babel__core': 7.20.0 '@types/express': 4.17.21 file-system-cache: 2.3.0 @@ -14239,7 +14352,7 @@ packages: resolution: {integrity: sha512-dD+VMYC5fBBQNesVb+mjB0LOkZIf100SQFbjAt9/sDstNUvc5ce3yZwLYXzgcOc7jcSMkrBu/cZNRzEM4YIAyw==} engines: {node: ^14.18 || >=16} dependencies: - '@storybook/builder-vite': 7.6.0-alpha.4(typescript@5.0.4)(vite@4.5.0) + '@storybook/builder-vite': 7.6.0-alpha.6(typescript@5.0.4)(vite@4.5.0) transitivePeerDependencies: - '@preact/preset-vite' - encoding