Use storybook for components development

[mradenovic]

No description provided.

[daltonfury42]

There is an edge case here: If actionStatus and isLoading are undefined, it will spin for ever.

Is that a bug or a feature 😝 (I don't think so)

[mradenovic]

It is a feature if you want to use a spinner as before. Although, I was considering making at least one param required. And when I think about it, I have to add PropTypes to warn if params are not proper.

[daltonfury42]

Yes. If we are using as before in this context, we are not using it ideally.

[daltonfury42]

Also do we need storybook for internal/private Loading component? Can/Should we avoid exporting it?

[mradenovic]

Also do we need storybook for internal/private Loading component? Can/Should we avoid exporting it?

We need storybook for every component. One can work on a component without starting dev server.

The Loading component can be used on its own, as you can see in its stories.

import auth from 'auth';
import Loading from 'components/common/Loading/Loading';

const MyComponent = () => (
  <Loading isLoading={auth.isLoading}>
    <p>Some child component to display</p>
  </Loading>
);

export default MyComponent;

[daltonfury42]

Ok. Then I don't clearly understand the difference between Loading and LoadingStatus components. Can you add some docstrings for them?

[mradenovic]

LoadingStatus depends on actionStatus in redux store. To get the status it accepts the actionName as dependsOn string, pulls the status from the store, and displays the Loading component based on the result. When you want to display some queues that depend on qetUsrQueues async action, you can wrap <MyQueues /> in LoadingStatus. No matter where you dispatch from, the spinner will appear while fetching.

// This reads "loading status depends on getUserQueues async action (pending, fulfilled or rejected)"
<LoadingStatus dependsOn="getUserQueues">
  // Display this if status is "fulfilled"
  <MyQueues />
<LoadingStatus>

Maybe we should change names? dependsOn --> dependsOnAction?

Loading is a pure presentation component that can take actionStatus or isLoading properties and show spinner based on that.

Stories are also a good example of how components can be used.

[daltonfury42]

Got it.