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:

1. Create a new file under the component directory named yourComponent.stories.js

2. 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;
    });

3. 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:

1. Access the project directory in the terminal and run:

    npm run build

2. Check the /lib folder has been updated as well and the version of the project in package.json.

3. Commit your changes.

4. 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>