Implement no-renderer-packages rule and update configurations

- Added a new ESLint rule `no-renderer-packages` to prevent direct imports of Storybook renderer packages in stories, promoting the use of framework-specific packages.
- Updated the `README.md` to include documentation for the new rule.
- Modified `tsup.config.ts` to include additional entry points for TypeScript files.
- Adjusted ESLint configurations in `csf-strict.ts` and `recommended.ts` to enforce the new rule.
- Refactored Prettier configuration to use ES module syntax for consistency.

Author: ndelangen

.prettierrc.js

@@ -1,10 +1,8 @@
-const config = {
+module.exports = {
   trailingComma: 'es5',
   tabWidth: 2,
   semi: false,
   singleQuote: true,
   printWidth: 100,
   bracketSpacing: true,
 }
-
-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,

tools/update-lib-configs.ts

@@ -43,7 +43,7 @@ function formatCategory(category: TCategory) {
     * in order to update its content, execute "pnpm run update-all"
     */
     export = {
-      extends: require.resolve('./${extendsCategoryId}'),
+      extends: require.resolve('eslint-plugin-storybook/dist/configs/${extendsCategoryId}'),
       rules: ${formatRules(category.rules)}
     }
   `

tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  entry: ['lib/index.ts'],
+  entry: ['lib/index.ts', 'lib/configs/**/*.ts'],
   format: ['cjs'],
   dts: true,
   clean: true,