README

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>

Usage no npm install needed!