@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/skeletons/components/skeleton-cart-totals/index.tsx

@@ -0,0 +1,30 @@
+const SkeletonCartTotals = ({ header = true }) => {
+  return (
+    <div className="flex flex-col">
+      {header && <div className="w-32 h-4 bg-gray-100 mb-4"></div>}
+      <div className="flex items-center justify-between">
+        <div className="w-32 h-3 bg-gray-100"></div>
+        <div className="w-32 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="flex items-center justify-between my-4">
+        <div className="w-24 h-3 bg-gray-100"></div>
+        <div className="w-24 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="w-28 h-3 bg-gray-100 "></div>
+        <div className="w-20 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="w-full border-b border-gray-200 border-dashed my-4"></div>
+
+      <div className="flex items-center justify-between">
+        <div className="w-32 h-6 bg-gray-100 mb-4"></div>
+        <div className="w-24 h-6 bg-gray-100 mb-4"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCartTotals

package/templates/storefront/src/modules/skeletons/components/skeleton-code-form/index.tsx

@@ -0,0 +1,13 @@
+const SkeletonCodeForm = () => {
+  return (
+    <div className="w-full flex flex-col">
+      <div className="bg-gray-100 h-7 w-24 mb-4"></div>
+      <div className="grid grid-cols-[1fr_80px] gap-x-2">
+        <div className="bg-gray-100 h-12"></div>
+        <div className="bg-gray-100 h-12"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCodeForm

package/templates/storefront/src/modules/skeletons/components/skeleton-line-item/index.tsx

@@ -0,0 +1,35 @@
+import { Table } from "@medusajs/ui"
+
+const SkeletonLineItem = () => {
+  return (
+    <Table.Row className="w-full m-4">
+      <Table.Cell className="p-4 w-24">
+        <div className="flex w-24 h-24 p-4 bg-gray-200 animate-pulse" />
+      </Table.Cell>
+      <Table.Cell className="text-left">
+        <div className="flex flex-col gap-y-2">
+          <div className="w-32 h-4 bg-gray-200 animate-pulse" />
+          <div className="w-24 h-4 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 items-center">
+          <div className="w-6 h-8 bg-gray-200 animate-pulse" />
+          <div className="w-14 h-10 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 justify-end">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default SkeletonLineItem

package/templates/storefront/src/modules/skeletons/components/skeleton-order-confirmed-header/index.tsx

@@ -0,0 +1,14 @@
+const SkeletonOrderConfirmedHeader = () => {
+  return (
+    <div className="flex flex-col gap-y-2 pb-10 animate-pulse">
+      <div className="w-2/5 h-4 bg-gray-100"></div>
+      <div className="w-3/6 h-6 bg-gray-100"></div>
+      <div className="flex gap-x-4">
+        <div className="w-16 h-4 bg-gray-100"></div>
+        <div className="w-12 h-4 bg-gray-100"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderConfirmedHeader

package/templates/storefront/src/modules/skeletons/components/skeleton-order-information/index.tsx

@@ -0,0 +1,36 @@
+import SkeletonCartTotals from "@modules/skeletons/components/skeleton-cart-totals"
+
+const SkeletonOrderInformation = () => {
+  return (
+    <div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-10 border-b border-gray-200">
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-2"></div>
+          <div className="w-1/6 h-3 bg-gray-100"></div>
+        </div>
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-2"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-1/6 h-3 bg-gray-100 mt-2"></div>
+          <div className="w-32 h-4 bg-gray-100 my-4"></div>
+          <div className="w-1/6 h-3 bg-gray-100"></div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-10">
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-4"></div>
+        </div>
+
+        <SkeletonCartTotals />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderInformation

package/templates/storefront/src/modules/skeletons/components/skeleton-order-items/index.tsx

@@ -0,0 +1,43 @@
+const SkeletonOrderItems = () => {
+  return (
+    <div className="flex flex-col gap-y-4 py-10 border-y border-gray-200">
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderItems

package/templates/storefront/src/modules/skeletons/components/skeleton-order-summary/index.tsx

@@ -0,0 +1,15 @@
+import SkeletonButton from "@modules/skeletons/components/skeleton-button"
+import SkeletonCartTotals from "@modules/skeletons/components/skeleton-cart-totals"
+
+const SkeletonOrderSummary = () => {
+  return (
+    <div className="grid-cols-1">
+      <SkeletonCartTotals header={false} />
+      <div className="mt-4">
+        <SkeletonButton />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderSummary

package/templates/storefront/src/modules/skeletons/components/skeleton-product-preview/index.tsx

@@ -0,0 +1,15 @@
+import { Container } from "@medusajs/ui"
+
+const SkeletonProductPreview = () => {
+  return (
+    <div className="animate-pulse">
+      <Container className="aspect-[9/16] w-full bg-gray-100 bg-ui-bg-subtle" />
+      <div className="flex justify-between text-base-regular mt-2">
+        <div className="w-2/5 h-6 bg-gray-100"></div>
+        <div className="w-1/5 h-6 bg-gray-100"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonProductPreview

package/templates/storefront/src/modules/skeletons/templates/skeleton-cart-page/index.tsx

@@ -0,0 +1,65 @@
+import { Table } from "@medusajs/ui"
+
+import repeat from "@core/util/repeat"
+import SkeletonCartItem from "@modules/skeletons/components/skeleton-cart-item"
+import SkeletonCodeForm from "@modules/skeletons/components/skeleton-code-form"
+import SkeletonOrderSummary from "@modules/skeletons/components/skeleton-order-summary"
+
+const SkeletonCartPage = () => {
+  return (
+    <div className="py-12">
+      <div className="content-container">
+        <div className="grid grid-cols-1 small:grid-cols-[1fr_360px] gap-x-40">
+          <div className="flex flex-col bg-white p-6 gap-y-6">
+            <div className="bg-white flex items-start justify-between">
+              <div className="flex flex-col gap-y-2">
+                <div className="w-60 h-8 bg-gray-200 animate-pulse" />
+                <div className="w-48 h-6 bg-gray-200 animate-pulse" />
+              </div>
+              <div>
+                <div className="w-14 h-8 bg-gray-200 animate-pulse" />
+              </div>
+            </div>
+            <div>
+              <div className="pb-3 flex items-center">
+                <div className="w-20 h-12 bg-gray-200 animate-pulse" />
+              </div>
+              <Table>
+                <Table.Header className="border-t-0">
+                  <Table.Row>
+                    <Table.HeaderCell className="!pl-0">
+                      <div className="w-10 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell></Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <div className="w-16 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell className="!pr-0">
+                      <div className="flex justify-end">
+                        <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+                      </div>
+                    </Table.HeaderCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {repeat(4).map((index) => (
+                    <SkeletonCartItem key={index} />
+                  ))}
+                </Table.Body>
+              </Table>
+            </div>
+          </div>
+          <div className="flex flex-col gap-y-8">
+            <SkeletonOrderSummary />
+            <SkeletonCodeForm />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCartPage

package/templates/storefront/src/modules/skeletons/templates/skeleton-order-confirmed/index.tsx

@@ -0,0 +1,21 @@
+import SkeletonOrderConfirmedHeader from "@modules/skeletons/components/skeleton-order-confirmed-header"
+import SkeletonOrderInformation from "@modules/skeletons/components/skeleton-order-information"
+import SkeletonOrderItems from "@modules/skeletons/components/skeleton-order-items"
+
+const SkeletonOrderConfirmed = () => {
+  return (
+    <div className="bg-gray-50 py-6 min-h-[calc(100vh-64px)] animate-pulse">
+      <div className="content-container flex justify-center">
+        <div className="max-w-4xl h-full bg-white w-full p-10">
+          <SkeletonOrderConfirmedHeader />
+
+          <SkeletonOrderItems />
+
+          <SkeletonOrderInformation />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderConfirmed

package/templates/storefront/src/modules/skeletons/templates/skeleton-product-grid/index.tsx

@@ -0,0 +1,23 @@
+import repeat from "@core/util/repeat"
+import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"
+
+const SkeletonProductGrid = ({
+  numberOfProducts = 8,
+}: {
+  numberOfProducts?: number
+}) => {
+  return (
+    <ul
+      className="grid grid-cols-2 small:grid-cols-3 medium:grid-cols-4 gap-x-6 gap-y-8 flex-1"
+      data-testid="products-list-loader"
+    >
+      {repeat(numberOfProducts).map((index) => (
+        <li key={index}>
+          <SkeletonProductPreview />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default SkeletonProductGrid

package/templates/storefront/src/modules/skeletons/templates/skeleton-related-products/index.tsx

@@ -0,0 +1,25 @@
+import repeat from "@core/util/repeat"
+import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"
+
+const SkeletonRelatedProducts = () => {
+  return (
+    <div className="product-page-constraint">
+      <div className="flex flex-col gap-8 items-center text-center mb-8">
+        <div className="w-20 h-6 animate-pulse bg-gray-100"></div>
+        <div className="flex flex-col gap-4 items-center text-center mb-16">
+          <div className="w-96 h-10 animate-pulse bg-gray-100"></div>
+          <div className="w-48 h-10 animate-pulse bg-gray-100"></div>
+        </div>
+      </div>
+      <ul className="grid grid-cols-2 small:grid-cols-3 medium:grid-cols-4 gap-x-6 gap-y-8 flex-1">
+        {repeat(3).map((index) => (
+          <li key={index}>
+            <SkeletonProductPreview />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default SkeletonRelatedProducts

package/templates/storefront/src/modules/store/components/client-paginated-products.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { useProductListing } from "medusa-product-library"
+import ProductCard from "@registry/components/product-card"
+import { Pagination } from "@modules/store/components/pagination"
+import StoreHeader from "@modules/store/components/store-header"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+
+const PRODUCT_LIMIT = 12
+
+export const ClientPaginatedProductsInner = ({
+  sortBy,
+  initialPage,
+  collectionId,
+  categoryId,
+  productsIds,
+  gender,
+  type,
+  material,
+  color,
+  min_price,
+  max_price,
+  q,
+  region,
+}: {
+  sortBy?: string
+  initialPage?: number
+  collectionId?: string
+  categoryId?: string
+  productsIds?: string[]
+  gender?: string
+  type?: string
+  material?: string
+  color?: string
+  min_price?: string
+  max_price?: string
+  q?: string
+  region: any
+}) => {
+  // ALL pagination state managed by library
+  const {
+    products,
+    count,
+    isLoading,
+    totalPages,
+    currentPage,
+    pageNumbers,
+    setPage,
+    hasNext,
+    hasPrev,
+  } = useProductListing({
+    sortBy,
+    initialPage: initialPage ?? 1,
+    limit: PRODUCT_LIMIT,
+    collectionId,
+    categoryId,
+    gender,
+    type,
+    material,
+    color,
+    minPrice: min_price,
+    maxPrice: max_price,
+    q,
+  })
+
+  return (
+    <>
+      <StoreHeader sortBy={(sortBy || "created_at") as SortOptions} productCount={count} q={q} />
+      {isLoading ? (
+        <div className="w-full flex justify-center py-20">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+        </div>
+      ) : (
+        <ul
+          className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8"
+          data-testid="products-list"
+        >
+          {products.map((p) => (
+            <li key={p.id} className="w-full min-w-0">
+              <ProductCard product={p as any} region={region} />
+            </li>
+          ))}
+        </ul>
+      )}
+      {totalPages > 1 && (
+        <div className="mt-8">
+          {/* Chocomelon designs this Pagination UI, library provides the data */}
+          <Pagination
+            data-testid="product-pagination"
+            page={currentPage}
+            totalPages={totalPages}
+            pageNumbers={pageNumbers}
+            onPageChange={setPage}
+            hasNext={hasNext}
+            hasPrev={hasPrev}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+
+export default function ClientPaginatedProducts(props: any) {
+  return (
+    <ClientPaginatedProductsInner {...props} />
+  )
+}

package/templates/storefront/src/modules/store/components/mobile-filters/index.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import { useSearchParams } from "next/navigation"
+import { clx } from "@medusajs/ui"
+import RefinementList from "../refinement-list"
+import { SortOptions } from "../refinement-list/sort-products"
+import { HttpTypes } from "@medusajs/types"
+
+type MobileFiltersProps = {
+    sortBy: SortOptions
+    collections?: HttpTypes.StoreCollection[]
+    collectionValue?: string | string[]
+    genderValue?: string | string[]
+    typeValue?: string | string[]
+    materialValue?: string | string[]
+    colorValue?: string | string[]
+    minPrice?: string
+    maxPrice?: string
+    genderOptions?: { value: string; label: string }[]
+    typeOptions?: { value: string; label: string }[]
+    materialOptions?: { value: string; label: string }[]
+    colorOptions?: { value: string; label: string }[]
+    hideMargin?: boolean
+}
+
+const MobileFilters: React.FC<MobileFiltersProps> = ({ hideMargin, ...props }) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const searchParams = useSearchParams()
+
+    // Close panel when search params change (filter applied)
+    useEffect(() => {
+        setIsOpen(false)
+    }, [searchParams])
+
+    // Prevent body scroll when panel is open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden"
+        } else {
+            document.body.style.overflow = "unset"
+        }
+        return () => {
+            document.body.style.overflow = "unset"
+        }
+    }, [isOpen])
+
+    return (
+        <div className={clx("lg:hidden w-full", !hideMargin && "mb-4")}>
+            {/* Filter Button */}
+            <button
+                onClick={() => setIsOpen(true)}
+                className="flex items-center justify-center gap-x-2 bg-white border border-gray-200 px-8 py-1.5 rounded-full shadow-[0_2px_10px_-4px_rgba(0,0,0,0.1)] hover:bg-gray-50 transition-all active:scale-95 w-full min-[450px]:w-auto"
+                data-ga-event="mobile_filter_open_click"
+                data-ga-label="Open Filters"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="text-[#8B5AB1]"
+                >
+                    <line x1="4" y1="21" x2="4" y2="14" />
+                    <line x1="4" y1="10" x2="4" y2="3" />
+                    <line x1="12" y1="21" x2="12" y2="12" />
+                    <line x1="12" y1="8" x2="12" y2="3" />
+                    <line x1="20" y1="21" x2="20" y2="16" />
+                    <line x1="20" y1="12" x2="20" y2="3" />
+                    <line x1="1" y1="14" x2="7" y2="14" />
+                    <line x1="9" y1="8" x2="15" y2="8" />
+                    <line x1="17" y1="16" x2="23" y2="16" />
+                </svg>
+                <span className="text-sm font-bold text-gray-900 uppercase tracking-wider">Filters</span>
+            </button>
+
+            {/* Backdrop */}
+            <div
+                className={clx(
+                    "fixed inset-0 bg-black/40 backdrop-blur-[2px] transition-opacity duration-200 z-[9999]",
+                    isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+                )}
+                onClick={() => setIsOpen(false)}
+            />
+
+            {/* Left Side Panel */}
+            <div
+                className={clx(
+                    "fixed top-0 left-0 h-full w-[280px] min-[400px]:w-[320px] bg-[#FFFAFE] shadow-2xl transition-transform duration-200 ease-in-out z-[10000] flex flex-col",
+                    isOpen ? "translate-x-0" : "-translate-x-full"
+                )}
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between p-5 border-b border-gray-100 bg-[#FFFAFE]">
+                    <h2 className="text-lg font-bold text-gray-900 uppercase tracking-tight">Filters</h2>
+                    <button
+                        onClick={() => setIsOpen(false)}
+                        className="p-2 hover:bg-gray-100 rounded-full transition-colors text-gray-500"
+                        data-ga-event="mobile_filter_close_click"
+                        data-ga-label="Close Filters"
+                    >
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto custom-scrollbar-hidden p-0">
+                    <style dangerouslySetInnerHTML={{
+                        __html: `
+            .custom-scrollbar-hidden::-webkit-scrollbar {
+              display: none;
+            }
+            .custom-scrollbar-hidden {
+              -ms-overflow-style: none;
+              scrollbar-width: none;
+            }
+          `}} />
+                    {/* We wrap RefinementList but we remove its shadow/border since it's already in a panel */}
+                    <div className="p-0 [&>div]:shadow-none [&>div]:border-0 [&>div]:rounded-none">
+                        <RefinementList {...props} hideTitle={true} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default MobileFilters