Frontend Components Library

This library provides a collection of components for integration across DeSci Frontend Apps.

⚠️ Only supports React 19 >=

Features

• 🌓 Dark mode support via storybook
• 📦 Built with Vite
• 🎯 TypeScript
• 🎭 Storybook
• 🧪 Vitest for testing
• 🎨 Tailwind CSS

Installation

npm install @desci-labs/frontend-components

Note

• The stories folder contains examples of storybook integration, it was added upon installation of storybook. You can refer for guidance.
• The test folder contains app file to run UI on local server, not recommended since we have Storybook.

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Setup

# Clone the repository
git clone [repository-url]

# Install dependencies
npm install

# Start Storybook for component visualisation
npm run storybook

How To Test New Updates

Step 1. Create new component and add export to index.ts

Step 2. npm run build to get updated dist folder

Step 3. npm pack to create zip of dist folder

Step 4. On codebase for test, install with npm install <local path to zip file>

Step 5. Test component

Always delete generated zip folder after tests.

How To Publish

• Update the version in package.json
• npm run build - Build the library
• npm publish --access public - Publish Library

⚠️ Note that an access token is required to publish successfully without the need for manual authentication during publish. To authenticate, create a .npmrc file and add this //registry.npmjs.org/:_authToken=<Access_Token>