@tr-workspace/components

Shared UI component library for TR workspace applications

A comprehensive, TypeScript-first React component library designed for rapid application development with consistent design and behavior across the TR workspace ecosystem.

🚀 Features

• Comprehensive Components: Forms, layout, navigation, data display, and feedback components
• Theme System: Advanced theming with progress-based unlocks and dark mode support
• Authentication Wrapper: Standardized Supabase integration
• TypeScript First: Full type safety and IntelliSense support
• Tailwind CSS: Utility-first styling with custom design system
• Accessibility: Built-in accessibility features across all components
• Compounding Development: Each new app leverages and enhances existing patterns

📦 Installation

npm install @tr-workspace/components

🎨 Usage

Basic Setup

import { ThemeProvider } from '@tr-workspace/components'
import '@tr-workspace/components/styles'

function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
    </ThemeProvider>
  )
}

Components

import { 
  Button, 
  Input, 
  Card, 
  CardHeader, 
  CardTitle, 
  CardContent 
} from '@tr-workspace/components'

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Sign In</CardTitle>
      </CardHeader>
      <CardContent>
        <Input
          label="Email"
          type="email"
          placeholder="Enter your email"
        />
        <Button className="mt-4">
          Submit
        </Button>
      </CardContent>
    </Card>
  )
}

Authentication Wrapper

import { AuthWrapper } from '@tr-workspace/components'
import { createClient } from './lib/supabase/client'
import LoginForm from './components/LoginForm'
import AppProvider from './components/AppProvider'

function App() {
  return (
    <AuthWrapper
      supabaseClient={createClient()}
      loginComponent={LoginForm}
      appProviderComponent={AppProvider}
    >
      {/* Your protected app content */}
    </AuthWrapper>
  )
}

Theme System

import { useTheme } from '@tr-workspace/components'

function ThemeSelector() {
  const { currentTheme, setTheme, unlockedThemes, darkMode, setDarkMode } = useTheme()
  
  return (
    <div>
      <button onClick={() => setDarkMode(!darkMode)}>
        Toggle Dark Mode
      </button>
      
      {unlockedThemes.map(theme => (
        <button
          key={theme}
          onClick={() => setTheme(theme)}
          className={currentTheme === theme ? 'active' : ''}
        >
          {theme}
        </button>
      ))}
    </div>
  )
}

🎯 Components

Form Components ✅

• Button - Versatile button with multiple variants and sizes
• Input - Enhanced input with validation and accessibility
• CurrencyInput - Specialized input for monetary values
• SearchBar - Advanced search with suggestions and filtering ⭐ NEW

Layout Components ✅

• Card - Flexible card container with headers, content, and footers
• MetricCard - Specialized card for displaying metrics and KPIs
• Panel - Advanced container with headers, actions, and grid layouts ⭐ NEW
• ProgressBar - Progress indicator with smooth animations

Data Components

• ProjectTable - Feature-rich data table with sorting and filtering

Specialized Components

• SlidePicker - PowerPoint template selection interface
• SlideVisualizer - Document and presentation preview
• AuthWrapper - Authentication state management

📱 Real-World Usage

Apps Successfully Using This Library:

• task-manager: Simple task management with basic components ✅
• project-dashboard: Advanced dashboard with metrics and progress tracking ✅
• floorplan2: Interactive floor plans with search and panels ✅
• dashboard-analytics: Portfolio analytics with complex data visualization

Component Evolution:

// SearchBar extracted from floorplan2 spatial search patterns
// Panel components extracted from floorplan2 calibration interface  
// MetricCard proven across project-dashboard and dashboard-analytics

🎨 Theming

The component library includes an advanced theme system with:

• 6 Built-in Themes: Classic, Terminal, Matrix, Cyberpunk, Neon, Elite
• Progress-based Unlocks: Themes unlock based on app usage/progress
• Dark Mode Support: Full dark mode for all themes
• CSS Custom Properties: Dynamic theming with CSS variables
• Theme Effects: Special visual effects for advanced themes (neon glow, elite shimmer)

🔄 Compounding Benefits

This library enables compounding development across TR workspace apps:

From accel-tracking

• ✅ Supabase authentication patterns
• ✅ Advanced theme system with unlocks
• ✅ AI integration infrastructure
• ✅ File upload components

From finance-reporting

• ✅ Data processing patterns
• ✅ Modern button design with variants
• ✅ Form validation patterns
• ✅ Professional table styling

New in slide-generator

• 🆕 Multi-modal content processing
• 🆕 Template schema system
• 🆕 Quality control layers
• 🆕 Cross-content consistency validation

🔧 Development Workflow

Component Development Cycle

1. Identify Pattern: Extract reusable patterns from apps
2. Build Generic: Create flexible, configurable component
3. Test Integration: Verify with existing apps
4. Document: Add examples and usage notes
5. Version: Use semantic versioning for releases

Building the Library

npm run build          # Clean build for production
npm run dev           # Watch mode for development
npm run typecheck     # Type checking only
npm run lint          # Code linting

Publishing Workflow

# For new features (minor)
npm run release:minor

# For bug fixes (patch)  
npm run release:patch

# For breaking changes (major)
npm run release:major

# Manual process
npm version patch && npm publish

Integration Testing

# Test with existing apps
cd ../task-manager && npm update @tr-workspace/components
cd ../project-dashboard && npm update @tr-workspace/components  
cd ../floorplan2 && npm update @tr-workspace/components

🤝 Contributing

1. Add new components in the appropriate category folder
2. Export from the category index file
3. Update the main index file
4. Add comprehensive TypeScript types
5. Follow the established design patterns

📄 License

MIT License - see LICENSE file for details