Merge pull request #197 from storybookjs/norbert/vitest

Modernize codebase (tsup, vitest, etc.)

Author: ndelangen

.github/workflows/test.yml

@@ -21,5 +21,11 @@ jobs:
       - name: Build
         run: pnpm run build
 
-      - name: Run tests
-        run: pnpm run test:ci
+      - name: Run Check
+        run: pnpm run check
+
+      - name: Run tests:unit
+        run: pnpm run test:unit
+
+      - name: Run tests:integration
+        run: pnpm run test:integration

.prettierrc.d.ts

@@ -0,0 +1,4 @@
+import { Options } from 'prettier'
+
+declare const config: Options
+export default config

README.md

@@ -181,6 +181,7 @@ This plugin does not support MDX files.
 | [`storybook/hierarchy-separator`](./docs/rules/hierarchy-separator.md)                     | Deprecated hierarchy separator in title property                                                                              | 🔧  | <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li><li>csf-strict</li><li>flat/csf-strict</li></ul> |
 | [`storybook/meta-inline-properties`](./docs/rules/meta-inline-properties.md)               | Meta should only have inline properties                                                                                       |     | N/A                                                                                                                            |
 | [`storybook/no-redundant-story-name`](./docs/rules/no-redundant-story-name.md)             | A story should not have a redundant name property                                                                             | 🔧  | <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li><li>csf-strict</li><li>flat/csf-strict</li></ul> |
+| [`storybook/no-renderer-packages`](./docs/rules/no-renderer-packages.md)                   | Do not import renderer packages directly in stories                                                                           |     | <ul><li>recommended</li><li>flat/recommended</li></ul>                                                                         |
 | [`storybook/no-stories-of`](./docs/rules/no-stories-of.md)                                 | storiesOf is deprecated and should not be used                                                                                |     | <ul><li>csf-strict</li><li>flat/csf-strict</li></ul>                                                                           |
 | [`storybook/no-title-property-in-meta`](./docs/rules/no-title-property-in-meta.md)         | Do not define a title in meta                                                                                                 | 🔧  | <ul><li>csf-strict</li><li>flat/csf-strict</li></ul>                                                                           |
 | [`storybook/no-uninstalled-addons`](./docs/rules/no-uninstalled-addons.md)                 | This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name. |     | <ul><li>recommended</li><li>flat/recommended</li></ul>                                                                         |

docs/rules/no-renderer-packages.md

@@ -0,0 +1,39 @@
+# Do not import renderer packages directly in stories (no-renderer-packages)
+
+<!-- RULE-CATEGORIES:START -->
+
+**Included in these configurations**: <ul><li>recommended</li><li>flat/recommended</li></ul>
+
+<!-- RULE-CATEGORIES:END -->
+
+## Rule Details
+
+This rule prevents importing Storybook renderer packages directly in stories. Instead, you should use framework-specific packages that are designed for your build tool (e.g., Vite, webpack).
+
+Examples of **incorrect** code for this rule:
+
+```js
+import { something } from '@storybook/react'
+import { something } from '@storybook/vue3'
+import { something } from '@storybook/web-components'
+```
+
+Examples of **correct** code for this rule:
+
+```js
+import { something } from '@storybook/react-vite'
+import { something } from '@storybook/vue3-webpack5'
+import { something } from '@storybook/web-components-vite'
+```
+
+## When Not To Use It
+
+If you have a specific need to use renderer packages directly in your stories, you can disable this rule. However, it's recommended to use the framework-specific packages as they are optimized for your build tool.
+
+## Further Reading
+
+For more information about Storybook's framework-specific packages and build tools, see:
+
+- [Storybook for React](https://storybook.js.org/docs/react/get-started/install)
+- [Storybook for Vue](https://storybook.js.org/docs/vue/get-started/install)
+- [Storybook for Web Components](https://storybook.js.org/docs/web-components/get-started/install)

lib/configs/csf-strict.ts

@@ -4,7 +4,7 @@
  * in order to update its content, execute "pnpm run update-all"
  */
 export = {
-  extends: require.resolve('./csf'),
+  extends: require.resolve('eslint-plugin-storybook/dist/configs/csf'),
   rules: {
     'react-hooks/rules-of-hooks': 'off',
     'import/no-anonymous-default-export': 'off',

lib/configs/flat/recommended.ts

@@ -24,6 +24,7 @@ export = [
       'storybook/default-exports': 'error',
       'storybook/hierarchy-separator': 'warn',
       'storybook/no-redundant-story-name': 'warn',
+      'storybook/no-renderer-packages': 'error',
       'storybook/prefer-pascal-case': 'warn',
       'storybook/story-exports': 'error',
       'storybook/use-storybook-expect': 'error',

lib/configs/recommended.ts

@@ -16,6 +16,7 @@ export = {
         'storybook/default-exports': 'error',
         'storybook/hierarchy-separator': 'warn',
         'storybook/no-redundant-story-name': 'warn',
+        'storybook/no-renderer-packages': 'error',
         'storybook/prefer-pascal-case': 'warn',
         'storybook/story-exports': 'error',
         'storybook/use-storybook-expect': 'error',

lib/index.ts

@@ -21,6 +21,7 @@ import defaultExports from './rules/default-exports'
 import hierarchySeparator from './rules/hierarchy-separator'
 import metaInlineProperties from './rules/meta-inline-properties'
 import noRedundantStoryName from './rules/no-redundant-story-name'
+import noRendererPackages from './rules/no-renderer-packages'
 import noStoriesOf from './rules/no-stories-of'
 import noTitlePropertyInMeta from './rules/no-title-property-in-meta'
 import noUninstalledAddons from './rules/no-uninstalled-addons'
@@ -52,6 +53,7 @@ export = {
     'hierarchy-separator': hierarchySeparator,
     'meta-inline-properties': metaInlineProperties,
     'no-redundant-story-name': noRedundantStoryName,
+    'no-renderer-packages': noRendererPackages,
     'no-stories-of': noStoriesOf,
     'no-title-property-in-meta': noTitlePropertyInMeta,
     'no-uninstalled-addons': noUninstalledAddons,

lib/rules/await-interactions.ts

@@ -137,6 +137,7 @@ export = createStorybookRule({
         node.specifiers.find(
           (spec) =>
             isImportSpecifier(spec) &&
+            'name' in spec.imported &&
             spec.imported.name === 'userEvent' &&
             spec.local.name === 'userEvent'
         ) !== undefined
@@ -147,7 +148,8 @@ export = createStorybookRule({
       return (
         (node.source.value === '@storybook/jest' || node.source.value === '@storybook/test') &&
         node.specifiers.find(
-          (spec) => isImportSpecifier(spec) && spec.imported.name === 'expect'
+          (spec) =>
+            isImportSpecifier(spec) && 'name' in spec.imported && spec.imported.name === 'expect'
         ) !== undefined
       )
     }

lib/rules/default-exports.ts

@@ -67,7 +67,7 @@ export = createStorybookRule({
 
     return {
       ImportSpecifier(node) {
-        if (node.imported.name === 'storiesOf') {
+        if ('name' in node.imported && node.imported.name === 'storiesOf') {
           hasStoriesOfImport = true
         }
       },