@syscore/ui-library 1.25.0 → 2.0.0

package/client/ui/Card.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
 
 import {
   Card,
@@ -8,6 +7,10 @@ import {
   CardTitle,
   CardDescription,
   CardContent,
+  CardMedia,
+  CardBadge,
+  CardActions,
+  CardMetric,
   CardWithIcon,
 } from "../components/ui/card";
 import { Button } from "../components/ui/button";
@@ -36,29 +39,63 @@ import {
 import { UtilityReset } from "../components/icons/UtilityReset";
 
 const meta = {
-  title: "Review/Card",
+  title: "UI/Card",
   component: Card,
   tags: ["autodocs"],
   parameters: {
     layout: "padded",
     docs: {
-      source: {
-        type: "code",
+      description: {
+        component: [
+          "Flexible card component with variants and composable sub-parts.",
+          "",
+          "**Import:**",
+          "```tsx",
+          `import {`,
+          `  Card, CardHeader, CardTitle, CardDescription,`,
+          `  CardContent, CardFooter,`,
+          `  CardMedia, CardBadge, CardActions, CardMetric,`,
+          `  CardWithIcon,`,
+          `} from "@syscore/ui-library"`,
+          "```",
+          "",
+          "**Variants:** `default` · `outlined` · `elevated` · `filled` · `interactive`",
+        ].join("\n"),
       },
+      source: { type: "code" },
     },
   },
 } satisfies Meta<typeof Card>;
 
 export default meta;
-
 type Story = StoryObj<typeof meta>;
 
+// ---------------------------------------------------------------------------
+// Variants
+// ---------------------------------------------------------------------------
+
 export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@syscore/ui-library"
+
+<Card variant="default">
+  <CardHeader>
+    <CardTitle>Default Card</CardTitle>
+    <CardDescription>Cyan-50 background with a subtle border.</CardDescription>
+  </CardHeader>
+  <CardContent>Main content area.</CardContent>
+  <CardFooter>Footer information</CardFooter>
+</Card>`,
+      },
+    },
+  },
   render: () => (
-    <Card className="w-full max-w-sm">
+    <Card variant="default" className="w-full max-w-sm">
       <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card description goes here</CardDescription>
+        <CardTitle>Default Card</CardTitle>
+        <CardDescription>Cyan-50 background with a subtle border.</CardDescription>
       </CardHeader>
       <CardContent>This is the main content area of the card.</CardContent>
       <CardFooter>
@@ -68,6 +105,223 @@ export const Default: Story = {
   ),
 };
 
+export const Outlined: Story = {
+  render: () => (
+    <Card variant="outlined" className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Outlined Card</CardTitle>
+        <CardDescription>White background with a visible border, no fill.</CardDescription>
+      </CardHeader>
+      <CardContent>Clean and minimal — great for secondary content areas.</CardContent>
+      <CardFooter>
+        <Button size="large" variant="secondary-light">Action</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Elevated: Story = {
+  render: () => (
+    <Card variant="elevated" className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Elevated Card</CardTitle>
+        <CardDescription>White background with a drop shadow, no border.</CardDescription>
+      </CardHeader>
+      <CardContent>Use this to make content float above the page surface.</CardContent>
+      <CardFooter>
+        <Button size="large" variant="primary-dark">Get started</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Filled: Story = {
+  render: () => (
+    <Card variant="filled" className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Filled Card</CardTitle>
+        <CardDescription>Dark background for high-contrast sections.</CardDescription>
+      </CardHeader>
+      <CardContent>Use for featured content, CTAs, or dark-themed sections.</CardContent>
+      <CardFooter>
+        <Button size="large" variant="tertiary-light">Learn more</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 gap-4 max-w-2xl">
+      {["Card One", "Card Two", "Card Three"].map((title) => (
+        <Card
+          key={title}
+          variant="interactive"
+          className="w-full"
+          onClick={() => alert(`Clicked: ${title}`)}
+        >
+          <CardHeader>
+            <CardTitle>{title}</CardTitle>
+            <CardDescription>Click me — I'm interactive.</CardDescription>
+          </CardHeader>
+          <CardContent>Hover to see the scale effect, click to interact.</CardContent>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-5xl">
+      {(["default", "outlined", "elevated", "filled", "interactive"] as const).map((variant) => (
+        <Card key={variant} variant={variant}>
+          <CardHeader>
+            <CardTitle>{variant.charAt(0).toUpperCase() + variant.slice(1)}</CardTitle>
+            <CardDescription>variant="{variant}"</CardDescription>
+          </CardHeader>
+          <CardContent>Card content goes here.</CardContent>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+export const WithMedia: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Card, CardMedia, CardHeader, CardTitle, CardDescription, CardActions } from "@syscore/ui-library"
+import { Button } from "@syscore/ui-library"
+
+<Card variant="outlined" className="p-0">
+  <CardMedia src="/your-image.jpg" alt="Description" height={200} />
+  <div className="p-6 flex flex-col gap-6">
+    <CardHeader>
+      <CardTitle>Media Card</CardTitle>
+      <CardDescription>Full-bleed image above the content.</CardDescription>
+    </CardHeader>
+    <CardActions>
+      <Button variant="primary-dark" size="large">View details</Button>
+      <Button variant="secondary-light" size="large">Save</Button>
+    </CardActions>
+  </div>
+</Card>`,
+      },
+    },
+  },
+  render: () => (
+    <Card variant="outlined" className="w-full max-w-sm p-0">
+      <CardMedia
+        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80"
+        alt="Mountain landscape"
+        height={200}
+      />
+      <div className="p-6 flex flex-col gap-6">
+        <CardHeader>
+          <CardTitle>Media Card</CardTitle>
+          <CardDescription>A full-bleed image sits above the card content.</CardDescription>
+        </CardHeader>
+        <CardActions>
+          <Button size="large" variant="primary-dark">View details</Button>
+          <Button size="large" variant="secondary-light">Save</Button>
+        </CardActions>
+      </div>
+    </Card>
+  ),
+};
+
+export const WithBadge: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-2xl">
+      {(["default", "success", "warning", "error", "info"] as const).map((color) => (
+        <Card key={color} variant="outlined" className="w-full">
+          <CardBadge color={color}>
+            {color.charAt(0).toUpperCase() + color.slice(1)}
+          </CardBadge>
+          <CardHeader>
+            <CardTitle>Badge Card</CardTitle>
+            <CardDescription>Status shown via top-right badge.</CardDescription>
+          </CardHeader>
+          <CardContent>Badge color: {color}</CardContent>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+export const WithActions: Story = {
+  render: () => (
+    <Card variant="default" className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Card with Actions</CardTitle>
+        <CardDescription>Action buttons sit in a dedicated row with a separator.</CardDescription>
+      </CardHeader>
+      <CardContent>Review the details below before confirming.</CardContent>
+      <CardActions>
+        <Button size="large" variant="primary-dark">Confirm</Button>
+        <Button size="large" variant="secondary-light">Cancel</Button>
+      </CardActions>
+    </Card>
+  ),
+};
+
+export const MetricCard: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Card, CardMetric } from "@syscore/ui-library"
+
+<Card variant="outlined">
+  <CardMetric
+    value="2,847"
+    label="Total projects"
+    trend="up"
+    trendValue="12% this month"
+  />
+</Card>`,
+      },
+    },
+  },
+  render: () => (
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-3xl">
+      <Card variant="outlined">
+        <CardMetric value="2,847" label="Total projects" trend="up" trendValue="12% this month" />
+      </Card>
+      <Card variant="outlined">
+        <CardMetric value="94%" label="Compliance score" trend="up" trendValue="3% vs last quarter" />
+      </Card>
+      <Card variant="outlined">
+        <CardMetric value="18" label="Open issues" trend="down" trendValue="5 resolved today" />
+      </Card>
+    </div>
+  ),
+};
+
+export const MetricCardFilled: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-3xl">
+      <Card variant="filled">
+        <CardMetric value="2,847" label="Total projects" trend="up" trendValue="12% this month" />
+      </Card>
+      <Card variant="filled">
+        <CardMetric value="94%" label="Compliance score" trend="neutral" trendValue="No change" />
+      </Card>
+      <Card variant="filled">
+        <CardMetric value="18" label="Open issues" trend="down" trendValue="5 resolved today" />
+      </Card>
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Existing stories preserved
+// ---------------------------------------------------------------------------
+
 export const WithButton: Story = {
   render: () => (
     <Card className="w-full max-w-sm">
@@ -92,24 +346,14 @@ export const WithButton: Story = {
 export const Multiple: Story = {
   render: () => (
     <div className="grid grid-cols-1 gap-4 max-w-2xl">
-      <Card>
-        <CardHeader>
-          <CardTitle className="heading-xsmall">Card One</CardTitle>
-        </CardHeader>
-        <CardContent>Content for the first card</CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle className="heading-xsmall">Card Two</CardTitle>
-        </CardHeader>
-        <CardContent>Content for the second card</CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle className="heading-xsmall">Card Three</CardTitle>
-        </CardHeader>
-        <CardContent>Content for the third card</CardContent>
-      </Card>
+      {["Card One", "Card Two", "Card Three"].map((title) => (
+        <Card key={title}>
+          <CardHeader>
+            <CardTitle className="heading-xsmall">{title}</CardTitle>
+          </CardHeader>
+          <CardContent>Content for {title.toLowerCase()}</CardContent>
+        </Card>
+      ))}
     </div>
   ),
 };
@@ -129,7 +373,6 @@ export const FiltersPanel: Story = {
       </div>
 
       <div className="flex flex-col gap-6 w-full">
-        {/* Segmented Control */}
         <div className="flex flex-col gap-3">
           <Label className="text-gray-600">Label</Label>
           <Toggle
@@ -141,7 +384,6 @@ export const FiltersPanel: Story = {
           />
         </div>
 
-        {/* Search Selects */}
         {[1, 2, 3].map((i) => (
           <div key={i} className="flex flex-col gap-3">
             <Label className="text-gray-600">Label</Label>
@@ -161,150 +403,26 @@ export const FiltersPanel: Story = {
   ),
 };
 
-// export const AttributesPanel: Story = {
-//   render: () => {
-//     const [activeTag, setActiveTag] = useState<string>("tag1");
-//     const tags = [
-//       { id: "tag1", label: "Tag" },
-//       { id: "tag2", label: "Tag" },
-//       { id: "tag3", label: "Tag" },
-//     ];
-
-//     return (
-//       <Card className="w-[344px] bg-cyan-50 border-gray-100 rounded-xl p-6 shadow-none flex flex-col gap-6">
-//         <div className="flex items-center justify-between w-full h-8">
-//           <Label className="text-gray-800 overline-large">Attributes</Label>
-//         </div>
-
-//         <div className="flex flex-col gap-6 w-full">
-//           {/* Segmented Control */}
-//           <div className="flex flex-col gap-3">
-//             <Label className="text-gray-600">Label</Label>
-//             <Toggle
-//               options={[
-//                 { label: "Active", value: "active" },
-//                 { label: "Inactive", value: "inactive" },
-//               ]}
-//               defaultValue="active"
-//             />
-//           </div>
-
-//           {/* Tags */}
-//           <div className="flex flex-col gap-3">
-//             <Label className="text-gray-600">Field name</Label>
-//             <div className="flex flex-wrap gap-3 items-start">
-//               {tags.map((tag) => (
-//                 <Tag
-//                   key={tag.id}
-//                   active={activeTag === tag.id}
-//                   onClick={() => setActiveTag(tag.id)}
-//                 >
-//                   {tag.label}
-//                 </Tag>
-//               ))}
-//             </div>
-//           </div>
-//         </div>
-//       </Card>
-//     );
-//   },
-// };
-
 export const ConceptCard: Story = {
   parameters: {
-    docs: {
-      source: {
-        type: "code",
-      },
-    },
+    docs: { source: { type: "code" } },
   },
   render: () => {
     const CONCEPTS_MOCK = [
-      {
-        id: "air",
-        slug: "air",
-        name: "Air",
-        title: "AIR",
-        description: "Reduce or minimize sources of indoor air pollution",
-      },
-      {
-        id: "water",
-        slug: "water",
-        name: "Water",
-        title: "WATER",
-        description: "Increase hydration and access to high quality water",
-      },
-      {
-        id: "nourishment",
-        slug: "nourishment",
-        name: "Nourishment",
-        title: "NOURISHMENT",
-        description:
-          "Make healthy foods the easy decision and encourage better food choices",
-      },
-      {
-        id: "light",
-        slug: "light",
-        name: "Light",
-        title: "LIGHT",
-        description:
-          "Design lighting to increase alertness, enhance occupant experience, and promote optimal sleep patterns",
-      },
-      {
-        id: "movement",
-        slug: "movement",
-        name: "Movement",
-        title: "MOVEMENT",
-        description: "Integrate physical activity and fitness into everyday life",
-      },
-      {
-        id: "thermal-comfort",
-        slug: "thermal-comfort",
-        name: "Thermal Comfort",
-        title: "THERMAL COMFORT",
-        description: "Provide productive and comfortable indoor environments",
-      },
-      {
-        id: "sound",
-        slug: "sound",
-        name: "Sound",
-        title: "SOUND",
-        description:
-          "Support optimal acoustical comfort to reduce distractions and promote focus",
-      },
-      {
-        id: "materials",
-        slug: "materials",
-        name: "Materials",
-        title: "MATERIALS",
-        description:
-          "Improve respiratory health through use of safe materials and finishes",
-      },
-      {
-        id: "community",
-        slug: "community",
-        name: "Community",
-        title: "COMMUNITY",
-        description: "Foster community engagement and social support",
-      },
-      {
-        id: "mind",
-        slug: "mind",
-        name: "Mind",
-        title: "MIND",
-        description:
-          "Support cognitive and emotional health through design, technology, and treatment strategies",
-      },
-      {
-        id: "innovation",
-        slug: "innovation",
-        name: "Innovation",
-        title: "INNOVATION",
-        description: "Develop unique strategies for creating healthy environments",
-      },
+      { id: "air", slug: "air", title: "AIR", description: "Reduce or minimize sources of indoor air pollution" },
+      { id: "water", slug: "water", title: "WATER", description: "Increase hydration and access to high quality water" },
+      { id: "nourishment", slug: "nourishment", title: "NOURISHMENT", description: "Make healthy foods the easy decision and encourage better food choices" },
+      { id: "light", slug: "light", title: "LIGHT", description: "Design lighting to increase alertness, enhance occupant experience, and promote optimal sleep patterns" },
+      { id: "movement", slug: "movement", title: "MOVEMENT", description: "Integrate physical activity and fitness into everyday life" },
+      { id: "thermal-comfort", slug: "thermal-comfort", title: "THERMAL COMFORT", description: "Provide productive and comfortable indoor environments" },
+      { id: "sound", slug: "sound", title: "SOUND", description: "Support optimal acoustical comfort to reduce distractions and promote focus" },
+      { id: "materials", slug: "materials", title: "MATERIALS", description: "Improve respiratory health through use of safe materials and finishes" },
+      { id: "community", slug: "community", title: "COMMUNITY", description: "Foster community engagement and social support" },
+      { id: "mind", slug: "mind", title: "MIND", description: "Support cognitive and emotional health through design, technology, and treatment strategies" },
+      { id: "innovation", slug: "innovation", title: "INNOVATION", description: "Develop unique strategies for creating healthy environments" },
     ];
 
-    const CONCEPT_ICONS = {
+    const CONCEPT_ICONS: Record<string, React.ComponentType<React.SVGProps<SVGSVGElement>>> = {
       air: IconConceptAir,
       water: IconConceptWater,
       nourishment: IconConceptNourishment,
@@ -319,9 +437,9 @@ export const ConceptCard: Story = {
     };
 
     return (
-      <div className="grid grid-cols-1 md:grid-cols-3  gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         {CONCEPTS_MOCK.map((concept) => {
-          const Icon = CONCEPT_ICONS[concept.slug as keyof typeof CONCEPT_ICONS];
+          const Icon = CONCEPT_ICONS[concept.slug];
           return (
             <CardWithIcon
               key={concept.id}
@@ -335,4 +453,3 @@ export const ConceptCard: Story = {
     );
   },
 };
-