ri-platform-ui-library/README.md

Shared UI components library for Recruiter Intelligence Platform

# RI Platform UI Library

A comprehensive UI component library for the Recruiter Intelligence Platform, built with Vue 3, TypeScript, and Tailwind CSS.

## 🚀 Installation

### From NPM (Production)

```bash
npm install @ri-platform/ui-library
```

### From Local Development

```bash
npm install file:../ri-ui-library
```

## 📦 Usage

### Nuxt 3 Plugin Setup

Create a plugin file `plugins/ui-library.client.ts`:

```typescript
import { defineNuxtPlugin } from '#app'
import UILibrary from '@ri-platform/ui-library'
import '@ri-platform/ui-library/dist/style.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(UILibrary)
})
```

### Vue 3 App Setup

```typescript
import { createApp } from 'vue'
import UILibrary from '@ri-platform/ui-library'
import '@ri-platform/ui-library/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(UILibrary)
app.mount('#app')
```

## 🧩 Components

### Atoms
- `BaseButton` - Versatile button component
- `BaseInput` - Form input component
- `BaseCard` - Container component
- `BaseBadge` - Status/label badge
- `BaseAvatar` - User avatar component
- `BaseIcon` - Icon component
- `BaseProgress` - Progress bar component

### Molecules
- `TalentCard` - Talent profile card
- `SearchBar` - Search input with filters
- `FormField` - Complete form field with label/error
- `StatusBadge` - Status indicator badge
- `MetricCard` - Metric display card

### Organisms
- `JobCard` - Job listing card
- `AppHeader` - Application header
- `AppSidebar` - Navigation sidebar
- `DataTable` - Data table with sorting/filtering
- `BaseModal` - Modal dialog

## 🎨 Usage Examples

### Basic Component Usage

```vue
<template>
  <div>
    <!-- Atoms -->
    <BaseButton variant="primary" size="md" @click="handleClick">
      Click Me
    </BaseButton>
    
    <BaseInput 
      v-model="searchTerm" 
      placeholder="Search..." 
      size="md"
    />
    
    <!-- Molecules -->
    <TalentCard 
      :talent="talentData"
      :max-skills="5"
      :match-score="85"
      @click="viewTalent"
    />
    
    <!-- Organisms -->
    <JobCard 
      :job="jobData"
      :show-actions="true"
      @apply="handleApply"
      @save="handleSave"
    />
  </div>
</template>

<script setup>
// Components are auto-imported when using the plugin
const searchTerm = ref('')

const handleClick = () => {
  console.log('Button clicked!')
}
</script>
```

### TalentCard Example

```vue
<template>
  <TalentCard
    :talent="talentProfile"
    variant="default"
    :max-skills="5"
    :match-score="92"
    @click="viewProfile"
  />
</template>

<script setup>
interface TalentProfile {
  id: string
  name: string
  email: string
  currentRole?: string
  company?: string
  location: string
  experience: number
  skills: string[]
  avatar?: string
}

const talentProfile: TalentProfile = {
  id: '1',
  name: 'John Doe',
  email: 'john@example.com',
  currentRole: 'Senior Developer',
  company: 'Tech Corp',
  location: 'San Francisco, CA',
  experience: 5,
  skills: ['Vue.js', 'TypeScript', 'Node.js'],
  avatar: '/avatar.jpg'
}

const viewProfile = (talent: TalentProfile) => {
  console.log('Viewing profile:', talent)
}
</script>
```

## 🔧 Development

### Building the Library

```bash
# Install dependencies
npm install

# Build for production
npm run build

# Build with type declarations
npm run build:full

# Watch mode for development
npm run build:watch
```

### Publishing

```bash
# Dry run to test
npm publish --dry-run

# Publish to npm
npm publish --access=public

# Or use the publish script
./publish.sh
```

### Local Development

1. Link the library locally:
```bash
cd ri-ui-library
npm link

cd ../your-project
npm link @ri-platform/ui-library
```

2. Or install as file dependency:
```bash
npm install file:../ri-ui-library
```

## 📁 Project Structure

```
ri-ui-library/
├── src/
│   ├── components/
│   │   ├── atoms/          # Basic components
│   │   ├── molecules/      # Composite components
│   │   └── organisms/      # Complex components
│   ├── tokens/             # Design tokens
│   ├── types/              # TypeScript types
│   └── index.ts            # Main export
├── dist/                   # Built files
├── package.json
├── vite.config.ts
└── README.md
```

## 🎯 Design Tokens

Access design tokens for consistent styling:

```typescript
import { designTokens } from '@ri-platform/ui-library'

// Usage
const primaryColor = designTokens.colors.primary[500]
const spacing = designTokens.spacing.md
```

## 🔍 TypeScript Support

The library includes full TypeScript support with:
- Component prop types
- Event types  
- Design token types
- Utility types

## 🎨 Tailwind CSS

The library uses Tailwind CSS for styling. Make sure your project has Tailwind CSS configured.

## 📱 Responsive Design

All components are built with responsive design in mind and work across:
- Mobile (sm: 640px+)
- Tablet (md: 768px+) 
- Desktop (lg: 1024px+)
- Large Desktop (xl: 1280px+)

## 🚀 Production Deployment

### Using CI/CD

```yaml
# .github/workflows/publish.yml
name: Publish Package
on:
  push:
    tags:
      - 'v*'

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          registry-url: 'https://registry.npmjs.org'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
      
      - name: Publish
        run: npm publish --access=public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

### Manual Publishing

```bash
# Update version
npm version patch # or minor/major

# Build and publish
npm run build
npm publish --access=public
```

## 📄 License

MIT License - see LICENSE file for details.

## 🤝 Contributing

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

## 📞 Support

For support and questions:
- Create an issue on GitHub
- Contact the development team
- Check the documentation

---

Built with ❤️ for the Recruiter Intelligence Platform