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:
