Merge pull request #21 from peelar/refactor/looks-to-layouts

refactor: looks to layouts

Author: peelar

.github/workflows/test.yml

@@ -0,0 +1,62 @@
+name: Test
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Get pnpm version from package.json
+        id: pnpm-version
+        run: |
+          PNPM_VERSION=$(node -p "require('./package.json').packageManager?.replace('pnpm@', '') || ''")
+          echo "version=$PNPM_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: ${{ steps.pnpm-version.outputs.version }}
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Typecheck
+        run: pnpm typecheck
+
+      - name: Run domain tests
+        run: pnpm test:domain
+
+      - name: Run UI tests
+        run: pnpm test:ui
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run E2E tests
+        run: pnpm test:e2e
+

app/page.tsx

@@ -5,7 +5,7 @@ import { CoverPreview } from "@/components/cover-preview";
 import { DragOverlay } from "@/components/drag-overlay";
 import { MobileActions } from "@/components/mobile-actions";
 import { PlaygroundWorkspace } from "@/components/playground-workspace";
-import { LookSelector } from "@/components/look-selector";
+import { LayoutSelector } from "@/components/layout-selector";
 import { LayoutConfigPanel } from "@/components/layout-config";
 import { usePlaygroundController } from "@/hooks/use-playground-controller";
 import { cn } from "@/utils";
@@ -49,7 +49,6 @@ export default function PlaygroundPage() {
     shouldShowAspectLock,
     isAspectLocked,
     canvas,
-    handleVariantChange,
     toggleCanvasMode,
     handleExport,
     handleFileProcess,
@@ -93,15 +92,14 @@ export default function PlaygroundPage() {
         {/* Left: Content Column (Looks Rail + Preview) */}
         <div className="flex min-h-0 flex-1 flex-col">
           <div className="bg-muted/20 pl-4 sm:pl-8">
-            <LookSelector />
+            <LayoutSelector />
           </div>
 
           <div className="border-b border-border pl-4 sm:pl-12" />
 
           <div className="flex-1 overflow-auto px-4 pb-12 sm:px-8 sm:pb-10">
             <PlaygroundWorkspace
               isMobile={isMobile}
-              onVariantChange={handleVariantChange}
               shouldShowAspectLock={shouldShowAspectLock}
               isAspectLocked={isAspectLocked}
               onToggleAspect={toggleCanvasMode}

components/cover-preview.tsx

@@ -2,8 +2,8 @@
 
 import { useAtomValue } from "jotai";
 import { cn } from "@/utils";
-import { canvasAtom, currentLookAtom } from "@/hooks/atoms/derived";
-import { getLookComponent } from "@/components/looks/registry";
+import { canvasAtom, currentLayoutAtom } from "@/hooks/atoms/derived";
+import { getLayoutComponent } from "@/components/layouts/registry";
 
 interface CoverPreviewProps {
   className?: string;
@@ -12,10 +12,10 @@ interface CoverPreviewProps {
 }
 
 export function CoverPreview({ className, onUploadAsset, isStatic = false }: CoverPreviewProps) {
-  const look = useAtomValue(currentLookAtom);
+  const layout = useAtomValue(currentLayoutAtom);
   const canvasDimensions = useAtomValue(canvasAtom);
 
-  if (!look) {
+  if (!layout) {
     return (
       <div
         className={cn(
@@ -30,25 +30,12 @@ export function CoverPreview({ className, onUploadAsset, isStatic = false }: Cov
     );
   }
 
-  const LookComponent = getLookComponent(look.id);
-
-  if (!LookComponent) {
-    return (
-      <div
-        className={cn(
-          "flex items-center justify-center bg-white",
-          isStatic ? "" : "rounded-lg",
-          className,
-        )}
-        style={{ aspectRatio: "1280 / 720" }}
-      >
-        <span className="text-sm text-slate-500">Component not found</span>
-      </div>
-    );
-  }
+  // getLayoutComponent throws an error if component is not found
+  // This ensures we catch missing component registrations immediately
+  const LayoutComponent = getLayoutComponent(layout.id);
 
   // Code snippet look should not have fixed aspect ratio
-  const useFluidLayout = look.id === "code-snippet";
+  const useFluidLayout = layout.id === "code-snippet";
 
   return (
     <div
@@ -61,7 +48,7 @@ export function CoverPreview({ className, onUploadAsset, isStatic = false }: Cov
             }
       }
     >
-      <LookComponent onUploadAsset={onUploadAsset} isStatic={isStatic} />
+      <LayoutComponent onUploadAsset={onUploadAsset} isStatic={isStatic} />
     </div>
   );
 }

components/gradient-picker.tsx

@@ -94,7 +94,7 @@ export function GradientPicker({ onChangeAction }: GradientPickerProps) {
     config.background ?? ({ type: "gradient", value: "custom" } as BackgroundConfig);
   const colorPalette = screenshotAsset?.colorPalette;
   const hasScreenshot = Boolean(config.assets?.screenshot);
-  const isCodeSnippet = config.lookId === "code-snippet";
+  const isCodeSnippet = config.layoutId === "code-snippet";
 
   // Generate multi-stop gradients from screenshot colors
   // Code snippets should never use screenshot-derived gradients

components/layout-config.tsx

@@ -6,7 +6,7 @@ import { Asset } from "@/domain/asset/types";
 import { UploadCloud, X } from "lucide-react";
 import { cn } from "@/utils";
 import { configAtom } from "@/hooks/atoms";
-import { lookCapabilitiesAtom, screenshotAssetAtom, logoAssetAtom } from "@/hooks/atoms/derived";
+import { layoutCapabilitiesAtom, screenshotAssetAtom, logoAssetAtom } from "@/hooks/atoms/derived";
 import {
   Accordion,
   AccordionContent,
@@ -17,7 +17,7 @@ import { useSidebarState } from "@/hooks/use-sidebar-state";
 import { ScreenshotSection } from "@/components/sidebar-sections/screenshot-section";
 import { LogoSection } from "@/components/sidebar-sections/logo-section";
 import { BackgroundSection } from "@/components/sidebar-sections/background-section";
-import { LookSection } from "@/components/sidebar-sections/look-section";
+import { LayoutSection } from "@/components/sidebar-sections/layout-section";
 import { EffectsSection } from "@/components/sidebar-sections/effects-section";
 import { CodeSection } from "@/components/sidebar-sections/code-section";
 
@@ -29,12 +29,12 @@ export const LayoutConfigPanel = ({ onUploadAsset }: LayoutConfigProps) => {
   const config = useAtomValue(configAtom);
   const screenshotAsset = useAtomValue(screenshotAssetAtom);
   const logoAsset = useAtomValue(logoAssetAtom);
-  const lookCapabilities = useAtomValue(lookCapabilitiesAtom);
+  const lookCapabilities = useAtomValue(layoutCapabilitiesAtom);
 
   const { expandedSection, expandSection } = useSidebarState();
 
   const showLogoSection = lookCapabilities?.logo !== "hidden";
-  const showCodeSection = config.lookId === "code-snippet";
+  const showCodeSection = config.layoutId === "code-snippet";
   const showTextSection = !showCodeSection;
 
   // Initialize default expansion based on state
@@ -73,7 +73,7 @@ export const LayoutConfigPanel = ({ onUploadAsset }: LayoutConfigProps) => {
               </div>
             </AccordionTrigger>
             <AccordionContent className="px-4 pb-4">
-              <LookSection />
+              <LayoutSection />
             </AccordionContent>
           </AccordionItem>
         )}