Select project UI (#369)

app/package.json

@@ -58,6 +58,8 @@
         "css-to-tailwind-translator": "^1.2.8",
         "culori": "^4.0.1",
         "electron-updater": "^6.2.1",
+        "embla-carousel-react": "^8.3.0",
+        "embla-carousel-wheel-gestures": "^8.0.1",
         "fflate": "^0.8.2",
         "framer-motion": "^11.2.12",
         "js-string-escape": "^1.0.1",

app/src/lib/routes/index.ts

@@ -4,6 +4,7 @@ import { sendAnalytics } from '../utils';
 export enum Route {
     EDITOR = 'editor',
     LOGIN = 'login',
+    PROJECTS = 'projects',
 }
 
 export class RouteManager {

app/src/routes/project/EditPanel/inputs/primitives/ColorInput/PopoverColorPicker.tsx → app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/PopoverColorPicker.tsx

@@ -1,4 +1,4 @@
-import { useEditorEngine } from '@/routes/project';
+import { useEditorEngine } from '@/routes/editor';
 import { useEffect } from 'react';
 import { HexAlphaColorPicker } from 'react-colorful';
 import { Popover } from 'react-tiny-popover';

app/src/routes/project/EditPanel/inputs/primitives/ColorInput/index.tsx → app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/index.tsx

@@ -1,7 +1,7 @@
 import { formatColorInput, stringToHex } from '@/lib/editor/styles/colors';
 import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
-import { useEditorEngine } from '@/routes/project';
+import { useEditorEngine } from '@/routes/editor';
 import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';

app/src/routes/project/EditPanel/inputs/primitives/TextInput.tsx → app/src/routes/editor/EditPanel/inputs/primitives/TextInput.tsx

@@ -2,7 +2,7 @@ import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
 import { parsedValueToString, stringToParsedValue } from '@/lib/editor/styles/numberUnit';
 import { appendCssUnit } from '@/lib/editor/styles/units';
-import { useEditorEngine } from '@/routes/project';
+import { useEditorEngine } from '@/routes/editor';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 

app/src/routes/index.tsx

@@ -1,8 +1,9 @@
+import { useRouteManager } from '@/components/RouteProvider';
 import { Route } from '@/lib/routes';
 import { observer } from 'mobx-react-lite';
-import { useRouteManager } from '../components/RouteProvider';
+import ProjectEditor from './editor';
 import Login from './login';
-import ProjectEditor from './project';
+import Projects from './projects';
 
 const Routes = observer(() => {
     const routeManager = useRouteManager();
@@ -12,6 +13,8 @@ const Routes = observer(() => {
             return <ProjectEditor />;
         case Route.LOGIN:
             return <Login />;
+        case Route.PROJECTS:
+            return <Projects />;
         default:
             return <div>404: Unknown route</div>;
     }

app/src/routes/projects/Carousel.tsx

@@ -0,0 +1,137 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
+import useEmblaCarousel from 'embla-carousel-react';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+type CarouselProps = {
+    slides: { id: number; imgSrc: string; title: string }[];
+};
+
+const EmblaCarousel: React.FC<CarouselProps> = ({ slides }) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel(
+        {
+            axis: 'y',
+            loop: false,
+            align: 'center',
+            dragFree: false,
+            skipSnaps: false,
+            containScroll: 'trimSnaps',
+        },
+        [WheelGesturesPlugin()],
+    );
+    const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
+    const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
+    const [scrollProgress, setScrollProgress] = useState(0);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
+
+    const onSelect = useCallback(() => {
+        if (!emblaApi) {
+            return;
+        }
+        setPrevBtnEnabled(emblaApi.canScrollPrev());
+        setNextBtnEnabled(emblaApi.canScrollNext());
+    }, [emblaApi]);
+
+    const onScroll = useCallback(() => {
+        if (!emblaApi) {
+            return;
+        }
+        const progress = emblaApi.scrollProgress();
+        setScrollProgress(progress);
+    }, [emblaApi]);
+
+    useEffect(() => {
+        if (!emblaApi) {
+            return;
+        }
+        onSelect();
+        onScroll();
+        emblaApi.on('select', onSelect);
+        emblaApi.on('scroll', onScroll);
+        emblaApi.on('reInit', onSelect);
+    }, [emblaApi, onSelect, onScroll]);
+
+    const calculateImageSize = (imageNaturalWidth: number, imageNaturalHeight: number) => {
+        if (!containerRef.current) {
+            return { width: 'auto', height: 'auto' };
+        }
+
+        const containerWidth = containerRef.current.clientWidth;
+        const containerHeight = containerRef.current.clientHeight;
+        const targetSize = Math.min(containerWidth, containerHeight) * 0.6;
+
+        const imageAspectRatio = imageNaturalWidth / imageNaturalHeight;
+        const containerAspectRatio = containerWidth / containerHeight;
+
+        if (imageAspectRatio > containerAspectRatio) {
+            return { width: targetSize, height: 'auto' };
+        } else {
+            return { width: 'auto', height: targetSize };
+        }
+    };
+
+    return (
+        <div className="embla relative h-full overflow-hidden" ref={containerRef}>
+            <div className="embla__viewport h-full" ref={emblaRef}>
+                <div className="embla__container h-full">
+                    {slides.map((slide) => (
+                        <div
+                            key={slide.id}
+                            className="embla__slide h-full relative flex items-center justify-center"
+                            style={{
+                                flex: '0 0 100%',
+                                minWidth: 0,
+                            }}
+                        >
+                            <img
+                                src={slide.imgSrc}
+                                alt={slide.title}
+                                className="rounded-lg object-contain"
+                                style={{
+                                    maxWidth: '60%',
+                                    maxHeight: '60%',
+                                }}
+                                onLoad={(e) => {
+                                    const img = e.target as HTMLImageElement;
+                                    const { width, height } = calculateImageSize(
+                                        img.naturalWidth,
+                                        img.naturalHeight,
+                                    );
+                                    img.style.width =
+                                        typeof width === 'number' ? `${width}px` : width;
+                                    img.style.height =
+                                        typeof height === 'number' ? `${height}px` : height;
+                                }}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <div className="embla__buttons absolute left-24 top-1/2 transform -translate-y-1/2 flex flex-col gap-4 z-10">
+                <button
+                    className="embla__button embla__button--prev"
+                    onClick={scrollPrev}
+                    disabled={!prevBtnEnabled}
+                >
+                    <ChevronUpIcon
+                        className={`w-8 h-8 ${prevBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                    />
+                </button>
+                <button
+                    className="embla__button embla__button--next"
+                    onClick={scrollNext}
+                    disabled={!nextBtnEnabled}
+                >
+                    <ChevronDownIcon
+                        className={`w-8 h-8 ${nextBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                    />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default EmblaCarousel;

app/src/routes/projects/index.tsx

@@ -0,0 +1,45 @@
+import { Button } from '@/components/ui/button';
+import { DotsVerticalIcon, Pencil2Icon } from '@radix-ui/react-icons';
+import EmblaCarousel from './Carousel';
+
+export default function Projects() {
+    const slides = [
+        { id: 0, imgSrc: 'https://picsum.photos/id/237/200/300', title: '0' },
+        { id: 1, imgSrc: 'https://picsum.photos/id/238/300/200', title: '1' },
+        { id: 2, imgSrc: 'https://picsum.photos/id/239/500/500', title: '2' },
+    ];
+
+    return (
+        <div className="flex h-[calc(100vh-2.5rem)] w-full relative">
+            <div className="absolute top-0 w-full h-8 flex justify-center items-center px-32">
+                <div className="bg-bg h-full w-48"> </div>
+                <div className="bg-bg mx-auto h-full w-48"> </div>
+                <div className="bg-bg h-full w-48"> </div>
+            </div>
+            <div className="w-3/5 h-full">
+                <EmblaCarousel slides={slides} />
+            </div>
+            <div className="w-2/5 h-full flex flex-col justify-center items-start p-20 gap-4 font-light">
+                <p className="text-text-active text-4xl ">Airbnb.com</p>
+                <div className="text-text flex gap-7 text-sm">
+                    <p>Last edited 3 days ago </p>
+                    <p> localhost: 3000</p>
+                </div>
+                <div className="flex gap-4">
+                    <Button
+                        size="default"
+                        variant={'outline'}
+                        className="gap-4 bg-bg-active border border-border-active"
+                    >
+                        <Pencil2Icon />
+                        <p> Edit App </p>
+                    </Button>
+                    <Button size="default" variant={'ghost'} className="gap-4">
+                        <DotsVerticalIcon />
+                        <p> Project settings</p>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onlook",
   "description": "The Onlook Command Line Interface",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "bin": {
     "onlook": "dist/index.cjs"

cli/src/create/index.ts

@@ -1,11 +1,13 @@
 import { exec } from 'child_process';
-import * as degit from 'degit';
 import * as fs from 'fs';
 import ora from 'ora';
 import * as path from 'path';
 import { promisify } from 'util';
 import { NEXT_TEMPLATE_REPO } from './constant';
 
+// @ts-ignore
+import degit from 'degit';
+
 const execAsync = promisify(exec);
 
 export async function create(projectName: string) {