# Lavender VTKJS Component Library

React component library using:

- [Rollup](https://github.com/rollup/rollup)
- [Sass](https://sass-lang.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [Storybook](https://storybook.js.org/) to help you create and show off your components
- [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library) enabling testing of the components

[**Created using this excellent resource▸**](https://blog.harveydelaney.com/creating-your-own-react-component-library/)

## Development

### Testing

Minimal tests have been written for the components in this library.

```
npm run test
```

### Building

```
npm run build
```

### Storybook

To run a live-reload Storybook server on your local machine:

```
npm run storybook
```

To export your Storybook as static files:

```
npm run storybook:export
```

You can then serve the files under `storybook-static` using S3, GitHub pages, Express etc.

### Generating New Components

```
npm run generate YourComponentName
```

This will generate:

```
/src
  /components
    /YourComponentName
      YourComponentName.tsx
      YourComponentName.stories.tsx
      YourComponentName.test.tsx
      YourComponentName.types.ts
      YourComponentName.scss
```

The default templates for each file can be modified under `util/templates`.

Don't forget to add the component to your `index.ts` exports if you want the library to export the component!

### Installing Component Library Locally

This component library can be installed using [npm link](https://docs.npmjs.com/cli/v7/commands/npm-link).

If you are getting errors like [Invalid Hook Call Warning](https://es.reactjs.org/warnings/invalid-hook-call-warning.html) you may need to add the following to your webpack.config:

```
resolve: {
  alias: {
    "react/jsx-dev-runtime": "react/jsx-dev-runtime",
    "react/jsx-runtime": "react/jsx-runtime",
    "react": "react"
  }
}
```

Check ../solo-viewer/config-overrides.js for how we solved this problem in an (unejected) create-react-app.

## Publishing

### Hosting via NPM

First, make sure you have an NPM account and are [logged into NPM using the `npm login` command.](https://docs.npmjs.com/creating-a-new-npm-user-account)

Then update the `name` field in `package.json` to reflect your NPM package name in your private or public NPM registry. Then run:

```
npm publish
```

The `"prepublishOnly": "npm run build"` script in `package.json` will execute before publish occurs, ensuring the `build/` directory and the compiled component library exist.

## Usage

Usage of the component (after the library installed as a dependency into another project) will be:

```TSX
import React from "react";
import { TestComponent } from "lavender-vtkjs";

const App = () => (
  <div className="app-container">
    <h1>Hello I'm consuming the component library</h1>
    <TestComponent theme="primary" />
  </div>
);

export default App;
```

### Using Component Library SASS Variables

I've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the `rollup-plugin-copy` NPM package and used it to copy the [`src/typography.scss`](src/typography.scss) and [`variables.scss`](src/variables.scss) into the `build` directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.

For example, let's say you installed `lavender-vtkjs` into your project. To use the exported variables/mixins, in a SASS file you would do the following:

```Sass
@import '~lavender-vtkjs/build/typography';

.example-container {
    @include heading;

    color: $vtkjs-white;
}
```