DentAI UI Component Library

A modern, accessible React component library for dental applications.

Installation

npm install @dentai/ui
# or
yarn add @dentai/ui

Usage

import { Button } from '@dentai/ui';

function App() {
  return (
    <Button variant="primary">
      Click me
    </Button>
  );
}

Development

1. Clone the repository:

git clone https://github.com/your-org/dentai-ui.git
cd dentai-ui

2. Install dependencies:

npm install

3. Start Storybook:

npm run storybook

4. Run tests:

npm test

Building

To build the library:

npm run build:lib

To build Storybook:

npm run build-storybook

Testing Local Installation

The npm pack command creates a tarball (.tgz file) that contains exactly what would be published to npm. This is useful for:

• Testing your package locally before publishing
• Verifying the contents of your package
• Creating a portable version for local testing

To test the library in your application:

1. Generate a test bundle:

npm run pack:test

This will:

• Build the library (npm run build:lib)
• Create a tarball (e.g., dentai-ui-0.1.0.tgz)
• Include only the files specified in package.json's files field:
  • /dist - Built library files
  • README.md - Documentation

2. In your application, install the test bundle:

npm install /path/to/dentai-ui-0.1.0.tgz

You can also inspect the contents of the tarball:

tar -tvf dentai-ui-0.1.0.tgz

Versioning and Releasing

The library uses semantic versioning (MAJOR.MINOR.PATCH) with automated version increments based on commit messages:

Commit Convention

Your commit messages determine the version increment:

# Patch Version (0.0.X) - Bug fixes and minor changes
fix(button): resolve click handler not firing
fix(input): correct typing issue
perf(table): improve rendering performance
style(dialog): fix padding inconsistency

# Minor Version (0.X.0) - New features
feat(dropdown): add search functionality
feat(input): add phone number formatting

# Major Version (X.0.0) - Breaking changes
# Method 1: Using BREAKING CHANGE in commit body
feat(button): redesign button API
BREAKING CHANGE: Button props interface has changed
- removed 'size' prop
- 'variant' prop now accepts different values

# Method 2: Using breaking prefix
breaking(input): complete redesign of input component

Commit Scopes

Use these scopes to indicate which component is affected:

• button
• input
• dialog
• table
• tabs
• dropdown
• sidebar
• phone-input
• docs
• ci
• deps

Examples

# Bug fix (patch)
git commit -m "fix(button): resolve hover state not clearing"

# New feature (minor)
git commit -m "feat(input): add autocomplete support"

# Breaking change (major)
git commit -m "feat(dialog): redesign dialog API

BREAKING CHANGE: Dialog component now uses a new API
- 'open' prop renamed to 'isOpen'
- 'onClose' is now required
- New 'size' prop replaces 'width' and 'height'"

Automated Release Process

1. Commits to main branch trigger automatic version increment
2. Version is determined by commit messages since last release
3. CHANGELOG.md is automatically updated
4. New GitHub release is created
5. Package is published to npm

Manual Version Control

While versions are automatically managed, you can still use these commands if needed:

# Increment patch version (0.0.X)
npm run version:patch

# Increment minor version (0.X.0)
npm run version:minor

# Increment major version (X.0.0)
npm run version:major

To create a release with changelog manually:

npm run release:patch  # For bug fixes
npm run release:minor  # For new features
npm run release:major  # For breaking changes

Testing

• Run tests: npm test
• Watch mode: npm run test:watch
• Coverage report: npm test -- --coverage

Contributing

1. Create a feature branch:

git checkout -b feature/your-feature-name

2. Make your changes and commit using conventional commits:

git commit -m "feat: add new component"

3. Push and create a pull request:

git push origin feature/your-feature-name

Release Process

1. Changes are automatically published when merged to main
2. Versioning follows semantic versioning
3. Releases are automated via GitHub Actions
4. Storybook is automatically deployed to Chromatic

Available Scripts

• npm run dev - Start Next.js development server
• npm run build - Build Next.js application
• npm run storybook - Start Storybook development server
• npm run build-storybook - Build Storybook for deployment
• npm test - Run tests
• npm run build:lib - Build the component library
• npm run chromatic - Publish to Chromatic
• npm run release - Create a new release
• npm run pack:test - Generate a test bundle
• npm run version:patch - Increment patch version
• npm run version:minor - Increment minor version
• npm run version:major - Increment major version
• npm run release:patch - Create patch release with changelog
• npm run release:minor - Create minor release with changelog
• npm run release:major - Create major release with changelog

Code Quality

• Linting: The project uses ESLint for code quality
• Testing: Jest and React Testing Library for unit tests
• Coverage: Minimum 80% coverage required for all code
• Commit Messages: Uses conventional commits format
• CI/CD: Automated testing and deployment via GitHub Actions

Project Structure

dentai-ui/
├── src/           # Source code
├── dist/          # Built library output
├── stories/       # Storybook stories
├── tests/         # Test files
└── .github/       # GitHub Actions workflows

License

MIT

Publishing to npm

Initial Setup

1. Create an npm account if you don't have one:

   npm adduser

2. Login to npm:

   npm login

3. Create an npm organization (if not already done):

   # Visit https://www.npmjs.com/org/create
   # Create the 'dentai' organization

Publishing Process

The package is automatically published to npm when:

1. Changes are merged to main branch
2. All tests pass
3. Version is bumped based on commit messages

To publish manually (if needed):

# Build the library
npm run build:lib

# Publish to npm
npm publish

npm Token Setup

For CI/CD publishing, you need to set up an npm token:

1. Generate a new access token:

   npm token create

2. Add the token to GitHub Secrets:

   • Go to your repository settings
   • Navigate to Secrets and Variables > Actions
   • Create a new secret named NPM_TOKEN
   • Paste your npm token

Scoped Package

This package is published under the @dentai scope:

npm install @dentai/ui

The scope ensures:

• Name uniqueness
• Package grouping
• Access control
• Brand consistency