FT Design System

A comprehensive React component library built from Figma designs, featuring a modern design system with TypeScript and Tailwind CSS support.

🚀 Features

• 🎨 Figma-First Design: Components built directly from Figma specifications
• 📦 12+ Core Components: Including Table, Button, Badge, Checkbox, and more
• 🎯 190+ Icons: Comprehensive icon library with proper TypeScript definitions
• 💅 Tailwind CSS: Built with Tailwind for easy customization
• 📱 Responsive: Mobile-friendly and responsive design
• 🔍 TypeScript: Full TypeScript support with proper type definitions
• 📚 Storybook: Complete documentation and component playground

📥 Installation

# Install from npm
npm install ft-design-system

🔧 Usage

// Import components
import { Table, Button, Badge, Checkbox } from 'ft-design-system';

// Import styles in your main App.tsx or index.tsx
import 'ft-design-system/dist/styles.css';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Badge variant="default">Status</Badge>
    </div>
  );
}

🧩 Components

Table

• Primary and Secondary variants
• Sorting functionality
• Row selection with indeterminate state
• Pagination support
• Custom cell rendering

<Table 
  variant="primary"
  data={data}
  columns={columns}
  onSort={handleSort}
  selectable
/>

Button

• Multiple variants: primary, secondary, destructive, link
• Loading state
• Icon support
• Size variants

<Button variant="primary" loading={false}>
  Click me
</Button>

Badge

• Status indicators
• Multiple variants
• Icon support

Checkbox

• Indeterminate state
• Custom styling
• Label support

Input

• Text input with validation
• Icon support
• Error states

DatePicker

• Date selection
• Range selection
• Custom formatting

Icons

• 190+ custom icons
• SVG-based
• Color inheritance
• Size customization

🎨 Customization

Tailwind Configuration

The design system uses Tailwind CSS for styling. Make sure your project has Tailwind CSS configured:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/ft-design-system/**/*.{js,jsx,ts,tsx}'
  ],
  // ... rest of your config
}

🛠️ Development

# Install dependencies
npm install

# Run Storybook
npm run storybook

# Build package
npm run build

# Run tests
npm run test

# Share with designers (local network)
npm run share-storybook

# Setup automatic deployment to Netlify
npm run setup-deployment

📋 Maintaining Documentation

When adding or modifying components, always update the downloadable documentation:

# Check if docs are in sync with components
npm run update-docs

# After adding a new component:
# 1. Add to src/index.ts exports
# 2. Update src/stories/prompts/General.stories.tsx
# 3. Run npm run update-docs to verify
# 4. Test downloadable JSON/MDX files

Important: The downloadable AI integration files must stay in sync with actual component exports and props. This ensures developers get accurate information when using AI tools like Lovable.dev, ChatGPT, etc.

📦 Publishing

🚀 Interactive CLI (Recommended)

Use the interactive publishing CLI for a guided experience:

npm run publish

Quick Publishing Commands

# Validate package before publishing
npm run validate:package

# Create local package for testing
npm run publish:local

# Test publishing without actually publishing
npm run publish:dry-run

# Publish different version types
npm run publish:patch    # Bug fixes (1.0.1 → 1.0.2)
npm run publish:minor    # New features (1.0.1 → 1.1.0)
npm run publish:major    # Breaking changes (1.0.1 → 2.0.0)
npm run publish:beta     # Beta version for testing

# Publish to specific registries
npm run publish:github   # GitHub Packages (default)
npm run publish:npm      # Public npm registry

For detailed publishing instructions, see 📖 Publishing Guide

💖 Lovable.dev Integration

Your design system is Lovable-ready! Use it seamlessly in Lovable.dev projects:

# In your Lovable project
npm install ft-design-system

# Generate templates (run in design system repo)
npm run lovable:templates

See 📖 Lovable Integration Guide for complete setup instructions and examples.

🌐 Deployment & Sharing

For Designers

This project includes comprehensive designer collaboration tools:

• 📖 See DESIGN_COLLABORATION.md for Storybook usage guide
• 🎨 Interactive component playground with real-time controls
• 📱 Responsive testing and design specifications

Automatic Deployment

Deploy your Storybook automatically to Netlify:

• ✅ Auto-deploy on every GitHub push
• ✅ Preview URLs for pull requests
• ✅ Global CDN for fast worldwide access
• ✅ HTTPS enabled by default

# One-command setup
npm run setup-deployment

See DEPLOYMENT_GUIDE.md for detailed deployment instructions.

📚 Documentation

Full documentation is available in Storybook. Run npm run storybook to view it locally.

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a pull request.

📄 License

MIT © [Chetan FT]

🙏 Acknowledgments

• Built with Figma
• Powered by React
• Styled with Tailwind CSS