@papillonbits/components

A comprehensive collection of accessible React components for building modern web applications.

Overview

This package provides a complete suite of React components following atomic design principles. All components are built with accessibility, reusability, and customization in mind.

Installation

npm install @papillonbits/components

Components

Layout Components

• Alert - Display notification and alert messages with various severity levels
• Blankslate - Show empty states with helpful messaging
• Box - Flexible layout container with customizable spacing and styling
• Layout - Page layout components for consistent structure

Form Components

• Checkbox - Accessible checkbox input with label support
• Input - Text input fields with validation states
• Radio - Radio button input with grouping support
• Select - Native select dropdown component
• SelectMenu - Advanced select menu with search and filtering

Navigation Components

• Breadcrumb - Navigation breadcrumbs for hierarchical navigation
• Menu - Vertical navigation menu
• TabNav - Tab-based navigation
• UnderlineNav - Underlined navigation bar

Interactive Components

• Button - Interactive button with multiple variants and states
• Dropdown - Dropdown menus and selectors
• Pagination - Pagination controls with PreviousNext component

Display Components

• Label - Labels and tags for categorization
• Icon - Icon components for visual communication
• SVG - SVG utilities and components
• BranchName - Git branch name display component

Grid & Table Components

• DisplayTable - Table component for displaying tabular data
• FlexGrid - Flexible grid layout system

Feedback Components

• Loader - Loading indicators and spinners
• Progress - Progress bars and indicators
• Toast - Toast notification system
• Popover - Popover and tooltip containers

Utility Components

• ErrorBoundary - React error boundary for graceful error handling
• Subhead - Subheading components for content hierarchy

Usage

import { Button, Alert, Input } from '@papillonbits/components';

function MyComponent() {
  return (
    <div>
      <Alert type="success">Operation completed successfully!</Alert>
      <Input 
        label="Email" 
        type="email" 
        placeholder="Enter your email"
      />
      <Button variant="primary">Submit</Button>
    </div>
  );
}

Dependencies

This package depends on:

• @papillonbits/css - Styling and CSS primitives
• @papillonbits/library - Utility functions and helpers
• react - React library
• prop-types - Runtime type checking

Development

Building

# Build the package
npm run build

# Build for different environments
npm run build-test
npm run build-acceptance
npm run build-release

Scripts

• clean-up - Remove build artifacts and dependencies
• install-packages - Install dependencies
• install-papillonbits-latest - Update to latest papillonbits packages
• build - Transpile and build the package

Features

• Accessibility First - All components follow WCAG guidelines
• Customizable - Easy to theme and customize via CSS and props
• TypeScript Ready - PropTypes included for runtime validation
• Tree Shakeable - Import only what you need
• Well Tested - Comprehensive test coverage with Jest and Testing Library

Component Design Principles

• Separation of Concerns - Logic separated from presentation
• Composition - Components designed to work together
• Atomic Design - Built from atoms to organisms to templates
• Accessibility - ARIA attributes and keyboard navigation
• Performance - Optimized for minimal re-renders

Documentation

For detailed component API documentation and live examples, visit the Storybook documentation.

Links

• Homepage
• Repository
• Issues

Related Packages

• @papillonbits/css - CSS styles and primitives
• @papillonbits/library - Utility functions
• @papillonbits/setup - Build configuration

License

See root LICENSE file for details.