Migration js to ts #846
Migration js to ts #846
Conversation
WalkthroughThis pull request focuses on enhancing type safety across several story files for UI components. The changes involve adding explicit type annotations to function parameters in story files for Modal, Progress, and Quote components. Specifically, the modifications include updating import statements and defining type annotations for Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (2)
src/components/ui/Quote/stories/Quote.stories.tsx (1)
Line range hint
8-15: Use proper Storybook types for better type safety.The story configuration should use proper Storybook types instead of
any. Since this is using CSF 3.0 format, we should use theMetaandStoryObjtypes.+import type { Meta, StoryObj } from '@storybook/react'; -export default { +const meta: Meta<typeof Quote> = { title: 'Components/Quote', component: Quote, - render: (args:any) => <SandboxEditor> + render: (args) => <SandboxEditor> <div className='text-gray-950'> <Text className='text-gray-950'> <Quote> {`I'm not a monkey I will not dance even if the beat's funky`}</Quote> - Mike Shinoda </Text> </div> </SandboxEditor> }; +export default meta; +type Story = StoryObj<typeof Quote>;src/components/ui/Progress/stories/Progress.stories.tsx (1)
Line range hint
8-25: Use proper Storybook types and remove console.log.Several improvements needed:
- Use proper Storybook types instead of
React.JSX.IntrinsicAttributes- Remove the console.log statement
+import type { Meta, StoryObj } from '@storybook/react'; -export default { +const meta: Meta<typeof Progress> = { title: 'Components/Progress', component: Progress, render: (args) => { const [value, setValue] = useState(10); - console.log(value); return (<SandboxEditor> <div className='my-10 space-y-4'> <Progress value={value} maxValue={100} minValue={0} {...args}/> <Button {...args} onClick={() => { setValue(Math.floor(Math.random() * 100)); }}>Animate!</Button> </div> </SandboxEditor>); } }; +export default meta; +type Story = StoryObj<typeof Progress>;
🧹 Nitpick comments (1)
src/components/ui/Progress/stories/Progress.stories.tsx (1)
1-1: Consider a more structured TypeScript migration approach.I notice a pattern of using
anyor overly generic types across the story files. For a more effective TypeScript migration:
- Use Storybook's built-in types (
Meta,StoryObj) consistently across all story files- Avoid using
anyor overly generic types likeReact.JSX.IntrinsicAttributes- Consider adding a TypeScript configuration file (
tsconfig.json) if not already present- Add ESLint rules to prevent usage of
any(e.g.,@typescript-eslint/no-explicit-any)This will help maintain better type safety and consistency across the codebase.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/ui/Modal/stories/Modal.stories.tsx(1 hunks)src/components/ui/Progress/stories/Progress.stories.tsx(2 hunks)src/components/ui/Quote/stories/Quote.stories.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
| }; | ||
|
|
||
| const Template = (args) => { | ||
| const Template = (args: any) => { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use proper Storybook types instead of any.
Using any defeats the purpose of TypeScript migration. Instead, use Storybook's built-in types for better type safety.
-const Template = (args: any) => {
+import type { ComponentStory } from '@storybook/react';
+const Template: ComponentStory<typeof Modal> = (args) => {Committable suggestion skipped: line range outside the PR's diff.
kotAPI
added
the
automerge
2 participants
Summary by CodeRabbit