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
• Usage
• Development
  • Building the Library
  • Running Storybook
• Adding New Components
  • Developing New Components
  • Adding New Stories
• Deploying New Version

Installation

Installing the Package

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

yarn add @runtimeverificationinc/web-components

or

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:

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

Component Usage

Import and use components as shown below:

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

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

export default App;

Development

Initial Setup

Clone the repository and install dependencies:

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

Building the Library

Run the build command:

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:

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:

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:

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.