@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/theme/valero/slots/product/ProductInfo/index.tsx

@@ -0,0 +1,40 @@
+import { HttpTypes } from "@medusajs/types"
+import ProductRating from "@modules/common/components/product/product-rating"
+import ShareButton from "@modules/common/components/product/share-button"
+import WishlistIcon from "@modules/common/components/product/wishlist-icon"
+
+type ProductInfoProps = {
+  product: HttpTypes.StoreProduct
+  region: HttpTypes.StoreRegion
+}
+
+export default function ProductInfo({ product }: ProductInfoProps) {
+  const metadataBrand = product.metadata?.brand as string | undefined
+  const brand = metadataBrand || product.collection?.title || "Valero"
+
+  return (
+    <div id="product-info" className="flex flex-col gap-4 w-full">
+      <p className="text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-[var(--color-text-muted)]">
+        {brand}
+      </p>
+
+      <div className="flex items-start justify-between gap-4">
+        <h1
+          className="font-display text-2xl sm:text-3xl lg:text-4xl text-heading leading-heading flex-1"
+          data-testid="product-title"
+        >
+          {product.title}
+        </h1>
+        <div className="flex items-center gap-2 flex-shrink-0 pt-1">
+          {product.id && <WishlistIcon productId={product.id} />}
+          <ShareButton
+            productTitle={product.title ?? ""}
+            productHandle={product.handle ?? ""}
+          />
+        </div>
+      </div>
+
+      <ProductRating product={product} showButton={false} />
+    </div>
+  )
+}

package/templates/storefront/src/theme/valero/templates/StorePage/index.tsx

