chore: add custom consistent-storybook-title rule #38241
Conversation
WalkthroughThis pull request involves a comprehensive update to Storybook configuration titles across multiple design system components. The changes primarily focus on adding spaces between words in component titles, such as changing "NumberInput" to "Number Input" and "SearchInput" to "Search Input". Additionally, a new ESLint rule Changes
Suggested labels
Suggested reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
the
skip-changelog
KelvinOm
force-pushed
the
chore/consistent-storybook-title-rule
branch
from
7c4f7d2 to
c556bda
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/client/packages/eslint-plugin/src/consistent-storybook-title/rule.ts (2)
3-14: Ensure edge cases for consecutive acronyms are handled
Currently, the regex replacements assume a pattern like "IDEHeader". Consider verifying or adding a test for consecutive acronyms such as "APIHTTPConfig" to ensure desired spacing and casing.
53-53: Consider preserving original quote style
When applying auto-fixes, some teams prefer to maintain the original quoting style (single vs. double quotes). If this project has a consistent standard, that may be okay. Otherwise, you may want to detect and keep the user’s preferred quote style.app/client/packages/eslint-plugin/src/consistent-storybook-title/rule.test.ts (1)
32-45: Validate multiple acronyms or special character scenarios
The invalid test cases cover common Title Case mistakes; consider extending with tricky input (e.g.,"IDEDBConfig").
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
app/client/packages/design-system/ads/src/NumberInput/NumberInput.stories.tsx(1 hunks)app/client/packages/design-system/ads/src/SearchInput/SearchInput.stories.tsx(1 hunks)app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/Datepicker/stories/Datepicker.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/RadioGroup/chromatic/RadioGroup.chromatic.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/RadioGroup/stories/RadioGroup.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/TagGroup/stories/TagGroup.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/TextArea/stories/TextArea.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/TimeField/stories/TimeField.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/ToggleGroup/stories/ToggleGroup.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx(1 hunks)app/client/packages/design-system/widgets/src/testing/ColorGrid.stories.tsx(1 hunks)app/client/packages/eslint-plugin/src/consistent-storybook-title/rule.test.ts(1 hunks)app/client/packages/eslint-plugin/src/consistent-storybook-title/rule.ts(1 hunks)app/client/packages/eslint-plugin/src/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (16)
- app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx
- app/client/packages/design-system/widgets/src/testing/ColorGrid.stories.tsx
- app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx
- app/client/packages/design-system/widgets/src/components/ToggleGroup/stories/ToggleGroup.stories.tsx
- app/client/packages/design-system/widgets/src/components/Datepicker/stories/Datepicker.stories.tsx
- app/client/packages/design-system/widgets/src/components/TextArea/stories/TextArea.stories.tsx
- app/client/packages/design-system/widgets/src/components/TagGroup/stories/TagGroup.stories.tsx
- app/client/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx
- app/client/packages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx
- app/client/packages/design-system/ads/src/SearchInput/SearchInput.stories.tsx
- app/client/packages/design-system/widgets/src/components/RadioGroup/stories/RadioGroup.stories.tsx
- app/client/packages/design-system/widgets/src/components/TimeField/stories/TimeField.stories.tsx
- app/client/packages/design-system/ads/src/NumberInput/NumberInput.stories.tsx
- app/client/packages/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx
- app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
- app/client/packages/design-system/widgets/src/components/RadioGroup/chromatic/RadioGroup.chromatic.stories.tsx
🔇 Additional comments (3)
app/client/packages/eslint-plugin/src/consistent-storybook-title/rule.ts (1)
36-40: Confirm whether non-TSX files might need coverage
The rule exclusively applies to ".stories.tsx". If some teams author stories in other file types, consider expanding or clarifying the extension-based scope.
app/client/packages/eslint-plugin/src/index.ts (1)
3-3: Rule integrated successfully
Importing and adding the new "consistent-storybook-title" rule is straightforward, and referencing it as "@appsmith/consistent-storybook-title": "error" enforces a strong standard. Great job.
Also applies to: 9-9, 16-16
app/client/packages/eslint-plugin/src/consistent-storybook-title/rule.test.ts (1)
1-103: Comprehensive coverage
These tests provide solid coverage for valid and invalid scenarios, ensuring the rule can catch typical Title Case issues. Nicely done.
## Automation /ok-to-test tags="@tag.Sanity" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/12396717822> > Commit: c556bda > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12396717822&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Sanity` > Spec: > <hr>Wed, 18 Dec 2024 16:46:31 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Updated titles for various components in Storybook for improved readability (e.g., "NumberInput" to "Number Input"). - Introduced a new ESLint rule to enforce Title Case formatting for Storybook titles. - **Bug Fixes** - Enhanced error handling and validation for Storybook titles through the new ESLint rule. - **Documentation** - Added test cases for the new ESLint rule to validate title formats in Storybook configurations. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Automation
/ok-to-test tags="@tag.Sanity"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12396717822
Commit: c556bda
Cypress dashboard.
Tags:
@tag.SanitySpec:
Wed, 18 Dec 2024 16:46:31 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Bug Fixes
Documentation