Add meta-satisfies-type rule #124

NotWoods · 2023-04-17T23:18:00Z

Issue: #123

What Changed

Added a new rule to check that meta is always followed by satisfies Meta.

This probably needs a new configuration (ie csf-typescript) for TypeScript-only rules. I'm not sure if ESLint has a way to check the file extension or not.

Checklist

Check the ones applicable to your change:

Ran yarn update-all
Tests are updated
Documentation is updated

Change Type

Indicate the type of change your pull request is:

yannbf · 2023-04-18T15:51:06Z

Hey @NotWoods thanks a lot for your contribution! Looks pretty cool. I think it needs more thought indeed, regarding a new category or something, as we don't want this to be enforced by default. We could potentially introduce the rule disabled by default, so users can enable when they want.

@kasperpeulen I believe you might be interested in this!

NotWoods · 2023-04-19T04:47:03Z

I removed the current requirement that a rule has at least one category. That should let this rule be included without getting enabled by default :)

kasperpeulen · 2023-04-20T17:02:03Z

Looks good!

NotWoods · 2023-05-31T20:20:12Z

Hello! Just checking in, is there any changes I need to make to this rule?

kasperpeulen · 2023-06-02T08:20:58Z

cc @yannbf

hjoelh · 2023-08-08T16:45:35Z

Looks great @NotWoods 🚀

Do you think we'd need a separate rule for enforcing StoryObj<typeof meta> instead of StoryObj<typeof YourComponent> to get full safety? (thats the only way I can get TS to complain about required props/args)

Btw, it looks like the pr contains a duplicate test file?
tests/lib/rules/meta-safisfies-type.test.ts
tests/lib/rules/meta-satisfies-type.test.ts

NotWoods · 2023-08-08T16:47:07Z

Yeah, I think that should be added as a separate rule. I'll look into fixing the duplicate file.

yannbf · 2023-08-15T18:17:39Z

Hey there, I'll be checking this with @kasperpeulen this week, thanks for your patience 🙏

NotWoods · 2024-02-02T19:20:04Z

Hi folks, are there any changes I need to make here?

opii972 · 2024-12-02T11:19:59Z

Definitely a game changer with TypeScript because a story that implements a component with empty props allows wrong args.

Example:

For this component:

const Comp: React.FC<Record<string, never>> = () => <>Lorem ipsum</>

export default Comp

Note: React.FC<Record<string, never>> instead React.FC<{}> (or simply React.FC) because {} in Typescript actually means "any non-nullish value"

Without this rule (valid code):

export default {
  title: 'Comp',
  args: { primary: true },
  component: Comp,
}

Or

export default {
  title: 'Comp',
  args: { primary: true },
  component: Comp,
} satisfies Meta

With this rule (invalid code):

export default {
  title: 'Comp',
  args: { primary: true }, // <-- throws an error
  component: Comp,
} satisfies Meta<typeof Comp>

Sidnioulz

Great work @NotWoods! 🤩 Looks complete to me.

I've created a rebased branch on the storybook repo which removes category-related changes that were no longer necessary, adjusts your code to account for other changes, and makes opinionated minor meta/docs edits.

