@vendure-platform/create 0.1.0 → 0.2.1-nightly.202605190703

package/dist/assets/storefront/src/scenarios/customer/branding.ts

@@ -0,0 +1,142 @@
+import type { StorefrontBranding } from '@/config/branding';
+
+/**
+ * Neutral branding shipped to customer scaffolds. Stripped of demo-rig
+ * features (no quick-login UI, no health-gate overlay) and Vendure-specific
+ * vendor links — customers can swap colors, copy, and logo to their brand.
+ */
+
+const baseVars: Record<string, string> = {
+    '--radius': '0.5rem',
+};
+
+const heroColors: Record<string, string> = {
+    '--hero-gradient-from': '#0f172a',
+    '--hero-gradient-via': '#1e293b',
+    '--hero-gradient-to': '#0f172a',
+    '--hero-accent': '#38bdf8',
+    '--hero-accent-bg': '#0ea5e9',
+    '--hero-accent-bg-hover': '#0284c7',
+    '--hero-accent-foreground': '#ffffff',
+    '--hero-text': '#f1f5f9',
+    '--hero-text-muted': '#94a3b8',
+    '--hero-border': '#334155',
+    '--hero-badge-bg': 'rgba(14, 165, 233, 0.1)',
+    '--hero-badge-border': 'rgba(14, 165, 233, 0.2)',
+};
+
+const darkColors: Record<string, string> = {
+    ...baseVars,
+
+    '--background': '#0f172a',
+    '--foreground': '#f1f5f9',
+
+    '--card': '#1e293b',
+    '--card-foreground': '#f1f5f9',
+    '--popover': '#1e293b',
+    '--popover-foreground': '#f1f5f9',
+
+    '--primary': '#0ea5e9',
+    '--primary-foreground': '#ffffff',
+
+    '--secondary': '#1e293b',
+    '--secondary-foreground': '#f1f5f9',
+
+    '--muted': '#0f172a',
+    '--muted-foreground': '#94a3b8',
+
+    '--accent': '#1e293b',
+    '--accent-foreground': '#f1f5f9',
+
+    '--destructive': '#ef4444',
+
+    '--border': '#334155',
+    '--input': '#0f172a',
+    '--ring': '#0ea5e9',
+
+    '--chart-1': '#0ea5e9',
+    '--chart-2': '#22c55e',
+    '--chart-3': '#eab308',
+    '--chart-4': '#f97316',
+    '--chart-5': '#ef4444',
+
+    '--sidebar': '#0f172a',
+    '--sidebar-foreground': '#f1f5f9',
+    '--sidebar-primary': '#0ea5e9',
+    '--sidebar-primary-foreground': '#ffffff',
+    '--sidebar-accent': '#1e293b',
+    '--sidebar-accent-foreground': '#f1f5f9',
+    '--sidebar-border': '#334155',
+    '--sidebar-ring': '#0ea5e9',
+
+    ...heroColors,
+};
+
+const lightColors: Record<string, string> = {
+    ...baseVars,
+
+    '--background': '#ffffff',
+    '--foreground': '#0f172a',
+
+    '--card': '#f8fafc',
+    '--card-foreground': '#0f172a',
+    '--popover': '#ffffff',
+    '--popover-foreground': '#0f172a',
+
+    '--primary': '#0ea5e9',
+    '--primary-foreground': '#ffffff',
+
+    '--secondary': '#f1f5f9',
+    '--secondary-foreground': '#0f172a',
+
+    '--muted': '#f1f5f9',
+    '--muted-foreground': '#64748b',
+
+    '--accent': '#f1f5f9',
+    '--accent-foreground': '#0f172a',
+
+    '--destructive': '#dc2626',
+
+    '--border': '#e2e8f0',
+    '--input': '#e2e8f0',
+    '--ring': '#0ea5e9',
+
+    '--chart-1': '#0ea5e9',
+    '--chart-2': '#16a34a',
+    '--chart-3': '#ca8a04',
+    '--chart-4': '#ea580c',
+    '--chart-5': '#dc2626',
+
+    '--sidebar': '#f8fafc',
+    '--sidebar-foreground': '#0f172a',
+    '--sidebar-primary': '#0ea5e9',
+    '--sidebar-primary-foreground': '#ffffff',
+    '--sidebar-accent': '#f1f5f9',
+    '--sidebar-accent-foreground': '#0f172a',
+    '--sidebar-border': '#e2e8f0',
+    '--sidebar-ring': '#0ea5e9',
+
+    ...heroColors,
+};
+
+export const branding: StorefrontBranding = {
+    siteName: 'My Shop',
+    siteDescription: 'A storefront powered by Vendure.',
+
+    logo: { src: '/scenarios/customer/logo.svg', alt: 'My Shop', width: 28, height: 28 },
+
+    colors: {
+        dark: darkColors,
+        light: lightColors,
+    },
+    footer: {
+        copyright: 'My Shop',
+    },
+
+    metadata: {
+        themeColor: '#0f172a',
+        defaultDescription: 'A storefront powered by Vendure.',
+        homepageTitle: 'My Shop',
+        homepageDescription: 'A storefront powered by Vendure.',
+    },
+};

