@datawire-ai/busyfile-design-library 1.0.4

package/README.md

@@ -0,0 +1,352 @@
+# BusyFile Design System
+
+A modern, accessible React component library built with TypeScript, Tailwind CSS, and Vite. Designed for building beautiful, consistent user interfaces with minimal setup.
+
+## ✨ Features
+
+-  **Modern Stack**: Built with React 19, TypeScript, and Tailwind CSS
+-  **Beautiful Design**: Clean, modern components with consistent styling
+-  **Accessible**: Built with accessibility in mind using Radix UI primitives
+-  **Responsive**: Mobile-first design that works on all screen sizes
+-  **TypeScript**: Full TypeScript support with excellent IntelliSense
+-  **Customizable**: Easy to customize with Tailwind CSS classes
+-  **Storybook**: Interactive component documentation and playground
+-  **Tested**: Built with testing in mind using Vitest
+
+## 📦 Installation
+
+```bash
+# Using npm
+npm install busyfile-design-system
+
+# Using yarn
+yarn add busyfile-design-system
+
+# Using pnpm
+pnpm add busyfile-design-system
+```
+
+## 🎯 Quick Start
+
+```tsx
+import { Button } from 'busyfile-design-system';
+
+function App() {
+  return (
+    <Button variant="default" onClick={() => alert('Hello!')}>
+      Click me
+    </Button>
+  );
+}
+```
+
+## 🎨 Components
+
+### Button
+
+A versatile button component with multiple variants, sizes, and states.
+
+#### Basic Usage
+
+```tsx
+import { Button } from 'busyfile-design-system';
+
+// Default button
+<Button>Click me</Button>
+
+// With variant
+<Button variant="destructive">Delete</Button>
+
+// With size
+<Button size="lg">Large Button</Button>
+
+// With custom styling
+<Button className="bg-gradient-to-r from-purple-500 to-pink-500">
+  Gradient Button
+</Button>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'` | `'default'` | The visual style variant of the button |
+| `size` | `'default' \| 'sm' \| 'lg' \| 'icon'` | `'default'` | The size of the button |
+| `asChild` | `boolean` | `false` | Whether to render as a different element using Radix UI Slot |
+| `className` | `string` | `undefined` | Additional CSS classes to apply |
+| `onClick` | `(event: React.MouseEvent<HTMLButtonElement>) => void` | `undefined` | Click event handler |
+| `disabled` | `boolean` | `false` | Whether the button is disabled |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | The type of button |
+
+#### Variants
+
+```tsx
+// Default - Blue button with white text
+<Button variant="default">Default</Button>
+
+// Destructive - Red button for dangerous actions
+<Button variant="destructive">Delete</Button>
+
+// Outline - Bordered button with transparent background
+<Button variant="outline">Outline</Button>
+
+// Secondary - Gray button for secondary actions
+<Button variant="secondary">Cancel</Button>
+
+// Ghost - Transparent button with hover effects
+<Button variant="ghost">Ghost</Button>
+
+// Link - Styled like a link
+<Button variant="link">Learn More</Button>
+```
+
+#### Sizes
+
+```tsx
+// Small - Compact button
+<Button size="sm">Small</Button>
+
+// Default - Standard size
+<Button size="default">Default</Button>
+
+// Large - Prominent button
+<Button size="lg">Large</Button>
+
+// Icon - Square button for icons
+<Button size="icon">
+  <PlusIcon />
+</Button>
+```
+
+#### Custom Styling
+
+```tsx
+// Override default styles with Tailwind classes
+<Button 
+  variant="outline"
+  className="bg-gradient-to-r from-blue-500 to-purple-600 text-white border-0 rounded-full px-8 py-3 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200"
+>
+  Custom Styled
+</Button>
+
+// Common customizations
+<Button className="bg-red-500 hover:bg-red-600 text-white rounded-full">
+  Rounded Red
+</Button>
+
+<Button className="border-2 border-dashed border-gray-400 bg-transparent text-gray-700">
+  Dashed Border
+</Button>
+
+<Button className="bg-green-500 hover:bg-green-600 text-white shadow-[0_0_20px_rgba(34,197,94,0.5)]">
+  Glow Effect
+</Button>
+```
+
+#### Advanced Usage
+
+```tsx
+import { Button } from 'busyfile-design-system';
+import { Heart, Download, Settings } from 'lucide-react';
+
+// Button with icon
+<Button>
+  <Heart className="mr-2" />
+  Like
+</Button>
+
+// Button as link
+<Button asChild>
+  <a href="/download" download>
+    <Download className="mr-2" />
+    Download
+  </a>
+</Button>
+
+// Disabled state
+<Button disabled variant="outline">
+  Processing...
+</Button>
+
+// Loading state with custom styling
+<Button 
+  disabled 
+  className="bg-blue-600 text-white opacity-75 cursor-not-allowed"
+>
+  <div className="animate-spin mr-2">⏳</div>
+  Loading...
+</Button>
+```
+
+## 🎨 Styling & Theming
+
+### Tailwind CSS Integration
+
+The design system is built on top of Tailwind CSS, making it easy to customize:
+
+```tsx
+// Use any Tailwind utility classes
+<Button className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white font-bold text-lg px-10 py-4 rounded-full shadow-2xl hover:shadow-3xl transform hover:scale-110 transition-all duration-300">
+  Fancy Button
+</Button>
+```
+
+### CSS Custom Properties
+
+You can also use CSS custom properties for consistent theming:
+
+```css
+:root {
+  --button-primary: #3b82f6;
+  --button-primary-hover: #2563eb;
+  --button-text: #ffffff;
+}
+
+.custom-button {
+  background-color: var(--button-primary);
+  color: var(--button-text);
+}
+
+.custom-button:hover {
+  background-color: var(--button-primary-hover);
+}
+```
+
+## 🚀 Development
+
+### Prerequisites
+
+- Node.js 18+ 
+- pnpm (recommended) or npm
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/your-username/busyfile-design-system.git
+cd busyfile-design-system
+
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+
+# Start Storybook
+pnpm storybook
+
+# Build the library
+pnpm build
+
+# Run tests
+pnpm test
+```
+
+### Project Structure
+
+```
+src/
+├── components/          # React components
+│   └── ui/            # UI components
+│       ├── button.tsx # Button component
+│       └── index.ts   # Component exports
+├── lib/                # Utility functions
+│   └── utils.ts       # Helper utilities
+├── styles.css          # Global styles
+├── App.tsx             # Demo application
+├── main.tsx            # Application entry point
+└── index.ts            # Main package exports
+```
+
+## 🧪 Testing
+
+```bash
+# Run all tests
+pnpm test
+
+# Run tests in watch mode
+pnpm test:watch
+
+# Run tests with coverage
+pnpm test:coverage
+
+# Run tests in browser
+pnpm test:browser
+```
+
+## 📚 Storybook
+
+Storybook provides an interactive playground for all components:
+
+```bash
+# Start Storybook
+pnpm storybook
+
+# Build Storybook
+pnpm build-storybook
+```
+
+Visit http://localhost:6006 to explore components, test props, and see examples.
+
+## 🔧 Configuration
+
+### Tailwind CSS
+
+The design system includes a pre-configured Tailwind CSS setup. You can extend it in your project:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/busyfile-design-system/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {
+      // Your custom theme extensions
+    }
+  },
+  plugins: []
+}
+```
+
+### TypeScript
+
+Full TypeScript support is included. No additional types package needed.
+
+## 📦 Building
+
+```bash
+# Build for production
+pnpm build
+
+# Build types
+pnpm build:types
+
+# Build Storybook
+pnpm build-storybook
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+### Development Workflow
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests
+5. Update documentation
+6. Submit a pull request
+
+
+## 🙏 Acknowledgments
+
+- [Radix UI](https://www.radix-ui.com/) for accessible primitives
+- [Tailwind CSS](https://tailwindcss.com/) for utility-first CSS
+- [Lucide React](https://lucide.dev/) for beautiful icons
+- [Storybook](https://storybook.js.org/) for component documentation
+
+
+Made with ❤️ by the BusyFile team