@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

package/src/stories/DataDisplay/Card.stories.tsx

@@ -1,87 +1,502 @@
-import { Stack } from '@mui/material';
-import { Meta } from '@storybook/react';
-import { Card, CardProps } from '../../components/DataDisplay/Card/Card';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardRoot,
+  CardTitle,
+  CircularAvatar,
+  StatusCard,
+  Typography,
+} from '@/components/export';
+import {
+  BarChart3,
+  Bell,
+  BookOpen,
+  Calendar,
+  CheckCircle2,
+  Clock,
+  FileText,
+  Info,
+  Mail,
+  MapPin,
+  MoreVertical,
+  Settings,
+  TrendingUp,
+  Users,
+  X,
+} from 'lucide-react';
 
-export default {
+const meta: Meta<typeof Card> = {
   title: 'DataDisplay/Card',
   component: Card,
   tags: ['autodocs'],
-  argTypes: {},
-} as Meta<typeof Card>;
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Card title displayed in the header',
+    },
+    description: {
+      control: 'text',
+      description: 'Card description displayed below the title',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
 
-export const Standard = {
-  render: (args: CardProps) => <Card {...args} />,
+// Basic card with props
+export const Basic: Story = {
   args: {
-    title: 'Academic Administrator WS',
-    caption:
-      'A centralized hub designed to streamline and manage administrative tasks efficiently.',
-    fields: [
-      {
-        title: 'Start year / End Year',
-        value: '2024 / 2028',
-      },
-      {
-        title: 'Current Sem',
-        value: '1',
-      },
-      {
-        title: 'Total Students',
-        value: '1324',
-      },
-    ],
-    footer: {
-      buttonText: 'View Details',
-      onClick: () => alert(`Details Viewed`),
-    },
+    title: 'Card Title',
+    description: 'This is a simple card with a title and description.',
+    content: <Typography>This is the main content of the card.</Typography>,
   },
 };
-export const StandardWithImage = {
-  render: (args: CardProps) => (
-    <Stack flexDirection={'row'} gap={'20px'}>
-      <Card {...args} /> <Card {...args} /> <Card {...args} />{' '}
-    </Stack>
-  ),
 
+// Card with all props
+export const WithAllProps: Story = {
   args: {
-    title: 'ECE 2024 - 25',
-    caption: 'Started on July 24, 2024',
-    status: 'Active',
-    fields: [
-      {
-        title: 'Start year / End Year',
-        value: '2024 / 2028',
-      },
-      {
-        title: 'Current Sem',
-        value: '1',
-      },
-      {
-        title: 'Total Students',
-        value: '1324',
-      },
-      {
-        title: 'Total Students',
-        value: '1324',
-      },
-      {
-        title: 'Total Students',
-        value: '1324',
-      },
-    ],
-    footer: {
-      buttonText: 'View Details',
-      onClick: () => alert(`Details Viewed`),
-    },
-    imageSrc:
-      'https://i.pinimg.com/564x/aa/a5/90/aaa5903de24897afa5b07fd9f4092866.jpg',
-    moreOptions: true,
+    title: 'Academic Administrator WS',
+    description:
+      'A centralized hub designed to streamline and manage administrative tasks efficiently.',
+    actions: (
+      <Button variant="ghost" size="icon">
+        <MoreVertical className="h-4 w-4" />
+      </Button>
+    ),
+    content: (
+      <div className="space-y-4">
+        <div className="flex justify-between">
+          <Typography variant="muted">Start year / End Year</Typography>
+          <Typography variant="p">2024 / 2028</Typography>
+        </div>
+        <div className="flex justify-between">
+          <Typography variant="muted">Current Sem</Typography>
+          <Typography variant="p">1</Typography>
+        </div>
+        <div className="flex justify-between">
+          <Typography variant="muted">Total Students</Typography>
+          <Typography variant="p">1324</Typography>
+        </div>
+      </div>
+    ),
+    footer: (
+      <Button variant="outline" className="w-full">
+        View Details
+      </Button>
+    ),
   },
 };
 
-export const Statistic = {
-  render: (args: CardProps) => <Card {...args} />,
+// Card with status badge
+export const WithStatusBadge: Story = {
   args: {
     title: 'ECE 2024 - 25',
-    caption: 'Started on July 24, 2024',
+    description: 'Started on July 24, 2024',
+    actions: <StatusCard color="green" text="Active" />,
+    content: (
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <Typography variant="muted">Students</Typography>
+          <Typography variant="h3">1,324</Typography>
+        </div>
+        <div>
+          <Typography variant="muted">Faculty</Typography>
+          <Typography variant="h3">45</Typography>
+        </div>
+        <div>
+          <Typography variant="muted">Courses</Typography>
+          <Typography variant="h3">28</Typography>
+        </div>
+        <div>
+          <Typography variant="muted">Sections</Typography>
+          <Typography variant="h3">12</Typography>
+        </div>
+      </div>
+    ),
+    footer: (
+      <div className="flex gap-2 w-full">
+        <Button variant="outline" className="flex-1">
+          Edit
+        </Button>
+        <Button className="flex-1">View Details</Button>
+      </div>
+    ),
   },
 };
+
+// Card with avatar and user info
+export const UserProfile: Story = {
+  render: () => (
+    <Card className="w-96">
+      <CardHeader>
+        <div className="flex items-start gap-4">
+          <CircularAvatar
+            text="John Doe"
+            src="https://i.pravatar.cc/150?img=12"
+            className="h-16 w-16"
+          />
+          <div className="flex-1">
+            <CardTitle>John Doe</CardTitle>
+            <CardDescription>Senior Software Engineer</CardDescription>
+          </div>
+          <CardAction>
+            <Button variant="ghost" size="icon">
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </CardAction>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Mail className="h-4 w-4 text-muted-foreground" />
+            <Typography variant="small">john.doe@example.com</Typography>
+          </div>
+          <div className="flex items-center gap-2">
+            <MapPin className="h-4 w-4 text-muted-foreground" />
+            <Typography variant="small">San Francisco, CA</Typography>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          View Profile
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+// Statistics card
+export const StatisticsCard: Story = {
+  render: () => (
+    <Card className="w-72">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle>Total Students</CardTitle>
+          <Users className="h-8 w-8 text-primary" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          <Typography variant="h1">2,845</Typography>
+          <div className="flex items-center gap-2">
+            <StatusCard color="green" text="+12.5%" />
+            <Typography variant="muted">from last month</Typography>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// Action card with icon buttons
+export const ActionCard: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <CardTitle>Quick Actions</CardTitle>
+        <CardDescription>Frequently used administrative tasks</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-3 gap-4">
+          <Button variant="outline" className="flex flex-col h-20 gap-2">
+            <Users className="h-6 w-6" />
+            <Typography variant="small">Students</Typography>
+          </Button>
+          <Button variant="outline" className="flex flex-col h-20 gap-2">
+            <BarChart3 className="h-6 w-6" />
+            <Typography variant="small">Reports</Typography>
+          </Button>
+          <Button variant="outline" className="flex flex-col h-20 gap-2">
+            <Settings className="h-6 w-6" />
+            <Typography variant="small">Settings</Typography>
+          </Button>
+          <Button variant="outline" className="flex flex-col h-20 gap-2">
+            <CheckCircle2 className="h-6 w-6" />
+            <Typography variant="small">Attendance</Typography>
+          </Button>
+          <Button variant="outline" className="flex flex-col h-20 gap-2">
+            <FileText className="h-6 w-6" />
+            <Typography variant="small">Exams</Typography>
+          </Button>
+          <Button variant="outline" className="flex flex-col h-20 gap-2">
+            <Bell className="h-6 w-6" />
+            <Typography variant="small">Notify</Typography>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// Notification card
+export const NotificationCard: Story = {
+  render: () => (
+    <Card className="w-96">
+      <CardHeader>
+        <div className="flex items-start gap-3">
+          <Info className="h-5 w-5 text-blue-500 mt-1" />
+          <div className="flex-1">
+            <CardTitle>System Update Available</CardTitle>
+            <CardDescription>2 hours ago</CardDescription>
+          </div>
+          <CardAction>
+            <Button variant="ghost" size="icon-sm">
+              <X className="h-4 w-4" />
+            </Button>
+          </CardAction>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Typography>
+          A new system update is available with performance improvements and bug
+          fixes. Update now to get the latest features.
+        </Typography>
+      </CardContent>
+      <CardFooter>
+        <div className="flex gap-2 w-full">
+          <Button variant="outline" className="flex-1">
+            Remind Later
+          </Button>
+          <Button className="flex-1">Update Now</Button>
+        </div>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+// Course card with image
+export const CourseCard: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardContent className="p-0">
+        <img
+          src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=200&fit=crop"
+          alt="Course"
+          className="w-full h-48 object-cover rounded-t-xl"
+        />
+      </CardContent>
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle>Advanced React Patterns</CardTitle>
+            <CardDescription>Web Development</CardDescription>
+          </div>
+          <StatusCard color="blue" text="New" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Users className="h-4 w-4 text-muted-foreground" />
+            <Typography variant="small">145 students enrolled</Typography>
+          </div>
+          <div className="flex items-center gap-2">
+            <Clock className="h-4 w-4 text-muted-foreground" />
+            <Typography variant="small">8 weeks duration</Typography>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Enroll Now</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+// Event card
+export const EventCard: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="flex gap-3">
+            <div className="flex flex-col items-center justify-center bg-primary text-primary-foreground rounded-lg p-2 w-14">
+              <Typography variant="small" className="font-semibold">
+                MAR
+              </Typography>
+              <Typography variant="h3">24</Typography>
+            </div>
+            <div>
+              <CardTitle>Annual Tech Conference</CardTitle>
+              <CardDescription>Technology & Innovation</CardDescription>
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Clock className="h-4 w-4 text-muted-foreground" />
+            <Typography variant="small">9:00 AM - 5:00 PM</Typography>
+          </div>
+          <div className="flex items-center gap-2">
+            <MapPin className="h-4 w-4 text-muted-foreground" />
+            <Typography variant="small">Convention Center, Hall A</Typography>
+          </div>
+          <div className="flex items-center gap-2">
+            <Users className="h-4 w-4 text-muted-foreground" />
+            <Typography variant="small">250+ attendees</Typography>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Register Now</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+// Custom composition with CardRoot
+export const CustomComposition: Story = {
+  render: () => (
+    <CardRoot className="w-96">
+      <CardHeader>
+        <CardTitle>Custom Card Layout</CardTitle>
+        <CardDescription>
+          Built using CardRoot and individual components
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Typography>
+          This card demonstrates complete flexibility using the composition
+          pattern. You can arrange components however you like.
+        </Typography>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="ghost">Cancel</Button>
+        <div className="flex gap-2">
+          <Button variant="outline">Save Draft</Button>
+          <Button>Publish</Button>
+        </div>
+      </CardFooter>
+    </CardRoot>
+  ),
+};
+
+// Simple content card
+export const SimpleContent: Story = {
+  render: () => (
+    <Card className="w-96">
+      <CardContent>
+        <Typography>
+          This is a simple card with just content, no header or footer.
+          Sometimes simplicity is all you need.
+        </Typography>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// Multiple cards showcase
+export const Showcase: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
+      <Card
+        title="Total Revenue"
+        description="Last 30 days"
+        actions={<TrendingUp className="h-5 w-5 text-green-500" />}
+        content={
+          <div>
+            <Typography variant="h2">$45,231.89</Typography>
+            <div className="flex items-center gap-2 mt-2">
+              <StatusCard color="green" text="+20.1%" />
+              <Typography variant="muted">from last month</Typography>
+            </div>
+          </div>
+        }
+      />
+      <Card
+        title="Active Users"
+        description="Current month"
+        actions={<Users className="h-5 w-5 text-blue-500" />}
+        content={
+          <div>
+            <Typography variant="h2">2,350</Typography>
+            <div className="flex items-center gap-2 mt-2">
+              <StatusCard color="green" text="+180" />
+              <Typography variant="muted">new users</Typography>
+            </div>
+          </div>
+        }
+      />
+      <Card
+        title="Pending Tasks"
+        description="Requires attention"
+        actions={
+          <Button variant="ghost" size="icon-sm">
+            <MoreVertical className="h-4 w-4" />
+          </Button>
+        }
+        content={
+          <div>
+            <Typography variant="h2">23</Typography>
+            <div className="flex items-center gap-2 mt-2">
+              <StatusCard color="orange" text="5 urgent" />
+              <Typography variant="muted">due today</Typography>
+            </div>
+          </div>
+        }
+        footer={
+          <Button variant="outline" className="w-full">
+            View All Tasks
+          </Button>
+        }
+      />
+      <Card
+        title="Upcoming Events"
+        description="This week"
+        actions={<Calendar className="h-5 w-5 text-purple-500" />}
+        content={
+          <div>
+            <Typography variant="h2">8</Typography>
+            <div className="flex items-center gap-2 mt-2">
+              <StatusCard color="blue" text="3 today" />
+              <Typography variant="muted">scheduled</Typography>
+            </div>
+          </div>
+        }
+      />
+      <Card
+        title="Course Progress"
+        description="Overall completion"
+        actions={<BookOpen className="h-5 w-5 text-orange-500" />}
+        content={
+          <div>
+            <Typography variant="h2">78%</Typography>
+            <div className="flex items-center gap-2 mt-2">
+              <StatusCard color="green" text="+15%" />
+              <Typography variant="muted">this month</Typography>
+            </div>
+          </div>
+        }
+      />
+      <Card
+        title="Notifications"
+        description="Unread messages"
+        actions={<Bell className="h-5 w-5 text-red-500" />}
+        content={
+          <div>
+            <Typography variant="h2">12</Typography>
+            <div className="flex items-center gap-2 mt-2">
+              <StatusCard color="red" text="4 urgent" />
+              <Typography variant="muted">need action</Typography>
+            </div>
+          </div>
+        }
+      />
+    </div>
+  ),
+};

package/src/stories/DataDisplay/Chip.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Chip } from '../../components/DataDisplay/Chip/Chip';
+
+const meta: Meta<typeof Chip> = {
+  title: 'DataDisplay/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Text content displayed in the chip',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'destructive', 'outline'],
+      description: 'Badge variant style',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  args: {
+    label: 'Chip',
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    label: 'Custom Styled',
+    variant: 'secondary',
+    className: 'px-2 py-1',
+  },
+};
+
+export const MultipleChips: Story = {
+  render: () => (
+    <div className="flex gap-2 flex-wrap">
+      <Chip label="Default" variant="default" />
+      <Chip label="Secondary" variant="secondary" />
+      <Chip label="Destructive" variant="destructive" />
+      <Chip label="Outline" variant="outline" />
+    </div>
+  ),
+};