@funnelsgrove/cli 0.1.14 → 0.1.18

package/template_scaffold/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "funnel-template",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --webpack",
+    "dev:turbo": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "test:run": "vitest run --passWithNoTests",
+    "validate:funnel": "vite-node --config src/contract/funnel-validator.vite.config.ts src/contract/validate-funnel.cli.ts"
+  },
+  "dependencies": {
+    "@funnelsgrove/analytics": "^0.1.36",
+    "@funnelsgrove/payments": "^0.1.53",
+    "@funnelsgrove/runtime": "^0.1.59",
+    "@stripe/react-stripe-js": "^5.6.0",
+    "@stripe/stripe-js": "^8.7.0",
+    "lucide-react": "^0.553.0",
+    "next": "16.1.6",
+    "posthog-js": "^1.369.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "stripe": "^20.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "typescript": "^5",
+    "vite-node": "3.2.4",
+    "vitest": "^3.2.4"
+  }
+}

package/template_scaffold/package.test.ts

@@ -0,0 +1,23 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+type PackageJson = {
+  dependencies?: Record<string, string>;
+  version?: string;
+};
+
+const readPackageJson = (url: URL): PackageJson =>
+  JSON.parse(readFileSync(url, 'utf8')) as PackageJson;
+
+describe('funnel-template shared package dependencies', () => {
+  it('tracks the current shared runtime, analytics, and payments package versions', () => {
+    const templatePackage = readPackageJson(new URL('./package.json', import.meta.url));
+    const runtimePackage = readPackageJson(new URL('../funnel-runtime/package.json', import.meta.url));
+    const analyticsPackage = readPackageJson(new URL('../funnel-analytics/package.json', import.meta.url));
+    const paymentsPackage = readPackageJson(new URL('../funnel-payments/package.json', import.meta.url));
+
+    expect(templatePackage.dependencies?.['@funnelsgrove/runtime']).toBe(`^${runtimePackage.version}`);
+    expect(templatePackage.dependencies?.['@funnelsgrove/analytics']).toBe(`^${analyticsPackage.version}`);
+    expect(templatePackage.dependencies?.['@funnelsgrove/payments']).toBe(`^${paymentsPackage.version}`);
+  });
+});

