@funnelsgrove/cli 0.1.87 → 0.1.89

package/template_scaffold/src/steps/step-02.tsx

@@ -1,140 +0,0 @@
-import { useMemo, useState } from 'react';
-import { FunnelStepImage } from '@/components/FunnelStepImage';
-import { FunnelStepHeader } from '@/components/step/FunnelStepHeader';
-import { getStepContentLocale } from '@/runtime/step-content-context';
-import {
-  stepTwoContent,
-  stepTwoOptions,
-  type StepTwoOptionId,
-} from '@/steps/content/step-02.content';
-import {
-  PrimaryButton,
-  usePreviewStepLocalizedContent,
-  useFunnel,
-  useStepChoices,
-  type FunnelStepMeta,
-} from '@funnelsgrove/runtime';
-
-export const stepTwoId = 'step-2';
-
-export const stepTwo: FunnelStepMeta = {
-  id: stepTwoId,
-  name: 'step-2',
-  type: 'multi_select_choice',
-  choice: {
-    answerKey: 'selectedDevices',
-    allowEmpty: true,
-  },
-  figmaNodeId: 'template-02-devices',
-  title: 'Step 2',
-  description: 'Device selection step with visual options.',
-  actionBar: {
-    hidden: true,
-  },
-};
-
-export function StepTwo() {
-  const { attributes } = useFunnel();
-  const { completeMulti } = useStepChoices(stepTwo, stepTwoOptions);
-  const [selectedIds, setSelectedIds] = useState<StepTwoOptionId[]>([]);
-  const content = usePreviewStepLocalizedContent(
-    stepTwoId,
-    stepTwoContent,
-    getStepContentLocale(attributes),
-  );
-
-  const selectedLookup = useMemo(() => new Set(selectedIds), [selectedIds]);
-
-  const toggleOption = (optionId: StepTwoOptionId) => {
-    setSelectedIds((prev) => {
-      const exists = prev.includes(optionId);
-      return exists ? prev.filter((id) => id !== optionId) : [...prev, optionId];
-    });
-  };
-
-  return (
-    <>
-      <section className="devices-step" data-node-id="template:02-devices">
-        <FunnelStepHeader
-          className="devices-header"
-          titleClassName="devices-title"
-          title={
-            <>
-              {content.title[0]}
-              <br />
-              <span className="is-accent">{content.title[1]}</span>
-            </>
-          }
-          subtitle={content.description}
-          subtitleClassName="devices-description"
-        />
-
-        <div className="devices-options" role="group" aria-label={content.optionsLabel}>
-          {content.options.map((option) => {
-            const isSelected = selectedLookup.has(option.id);
-
-            return (
-              <button
-                key={option.id}
-                type="button"
-                aria-pressed={isSelected}
-                className={
-                  isSelected
-                    ? 'device-option is-interactive is-selected'
-                    : 'device-option is-interactive'
-                }
-                onClick={() => toggleOption(option.id)}
-              >
-                <span className="device-option-main">
-                  <FunnelStepImage
-                    src={option.image.src}
-                    alt={option.image.alt || ''}
-                    width={42}
-                    height={42}
-                    className="device-option-image"
-                    draggable={false}
-                  />
-                  <span className="device-option-label">{option.label}</span>
-                </span>
-
-                <span
-                  className={isSelected ? 'device-option-checkbox is-selected' : 'device-option-checkbox'}
-                  aria-hidden="true"
-                >
-                  {isSelected ? <span className="device-option-checkbox-icon">✓</span> : null}
-                </span>
-              </button>
-            );
-          })}
-        </div>
-      </section>
-
-      <footer className="action-bar">
-        <PrimaryButton onClick={() => completeMulti(selectedIds)}>
-          {content.continueLabel}
-        </PrimaryButton>
-      </footer>
-
-      {stepTwoStyles ? <style>{stepTwoStyles}</style> : null}
-    </>
-  );
-}
-
-const stepTwoStyles = `
-.device-option {
-  cursor: pointer;
-}
-
-.device-option-image {
-  width: 42px;
-  height: 42px;
-  object-fit: contain;
-  border-radius: 8px;
-}
-
-.device-option-checkbox-icon {
-  font-size: 12px;
-  line-height: 1;
-  font-weight: 800;
-}
-`;

package/template_scaffold/src/steps/step-03.tsx

