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

Pre-requisites

Before installing, create a .npmrc file in your project root and add the following line:

@runtimeverification:registry=https://npm.pkg.github.com

Installing the Package

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

yarn add @runtimeverification/web-components

or

npm install @runtimeverification/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 '@runtimeverification/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 dist directory. Make sure that everything looks good before committing the changes.

Note: The dist directory is 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.