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.

• Installation
• Usage
• Development
  • Building the Library
  • Running Storybook
• Adding New Components
  • Developing New Components
  • Adding New Stories
• Deploying New Version

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

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

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

yarn add @runtimeverification/web-components

or

npm install @runtimeverification/web-components

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

Update your tailwind.config.js with:

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

Import and use components as shown below:

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

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

export default App;

Clone the repository and install dependencies:

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

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.

To start the Storybook server:

yarn storybook

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

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

yarn dev

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

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

yarn storybook

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.