npm package: @sparkol/videoscribe-react-ui
Description: ## Installation
Latest version: 1.0.0

# VideoScribe React UI Components

## Installation

```bash
npm install @sparkol/videoscribe-react-ui
```

## Usage

### Styles and Static Assets

Static Assets such as fonts should be kept as part of the VideoScribe website and be made available on the `/assets` route. This will then allow each application to include the styles needed from the main environment domain.

```html
<link rel="stylesheet" href="https://videoscribe.co/assets/fonts.css" />
```

Styles for the UI library can then be imported into your project via the NPM package.

#### Javascript using a bundler

```js
import "@sparkol/videoscribe-react-ui/dist/style.css";
```

#### HTML using a bundler

```html
<link rel="stylesheet" href="@sparkol/videoscribe-react-ui/dist/style.css" />
```

### Components

Import the UI components from the main package like so:

```js
import { Button } from "@sparkol/videoscribe-react-ui";

const Example = () => {
  return <Button variant="outline">Hello, world!</Button>;
};
```

#### Material UI Components

To avoid having to install Material UI on every application that consumes this UI library any components that have a dependency on Material UI have been exported from a sub-path - to use these components import them from `@sparkol/videoscribe-react-ui/material-ui` like so:

```js
import { Select } from "@sparkol/videoscribe-react-ui/material-ui";

const Example = () => {
  return <Select options={
    [
      {label: 'Option 1', value: '1'},
      {label: 'Option 2', value: '2'}
    ]
  }>;
};
```

## Development

Install the dependencies for the project

```bash
npm install
```

Then to develop using Storybook run

```bash
npm run dev
```

This will start a Storybook application on `http://localhost:6006` which will allow you to preview the UI components as you develop.

Running Storybook will also give you documentation for each UI component

## Publishing

Publishing to NPM is managed via the Bitbucket pipelines and is manually triggered from the Bitbucket UI.

Pipelines will run for all branches that will check for unit tests to pass and builds to succeed.

Once you're happy that the build is correct then you can trigger the pipeline from the "Run pipeline" button on the top-right of the [Pipelines](https://bitbucket.org/sparkol/videoscribe-react-ui/pipelines/) page.

Select the branch you want to publish from and choose the `custom: deploy-to-npm` pipeline. Enter the package version number you want to deploy in the `NEW_PACKAGE_VERSION` box and press "Run".

> **Note on version numbers**: Automating versioning can be tricky to get right so for now versioning will be done manually.

> Running the `deploy-to-npm` pipeline on the `main` or `testing` branch will take the exact value entered into the `NEW_PACKAGE_VERSION` input - all other branches will be treated as `beta` releases and will be appended with `-beta.<<timestamp>>`.

> For the `testing` branch the release will be tagged as `prerelease` so it wont be picked up via a standard `npm install` of this package. I would recommend using some indicator in the version number that it is pre-release also, e.g. `1.0.2-rc.2`

> For the `main` branch the release will be tagged with `latest` so it will be picked up on normal `npm install` commands. Also, the pipeline will update the package.json with the version you supply, tag the commit and then push it back to the main branch.