FE UI

Getting Started

FE UI is a library we are using to develop and use atomic component like InputText and Button.

Proping and styling

We are using a Classify service of our own where all the incoming props and their values are treated the same way. Every component use this service to have common classes depending on their props and most of the components accept same props and values.

Hence we need to implement the classes extracted from the Classify service in order to give the components the same styling options.

For example: color="primary". This prop is taken into Classify service and the service returns us the zlo--primary class. Then we need to implement this class in every component so we can give thac class to that component.

Example: color="primary" to both InputText and Button. InputText will implement that class for coloring the borders and the text inside and the Button will implement that class for the background color and the hovering/active/focus colors.

And the same way for all the components and all the props.

NOTE: We might not want some classes to be implemented for some components - and that's perfectly acceptable - but then we won't be able to use them even having the prop/value/class being used in the component since it has no implementation.

Storybook

Yeah, that's it. Storybook is the place where we can use and test our atomic components.

Stories

Every component must be tested under its own Story. That said we need to create a new storiesOf() and add the component under it. For example storiesOf('Zeelo/Btn') creates a new entry Btn under Zeelo. Every component entry must be under Zeelo entry.

And then under Btn we can create as many entries as we desire using add() method, for instance add('Basic') and then we can use our component inside.

Knobs

Knobs is a Storybook plugin that allow us to change a component's props in a live way so we can test all the possibilities a component has.

Run

To run storybook we first need to install everything with npm i and then get the build. Once we have the build, run npm run storybook. If you want to develop and see the storybook updated at the same time, run npm start in a tab and the npm run storybook in a different tab. command. Oh, of course, go to http://localhost:6006.

Scripts

Start

• npm run start or npm start: Installs everything and launches webpack in dev mode.
• npm run start:fresh: Removes node_modules and public folder and then runs npm start. This is mainly used for when changing some dependencies.

Webpack

• npm run webpack:dev: Launches webpack in dev mode - watch and dev build. Use this one for dev mode when you don't need to install nor check dependencies.
• npm run webpack:prod: Launches webpack in prod mode - production build.

Build

• npm run build: Removes node_modules and public folder and then runs npm run webpack:prod for a fresh build production.

Tests

• npm test or npm run test: Runs Jest testing.