Create Storybook

[DanielJWagener]

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.

[abrie]

Does Storybook allow you to provide a context to the components? If that's the case, we can provide a dummy/mock context. The unit tests are doing just that –– using "fakebase" and "fakesession" instead of the real things.

Edit: See here App.test.js

[DanielJWagener]

I found this: storybookjs/storybook#76

I'm still not familiar with the syntax being used there but I'll learn it asap

EDIT: Hold on, I see what you're saying now with fakebase. I'll see if I can get that to work.

[DanielJWagener]

I made a little progress, but I think I'll have to come back to this after I learn more about Firebase and context.