blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,297 @@
+import { Disclosure, Menu, Popover, Transition } from "@headlessui/react";
+import { ShoppingBagIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Button } from "../../action/button";
+import { ActionSection } from "../../design/actionSection";
+import { FooterSection } from "../../design/footerSection";
+import { HeroSection } from "../../design/heroSection";
+import { Grid } from "../../display/grid";
+import { List } from "../../display/list";
+import { Rating } from "../../input/rating";
+import { Header } from "../../navigation/header";
+import { Container } from "../../structure/container";
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Logo = require("../../../assets/logo.png");
+
+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 Header, HeroSection, Grid, List, ActionSection, and FooterSection.",
+    },
+  },
+});
+
+const NAVIGATION = [
+  { name: "Home", href: "#" },
+  { name: "Headphones", href: "#" },
+  { name: "Speakers", href: "#" },
+  { name: "Accessories", href: "#" },
+];
+
+const PRODUCTS = [
+  {
+    id: 1,
+    name: "Sony WH-1000XM5",
+    variant: "Noise Cancelling",
+    price: "RM 1,649",
+    rating: 4.5,
+    reviews: 9,
+    image:
+      "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop&q=80",
+  },
+  {
+    id: 2,
+    name: "Apple AirPods Pro",
+    variant: "2nd Generation",
+    price: "RM 1,149",
+    rating: 4,
+    reviews: 15,
+    image:
+      "https://images.unsplash.com/photo-1600294037681-c80b4cb5b434?w=400&h=400&fit=crop&q=80",
+  },
+  {
+    id: 3,
+    name: "Bose QuietComfort",
+    variant: "Ultra Headphones",
+    price: "RM 1,999",
+    rating: 4,
+    reviews: 21,
+    image:
+      "https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=400&h=400&fit=crop&q=80",
+  },
+  {
+    id: 4,
+    name: "JBL Tune 770NC",
+    variant: "Wireless BT",
+    price: "RM 459",
+    rating: 3,
+    reviews: 40,
+    image:
+      "https://images.unsplash.com/photo-1583394838336-acd977736f90?w=400&h=400&fit=crop&q=80",
+  },
+  {
+    id: 5,
+    name: "Sennheiser Momentum 4",
+    variant: "Wireless ANC",
+    price: "RM 1,299",
+    rating: 4.5,
+    reviews: 7,
+    image:
+      "https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop&q=80",
+  },
+  {
+    id: 6,
+    name: "Beats Studio Pro",
+    variant: "Wireless Headphones",
+    price: "RM 1,099",
+    rating: 4,
+    reviews: 33,
+    image:
+      "https://images.unsplash.com/photo-1613040809024-b4ef7ba99bc3?w=400&h=400&fit=crop&q=80",
+  },
+];
+
+const REVIEWS = [
+  {
+    id: "1",
+    title: "Sarah L.",
+    img: "https://i.pravatar.cc/40?img=1",
+    product: "Sony WH-1000XM5",
+    rating: 5,
+    comment:
+      "Absolutely love these headphones. The noise cancellation is top-notch and battery life is incredible.",
+  },
+  {
+    id: "2",
+    title: "James T.",
+    img: "https://i.pravatar.cc/40?img=3",
+    product: "Apple AirPods Pro",
+    rating: 4,
+    comment:
+      "Great fit and sound quality. Transparency mode feels very natural. Worth every penny.",
+  },
+  {
+    id: "3",
+    title: "Priya M.",
+    img: "https://i.pravatar.cc/40?img=5",
+    product: "Bose QuietComfort Ultra",
+    rating: 5,
+    comment:
+      "Best headphones I've ever owned. Incredibly comfortable for long listening sessions.",
+  },
+  {
+    id: "4",
+    title: "Daniel K.",
+    img: "https://i.pravatar.cc/40?img=7",
+    product: "JBL Tune 770NC",
+    rating: 3,
+    comment:
+      "Good value for the price. Sound is decent but ANC could be stronger.",
+  },
+];
+
+stories.add("Product Listing", () => {
+  const [cartCount, setCartCount] = useState(0);
+
+  const handleAddToCart = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCartCount((c) => c + 1);
+  };
+
+  const gridData = PRODUCTS.map((product) => ({
+    id: String(product.id),
+    title: product.name,
+    description: product.variant,
+    imageUrl: product.image,
+    extra: (
+      <div className="flex flex-col gap-y-1">
+        <div className="flex items-center justify-between">
+          <Rating
+            id={`product-rating-${product.id}`}
+            label=""
+            value={product.rating}
+            total={5}
+            size="small"
+          />
+          <p className="text-sm font-medium text-gray-900">{product.price}</p>
+        </div>
+        <p className="text-xs text-gray-500">{product.reviews} reviews</p>
+        <div className="mt-2">
+          <Button
+            text="Add to Cart"
+            type="normal"
+            size="small"
+            className="w-full"
+            onClick={handleAddToCart}
+          />
+        </div>
+      </div>
+    ),
+  }));
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Header */}
+      <Header
+        defaultNav="/"
+        page="Headphones"
+        logo={Logo}
+        navigation={NAVIGATION}
+        extra={
+          <div className="relative mr-4 cursor-pointer">
+            <ShoppingBagIcon className="h-6 w-6 text-gray-600" />
+            {cartCount > 0 && (
+              <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary-500 text-[10px] font-medium text-white">
+                {cartCount}
+              </span>
+            )}
+          </div>
+        }
+        lib={{ Disclosure, Menu, Transition, Popover }}
+      />
+
+      {/* Hero */}
+      <HeroSection
+        size="large"
+        className="lg:py-48"
+        title="Premium Audio, Delivered"
+        content="Explore our curated collection of top-tier headphones. Free shipping on orders above RM 500."
+        backgroundImage="https://images.unsplash.com/photo-1487215078519-e21cc028cb29?w=1600&h=900&fit=crop&q=80"
+        backgroundPosition="center"
+        callToAction={
+          <Button text="Shop Now" type="normal" onClick={() => {}} />
+        }
+        backgroundImageOnly
+        darkMode
+        darkOverlay
+      />
+
+      {/* Product Grid */}
+      <Container bgColor="py-12 bg-white">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-semibold text-gray-900">
+            Headphones ({PRODUCTS.length})
+          </h2>
+          <p className="text-sm text-gray-500">Sorted by: Featured</p>
+        </div>
+        <Grid
+          data={gridData}
+          loading={false}
+          hidePagination
+          gridColClassName="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-10"
+          itemClassName="shadow-none"
+        />
+      </Container>
+
+      {/* Customer Reviews */}
+      <Container bgColor="py-12 bg-gray-50">
+        <div className="flex flex-col gap-y-10">
+          <div>
+            <h2 className="text-2xl font-semibold text-gray-900 mb-6">
+              Customer Reviews
+            </h2>
+            <List
+              loading={false}
+              hidePagination
+              list={REVIEWS.map((review) => ({
+                id: review.id,
+                title: review.title,
+                img: review.img,
+                product: review.product,
+                comment: review.comment,
+                action: (
+                  <Rating
+                    id={`review-rating-${review.id}`}
+                    label=""
+                    value={review.rating}
+                    total={5}
+                    size="small"
+                  />
+                ),
+              }))}
+            />
+          </div>
+          <div className="w-full">
+            <ActionSection
+              title={"Get 15% off your first order\nSign up for our newsletter"}
+              buttonText="Subscribe Now"
+              onClick={() => {}}
+            />
+          </div>
+        </div>
+      </Container>
+      {/* Footer */}
+      <FooterSection
+        caption="© 2026 SoundStore. All rights reserved."
+        footerList={[
+          {
+            title: "Shop",
+            subList: [
+              { name: "Headphones", link: "/headphones" },
+              { name: "Earbuds", link: "/earbuds" },
+              { name: "Accessories", link: "/accessories" },
+            ],
+          },
+          {
+            title: "Company",
+            subList: [
+              { name: "About Us", link: "/about" },
+              { name: "Careers", link: "/careers" },
+              { name: "Blog", link: "/blog" },
+            ],
+          },
+          {
+            title: "Support",
+            subList: [
+              { name: "Contact Us", link: "/contact" },
+              { name: "Privacy Policy", link: "/privacy" },
+              { name: "Terms of Service", link: "/terms" },
+            ],
+          },
+        ]}
+      />
+    </div>
+  );
+});

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

