React Storybook

Earlier this year, we started developing a new app to help our runners deliver groceries to our customers. We chose React Native over a native app or a PWA and are really happy with it. So far, we really like what we are seeing. Development speed is fast and the tooling is awesome. The “learn once, write anywhere”-promise is really fulfilled and when we ran our project for the first time on iOS after a few weeks of development, we were excited to see how well it worked and what it looked like.

Read our blog post to learn more about how we use React Native, TypeScript, Redux, RxJS, CodePush, styled-components, React Storybook, Jest, and Prettier to develop this app, as well as our thought of what else we will do with it at Picnic.

We used Zeplin and React Storybook together to speed up development and collaboration across the company when building Stack Decisions. #StackDecisionsLaunch

We used Zeplin to handoff designs and style guides from the design team to engineering. Because Zeplin automatically generates accurate specs, assets and code snippets from designs we were able to stay on the same page as a team and save time in development. Additionally the friction in communication between the design and development teams is greatly reduced as Zeplin will notify us when designs are updated.

We used React Storybook in a similar fashion to create a library of shared components. It allows us to organize our components into a library, view the different states of each component, and interactively develop and test components. Because React Storybook runs outside of our main application it allows us to develop UI components in isolation, which can improve component reuse, testability, and development speed. We were able to build quickly without having to worry about application-specific dependencies.

We use React Storybook for documenting our components in library format. It's great for interacting with a component in its isolated state. Creating the component in Storybook first before adding it to our feature set helps me think of it as a decoupled and standalone entity. We have three sections in our Storybook:

• Features: for feature-specific components such as Feed
• Library: for shared components like buttons, popups, etc
• Style: for constants in typography, colors, etc

I find these Storybook add-ons useful:

• Knobs: Change props on the component to see how it responds
• Action Logger: See events being fired as you trigger them
• Notes: Document your component in more detail

@{#StackDecisionsLaunch}|topic:null|

https://auth0.com/blog/our-engineering-experience-with-react-and-storybook/

This is Auth0's overview of how they use React Storybook and React to create modular and reusable components that can be shared across projects by building a component library. A very similar approach to how we do it at StackShare!

Our front-end team decided to use React Storybook for our primary React development environment. It allows us to write components in isolation without the need to fire up our Rails stack. When writing components in isolation; you can focus on styling, behaviour and prop design. It forces you to think about how your component is going to be used by others. React Storybook uses webpack and hot module reloading under the hood. This allows us to write components very quickly since it hot reloads in the browser as you code!

The knobs add-on is great for testing different edge cases for the component props. There is even an add-on that will auto-render and snapshot your components with every prop permutation allows by your defined knobs. These snapshots can then be part of your CI testing.

We have a step in our build process that publishes a static React Storybook site on our production server. This allows our entire team to interactively test components before they are integrated into larger features. Once we are happy with our components in isolation, we integrate them into connected feature components which are wired up to Apollo and GraphQL to provide the data and state.

There are heaps of React Storybook add-ons to checkout. If you aren't using it, you should be.