From 5a657129f01f19ddfcc0b2d24b9e08b93d9242ef Mon Sep 17 00:00:00 2001 From: "Abdullah." <125115953+mabdullahabaid@users.noreply.github.com> Date: Thu, 25 Jun 2026 15:24:22 +0500 Subject: [PATCH] Split website stepper into home-stepper and product-stepper sections (#22149) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reorganizes the flat `sections/stepper/` (30 files — two distinct steppers plus shared code) into two product-feature-style sections, and moves the shared code to the shared layers. - **`sections/home-stepper/`** — the home-page stepper. Renamed `Stepper` → `HomeStepper` (and the home components → `HomeStepperLottie` / `HomeStepperSteps` / `HomeStepperVisualFrame`) for symmetry with `ProductStepper`. Shell at the root + `components/`/`data/`/`utils/` + barrel. - **`sections/product-stepper/`** — the product-page stepper, same structure. The 3 files both steppers shared can't live in a shared *section* — `check-conventions` forbids a section importing another section. So they moved to the shared layers: - `StepperProgressRail`, `StepperSwipeDeck` → `ui/` - `useBreakpointStepSync` → `platform/motion` Both consumer pages repointed (`@/sections/home-stepper`, `@/sections/product-stepper`); the row-gap allowlist in `check-conventions.mjs` updated to the new paths; explanatory comments stripped across the moved files (CSS-in-template comments and `'use client'` kept). Pure reorganization — no behavior change. typecheck + lint + build all green. --- .../scripts/check-conventions.mjs | 4 +-- .../src/app/[locale]/(site)/page.tsx | 4 +-- .../src/app/[locale]/(site)/product/page.tsx | 2 +- .../src/platform/motion/index.ts | 1 + .../motion}/use-breakpoint-step-sync.ts | 2 -- .../HomeStepper.tsx} | 25 +++++++++++-------- .../components/HomeStepperLottie.tsx} | 8 ++++-- .../components/HomeStepperSteps.tsx} | 15 ++++------- .../components/HomeStepperVisualFrame.tsx} | 7 ++---- .../data}/stepper-backdrop-config.ts | 4 --- .../data}/stepper.data.ts | 0 .../src/sections/home-stepper/index.ts | 1 + .../utils}/lottie-frame-map.test.ts | 0 .../utils}/lottie-frame-map.ts | 3 --- .../utils}/use-dot-lottie-scroll-sync.ts | 0 .../ProductStepper.tsx | 16 ++++++------ .../components}/DataModelIcons.tsx | 2 -- .../components}/DataModelVisual.tsx | 8 +++--- .../components}/DrawEdge.tsx | 2 -- .../components}/LayoutIcons.tsx | 1 - .../components}/LayoutVisual.tsx | 10 ++------ .../components}/ProductStepperContent.tsx | 21 +++++++--------- .../components}/ProductStepperShell.tsx | 3 --- .../components}/ProductStepperVisual.tsx | 4 +-- .../components}/ProductStepperVisualFrame.tsx | 3 --- .../components}/WorkflowIcons.tsx | 2 -- .../components}/WorkflowVisual.tsx | 9 ++----- .../data}/data-model-data.ts | 3 +-- .../data}/layout-chrome.ts | 2 -- .../data}/layout-data.ts | 3 +-- .../data}/product-stepper-data.ts | 0 .../data}/workflow-data.ts | 4 +-- .../{stepper => product-stepper}/index.ts | 1 - .../utils}/use-workflow-animation.ts | 5 +--- .../stepper => ui}/StepperProgressRail.tsx | 4 --- .../stepper => ui}/StepperSwipeDeck.tsx | 4 +-- packages/twenty-website/src/ui/index.ts | 8 ++++++ 37 files changed, 73 insertions(+), 118 deletions(-) rename packages/twenty-website/src/{sections/stepper => platform/motion}/use-breakpoint-step-sync.ts (86%) rename packages/twenty-website/src/sections/{stepper/Stepper.tsx => home-stepper/HomeStepper.tsx} (79%) rename packages/twenty-website/src/sections/{stepper/StepperLottie.tsx => home-stepper/components/HomeStepperLottie.tsx} (83%) rename packages/twenty-website/src/sections/{stepper/StepperSteps.tsx => home-stepper/components/HomeStepperSteps.tsx} (90%) rename packages/twenty-website/src/sections/{stepper/StepperVisualFrame.tsx => home-stepper/components/HomeStepperVisualFrame.tsx} (86%) rename packages/twenty-website/src/sections/{stepper => home-stepper/data}/stepper-backdrop-config.ts (78%) rename packages/twenty-website/src/sections/{stepper => home-stepper/data}/stepper.data.ts (100%) create mode 100644 packages/twenty-website/src/sections/home-stepper/index.ts rename packages/twenty-website/src/sections/{stepper => home-stepper/utils}/lottie-frame-map.test.ts (100%) rename packages/twenty-website/src/sections/{stepper => home-stepper/utils}/lottie-frame-map.ts (86%) rename packages/twenty-website/src/sections/{stepper => home-stepper/utils}/use-dot-lottie-scroll-sync.ts (100%) rename packages/twenty-website/src/sections/{stepper => product-stepper}/ProductStepper.tsx (75%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/DataModelIcons.tsx (97%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/DataModelVisual.tsx (96%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/DrawEdge.tsx (91%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/LayoutIcons.tsx (99%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/LayoutVisual.tsx (95%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/ProductStepperContent.tsx (88%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/ProductStepperShell.tsx (96%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/ProductStepperVisual.tsx (92%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/ProductStepperVisualFrame.tsx (88%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/WorkflowIcons.tsx (95%) rename packages/twenty-website/src/sections/{stepper => product-stepper/components}/WorkflowVisual.tsx (94%) rename packages/twenty-website/src/sections/{stepper => product-stepper/data}/data-model-data.ts (96%) rename packages/twenty-website/src/sections/{stepper => product-stepper/data}/layout-chrome.ts (98%) rename packages/twenty-website/src/sections/{stepper => product-stepper/data}/layout-data.ts (96%) rename packages/twenty-website/src/sections/{stepper => product-stepper/data}/product-stepper-data.ts (100%) rename packages/twenty-website/src/sections/{stepper => product-stepper/data}/workflow-data.ts (91%) rename packages/twenty-website/src/sections/{stepper => product-stepper}/index.ts (57%) rename packages/twenty-website/src/sections/{stepper => product-stepper/utils}/use-workflow-animation.ts (78%) rename packages/twenty-website/src/{sections/stepper => ui}/StepperProgressRail.tsx (93%) rename packages/twenty-website/src/{sections/stepper => ui}/StepperSwipeDeck.tsx (98%) diff --git a/packages/twenty-website/scripts/check-conventions.mjs b/packages/twenty-website/scripts/check-conventions.mjs index 4d35fb5400..65837f9279 100644 --- a/packages/twenty-website/scripts/check-conventions.mjs +++ b/packages/twenty-website/scripts/check-conventions.mjs @@ -102,8 +102,8 @@ const ROW_GAP_MULTI_AXIS_FILES = new Set([ 'sections/pricing-plans/PricingBoard.tsx', 'sections/problem/Problem.tsx', 'sections/releases-feed/ReleasesFeed.tsx', - 'sections/stepper/ProductStepper.tsx', - 'sections/stepper/Stepper.tsx', + 'sections/product-stepper/ProductStepper.tsx', + 'sections/home-stepper/HomeStepper.tsx', 'sections/testimonials/PartnerTestimonialsCarousel.tsx', 'sections/testimonials/TestimonialsCarousel.tsx', 'sections/trusted-by/TrustedBy.tsx', diff --git a/packages/twenty-website/src/app/[locale]/(site)/page.tsx b/packages/twenty-website/src/app/[locale]/(site)/page.tsx index 2d1b159095..2099a497ef 100644 --- a/packages/twenty-website/src/app/[locale]/(site)/page.tsx +++ b/packages/twenty-website/src/app/[locale]/(site)/page.tsx @@ -11,7 +11,7 @@ import { HomeHero } from '@/sections/home-hero'; import { Menu } from '@/sections/menu'; import { Testimonials } from '@/sections/testimonials'; import { Problem } from '@/sections/problem'; -import { Stepper } from '@/sections/stepper'; +import { HomeStepper } from '@/sections/home-stepper'; import { ThreeCards } from '@/sections/three-cards'; import { TrustedBy } from '@/sections/trusted-by'; @@ -35,7 +35,7 @@ export default async function HomePage({ - + diff --git a/packages/twenty-website/src/app/[locale]/(site)/product/page.tsx b/packages/twenty-website/src/app/[locale]/(site)/product/page.tsx index 909fbb2eb9..1631423e95 100644 --- a/packages/twenty-website/src/app/[locale]/(site)/product/page.tsx +++ b/packages/twenty-website/src/app/[locale]/(site)/product/page.tsx @@ -15,7 +15,7 @@ import { Menu } from '@/sections/menu'; import { ProductDemo } from '@/sections/product-demo'; import { ProductFeature } from '@/sections/product-feature'; import { ProductHero } from '@/sections/product-hero'; -import { ProductStepper } from '@/sections/stepper'; +import { ProductStepper } from '@/sections/product-stepper'; import { ProductThreeCards } from '@/sections/three-cards'; import { TrustedBy } from '@/sections/trusted-by'; diff --git a/packages/twenty-website/src/platform/motion/index.ts b/packages/twenty-website/src/platform/motion/index.ts index 4ebaaa8a7e..71304d368f 100644 --- a/packages/twenty-website/src/platform/motion/index.ts +++ b/packages/twenty-website/src/platform/motion/index.ts @@ -17,3 +17,4 @@ export { useScheduledOnScroll } from './use-scheduled-on-scroll'; export { usePrefersReducedMotion } from './use-prefers-reduced-motion'; export { useScrollProgress } from './use-scroll-progress'; export { scheduleIdleTask } from './schedule-idle-task'; +export { useBreakpointStepSync } from './use-breakpoint-step-sync'; diff --git a/packages/twenty-website/src/sections/stepper/use-breakpoint-step-sync.ts b/packages/twenty-website/src/platform/motion/use-breakpoint-step-sync.ts similarity index 86% rename from packages/twenty-website/src/sections/stepper/use-breakpoint-step-sync.ts rename to packages/twenty-website/src/platform/motion/use-breakpoint-step-sync.ts index 04029821a3..81225800c8 100644 --- a/packages/twenty-website/src/sections/stepper/use-breakpoint-step-sync.ts +++ b/packages/twenty-website/src/platform/motion/use-breakpoint-step-sync.ts @@ -2,8 +2,6 @@ import { useEffect, useRef, useState } from 'react'; -// Keeps the mobile swipe index continuous with the desktop scroll position -// when the viewport crosses the breakpoint mid-interaction. export function useBreakpointStepSync( isMdUp: boolean, scrollProgress: number, diff --git a/packages/twenty-website/src/sections/stepper/Stepper.tsx b/packages/twenty-website/src/sections/home-stepper/HomeStepper.tsx similarity index 79% rename from packages/twenty-website/src/sections/stepper/Stepper.tsx rename to packages/twenty-website/src/sections/home-stepper/HomeStepper.tsx index a6b80f34a1..f5cb78a3e7 100644 --- a/packages/twenty-website/src/sections/stepper/Stepper.tsx +++ b/packages/twenty-website/src/sections/home-stepper/HomeStepper.tsx @@ -3,15 +3,18 @@ import { styled } from '@linaria/react'; import { useRef, useState } from 'react'; -import { ScrollProgressEffect, useMediaQuery } from '@/platform/motion'; +import { + ScrollProgressEffect, + useBreakpointStepSync, + useMediaQuery, +} from '@/platform/motion'; import { BREAKPOINT_PX, mediaUp, spacing } from '@/tokens'; import { SectionShell } from '@/ui'; -import { StepperLottie } from './StepperLottie'; -import { StepperSteps } from './StepperSteps'; -import { StepperVisualFrame } from './StepperVisualFrame'; -import { STEPPER_STEPS } from './stepper.data'; -import { useBreakpointStepSync } from './use-breakpoint-step-sync'; +import { HomeStepperLottie } from './components/HomeStepperLottie'; +import { HomeStepperSteps } from './components/HomeStepperSteps'; +import { HomeStepperVisualFrame } from './components/HomeStepperVisualFrame'; +import { STEPPER_STEPS } from './data/stepper.data'; const ScrollStage = styled.div` display: grid; @@ -59,7 +62,7 @@ const VisualMeasure = styled.div` } `; -export function Stepper() { +export function HomeStepper() { const scrollContainerRef = useRef(null); const isMdUp = useMediaQuery(`(min-width: ${BREAKPOINT_PX.md}px)`); const [scrollProgress, setScrollProgress] = useState(0); @@ -82,7 +85,7 @@ export function Stepper() { scrollContainerRef={scrollContainerRef} /> - - - - + + + diff --git a/packages/twenty-website/src/sections/stepper/StepperLottie.tsx b/packages/twenty-website/src/sections/home-stepper/components/HomeStepperLottie.tsx similarity index 83% rename from packages/twenty-website/src/sections/stepper/StepperLottie.tsx rename to packages/twenty-website/src/sections/home-stepper/components/HomeStepperLottie.tsx index f9bed015d9..6cf93d2ff6 100644 --- a/packages/twenty-website/src/sections/stepper/StepperLottie.tsx +++ b/packages/twenty-website/src/sections/home-stepper/components/HomeStepperLottie.tsx @@ -5,7 +5,7 @@ import { styled } from '@linaria/react'; import { spacing } from '@/tokens'; -import { useDotLottieScrollSync } from './use-dot-lottie-scroll-sync'; +import { useDotLottieScrollSync } from '../utils/use-dot-lottie-scroll-sync'; const LOTTIE_SRC = '/lottie/stepper/stepper.lottie'; @@ -18,7 +18,11 @@ const LottieSlot = styled.div` width: 100%; `; -export function StepperLottie({ scrollProgress }: { scrollProgress: number }) { +export function HomeStepperLottie({ + scrollProgress, +}: { + scrollProgress: number; +}) { const playerRefCallback = useDotLottieScrollSync(scrollProgress); return ( diff --git a/packages/twenty-website/src/sections/stepper/StepperSteps.tsx b/packages/twenty-website/src/sections/home-stepper/components/HomeStepperSteps.tsx similarity index 90% rename from packages/twenty-website/src/sections/stepper/StepperSteps.tsx rename to packages/twenty-website/src/sections/home-stepper/components/HomeStepperSteps.tsx index a358fd6886..8ac932b314 100644 --- a/packages/twenty-website/src/sections/stepper/StepperSteps.tsx +++ b/packages/twenty-website/src/sections/home-stepper/components/HomeStepperSteps.tsx @@ -5,15 +5,10 @@ import { styled } from '@linaria/react'; import { type CSSProperties } from 'react'; import { mediaUp, spacing } from '@/tokens'; -import { Body, Heading } from '@/ui'; +import { Body, Heading, StepperProgressRail, StepperSwipeDeck } from '@/ui'; -import { StepperProgressRail } from './StepperProgressRail'; -import { StepperSwipeDeck } from './StepperSwipeDeck'; -import { type StepperStep } from './stepper.data'; +import { type StepperStep } from '../data/stepper.data'; -// Each step holds fully visible for most of its scroll chapter, then hands -// off to the next over the remaining fraction (values ported from the -// authored lottie chapter boundaries). const HOLD_FRACTIONS = [240 / 285, (880 - 285) / (925 - 285), 1]; const StepsRoot = styled.div` @@ -119,7 +114,7 @@ const computeStepStyle = ( return { opacity: 0, transform: 'translateY(40vh)' }; }; -export type StepperStepsProps = { +export type HomeStepperStepsProps = { activeStepIndex: number; layoutMode: 'scroll' | 'swipe'; localProgress: number; @@ -127,13 +122,13 @@ export type StepperStepsProps = { steps: readonly StepperStep[]; }; -export function StepperSteps({ +export function HomeStepperSteps({ activeStepIndex, layoutMode, localProgress, onMobileStepIndexChange, steps, -}: StepperStepsProps) { +}: HomeStepperStepsProps) { const { i18n } = useLingui(); const renderStepContent = (step: StepperStep) => ( diff --git a/packages/twenty-website/src/sections/stepper/StepperVisualFrame.tsx b/packages/twenty-website/src/sections/home-stepper/components/HomeStepperVisualFrame.tsx similarity index 86% rename from packages/twenty-website/src/sections/stepper/StepperVisualFrame.tsx rename to packages/twenty-website/src/sections/home-stepper/components/HomeStepperVisualFrame.tsx index f9d828fcbb..04016ce082 100644 --- a/packages/twenty-website/src/sections/stepper/StepperVisualFrame.tsx +++ b/packages/twenty-website/src/sections/home-stepper/components/HomeStepperVisualFrame.tsx @@ -1,14 +1,11 @@ import { styled } from '@linaria/react'; import { HalftoneImageBackdrop } from '@/platform/visuals/rigs/HalftoneImageBackdrop'; -import { STEPPER_BACKDROP } from './stepper-backdrop-config'; +import { STEPPER_BACKDROP } from '../data/stepper-backdrop-config'; import { type ReactNode } from 'react'; import { color } from '@/tokens'; -// The notched frame that hosts the stepper visual: halftone backdrop on -// the graphite stage behind, content above, hairline border tracing the -// same path. const FRAME_MASK_PATH = 'M4 0H668a4 4 0 0 1 4 4V701a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V499L28 462V215L0 178V4a4 4 0 0 1 4-4Z'; @@ -48,7 +45,7 @@ const FrameBorder = styled.svg` z-index: 2; `; -export function StepperVisualFrame({ children }: { children: ReactNode }) { +export function HomeStepperVisualFrame({ children }: { children: ReactNode }) { return ( diff --git a/packages/twenty-website/src/sections/stepper/stepper-backdrop-config.ts b/packages/twenty-website/src/sections/home-stepper/data/stepper-backdrop-config.ts similarity index 78% rename from packages/twenty-website/src/sections/stepper/stepper-backdrop-config.ts rename to packages/twenty-website/src/sections/home-stepper/data/stepper-backdrop-config.ts index 9ffa34b6d1..acb1960c65 100644 --- a/packages/twenty-website/src/sections/stepper/stepper-backdrop-config.ts +++ b/packages/twenty-website/src/sections/home-stepper/data/stepper-backdrop-config.ts @@ -2,10 +2,6 @@ import { paletteColorNumber } from '@/tokens'; import { type HalftoneImageBackdropProps } from '@/platform/visuals/rigs/HalftoneImageBackdrop'; -// The authored stepper backdrop: fog dashes over the worker image inside -// the graphite frame, brightening to white where the pointer hovers (the -// hover field tracks the whole visual area, not just the canvas). The old -// hook skips the visual entirely under reduced motion. export const STEPPER_BACKDROP: Pick< HalftoneImageBackdropProps, 'imageUrl' | 'settings' diff --git a/packages/twenty-website/src/sections/stepper/stepper.data.ts b/packages/twenty-website/src/sections/home-stepper/data/stepper.data.ts similarity index 100% rename from packages/twenty-website/src/sections/stepper/stepper.data.ts rename to packages/twenty-website/src/sections/home-stepper/data/stepper.data.ts diff --git a/packages/twenty-website/src/sections/home-stepper/index.ts b/packages/twenty-website/src/sections/home-stepper/index.ts new file mode 100644 index 0000000000..ac216ef0fd --- /dev/null +++ b/packages/twenty-website/src/sections/home-stepper/index.ts @@ -0,0 +1 @@ +export { HomeStepper } from './HomeStepper'; diff --git a/packages/twenty-website/src/sections/stepper/lottie-frame-map.test.ts b/packages/twenty-website/src/sections/home-stepper/utils/lottie-frame-map.test.ts similarity index 100% rename from packages/twenty-website/src/sections/stepper/lottie-frame-map.test.ts rename to packages/twenty-website/src/sections/home-stepper/utils/lottie-frame-map.test.ts diff --git a/packages/twenty-website/src/sections/stepper/lottie-frame-map.ts b/packages/twenty-website/src/sections/home-stepper/utils/lottie-frame-map.ts similarity index 86% rename from packages/twenty-website/src/sections/stepper/lottie-frame-map.ts rename to packages/twenty-website/src/sections/home-stepper/utils/lottie-frame-map.ts index eef4d5ab0d..ffb0cf43a7 100644 --- a/packages/twenty-website/src/sections/stepper/lottie-frame-map.ts +++ b/packages/twenty-website/src/sections/home-stepper/utils/lottie-frame-map.ts @@ -1,6 +1,3 @@ -// The lottie timeline is authored in three chapters; these frame numbers -// are tied to the asset (stepper.lottie, 1439 frames) and must change -// together with it. const STEP_COUNT = 3; const STEP_1_TRANSITION_END = 285; const STEP_2_TRANSITION_END = 925; diff --git a/packages/twenty-website/src/sections/stepper/use-dot-lottie-scroll-sync.ts b/packages/twenty-website/src/sections/home-stepper/utils/use-dot-lottie-scroll-sync.ts similarity index 100% rename from packages/twenty-website/src/sections/stepper/use-dot-lottie-scroll-sync.ts rename to packages/twenty-website/src/sections/home-stepper/utils/use-dot-lottie-scroll-sync.ts diff --git a/packages/twenty-website/src/sections/stepper/ProductStepper.tsx b/packages/twenty-website/src/sections/product-stepper/ProductStepper.tsx similarity index 75% rename from packages/twenty-website/src/sections/stepper/ProductStepper.tsx rename to packages/twenty-website/src/sections/product-stepper/ProductStepper.tsx index b912c8cd16..858c8c68e9 100644 --- a/packages/twenty-website/src/sections/stepper/ProductStepper.tsx +++ b/packages/twenty-website/src/sections/product-stepper/ProductStepper.tsx @@ -3,18 +3,18 @@ import { styled } from '@linaria/react'; import { useRef, useState } from 'react'; -import { ScrollProgressEffect, useMediaQuery } from '@/platform/motion'; +import { + ScrollProgressEffect, + useBreakpointStepSync, + useMediaQuery, +} from '@/platform/motion'; import { BREAKPOINT_PX, mediaUp, spacing } from '@/tokens'; import { SectionShell } from '@/ui'; -import { ProductStepperContent } from './ProductStepperContent'; -import { PRODUCT_STEPPER_STEPS } from './product-stepper-data'; -import { ProductStepperVisual } from './ProductStepperVisual'; -import { useBreakpointStepSync } from './use-breakpoint-step-sync'; +import { ProductStepperContent } from './components/ProductStepperContent'; +import { PRODUCT_STEPPER_STEPS } from './data/product-stepper-data'; +import { ProductStepperVisual } from './components/ProductStepperVisual'; -// The 300vh scroll track the sticky content and visual ride (the old -// site put the height on the section; the rhythm shell owns padding, so -// the track is the inner stage here). const ScrollTrack = styled.div` ${mediaUp('md')} { height: 300vh; diff --git a/packages/twenty-website/src/sections/stepper/DataModelIcons.tsx b/packages/twenty-website/src/sections/product-stepper/components/DataModelIcons.tsx similarity index 97% rename from packages/twenty-website/src/sections/stepper/DataModelIcons.tsx rename to packages/twenty-website/src/sections/product-stepper/components/DataModelIcons.tsx index 34138a3483..b207822b5f 100644 --- a/packages/twenty-website/src/sections/stepper/DataModelIcons.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/DataModelIcons.tsx @@ -1,5 +1,3 @@ -// The data-model canvas's mini glyphs (authored scene artwork, verbatim). -// Field/header icons are looked up by key so the scene data stays pure. export type DataModelFieldIcon = | 'apps' | 'building' diff --git a/packages/twenty-website/src/sections/stepper/DataModelVisual.tsx b/packages/twenty-website/src/sections/product-stepper/components/DataModelVisual.tsx similarity index 96% rename from packages/twenty-website/src/sections/stepper/DataModelVisual.tsx rename to packages/twenty-website/src/sections/product-stepper/components/DataModelVisual.tsx index 2a612b9a52..fa0b360eff 100644 --- a/packages/twenty-website/src/sections/stepper/DataModelVisual.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/DataModelVisual.tsx @@ -6,7 +6,10 @@ import { useState } from 'react'; import { usePointerDragPositions } from '@/platform/motion'; import { PRODUCT_STEPPER_SCENE } from '@/tokens/feature-scenes/product-stepper-scene'; -import { DATA_MODEL_GRAPH, type EntityConnection } from './data-model-data'; +import { + DATA_MODEL_GRAPH, + type EntityConnection, +} from '../data/data-model-data'; import { DATA_MODEL_ICONS } from './DataModelIcons'; import { DrawEdge } from './DrawEdge'; import { STEPPER_SHELL_CHROME } from './ProductStepperShell'; @@ -177,9 +180,6 @@ function getCardCenter( }; } -// The draggable entity graph: cards reposition under the pointer and the -// SVG connectors track their centers (positions stay React state because -// the edges are rendered paths). export function DataModelVisual({ active }: { active: boolean }) { const { canvasHandlers, diff --git a/packages/twenty-website/src/sections/stepper/DrawEdge.tsx b/packages/twenty-website/src/sections/product-stepper/components/DrawEdge.tsx similarity index 91% rename from packages/twenty-website/src/sections/stepper/DrawEdge.tsx rename to packages/twenty-website/src/sections/product-stepper/components/DrawEdge.tsx index 95dc6fcb6e..676eb25e29 100644 --- a/packages/twenty-website/src/sections/stepper/DrawEdge.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/DrawEdge.tsx @@ -12,8 +12,6 @@ export type DrawEdgeProps = { to: Point; }; -// One elbow connector between two card centers: near-aligned points draw -// straight, others elbow in the requested order; endpoints get dots. export function DrawEdge({ circleRadius = 2, elbow = 'vertical-first', diff --git a/packages/twenty-website/src/sections/stepper/LayoutIcons.tsx b/packages/twenty-website/src/sections/product-stepper/components/LayoutIcons.tsx similarity index 99% rename from packages/twenty-website/src/sections/stepper/LayoutIcons.tsx rename to packages/twenty-website/src/sections/product-stepper/components/LayoutIcons.tsx index 7a5e9f72ff..a64f53d236 100644 --- a/packages/twenty-website/src/sections/stepper/LayoutIcons.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/LayoutIcons.tsx @@ -1,6 +1,5 @@ import { PRODUCT_STEPPER_SCENE } from '@/tokens/feature-scenes/product-stepper-scene'; -// The layout editor's mini glyphs (authored scene artwork, verbatim). const inks = PRODUCT_STEPPER_SCENE.layout; export type LayoutFieldIconType = diff --git a/packages/twenty-website/src/sections/stepper/LayoutVisual.tsx b/packages/twenty-website/src/sections/product-stepper/components/LayoutVisual.tsx similarity index 95% rename from packages/twenty-website/src/sections/stepper/LayoutVisual.tsx rename to packages/twenty-website/src/sections/product-stepper/components/LayoutVisual.tsx index b567ee56d9..c480081c50 100644 --- a/packages/twenty-website/src/sections/stepper/LayoutVisual.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/LayoutVisual.tsx @@ -6,8 +6,8 @@ import { type PointerEvent as ReactPointerEvent, } from 'react'; -import { LAYOUT_CHROME } from './layout-chrome'; -import { LAYOUT_EDITOR_CONTENT } from './layout-data'; +import { LAYOUT_CHROME } from '../data/layout-chrome'; +import { LAYOUT_EDITOR_CONTENT } from '../data/layout-data'; import { LAYOUT_GLYPHS } from './LayoutIcons'; import { PRODUCT_STEPPER_SCENE } from '@/tokens/feature-scenes/product-stepper-scene'; @@ -85,12 +85,8 @@ const { WidgetValue, } = LAYOUT_CHROME; -// One field row is 22px tall; vertical drag distance converts to reorder -// steps at that grain (verbatim mechanism — discrete splices). const ROW_STEP_PX = 22; -// The layout editor: glass panels over the record page, with the fields -// list reorderable by drag and visibility toggled per row. export function LayoutVisual({ active }: { active: boolean }) { const [fields, setFields] = useState(LAYOUT_EDITOR_CONTENT.fields); const [draggingId, setDraggingId] = useState(null); @@ -144,8 +140,6 @@ export function LayoutVisual({ active }: { active: boolean }) { }; const handleDragEnd = () => setDraggingId(null); - // A stolen capture (alt-tab, gestures) must settle the drag too; the - // event bubbles up from the captured row. const handleLostCapture = () => { if (draggingId) { setDraggingId(null); diff --git a/packages/twenty-website/src/sections/stepper/ProductStepperContent.tsx b/packages/twenty-website/src/sections/product-stepper/components/ProductStepperContent.tsx similarity index 88% rename from packages/twenty-website/src/sections/stepper/ProductStepperContent.tsx rename to packages/twenty-website/src/sections/product-stepper/components/ProductStepperContent.tsx index a5bcc36d67..faaae0c983 100644 --- a/packages/twenty-website/src/sections/stepper/ProductStepperContent.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/ProductStepperContent.tsx @@ -7,14 +7,19 @@ import { type CSSProperties } from 'react'; import { INFORMATIVE_MARKS } from '@/icons'; import { color, fontFamily, mediaUp, radius, spacing } from '@/tokens'; -import { Body, Eyebrow, Heading, HeadingPair } from '@/ui'; +import { + Body, + Eyebrow, + Heading, + HeadingPair, + StepperProgressRail, + StepperSwipeDeck, +} from '@/ui'; import { PRODUCT_STEPPER_STEPS, type ProductStepperStep, -} from './product-stepper-data'; -import { StepperProgressRail } from './StepperProgressRail'; -import { StepperSwipeDeck } from './StepperSwipeDeck'; +} from '../data/product-stepper-data'; const ContentRoot = styled.div` display: grid; @@ -45,9 +50,6 @@ const StepsColumn = styled.div` } `; -// The intro takes the house grammar (24px eyebrow-to-heading via this -// gap, 12px heading-to-body via HeadingPair) — a ratified divergence -// from the old site's uniform 8px stack. const IntroBlock = styled.div` display: grid; grid-template-columns: 1fr; @@ -115,9 +117,6 @@ const StepHeading = styled.span` font-family: ${fontFamily('sans')}; `; -// The old choreography, verbatim: passed steps sit settled, the upcoming -// step rises 300px through its hand-off window at 0.4 opacity, later -// steps wait below. const computeStepStyle = ( stepNumber: number, activeStepIndex: number, @@ -156,8 +155,6 @@ export function ProductStepperContent({ return ( <> - {/* The old site inked inactive icons white too (invisible on the - light scheme by construction) — ported as-is. */} diff --git a/packages/twenty-website/src/sections/stepper/ProductStepperShell.tsx b/packages/twenty-website/src/sections/product-stepper/components/ProductStepperShell.tsx similarity index 96% rename from packages/twenty-website/src/sections/stepper/ProductStepperShell.tsx rename to packages/twenty-website/src/sections/product-stepper/components/ProductStepperShell.tsx index bb28894d02..fbe1ef1916 100644 --- a/packages/twenty-website/src/sections/stepper/ProductStepperShell.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/ProductStepperShell.tsx @@ -105,9 +105,6 @@ const SvgLayer = styled.svg` width: 100%; `; -// The white mini-app window every product stepper visual floats in: logo -// chip + title bar, then the bordered editing canvas with an SVG overlay -// for connectors. function Shell({ active, children, diff --git a/packages/twenty-website/src/sections/stepper/ProductStepperVisual.tsx b/packages/twenty-website/src/sections/product-stepper/components/ProductStepperVisual.tsx similarity index 92% rename from packages/twenty-website/src/sections/stepper/ProductStepperVisual.tsx rename to packages/twenty-website/src/sections/product-stepper/components/ProductStepperVisual.tsx index aee49afece..9289180e5b 100644 --- a/packages/twenty-website/src/sections/stepper/ProductStepperVisual.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/ProductStepperVisual.tsx @@ -10,7 +10,7 @@ import { LayoutVisual } from './LayoutVisual'; import { PRODUCT_STEPPER_STEPS, type ProductStepperVisualKey, -} from './product-stepper-data'; +} from '../data/product-stepper-data'; import { ProductStepperVisualFrame } from './ProductStepperVisualFrame'; import { WorkflowVisual } from './WorkflowVisual'; @@ -68,8 +68,6 @@ const SlideInner = styled.div` width: 100%; `; -// The sticky stage: one slide per step, crossfading as the active step -// changes; only the active slide takes the pointer. export function ProductStepperVisual({ activeStepIndex, }: { diff --git a/packages/twenty-website/src/sections/stepper/ProductStepperVisualFrame.tsx b/packages/twenty-website/src/sections/product-stepper/components/ProductStepperVisualFrame.tsx similarity index 88% rename from packages/twenty-website/src/sections/stepper/ProductStepperVisualFrame.tsx rename to packages/twenty-website/src/sections/product-stepper/components/ProductStepperVisualFrame.tsx index 6bcb591e0e..fed2e5ddee 100644 --- a/packages/twenty-website/src/sections/stepper/ProductStepperVisualFrame.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/ProductStepperVisualFrame.tsx @@ -3,9 +3,6 @@ import { styled } from '@linaria/react'; import NextImage from 'next/image'; import { type ReactNode } from 'react'; -// The product stepper's stage: its own authored artwork (the dark -// notched shape with the dash pattern over it), ported verbatim — unlike -// the home frame, the stage here is baked into the two webps. const BACKGROUND_SRC = '/images/product/stepper/background.webp'; const SHAPE_SRC = '/images/product/stepper/background-shape.webp'; diff --git a/packages/twenty-website/src/sections/stepper/WorkflowIcons.tsx b/packages/twenty-website/src/sections/product-stepper/components/WorkflowIcons.tsx similarity index 95% rename from packages/twenty-website/src/sections/stepper/WorkflowIcons.tsx rename to packages/twenty-website/src/sections/product-stepper/components/WorkflowIcons.tsx index 04fae0635f..5a2fc34e15 100644 --- a/packages/twenty-website/src/sections/stepper/WorkflowIcons.tsx +++ b/packages/twenty-website/src/sections/product-stepper/components/WorkflowIcons.tsx @@ -1,6 +1,5 @@ import { PRODUCT_STEPPER_SCENE } from '@/tokens/feature-scenes/product-stepper-scene'; -// The workflow nodes' mini glyphs (authored scene artwork, verbatim). export type WorkflowIconName = | 'playlistAdd' | 'plus' @@ -66,7 +65,6 @@ function IconRepeat() { ); } -// The send node draws in its own amber ink, verbatim. function IconSend() { return ( { const [activeNodes, setActiveNodes] = useState>(new Set()); const timeouts = useTimeoutRegistry(); diff --git a/packages/twenty-website/src/sections/stepper/StepperProgressRail.tsx b/packages/twenty-website/src/ui/StepperProgressRail.tsx similarity index 93% rename from packages/twenty-website/src/sections/stepper/StepperProgressRail.tsx rename to packages/twenty-website/src/ui/StepperProgressRail.tsx index 81872be53e..ee0888d8c0 100644 --- a/packages/twenty-website/src/sections/stepper/StepperProgressRail.tsx +++ b/packages/twenty-website/src/ui/StepperProgressRail.tsx @@ -84,8 +84,6 @@ const PillTrack = styled.div` } `; -// Fill height rides a CSS variable, so the only inline style is a custom -// property; the first render is deterministic (0%) on server and client. const PillFill = styled.div` background-color: ${color('blue')}; border-radius: ${radius(8)}; @@ -115,8 +113,6 @@ const StepLabel = styled.div` export type StepperProgressRailProps = { activeStepIndex: number; - // Inactive dot ink; the product stepper runs a stronger one than the - // home default. inactiveColor?: string; localProgress: number; stepCount: number; diff --git a/packages/twenty-website/src/sections/stepper/StepperSwipeDeck.tsx b/packages/twenty-website/src/ui/StepperSwipeDeck.tsx similarity index 98% rename from packages/twenty-website/src/sections/stepper/StepperSwipeDeck.tsx rename to packages/twenty-website/src/ui/StepperSwipeDeck.tsx index 86b770f09d..013261f3c4 100644 --- a/packages/twenty-website/src/sections/stepper/StepperSwipeDeck.tsx +++ b/packages/twenty-website/src/ui/StepperSwipeDeck.tsx @@ -30,10 +30,8 @@ const Track = styled.div` `; const releasePointer = (event: React.PointerEvent): void => { - try { + if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); - } catch { - // pointer was not captured } }; diff --git a/packages/twenty-website/src/ui/index.ts b/packages/twenty-website/src/ui/index.ts index beb90ed052..ea2a0523dd 100644 --- a/packages/twenty-website/src/ui/index.ts +++ b/packages/twenty-website/src/ui/index.ts @@ -40,3 +40,11 @@ export { SectionStack } from './SectionStack'; export { VerticalDivider } from './VerticalDivider'; export { SectionShell, type SectionShellProps } from './SectionShell'; export { Signoff, type SignoffProps } from './Signoff'; +export { + StepperProgressRail, + type StepperProgressRailProps, +} from './StepperProgressRail'; +export { + StepperSwipeDeck, + type StepperSwipeDeckProps, +} from './StepperSwipeDeck';