@digilogiclabs/saas-factory-ui 0.7.3 → 0.10.0

package/README.md

@@ -206,10 +206,24 @@ The library supports CSS custom properties for consistent theming:
 
 ### 🌐 Web-Specific Components
 
+- `Alert` - Contextual feedback messages
+- `Avatar` - User profile pictures and initials
 - `Badge` - Status indicators and counts
+- `Checkbox` - Boolean input controls
+- `DataTable` - Sortable data tables with pagination support
+- `Dialog` - Modal dialogs and overlays
+- `DropdownMenu` - Contextual action menus
+- `Form` - Form validation and state management
 - `Input` - Text input fields with validation
 - `Label` - Accessible form labels
+- `Modal` - Simple modal wrapper component
+- `Pagination` - Data navigation with page controls
+- `Progress` - Progress indicators and loading bars
+- `Select` - Dropdown selection controls
 - `Skeleton` - Loading state placeholders
+- `Tabs` - Tabbed content navigation
+- `Toast` - Notification messages
+- `Tooltip` - Contextual help and information
 
 ### 📱 Native-Specific Components
 
@@ -345,6 +359,317 @@ See [MIGRATION.md](MIGRATION.md) for detailed upgrade instructions.
 - Storybook documentation
 - Performance optimizations
 
+## 📖 Component Examples
+
+### DataTable with Pagination
+
+```tsx
+import { DataTable, Pagination, PaginationInfo } from '@digilogiclabs/saas-factory-ui';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+}
+
+const columns = [
+  { key: 'name', header: 'Name' },
+  { key: 'email', header: 'Email' },
+  { key: 'role', header: 'Role' },
+  {
+    key: 'status',
+    header: 'Status',
+    render: (value: string) => (
+      <Badge variant={value === 'active' ? 'default' : 'secondary'}>
+        {value}
+      </Badge>
+    )
+  }
+];
+
+function UserTable() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+  
+  const totalPages = Math.ceil(users.length / itemsPerPage);
+  const paginatedUsers = users.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+
+  return (
+    <div className="space-y-4">
+      <DataTable
+        data={paginatedUsers}
+        columns={columns}
+        onRowClick={(user) => console.log('Selected user:', user)}
+      />
+      
+      <div className="flex items-center justify-between">
+        <PaginationInfo
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalItems={users.length}
+          itemsPerPage={itemsPerPage}
+        />
+        
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+### Modal with Form
+
+```tsx
+import { Modal, Button, Input, Label } from '@digilogiclabs/saas-factory-ui';
+
+function CreateUserModal() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [formData, setFormData] = useState({ name: '', email: '' });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle form submission
+    console.log('Creating user:', formData);
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>
+        Create User
+      </Button>
+      
+      <Modal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Create New User"
+        description="Add a new user to your organization"
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+              placeholder="Enter user name"
+            />
+          </div>
+          
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={formData.email}
+              onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
+              placeholder="Enter email address"
+            />
+          </div>
+          
+          <div className="flex justify-end space-x-2">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit">
+              Create User
+            </Button>
+          </div>
+        </form>
+      </Modal>
+    </>
+  );
+}
+```
+
+### Dropdown Menu with Actions
+
+```tsx
+import { 
+  DropdownMenu, 
+  DropdownMenuTrigger, 
+  DropdownMenuContent, 
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  Button 
+} from '@digilogiclabs/saas-factory-ui';
+import { MoreHorizontal, Edit, Trash, Eye } from 'lucide-react';
+
+function ActionsDropdown({ item }: { item: any }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => console.log('View', item)}>
+          <Eye className="mr-2 h-4 w-4" />
+          View Details
+        </DropdownMenuItem>
+        
+        <DropdownMenuItem onClick={() => console.log('Edit', item)}>
+          <Edit className="mr-2 h-4 w-4" />
+          Edit
+        </DropdownMenuItem>
+        
+        <DropdownMenuSeparator />
+        
+        <DropdownMenuItem 
+          onClick={() => console.log('Delete', item)}
+          className="text-destructive"
+        >
+          <Trash className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+### Tooltip Usage
+
+```tsx
+import { Tooltip, Button } from '@digilogiclabs/saas-factory-ui';
+import { HelpCircle } from 'lucide-react';
+
+function HelpButton() {
+  return (
+    <Tooltip content="Click here to get help with this feature">
+      <Button variant="ghost" size="sm">
+        <HelpCircle className="h-4 w-4" />
+      </Button>
+    </Tooltip>
+  );
+}
+
+// Complex tooltip with custom content
+function ComplexTooltip() {
+  return (
+    <Tooltip
+      content={
+        <div className="space-y-1">
+          <p className="font-semibold">Keyboard Shortcut</p>
+          <p className="text-xs">Press <kbd className="px-1 py-0.5 bg-muted rounded">Ctrl+K</kbd> to open</p>
+        </div>
+      }
+      side="right"
+    >
+      <Button>Search</Button>
+    </Tooltip>
+  );
+}
+```
+
+### Card Composition
+
+```tsx
+import { Card, Badge, Button, Avatar } from '@digilogiclabs/saas-factory-ui';
+
+function UserProfileCard({ user }: { user: User }) {
+  return (
+    <Card className="p-6">
+      <div className="flex items-start justify-between">
+        <div className="flex items-center space-x-4">
+          <Avatar>
+            <img src={user.avatar} alt={user.name} />
+          </Avatar>
+          
+          <div>
+            <h3 className="font-semibold text-lg">{user.name}</h3>
+            <p className="text-muted-foreground">{user.email}</p>
+          </div>
+        </div>
+        
+        <Badge variant={user.status === 'active' ? 'default' : 'secondary'}>
+          {user.status}
+        </Badge>
+      </div>
+      
+      <div className="mt-4 pt-4 border-t">
+        <div className="flex justify-between items-center">
+          <span className="text-sm text-muted-foreground">
+            Role: {user.role}
+          </span>
+          
+          <div className="space-x-2">
+            <Button variant="outline" size="sm">
+              Edit
+            </Button>
+            <Button size="sm">
+              View Profile
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
+```
+
+## 🎨 Theming Guide
+
+### Custom Theme Configuration
+
+Create a custom theme by extending the default CSS variables:
+
+```css
+/* custom-theme.css */
+:root {
+  /* Primary colors */
+  --primary: 262 83% 58%;        /* Purple */
+  --primary-foreground: 0 0% 98%;
+
+  /* Secondary colors */
+  --secondary: 220 14% 96%;
+  --secondary-foreground: 220 9% 46%;
+
+  /* Accent colors */
+  --accent: 262 83% 58%;
+  --accent-foreground: 0 0% 98%;
+
+  /* Custom border radius */
+  --radius: 0.75rem;
+}
+
+/* Dark mode overrides */
+.dark {
+  --primary: 262 83% 58%;
+  --primary-foreground: 0 0% 98%;
+  --background: 224 71% 4%;
+  --foreground: 213 31% 91%;
+}
+```
+
+### Component Customization
+
+```tsx
+// Custom button with your brand colors
+<Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600">
+  Gradient Button
+</Button>
+
+// Custom card with shadow
+<Card className="shadow-xl border-0 bg-gradient-to-br from-white to-gray-50">
+  <div className="p-6">
+    Custom styled card
+  </div>
+</Card>
+```
+
 ## 📝 TypeScript Support
 
 Full TypeScript support with platform-specific types: