@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/scenarios/kaminpro/system-finder/wizard.tsx

@@ -0,0 +1,600 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Link } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
+import {
+    ArrowLeft,
+    ArrowRight,
+    Check,
+    ChevronRight,
+    Flame,
+    Fuel,
+    Gauge,
+    HardHat,
+    Home as HomeIcon,
+    Thermometer,
+    Wrench,
+} from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react';
+import {
+    Betriebsart,
+    Bauvorhaben,
+    Druck,
+    Temperaturklasse,
+    WizardAnswers,
+    decodeAnswers,
+    encodeAnswers,
+    isDruckRelevant,
+    isTemperaturklasseRelevant,
+    recommendSystems,
+} from './decision-tree';
+
+/* =============================================================
+   Step metadata — drives breadcrumb and progress indicator
+   ============================================================= */
+
+type StepId = 'bauvorhaben' | 'betriebsart' | 'druck' | 'temperaturklasse' | 'ergebnis';
+
+interface StepMeta {
+    id: StepId;
+    index: number;
+    label: string;
+    /** True when the step is meaningful for the current answer path. */
+    isRelevant: (answers: WizardAnswers) => boolean;
+}
+
+const STEPS: StepMeta[] = [
+    { id: 'bauvorhaben', index: 1, label: 'Bauvorhaben', isRelevant: () => true },
+    { id: 'betriebsart', index: 2, label: 'Betriebsart', isRelevant: () => true },
+    { id: 'druck', index: 3, label: 'Druck', isRelevant: isDruckRelevant },
+    { id: 'temperaturklasse', index: 4, label: 'Ausführung', isRelevant: isTemperaturklasseRelevant },
+    { id: 'ergebnis', index: 5, label: 'Ergebnis', isRelevant: () => true },
+];
+
+const STEP_ORDER: StepId[] = STEPS.map(s => s.id);
+const STEP_IDS = new Set<StepId>(STEP_ORDER);
+
+function isValidStepId(id: string | null | undefined): id is StepId {
+    return !!id && STEP_IDS.has(id as StepId);
+}
+
+function nextStep(current: StepId, answers: WizardAnswers): StepId {
+    const i = STEP_ORDER.indexOf(current);
+    for (let j = i + 1; j < STEP_ORDER.length; j++) {
+        const s = STEPS[j];
+        if (s.isRelevant(answers)) return s.id;
+    }
+    return 'ergebnis';
+}
+
+function prevStep(current: StepId, answers: WizardAnswers): StepId | null {
+    const i = STEP_ORDER.indexOf(current);
+    for (let j = i - 1; j >= 0; j--) {
+        const s = STEPS[j];
+        if (s.isRelevant(answers)) return s.id;
+    }
+    return null;
+}
+
+/* =============================================================
+   Shared primitives
+   ============================================================= */
+
+interface ChoiceCardProps {
+    selected: boolean;
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    onClick: () => void;
+}
+
+function ChoiceCard({ selected, icon, title, description, onClick }: ChoiceCardProps) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={cn(
+                'group relative flex flex-col items-start gap-3 rounded-lg border p-5 text-left transition-all',
+                'hover:border-[var(--primary)] hover:shadow-md',
+                selected ? 'border-[var(--primary)] bg-[var(--primary)]/5 shadow-md' : 'border-[var(--border)] bg-[var(--card)]',
+            )}
+            aria-pressed={selected}
+        >
+            <div
+                className={cn(
+                    'flex h-11 w-11 items-center justify-center rounded-md',
+                    selected ? 'bg-[var(--primary)] text-[var(--primary-foreground)]' : 'bg-[var(--muted)] text-[var(--muted-foreground)]',
+                )}
+            >
+                {icon}
+            </div>
+            <div className="flex-1">
+                <h3 className="text-base font-semibold text-[var(--foreground)]">{title}</h3>
+                <p className="mt-1 text-sm text-[var(--muted-foreground)]">{description}</p>
+            </div>
+            {selected && (
+                <div className="absolute right-4 top-4 flex h-6 w-6 items-center justify-center rounded-full bg-[var(--primary)] text-[var(--primary-foreground)]">
+                    <Check className="h-4 w-4" />
+                </div>
+            )}
+        </button>
+    );
+}
+
+interface ProgressBarProps {
+    currentStep: StepId;
+    answers: WizardAnswers;
+    onJump: (target: StepId) => void;
+}
+
+function ProgressBar({ currentStep, answers, onJump }: ProgressBarProps) {
+    const questionSteps = STEPS.filter(s => s.id !== 'ergebnis');
+    const currentIndex = STEPS.findIndex(s => s.id === currentStep);
+
+    return (
+        <nav aria-label="Wizard-Fortschritt">
+            <ol className="flex flex-wrap items-center gap-2">
+                {questionSteps.map((step, i) => {
+                    const relevant = step.isRelevant(answers);
+                    const isCurrent = step.id === currentStep;
+                    const isPast = i < currentIndex && step.id !== 'ergebnis';
+                    const clickable = isPast || isCurrent;
+                    const ariaLabel = isCurrent
+                        ? `Schritt ${step.index}: ${step.label} (aktuell)`
+                        : isPast
+                            ? `Zurück zu Schritt ${step.index}: ${step.label}`
+                            : `Schritt ${step.index}: ${step.label} (noch nicht verfügbar)`;
+
+                    return (
+                        <li key={step.id}>
+                            <button
+                                type="button"
+                                onClick={() => clickable && relevant && onJump(step.id)}
+                                disabled={!clickable || !relevant}
+                                aria-current={isCurrent ? 'step' : undefined}
+                                aria-label={ariaLabel}
+                                className={cn(
+                                    'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors',
+                                    isCurrent && 'border-[var(--primary)] bg-[var(--primary)]/10 text-[var(--primary)]',
+                                    !isCurrent && isPast && 'border-[var(--border)] bg-[var(--muted)] text-[var(--foreground)]',
+                                    !isCurrent && !isPast && 'border-[var(--border)] bg-transparent text-[var(--muted-foreground)]',
+                                    clickable && relevant && 'hover:border-[var(--primary)]',
+                                    (!clickable || !relevant) && 'cursor-default',
+                                )}
+                            >
+                                <span>{step.index}.</span>
+                                <span>{step.label}</span>
+                                {!relevant && isPast && (
+                                    <Badge variant="secondary" className="ml-1 text-[10px] font-normal">
+                                        Übersprungen
+                                    </Badge>
+                                )}
+                            </button>
+                        </li>
+                    );
+                })}
+            </ol>
+        </nav>
+    );
+}
+
+/* =============================================================
+   Step screens
+   ============================================================= */
+
+interface StepProps<V> {
+    value: V | undefined;
+    onChange: (value: V) => void;
+}
+
+function BauvorhabenStep({ value, onChange }: StepProps<Bauvorhaben>) {
+    return (
+        <div className="grid gap-4 sm:grid-cols-2">
+            <ChoiceCard
+                selected={value === 'neubau'}
+                icon={<HomeIcon className="h-6 w-6" />}
+                title="Neubau"
+                description="Planung für ein neues Gebäude. System wird typischerweise durch die Bauplanung vorspezifiziert — der Überdruck-Unterdruck-Schritt wird übersprungen."
+                onClick={() => onChange('neubau')}
+            />
+            <ChoiceCard
+                selected={value === 'sanierung'}
+                icon={<Wrench className="h-6 w-6" />}
+                title="Sanierung"
+                description="Bestehende Anlage modernisieren oder ersetzen. Der Druckzustand der Bestandsanlage bestimmt die zulässigen Materialien."
+                onClick={() => onChange('sanierung')}
+            />
+        </div>
+    );
+}
+
+function BetriebsartStep({ value, onChange }: StepProps<Betriebsart>) {
+    return (
+        <div className="grid gap-4 sm:grid-cols-2">
+            <ChoiceCard
+                selected={value === 'festbrennstoff'}
+                icon={<Flame className="h-6 w-6" />}
+                title="Festbrennstoff"
+                description="Kaminöfen und Festbrennstoffkessel (Holzscheit, Briketts). Erfordert Edelstahl für hohe Abgastemperaturen."
+                onClick={() => onChange('festbrennstoff')}
+            />
+            <ChoiceCard
+                selected={value === 'pellet'}
+                icon={<Flame className="h-6 w-6" />}
+                title="Pelletheizung"
+                description="Pelletkessel und Pelletöfen. Edelstahl-Systeme garantieren Abgastemperaturen bis T600."
+                onClick={() => onChange('pellet')}
+            />
+            <ChoiceCard
+                selected={value === 'gas'}
+                icon={<Fuel className="h-6 w-6" />}
+                title="Gas"
+                description="Gas-Brennwertgeräte und Gas-Niedertemperaturkessel. Moderne Brennwertsysteme laufen typischerweise im Überdruck."
+                onClick={() => onChange('gas')}
+            />
+            <ChoiceCard
+                selected={value === 'oel'}
+                icon={<Fuel className="h-6 w-6" />}
+                title="Öl"
+                description="Öl-Brennwertgeräte und Öl-Niedertemperaturkessel. Abgastemperatur bestimmt die Materialwahl (PP vs PVDF)."
+                onClick={() => onChange('oel')}
+            />
+        </div>
+    );
+}
+
+function DruckStep({ value, onChange }: StepProps<Druck>) {
+    return (
+        <div className="grid gap-4 sm:grid-cols-2">
+            <ChoiceCard
+                selected={value === 'ueberdruck'}
+                icon={<Gauge className="h-6 w-6" />}
+                title="Überdruck"
+                description="Moderne Brennwertgeräte arbeiten mit Überdruck im Abgasweg. Typisch für Gas-Brennwert und neuere Öl-Brennwertkessel."
+                onClick={() => onChange('ueberdruck')}
+            />
+            <ChoiceCard
+                selected={value === 'unterdruck'}
+                icon={<Gauge className="h-6 w-6" />}
+                title="Unterdruck"
+                description="Traditionelle Niedertemperaturkessel ziehen Luft durch natürlichen Zug. Erfordert Edelstahlsysteme — PolyFlex-Kunststoff nicht zugelassen."
+                onClick={() => onChange('unterdruck')}
+            />
+        </div>
+    );
+}
+
+function TemperaturklasseStep({ value, onChange }: StepProps<Temperaturklasse>) {
+    return (
+        <div className="grid gap-4 sm:grid-cols-2">
+            <ChoiceCard
+                selected={value === 't120'}
+                icon={<Thermometer className="h-6 w-6" />}
+                title="Bis 120 °C (T120)"
+                description="Standard-Öl-Brennwertbetrieb. Abgas unter 120 °C ermöglicht den Einsatz von PolyFlex PP — wirtschaftlicher und säurebeständig."
+                onClick={() => onChange('t120')}
+            />
+            <ChoiceCard
+                selected={value === 't160'}
+                icon={<Thermometer className="h-6 w-6" />}
+                title="Bis 160 °C (T160)"
+                description="Erhöhte Abgastemperaturen bei älteren Brennern oder ungünstiger Auslegung. PolyFlex PVDF widersteht Temperaturen bis 160 °C."
+                onClick={() => onChange('t160')}
+            />
+        </div>
+    );
+}
+
+/* =============================================================
+   Results screen
+   ============================================================= */
+
+function ResultsScreen({ answers, onReset }: { answers: WizardAnswers; onReset: () => void }) {
+    const recommendations = recommendSystems(answers);
+    const [primary, ...alternatives] = recommendations;
+
+    return (
+        <div className="space-y-8">
+            <div className="space-y-2">
+                <h2 className="text-2xl font-bold text-[var(--foreground)] md:text-3xl">
+                    Ihre Empfehlung
+                </h2>
+                <p className="text-[var(--muted-foreground)]">
+                    Basierend auf Ihren Angaben haben wir das passende System für Sie ermittelt.
+                    Klicken Sie auf „Zum Konfigurator“ — Ihre Angaben werden direkt übernommen.
+                </p>
+            </div>
+
+            <RecommendationCard system={primary} answers={answers} primary />
+
+            {alternatives.length > 0 && (
+                <div className="space-y-4">
+                    <h3 className="text-lg font-semibold text-[var(--foreground)]">
+                        Alternative Ausführungen
+                    </h3>
+                    <div className="grid gap-4">
+                        {alternatives.map(system => (
+                            <RecommendationCard key={system.code} system={system} answers={answers} />
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            <div className="border-t border-[var(--border)] pt-6 text-sm text-[var(--muted-foreground)]">
+                <p className="mb-3">
+                    Unsicher bei der Auswahl? Unsere Vertriebsingenieure prüfen Ihre Konfiguration im
+                    Rahmen der Fachberatung — verfügbar direkt aus dem Konfigurator.
+                </p>
+                <Button variant="outline" size="sm" onClick={onReset}>
+                    <ArrowLeft className="mr-2 h-4 w-4" />
+                    Neu starten
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+function RecommendationCard({
+    system,
+    answers,
+    primary,
+}: {
+    system: ReturnType<typeof recommendSystems>[0];
+    answers: WizardAnswers;
+    primary?: boolean;
+}) {
+    const params = useMemo(() => {
+        const parts: string[] = [];
+        if (answers.betriebsart) parts.push(`fuel=${answers.betriebsart}`);
+        if (answers.druck) parts.push(`druck=${answers.druck}`);
+        if (answers.temperaturklasse) parts.push(`tempclass=${answers.temperaturklasse}`);
+        return parts.length > 0 ? `?${parts.join('&')}` : '';
+    }, [answers]);
+
+    return (
+        <Card
+            className={cn(
+                primary && 'border-[var(--primary)] shadow-md',
+            )}
+        >
+            <CardContent className="p-6">
+                <div className="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
+                    <div className="flex-1 space-y-4">
+                        <div>
+                            {primary && (
+                                <Badge className="mb-2 bg-[var(--primary)] text-[var(--primary-foreground)]">
+                                    Empfohlen
+                                </Badge>
+                            )}
+                            <h3 className="text-xl font-bold text-[var(--foreground)]">{system.name}</h3>
+                            <p className="mt-1 text-sm text-[var(--muted-foreground)]">{system.tagline}</p>
+                        </div>
+
+                        <div className="flex flex-wrap gap-2">
+                            <SpecChip label="Material" value={system.material} />
+                            <SpecChip label="Durchmesser" value={system.diameterRange} />
+                            <SpecChip label="max. Abgastemperatur" value={system.maxExhaustTemperature} />
+                            <SpecChip label="Wandstärke" value={system.wallSpec} />
+                        </div>
+
+                        {system.reasons.length > 0 && (
+                            <ul className="space-y-1 text-sm text-[var(--muted-foreground)]">
+                                {system.reasons.map(reason => (
+                                    <li key={reason} className="flex gap-2">
+                                        <Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-[var(--primary)]" />
+                                        <span>{reason}</span>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+
+                    <div className="flex flex-col gap-2 md:min-w-[180px]">
+                        <Button asChild size="lg" variant={primary ? 'default' : 'outline'}>
+                            <Link href={`/product/${system.productSlug}${params}`} prefetch={false}>
+                                Zum Konfigurator
+                                <ArrowRight className="ml-2 h-4 w-4" />
+                            </Link>
+                        </Button>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+
+function SpecChip({ label, value }: { label: string; value: string }) {
+    return (
+        <div className="inline-flex items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--muted)] px-2.5 py-1 text-xs">
+            <span className="text-[var(--muted-foreground)]">{label}:</span>
+            <span className="font-medium text-[var(--foreground)]">{value}</span>
+        </div>
+    );
+}
+
+/* =============================================================
+   Main wizard component
+   ============================================================= */
+
+export function SystemFinderWizard() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [, startTransition] = useTransition();
+
+    // Derive initial state from URL, validating against the known step set.
+    // Anything unrecognised (missing, misspelled, crafted URL) snaps back to
+    // the first step. If `ergebnis` is requested without the required answers,
+    // also bounce to the first step so the Results screen never renders with
+    // empty recommendations.
+    const [answers, setAnswersState] = useState<WizardAnswers>(() =>
+        decodeAnswers(searchParams.get('s')),
+    );
+    const [currentStep, setCurrentStepState] = useState<StepId>(() => {
+        const raw = searchParams.get('step');
+        const initial: StepId = isValidStepId(raw) ? raw : 'bauvorhaben';
+        const initialAnswers = decodeAnswers(searchParams.get('s'));
+        const hasRequired = !!initialAnswers.bauvorhaben && !!initialAnswers.betriebsart;
+        return initial === 'ergebnis' && !hasRequired ? 'bauvorhaben' : initial;
+    });
+
+    const syncToUrl = useCallback(
+        (nextAnswers: WizardAnswers, nextStepId: StepId) => {
+            const encoded = encodeAnswers(nextAnswers);
+            const url = new URL(window.location.href);
+            url.searchParams.set('step', nextStepId);
+            if (encoded) url.searchParams.set('s', encoded);
+            else url.searchParams.delete('s');
+            startTransition(() => {
+                router.replace(url.pathname + url.search, { scroll: false });
+            });
+        },
+        [router],
+    );
+
+    // Single source-of-truth for URL → state sync. Keeping the side effect
+    // out of the state updater makes the updater pure (safe under React
+    // StrictMode double-invocation) and removes the stale-closure race
+    // between `setAnswers` and `currentStep`. Skip the initial render so
+    // we don't redundantly replace the URL with what the URL already says
+    // (which would push an extra history entry on a fresh page load).
+    const isInitialSync = useRef(true);
+    useEffect(() => {
+        if (isInitialSync.current) {
+            isInitialSync.current = false;
+            return;
+        }
+        syncToUrl(answers, currentStep);
+    }, [answers, currentStep, syncToUrl]);
+
+    const setAnswers = useCallback((patch: Partial<WizardAnswers>) => {
+        setAnswersState(prev => ({ ...prev, ...patch }));
+    }, []);
+
+    const goToStep = useCallback((stepId: StepId) => {
+        setCurrentStepState(stepId);
+    }, []);
+
+    const handleContinue = () => goToStep(nextStep(currentStep, answers));
+    const prevStepId = useMemo(() => prevStep(currentStep, answers), [currentStep, answers]);
+    const handleBack = () => {
+        if (prevStepId) goToStep(prevStepId);
+    };
+    const handleReset = () => {
+        setAnswersState({});
+        setCurrentStepState('bauvorhaben');
+    };
+
+    const canContinue = (() => {
+        switch (currentStep) {
+            case 'bauvorhaben': return !!answers.bauvorhaben;
+            case 'betriebsart': return !!answers.betriebsart;
+            case 'druck': return !!answers.druck;
+            case 'temperaturklasse': return !!answers.temperaturklasse;
+            default: return true;
+        }
+    })();
+
+    const stepMeta = STEPS.find(s => s.id === currentStep)!;
+    const isResultsScreen = currentStep === 'ergebnis';
+
+    return (
+        <div className="space-y-8">
+            {/* Breadcrumb */}
+            <nav className="flex items-center gap-1 text-sm text-[var(--muted-foreground)]">
+                <Link href="/" className="hover:text-[var(--foreground)]">
+                    Home
+                </Link>
+                <ChevronRight className="h-4 w-4" />
+                <span className="font-medium text-[var(--foreground)]">System Finder</span>
+            </nav>
+
+            {/* Header */}
+            <header className="space-y-3">
+                <div className="flex items-center gap-2">
+                    <HardHat className="h-5 w-5 text-[var(--primary)]" />
+                    <span className="text-sm font-medium uppercase tracking-wider text-[var(--primary)]">
+                        System Finder
+                    </span>
+                </div>
+                <h1 className="text-3xl font-bold text-[var(--foreground)] md:text-4xl">
+                    Das passende System für Ihr Vorhaben
+                </h1>
+                <p className="max-w-2xl text-base text-[var(--muted-foreground)]">
+                    Beantworten Sie drei bis vier Fragen und wir zeigen Ihnen die passende Systemfamilie
+                    — StahlLine DW für Festbrennstoffe, PolyFlex PP/PVDF für Brennwert, oder eine
+                    Mischlösung. Die Antworten werden direkt in den Konfigurator übernommen.
+                </p>
+            </header>
+
+            {/* Progress */}
+            {!isResultsScreen && (
+                <ProgressBar currentStep={currentStep} answers={answers} onJump={goToStep} />
+            )}
+
+            {/* Current step */}
+            <section className="space-y-6">
+                {!isResultsScreen && (
+                    <div className="space-y-1">
+                        <div className="text-sm font-medium text-[var(--muted-foreground)]">
+                            Schritt {stepMeta.index} von 4
+                        </div>
+                        <h2 className="text-xl font-semibold text-[var(--foreground)] md:text-2xl">
+                            {currentStep === 'bauvorhaben' && 'Welches Bauvorhaben planen Sie?'}
+                            {currentStep === 'betriebsart' && 'Welche Betriebsart soll angeschlossen werden?'}
+                            {currentStep === 'druck' && 'Druckzustand der Bestandsanlage?'}
+                            {currentStep === 'temperaturklasse' && 'Welche Abgastemperatur erwarten Sie?'}
+                        </h2>
+                    </div>
+                )}
+
+                {currentStep === 'bauvorhaben' && (
+                    <BauvorhabenStep
+                        value={answers.bauvorhaben}
+                        onChange={v => setAnswers({ bauvorhaben: v })}
+                    />
+                )}
+                {currentStep === 'betriebsart' && (
+                    <BetriebsartStep
+                        value={answers.betriebsart}
+                        onChange={v => setAnswers({ betriebsart: v })}
+                    />
+                )}
+                {currentStep === 'druck' && (
+                    <DruckStep
+                        value={answers.druck}
+                        onChange={v => setAnswers({ druck: v })}
+                    />
+                )}
+                {currentStep === 'temperaturklasse' && (
+                    <TemperaturklasseStep
+                        value={answers.temperaturklasse}
+                        onChange={v => setAnswers({ temperaturklasse: v })}
+                    />
+                )}
+                {isResultsScreen && <ResultsScreen answers={answers} onReset={handleReset} />}
+            </section>
+
+            {/* Nav buttons */}
+            {!isResultsScreen && (
+                <div className="flex items-center justify-between border-t border-[var(--border)] pt-6">
+                    <Button
+                        variant="outline"
+                        onClick={handleBack}
+                        disabled={!prevStep(currentStep, answers)}
+                    >
+                        <ArrowLeft className="mr-2 h-4 w-4" />
+                        Zurück
+                    </Button>
+                    <Button onClick={handleContinue} disabled={!canContinue}>
+                        {nextStep(currentStep, answers) === 'ergebnis' ? 'Ergebnis anzeigen' : 'Weiter'}
+                        <ArrowRight className="ml-2 h-4 w-4" />
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/schema.graphql.placeholder

@@ -0,0 +1,5 @@
+# This file is auto-generated. Do not edit manually.
+# Run the following command with your Vendure server running:
+#   cd storefront
+#   npx gql.tada generate-schema http://localhost:3500/shop-api --output ./src/schema.graphql
+#   npx gql.tada generate output --tsconfig ./tsconfig.json

package/dist/assets/storefront/tsconfig.json

@@ -0,0 +1,37 @@
+{
+    "compilerOptions": {
+        "target": "ES2017",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "react-jsx",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            },
+            {
+                "name": "gql.tada/ts-plugin",
+                "schema": "./src/schema.graphql",
+                "tadaOutputLocation": "./src/graphql-env.d.ts"
+            }
+        ],
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+    "exclude": ["node_modules"],
+    "references": [
+        {
+            "path": "../../libs/storefront-client"
+        }
+    ]
+}