Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve typing on generated storybook components #6226

Merged
merged 17 commits into from
Aug 26, 2022
Merged

Improve typing on generated storybook components #6226

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
ec3bca6
Add type assertion to generated story
will-ks Aug 17, 2022
fcfacbb
Add component property to generated story metadata
will-ks Aug 17, 2022
e0cf772
Add type assetions and set component property for cell, layout and pa…
will-ks Aug 18, 2022
6a0e9ef
Use ComponentStory type instead of Story
will-ks Aug 23, 2022
3aa9c44
Regenerate stories in fixture
dac09 Aug 23, 2022
11230ce
Merge branch 'main' into feat/story-types
jtoar Aug 25, 2022
1718499
fix: update snapshots
jtoar Aug 25, 2022
a138f50
handle args cases in templates
jtoar Aug 25, 2022
6683c56
Update packages/cli/src/commands/generate/component/component.js
jtoar Aug 26, 2022
73cd580
Merge branch 'main' into feat/story-types
jtoar Aug 26, 2022
39e47c7
Merge branch 'main' into feat/story-types
jtoar Aug 26, 2022
dfd2e56
Merge branch 'main' into feat/story-types
jtoar Aug 26, 2022
544718c
try smoke test fix
jtoar Aug 26, 2022
82ec512
remove args from replace target str
jtoar Aug 26, 2022
003886c
Revert "try smoke test fix"
jtoar Aug 26, 2022
01cdd4c
Merge branch 'main' into feat/story-types
jtoar Aug 26, 2022
6aa45c3
Merge branch 'main' into feat/story-types
Tobbe Aug 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions __fixtures__/test-project/web/src/components/Author/Author.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import type { ComponentStory } from '@storybook/react'

import Author from './Author'

const author = {
email: '[email protected]',
fullName: 'Story User',
}

