@andrew-razumovsky/wa-shared-components v1.0.19
WA SHARED COMPONENTS
This repo contains shared components for WAW and CIS projects.
Installation
Access the project directory in the terminal and run:
```bash
npm install
```
Components
All components must be created under the 'src/components/' directory.
Make sure to use a '.pcss' file for styles.
Once created, please import the new component into 'src/index.js' file. Otherwise the new components will not be bundled into the next build.
Storybook
Components can be designed and styled using Storybook!
To do so, please follow the steps:
- Create a new file under the component directory named yourComponent.stories.js
This new file should follow this structure:
import React from "react"; import { storiesOf } from "@storybook/react"; import Button from "./"; storiesOf("Buttons", module).add("Download Button", () => { const message = "Download"; const component = <Button type="download">{message}</Button>; return component; });
Run:
npm run start # will run: start-storybook -s ./src
Storybook re-renders automatically everytime there is a change in the component.
Building
To see effective the changes you have made to the component library, please follow the steps:
Access the project directory in the terminal and run:
npm run build
Check the /lib folder has been updated as well and the version of the project in package.json.
- Commit your changes.
Run:
npm run deploy
Component Library Target Project
Please access the target project directory in the terminal and run:
npm install @automotivetech/wa-shared-components
Now, we have to import the shared component library main design file (main.css) into the main app.js file (For WAW that page happened to be pages/_app.js):
import '@automotivetech/wa-shared-components/lib/main.css';
Now, you can import the desired component into your work area:
import { Button } from '@automotivetech/wa-shared-components';
<Button type="download">Download</Button>