npm package: @reliability-design/react
Description: React wrappers for Reliability Design web components
Author: Reliability Design Team
Latest version: 1.0.2

# @reliability-design/react

React wrapper components for Reliability Design web components.

## Installation

```bash
npm install @reliability-design/react
```

## Usage

### Basic Example

```tsx
import { Button, Textfield, Card } from '@reliability-design/react';

function App() {
  return (
    <Card>
      <Textfield label="Username" placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}
```

### Form Controls with State

React wrapper components provide event handlers that work seamlessly with React state:

```tsx
import { useState } from 'react';
import { Textfield, Checkbox, Select, Switch, Slider } from '@reliability-design/react';

function FormExample() {
  const [username, setUsername] = useState('');
  const [accepted, setAccepted] = useState(false);
  const [country, setCountry] = useState('');
  const [enabled, setEnabled] = useState(false);
  const [volume, setVolume] = useState(50);

  return (
    <>
      <Textfield 
        value={username}
        onInputChange={(e) => setUsername(e.value)}
        label="Username"
      />
      
      <Checkbox
        status={accepted ? 'checked' : 'unchecked'}
        onChange={(e) => setAccepted(e.status === 'checked')}
        label="Accept Terms"
      />
      
      <Select
        selected={country}
        onChange={(e) => setCountry(e.value)}
        label="Country"
      />
      
      <Switch
        checked={enabled}
        onChange={(e) => setEnabled(e.checked)}
      />
      
      <Slider
        value={volume}
        onInput={(e) => setVolume(e.value)}
        min={0}
        max={100}
      />
    </>
  );
}
```

### Event-Driven Components

```tsx
import { useState } from 'react';
import { Tab, Accordion, Toast } from '@reliability-design/react';

function EventExample() {
  const [activeTab, setActiveTab] = useState(0);
  const [expanded, setExpanded] = useState(false);

  return (
    <>
      <Tab 
        selected={activeTab} 
        onTabChange={(e) => setActiveTab(e.index)}
      >
        <div slot="tab">Tab 1</div>
        <div slot="panel">Panel 1</div>
      </Tab>

      <Accordion
        expanded={expanded}
        onToggle={(e) => setExpanded(e.expanded)}
      >
        <div slot="header">Click to expand</div>
        <div slot="content">Hidden content</div>
      </Accordion>

      <Toast
        message="Operation successful"
        onDismissed={() => console.log('Toast dismissed')}
        onAction={() => console.log('Action clicked')}
      />
    </>
  );
}
```

### Accessing Web Component Instance

Use React refs to access the underlying web component:

```tsx
import { useRef } from 'react';
import { Textfield } from '@reliability-design/react';

function RefExample() {
  const textfieldRef = useRef<HTMLElement>(null);

  const focusInput = () => {
    textfieldRef.current?.focus();
  };

  return (
    <>
      <Textfield ref={textfieldRef} label="Focus me" />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}
```

## Component Categories

### Form Controls (6)
- `<Textfield />` - Text input with onInputChange event
- `<Select />` - Select dropdown with onChange event
- `<Checkbox />` - Checkbox with onChange event
- `<Radio />` - Radio button with onChange event
- `<Switch />` - Toggle switch with onChange event
- `<Slider />` - Range slider with onInput event

### Event-Driven Components (7)
- `<Tab />` - Tab navigation with onTabChange
- `<Menu />` - Menu with onMenuItemClick
- `<Accordion />` - Expandable sections with onToggle
- `<Chip />` - Removable chips with onRemoved
- `<Toast />` - Toast notifications with onDismissed, onAction
- `<Snackbar />` - Snackbar messages with onDismissed, onAction
- `<Stepper />` - Step wizard with onStepChange

### Passive Components (13)
- `<Button />` - Button
- `<Avatar />` - User avatar
- `<Badge />` - Notification badge
- `<Card />` - Card container
- `<CardMedia />` - Card media
- `<Container />` - Layout container
- `<Divider />` - Visual divider
- `<Layout />` - Flexbox layout
- `<Progress />` - Progress indicator
- `<Breadcrumb />` - Breadcrumb navigation
- `<Alert />` - Alert messages
- `<SegmentedButton />` - Segmented button group
- `<Tooltip />` - Tooltip overlay

## Creating Custom Wrappers

You can create your own React wrappers for custom web components:

```tsx
import { createComponent } from '@reliability-design/react';

interface MyComponentProps {
  value?: string;
  onChange?: (detail: { value: string }) => void;
}

export const MyComponent = createComponent<MyComponentProps>({
  tagName: 'my-custom-element',
  events: {
    onChange: 'custom-change-event',
  },
});
```

## Architecture

This package provides React wrapper components that:

- Forward all props as attributes/properties to web components
- Map CustomEvents to React event handlers
- Support ref forwarding to access underlying web component instances
- Automatically register web components on import
- Work with React 16.8+ (hooks support required)

## TypeScript Support

All components are fully typed with TypeScript definitions for props and event handlers.

## License

MIT