Rewards-FE-Design-System

⚡️ Table of Contents

• Packages
• Rewards
• Storybook
• How to create a story
• How to test your component
• Pull Request Steps
• Build
• Deployment
• Contributors

📦 Relevant Packages

| Name | Description | | ----------------------------------------------------------------------------- | --------------------------------------- | | rollup | ES Module bundler | | storybook | Component Library builder | | jest | Unit testing library | | node-sass | Provides binding for Node.js to LibSass | | styled-components | Component Styling Library | | react | Frontend Framework for Web | | react-native | Frontend Framewrok for Mobile apps | | typescript | Static Typing Programming Language | | |

⭐️ Rewards

Currently at the company we have several projects that are built with React and React-Native frameworks. Each project has several components that sometimes they are duplicated from other projects. This is a bad practice because we are basically duplicating a lot of code through our projects. The solution to this is a component library.

📖 What is a component library?

A component library is a set of reusable components that can be used on multiple projects just by importing them. Our library offers the chance to standardize development, reduce code duplications, improve collaboration between teams, and drive scalability.

📚 Storybook

Storybook is a library for building component libraries for mobile and web. To create our component library we used storybook to achieve it.

🏃‍♂️ How to run the project

1. The first step is to clone the project using this command on your terminal

git clone [email protected]:ab-inbev-global-martech/Rewards-FE-Design-System.git ```

2. Then run yarn to install all the package dependencies of the project

yarn

3. After all the packages are installed run this command to start storybook

yarn run storybook

4. That's all! You should be able to see this screen:

🤯 Exploring Storybook

Left Sided Menu

This menu is used mainly to navigate through the different components that exist in the component library.

Canvas

The canvas is used to display the component with it's corresponding properties provided in the controls.

Docs

In the docs screen you can visualize the canvas itself, some tools, the properties of the component and the specific code you need to use to implement the component in your project.

Controls, Actions and Interactions

We have the controls where you can see the different properties that the components have, you can play with those properties and see how the component changes in the canvas. If you want to see any interaction or action within the component you can go to the other pages of the menu (Actions and Interactions).

Top Side Bar

On this top side bar you can change between the Canvas and the documentation of the component. Also, you have several tools such like a Zoom in and Zoom out buttons, a ruler, a grid and more...

🏰 How to create a story

What is a story?

A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support. A story is a function that describes how to render the component in question.

The first step is to create a story file such like this: (This example is for a button default component)

ButtonDefault.stories.tsx

1. First import the following elements:

import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { AtomButtonDefault } from 'native/atoms/Buttons/Default';

2. Then create an object that will contain the information about the story such as the title, component, argument types and parameters

export default {
  title: 'React Native/atoms/Button/Default', // The location of the b
  component: AtomButtonDefault, // The component that will be rendered
  argTypes: {},
  parameters: {
    controls: { expanded: true },
  },
} as ComponentMeta<typeof AtomButtonDefault>;

3. Then you create your component story and return the button component with the corresponding props/arguments

// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
// https://storybook.js.org/docs/react/workflows/unit-testing
export const Default: ComponentStory<typeof AtomButtonDefault> = (args) => (
  <AtomButtonDefault {...args} />
);

4. This object defines the default values that the button will have in the story.

Default.args = {
  disabled: false,
  onPress: action('Event Click'),
  styles: 'primary',
  text: 'Text',
  width: '144',
  customStyle: 'tertiary',
};

Complete code:

// stories/MyButton.stories.tsx
import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { AtomButtonDefault } from 'native/atoms/Buttons/Default';

export default {
  title: 'React Native/atoms/Button/Default',
  component: AtomButtonDefault,
  argTypes: {},
  parameters: {
    controls: { expanded: true },
  },
} as ComponentMeta<typeof AtomButtonDefault>;

// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
// https://storybook.js.org/docs/react/workflows/unit-testing
export const Default: ComponentStory<typeof AtomButtonDefault> = (args) => (
  <AtomButtonDefault {...args} />
);

Default.args = {
  disabled: false,
  onPress: action('Event Click'),
  styles: 'primary',
  text: 'Text',
  width: '144',
  customStyle: 'tertiary',
};

Now that we created the story, we need to create our component for that story so that we can play with it in our storybook interface.

ButtonDefault.tsx

import React, { FunctionComponent } from 'react';
import { theme } from 'data/dataMx';
import { GeneralStyledButton } from './styles';
import { IProps } from '../ButtonProps';

export const ButtonDefault: FunctionComponent<IProps> = ({
  disabled,
  onClick,
  styles,
  text,
  type,
  width = '144px',
  outline = 'auto',
  customStyle = 'tertiary',
}) => {
  return (
    <GeneralStyledButton
      disabled={disabled}
      onClick={onClick}
      styles={styles}
      width={width}
      outline={outline}
      theme={theme}
      type={type}
      color={customStyle}
      customStyle={customStyle}
    >
      {text && <h1>{text}</h1>}
    </GeneralStyledButton>
  );
};

Congrats! You created your first story 🥳

💥 How to test your component

For unit testing the components we use Jest and React testing library, those libraries are widely used for unit testing web and mobile components.

To test our Button component we need to create a .test.tsx file for that specific component.

index.test.tsx

import React from 'react';
import '@testing-library/jest-dom';
import { ButtonDefault } from './index';
import { render, fireEvent } from '@testing-library/react';

describe('[React] ButtonDefault', () => {
  test('Render button', () => {
    const body = { // Props
      disabled: false,
      styles: 'secondary',
      text: 'Accept',
      type: 'button',
      width: '144px',
      outline: 'auto',
    } as const;
    // We create our component
    let component = render(<ButtonDefault {...body} />);
    // We check if the component exists in the DOM.
    component.getByText(body.text);
  });
});

We use the describe() function to wrap our different unit tests, then we create our test using test() and write it depending on what we want to test.

But how do we run our test?

Mac OS

React

yarn run test:react

React Native

yarn run test:native

Windows

React

yarn run test:react-windows

React Native

yarn run test:native-windows

🔎 Pull Request

Pull request guidelines:

1. A pull request should contain just one component with its corresponding styles, test file, and story.
2. The title of the PR should be the name of the ticket that corresponds to the component being developed (ex. JESS-1320)
3. The description of the PR should contain a brief description of the component being developed.

🔨 Build

Finally, to build the component library so that it can be published to yarn or npm we run:

yarn build

Running this command will generate the dist and native folder that contains the builded content of the component library. To modify the configuration of the build, you can look into the file rollup.config.js

🐥 Deployment

[TO DO - Add steps for deployment]

💪 Contributors

[TO DO - List contributors]