feat: add DC v2

Author: rob-at-cortex

src/components/DigitalColleagues/AddEpicModal.stories.tsx

@@ -0,0 +1,45 @@
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { AddEpicModal } from './AddEpicModal';
+
+const meta: Meta<typeof AddEpicModal> = {
+  title: 'Digital Colleagues/AddEpicModal',
+  component: AddEpicModal,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the modal is open',
+    },
+    onClose: {
+      action: 'modal closed',
+      description: 'Function called when modal is closed',
+    },
+    onAddEpic: {
+      action: 'epic added',
+      description: 'Function called when epic is added',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AddEpicModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onClose: action('onClose'),
+    onAddEpic: action('onAddEpic'),
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+    onClose: action('onClose'),
+    onAddEpic: action('onAddEpic'),
+  },
+};

src/components/DigitalColleagues/AddEpicModal.tsx

@@ -0,0 +1,117 @@
+
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Epic } from './KanbanBoard';
+
+interface AddEpicModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAddEpic: (epic: Omit<Epic, 'id'>) => void;
+}
+
+export const AddEpicModal: React.FC<AddEpicModalProps> = ({
+  isOpen,
+  onClose,
+  onAddEpic,
+}) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    color: 'bg-blue-500',
+  });
+
+  const colorOptions = [
+    'bg-blue-500',
+    'bg-green-500',
+    'bg-purple-500',
+    'bg-orange-500',
+    'bg-red-500',
+    'bg-yellow-500',
+    'bg-pink-500',
+    'bg-indigo-500',
+  ];
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (formData.name.trim()) {
+      onAddEpic({
+        name: formData.name.trim(),
+        description: formData.description.trim(),
+        color: formData.color,
+      });
+      setFormData({
+        name: '',
+        description: '',
+        color: 'bg-blue-500',
+      });
+      onClose();
+    }
+  };
+
+  const handleChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add New Epic</DialogTitle>
+        </DialogHeader>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Epic Name</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => handleChange('name', e.target.value)}
+              placeholder="Enter epic name"
+              required
+            />
+          </div>
+          
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => handleChange('description', e.target.value)}
+              placeholder="Enter epic description (optional)"
+              rows={3}
+            />
+          </div>
+          
+          <div className="space-y-2">
+            <Label>Color</Label>
+            <div className="flex gap-2 flex-wrap">
+              {colorOptions.map(color => (
+                <button
+                  key={color}
+                  type="button"
+                  onClick={() => handleChange('color', color)}
+                  className={`w-8 h-8 rounded-full ${color} ${
+                    formData.color === color ? 'ring-2 ring-gray-400' : ''
+                  }`}
+                />
+              ))}
+            </div>
+          </div>
+          
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
+              Add Epic
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/DigitalColleagues/AddTaskModal.stories.tsx

@@ -0,0 +1,90 @@
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { AddTaskModal } from './AddTaskModal';
+
+const mockEpics = [
+  { id: 'epic1', name: 'User Authentication', color: 'bg-blue-500', description: 'Secure login system' },
+  { id: 'epic2', name: 'Dashboard Features', color: 'bg-green-500', description: 'Dashboard functionality' },
+  { id: 'epic3', name: 'Mobile Optimization', color: 'bg-purple-500', description: 'Mobile responsive design' },
+];
+
+const mockSprints = [
+  { id: 'backlog', name: 'Backlog', description: 'Tasks not assigned', startDate: new Date('2024-01-01'), endDate: new Date('2024-12-31'), isActive: false },
+  { id: 'sprint1', name: 'Sprint 1', description: 'Current sprint', startDate: new Date('2024-01-01'), endDate: new Date('2024-01-14'), isActive: true },
+  { id: 'sprint2', name: 'Sprint 2', description: 'Next sprint', startDate: new Date('2024-01-15'), endDate: new Date('2024-01-28'), isActive: false },
+];
+
+const meta: Meta<typeof AddTaskModal> = {
+  title: 'Digital Colleagues/AddTaskModal',
+  component: AddTaskModal,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the modal is open',
+    },
+    onClose: {
+      action: 'modal closed',
+      description: 'Function called when modal is closed',
+    },
+    onAddTask: {
+      action: 'task added',
+      description: 'Function called when task is added',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AddTaskModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    epics: mockEpics,
+    sprints: mockSprints,
+    onClose: action('onClose'),
+    onAddTask: action('onAddTask'),
+  },
+};
+
+export const WithManyEpics: Story = {
+  args: {
+    isOpen: true,
+    epics: [
+      ...mockEpics,
+      { id: 'epic4', name: 'API Integration', color: 'bg-orange-500', description: 'Third-party APIs' },
+      { id: 'epic5', name: 'Performance', color: 'bg-red-500', description: 'Speed improvements' },
+      { id: 'epic6', name: 'Security', color: 'bg-yellow-500', description: 'Security enhancements' },
+    ],
+    sprints: mockSprints,
+    onClose: action('onClose'),
+    onAddTask: action('onAddTask'),
+  },
+};
+
+export const WithManySprints: Story = {
+  args: {
+    isOpen: true,
+    epics: mockEpics,
+    sprints: [
+      ...mockSprints,
+      { id: 'sprint3', name: 'Sprint 3', description: 'Future sprint', startDate: new Date('2024-01-29'), endDate: new Date('2024-02-11'), isActive: false },
+      { id: 'sprint4', name: 'Sprint 4', description: 'Planning phase', startDate: new Date('2024-02-12'), endDate: new Date('2024-02-25'), isActive: false },
+    ],
+    onClose: action('onClose'),
+    onAddTask: action('onAddTask'),
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+    epics: mockEpics,
+    sprints: mockSprints,
+    onClose: action('onClose'),
+    onAddTask: action('onAddTask'),
+  },
+};