rewards-test3
v0.1.489
Published
[![github release version](https://img.shields.io/github/v/release/nhn/tui.editor.svg?include_prereleases)](https://github.com/nhn/tui.editor/releases/latest) [![npm version](https://img.shields.io/npm/v/@toast-ui/editor.svg)](https://www.npmjs.com/packag
Downloads
1,967
Readme
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
- 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 ```
- Then run yarn to install all the package dependencies of the project
yarn
- After all the packages are installed run this command to start storybook
yarn run storybook
- 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
- 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';
- 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>;
- 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} />
);
- 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:
- A pull request should contain just one component with its corresponding styles, test file, and story.
- The title of the PR should be the name of the ticket that corresponds to the component being developed (ex. JESS-1320)
- 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]