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.

$3

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.

$3

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

```
git clone git@github.com: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.

!Screen Shot 2022-05-12 at 10 26 46

Canvas

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

!Screen Shot 2022-05-12 at 10 27 12

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.

!Screen Shot 2022-05-12 at 10 27 34

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).

!Screen Shot 2022-05-12 at 10 27 51

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...
!Screen Shot 2022-05-12 at 10 28 03

🏰 How to create a story

$3

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;
`

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 = (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;

// 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 = (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 = ({
disabled,
onClick,
styles,
text,
type,
width = '144px',
outline = 'auto',
customStyle = 'tertiary',
}) => {
return (
disabled={disabled}
onClick={onClick}
styles={styles}
width={width}
outline={outline}
theme={theme}
type={type}
color={customStyle}
customStyle={customStyle}
>
{text &&

{text}

}

);
};
`

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();
// 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.

$3

Mac OS

$3

`
yarn run test:react
`

$3

`
yarn run test:native
`

Windows

$3

`
yarn run test:react-windows
`

$3

`
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]