Merge pull request #176 from storybookjs/yann/fix-missing-rules

Fix: Bring back non-categorized rules

README.md

@@ -169,6 +169,7 @@ This plugin does not support MDX files.
 | [`storybook/csf-component`](./docs/rules/csf-component.md)                                 | The component property should be set                                                                                          |     | <ul><li>csf</li><li>flat/csf</li></ul>                                                                            |
 | [`storybook/default-exports`](./docs/rules/default-exports.md)                             | Story files should have a default export                                                                                      | 🔧  | <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li></ul>                               |
 | [`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></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></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>                                                              |

docs/rules/await-interactions.md

@@ -8,12 +8,12 @@
 
 ## Rule Details
 
-Storybook provides an instrumented version of testing library in the [@storybook/testing-library](https://github.com/storybookjs/testing-library/) package. When [writing interactions](https://storybook.js.org/docs/react/essentials/interactions), make sure to **await** them, so that addon-interactions can intercept these helper functions and allow you to step through them when debugging.
+Storybook provides an instrumented version of testing library in the [@storybook/test](https://github.com/storybookjs/storybook/tree/next/code/lib/test) library (formerly available in [@storybook/testing-library](https://github.com/storybookjs/testing-library/) library). When [writing interactions](https://storybook.js.org/docs/essentials/interactions), make sure to **await** them, so that addon-interactions can intercept these helper functions and allow you to step through them when debugging.
 
 Examples of **incorrect** code for this rule:
 
 ```js
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent } from '@storybook/test' // or from the legacy package "@storybook/testing-library";
 
 MyStory.play = (context) => {
   const canvas = within(context.canvasElement)
@@ -25,7 +25,7 @@ MyStory.play = (context) => {
 Examples of **correct** code for this rule:
 
 ```js
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent } from '@storybook/test' // or from the legacy package "@storybook/testing-library";
 
 MyStory.play = async (context) => {
   const canvas = within(context.canvasElement)

docs/rules/csf-component.md

@@ -33,4 +33,4 @@ While we encourage each CSF file to clearly correspond to a single component, it
 
 ## Further Reading
 
-- [Automatic argType inference](https://storybook.js.org/docs/react/api/argtypes#automatic-argtype-inference)
+- [Automatic argType inference](https://storybook.js.org/docs/api/argtypes#automatic-argtype-inference)

docs/rules/default-exports.md

@@ -8,7 +8,7 @@
 
 ## Rule Details
 
-In [CSF](https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format), a story file should contain a _default export_ that describes the component, and _named exports_ that describe the stories. This rule enforces the definition of a default export in story files.
+In [CSF](https://storybook.js.org/docs/writing-stories#component-story-format), a story file should contain a _default export_ that describes the component, and _named exports_ that describe the stories. This rule enforces the definition of a default export in story files.
 
 Examples of **incorrect** code for this rule:
 
@@ -36,4 +36,4 @@ If you're using Storybook 6.5 and [CSF in MDX](https://github.com/storybookjs/st
 
 ## Further Reading
 
-More information about defining stories here: https://storybook.js.org/docs/react/writing-stories/introduction#defining-stories
+More information about defining stories here: https://storybook.js.org/docs/writing-stories#defining-stories

docs/rules/meta-inline-properties.md

@@ -1,6 +1,9 @@
 # Meta should only have inline properties (meta-inline-properties)
 
 <!-- RULE-CATEGORIES:START -->
+
+**Included in these configurations**: N/A
+
 <!-- RULE-CATEGORIES:END -->
 
 ## Rule Details

docs/rules/no-stories-of.md

@@ -8,7 +8,7 @@
 
 ## Rule Details
 
-Since Storybook 5.2, the [CSF format](https://storybook.js.org/docs/react/api/csf) was introduced and the `storiesOf` API has been deprecated.
+Since Storybook 5.2, the [CSF format](https://storybook.js.org/docs/api/csf) was introduced and the `storiesOf` API has been deprecated.
 
 Examples of **incorrect** code for this rule:
 

docs/rules/prefer-pascal-case.md

@@ -8,7 +8,7 @@
 
 ## Rule Details
 
-As a best practice, stories should be defined in [_PascalCase_](https://en.wiktionary.org/wiki/Pascal_case). This makes it simpler to visually differ stories to other code. Plus, it makes it simpler to define regexes for [non-story exports](https://storybook.js.org/docs/react/api/csf#non-story-exports).
+As a best practice, stories should be defined in [_PascalCase_](https://en.wiktionary.org/wiki/Pascal_case). This makes it simpler to visually differ stories to other code. Plus, it makes it simpler to define regexes for [non-story exports](https://storybook.js.org/docs/api/csf#non-story-exports).
 
 Examples of **incorrect** code for this rule:
 
@@ -24,4 +24,4 @@ export const PrimaryButton = {}
 
 ## Further Reading
 
-More information about naming stories can be found here: https://storybook.js.org/docs/react/writing-stories/introduction#defining-stories
+More information about naming stories can be found here: https://storybook.js.org/docs/writing-stories#defining-stories

docs/rules/story-exports.md

@@ -8,7 +8,7 @@
 
 ## Rule Details
 
-In [CSF](https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format), a story file should contain a _default export_ that describes the component, and at _named exports_ that describe the stories. This rule enforces the definition of at least one named export in story files.
+In [CSF](https://storybook.js.org/docs/writing-stories#component-story-format), a story file should contain a _default export_ that describes the component, and at _named exports_ that describe the stories. This rule enforces the definition of at least one named export in story files.
 
 Examples of **incorrect** code for this rule:
 
@@ -38,4 +38,4 @@ This rule should only be applied in your `.stories.*` files. Please ensure you a
 
 ## Further Reading
 
-More information about defining stories here: https://storybook.js.org/docs/react/writing-stories/introduction#defining-stories
+More information about defining stories here: https://storybook.js.org/docs/writing-stories#defining-stories

docs/rules/use-storybook-expect.md

@@ -8,26 +8,29 @@
 
 ## Rule Details
 
-Storybook provides a browser compatible version of Jest's expect via the [@storybook/jest](https://github.com/storybookjs/jest) library.
-When [writing interactions](https://storybook.js.org/docs/react/essentials/interactions) and asserting values, you should always use `expect` from the `@storybook/jest` library.
+Storybook provides a browser compatible version of `expect` via the [@storybook/test](https://github.com/storybookjs/storybook/tree/next/code/lib/test) library (formerly available in the legacy [@storybook/jest](https://github.com/storybookjs/jest) library).
+When [writing interactions](https://storybook.js.org/docs/essentials/interactions) and asserting values, you should always use `expect` from the `@storybook/test` library.
 
 Examples of **incorrect** code for this rule:
 
 ```js
-Default.play = () => {
+Default.play = async () => {
   // using global expect from Jest. Will break on the browser
-  expect(123).toEqual(123)
+  await expect(123).toEqual(123)
 }
 ```
 
 Examples of **correct** code for this rule:
 
 ```js
+// correct import.
+import { expect } from '@storybook/test'
+// or this, which is now considered legacy
 import { expect } from '@storybook/jest'
 
-Default.play = () => {
+Default.play = async () => {
   // using imported expect from storybook package
-  expect(123).toEqual(123)
+  await expect(123).toEqual(123)
 }
 ```
 

docs/rules/use-storybook-testing-library.md

@@ -8,8 +8,8 @@
 
 ## Rule Details
 
-Storybook provides an instrumented version of testing library in the [@storybook/testing-library](https://github.com/storybookjs/testing-library/) package.
-When [writing interactions](https://storybook.js.org/docs/react/essentials/interactions), make sure to use the helper functions from `@storybook/testing-library`, so that addon-interactions can intercept these helper functions and allow you to step through them when debugging.
+Storybook provides an instrumented version of testing library in the [@storybook/test](https://github.com/storybookjs/storybook/tree/next/code/lib/test) library (formerly available in [@storybook/testing-library](https://github.com/storybookjs/testing-library/) library).
+When [writing interactions](https://storybook.js.org/docs/essentials/interactions), make sure to use the helper functions from `@storybook/test`, so that addon-interactions can intercept these helper functions and allow you to step through them when debugging.
 
 Examples of **incorrect** code for this rule:
 
@@ -26,6 +26,8 @@ Examples of **correct** code for this rule:
 
 ```js
 // correct import.
+import { within } from '@storybook/test'
+// or this, which is now considered legacy
 import { within } from '@storybook/testing-library'
 
 Default.play = async (context) => {

lib/index.ts

@@ -19,6 +19,7 @@ import contextInPlayFunction from './rules/context-in-play-function'
 import csfComponent from './rules/csf-component'
 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 noStoriesOf from './rules/no-stories-of'
 import noTitlePropertyInMeta from './rules/no-title-property-in-meta'
@@ -49,6 +50,7 @@ export = {
     'csf-component': csfComponent,
     'default-exports': defaultExports,
     'hierarchy-separator': hierarchySeparator,
+    'meta-inline-properties': metaInlineProperties,
     'no-redundant-story-name': noRedundantStoryName,
     'no-stories-of': noStoriesOf,
     'no-title-property-in-meta': noTitlePropertyInMeta,

tests/integrations/flat-config.spec.ts

@@ -30,11 +30,12 @@ describe('Integration with flat config', () => {
     }
 
     const result = JSON.parse(
-      cp.execSync(`${ESLINT} a.stories.tsx --max-warnings 1 --format=json`, {
+      cp.execSync(`${ESLINT} a.stories.tsx --max-warnings 2 --format=json`, {
         encoding: 'utf-8',
       })
     )
     expect(result.length).toBe(1)
     expect(result[0].messages[0].messageId).toBe('shouldHaveStoryExport')
+    expect(result[0].messages[1].messageId).toBe('metaShouldHaveInlineProperties')
   })
 })

tests/integrations/flat-config/a.stories.tsx

@@ -1,6 +1,4 @@
 const Input = () => 'This is an input component'
 
-export default {
-  title: 'Input',
-  component: Input,
-}
+const title = 'foo';
+export default { title }

tests/integrations/flat-config/eslint.config.js

@@ -6,6 +6,7 @@ export default [
     files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '**/*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
     rules: {
       'storybook/story-exports': 'warn',
+      'storybook/meta-inline-properties': 'warn',
     },
   },
 ]

tests/integrations/legacy-config.spec.ts

@@ -30,11 +30,12 @@ describe('Integration with legacy config', () => {
     }
 
     const result = JSON.parse(
-      cp.execSync(`${ESLINT} a.stories.tsx --max-warnings 1 --format=json`, {
+      cp.execSync(`${ESLINT} a.stories.tsx --max-warnings 2 --format=json`, {
         encoding: 'utf-8',
       })
     )
     expect(result.length).toBe(1)
     expect(result[0].messages[0].messageId).toBe('shouldHaveStoryExport')
+    expect(result[0].messages[1].messageId).toBe('metaShouldHaveInlineProperties')
   })
 })

tests/integrations/legacy-config/.eslintrc.json

@@ -9,7 +9,8 @@
     {
       "files": ["*.stories.@(ts|tsx|js|jsx|mjs|cjs)"],
       "rules": {
-        "storybook/story-exports": "warn"
+        "storybook/story-exports": "warn",
+        "storybook/meta-inline-properties": "warn"
       }
     }
   ]

tests/integrations/legacy-config/a.stories.tsx

@@ -1,6 +1,4 @@
 const Input = () => 'This is an input component'
 
-export default {
-  title: 'Input',
-  component: Input,
-}
+const title = 'foo';
+export default { title }

tools/update-rules-list.ts

@@ -28,11 +28,13 @@ const rulesList: TRulesList[] = Object.entries(rules)
     return [
       rule.name,
       createRuleLink(rule.name),
-      rule.meta.docs.description,
+      rule.meta.docs?.description || '',
       rule.meta.fixable ? emojiKey.fixable : '',
-      rule.meta.docs.categories
-        ? `<ul>${rule.meta.docs.categories.map((c) => `<li>${c}</li><li>flat/${c}</li>`).join('')}</ul>`
-        : '',
+      rule.meta.docs?.excludeFromConfig
+        ? 'N/A'
+        : rule.meta.docs?.categories
+          ? `<ul>${rule.meta.docs?.categories.map((c) => `<li>${c}</li><li>flat/${c}</li>`).join('')}</ul>`
+          : '',
     ]
   })
 

