vagaro-tw-components/README.md

Tailwind CSS React TypeScript components for Vagaro

# vagaro-tw-components

A collection of accessible, customizable React components built with TypeScript and Tailwind CSS.

## Installation

```bash
npm install vagaro-tw-components
# or
yarn add vagaro-tw-components
# or
pnpm add vagaro-tw-components
```

## Setup

### 1. Import the CSS

Import the component styles in your app's entry point:

```tsx
import 'vagaro-tw-components/styles.css'
```

### 2. Tailwind Configuration

If you're using Tailwind CSS in your project, add the component library to your content paths to ensure proper style purging:

```js
// tailwind.config.js
module.exports = {
  content: [
    // ... your other content paths
    './node_modules/vagaro-tw-components/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of your config
}
```

## Components

### Button

A versatile button component with multiple variants and states.

```tsx
import { Button } from 'vagaro-tw-components'

// Basic usage
<Button>Click me</Button>

// 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 (default)</Button>
<Button size="lg">Large</Button>

// States
<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>

// Full width
<Button fullWidth>Full Width Button</Button>
```

### Card

A flexible container component for grouping related content.

```tsx
import { Card } from 'vagaro-tw-components'

// Basic card
<Card>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</Card>

// With custom className
<Card className="max-w-md">
  <h2>Custom styled card</h2>
</Card>

// Without shadow
<Card shadow={false}>
  <p>Card without shadow</p>
</Card>

// Without border
<Card border={false}>
  <p>Card without border</p>
</Card>
```

### Input

A form input component with label and error handling.

```tsx
import { Input } from 'vagaro-tw-components'

// Basic input
<Input 
  label="Email"
  type="email"
  placeholder="Enter your email"
/>

// With error
<Input 
  label="Password"
  type="password"
  error="Password is required"
/>

// With helper text
<Input 
  label="Username"
  helperText="Choose a unique username"
/>

// Required field
<Input 
  label="Name"
  required
/>

// Disabled
<Input 
  label="Disabled field"
  disabled
/>
```

### Badge

A small status indicator component.

```tsx
import { Badge } from 'vagaro-tw-components'

// Variants
<Badge variant="default">Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="info">Info</Badge>

// Sizes
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
```

### PageBanner

A banner component for displaying promotional content or announcements.

```tsx
import { PageBanner } from 'vagaro-tw-components'

// Basic usage (uses standard anchor tag)
<PageBanner 
  text="Watch support videos, join a workshop, or schedule a one-on-one"
  href="https://mysite.vagaro.com/vagarouniversity"
/>

// Open in same tab
<PageBanner 
  text="Learn more about our features"
  href="/features"
  openInNewTab={false}
/>

// With Next.js Link
import Link from 'next/link'
<PageBanner 
  text="Visit our documentation"
  href="/docs"
  linkComponent={Link}
  openInNewTab={false}
/>

// With custom link props
<PageBanner 
  text="Check out our blog"
  href="/blog"
  linkProps={{ 
    className: "custom-class",
    onClick: (e) => console.log('Clicked!')
  }}
/>

// With React Router Link
import { Link } from 'react-router-dom'
<PageBanner 
  text="Go to dashboard"
  href="/dashboard"
  linkComponent={Link}
  linkProps={{ to: "/dashboard" }}
  openInNewTab={false}
/>
```

### RightArrow

An SVG arrow icon component.

```tsx
import RightArrow from 'vagaro-tw-components'

// Basic usage
<RightArrow />

// Custom size
<RightArrow width={24} height={24} />

// With custom class
<RightArrow fillClass="text-blue-500 hover:text-blue-700" />

// With aria label
<RightArrow ariaLabel="Navigate to next page" />
```

## TypeScript Support

All components are written in TypeScript and include full type definitions. Your IDE will provide autocomplete and type checking out of the box.

```tsx
import { Button, ButtonProps } from 'vagaro-tw-components'

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />
}
```

## Styling and Customization

### Using the `cn` utility

The library exports a `cn` utility function for combining class names:

```tsx
import { cn } from 'vagaro-tw-components'

<div className={cn(
  'base-class',
  isActive && 'active-class',
  customClass
)} />
```

### Extending component styles

All components accept a `className` prop for additional styling:

```tsx
<Button className="shadow-lg hover:shadow-xl transition-shadow">
  Custom styled button
</Button>
```

### Custom Tailwind Colors

The components use Vagaro's custom color palette:

- `primary`: Brand primary color
- `inkLightest`: Light ink color for backgrounds
- Additional semantic colors for variants

## Framework Integration

### Next.js

For components that use links (like PageBanner), pass Next.js's Link component:

```tsx
import Link from 'next/link'
import { PageBanner } from 'vagaro-tw-components'

<PageBanner linkComponent={Link} />
```

### React Router

For React Router applications:

```tsx
import { Link } from 'react-router-dom'
import { PageBanner } from 'vagaro-tw-components'

<PageBanner 
  linkComponent={Link}
  linkProps={{ to: "/path" }}
/>
```

## Accessibility

All components follow accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Focus management
- Screen reader friendly

## Browser Support

The components support all modern browsers:

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Contributing

To contribute to this component library:

1. Clone the repository
2. Install dependencies: `pnpm install`
3. Start development: `pnpm dev`
4. Run tests: `pnpm test`
5. Build: `pnpm build`

## License

MIT