From 3e89d2998588f8e35c524e523ba2ee853f0f6475 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Mon, 20 Apr 2026 11:31:17 +0200 Subject: refactor: restructure files to their domains, new preview overlay system, and dep graph --- apps/web/src/lib/guides/definitions/custom.tsx | 24 -- apps/web/src/lib/guides/definitions/grid.tsx | 125 -------- apps/web/src/lib/guides/definitions/platforms.tsx | 65 ---- .../src/lib/guides/definitions/tiktok-layout.tsx | 335 --------------------- apps/web/src/lib/guides/grid.ts | 4 - apps/web/src/lib/guides/index.ts | 13 - apps/web/src/lib/guides/registry.tsx | 28 -- apps/web/src/lib/guides/types.ts | 20 -- 8 files changed, 614 deletions(-) delete mode 100644 apps/web/src/lib/guides/definitions/custom.tsx delete mode 100644 apps/web/src/lib/guides/definitions/grid.tsx delete mode 100644 apps/web/src/lib/guides/definitions/platforms.tsx delete mode 100644 apps/web/src/lib/guides/definitions/tiktok-layout.tsx delete mode 100644 apps/web/src/lib/guides/grid.ts delete mode 100644 apps/web/src/lib/guides/index.ts delete mode 100644 apps/web/src/lib/guides/registry.tsx delete mode 100644 apps/web/src/lib/guides/types.ts (limited to 'apps/web/src/lib/guides') diff --git a/apps/web/src/lib/guides/definitions/custom.tsx b/apps/web/src/lib/guides/definitions/custom.tsx deleted file mode 100644 index fe7944cb..00000000 --- a/apps/web/src/lib/guides/definitions/custom.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { PlusSignIcon, RulerIcon } from "@hugeicons/core-free-icons"; -import { HugeiconsIcon } from "@hugeicons/react"; -import { Button } from "@/components/ui/button"; -import type { GuideDefinition } from "@/lib/guides/types"; - -function CustomGuideOptions() { - return ( -
- -
- ); -} - -export const customGuide = { - id: "custom", - label: "Custom", - renderPreview: () => , - renderTriggerIcon: () => , - renderOverlay: () => null, - renderOptions: () => , -} as const satisfies GuideDefinition; diff --git a/apps/web/src/lib/guides/definitions/grid.tsx b/apps/web/src/lib/guides/definitions/grid.tsx deleted file mode 100644 index 7677a1d9..00000000 --- a/apps/web/src/lib/guides/definitions/grid.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import { - GridTableIcon, - LayoutThreeColumnIcon, - LayoutThreeRowIcon, -} from "@hugeicons/core-free-icons"; -import { HugeiconsIcon } from "@hugeicons/react"; -import { NumberField } from "@/components/ui/number-field"; -import { - GRID_MIN, - GRID_MAX, - DEFAULT_GRID_CONFIG, -} from "@/lib/guides/grid"; -import { usePreviewStore } from "@/stores/preview-store"; -import { clampRound } from "@/utils/math"; -import { cn } from "@/utils/ui"; -import type { GuideDefinition } from "@/lib/guides/types"; - -function GridLines({ - rows, - cols, - color, -}: { - rows: number; - cols: number; - color: string; -}) { - const verticals = Array.from( - { length: cols - 1 }, - (_, i) => ((i + 1) / cols) * 100, - ); - const horizontals = Array.from( - { length: rows - 1 }, - (_, i) => ((i + 1) / rows) * 100, - ); - - return ( - <> - {verticals.map((pct) => ( -
- ))} - {horizontals.map((pct) => ( -
- ))} - - ); -} - -function GridGuidePreview() { - return ( -
- -
- ); -} - -function GridGuideOverlay() { - const { rows, cols } = usePreviewStore((s) => s.gridConfig); - - return ( -
- -
- ); -} - -function GridGuideOptions() { - const rows = usePreviewStore((s) => s.gridConfig.rows); - const cols = usePreviewStore((s) => s.gridConfig.cols); - const setGridConfig = usePreviewStore((s) => s.setGridConfig); - - const clampGridValue = (value: number) => - clampRound({ value, min: GRID_MIN, max: GRID_MAX }); - - return ( -
- } - value={rows} - min={GRID_MIN} - max={GRID_MAX} - isDefault={rows === DEFAULT_GRID_CONFIG.rows} - onReset={() => setGridConfig({ rows: DEFAULT_GRID_CONFIG.rows })} - onScrub={(value) => setGridConfig({ rows: clampGridValue(value) })} - onChange={(event) => { - const parsed = Number.parseInt(event.target.value, 10); - if (!Number.isNaN(parsed)) - setGridConfig({ rows: clampGridValue(parsed) }); - }} - className="flex-1" - /> - } - value={cols} - min={GRID_MIN} - max={GRID_MAX} - isDefault={cols === DEFAULT_GRID_CONFIG.cols} - onReset={() => setGridConfig({ cols: DEFAULT_GRID_CONFIG.cols })} - onScrub={(value) => setGridConfig({ cols: clampGridValue(value) })} - onChange={(event) => { - const parsed = Number.parseInt(event.target.value, 10); - if (!Number.isNaN(parsed)) - setGridConfig({ cols: clampGridValue(parsed) }); - }} - className="flex-1" - /> -
- ); -} - -export const gridGuide = { - id: "grid", - label: "Grid", - renderPreview: () => , - renderTriggerIcon: () => , - renderOverlay: () => , - renderOptions: () => , -} as const satisfies GuideDefinition; diff --git a/apps/web/src/lib/guides/definitions/platforms.tsx b/apps/web/src/lib/guides/definitions/platforms.tsx deleted file mode 100644 index 8c403eb1..00000000 --- a/apps/web/src/lib/guides/definitions/platforms.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import Image from "next/image"; -import type { GuideDefinition } from "@/lib/guides/types"; -import { TikTokLayout } from "./tiktok-layout"; - -function PlatformLogo({ - domain, - className = "size-4", -}: { - domain: string; - className?: string; -}) { - return ( - - ); -} - -function PlatformGuidePreview({ domain }: { domain: string }) { - return ; -} - -function platformGuide({ - id, - label, - domain, -}: { - id: string; - label: string; - domain: string; -}): GuideDefinition { - return { - id, - label, - renderPreview: () => , - renderTriggerIcon: () => , - renderOverlay: () => null, - }; -} - -export const tiktokGuide: GuideDefinition = { - ...platformGuide({ id: "tiktok", label: "TikTok", domain: "tiktok.com" }), - renderOverlay: () => , -}; -export const igReelsGuide = platformGuide({ - id: "ig-reels", - label: "Reels", - domain: "instagram.com", -}); -export const ytShortsGuide = platformGuide({ - id: "yt-shorts", - label: "Shorts", - domain: "youtube.com", -}); -export const spotlightGuide = platformGuide({ - id: "spotlight", - label: "Spotlight", - domain: "snapchat.com", -}); diff --git a/apps/web/src/lib/guides/definitions/tiktok-layout.tsx b/apps/web/src/lib/guides/definitions/tiktok-layout.tsx deleted file mode 100644 index b7513bac..00000000 --- a/apps/web/src/lib/guides/definitions/tiktok-layout.tsx +++ /dev/null @@ -1,335 +0,0 @@ -export function TikTokLayout() { - return ( - - TikTok Layout - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/apps/web/src/lib/guides/grid.ts b/apps/web/src/lib/guides/grid.ts deleted file mode 100644 index 0b707de7..00000000 --- a/apps/web/src/lib/guides/grid.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const GRID_MIN = 1; -export const GRID_MAX = 24; - -export const DEFAULT_GRID_CONFIG = { rows: 3, cols: 3 } as const; diff --git a/apps/web/src/lib/guides/index.ts b/apps/web/src/lib/guides/index.ts deleted file mode 100644 index 9ea75631..00000000 --- a/apps/web/src/lib/guides/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { GUIDE_REGISTRY } from "./registry"; -import type { GuideDefinition } from "@/lib/guides/types"; - -export { GUIDE_REGISTRY, isGuideId } from "./registry"; -export type { GuideDefinition, GuideId, GuideRenderProps } from "./registry"; - -export function getGuideById(guideId: string | null): GuideDefinition | null { - if (!guideId) { - return null; - } - - return GUIDE_REGISTRY.find((guide) => guide.id === guideId) ?? null; -} diff --git a/apps/web/src/lib/guides/registry.tsx b/apps/web/src/lib/guides/registry.tsx deleted file mode 100644 index 8000d989..00000000 --- a/apps/web/src/lib/guides/registry.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import type { GuideDefinition } from "@/lib/guides/types"; -import { gridGuide } from "./definitions/grid"; -// import { customGuide } from "./definitions/custom"; -import { - tiktokGuide, - igReelsGuide, - ytShortsGuide, - spotlightGuide, -} from "./definitions/platforms"; - -export type { GuideDefinition, GuideRenderProps } from "@/lib/guides/types"; - -export const GUIDE_REGISTRY = [ - gridGuide, - tiktokGuide, - igReelsGuide, - ytShortsGuide, - spotlightGuide, - - // todo: wire up custom guide fully, then uncomment this: - // customGuide, -] as const satisfies readonly GuideDefinition[]; - -export type GuideId = (typeof GUIDE_REGISTRY)[number]["id"]; - -export function isGuideId(value: string): value is GuideId { - return GUIDE_REGISTRY.some((guide) => guide.id === value); -} diff --git a/apps/web/src/lib/guides/types.ts b/apps/web/src/lib/guides/types.ts deleted file mode 100644 index 5b776090..00000000 --- a/apps/web/src/lib/guides/types.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type { ReactNode } from "react"; - -export interface GridConfig { - rows: number; - cols: number; -} - -export interface GuideRenderProps { - width: number; - height: number; -} - -export interface GuideDefinition { - id: string; - label: string; - renderPreview: () => ReactNode; - renderTriggerIcon: () => ReactNode; - renderOverlay: (props: GuideRenderProps) => ReactNode; - renderOptions?: () => ReactNode; -} -- cgit v1.3.1