HWK Library components

This documents will guide you to develop new components for Hawcode Library.

Architecture

The folder structure

• lib/components

  Here will come the differents components (atoms, organisms, molecules) Every component will has a definition of component and a definition of Story for Storybook

• lib/styles

  Contains files with differents Themes: size, color, etc

Getting started

HWK Library makes use of the latest tools to improve your workflow, and enables you to create future ready applications:

• "react": "^16.2.0",
• "react-dom": "^16.2.0",
• "styled-components": "^2.4.0",
• "storybook/react": "^3.3.9",
• "eslint": "^4.15.0", As you can see, we use Eslint to write a clean and formatted code, we extent the Airbnb rules

Create a component

We have to create two files (like min) inside the lib/components folder, once with the component definition and other with the story definition. Once we made this component, we will export inside the lib/index.js file to be available from outside.

Scripts' package.json

• npm run build:watch should be always running to see the changes inmediately
• npm run lint:watch should be always running to see errors detected by LINT
• npm link this script is for create a symbol link of our components from outside. This should be made only the first time we clone this repository
• npm run storybook we will create a storybook to be able to see the library in action

Storybook

You will be able to see your components, and the code to use along with the number of properties allowed.

This is an example: