Storybook documentation: https://storybook.js.org/docs/guides/guide-react/
I played around with this today. A major issue I'm encountering is that a lot of our components require context and Firebase data to render (e.g. the Projects component). I can workaround the issue by adding a storybook prop to the component and doing stuff like this:
export default function(props) {
if (props.storybook) {
const projects = [
{
description: 'This is a public project',
name: 'Example 1',
owner: '0',
type: 'Public',
id: '0'
},
{
description: 'This is a private project',
name: 'Example 2',
owner: '0',
type: 'Private',
id: '0'
}
];
return (
<div style={{ marginTop: '30px' }}>
<div>Group Collaboration</div>
<ProjectsTable projects={projects} />
</div>
);
}
Problem is, this will pollute our components with a lot of logic like IF props.storybook load dummy data, ELSE load data normally. Ideally I'd like to keep all Storybook logic inside the src/stories directory.
Storybook documentation: https://storybook.js.org/docs/guides/guide-react/
I played around with this today. A major issue I'm encountering is that a lot of our components require context and Firebase data to render (e.g. the Projects component). I can workaround the issue by adding a
storybookprop to the component and doing stuff like this:Problem is, this will pollute our components with a lot of logic like
IF props.storybook load dummy data, ELSE load data normally. Ideally I'd like to keep all Storybook logic inside the src/stories directory.