@dentai/ui

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

• Clone the repository:

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

• Install dependencies:

npm install

• Start Storybook:

npm run storybook

• 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:

• 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

• 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

• Commits to main branch trigger automatic version increment
• Version is determined by commit messages since last release
• CHANGELOG.md is automatically updated
• New GitHub release is created
• 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

• Create a feature branch:

git checkout -b feature/your-feature-name

• Make your changes and commit using conventional commits:

git commit -m "feat: add new component"

• Push and create a pull request:

git push origin feature/your-feature-name

Release Process

• Changes are automatically published when merged to main
• Versioning follows semantic versioning
• Releases are automated via GitHub Actions
• 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

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

  npm adduser
  

• Login to npm:

  npm login
  

• 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:

• Changes are merged to main branch
• All tests pass
• 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:

• Generate a new access token:

  npm token create
  

• 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