package/dist/assets/storefront/src/scenarios/customer/hero.tsx

@@ -0,0 +1,76 @@
+import { getTranslations } from 'next-intl/server';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/i18n/navigation';
+import { getBranding } from '@/config/branding';
+import { ArrowRight } from 'lucide-react';
+
+/**
+ * Generic hero shipped with the `customer` scenario. Purely visual — no
+ * vendor-specific copy or imagery. Customers replace this entire component
+ * (or swap the Hero slot in their scenario) for their own brand intro.
+ *
+ * Hero copy is sourced from `branding.metadata.{homepageTitle,homepageDescription}`
+ * so customers can change the wording without editing this component.
+ *
+ * Translations: the CTA label uses the `Hero.browseCatalogue` key from
+ * `messages/<locale>.json`, so the button is localised for all 26 supported
+ * locales out of the box.
+ *
+ * Implemented as an async Server Component (not `'use client'`) so the
+ * `getBranding()` lookup — which transitively pulls in the full scenario
+ * registry — stays out of the client bundle. A client-side hero would force
+ * webpack to bundle every other scenario's client-only code, and scenarios
+ * like `kaminpro` reach into `'use cache'` server code which can't be
+ * imported from a client component.
+ */
+export async function CustomerHero() {
+    const t = await getTranslations('Hero');
+    const branding = getBranding();
+    return (
+        <section
+            aria-labelledby="customer-hero-heading"
+            className="relative overflow-hidden"
+            style={{
+                background: `linear-gradient(to bottom right, var(--hero-gradient-from), var(--hero-gradient-via), var(--hero-gradient-to))`,
+            }}
+        >
+            <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:48px_48px]" />
+
+            <div className="container mx-auto px-4 pt-[calc(var(--page-top-offset)+3rem)] pb-12 md:pt-[calc(var(--page-top-offset)+5rem)] md:pb-20 relative">
+                <div className="max-w-3xl mx-auto text-center space-y-6">
+                    <h1
+                        id="customer-hero-heading"
+                        className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight"
+                        style={{ color: 'var(--hero-text)' }}
+                    >
+                        {branding.metadata.homepageTitle}
+                    </h1>
+
+                    <p
+                        className="text-lg md:text-xl max-w-2xl mx-auto"
+                        style={{ color: 'var(--hero-text-muted)' }}
+                    >
+                        {branding.metadata.homepageDescription}
+                    </p>
+
+                    <div className="flex flex-col sm:flex-row gap-3 justify-center items-center pt-4">
+                        <Button
+                            asChild
+                            size="lg"
+                            className="min-w-[180px] font-semibold"
+                            style={{
+                                backgroundColor: 'var(--hero-accent-bg)',
+                                color: 'var(--hero-accent-foreground)',
+                            }}
+                        >
+                            <Link href="/search" prefetch={false}>
+                                {t('browseCatalogue')}
+                                <ArrowRight className="ml-2 w-4 h-4" />
+                            </Link>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/dist/assets/storefront/src/scenarios/{default → customer}/index.ts

@@ -1,12 +1,12 @@
 import type { ScenarioConfig } from '@/config/scenario';
 import { branding } from './branding';
-import { DefaultHero } from './hero';
+import { CustomerHero } from './hero';
 
-export const defaultScenario: ScenarioConfig = {
+export const customerScenario: ScenarioConfig = {
     branding,
     overrides: {
         home: {
-            Hero: DefaultHero,
+            Hero: CustomerHero,
         },
     },
 };

package/dist/assets/storefront/src/scenarios/{default → customer}/meta.ts

@@ -1,3 +1,3 @@
 import type {ScenarioMeta} from '@/config/scenario-meta';
 
-export const defaultMeta: ScenarioMeta = {};
+export const customerMeta: ScenarioMeta = {};