tools/utils/categories.ts

@@ -24,13 +24,13 @@ for (const categoryId of categoryIds) {
   categoriesConfig[categoryId].rules = []
 
   for (const rule of rules) {
-    const ruleCategories = rule.meta.docs.categories
+    const ruleCategories = rule.meta.docs?.categories
     // Throw if rule does not have a category
     if (!ruleCategories?.length) {
       throw new Error(`Rule "${rule.ruleId}" does not have any category.`)
     }
 
-    if (ruleCategories.includes(categoryId)) {
+    if (ruleCategories.includes(categoryId) && rule.meta.docs?.excludeFromConfig !== true) {
       categoriesConfig[categoryId].rules?.push(rule)
     }
   }

tools/utils/docs.ts

@@ -106,7 +106,7 @@ export const updateRulesDocs = async (rulesList: TRulesList[]) => {
 
       const updatedDocFile = await format(overWriteRuleDocs(rule, ruleDocFile), {
         parser: 'markdown',
-        ...prettierConfig,
+        ...(await prettierConfig),
       })
 
       await writeFile(ruleDocFilePath, updatedDocFile)

tools/utils/rules.ts

@@ -28,8 +28,6 @@ const rules = fs
       meta,
     }
   })
-  // We might have rules which are almost ready but should not be shipped
-  .filter((rule) => !rule.meta.docs?.excludeFromConfig)
 
 export type TRules = typeof rules