Digital Transformation in HealthCare Solution

Tech Talk

Storybook

15 APR 2021

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.

ToDo Application Step By Step — React Js —

Thanks for reading Blog!

Want to receive Tech Articles!

Get tech aricles directly in your inbox! Share your email with us and receive tech articles as instant as we publish!

KPIENG

KPITENG

DIGITAL TRANSFORMATION

Want to talk about your project?

  • INDUSTRY
  • E-Commerce & Shopping
  • Healthcared & Fitness
  • Banking & Finance
  • Education
  • Logistics & Distribution
  • Social Networking
  • Real Estate
  • Food & Restaurant
  • On-Demand Services
  • Media
  • IT & Telecom
  • Productivity

Want to talk about your project?

© 2021 KPITENG, all rights reserved