@@ -1,262 +0,0 @@
-import { useEffect } from 'react';
-import { FunnelStepImage } from '@/components/FunnelStepImage';
-import {
-  usePreviewStepLocalizedContent,
-  useFunnel,
-  type FunnelStepMeta,
-} from '@funnelsgrove/runtime';
-import bee from '@/assets/claimbee/bee.png';
-import glow from '@/assets/claimbee/glow.svg';
-import stepsSpriteAlt from '@/assets/claimbee/steps-sprite-alt.png';
-import { getStepContentLocale } from '@/runtime/step-content-context';
-import { stepThreeContent } from '@/steps/content/step-03.content';
-
-export const stepThreeId = 'step-3';
-const STEP_THREE_AUTO_ADVANCE_MS = 2200;
-
-export const resolveStepThreeAutoAdvanceMs = (isBuilder: boolean): number | null => {
-  return isBuilder ? null : STEP_THREE_AUTO_ADVANCE_MS;
-};
-
-export const stepThree: FunnelStepMeta = {
-  id: stepThreeId,
-  name: 'step-3',
-  type: 'progress_interstitial',
-  figmaNodeId: 'template-03-processing',
-  title: 'Step 3',
-  description: 'Animated processing step before decision.',
-  actionBar: {
-    hidden: true,
-  },
-};
-
-export function StepThree() {
-  const { attributes, goNext, isBuilder } = useFunnel();
-  const content = usePreviewStepLocalizedContent(
-    stepThreeId,
-    stepThreeContent,
-    getStepContentLocale(attributes),
-  );
-  const autoAdvanceMs = resolveStepThreeAutoAdvanceMs(isBuilder);
-
-  useEffect(() => {
-    if (!autoAdvanceMs) {
-      return;
-    }
-
-    const timer = window.setTimeout(() => {
-      goNext();
-    }, autoAdvanceMs);
-
-    return () => window.clearTimeout(timer);
-  }, [autoAdvanceMs, goNext]);
-
-  return (
-    <>
-      <section className="owners-step" data-node-id="template:03-processing">
-        <div className="owners-copy-wrap">
-          <p className="owners-kicker">{content.kicker}</p>
-          <h2 className="owners-title">
-            {content.title[0]}
-            <br />
-            <span className="is-accent">{content.title[1]}</span>
-          </h2>
-          <p className="owners-copy">{content.description}</p>
-        </div>
-
-        <div className="owners-artwork" aria-hidden>
-          <FunnelStepImage
-            src={content.artwork.sprite.src || stepsSpriteAlt.src}
-            alt={content.artwork.sprite.alt || ''}
-            width={1364}
-            height={909}
-            className="owners-sprite"
-            draggable={false}
-          />
-          <FunnelStepImage
-            src={content.artwork.glow.src || glow.src}
-            alt={content.artwork.glow.alt || ''}
-            width={122}
-            height={116}
-            className="owners-glow"
-            draggable={false}
-          />
-          <FunnelStepImage
-            src={content.artwork.bee.src || bee.src}
-            alt={content.artwork.bee.alt || ''}
-            width={88}
-            height={88}
-            className="owners-bee"
-            draggable={false}
-          />
-        </div>
-
-        <div className="owners-status" role="status" aria-live="polite">
-          <p className="owners-status-label">{content.progressLabel}</p>
-          <div className="owners-progress-track">
-            <span
-              className="owners-progress-fill"
-              style={{ animationDuration: `${STEP_THREE_AUTO_ADVANCE_MS}ms` }}
-            />
-          </div>
-        </div>
-      </section>
-
-      {stepThreeStyles ? <style>{stepThreeStyles}</style> : null}
-    </>
-  );
-}
-
-const stepThreeStyles = `
-.owners-step {
-  min-height: 100%;
-  background: var(--color-bg-success);
-  padding: calc(env(safe-area-inset-top, 0px) + 84px) var(--padding) 40px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  overflow: hidden;
-}
-
-.owners-copy-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.owners-kicker {
-  margin: 0;
-  color: var(--color-accent);
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.owners-title {
-  margin: 0;
-  color: var(--color-text);
-  font-size: 34px;
-  line-height: 1.12;
-  font-weight: 800;
-  letter-spacing: -0.02em;
-}
-
-.owners-title .is-accent {
-  color: var(--color-button);
-}
-
-.owners-copy {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: 17px;
-  line-height: 1.44;
-  font-weight: 500;
-}
-
-.owners-artwork {
-  position: relative;
-  width: 100%;
-  height: 300px;
-  margin-top: 4px;
-  border-radius: 20px;
-  background: linear-gradient(180deg, rgba(77, 181, 63, 0.06), rgba(63, 81, 181, 0.08));
-  overflow: hidden;
-}
-
-.owners-sprite {
-  position: absolute;
-  left: -520px;
-  top: -250px;
-  width: 1364px;
-  height: 909px;
-  max-width: none;
-}
-
-.owners-glow {
-  position: absolute;
-  left: 50%;
-  top: 52%;
-  width: 122px;
-  height: 116px;
-  transform: translate(-50%, -50%);
-}
-
-.owners-bee {
-  position: absolute;
-  left: 50%;
-  top: 52%;
-  width: 88px;
-  height: 88px;
-  transform: translate(-50%, -50%);
-}
-
-.owners-status {
-  margin-top: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  background: rgba(255, 255, 255, 0.84);
-  border: 1px solid var(--color-border);
-  border-radius: 14px;
-  padding: 12px;
-}
-
-.owners-status-label {
-  margin: 0;
-  color: var(--color-text);
-  font-size: 14px;
-  line-height: 1.35;
-  font-weight: 600;
-}
-
-.owners-progress-track {
-  height: 10px;
-  border-radius: 999px;
-  background: rgba(63, 81, 181, 0.16);
-  overflow: hidden;
-}
-
-.owners-progress-fill {
-  display: block;
-  height: 100%;
-  width: 0%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, #4db53f, #3f51b5);
-  animation-name: ownersProgress;
-  animation-timing-function: linear;
-  animation-fill-mode: forwards;
-  animation-duration: 2200ms;
-}
-
-@keyframes ownersProgress {
-  0% {
-    width: 0%;
-    opacity: 0.88;
-  }
-
-  100% {
-    width: 100%;
-    opacity: 1;
-  }
-}
-
-@media (max-width: 430px) {
-  .owners-step {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  .owners-title {
-    font-size: 30px;
-  }
-
-  .owners-copy {
-    font-size: 16px;
-  }
-
-  .owners-artwork {
-    height: 284px;
-  }
-}
-`;