React UI Component Library

A polished React component library focused on reusable primitives, accessibility defaults, and a workflow that feels ready for team use.

What makes it stronger

• Accessible components with stable semantics and tested interaction states
• Storybook stories that document real usage patterns instead of only happy paths
• Utility helpers for accessibility and performance with dedicated Jest coverage
• Build and package metadata aligned with how the library is actually published

Components

• Button: variants, sizes, loading states, icon slots, icon-only support
• Card: semantic root selection, configurable heading level, header actions, footer content
• Modal: controlled dialog with portal rendering, focus trapping, overlay dismissal, and footer actions

Utilities

• generateId, prefersReducedMotion, prefersDarkMode, announceToScreenReader, FocusManager
• debounce, throttle, rafThrottle, setupLazyLoading, measurePerformance, memoize

Scripts

npm install
npm run storybook
npm run test
npm run test:ci
npm run type-check
npm run build
npm run build:storybook
npm run chromatic

Install from npm

npm install @mak43/ui-component-library

import { Button, Card, Modal } from '@mak43/ui-component-library'

export function SettingsPanel() {
  return (
    <Card title="Workspace settings" description="Review and save team preferences.">
      <Button>Save changes</Button>
    </Card>
  )
}

The npm package name is configured as @mak43/ui-component-library in package.json.

Storybook Docs

Storybook is configured for component autodocs and MDX documentation:

npm run storybook
npm run build:storybook

The documentation entry point lives at Documentation/Introduction, and component docs are generated from the Button, Card, and Modal stories.

Visual Regression Testing

Chromatic is installed and configured through chromatic.config.json.

Local run:

CHROMATIC_PROJECT_TOKEN=your-token npm run chromatic

CI run:

npm run chromatic:ci

Add CHROMATIC_PROJECT_TOKEN to GitHub repository secrets to enable visual checks in pull requests and pushes. The CI workflow skips Chromatic when the secret is missing so contributors can still run the rest of the pipeline.

CI and Publishing

GitHub Actions workflows live in .github/workflows/:

• ci.yml runs linting, type checks, Jest coverage, the package build, the Storybook build, and Chromatic.
• publish.yml verifies the package and publishes to npm on a GitHub release or manual workflow dispatch.

Required repository secrets:

• CHROMATIC_PROJECT_TOKEN for visual regression testing
• NPM_TOKEN for publishing to npm

The published package includes dist/index.umd.js, dist/index.umd.js.map, dist/index.d.ts, README.md, and LICENSE.

Project Structure

src/
  Introduction.mdx
  components/
    Button/
    Card/
    Modal/
  utils/
  styles/
  index.js
  index.d.ts

Notes

• Storybook configuration lives in .storybook/
• Jest runs through ts-jest so the repo can validate JSX without a separate Babel setup
• The published entry now points at dist/index.umd.js, which matches the library build output
• React and React DOM are peer dependencies to avoid duplicate React installs in consuming apps