Storybook — React Native, React, Angular, Vue

Hello Experts, We all use Reusable Components in our applications OR we develop custom components that are frequently used at multiple places and keep that logic separate, so whenever we change on business logic it will be reflected everywhere where it is used. What happens if I say show me the component you developed, you need to import/implement it in one component and run the application, correct? Is there any way I can see all Reusable Components in one place, I can play with it, change various props and validate it? Yes it’s there.

What is a Storybook?

Storybook allows developers to write Story (Custom Component), Run Story, Play with various properties, Validate it without running actual application and without importing in any component. Storybook makes developer life more simple, developers can play with all Story (Custom Component) from one place — that’s called Storybook. Storybook integrates with most popular JavaScript UI frameworks like React, React Native, Angular, Vue and supports a server-rendered component framework such as Ruby on Rails.

What is a Story?

Story captures the rendered state of a UI Component. Developers can write multiple stories per component. Stories are written in COmponent Story Format (CSF) an ES6 modules based standard — for writing components.

Storybook Features —

Isolated component development

Deliver robust UIs

Addons to power up your workflow

Consistent user experience

Unit test components

Share & Reuse component

Installations —

Execute this command from within the root of your react native app:

npx -p @storybook/cli sb init — type react_native

You’ll be prompted asking if you want to install @storybook/react-native-server, you can safely choose not to install this now since you can add it later and it’s not required.

Run Storybook —

# Starts Storybook in development mode
npm run storybook

Writing Stories —

Create Task Component

// components/Task.js
import * as React from 'react';
import { TextInput, SafeAreaView } from 'react-native';
import { styles } from '../constants/globalStyles';

export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
  return (
    <SafeAreaView style={styles.ListItem}>
      <TextInput value={title} editable={false} />
    </SafeAreaView>
  );
}

Create TaskStories

// components/Task.stories.js
import * as React from 'react';
import { View } from 'react-native';
import { styles } from '../constants/globalStyles';
import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import Task from './Task';
export const task = {
  id: '1',
  title: 'Test Task',
  state: 'TASK_INBOX',
  updatedAt: new Date(2018, 0, 1, 9, 0),
};

export const actions = {
  onPinTask: action('onPinTask'),
  onArchiveTask: action('onArchiveTask'),
};
storiesOf('Task', module)
  .addDecorator(story => <View style={styles.TaskBox}>{story()}</View>)
  .add('default', () => <Task task={task} {...actions} />)
  .add('pinned', () => <Task task={{ ...task, state: 'TASK_PINNED' }} {...actions} />)
  .add('archived', () => <Task task={{ ...task, state: 'TASK_ARCHIVED' }} {...actions} />);

Configuration

// storybook/index.js
import { getStorybookUI, configure } from '@storybook/react-native';

import './rn-addons';

// import stories
configure(() => {
  require('../components/Task.stories.js');
}, module);

const StorybookUIRoot = getStorybookUI({
  asyncStorage: null,
});

export default StorybookUIRoot;

Render All | Specific Storie

import { getStorybookUI, configure } from '@storybook/react-native';
import { name as appName } from './app.json';
import { AppRegistry } from 'react-native';

configure(() => {
  require('./storybook/stories/Button/Button.stories.js'); // render all stories require(‘./storybook/stories’) - which contain all your stories
}, module);

const StorybookUIRoot = getStorybookUI({});

AppRegistry.registerComponent(appName, () => StorybookUIRoot);

AddOns —

Knobs —
npm i — save @storybook/addon-ondevice-knobs
Allow developers to adjust components props in real time.

Actions —
npm i — save @storybook/addon-ondevice-actions
Developer can verify onPress calls with actions that will log information in the actions tab.

Notes —
npm i — save @storybook/addon-ondevice-notes
Allow developers to add some markdown to your stories to help document their usage.

Background —
npm i — save @storybook/addon-ondevice-backgrounds
Allows developer to change the background of storybook to compare the look of your component against different backgrounds.

Thanks for reading Article!