npm package: @t-one-internal/design-system
Description: A comprehensive React component library built with shadcn/ui and Vite
Author: T-One Internal
Latest version: 0.1.7

# @t-one-internal/design-system

A comprehensive React component library built with shadcn/ui, Vite, and TypeScript. This library provides a complete set of accessible and customizable UI components for modern React applications.

## Features

- **Tree-shakeable**: Only imports what you use
- **TypeScript**: Full type definitions included
- **CSS injection**: Styles automatically included
- **shadcn/ui components**: 20+ pre-built components
- **React 18+ compatible**
- **Accessible**: Built with accessibility in mind
- **Customizable**: Easy to theme and customize

## Installation

```bash
npm install @t-one-internal/design-system
```

## Quick Start

```typescript
import { Button, Card, Input } from '@t-one-internal/design-system'

function App() {
  return (
    <div>
      <Button>Click me!</Button>
      <Card>
        <CardContent>Hello World!</CardContent>
      </Card>
    </div>
  )
}
```

## Available Components

### Core Components
- **Button** - Interactive button component with multiple variants
- **Card** - Container component with header, content, and footer
- **Input** - Form input component with validation support
- **Label** - Form label component
- **Avatar** - User avatar component with fallback support

### Navigation & Layout
- **Breadcrumb** - Navigation breadcrumb component
- **Tabs** - Tab navigation component
- **Toggle Group** - Toggle button group component
- **Separator** - Visual separator component
- **Scroll Area** - Custom scrollable area component

### Interactive Components
- **Dropdown Menu** - Dropdown menu component
- **Checkbox** - Checkbox input component
- **Switch** - Toggle switch component
- **Tooltip** - Tooltip component
- **Select** - Select dropdown component
- **Dialog** - Modal dialog component
- **Sheet** - Side sheet component

### Data Display
- **Table** - Data table component
- **Badge** - Status badge component
- **Pagination** - Pagination component
- **Progress** - Progress bar component

## Usage Examples

### Button Component

```typescript
import { Button } from '@t-one-internal/design-system'

function ButtonExample() {
  return (
    <div className="space-x-2">
      <Button variant="default">Default</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}
```

### Card Component

```typescript
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@t-one-internal/design-system'

function CardExample() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <div className="grid w-full items-center gap-4">
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="name">Name</Label>
              <Input id="name" placeholder="Name of your project" />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}
```

### Form Components

```typescript
import { Input, Label, Checkbox, Switch, Select } from '@t-one-internal/design-system'

function FormExample() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="Enter your email" />
      </div>
      
      <div className="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>
      
      <div className="flex items-center space-x-2">
        <Switch id="notifications" />
        <Label htmlFor="notifications">Enable notifications</Label>
      </div>
      
      <div className="space-y-2">
        <Label>Country</Label>
        <Select>
          <SelectTrigger>
            <SelectValue placeholder="Select a country" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="us">United States</SelectItem>
            <SelectItem value="ca">Canada</SelectItem>
            <SelectItem value="uk">United Kingdom</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}
```

### Data Display Components

```typescript
import { Table, Badge, Progress, Pagination } from '@t-one-internal/design-system'

function DataDisplayExample() {
  return (
    <div className="space-y-4">
      <div className="flex space-x-2">
        <Badge>Default</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="destructive">Destructive</Badge>
        <Badge variant="outline">Outline</Badge>
      </div>
      
      <Progress value={33} className="w-full" />
      
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Email</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>John Doe</TableCell>
            <TableCell>
              <Badge variant="secondary">Active</Badge>
            </TableCell>
            <TableCell>john@example.com</TableCell>
          </TableRow>
        </TableBody>
      </Table>
      
      <Pagination totalPages={10} currentPage={1} />
    </div>
  )
}
```

## Configuration

### Tailwind CSS Setup

This library requires Tailwind CSS to be configured in your project. Add the following to your `tailwind.config.js`:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    './node_modules/@t-one-internal/design-system/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
```

### CSS Variables

Add these CSS variables to your global CSS file:

```css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}
```

### TypeScript Configuration

Make sure your `tsconfig.json` includes the library:

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "node_modules/@t-one-internal/design-system/**/*"]
}
```

## Dependencies

### Peer Dependencies

- `react`: ^18.2.0
- `react-dom`: ^18.2.0

### Required Dependencies

- `@radix-ui/react-*`: Various Radix UI primitives
- `class-variance-authority`: For component variants
- `clsx`: For conditional classes
- `lucide-react`: For icons
- `tailwind-merge`: For merging Tailwind classes

## Browser Support

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

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request


## Support