package/template_scaffold/public/claimbee/glow.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 116 109.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 11" d="M0 22.5L51 0H85L116 22.5V54.5V89L74.5 109.5L42 103L9 89L0 61.5V22.5Z" fill="var(--fill-0, #FEFDF5)"/>
+</svg>

package/template_scaffold/public/claimbee/testimonial-star.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16.1222 15.4039" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Star 1" d="M7.37895 0.495601C7.59366 -0.165201 8.52852 -0.1652 8.74323 0.495602L10.1545 4.83902C10.2505 5.13454 10.5259 5.33462 10.8366 5.33462H15.4036C16.0984 5.33462 16.3873 6.22372 15.8251 6.63212L12.1304 9.3165C11.879 9.49914 11.7738 9.82288 11.8699 10.1184L13.2811 14.4618C13.4958 15.1226 12.7395 15.6721 12.1774 15.2637L8.48267 12.5793C8.23129 12.3967 7.89089 12.3967 7.63951 12.5793L3.94477 15.2637C3.38266 15.6721 2.62635 15.1226 2.84105 14.4618L4.25232 10.1184C4.34834 9.82288 4.24315 9.49914 3.99176 9.3165L0.297032 6.63212C-0.26508 6.22372 0.0238078 5.33462 0.718616 5.33462H5.28555C5.59628 5.33462 5.87167 5.13454 5.96769 4.83902L7.37895 0.495601Z" fill="var(--fill-0, #F28100)"/>
+</svg>

package/template_scaffold/public/please/glow.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 116 109.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 11" d="M0 22.5L51 0H85L116 22.5V54.5V89L74.5 109.5L42 103L9 89L0 61.5V22.5Z" fill="var(--fill-0, #FEFDF5)"/>
+</svg>

package/template_scaffold/public/please/testimonial-star.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16.1222 15.4039" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Star 1" d="M7.37895 0.495601C7.59366 -0.165201 8.52852 -0.1652 8.74323 0.495602L10.1545 4.83902C10.2505 5.13454 10.5259 5.33462 10.8366 5.33462H15.4036C16.0984 5.33462 16.3873 6.22372 15.8251 6.63212L12.1304 9.3165C11.879 9.49914 11.7738 9.82288 11.8699 10.1184L13.2811 14.4618C13.4958 15.1226 12.7395 15.6721 12.1774 15.2637L8.48267 12.5793C8.23129 12.3967 7.89089 12.3967 7.63951 12.5793L3.94477 15.2637C3.38266 15.6721 2.62635 15.1226 2.84105 14.4618L4.25232 10.1184C4.34834 9.82288 4.24315 9.49914 3.99176 9.3165L0.297032 6.63212C-0.26508 6.22372 0.0238078 5.33462 0.718616 5.33462H5.28555C5.59628 5.33462 5.87167 5.13454 5.96769 4.83902L7.37895 0.495601Z" fill="var(--fill-0, #F28100)"/>
+</svg>

package/template_scaffold/src/app/[stepId]/page.test.tsx

@@ -0,0 +1,59 @@
+import { vi, describe, expect, it, beforeEach } from 'vitest';
+
+const mockRedirect = vi.fn();
+
+vi.mock('next/navigation', () => ({
+  redirect: (target: string) => {
+    mockRedirect(target);
+    throw new Error(`redirect:${target}`);
+  },
+}));
+
+vi.mock('@/runtime/funnel-runtime', () => ({
+  defaultFunnelStepId: 'step-1',
+  funnelStepSequence: ['step-1', 'step-2'],
+  getPathForStep: (stepId: string) => `/${stepId}`,
+  isFunnelStepId: (stepId: string) => stepId === 'step-1' || stepId === 'step-2',
+}));
+
+describe('step preview page', () => {
+  beforeEach(() => {
+    mockRedirect.mockReset();
+  });
+
+  it('passes thumbnail preview mode through without top padding', async () => {
+    const StepPageModule = await import('@/app/[stepId]/page');
+
+    const page = await StepPageModule.default({
+      params: Promise.resolve({ stepId: 'step-1' }),
+      searchParams: Promise.resolve({
+        previewFrame: '1',
+        previewStepLock: '1',
+        previewThumbnail: '1',
+      }),
+    });
+
+    expect(page.props.style).toEqual({
+      justifyContent: 'flex-start',
+    });
+    expect(page.props.children.props).toEqual({
+      initialStepId: 'step-1',
+      lockToInitialStep: true,
+      isPreviewFrame: true,
+      isPreviewThumbnail: true,
+    });
+  });
+
+  it('redirects unknown steps to the first manifest step', async () => {
+    const StepPageModule = await import('@/app/[stepId]/page');
+
+    await expect(
+      StepPageModule.default({
+        params: Promise.resolve({ stepId: 'missing-step' }),
+        searchParams: Promise.resolve({}),
+      }),
+    ).rejects.toThrow('redirect:/step-1');
+
+    expect(mockRedirect).toHaveBeenCalledWith('/step-1');
+  });
+});

package/template_scaffold/src/app/[stepId]/page.tsx

@@ -0,0 +1,62 @@
+import type { CSSProperties } from 'react';
+import { redirect } from 'next/navigation';
+import { FunnelFlow } from '@/components/FunnelFlow';
+import {
+  defaultFunnelStepId,
+  funnelStepSequence,
+  getPathForStep,
+  isFunnelStepId,
+} from '@/runtime/funnel-runtime';
+
+type StepPageProps = {
+  params: Promise<{
+    stepId: string;
+  }>;
+  searchParams?: Promise<{
+    previewFrame?: string | string[];
+    previewStepLock?: string | string[];
+    previewThumbnail?: string | string[];
+  }>;
+};
+
+export const dynamic = 'force-static';
+
+export function generateStaticParams() {
+  return funnelStepSequence.map((stepId) => ({ stepId }));
+}
+
+export default async function StepPage({ params, searchParams }: StepPageProps) {
+  const { stepId } = await params;
+  const resolvedSearchParams = (await searchParams) || {};
+  const previewFrameParam = resolvedSearchParams.previewFrame;
+  const previewStepLockParam = resolvedSearchParams.previewStepLock;
+  const previewThumbnailParam = resolvedSearchParams.previewThumbnail;
+  const isPreviewFrame = Array.isArray(previewFrameParam) ? previewFrameParam.includes('1') : previewFrameParam === '1';
+  const isPreviewStepLock = Array.isArray(previewStepLockParam)
+    ? previewStepLockParam.includes('1')
+    : previewStepLockParam === '1';
+  const isPreviewThumbnail = Array.isArray(previewThumbnailParam)
+    ? previewThumbnailParam.includes('1')
+    : previewThumbnailParam === '1';
+
+  if (!isFunnelStepId(stepId)) {
+    redirect(getPathForStep(defaultFunnelStepId));
+  }
+
+  const pageStyle: CSSProperties = isPreviewFrame
+    ? {
+        justifyContent: 'flex-start',
+      }
+    : {};
+
+  return (
+    <main className="page-root" style={pageStyle}>
+      <FunnelFlow
+        initialStepId={stepId}
+        lockToInitialStep={isPreviewStepLock}
+        isPreviewFrame={isPreviewFrame}
+        isPreviewThumbnail={isPreviewThumbnail}
+      />
+    </main>
+  );
+}

package/template_scaffold/src/app/globals.css

@@ -0,0 +1,49 @@
+:root {
+  color-scheme: light;
+  font-family: var(--font-family-base);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-family-base);
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: var(--line-height-body);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  color: var(--color-text);
+  font-family: var(--font-family-display);
+  line-height: var(--line-height-heading);
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+.page-root {
+  min-height: 100svh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-bg);
+}

package/template_scaffold/src/app/layout.test.ts

@@ -0,0 +1,26 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+describe('RootLayout metadata source', () => {
+  it('wires project page metadata settings into Next metadata', () => {
+    const layoutSource = readFileSync(path.resolve(__dirname, './layout.tsx'), 'utf8');
+
+    expect(layoutSource).toContain('runtimePublicConfig.pageTitle');
+    expect(layoutSource).toContain('runtimePublicConfig.pageDescription');
+    expect(layoutSource).toContain('runtimePublicConfig.faviconUrl');
+    expect(layoutSource).toContain('runtimePublicConfig.pagePreviewImageUrl');
+    expect(layoutSource).toContain('openGraph');
+    expect(layoutSource).toContain('twitter');
+  });
+
+  it('renders Google tag head scripts through the shared analytics package', () => {
+    const layoutSource = readFileSync(path.resolve(__dirname, './layout.tsx'), 'utf8');
+
+    expect(layoutSource).toContain("import { buildGoogleTagHeadScripts } from '@funnelsgrove/analytics'");
+    expect(layoutSource).toContain('const googleTagHeadScripts = buildGoogleTagHeadScripts();');
+    expect(layoutSource).toContain('<head>');
+    expect(layoutSource).toContain('googleTagHeadScripts.map');
+    expect(layoutSource).toContain('dangerouslySetInnerHTML');
+  });
+});

package/template_scaffold/src/app/layout.tsx

@@ -0,0 +1,61 @@
+import type { CSSProperties } from 'react';
+import type { Metadata } from 'next';
+import { buildGoogleTagHeadScripts } from '@funnelsgrove/analytics';
+import { runtimePublicConfig } from '@funnelsgrove/runtime';
+import { funnelConfig } from '@/config/funnel.config';
+import { themeCssVariables } from '@/theme/theme';
+import './globals.css';
+import '../steps/styles/index.css';
+
+const metadataTitle = runtimePublicConfig.pageTitle || funnelConfig.meta.title;
+const metadataDescription = runtimePublicConfig.pageDescription || funnelConfig.meta.description;
+const metadataPreviewImages = runtimePublicConfig.pagePreviewImageUrl
+  ? [{ url: runtimePublicConfig.pagePreviewImageUrl }]
+  : undefined;
+const googleTagHeadScripts = buildGoogleTagHeadScripts();
+
+export const metadata: Metadata = {
+  title: metadataTitle,
+  description: metadataDescription,
+  icons: runtimePublicConfig.faviconUrl
+    ? {
+        icon: [{ url: runtimePublicConfig.faviconUrl }],
+      }
+    : undefined,
+  openGraph: {
+    title: metadataTitle,
+    description: metadataDescription,
+    images: metadataPreviewImages,
+  },
+  twitter: {
+    card: metadataPreviewImages ? 'summary_large_image' : 'summary',
+    title: metadataTitle,
+    description: metadataDescription,
+    images: runtimePublicConfig.pagePreviewImageUrl ? [runtimePublicConfig.pagePreviewImageUrl] : undefined,
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <head>
+        {googleTagHeadScripts.map((script) =>
+          script.src ? (
+            <script key={script.id} id={script.id} async src={script.src} />
+          ) : (
+            <script
+              key={script.id}
+              id={script.id}
+              dangerouslySetInnerHTML={{ __html: script.content ?? '' }}
+            />
+          ),
+        )}
+      </head>
+      <body style={themeCssVariables as CSSProperties}>{children}</body>
+    </html>
+  );
+}

package/template_scaffold/src/app/page.tsx

@@ -0,0 +1,8 @@
+import { FunnelFlow } from '@/components/FunnelFlow';
+export default function Page() {
+  return (
+    <main className="page-root">
+      <FunnelFlow />
+    </main>
+  );
+}