npm package: @redrobui/react
Description: React components for Redrob AI Design System
Author: Redrob AI
Latest version: 0.4.1

# @redrobui/react

React components for the Redrob AI Design System, built with Vite and Tailwind CSS.

## 🎨 Live Demo

**[View Interactive Component Demo →](https://redrob-ai-design-system.vercel.app/)**

Explore all components, variants, and design tokens in our interactive Storybook.

## Installation

```bash
npm install @redrobui/react @redrobui/tailwind-config
# or
yarn add @redrobui/react @redrobui/tailwind-config
# or
pnpm add @redrobui/react @redrobui/tailwind-config
```

## Setup

### Quick Setup (Recommended)

Just import the pre-built CSS with all utilities included:

```css
/* src/index.css or src/App.css */
@import '@redrobui/tokens/utilities.css';
@import '@redrobui/react/styles.css';
```

That's it! All color classes and components are ready to use:
- `bg-primary-600`, `text-primary-600`, `hover:bg-primary-700`
- `bg-secondary-600`, `bg-error-600`, `bg-success-600`
- All component styles included

### Advanced Setup (Custom Tailwind Config)

If you want to customize or extend the design system:

1. **Configure Tailwind CSS:**

```js
// tailwind.config.js
const redrobConfig = require('@redrobui/tailwind-config');

module.exports = {
  presets: [redrobConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrobui/react/**/*.{js,ts,jsx,tsx}',
  ],
};
```

2. **Import styles:**

```css
/* src/index.css or src/App.css */
@import '@redrobui/react/styles.css';
@import 'tailwindcss';
```

## Components

### 📝 Form Components

#### Button

Versatile button component with multiple variants and sizes.

```tsx
import { Button } from '@redrobui/react';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// With icons
<Button leftIcon={<Icon />}>With Icon</Button>
<Button rightIcon={<Icon />}>With Icon</Button>

// States
<Button isLoading>Loading</Button>
<Button disabled>Disabled</Button>
<Button fullWidth>Full Width</Button>
```

#### Input

Text input component with label, helper text, and error states.

```tsx
import { Input } from '@redrobui/react';

<Input
  label="Email"
  placeholder="Enter email"
  helperText="We'll never share your email"
  error="This field is required"
  size="md"              // 'sm' | 'md' | 'lg'
  disabled={false}
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>
```

#### Textarea

Multi-line text input component.

```tsx
import { Textarea } from '@redrobui/react';

<Textarea
  placeholder="Enter description..."
  className="min-h-[120px]"
  disabled={false}
  required={false}
/>
```

#### Select

Dropdown select component with search and custom options.

```tsx
import Select from '@redrobui/react/Select';

<Select
  label="Country"
  placeholder="Select a country"
  options={[
    { label: "United States", value: "us" },
    { label: "Canada", value: "ca" },
    { label: "Mexico", value: "mx", disabled: true },
  ]}
  onChange={(option) => console.log(option)}
  error="Please select an option"
  helperText="Choose your country"
/>
```

#### Checkbox

Checkbox input with label support.

```tsx
import { Checkbox } from '@redrobui/react';
import { Label } from '@redrobui/react';

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>
```

#### Radio

Radio button group component.

```tsx
import { RadioGroup, RadioGroupItem } from '@redrobui/react';
import { Label } from '@redrobui/react';

<RadioGroup defaultValue="option-1">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-1" id="option-1" />
    <Label htmlFor="option-1">Option 1</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-2" id="option-2" />
    <Label htmlFor="option-2">Option 2</Label>
  </div>
</RadioGroup>
```

#### Switch

Toggle switch component with multiple sizes.

```tsx
import { Switch } from '@redrobui/react';
import { Label } from '@redrobui/react';

<div className="flex items-center space-x-2">
  <Switch id="airplane" size="default" /> // 'small' | 'medium' | 'default'
  <Label htmlFor="airplane">Airplane Mode</Label>
</div>
```

### 🎨 Layout Components

#### Card

Container component for content grouping.

```tsx
import { Card } from '@redrobui/react';

<Card>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</Card>
```

#### Separator

Horizontal or vertical divider.

```tsx
import { Separator } from '@redrobui/react';

<Separator orientation="horizontal" />
<Separator orientation="vertical" className="h-20" />
```

#### Accordion

Collapsible content sections.

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@redrobui/react';

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

#### Tabs

Tabbed navigation component.

```tsx
import { Tabs } from '@redrobui/react';

<Tabs
  tabs={[
    { label: "Home", icon: <Icon /> },
    { label: "Profile", badge: 3 },
    { label: "Settings", disabled: true },
  ]}
  activeTab={activeTab}
  onTabChange={(index) => setActiveTab(index)}
/>
```

### 🎯 Feedback Components

#### Dialog / Modal

Modal dialog component.

```tsx
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
} from '@redrobui/react';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogDescription>
        Are you sure you want to continue?
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button variant="primary">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

#### Tooltip

Contextual information on hover.

```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from '@redrobui/react';

<Tooltip>
  <TooltipTrigger asChild>
    <Button>Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Helpful information</p>
  </TooltipContent>
</Tooltip>
```

#### Toast

Toast notification system.

```tsx
import { ToastProvider, useToast } from '@redrobui/react';

// Wrap your app
<ToastProvider>
  <App />
</ToastProvider>

// Use in components
const { toast } = useToast();

toast({
  title: "Success",
  description: "Your changes have been saved.",
  variant: "success",
});
```

### 🔄 Loading & Status Components

#### Skeleton

Loading placeholder component.

```tsx
import { Skeleton } from '@redrobui/react';

// Different shapes
<Skeleton className="w-[200px] h-4" />
<Skeleton className="w-12 h-12 rounded-full" />
<Skeleton className="w-[300px] h-24" />

// Card skeleton
<div className="space-y-3">
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
  <Skeleton className="h-20 w-full" />
</div>
```

#### Loader

Animated loading spinner.

```tsx
import { Loader } from '@redrobui/react';

<Loader />
```

#### TextLoader

Text with loading animation.

```tsx
import TextLoader from '@redrobui/react/TextLoader';

<TextLoader text="Loading..." spinner={true} />
```

#### Tag

Status and label tags.

```tsx
import Tag from '@redrobui/react/Tag';

<Tag variant="completed" text="Done" />
<Tag variant="pending" text="In Progress" />
<Tag variant="declined" text="Rejected" />
<Tag variant="draft" text="Draft" />
<Tag variant="accepted" text="Approved" />
<Tag variant="soon" text="Coming Soon" />

// With icon
<Tag
  variant="completed"
  text="Done"
  startAdornment={<CheckIcon className="w-3 h-3" />}
/>
```

### 🧭 Navigation Components

#### Breadcrumb

Hierarchical navigation trail.

```tsx
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@redrobui/react';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Components</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

#### Pagination

Page navigation component.

```tsx
import { Pagination } from '@redrobui/react';

<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={(page) => setCurrentPage(page)}
/>
```

### 👤 Display Components

#### Avatar

User avatar with fallback.

```tsx
import { Avatar, AvatarImage, AvatarFallback } from '@redrobui/react';

<Avatar>
  <AvatarImage src="https://example.com/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

// Different sizes
<Avatar className="h-8 w-8">
  <AvatarImage src="..." />
  <AvatarFallback>SM</AvatarFallback>
</Avatar>
```

#### Table

Data table component with sorting and pagination.

```tsx
import { Table } from '@redrobui/react';

<Table
  columns={[
    { header: "Name", accessor: "name" },
    { header: "Email", accessor: "email" },
    { header: "Role", accessor: "role" },
  ]}
  data={[
    { name: "John Doe", email: "john@example.com", role: "Admin" },
    { name: "Jane Smith", email: "jane@example.com", role: "User" },
  ]}
/>
```

### 🎛️ Advanced Components

#### Dropdown Menu

Contextual menu with actions.

```tsx
import { DropdownMenu } from '@redrobui/react';

<DropdownMenu
  trigger={<Button>Options</Button>}
  items={[
    { label: "Edit", onClick: () => {} },
    { label: "Delete", onClick: () => {}, variant: "danger" },
  ]}
/>
```

#### Popover

Floating content container.

```tsx
import { Popover } from '@redrobui/react';

<Popover
  trigger={<Button>Open</Button>}
  content={<div>Popover content</div>}
/>
```

#### Calendar

Date picker component.

```tsx
import { Calendar } from '@redrobui/react';

<Calendar
  selected={date}
  onSelect={(date) => setDate(date)}
/>
```

## Component Composition

Components are designed to be composable:

```tsx
<Card className="p-6">
  <div className="space-y-4">
    <div className="flex items-center justify-between">
      <h2 className="text-xl font-bold">User Profile</h2>
      <Tag variant="completed" text="Active" />
    </div>
    
    <Separator />
    
    <div className="flex items-center space-x-4">
      <Avatar>
        <AvatarImage src="..." />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <div>
        <h3 className="font-medium">John Doe</h3>
        <p className="text-sm text-gray-500">john@example.com</p>
      </div>
    </div>
    
    <Separator />
    
    <div className="space-y-2">
      <Input label="Name" defaultValue="John Doe" />
      <Input label="Email" defaultValue="john@example.com" />
      
      <div className="flex items-center space-x-2">
        <Switch id="notifications" />
        <Label htmlFor="notifications">Email notifications</Label>
      </div>
    </div>
    
    <div className="flex gap-2">
      <Button variant="outline" fullWidth>Cancel</Button>
      <Button variant="primary" fullWidth>Save Changes</Button>
    </div>
  </div>
</Card>
```

## TypeScript

Full TypeScript support with exported types:

```tsx
import type {
  ButtonProps,
  CardProps,
  InputProps,
  SelectOptionType,
} from '@redrobui/react';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};
```

## Accessibility

All components follow WAI-ARIA guidelines:
- Keyboard navigation support
- Screen reader friendly
- Focus management
- ARIA attributes
- Semantic HTML

## Customization

### Extending Components

```tsx
import { Button, type ButtonProps } from '@redrobui/react';

interface MyButtonProps extends ButtonProps {
  icon?: React.ReactNode;
}

export const MyButton: React.FC<MyButtonProps> = ({ icon, ...props }) => {
  return <Button leftIcon={icon} {...props} />;
};
```

### Custom Styling

```tsx
// Use className for custom styles
<Button className="my-custom-class">
  Custom Button
</Button>

// Or use Tailwind classes
<Button className="bg-purple-600 hover:bg-purple-700">
  Purple Button
</Button>
```

### Tailwind Extension

```js
// tailwind.config.js
const redrobConfig = require('@redrobui/tailwind-config');

module.exports = {
  presets: [redrobConfig],
  theme: {
    extend: {
      colors: {
        brand: '#your-color',
      },
    },
  },
};
```

## Best Practices

1. **Import styles once** - In your main entry file
2. **Use design tokens** - Instead of hardcoded values
3. **Leverage variants** - Use variant props instead of custom styling
4. **Type safety** - Utilize TypeScript types for better DX
5. **Composability** - Compose complex UIs from simple components
6. **Accessibility** - Always include proper labels and ARIA attributes

## Examples

See the [React example app](../../examples/react-app) for a complete implementation.

## Related Packages

- [@redrobui/tokens](../tokens) - Design tokens
- [@redrobui/tailwind-config](../tailwind-config) - Tailwind preset
- [@redrobui/icons](../icons) - Icon library
- [@redrobui/vue](../vue-components) - Vue 3 components

## Development

### Start dev server

```bash
npm run dev
```

### Build

```bash
npm run build
```

### Preview

```bash
npm run preview
```

## License

MIT