@@ -0,0 +1,154 @@
+import { Suspense } from "react"
+import SkeletonProductGrid from "@modules/skeletons/templates/skeleton-product-grid"
+import RefinementList from "@modules/store/components/refinement-list"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+import MobileFilters from "@modules/store/components/mobile-filters"
+import PaginatedProducts from "@modules/store/templates/paginated-products"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+type StorePageProps = {
+  sortBy?: SortOptions
+  page?: string
+  countryCode: string
+  collections?: HttpTypes.StoreCollection[]
+  collection?: string | string[]
+  category?: string | string[]
+  gender?: string | string[]
+  type?: string | string[]
+  material?: string | string[]
+  color?: 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 }[]
+  categoryOptions?: { value: string; label: string }[]
+  q?: string
+}
+
+export default function StorePage({
+  sortBy,
+  page,
+  countryCode,
+  collections,
+  collection,
+  category,
+  gender,
+  type,
+  material,
+  color,
+  minPrice,
+  maxPrice,
+  genderOptions,
+  typeOptions,
+  materialOptions,
+  colorOptions,
+  categoryOptions,
+  q,
+}: StorePageProps) {
+  const pageNumber = page ? parseInt(page, 10) : 1
+  const sort = sortBy || "created_at_desc"
+
+  const filterProps = {
+    sortBy: sort,
+    collections,
+    collectionValue: collection,
+    categoryValue: category,
+    categoryOptions,
+    genderValue: gender,
+    typeValue: type,
+    materialValue: material,
+    colorValue: color,
+    minPrice,
+    maxPrice,
+    genderOptions,
+    typeOptions,
+    materialOptions,
+    colorOptions,
+    q,
+  }
+
+  return (
+    <div className="bg-page-bg min-h-screen">
+      {/* Collection banner — Impulse style */}
+      <div className="bg-surface-alt border-b border-[var(--color-header-border)]">
+        <div
+          className="mx-auto px-4 sm:px-6 py-10 md:py-14 text-center"
+          style={{ maxWidth: "var(--container-max)" }}
+        >
+          <nav className="text-xs uppercase tracking-[var(--letter-spacing-nav)] text-[var(--color-text-muted)] mb-4">
+            <LocalizedClientLink href="/" className="hover:text-heading">
+              Home
+            </LocalizedClientLink>
+            <span className="mx-2">/</span>
+            <span className="text-heading">Shop</span>
+          </nav>
+          <h1 className="font-display text-3xl md:text-4xl lg:text-5xl text-heading">
+            {q ? `Results for “${q}”` : "All products"}
+          </h1>
+          <p className="mt-3 text-sm text-[var(--color-text-muted)] max-w-lg mx-auto">
+            Browse our full collection. Filter by category, price, and more.
+          </p>
+        </div>
+      </div>
+
+      <div
+        className="mx-auto px-4 sm:px-6 py-8 lg:py-12"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
+          <aside className="hidden lg:block w-64 flex-shrink-0 lg:sticky lg:top-28 lg:self-start lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto">
+            <h2 className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading mb-6 pb-2 border-b border-[var(--color-header-border)]">
+              Filter
+            </h2>
+            <RefinementList {...filterProps} />
+          </aside>
+
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center justify-between gap-4 mb-6 lg:hidden">
+              <MobileFilters {...filterProps} />
+            </div>
+
+            {q && (
+              <div className="mb-6 flex items-center justify-between gap-4 p-4 bg-surface-muted border border-[var(--color-header-border)]">
+                <span className="text-sm text-[var(--color-text-muted)]">
+                  Showing results for <strong className="text-heading">"{q}"</strong>
+                </span>
+                <LocalizedClientLink
+                  href="/store"
+                  className="text-xs uppercase tracking-[var(--letter-spacing-nav)] font-semibold text-heading hover:underline"
+                >
+                  Clear
+                </LocalizedClientLink>
+              </div>
+            )}
+
+            <Suspense fallback={<SkeletonProductGrid />}>
+              <PaginatedProducts
+                sortBy={sort}
+                page={pageNumber}
+                countryCode={countryCode}
+                collectionId={
+                  Array.isArray(collection) ? collection.join(",") : collection
+                }
+                categoryId={
+                  Array.isArray(category) ? category.join(",") : category
+                }
+                gender={Array.isArray(gender) ? gender.join(",") : gender}
+                type={Array.isArray(type) ? type.join(",") : type}
+                material={Array.isArray(material) ? material.join(",") : material}
+                color={Array.isArray(color) ? color.join(",") : color}
+                min_price={minPrice}
+                max_price={maxPrice}
+                q={q}
+                filterProps={filterProps}
+              />
+            </Suspense>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/theme/valero/tokens/colors.js

@@ -0,0 +1,16 @@
+/**
+ * @deprecated Use theme.css CSS variables as the source of truth.
+ * Kept for tooling that reads JS token files during migration.
+ */
+module.exports = {
+  colors: {
+    pageBg: "var(--color-page-bg)",
+    brand: {
+      accent: "var(--color-brand-accent)",
+      accentHover: "var(--color-brand-accent-hover)",
+      accentLight: "var(--color-brand-accent-light)",
+      pink: "var(--color-brand-pink)",
+      primary: "var(--color-brand-primary)",
+    },
+  },
+}

package/templates/storefront/src/theme/valero/tokens/colors.ts

@@ -0,0 +1,21 @@
+/**
+ * Semantic Tailwind classes mapped to CSS variables in theme.css.
+ * Do not hardcode hex values here — edit theme.css instead.
+ */
+export const colorClasses = {
+  pageBg: "bg-page-bg",
+  surface: "bg-surface",
+  surfaceMuted: "bg-surface-muted",
+  brandAccent: "bg-brand-accent text-inverse",
+  brandAccentText: "text-brand-accent",
+  brandAccentBorder: "border-brand-accent",
+  brandAccentMuted: "bg-brand-accent-muted",
+  heading: "text-heading",
+  headingSub: "text-heading-sub",
+  body: "text-body",
+  muted: "text-muted",
+  inverse: "text-inverse",
+  footerBg: "bg-brand-footer",
+  promoGradient: "bg-promo-gradient",
+  cartBorder: "bg-cart-border",
+} as const

package/templates/storefront/src/theme/valero/tokens/fonts.ts

@@ -0,0 +1,13 @@
+/**
+ * Semantic Tailwind font classes mapped to CSS variables in theme.css.
+ * Do not hardcode font families here — edit theme.css instead.
+ */
+export const fontClasses = {
+  sans: "font-sans",
+  heading: "font-heading",
+  display: "font-display",
+  quote: "font-quote",
+  mono: "font-mono",
+  body: "font-sans leading-body tracking-body",
+  pageTitle: "font-heading font-bold leading-heading tracking-heading",
+} as const

package/templates/storefront/src/theme/valero/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from "./colors"
+export * from "./fonts"
+export * from "./spacing"

package/templates/storefront/src/theme/valero/tokens/spacing.ts

@@ -0,0 +1,9 @@
+export const spacing = {
+  sectionY: {
+    sm: "py-8",
+    md: "py-12",
+    lg: "py-16",
+  },
+  container: "max-w-[1440px] mx-auto",
+  content: "max-w-[1360px] mx-auto",
+} as const

package/templates/storefront/src/theme/valero/tokens/theme.css

@@ -0,0 +1,91 @@
+/**
+ * Valero theme — Impulse-inspired design tokens.
+ * Edit this file to retheme colors, fonts, and spacing.
+ */
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");
+
+:root {
+  /* Typography */
+  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
+  --font-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
+  --font-quote: "Libre Baskerville", Georgia, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 700;
+
+  --line-height-body: 1.6;
+  --line-height-heading: 1.15;
+  --letter-spacing-heading: 0.04em;
+  --letter-spacing-body: 0;
+  --letter-spacing-nav: 0.12em;
+
+  /* Surfaces */
+  --color-page-bg: #ffffff;
+  --color-surface: #ffffff;
+  --color-surface-muted: #f7f7f7;
+  --color-surface-alt: #f3f3f3;
+  --color-hero-fallback: #e8e8e8;
+  --color-footer-bg: #111111;
+  --color-header-bg: #ffffff;
+  --color-header-border: #e8e8e8;
+
+  /* Brand */
+  --color-brand-accent: #111111;
+  --color-brand-accent-hover: #333333;
+  --color-brand-accent-light: #444444;
+  --color-brand-accent-border: #dddddd;
+  --color-brand-accent-muted: #f0f0f0;
+  --color-brand-accent-rgb: 17, 17, 17;
+
+  --color-brand-pink: #c41e3a;
+  --color-brand-primary: #111111;
+  --color-brand-sale: #c41e3a;
+  --color-brand-success: #2d6a4f;
+
+  /* Text */
+  --color-text-heading: #111111;
+  --color-text-subheading: #333333;
+  --color-text-body: #4a4a4a;
+  --color-text-muted: #777777;
+  --color-text-inverse: #ffffff;
+
+  /* Navigation & panels */
+  --color-nav-active: var(--color-brand-accent);
+  --color-nav-active-bg: var(--color-brand-accent-muted);
+  --color-cart-panel-bg: var(--color-page-bg);
+  --color-border: var(--color-header-border);
+
+  /* Layout */
+  --header-height: 4.5rem;
+  --container-max: 1400px;
+
+  /* Effects */
+  --shadow-brand: 0 12px 32px rgba(0, 0, 0, 0.12);
+  --shadow-brand-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --gradient-promo: linear-gradient(
+    135deg,
+    var(--color-brand-accent),
+    var(--color-brand-accent-light),
+    var(--color-brand-accent)
+  );
+  --gradient-cart-border: linear-gradient(
+    to bottom right,
+    var(--color-brand-accent),
+    var(--color-brand-accent-light),
+    var(--color-brand-accent)
+  );
+  --gradient-hero: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.55) 0%,
+    rgba(0, 0, 0, 0.15) 45%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}

package/templates/storefront/tailwind.config.js

@@ -0,0 +1,221 @@
+const path = require("path")
+
+module.exports = {
+  darkMode: "class",
+  presets: [require("@medusajs/ui-preset")],
+  content: [
+    "./src/app/**/*.{js,ts,jsx,tsx}",
+    "./src/pages/**/*.{js,ts,jsx,tsx}",
+    "./src/components/**/*.{js,ts,jsx,tsx}",
+    "./src/modules/**/*.{js,ts,jsx,tsx}",
+    "./src/theme/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@medusajs/ui/dist/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      transitionProperty: {
+        width: "width margin",
+        height: "height",
+        bg: "background-color",
+        display: "display opacity",
+        visibility: "visibility",
+        padding: "padding-top padding-right padding-bottom padding-left",
+      },
+      colors: {
+        page: {
+          bg: "var(--color-page-bg)",
+        },
+        surface: {
+          DEFAULT: "var(--color-surface)",
+          muted: "var(--color-surface-muted)",
+        },
+        hero: {
+          fallback: "var(--color-hero-fallback)",
+        },
+        heading: {
+          DEFAULT: "var(--color-text-heading)",
+          sub: "var(--color-text-subheading)",
+        },
+        brand: {
+          accent: "var(--color-brand-accent)",
+          "accent-hover": "var(--color-brand-accent-hover)",
+          "accent-light": "var(--color-brand-accent-light)",
+          "accent-border": "var(--color-brand-accent-border)",
+          "accent-muted": "var(--color-brand-accent-muted)",
+          pink: "var(--color-brand-pink)",
+          primary: "var(--color-brand-primary)",
+          sale: "var(--color-brand-sale)",
+          success: "var(--color-brand-success)",
+          footer: "var(--color-footer-bg)",
+        },
+        body: "var(--color-text-body)",
+        muted: "var(--color-text-muted)",
+        inverse: "var(--color-text-inverse)",
+        grey: {
+          0: "#FFFFFF",
+          5: "#F9FAFB",
+          10: "#F3F4F6",
+          20: "#E5E7EB",
+          30: "#D1D5DB",
+          40: "#9CA3AF",
+          50: "#6B7280",
+          60: "#4B5563",
+          70: "#374151",
+          80: "#1F2937",
+          90: "#111827",
+        },
+      },
+      boxShadow: {
+        brand: "var(--shadow-brand)",
+        "brand-sm": "var(--shadow-brand-sm)",
+      },
+      backgroundImage: {
+        "promo-gradient": "var(--gradient-promo)",
+        "cart-border": "var(--gradient-cart-border)",
+      },
+      borderRadius: {
+        none: "0px",
+        soft: "2px",
+        base: "4px",
+        rounded: "8px",
+        large: "16px",
+        circle: "9999px",
+      },
+      maxWidth: {
+        "8xl": "100rem",
+      },
+      screens: {
+        "2xsmall": "320px",
+        xsmall: "512px",
+        small: "1024px",
+        medium: "1280px",
+        large: "1440px",
+        xlarge: "1680px",
+        "2xlarge": "1920px",
+      },
+      fontSize: {
+        "3xl": "2rem",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)"],
+        heading: ["var(--font-heading)"],
+        display: ["var(--font-display)"],
+        quote: ["var(--font-quote)"],
+        mono: ["var(--font-mono)"],
+      },
+      fontWeight: {
+        normal: "var(--font-weight-normal)",
+        medium: "var(--font-weight-medium)",
+        semibold: "var(--font-weight-semibold)",
+        bold: "var(--font-weight-bold)",
+        extrabold: "var(--font-weight-extrabold)",
+      },
+      lineHeight: {
+        body: "var(--line-height-body)",
+        heading: "var(--line-height-heading)",
+      },
+      letterSpacing: {
+        body: "var(--letter-spacing-body)",
+        heading: "var(--letter-spacing-heading)",
+      },
+      keyframes: {
+        ring: {
+          "0%": { transform: "rotate(0deg)" },
+          "100%": { transform: "rotate(360deg)" },
+        },
+        "fade-in-right": {
+          "0%": {
+            opacity: "0",
+            transform: "translateX(10px)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateX(0)",
+          },
+        },
+        "fade-in-top": {
+          "0%": {
+            opacity: "0",
+            transform: "translateY(-10px)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateY(0)",
+          },
+        },
+        "fade-out-top": {
+          "0%": {
+            height: "100%",
+          },
+          "99%": {
+            height: "0",
+          },
+          "100%": {
+            visibility: "hidden",
+          },
+        },
+        "accordion-slide-up": {
+          "0%": {
+            height: "var(--radix-accordion-content-height)",
+            opacity: "1",
+          },
+          "100%": {
+            height: "0",
+            opacity: "0",
+          },
+        },
+        "accordion-slide-down": {
+          "0%": {
+            "min-height": "0",
+            "max-height": "0",
+            opacity: "0",
+          },
+          "100%": {
+            "min-height": "var(--radix-accordion-content-height)",
+            "max-height": "none",
+            opacity: "1",
+          },
+        },
+        enter: {
+          "0%": { transform: "scale(0.9)", opacity: 0 },
+          "100%": { transform: "scale(1)", opacity: 1 },
+        },
+        leave: {
+          "0%": { transform: "scale(1)", opacity: 1 },
+          "100%": { transform: "scale(0.9)", opacity: 0 },
+        },
+        "slide-in": {
+          "0%": { transform: "translateY(-100%)" },
+          "100%": { transform: "translateY(0)" },
+        },
+        shimmer: {
+          "0%": { transform: "translateX(-100%)" },
+          "50%": { transform: "translateX(100%)" },
+          "100%": { transform: "translateX(100%)" },
+        },
+        marquee: {
+          "0%": { transform: "translateX(0%)" },
+          "100%": { transform: "translateX(-50%)" },
+        },
+      },
+      animation: {
+        shimmer: "shimmer 4s infinite",
+        marquee: "marquee 25s linear infinite",
+        ring: "ring 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite",
+        "fade-in-right":
+          "fade-in-right 0.3s cubic-bezier(0.5, 0, 0.5, 1) forwards",
+        "fade-in-top": "fade-in-top 0.2s cubic-bezier(0.5, 0, 0.5, 1) forwards",
+        "fade-out-top":
+          "fade-out-top 0.2s cubic-bezier(0.5, 0, 0.5, 1) forwards",
+        "accordion-open":
+          "accordion-slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards",
+        "accordion-close":
+          "accordion-slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards",
+        enter: "enter 200ms ease-out",
+        "slide-in": "slide-in 1.2s cubic-bezier(.41,.73,.51,1.02)",
+        leave: "leave 150ms ease-in forwards",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-radix")()],
+}

package/templates/storefront/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": "./src",
+    "paths": {
+      "@core/*": ["../node_modules/@pradip1995/commerce-core/src/*"],
+      "@commerce-auth/*": ["../node_modules/@pradip1995/commerce-auth/src/*"],
+      "@registry/*": ["../node_modules/@pradip1995/storefront-registry/src/*"],
+      "@controllers/*": ["../node_modules/@pradip1995/storefront-controllers/src/*"],
+      "@theme/*": ["theme/valero/*"],
+      "@modules/*": ["modules/*"]
+    },
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", ".next"]
+}