@patternregistrydemo/react-ui

A modern React component library with Tailwind CSS, SCSS, and styled-components.

Features

• 🎨 Multiple Styling Approaches: Tailwind CSS, SCSS, and styled-components
• 📦 Publishable NPM Package: Ready for distribution
• 🎯 TypeScript Support: Full type safety
• 🧩 Modular Architecture: Components, hooks, schemas, services, and translations
• 🎨 Design System: Consistent colors, spacing, and typography
• 📱 Responsive: Mobile-first design
• ♿ Accessible: WCAG compliant components
• 🚀 Modern Build: Rollup with tree-shaking

Installation

npm install @patternregistrydemo/react-ui
# or
yarn add @patternregistrydemo/react-ui
# or
pnpm add @patternregistrydemo/react-ui

Usage

Basic Import

import { Button, Card, Badge } from '@patternregistrydemo/react-ui';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Card>
        <CardHeader>
          <CardTitle>Card Title</CardTitle>
        </CardHeader>
        <CardContent>
          <p>Card content goes here</p>
        </CardContent>
      </Card>
      <Badge variant="success">Success</Badge>
    </div>
  );
}

Styling Approaches

1. Tailwind CSS (Default)

import { Button } from '@patternregistrydemo/react-ui';

<Button className="bg-blue-500 hover:bg-blue-600">
  Tailwind Button
</Button>

2. SCSS

import { Button } from '@patternregistrydemo/react-ui';
import './Button.scss';

<Button className="button--gradient">
  SCSS Button
</Button>

3. Styled Components

import { Button } from '@patternregistrydemo/react-ui';

// Styled components are built into the components
<Button gradient>
  Styled Button
</Button>

Hooks

import { useToggle, useWindowSize } from '@patternregistrydemo/react-ui';

function MyComponent() {
  const [isOpen, { toggle }] = useToggle(false);
  const { width, height } = useWindowSize();

  return (
    <div>
      <button onClick={toggle}>
        {isOpen ? 'Close' : 'Open'}
      </button>
      <p>Window size: {width} x {height}</p>
    </div>
  );
}

Schemas

import { loginSchema } from '@patternregistrydemo/react-ui';

// Use with form validation libraries like react-hook-form + zod
const form = useForm({
  resolver: zodResolver(loginSchema),
});

Services

import { localStorage, sessionStorage } from '@patternregistrydemo/react-ui';

// Store data
localStorage.set('user', { id: 1, name: 'John' });

// Retrieve data
const user = localStorage.get('user');

Translations

import { en } from '@patternregistrydemo/react-ui';

// Use translations
const message = en.common.loading; // "Loading..."

Components

Core Components

• Button: Multiple variants, sizes, and states
• Card: Flexible card layout with header, content, and footer
• Badge: Status indicators with various styles
• Alert: Notification messages with different types

Form Components

• Input: Text input with validation
• Select: Dropdown selection
• Checkbox: Checkbox input
• Radio: Radio button group
• Switch: Toggle switch
• Slider: Range slider

Layout Components

• Modal: Overlay dialogs
• Popover: Floating content
• Tooltip: Hover tooltips
• Dropdown: Dropdown menus
• Tabs: Tab navigation
• Accordion: Collapsible sections

Data Components

• Table: Data tables with sorting and filtering
• Pagination: Page navigation
• Progress: Progress indicators
• Spinner: Loading spinners

Hooks

State Management

• useToggle: Boolean state with toggle functions
• usePrevious: Track previous values
• useInterval: Set up intervals
• useTimeout: Set up timeouts

UI Interactions

• useClickOutside: Detect clicks outside elements
• useKeyPress: Handle keyboard events
• useHover: Track hover state
• useFocus: Manage focus state

Responsive

• useWindowSize: Track window dimensions
• useMediaQuery: Respond to media queries
• useScrollPosition: Track scroll position

Utilities

• useLocalStorage: Local storage management
• useDebounce: Debounce function calls
• useThrottle: Throttle function calls

Schemas

Form Validation

• loginSchema: Login form validation
• registerSchema: Registration form validation
• userProfileSchema: User profile validation

Type Schemas

• Common TypeScript types and interfaces
• API response types
• Component prop types

Services

Storage

• localStorage: Local storage wrapper
• sessionStorage: Session storage wrapper

API

• apiService: HTTP client utilities

Theme

• themeService: Theme management

Notifications

• notificationService: Toast and alert management

Analytics

• analyticsService: Analytics tracking

Translations

Supported Languages

• English (en): Complete translation set
• Spanish (es): Placeholder
• French (fr): Placeholder
• German (de): Placeholder

Usage

import { en } from '@patternregistrydemo/react-ui';

const message = en.common.loading; // "Loading..."
const error = en.form.invalidEmail; // "Please enter a valid email address"

Development

Prerequisites

• Node.js 18+
• pnpm 8+

Setup

# Install dependencies
pnpm install

# Start development
pnpm dev

# Build package
pnpm build

# Run tests
pnpm test

# Start Storybook
pnpm storybook

Project Structure

src/
├── components/          # React components
│   ├── Button/
│   ├── Card/
│   ├── Badge/
│   └── ...
├── hooks/              # Custom React hooks
│   ├── useToggle/
│   ├── useWindowSize/
│   └── ...
├── schemas/            # Validation schemas
│   ├── formSchemas.ts
│   ├── validationSchemas.ts
│   └── typeSchemas.ts
├── services/           # Utility services
│   ├── storageService.ts
│   ├── apiService.ts
│   └── ...
├── translations/       # Internationalization
│   ├── en.ts
│   ├── es.ts
│   └── ...
├── utils/              # Utility functions
│   ├── classNames.ts
│   ├── validators.ts
│   ├── formatters.ts
│   └── constants.ts
└── types/              # TypeScript types
    └── index.ts

Building

The package uses Rollup for building with the following outputs:

• CommonJS: dist/index.js
• ES Modules: dist/index.esm.js
• CSS: dist/styles.css
• TypeScript: dist/index.d.ts

Publishing

Prerequisites

1. npm account: You need an npm account and be logged in
2. Organization: The package is scoped to @patternregistrydemo, so you need access to this organization
3. Build: Ensure the package builds successfully

Publishing Steps

# 1. Login to npm (if not already logged in)
npm login

# 2. Build the package
pnpm build

# 3. Run type checking
pnpm type-check

# 4. Test the package locally (optional)
npm pack --dry-run

# 5. Publish to npm
npm publish

# Or use the publish script
./scripts/publish.sh

Publishing Script

We provide a convenient publish script that handles the entire process:

# Make the script executable (first time only)
chmod +x scripts/publish.sh

# Run the publish script
./scripts/publish.sh

The script will:

• Check if you're logged into npm
• Clean and build the package
• Run type checking
• Show what will be published
• Ask for confirmation
• Publish to npm

Version Management

To update the version:

# Patch version (0.1.0 -> 0.1.1)
npm version patch

# Minor version (0.1.0 -> 0.2.0)
npm version minor

# Major version (0.1.0 -> 1.0.0)
npm version major

Package Contents

The published package includes:

• Dist files: Compiled JavaScript, TypeScript definitions, and CSS
• Source files: Original TypeScript source for tree-shaking
• Documentation: README.md and LICENSE
• Type definitions: Full TypeScript support

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.