@datawire-ai/busyfile-design-library 1.0.6 → 1.0.7

package/README.md

@@ -1,223 +1,23 @@
 # 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.
+Design system library for Busyfile Applications
 
-## ✨ 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
+## 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
+## Development
 
 ### Prerequisites
 
-- Node.js 18+ 
-- pnpm (recommended) or npm
+- Node.js - v22.19
+- pnpm - v10.15
 
 ### Setup
 
@@ -242,6 +42,14 @@ pnpm build
 pnpm test
 ```
 
+### Development Workflow
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Create changeset `pnpm changeset:add && changeset:release`
+5. Submit a pull request
+
 ### Project Structure
 
 ```
@@ -258,7 +66,7 @@ src/
 └── index.ts            # Main package exports
 ```
 
-## 🧪 Testing
+## Testing
 
 ```bash
 # Run all tests
@@ -274,7 +82,7 @@ pnpm test:coverage
 pnpm test:browser
 ```
 
-## 📚 Storybook
+## Storybook
 
 Storybook provides an interactive playground for all components:
 
@@ -288,7 +96,7 @@ pnpm build-storybook
 
 Visit http://localhost:6006 to explore components, test props, and see examples.
 
-## 🔧 Configuration
+## Configuration
 
 ### Tailwind CSS
 
@@ -298,23 +106,23 @@ The design system includes a pre-configured Tailwind CSS setup. You can extend i
 // tailwind.config.js
 module.exports = {
   content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/busyfile-design-system/**/*.{js,ts,jsx,tsx}"
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/busyfile-design-system/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {
       // Your custom theme extensions
-    }
+    },
   },
-  plugins: []
-}
+  plugins: [],
+};
 ```
 
 ### TypeScript
 
 Full TypeScript support is included. No additional types package needed.
 
-## 📦 Building
+## Building
 
 ```bash
 # Build for production
@@ -327,26 +135,4 @@ pnpm build:types
 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