export const generated = (args) => {
export const generated: ComponentStory<typeof Author> = (args) => {
return <Author {...args} author={author} />
}

export default { title: 'Components/Author' }
export default { title: 'Components/Author', component: Author }
18 changes: 10 additions & 8 deletions __fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import type { ComponentStory } from '@storybook/react'

import { Loading, Empty, Failure, Success } from './AuthorCell'
import { standard } from './AuthorCell.mock'

export const loading = (args) => {
return Loading ? <Loading {...args} /> : null
export const loading: ComponentStory<typeof Loading> = (args) => {
return Loading ? <Loading {...args} /> : <></>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a stylistic preference, but I'd probably do this:

Suggested change
return Loading ? <Loading {...args} /> : <></>
return <Loading {...args} /> || <></>

Copy link
Contributor

@jtoar jtoar Aug 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at this again, do we actually need to handle this case? (Where Loading isn't exported by the Cell right?) If Loading isn't defined, isn't TS going to complain when we import it further up?

import { Loading, Empty, Failure, Success } from './PostCell'

It looks like here we'll get something like Module '"./PostCell"' has no exported member 'Loading'.ts(2305).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would be even better! Just make sure it works the same with strict mode on/off
And JS doesn't care, right? So for the JS template we'd still have to do something like this, yeah?

}

export const empty = (args) => {
return Empty ? <Empty {...args} /> : null
export const empty: ComponentStory<typeof Empty> = (args) => {
return Empty ? <Empty {...args} /> : <></>
}

export const failure = (args) => {
return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
export const failure: ComponentStory<typeof Failure> = (args) => {
return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
}

export const success = (args) => {
return Success ? <Success {...standard()} {...args} /> : null
export const success: ComponentStory<typeof Success> = (args) => {
return Success ? <Success {...standard()} {...args} /> : <></>
}

export default { title: 'Cells/AuthorCell' }
6 changes: 4 additions & 2 deletions __fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { ComponentStory } from '@storybook/react'

import BlogPost from './BlogPost'

export const generated = (args) => {
export const generated: ComponentStory<typeof BlogPost> = (args) => {
return <BlogPost {...args} />
}

export default { title: 'Components/BlogPost' }
export default { title: 'Components/BlogPost', component: BlogPost }
18 changes: 10 additions & 8 deletions __fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import type { ComponentStory } from '@storybook/react'

import { Loading, Empty, Failure, Success } from './BlogPostCell'
import { standard } from './BlogPostCell.mock'

export const loading = (args) => {
return Loading ? <Loading {...args} /> : null
export const loading: ComponentStory<typeof Loading> = (args) => {
return Loading ? <Loading {...args} /> : <></>
}

export const empty = (args) => {
return Empty ? <Empty {...args} /> : null
export const empty: ComponentStory<typeof Empty> = (args) => {
return Empty ? <Empty {...args} /> : <></>
}

export const failure = (args) => {
return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
export const failure: ComponentStory<typeof Failure> = (args) => {
return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
}

export const success = (args) => {
return Success ? <Success {...standard()} {...args} /> : null
export const success: ComponentStory<typeof Success> = (args) => {
return Success ? <Success {...standard()} {...args} /> : <></>
}

export default { title: 'Cells/BlogPostCell' }
18 changes: 10 additions & 8 deletions __fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import type { ComponentStory } from '@storybook/react'

import { Loading, Empty, Failure, Success } from './BlogPostsCell'
import { standard } from './BlogPostsCell.mock'

export const loading = (args) => {
return Loading ? <Loading {...args} /> : null
export const loading: ComponentStory<typeof Loading> = (args) => {
return Loading ? <Loading {...args} /> : <></>
}

export const empty = (args) => {
return Empty ? <Empty {...args} /> : null
export const empty: ComponentStory<typeof Empty> = (args) => {
return Empty ? <Empty {...args} /> : <></>
}

export const failure = (args) => {
return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
export const failure: ComponentStory<typeof Failure> = (args) => {
return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
}

export const success = (args) => {
return Success ? <Success {...standard()} {...args} /> : null
export const success: ComponentStory<typeof Success> = (args) => {
return Success ? <Success {...standard()} {...args} /> : <></>
}

export default { title: 'Cells/BlogPostsCell' }
18 changes: 10 additions & 8 deletions ..._/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import type { ComponentStory } from '@storybook/react'

import { Loading, Empty, Failure, Success } from './WaterfallBlogPostCell'
import { standard } from './WaterfallBlogPostCell.mock'

export const loading = (args) => {
return Loading ? <Loading {...args} /> : null
export const loading: ComponentStory<typeof Loading> = (args) => {
return Loading ? <Loading {...args} /> : <></>
}

export const empty = (args) => {
return Empty ? <Empty {...args} /> : null
export const empty: ComponentStory<typeof Empty> = (args) => {
return Empty ? <Empty {...args} /> : <></>
}

export const failure = (args) => {
return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
export const failure: ComponentStory<typeof Failure> = (args) => {
return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
}

export const success = (args) => {
return Success ? <Success {...standard()} {...args} /> : null
export const success: ComponentStory<typeof Success> = (args) => {
return Success ? <Success {...standard()} {...args} /> : <></>
}

export default { title: 'Cells/WaterfallBlogPostCell' }
6 changes: 4 additions & 2 deletions __fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { ComponentStory } from '@storybook/react'

import BlogLayout from './BlogLayout'

export const generated = (args) => {
export const generated: ComponentStory<typeof BlogLayout> = (args) => {
return <BlogLayout {...args} />
}

export default { title: 'Layouts/BlogLayout' }
export default { title: 'Layouts/BlogLayout', component: BlogLayout }
6 changes: 4 additions & 2 deletions __fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { ComponentStory } from '@storybook/react'

import AboutPage from './AboutPage'

export const generated = (args) => {
export const generated: ComponentStory<typeof AboutPage> = (args) => {
return <AboutPage {...args} />
}

export default { title: 'Pages/AboutPage' }
export default { title: 'Pages/AboutPage', component: AboutPage }
6 changes: 4 additions & 2 deletions __fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { ComponentStory } from '@storybook/react'

import BlogPostPage from './BlogPostPage'

export const generated = (args) => {
export const generated: ComponentStory<typeof BlogPostPage> = (args) => {
return <BlogPostPage id={42} {...args} />
}

export default { title: 'Pages/BlogPostPage' }
export default { title: 'Pages/BlogPostPage', component: BlogPostPage }
6 changes: 4 additions & 2 deletions __fixtures__/test-project/web/src/pages/ContactPage/ContactPage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { ComponentStory } from '@storybook/react'

import ContactPage from './ContactPage'

export const generated = (args) => {
export const generated: ComponentStory<typeof ContactPage> = (args) => {
return <ContactPage {...args} />
}

export default { title: 'Pages/ContactPage' }
export default { title: 'Pages/ContactPage', component: ContactPage }
6 changes: 4 additions & 2 deletions __fixtures__/test-project/web/src/pages/HomePage/HomePage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { ComponentStory } from '@storybook/react'

import HomePage from './HomePage'

export const generated = (args) => {
export const generated: ComponentStory<typeof HomePage> = (args) => {
return <HomePage {...args} />
}

export default { title: 'Pages/HomePage' }
export default { title: 'Pages/HomePage', component: HomePage }
6 changes: 4 additions & 2 deletions __fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { ComponentStory } from '@storybook/react'

import ProfilePage from './ProfilePage'

export const generated = (args) => {
export const generated: ComponentStory<typeof ProfilePage> = (args) => {
return <ProfilePage {...args} />
}

export default { title: 'Pages/ProfilePage' }
export default { title: 'Pages/ProfilePage', component: ProfilePage }
6 changes: 4 additions & 2 deletions __fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { ComponentStory } from '@storybook/react'

import WaterfallPage from './WaterfallPage'

export const generated = (args) => {
export const generated: ComponentStory<typeof WaterfallPage> = (args) => {
return <WaterfallPage id={42} {...args} />
}

export default { title: 'Pages/WaterfallPage' }
export default { title: 'Pages/WaterfallPage', component: WaterfallPage }
Loading