# UI Components ⎮ Coconut Software

React components for faster and easier web development.

[![npm package](https://img.shields.io/npm/v/@coconut-software/ui/latest.svg)](https://www.npmjs.com/package/@coconut-software/ui)
[![npm downloads](https://img.shields.io/npm/dm/@coconut-software/core.svg)](https://www.npmjs.com/package/@coconut-software/core)
![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)

## Upgrading

Please see [UPGRADE](UPGRADE.md) for details.

## Releasing

Please see [RELEASE](RELEASE.md) for details.

## Setup

Run the following commands to get up and running with this project.

```
yarn install
```

```
yarn run build
```

We use [StorybookJS](https://storybook.js.org/) for developing our UI components in isolation. In order to get Storybook running, run the following command:

```
yarn run storybook
```

## Recommended IDE Setup

When developing any TypeScript project within Coconut Software, the recommended approach is to [install VSCode](https://code.visualstudio.com/download) and install the recommended plugins. This project might recommend extra plugins specifically for it's use case.

### Recommended Plugins

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Headwind](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)
- [JavaScript and TypeScript Nightly](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next)
- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [TypeScript Hero](https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero)

## Creating a static export

```
yarn install
```

```
yarn run build
```

```
yarn run storybook:export
```

This will create a `storybook-static` folder that you can open up directly on your own device or zip up to share with others.