npm package: @runtimeverificationinc/web-components
Description: ## Overview This is a shared components library built with `React` and `TypeScript`, optimized for use with modern web applications. The library is bundled using `Rollup` for bundle library and comes with built-in support for `Storybook` and `Tailwind CSS
Latest version: 1.30.2

# RV Web Components Library

## Overview
This is a shared components library built with `React` and `TypeScript`, optimized for use with modern web applications.
The library is bundled using `Rollup` for bundle library and comes with built-in support for `Storybook`
and `Tailwind CSS`.

## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Development](#development)
  - [Building the Library](#building-the-library)
  - [Running Storybook](#running-storybook)
- [Adding New Components](#adding-new-components)
  - [Developing New Components](#developing-new-components)
  - [Adding New Stories](#adding-new-stories)
- [Deploying New Version](#deploying-new-version)

## Installation

### Installing the Package

Depending on your package manager, run one of the following commands:

```bash
yarn add @runtimeverificationinc/web-components
```
or
```bash
npm install @runtimeverificationinc/web-components
```
---

## Usage

### Pre-requisites

Ensure tailwindcss and daisyui are installed according to their respective documentation.

### Tailwind Configuration

Update your `tailwind.config.js` with:

```js
content: [
  'node_modules/web-components/**/*.{js,ts,jsx,tsx,mdx}'
]
```

### Component Usage

Import and use components as shown below:

```jsx
import { Button } from '@runtimeverificationinc/web-components';

function App() {
  return (
    <div>
      <Button />
    </div>
  );
}

export default App;
```

---

## Development

### Initial Setup

Clone the repository and install dependencies:

```bash
git clone https://github.com/runtimeverification/web-components.git
cd web-components
yarn install
```

### Building the Library

Run the build command:

```bash
yarn build
```

This will generate CommonJS, ESM, and TypeScript declaration files in the `lib` default directory and other component folders as `Strapi` or `GraphViz`. Make sure that everything looks good before committing the changes. 

> **Note**: The destination directories are all git-ignored and will be built by GitHub Actions.

### Running Storybook

To start the Storybook server:

```bash
yarn storybook
```

---

## Contributing

### Adding New Components

1. Create a new directory in `src/components`.
2. Add your component files.
3. Update `src/index.ts` to export the new component.

### Developing New Components

For local development, import the component into `pages/index.ts`:

```bash
yarn dev
```

> **Note**: Remove the import from `pages/index.ts` after development is complete.

### Adding New Stories

Create a `.stories.ts` file for your component and run:

```bash
yarn storybook
```

---

## Deployment

To deploy a new version:

1. Build the library: `yarn build`.
2. Verify the `dist` folder and commit changes.
3. Push to the `main` branch.
4. GitHub Actions will handle the rest, automatically building and publishing the new version.