diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index dbf980e..77fcc89 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -11,10 +11,8 @@ jobs: with: fetch-depth: 0 - - name: Use Node.js 20.x + - name: Use Node.js 22.x uses: actions/setup-node@v3 - with: - node-version: 20.x - uses: pnpm/action-setup@v4 diff --git a/.nvmrc b/.nvmrc index 2edeafb..e70b3ae 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -20 \ No newline at end of file +22.12 \ No newline at end of file diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 1521c8b..0000000 --- a/.prettierignore +++ /dev/null @@ -1 +0,0 @@ -dist diff --git a/.prettierrc b/.prettierrc index 0967ef4..b854f15 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1 +1,6 @@ -{} +{ + "trailingComma": "es5", + "singleQuote": true, + "printWidth": 120, + "tabWidth": 2 +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..25fa621 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/README.md b/README.md index a45cac5..9659115 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Get started in Storybook 7 faster with popular styling tools. - 🧩 Configuration templates for popular tools - ⚡️ Options for CSS modules, PostCSS, Sass, Less, and Vanilla-extract -## 🏁 Getting +## 🏁 Getting Started ### 🤖 Automatic configuration @@ -78,9 +78,11 @@ It can also take Webpack plugins to add to the Storybook config. ``` ### 🧩 Popular Configurations + Below are a few popular configurations for common styling tools to get you started. More complex configurations are possible by combining the different rules below. #### PostCSS + ```js // Often used for tailwind { @@ -99,7 +101,7 @@ Below are a few popular configurations for common styling tools to get you start { // Gets options from `postcss.config.js` in your project root loader: 'postcss-loader', - options: { implementation: require.resolve('postcss') } + options: { implementation: import.meta.resolve('postcss') } } ], } @@ -111,6 +113,7 @@ Below are a few popular configurations for common styling tools to get you start You can also take a look at this [example project](https://stackblitz.com/edit/github-5njuww?file=.storybook%2Fmain.ts) that uses PostCSS for **Tailwind** with Storybook: #### CSS Modules + ```js { name: '@storybook/addon-styling-webpack', @@ -138,6 +141,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g ``` #### Sass + ```js { name: '@storybook/addon-styling-webpack', @@ -151,7 +155,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g "css-loader", { loader: "sass-loader", - options: { implementation: require.resolve("sass") } + options: { implementation: import.meta.resolve("sass") } }, ], }, @@ -161,6 +165,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g ``` #### Less + ```js { name: '@storybook/addon-styling-webpack', @@ -174,7 +179,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g "css-loader", { loader: "less-loader", - options: { implementation: require.resolve("less") } + options: { implementation: import.meta.resolve("less") } }, ], }, @@ -184,6 +189,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g ``` #### Vanilla-extract + ```js { name: '@storybook/addon-styling-webpack', @@ -197,9 +203,9 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g test: /\.css$/, sideEffects: true, use: [ - require.resolve("style-loader"), + import.meta.resolve("style-loader"), { - loader: require.resolve("css-loader"), + loader: import.meta.resolve("css-loader"), options: {}, }, ], @@ -212,7 +218,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g use: [ MiniCssExtractPlugin.loader, { - loader: require.resolve('css-loader'), + loader: import.meta.resolve('css-loader'), options: { // Required as image imports should be handled via JS/TS import statements url: false, @@ -232,8 +238,8 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g This isn't working in my monorepo. - Monorepos are a more advanced setup that may require a bit more configuration. To find out more. Refer to the Storybook FAQs on [monorepos](https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments). - +Monorepos are a more advanced setup that may require a bit more configuration. To find out more. Refer to the Storybook FAQs on [monorepos](https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments). + ## 🤝 Contributing diff --git a/auto.config.js b/auto.config.js index 2966d34..7901412 100644 --- a/auto.config.js +++ b/auto.config.js @@ -1,11 +1,11 @@ -module.exports = { - baseBranch: "main", +export default { + baseBranch: 'main', labels: [ { - name: "documentation", - releaseType: "none", + name: 'documentation', + releaseType: 'none', }, ], - prereleaseBranches: ["next", "prerelease"], + prereleaseBranches: ['next', 'prerelease'], versionBranches: true, }; diff --git a/package.json b/package.json index f6e770c..cd6803d 100644 --- a/package.json +++ b/package.json @@ -18,23 +18,19 @@ "name": "Shaun Evening", "email": "goodeveningshaun@gmail.com" }, + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "require": "./dist/index.js", - "import": "./dist/index.mjs" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js", - "import": "./dist/preset.mjs" + "default": "./dist/preset.js" }, "./package.json": "./package.json", "./postinstall": "./postinstall.js" }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", "files": [ "bin/**/*", "dist/**/*", @@ -45,20 +41,22 @@ "scripts": { "build": "tsup", "build:watch": "pnpm build --watch", + "format": "prettier --write .", "release": "auto shipit" }, "devDependencies": { "@types/node": "^22.15.29", "auto": "^11.3.0", + "picocolors": "^1.1.0", "prettier": "^3.5.3", "rimraf": "^6.0.1", - "storybook": "^9.0.4", + "storybook": "^10.0.0", "tsup": "^8.5.0", - "typescript": "^5.8.3", + "typescript": "^5.9.3", "webpack": "^5.99.9" }, "peerDependencies": { - "storybook": "^9.0.0", + "storybook": "^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0", "webpack": "^5.0.0" }, "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 927058a..537e2db 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,10 @@ importers: version: 22.15.29 auto: specifier: ^11.3.0 - version: 11.3.0(@types/node@22.15.29)(typescript@5.8.3) + version: 11.3.0(@types/node@22.15.29)(typescript@5.9.3) + picocolors: + specifier: ^1.1.0 + version: 1.1.1 prettier: specifier: ^3.5.3 version: 3.5.3 @@ -21,14 +24,14 @@ importers: specifier: ^6.0.1 version: 6.0.1 storybook: - specifier: ^9.0.4 - version: 9.0.4(@testing-library/dom@10.4.0)(prettier@3.5.3) + specifier: ^10.0.0 + version: 10.0.6(@testing-library/dom@10.4.0)(prettier@3.5.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) tsup: specifier: ^8.5.0 - version: 8.5.0(postcss@8.5.4)(typescript@5.8.3) + version: 8.5.0(postcss@8.5.4)(typescript@5.9.3) typescript: - specifier: ^5.8.3 - version: 5.8.3 + specifier: ^5.9.3 + version: 5.9.3 webpack: specifier: ^5.99.9 version: 5.99.9(esbuild@0.25.5) @@ -436,6 +439,13 @@ packages: '@storybook/global@5.0.0': resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} + '@storybook/icons@1.6.0': + resolution: {integrity: sha512-hcFZIjW8yQz8O8//2WTIXylm5Xsgc+lW9ISLgUk1xGmptIJQRdlhVIXCpSyLrQaaRiyhQRaVg7l3BD9S216BHw==} + engines: {node: '>=14.0.0'} + 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 + '@testing-library/dom@10.4.0': resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==} engines: {node: '>=18'} @@ -465,12 +475,18 @@ packages: '@types/aria-query@5.0.4': resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==} + '@types/chai@5.2.3': + resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==} + '@types/command-line-args@5.2.3': resolution: {integrity: sha512-uv0aG6R0Y8WHZLTamZwtfsDLVRnOa+n+n5rEvFWL5Na5gZ8V2Teab/duDPFzIIIhs9qizDpcavCusCLJZu62Kw==} '@types/command-line-usage@5.0.4': resolution: {integrity: sha512-BwR5KP3Es/CSht0xqBcUXS3qCAUVXwpRKsV2+arxeb65atasuXG9LykC9Ab10Cw3s2raH92ZqOeILaQbsB2ACg==} + '@types/deep-eql@4.0.2': + resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==} + '@types/eslint-scope@3.7.7': resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} @@ -489,17 +505,28 @@ packages: '@types/parse-json@4.0.2': resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==} - '@vitest/expect@3.0.9': - resolution: {integrity: sha512-5eCqRItYgIML7NNVgJj6TVCmdzE7ZVgJhruW0ziSQV4V7PvLkDL1bBkBdcTs/VuIz0IxPb5da1IDSqc1TR9eig==} + '@vitest/expect@3.2.4': + resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==} + + '@vitest/mocker@3.2.4': + resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==} + peerDependencies: + msw: ^2.4.9 + vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0 + peerDependenciesMeta: + msw: + optional: true + vite: + optional: true - '@vitest/pretty-format@3.0.9': - resolution: {integrity: sha512-OW9F8t2J3AwFEwENg3yMyKWweF7oRJlMyHOMIhO5F3n0+cgQAJZBjNgrF8dLwFTEXl5jUqBLXd9QyyKv8zEcmA==} + '@vitest/pretty-format@3.2.4': + resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==} - '@vitest/spy@3.0.9': - resolution: {integrity: sha512-/CcK2UDl0aQ2wtkp3YVWldrpLRNCfVcIOFGlVGKO4R5eajsH393Z1yiXLVQ7vWsj26JOEjeZI0x5sm5P4OGUNQ==} + '@vitest/spy@3.2.4': + resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==} - '@vitest/utils@3.0.9': - resolution: {integrity: sha512-ilHM5fHhZ89MCp5aAaM9uhfl1c2JdxVxl3McqsdVyVNN6JffnEen8UMCdRTzOhGXNQGo5GNL9QugHrz727Wnng==} + '@vitest/utils@3.2.4': + resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==} '@webassemblyjs/ast@1.14.1': resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==} @@ -669,10 +696,6 @@ packages: before-after-hook@2.2.3: resolution: {integrity: sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==} - better-opn@3.0.2: - resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==} - engines: {node: '>=12.0.0'} - bottleneck@2.19.5: resolution: {integrity: sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==} @@ -818,10 +841,6 @@ packages: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} - define-lazy-prop@2.0.0: - resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==} - engines: {node: '>=8'} - deprecation@2.3.1: resolution: {integrity: sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==} @@ -880,11 +899,6 @@ packages: es-module-lexer@1.7.0: resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==} - esbuild-register@3.6.0: - resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==} - peerDependencies: - esbuild: '>=0.12 <1' - esbuild@0.25.5: resolution: {integrity: sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==} engines: {node: '>=18'} @@ -919,6 +933,9 @@ packages: resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} engines: {node: '>=4.0'} + estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + events@3.3.0: resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==} engines: {node: '>=0.8.x'} @@ -1079,11 +1096,6 @@ packages: is-arrayish@0.2.1: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} - is-docker@2.2.1: - resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==} - engines: {node: '>=8'} - hasBin: true - is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} @@ -1112,10 +1124,6 @@ packages: resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==} engines: {node: '>=10'} - is-wsl@2.2.0: - resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==} - engines: {node: '>=8'} - isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} @@ -1196,6 +1204,9 @@ packages: loupe@3.1.3: resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==} + loupe@3.2.1: + resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==} + lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} @@ -1314,10 +1325,6 @@ packages: resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==} engines: {node: '>=6'} - open@8.4.2: - resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==} - engines: {node: '>=12'} - os-homedir@1.0.2: resolution: {integrity: sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==} engines: {node: '>=0.10.0'} @@ -1475,9 +1482,18 @@ packages: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true + react-dom@19.2.0: + resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==} + peerDependencies: + react: ^19.2.0 + react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} + react@19.2.0: + resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==} + engines: {node: '>=0.10.0'} + readdirp@4.1.2: resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} engines: {node: '>= 14.18.0'} @@ -1540,6 +1556,9 @@ packages: safe-buffer@5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} + scheduler@0.27.0: + resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==} + schema-utils@4.3.2: resolution: {integrity: sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==} engines: {node: '>= 10.13.0'} @@ -1590,8 +1609,8 @@ packages: resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==} engines: {node: '>= 8'} - storybook@9.0.4: - resolution: {integrity: sha512-ncYRogaG5N2LNgrh2BoTzgizd3oYI3lTe8gqSi6Zk9P4z2P4wpOI4cNwIcw78ShDJ7v1Md5y0qrK/HnSB9vsKA==} + storybook@10.0.6: + resolution: {integrity: sha512-s3qY17stuSxU9TFdSHWF2VWJiDKrhZsdlM9M9/APBLT+3kbTlfCPuaNONE0UETgz5tiZLIrC9K4RYjJ8c6PHPA==} hasBin: true peerDependencies: prettier: ^2 || ^3 @@ -1709,8 +1728,8 @@ packages: resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==} engines: {node: '>=14.0.0'} - tinyspy@3.0.2: - resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==} + tinyspy@4.0.4: + resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==} engines: {node: '>=14.0.0'} to-regex-range@5.0.1: @@ -1786,8 +1805,8 @@ packages: typescript-memoize@1.1.1: resolution: {integrity: sha512-GQ90TcKpIH4XxYTI2F98yEQYZgjNMOGPpOgdjIBhaLaWji5HPWlRnZ4AeA1hfBxtY7bCGDJsqDDHk/KaHOl5bA==} - typescript@5.8.3: - resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==} + typescript@5.9.3: + resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==} engines: {node: '>=14.17'} hasBin: true @@ -1900,10 +1919,10 @@ snapshots: '@auto-it/bot-list@11.3.0': {} - '@auto-it/core@11.3.0(@types/node@22.15.29)(typescript@5.8.3)': + '@auto-it/core@11.3.0(@types/node@22.15.29)(typescript@5.9.3)': dependencies: '@auto-it/bot-list': 11.3.0 - '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2(cosmiconfig@7.0.0)(typescript@5.8.3) + '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2(cosmiconfig@7.0.0)(typescript@5.9.3) '@octokit/core': 3.6.0 '@octokit/plugin-enterprise-compatibility': 1.3.0 '@octokit/plugin-retry': 3.0.9 @@ -1937,10 +1956,10 @@ snapshots: tapable: 2.2.2 terminal-link: 2.1.1 tinycolor2: 1.6.0 - ts-node: 10.9.2(@types/node@22.15.29)(typescript@5.8.3) + ts-node: 10.9.2(@types/node@22.15.29)(typescript@5.9.3) tslib: 2.1.0 type-fest: 0.21.3 - typescript: 5.8.3 + typescript: 5.9.3 typescript-memoize: 1.1.1 url-join: 4.0.1 optionalDependencies: @@ -1951,9 +1970,9 @@ snapshots: - encoding - supports-color - '@auto-it/npm@11.3.0(@types/node@22.15.29)(typescript@5.8.3)': + '@auto-it/npm@11.3.0(@types/node@22.15.29)(typescript@5.9.3)': dependencies: - '@auto-it/core': 11.3.0(@types/node@22.15.29)(typescript@5.8.3) + '@auto-it/core': 11.3.0(@types/node@22.15.29)(typescript@5.9.3) '@auto-it/package-json-utils': 11.3.0 await-to-js: 3.0.0 endent: 2.1.0 @@ -1980,10 +1999,10 @@ snapshots: parse-author: 2.0.0 parse-github-url: 1.0.2 - '@auto-it/released@11.3.0(@types/node@22.15.29)(typescript@5.8.3)': + '@auto-it/released@11.3.0(@types/node@22.15.29)(typescript@5.9.3)': dependencies: '@auto-it/bot-list': 11.3.0 - '@auto-it/core': 11.3.0(@types/node@22.15.29)(typescript@5.8.3) + '@auto-it/core': 11.3.0(@types/node@22.15.29)(typescript@5.9.3) deepmerge: 4.3.1 fp-ts: 2.16.10 io-ts: 2.2.22(fp-ts@2.16.10) @@ -1996,9 +2015,9 @@ snapshots: - supports-color - typescript - '@auto-it/version-file@11.3.0(@types/node@22.15.29)(typescript@5.8.3)': + '@auto-it/version-file@11.3.0(@types/node@22.15.29)(typescript@5.9.3)': dependencies: - '@auto-it/core': 11.3.0(@types/node@22.15.29)(typescript@5.8.3) + '@auto-it/core': 11.3.0(@types/node@22.15.29)(typescript@5.9.3) fp-ts: 2.16.10 io-ts: 2.2.22(fp-ts@2.16.10) semver: 7.7.2 @@ -2025,12 +2044,12 @@ snapshots: dependencies: '@jridgewell/trace-mapping': 0.3.9 - '@endemolshinegroup/cosmiconfig-typescript-loader@3.0.2(cosmiconfig@7.0.0)(typescript@5.8.3)': + '@endemolshinegroup/cosmiconfig-typescript-loader@3.0.2(cosmiconfig@7.0.0)(typescript@5.9.3)': dependencies: cosmiconfig: 7.0.0 lodash.get: 4.4.2 make-error: 1.3.6 - ts-node: 9.1.1(typescript@5.8.3) + ts-node: 9.1.1(typescript@5.9.3) tslib: 2.8.1 transitivePeerDependencies: - typescript @@ -2316,6 +2335,11 @@ snapshots: '@storybook/global@5.0.0': {} + '@storybook/icons@1.6.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)': + dependencies: + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + '@testing-library/dom@10.4.0': dependencies: '@babel/code-frame': 7.27.1 @@ -2351,10 +2375,17 @@ snapshots: '@types/aria-query@5.0.4': {} + '@types/chai@5.2.3': + dependencies: + '@types/deep-eql': 4.0.2 + assertion-error: 2.0.1 + '@types/command-line-args@5.2.3': {} '@types/command-line-usage@5.0.4': {} + '@types/deep-eql@4.0.2': {} + '@types/eslint-scope@3.7.7': dependencies: '@types/eslint': 9.6.1 @@ -2375,25 +2406,32 @@ snapshots: '@types/parse-json@4.0.2': {} - '@vitest/expect@3.0.9': + '@vitest/expect@3.2.4': dependencies: - '@vitest/spy': 3.0.9 - '@vitest/utils': 3.0.9 + '@types/chai': 5.2.3 + '@vitest/spy': 3.2.4 + '@vitest/utils': 3.2.4 chai: 5.2.0 tinyrainbow: 2.0.0 - '@vitest/pretty-format@3.0.9': + '@vitest/mocker@3.2.4': + dependencies: + '@vitest/spy': 3.2.4 + estree-walker: 3.0.3 + magic-string: 0.30.17 + + '@vitest/pretty-format@3.2.4': dependencies: tinyrainbow: 2.0.0 - '@vitest/spy@3.0.9': + '@vitest/spy@3.2.4': dependencies: - tinyspy: 3.0.2 + tinyspy: 4.0.4 - '@vitest/utils@3.0.9': + '@vitest/utils@3.2.4': dependencies: - '@vitest/pretty-format': 3.0.9 - loupe: 3.1.3 + '@vitest/pretty-format': 3.2.4 + loupe: 3.2.1 tinyrainbow: 2.0.0 '@webassemblyjs/ast@1.14.1': @@ -2554,12 +2592,12 @@ snapshots: author-regex@1.0.0: {} - auto@11.3.0(@types/node@22.15.29)(typescript@5.8.3): + auto@11.3.0(@types/node@22.15.29)(typescript@5.9.3): dependencies: - '@auto-it/core': 11.3.0(@types/node@22.15.29)(typescript@5.8.3) - '@auto-it/npm': 11.3.0(@types/node@22.15.29)(typescript@5.8.3) - '@auto-it/released': 11.3.0(@types/node@22.15.29)(typescript@5.8.3) - '@auto-it/version-file': 11.3.0(@types/node@22.15.29)(typescript@5.8.3) + '@auto-it/core': 11.3.0(@types/node@22.15.29)(typescript@5.9.3) + '@auto-it/npm': 11.3.0(@types/node@22.15.29)(typescript@5.9.3) + '@auto-it/released': 11.3.0(@types/node@22.15.29)(typescript@5.9.3) + '@auto-it/version-file': 11.3.0(@types/node@22.15.29)(typescript@5.9.3) await-to-js: 3.0.0 chalk: 4.1.2 command-line-application: 0.10.1 @@ -2582,10 +2620,6 @@ snapshots: before-after-hook@2.2.3: {} - better-opn@3.0.2: - dependencies: - open: 8.4.2 - bottleneck@2.19.5: {} brace-expansion@1.1.11: @@ -2730,8 +2764,6 @@ snapshots: deepmerge@4.3.1: {} - define-lazy-prop@2.0.0: {} - deprecation@2.3.1: {} dequal@2.0.3: {} @@ -2784,13 +2816,6 @@ snapshots: es-module-lexer@1.7.0: {} - esbuild-register@3.6.0(esbuild@0.25.5): - dependencies: - debug: 4.4.1 - esbuild: 0.25.5 - transitivePeerDependencies: - - supports-color - esbuild@0.25.5: optionalDependencies: '@esbuild/aix-ppc64': 0.25.5 @@ -2838,6 +2863,10 @@ snapshots: estraverse@5.3.0: {} + estree-walker@3.0.3: + dependencies: + '@types/estree': 1.0.7 + events@3.3.0: {} execa@5.1.1: @@ -3013,8 +3042,6 @@ snapshots: is-arrayish@0.2.1: {} - is-docker@2.2.1: {} - is-extglob@2.1.1: {} is-fullwidth-code-point@3.0.0: {} @@ -3031,10 +3058,6 @@ snapshots: is-unicode-supported@0.1.0: {} - is-wsl@2.2.0: - dependencies: - is-docker: 2.2.1 - isexe@2.0.0: {} jackspeak@3.4.3: @@ -3102,6 +3125,8 @@ snapshots: loupe@3.1.3: {} + loupe@3.2.1: {} + lru-cache@10.4.3: {} lru-cache@11.1.0: {} @@ -3197,12 +3222,6 @@ snapshots: dependencies: mimic-fn: 2.1.0 - open@8.4.2: - dependencies: - define-lazy-prop: 2.0.0 - is-docker: 2.2.1 - is-wsl: 2.2.0 - os-homedir@1.0.2: {} p-limit@1.3.0: @@ -3330,8 +3349,15 @@ snapshots: minimist: 1.2.8 strip-json-comments: 2.0.1 + react-dom@19.2.0(react@19.2.0): + dependencies: + react: 19.2.0 + scheduler: 0.27.0 + react-is@17.0.2: {} + react@19.2.0: {} + readdirp@4.1.2: {} recast@0.23.11: @@ -3410,6 +3436,8 @@ snapshots: safe-buffer@5.2.1: {} + scheduler@0.27.0: {} + schema-utils@4.3.2: dependencies: '@types/json-schema': 7.0.15 @@ -3455,16 +3483,16 @@ snapshots: dependencies: whatwg-url: 7.1.0 - storybook@9.0.4(@testing-library/dom@10.4.0)(prettier@3.5.3): + storybook@10.0.6(@testing-library/dom@10.4.0)(prettier@3.5.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0): dependencies: '@storybook/global': 5.0.0 + '@storybook/icons': 1.6.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0) '@testing-library/jest-dom': 6.6.3 '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0) - '@vitest/expect': 3.0.9 - '@vitest/spy': 3.0.9 - better-opn: 3.0.2 + '@vitest/expect': 3.2.4 + '@vitest/mocker': 3.2.4 + '@vitest/spy': 3.2.4 esbuild: 0.25.5 - esbuild-register: 3.6.0(esbuild@0.25.5) recast: 0.23.11 semver: 7.7.2 ws: 8.18.2 @@ -3473,8 +3501,11 @@ snapshots: transitivePeerDependencies: - '@testing-library/dom' - bufferutil - - supports-color + - msw + - react + - react-dom - utf-8-validate + - vite string-width@4.2.3: dependencies: @@ -3586,7 +3617,7 @@ snapshots: tinyrainbow@2.0.0: {} - tinyspy@3.0.2: {} + tinyspy@4.0.4: {} to-regex-range@5.0.1: dependencies: @@ -3602,7 +3633,7 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-node@10.9.2(@types/node@22.15.29)(typescript@5.8.3): + ts-node@10.9.2(@types/node@22.15.29)(typescript@5.9.3): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.11 @@ -3616,18 +3647,18 @@ snapshots: create-require: 1.1.1 diff: 4.0.2 make-error: 1.3.6 - typescript: 5.8.3 + typescript: 5.9.3 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 - ts-node@9.1.1(typescript@5.8.3): + ts-node@9.1.1(typescript@5.9.3): dependencies: arg: 4.1.3 create-require: 1.1.1 diff: 4.0.2 make-error: 1.3.6 source-map-support: 0.5.21 - typescript: 5.8.3 + typescript: 5.9.3 yn: 3.1.1 tslib@1.10.0: {} @@ -3636,7 +3667,7 @@ snapshots: tslib@2.8.1: {} - tsup@8.5.0(postcss@8.5.4)(typescript@5.8.3): + tsup@8.5.0(postcss@8.5.4)(typescript@5.9.3): dependencies: bundle-require: 5.1.0(esbuild@0.25.5) cac: 6.7.14 @@ -3657,7 +3688,7 @@ snapshots: tree-kill: 1.2.2 optionalDependencies: postcss: 8.5.4 - typescript: 5.8.3 + typescript: 5.9.3 transitivePeerDependencies: - jiti - supports-color @@ -3668,7 +3699,7 @@ snapshots: typescript-memoize@1.1.1: {} - typescript@5.8.3: {} + typescript@5.9.3: {} typical@4.0.0: {} diff --git a/postinstall.js b/postinstall.js index bfd6566..6635129 100755 --- a/postinstall.js +++ b/postinstall.js @@ -1 +1 @@ -module.exports = require("./bin/postinstall.js"); +export * from './bin/postinstall.js'; diff --git a/preset.js b/preset.js index 0fb9c95..4bd63d3 100644 --- a/preset.js +++ b/preset.js @@ -1 +1 @@ -module.exports = require("./dist/preset"); +export * from './dist/preset.js'; diff --git a/src/postinstall.ts b/src/postinstall.ts index 4ec6b03..a991a37 100644 --- a/src/postinstall.ts +++ b/src/postinstall.ts @@ -1,14 +1,14 @@ -import { spawn } from "child_process"; +import { spawn } from 'child_process'; const spawnAsync = ( cmd: Parameters[0], args: Parameters[1], - options: Parameters[2], + options: Parameters[2] ): Promise => { return new Promise((resolve, reject) => { const process = spawn(cmd, args, options); - process.on("close", (code) => { + process.on('close', (code) => { if (code === 0) { resolve(); } else { @@ -16,50 +16,36 @@ const spawnAsync = ( } }); - process.on("error", (err) => { + process.on('error', (err) => { reject(err); }); }); }; -type PackageManagers = "npm" | "pnpm" | "yarn1" | "yarn2"; +type PackageManagers = 'npm' | 'pnpm' | 'yarn1' | 'yarn2'; -const PACKAGE_MANAGER_TO_COMMAND: Record< - PackageManagers, - [string] | [string, string] -> = { - npm: ["npx"], - pnpm: ["pnpm", "dlx"], - yarn1: ["npx"], - yarn2: ["yarn", "dlx"], +const PACKAGE_MANAGER_TO_COMMAND: Record = { + npm: ['npx'], + pnpm: ['pnpm', 'dlx'], + yarn1: ['npx'], + yarn2: ['yarn', 'dlx'], }; -const selectPackageManagerCommand = (packageManager: PackageManagers) => - PACKAGE_MANAGER_TO_COMMAND[packageManager]; +const selectPackageManagerCommand = (packageManager: PackageManagers) => PACKAGE_MANAGER_TO_COMMAND[packageManager]; -const spawnPackageManagerScript = async ( - packageManager: PackageManagers, - args: string[], -) => { +const spawnPackageManagerScript = async (packageManager: PackageManagers, args: string[]) => { const [command, ...baseArgs] = selectPackageManagerCommand(packageManager); await spawnAsync(command, [...baseArgs, ...args], { - stdio: "inherit", + stdio: 'inherit', cwd: process.cwd(), shell: true, }); }; -const automigrate = async ({ - packageManager = "npm", -}: { - packageManager: PackageManagers; -}) => { +const automigrate = async ({ packageManager = 'npm' }: { packageManager: PackageManagers }) => { try { - await spawnPackageManagerScript(packageManager, [ - "@storybook/auto-config", - "styling", - ]); + await spawnPackageManagerScript(packageManager, ['@storybook/auto-config', 'styling']); } catch (e) { console.error(e); process.exit(1); diff --git a/src/preset.ts b/src/preset.ts index 4ea53dc..41cb956 100644 --- a/src/preset.ts +++ b/src/preset.ts @@ -1,3 +1,3 @@ -import { webpackFinal as webpack } from "./webpackFinal"; +import { webpackFinal as webpack } from './webpackFinal'; export const webpackFinal = webpack; diff --git a/src/types.ts b/src/types.ts index fe81498..e9f533c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,6 +1,6 @@ -import type { RuleSetRule, Configuration as WebpackConfig } from "webpack"; +import type { RuleSetRule, Configuration as WebpackConfig } from 'webpack'; export interface AddonStylingOptions { - plugins?: WebpackConfig["plugins"]; + plugins?: WebpackConfig['plugins']; rules?: RuleSetRule[]; } diff --git a/src/typings.d.ts b/src/typings.d.ts index 3563aeb..2f4eb9c 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -1 +1 @@ -declare module "global"; +declare module 'global'; diff --git a/src/webpackFinal.ts b/src/webpackFinal.ts index 02549d9..c92adfd 100644 --- a/src/webpackFinal.ts +++ b/src/webpackFinal.ts @@ -1,27 +1,19 @@ -import { logger, colors } from "storybook/internal/node-logger"; -import type { RuleSetRule, Configuration as WebpackConfig } from "webpack"; -import type { AddonStylingOptions } from "./types"; +import { logger } from 'storybook/internal/node-logger'; +import picocolors from 'picocolors'; +import type { RuleSetRule, Configuration as WebpackConfig } from 'webpack'; +import type { AddonStylingOptions } from './types'; export const isRuleForStyles = (rule: RuleSetRule) => rule.test instanceof RegExp && - (rule.test.test("test.css") || - rule.test.test("test.scss") || - rule.test.test("test.less")); + (rule.test.test('test.css') || rule.test.test('test.scss') || rule.test.test('test.less')); -export function webpackFinal( - config: WebpackConfig, - { rules, plugins }: AddonStylingOptions = {}, -) { +export function webpackFinal(config: WebpackConfig, { rules, plugins }: AddonStylingOptions = {}) { logger.info( - `=> [${colors.pink( - "@storybook/addon-styling-webpack", - )}] Applying custom Storybook webpack configuration styling.`, + `=> [${picocolors.green('@storybook/addon-styling-webpack')}] Applying custom Storybook webpack configuration styling.` ); if (plugins && plugins.length) { logger.info( - `=> [${colors.pink( - "@storybook/addon-styling-webpack", - )}] Adding given plugins to Storybook webpack configuration.`, + `=> [${picocolors.green('@storybook/addon-styling-webpack')}] Adding given plugins to Storybook webpack configuration.` ); config.plugins = config.plugins || []; config.plugins.push(...plugins); @@ -29,20 +21,18 @@ export function webpackFinal( if (rules && rules.length) { logger.info( - `=> [${colors.pink( - "@storybook/addon-styling-webpack", - )}] Replacing Storybook's webpack rules for styles with given rules.`, + `=> [${picocolors.green( + '@storybook/addon-styling-webpack' + )}] Replacing Storybook's webpack rules for styles with given rules.` ); if (!config.module?.rules) { - throw new Error( - "webpackFinal received a rules option but config.module.rules is not an array", - ); + throw new Error('webpackFinal received a rules option but config.module.rules is not an array'); } // Remove any existing rules for styles config.module.rules = config.module.rules.filter( - (rule) => typeof rule === "object" && rule && !isRuleForStyles(rule), + (rule) => typeof rule === 'object' && rule && !isRuleForStyles(rule) ); // Add the new rules for styles diff --git a/tsconfig.json b/tsconfig.json index 577c57a..c71867d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "esModuleInterop": true, "skipLibCheck": true, - "target": "es2023", // Node 20 according to https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping#node-20 + "target": "esnext", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", diff --git a/tsup.config.js b/tsup.config.js index 30f789e..c5456c8 100644 --- a/tsup.config.js +++ b/tsup.config.js @@ -1,35 +1,35 @@ -import { defineConfig } from "tsup"; +import { defineConfig } from 'tsup'; export default defineConfig((options) => [ { - entry: ["src/index.ts", "src/preset.ts"], - outDir: "./dist", - splitting: false, - minify: !options.watch, - format: ["cjs", "esm"], - dts: { - resolve: true, - }, + entry: ['src/index.ts', 'src/preset.ts'], + outDir: './dist', + splitting: true, + format: ['esm'], +dts: true, treeshake: true, sourcemap: false, - clean: true, - platform: "browser", + /* + keep this line commented until https://github.com/egoist/tsup/issues/1270 is resolved + clean: options.watch ? false : true, + */ + clean: false, + platform: 'browser', esbuildOptions(options) { - options.conditions = ["module"]; + options.conditions = ['module']; }, }, { - entry: ["src/postinstall.ts"], - outDir: "./bin", - splitting: false, - minify: !options.watch, - format: ["cjs"], + entry: ['src/postinstall.ts'], + outDir: './bin', +splitting: true, + format: ['esm'], treeshake: true, - target: "node20", - clean: true, - platform: "node", + target: 'node20', + clean: false, + platform: 'node', esbuildOptions(options) { - options.conditions = ["module"]; + options.conditions = ['module']; }, }, ]);