Feel free to use what's on it to update your code, or to merge it into your branch. Do let us know too if you're ok with closing this PR and merging the other branch instead (I've preserved the author information of course).

Sidnioulz · 2025-02-11T14:15:23Z

README.md

@@ -114,6 +114,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></ul>                                    |
 | [`storybook/default-exports`](./docs/rules/default-exports.md)                             | Story files should have a default export                                                                                      | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
 | [`storybook/hierarchy-separator`](./docs/rules/hierarchy-separator.md)                     | Deprecated hierarchy separator in title property                                                                              | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
+| [`storybook/meta-satisfies-type`](./docs/rules/meta-satisfies-type.md)                     | Meta should use `satisfies Meta`                                                                                              | 🔧  | (none)                                                   |


Sidnioulz · 2025-02-11T14:15:40Z

docs/rules/meta-satisfies-type.md

+
+<!-- RULE-CATEGORIES:START -->
+
+**Included in these configurations**: (none)


Align with meta-inline-properties

Suggested change

**Included in these configurations**: (none)

**Included in these configurations**: N/A

Sidnioulz · 2025-02-11T14:17:09Z

docs/rules/meta-satisfies-type.md

+
+Examples of **incorrect** code for this rule:
+
+```js


Rules should probably be separated for legibility, and use ts rather than js highlighting.

Sidnioulz · 2025-02-11T14:21:01Z

lib/rules/meta-satisfies-type.ts

+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Meta should use `satisfies Meta`',
+      categories: [],
+      recommended: 'error',
+    },
+    messages: {
+      metaShouldSatisfyType: 'Meta should be followed by `satisfies Meta`',
+    },
+    fixable: 'code',
+    schema: [],
+  },


I've had to make adjustments while rebasing:

there's now a meta.docs.excludeFromConfig key for uncategorised

severity has been added to report a rule's severity

I've also made opinionated edits on my own branch while rebasing:

Switched type from suggestion to problem as another user pointed out a case where using the code pattern promoted by this rule helped TS report invalid args content

Switched message to 'CSF Meta should use satisfies for type safety' so it explains that satisfies improves type safety for users not familiar with it

Sidnioulz · 2025-02-11T14:24:37Z

tools/update-rules-list.ts

+      rule.meta.docs.categories && rule.meta.docs.categories.length > 0
        ? `<ul>${rule.meta.docs.categories.map((c) => `<li>${c}</li>`).join('')}</ul>`
-        : '',
+        : '(none)',


This part is no longer needed now as there is a mechanism to ignore rules without categories, and I've been able to remove it entirely on my rebased branch.

Sidnioulz · 2025-02-11T14:24:55Z

tools/utils/categories.ts


  for (const rule of rules) {
    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)) {
      categoriesConfig[categoryId].rules?.push(rule)
    }
  }


This part is no longer needed now as there is a mechanism to ignore rules without categories, and I've been able to remove it entirely on my rebased branch.

NotWoods added 2 commits April 17, 2023 16:08

Generate files

4138d2c

Add meta-satisfies-type rule

b3ab0db

yannbf added the feature request label Apr 18, 2023

Allow 0 categories

626b98d

hjoelh mentioned this pull request Aug 8, 2023

Rules for forced typing Meta and Stories #137

Open

kasperpeulen assigned kasperpeulen and yannbf Aug 15, 2023

NotWoods requested review from yannbf and kasperpeulen as code owners August 16, 2023 04:03

Remove typo test file

3701640

NotWoods force-pushed the meta-satisfies-type branch from 74f90e8 to 3701640 Compare August 16, 2023 04:05

Sidnioulz self-assigned this Feb 11, 2025

Sidnioulz self-requested a review February 11, 2025 11:41

Sidnioulz approved these changes Feb 11, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add meta-satisfies-type rule #124

Add meta-satisfies-type rule #124

NotWoods commented Apr 17, 2023 •

edited

Loading

yannbf commented Apr 18, 2023

NotWoods commented Apr 19, 2023

kasperpeulen commented Apr 20, 2023

NotWoods commented May 31, 2023

kasperpeulen commented Jun 2, 2023

hjoelh commented Aug 8, 2023

NotWoods commented Aug 8, 2023

yannbf commented Aug 15, 2023

NotWoods commented Feb 2, 2024

opii972 commented Dec 2, 2024

Sidnioulz left a comment

Sidnioulz Feb 11, 2025

Sidnioulz Feb 11, 2025

Sidnioulz Feb 11, 2025

Sidnioulz Feb 11, 2025 •

edited

Loading

Sidnioulz Feb 11, 2025

Sidnioulz Feb 11, 2025

	\| [`storybook/meta-satisfies-type`](./docs/rules/meta-satisfies-type.md) \| Meta should use `satisfies Meta` \| 🔧 \| (none) \|
	\| [`storybook/meta-satisfies-type`](./docs/rules/meta-satisfies-type.md) \| Meta should use `satisfies Meta` \| 🔧 \| N/A \|


		<!-- RULE-CATEGORIES:START -->

		Included in these configurations: (none)

	Included in these configurations: (none)
	Included in these configurations: N/A

Add meta-satisfies-type rule #124

Are you sure you want to change the base?

Add meta-satisfies-type rule #124

Conversation

NotWoods commented Apr 17, 2023 • edited Loading

What Changed

Checklist

Change Type

yannbf commented Apr 18, 2023

NotWoods commented Apr 19, 2023

kasperpeulen commented Apr 20, 2023

NotWoods commented May 31, 2023

kasperpeulen commented Jun 2, 2023

hjoelh commented Aug 8, 2023

NotWoods commented Aug 8, 2023

yannbf commented Aug 15, 2023

NotWoods commented Feb 2, 2024

opii972 commented Dec 2, 2024

Sidnioulz left a comment

Choose a reason for hiding this comment

Sidnioulz Feb 11, 2025

Choose a reason for hiding this comment

Sidnioulz Feb 11, 2025

Choose a reason for hiding this comment

Sidnioulz Feb 11, 2025

Choose a reason for hiding this comment

Sidnioulz Feb 11, 2025 • edited Loading

Choose a reason for hiding this comment

Sidnioulz Feb 11, 2025

Choose a reason for hiding this comment

Sidnioulz Feb 11, 2025

Choose a reason for hiding this comment

NotWoods commented Apr 17, 2023 •

edited

Loading

Sidnioulz Feb 11, 2025 •

edited

Loading