For support, email subash@trainery.one or create an issue in the [GitHub repository](https://github.com/subhash-traineryone/design-system).

## Changelog

### v0.1.0
- Initial release
- 20+ shadcn/ui components
- TypeScript support
- Tree-shakeable build
- CSS injection support

## Troubleshooting

### Common Issues and Solutions

#### 1. Tailwind CSS Not Working / No Styling Applied

**Symptoms:**
- Components display as unstyled HTML elements
- No colors, spacing, or styling visible
- Console errors about PostCSS plugins

**Solutions:**

**A. Version Compatibility Issue:**
```bash
# Check if you have the wrong Tailwind version
npm list tailwindcss

# If you have v4, downgrade to v3
npm uninstall tailwindcss @tailwindcss/postcss
npm install -D tailwindcss@^3.4.0 postcss autoprefixer
```

**B. PostCSS Configuration Error:**
```bash
# Error: "tailwindcss directly as a PostCSS plugin"
# Fix: Use standard configuration for v3
```

**Correct postcss.config.js:**
```javascript
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

**C. Tailwind Config Format:**
```javascript
// tailwind.config.js - Use this format for v3
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@t-one-internal/design-system/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // Your theme configuration
    },
  },
  plugins: [],
}
```

#### 2. Design System Import Errors

**Symptoms:**
- "Cannot find module" errors
- Components not importing correctly
- Missing exports

**Solutions:**

**A. Check Package Installation:**
```bash
npm install @t-one-internal/design-system
```

**B. Verify Import Paths:**
```javascript
// Correct import syntax
import { 
  Button, 
  Card, 
  CardContent, 
  Input, 
  Label 
} from '@t-one-internal/design-system'
```

**C. Check Package Structure:**
```bash
# Verify the package is installed correctly
ls node_modules/@t-one-internal/design-system/dist/
```

#### 3. Build Errors

**Symptoms:**
- Build fails with PostCSS errors
- CSS not generating
- Module resolution errors

**Solutions:**

**A. Clear Cache and Reinstall:**
```bash
rm -rf node_modules package-lock.json
npm install
```

**B. Check Vite Configuration:**
```javascript
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
})
```

**C. Verify CSS Import:**
```javascript
// src/main.jsx
import './index.css' // Make sure this is imported
```

#### 4. Component Styling Issues

**Symptoms:**
- Components render but look unstyled
- CSS variables not working
- Colors not applying

**Solutions:**

**A. Check CSS Variables:**
```css
/* src/index.css */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    /* ... more variables */
  }
}
```

**B. Verify Tailwind Directives:**
```css
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**C. Check Content Paths:**
Make sure your Tailwind config includes all necessary file paths:
```javascript
content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
  "./node_modules/@t-one-internal/design-system/**/*.{js,ts,jsx,tsx}",
]
```

#### 5. Development Server Issues

**Symptoms:**
- Server won't start
- Port conflicts
- HMR not working

**Solutions:**

**A. Kill Existing Processes:**
```bash
# Windows
taskkill /f /im node.exe

# macOS/Linux
pkill -f node
```

**B. Use Different Port:**
```bash
npm run dev -- --port 3001
```

**C. Clear Vite Cache:**
```bash
rm -rf node_modules/.vite
npm run dev
```

#### 6. Local Development Issues

**Symptoms:**
- Local lib folder not working
- Import errors with local setup
- Styling not applied in local development

**Solutions:**

**A. Follow Local Setup Instructions:**
```bash
# Download the lib folder and follow setup-instructions.md
# Make sure to install dependencies in the lib folder
cd lib
npm install
cd ..
```

**B. Check Import Paths for Local Development:**
```javascript
// For local development
import { Button, Card } from './lib';

// For npm package
import { Button, Card } from '@t-one-internal/design-system';
```

**C. Verify Tailwind Configuration for Local Development:**
```javascript
// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './lib/**/*.{js,ts,jsx,tsx}', // Add this line for local development
  ],
  // ... rest of config
}
```

### Still Having Issues?

If you're still experiencing problems:

1. **Check the console** for specific error messages
2. **Verify all dependencies** are installed correctly
3. **Clear all caches** and reinstall dependencies
4. **Check file paths** in your configuration files
5. **Ensure Tailwind CSS v3.4.0** is installed (not v4)
6. **Verify package version** matches your import statements
7. **Check Node.js version** compatibility (requires Node 16+)

### Getting Help

- **Check the package documentation** for latest updates
- **Review the setup instructions** in LOCAL_SETUP.md
- **Verify your environment** meets the requirements
- **Test with a minimal setup** to isolate issues# Design-System