npm package: @redrob-ui/react
Description: React components for Redrob AI Design System
Author: Redrob AI
Latest version: 0.1.6

# @redrob-ui/react

React components for the Redrob AI Design System, built with Vite and Tailwind CSS.

## Installation

```bash
npm install @redrob-ui/react @redrob-ui/tailwind-config
# or
yarn add @redrob-ui/react @redrob-ui/tailwind-config
# or
pnpm add @redrob-ui/react @redrob-ui/tailwind-config
```

## Setup

1. **Configure Tailwind CSS:**

```js
// tailwind.config.js
const redrobConfig = require('@redrob-ui/tailwind-config');

module.exports = {
  presets: [redrobConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrob-ui/react/**/*.{js,ts,jsx,tsx}',
  ],
};
```

2. **Import styles:**

```css
/* src/index.css or src/App.css */
@import '@redrob-ui/react/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Usage

```tsx
import { Button, Card, Input } from '@redrob-ui/react';
import { HomeIcon } from '@redrob-ui/icons';

function App() {
  const [email, setEmail] = React.useState('');

  return (
    <Card>
      <h1>Welcome</h1>
      <Input
        label="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="you@example.com"
      />
      <Button
        variant="primary"
        leftIcon={<HomeIcon className="w-4 h-4" />}
      >
        Submit
      </Button>
    </Card>
  );
}
```

## Components

### Button

```tsx
<Button
  variant="primary"      // 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
  size="md"              // 'sm' | 'md' | 'lg'
  fullWidth={false}
  isLoading={false}
  disabled={false}
  leftIcon={<Icon />}
  rightIcon={<Icon />}
>
  Click me
</Button>
```

### Card

```tsx
<Card>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</Card>
```

### Input

```tsx
<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)}
/>
```

## Development

### Start dev server

```bash
npm run dev
```

This starts the Vite dev server at http://localhost:3000 with Hot Module Replacement (HMR).

### Build

```bash
npm run build
```

Builds the library to `dist/` folder with:
- ES modules (.mjs)
- CommonJS (.js)
- TypeScript declarations (.d.ts)
- Compiled CSS (styles.css)

### Preview

```bash
npm run preview
```

Preview the production build locally.

## TypeScript

Full TypeScript support with exported types:

```tsx
import type { ButtonProps, CardProps, InputProps } from '@redrob-ui/react';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};
```

## Vite Features

- ⚡ **Lightning Fast HMR** - Instant feedback during development
- 🎯 **Optimized Build** - Tree-shaking and code splitting
- 📦 **Multiple Formats** - ESM and CJS outputs
- 🔍 **Source Maps** - For debugging
- 🎨 **CSS Processing** - PostCSS with Tailwind

## Customization

### Extending Components

```tsx
import { Button, ButtonProps } from '@redrob-ui/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>
```

### Tailwind Extension

```js
// tailwind.config.js
const redrobConfig = require('@redrob-ui/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

## Examples

See the [React example app](../../examples/react-app) for a complete implementation.

## Related Packages

- [@redrob-ui/tokens](../tokens) - Design tokens
- [@redrob-ui/tailwind-config](../tailwind-config) - Tailwind preset
- [@redrob-ui/icons](../icons) - Icon library
- [@redrob-ui/vue](../vue-components) - Vue 3 components

## License

MIT