blixify-ui-web-mcp 0.1.1

package/lib/components/template/shoppingCart/shoppingCart.stories.tsx

@@ -0,0 +1,252 @@
+import { QuestionMarkCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon, ClockIcon } from "@heroicons/react/24/solid";
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Button } from "../../action/button";
+import { Option, Select } from "../../input/select";
+import { Container } from "../../structure/container";
+
+const qtyOptions: Option[] = [1, 2, 3, 4, 5].map((n) => ({
+  key: String(n),
+  label: String(n),
+}));
+
+const stories = storiesOf("Template", module).addParameters({
+  docs: {
+    description: {
+      component:
+        "Full-page e-commerce templates combining multiple components into ready-to-use layouts. These templates demonstrate real-world compositions of Container, Button, and Select for cart management with live quantity updates and order summary.",
+    },
+  },
+});
+
+const PRODUCT_IMG =
+  "https://plus.unsplash.com/premium_photo-1669905375318-87c4050418cd?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+
+interface CartItem {
+  id: string;
+  name: string;
+  color: string;
+  size: string;
+  price: number;
+  image: string;
+  status: "instock" | "ships";
+  qty: string;
+}
+
+const initialItems: CartItem[] = [
+  {
+    id: "1",
+    name: "Golden Barrel Cactus",
+    color: "Bright Green",
+    size: 'Small (4")',
+    price: 18.0,
+    image: PRODUCT_IMG,
+    status: "instock",
+    qty: "1",
+  },
+  {
+    id: "2",
+    name: "Saguaro Cactus",
+    color: "Blue-Green",
+    size: 'Medium (8")',
+    price: 34.0,
+    image: PRODUCT_IMG,
+    status: "ships",
+    qty: "1",
+  },
+  {
+    id: "3",
+    name: "Prickly Pear Cactus",
+    color: "Dusty Green",
+    size: 'Large (12")',
+    price: 28.0,
+    image: PRODUCT_IMG,
+    status: "instock",
+    qty: "1",
+  },
+];
+
+const SHIPPING = 5.0;
+const TAX_RATE = 0.084;
+
+stories.add("Shopping Cart", () => {
+  const [items, setItems] = useState<CartItem[]>(initialItems);
+
+  const handleRemove = (id: string) =>
+    setItems((prev) => prev.filter((i) => i.id !== id));
+  const handleQtyChange = (id: string, qty: string) =>
+    setItems((prev) => prev.map((i) => (i.id === id ? { ...i, qty } : i)));
+
+  const subtotal = items.reduce(
+    (sum, item) => sum + item.price * Number(item.qty),
+    0
+  );
+  const tax = subtotal * TAX_RATE;
+  const total = subtotal + SHIPPING + tax;
+
+  const StockStatus = ({ status }: { status: CartItem["status"] }) =>
+    status === "instock" ? (
+      <div className="flex items-center gap-1 text-green-500 text-sm">
+        <CheckCircleIcon className="h-4 w-4" />
+        <span>In stock</span>
+      </div>
+    ) : (
+      <div className="flex items-center gap-1 text-gray-400 text-sm">
+        <ClockIcon className="h-4 w-4" />
+        <span>Ships in 3-4 weeks</span>
+      </div>
+    );
+
+  return (
+    <Container bgColor="bg-white">
+      <h1 className="text-2xl font-semibold text-gray-900 mb-6">
+        Shopping Cart
+      </h1>
+      <div className="flex flex-col lg:flex-row gap-8">
+        <div className="flex-1 divide-y divide-gray-200 border-t border-b border-gray-200">
+          {items.map((item) => (
+            <div key={item.id} className="flex gap-3 py-6">
+              {/* Image */}
+              <div className="w-24 h-24 sm:w-36 sm:h-36 flex-shrink-0 overflow-hidden rounded-md">
+                <img
+                  src={item.image}
+                  alt={item.name}
+                  className="w-full h-full object-cover object-center"
+                />
+              </div>
+
+              {/* Mobile: stacked */}
+              <div className="flex flex-1 flex-col min-w-0 sm:hidden">
+                <div className="flex items-start justify-between gap-2">
+                  <p className="text-sm font-medium text-gray-900">
+                    {item.name}
+                  </p>
+                  <button
+                    onClick={() => handleRemove(item.id)}
+                    className="text-gray-400 hover:text-gray-600 flex-shrink-0"
+                  >
+                    <XMarkIcon className="h-5 w-5" />
+                  </button>
+                </div>
+                <div className="flex items-center gap-1 mt-1">
+                  <span className="text-sm text-gray-500">{item.color}</span>
+                  <span className="text-gray-300 text-xs">|</span>
+                  <span className="text-sm text-gray-500">{item.size}</span>
+                </div>
+                <p className="mt-1 text-sm font-medium text-gray-900">
+                  RM {item.price.toFixed(2)}
+                </p>
+                <div className="mt-3 w-20">
+                  <Select
+                    label=""
+                    value={item.qty}
+                    options={qtyOptions}
+                    disableKeyboard
+                    onChange={(val: string) => {
+                      if (val) handleQtyChange(item.id, val);
+                    }}
+                    placeholder="Qty"
+                  />
+                </div>
+                <div className="mt-2">
+                  <StockStatus status={item.status} />
+                </div>
+              </div>
+
+              {/* Desktop: image | info (top) + status (bottom) | qty (top) | X (top) */}
+              <div className="hidden sm:flex flex-1 min-w-0 items-stretch gap-4">
+                {/* Info column: name/color/price top, status bottom */}
+                <div className="flex-1 min-w-0 flex flex-col justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-gray-900">
+                      {item.name}
+                    </p>
+                    <div className="flex items-center gap-1 mt-1">
+                      <span className="text-sm text-gray-500">
+                        {item.color}
+                      </span>
+                      <span className="text-gray-300 text-xs">|</span>
+                      <span className="text-sm text-gray-500">{item.size}</span>
+                    </div>
+                    <p className="mt-1 text-sm font-medium text-gray-900">
+                      RM {item.price.toFixed(2)}
+                    </p>
+                  </div>
+                  <div>
+                    <StockStatus status={item.status} />
+                  </div>
+                </div>
+
+                {/* Qty: top-aligned */}
+                <div className="flex-shrink-0 w-24 flex flex-col justify-start">
+                  <Select
+                    label=""
+                    value={item.qty}
+                    options={qtyOptions}
+                    disableKeyboard
+                    onChange={(val: string) => {
+                      if (val) handleQtyChange(item.id, val);
+                    }}
+                    placeholder="Qty"
+                  />
+                </div>
+
+                {/* Remove: top-aligned */}
+                <div className="flex-shrink-0 flex flex-col justify-start pt-1">
+                  <button
+                    onClick={() => handleRemove(item.id)}
+                    className="text-gray-400 hover:text-gray-600"
+                  >
+                    <XMarkIcon className="h-5 w-5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Order Summary */}
+        <div className="w-full lg:w-[450px]">
+          <div className="bg-gray-50 rounded-lg p-6">
+            <h2 className="text-base font-medium text-gray-900 mb-5">
+              Order summary
+            </h2>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-600">Subtotal</span>
+                <span>RM {subtotal.toFixed(2)}</span>
+              </div>
+              <div className="border-t pt-3 flex justify-between">
+                <span className="flex items-center gap-1 text-gray-600">
+                  Shipping estimate
+                  <QuestionMarkCircleIcon className="h-4 w-4" />
+                </span>
+                <span>RM {SHIPPING.toFixed(2)}</span>
+              </div>
+              <div className="border-t pt-3 flex justify-between">
+                <span className="flex items-center gap-1 text-gray-600">
+                  Tax estimate
+                  <QuestionMarkCircleIcon className="h-4 w-4" />
+                </span>
+                <span>RM {tax.toFixed(2)}</span>
+              </div>
+              <div className="border-t pt-3 flex justify-between text-gray-900 text-lg">
+                <span>Order total</span>
+                <span>RM {total.toFixed(2)}</span>
+              </div>
+            </div>
+            <div className="mt-6">
+              <Button
+                text="Checkout"
+                type="normal"
+                className="w-full justify-center"
+                onClick={() => {}}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+});