@@ -0,0 +1,194 @@
+import { HeartIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "../../action/button";
+import { IconButton } from "../../action/iconButton";
+import { Collapse } from "../../advanced/collapse";
+import { FileGrid } from "../../design/fileGrid";
+import { Rating } from "../../input/rating";
+import { Container } from "../../structure/container";
+
+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, FileGrid, Rating, Button, IconButton, and Collapse.",
+    },
+  },
+});
+
+const PRODUCT_IMAGES = [
+  {
+    file: "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=600&h=600&fit=crop&q=80",
+    fileType: "image" as const,
+  },
+  {
+    file: "https://images.unsplash.com/photo-1611854779393-1b2da9d400fe?w=600&h=600&fit=crop&q=80",
+    fileType: "image" as const,
+  },
+  {
+    file: "https://images.unsplash.com/photo-1587049352851-8d4e89133924?w=600&h=600&fit=crop&q=80",
+    fileType: "image" as const,
+  },
+  {
+    file: "https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?w=600&h=600&fit=crop&q=80",
+    fileType: "image" as const,
+  },
+  {
+    file: "https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?w=600&h=600&fit=crop&q=80",
+    fileType: "image" as const,
+  },
+];
+
+const COLORS = [
+  { id: "dark", hex: "#3b1f0a" },
+  { id: "medium", hex: "#7b4f2e" },
+  { id: "light", hex: "#c49a6c" },
+];
+
+const FEATURES = [
+  "Single origin Ethiopian Yirgacheffe beans",
+  "Medium-dark roast profile",
+  "Notes of blueberry, jasmine, and dark chocolate",
+  "Freshly roasted within 48 hours of shipping",
+  "Available as whole bean or ground",
+  "Resealable kraft bag with one-way valve",
+  "250g per bag",
+];
+
+const RATING = 4;
+
+stories.add("Product Overview", () => {
+  const [selectedColor, setSelectedColor] = useState("dark");
+  const [wishlisted, setWishlisted] = useState(false);
+
+  return (
+    <Container bgColor="py-8 bg-white">
+      <h2 className="text-2xl font-semibold text-gray-900 mb-6">
+        Product Overview
+      </h2>
+      <div className="flex flex-col md:flex-row gap-10">
+        {/* Left: image gallery */}
+        <div className="flex flex-col gap-4 flex-shrink-0 md:w-[460px]">
+          <FileGrid
+            fileList={PRODUCT_IMAGES}
+            inlinePreview
+            inlinePreviewHeight="h-80 sm:h-[400px]"
+            thumbnailScroll
+          />
+        </div>
+
+        {/* Right: product details */}
+        <div className="flex-1">
+          <h1 className="text-2xl font-semibold text-gray-900">
+            Ethiopian Yirgacheffe
+          </h1>
+          <p className="text-2xl text-gray-900 mt-2">RM 24</p>
+
+          {/* Star rating */}
+          <div className="mt-2">
+            <Rating
+              id="product-rating"
+              label=""
+              value={RATING}
+              total={5}
+              size="small"
+            />
+          </div>
+
+          <p className="mt-4 text-sm text-gray-600 leading-relaxed">
+            A bright and complex single origin from the birthplace of coffee.
+            Grown at high altitude in the Yirgacheffe region of Ethiopia, this
+            medium-dark roast delivers vibrant notes of blueberry, jasmine, and
+            dark chocolate with a clean, lingering finish.
+          </p>
+
+          {/* Roast picker */}
+          <div className="mt-5">
+            <p className="text-sm text-gray-700 mb-2">Roast</p>
+            <div className="flex gap-2">
+              {COLORS.map((color) => (
+                <button
+                  key={color.id}
+                  onClick={() => setSelectedColor(color.id)}
+                  className={`w-8 h-8 rounded-full border-2 focus:outline-none ${
+                    selectedColor === color.id
+                      ? "border-primary-600 ring-2 ring-primary-300"
+                      : "border-gray-300"
+                  }`}
+                  style={{ backgroundColor: color.hex }}
+                  aria-label={`Roast ${color.id}`}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Add to bag + wishlist */}
+          <div className="flex items-center gap-3 mt-6">
+            <div className="flex-1">
+              <Button
+                text="Add to bag"
+                type="normal"
+                className="w-full sm:px-6"
+                onClick={() => {}}
+                size="small"
+              />
+            </div>
+            <IconButton
+              icon={
+                <HeartIcon
+                  className={`w-6 h-6 ${
+                    wishlisted ? "text-red-500 fill-red-500" : "text-gray-400"
+                  }`}
+                />
+              }
+              onClick={() => setWishlisted((w) => !w)}
+            />
+          </div>
+
+          {/* Accordion sections */}
+          <div className="mt-8 divide-y border-t border-b">
+            <Collapse
+              title="Features"
+              defaultValue={true}
+              icon={<span />}
+              titleClassName="text-primary-600 font-medium"
+              iconClassName="w-5 h-5 text-primary-600"
+              collapseContainerCss="py-4 !border-0"
+              notCollapseContainerCss="py-4"
+              containerClassName="rounded-none"
+              content={
+                <ul className="px-4 pb-4 space-y-2">
+                  {FEATURES.map((f) => (
+                    <li
+                      key={f}
+                      className="flex items-center gap-2 text-sm text-gray-600"
+                    >
+                      - {f}
+                    </li>
+                  ))}
+                </ul>
+              }
+            />
+            {["Brew Guide", "Shipping", "Returns"].map((section) => (
+              <Collapse
+                key={section}
+                title={section}
+                icon={<span />}
+                titleClassName="text-gray-800 font-medium"
+                collapseContainerCss="py-4 !border-0"
+                notCollapseContainerCss="py-4"
+                containerClassName="rounded-none"
+                content={
+                  <p className="px-4 pb-4 text-sm text-gray-500">
+                    Details about {section.toLowerCase()} will appear here.
+                  </p>
+                }
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+});