Create flow misc changes (#388)

onlook-dev · Sep 20, 2024 · 315b269 · 315b269
1 parent 220e728
commit 315b269
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/app/src/lib/editor/engine/canvas/index.ts b/app/src/lib/editor/engine/canvas/index.ts
@@ -18,7 +18,10 @@ export class CanvasManager {
 
     constructor(private projects: ProjectsManager) {
         makeAutoObservable(this);
+        this.listenToProjectChange();
+    }
 
+    listenToProjectChange() {
         reaction(
             () => this.projects.project,
             (project) => {

diff --git a/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx b/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
@@ -24,17 +24,35 @@ export const NewSelectFolder = ({
         if (path == null) {
             return;
         }
+
+        const pathWithProject = `${path}/${nameToFolderName(projectData.name || 'new-project')}`;
+        setProjectData({
+            ...projectData,
+            folderPath: pathWithProject,
+        });
+    }
+
+    function nameToFolderName(name: string): string {
+        return name
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric characters with hyphens
+            .replace(/^-+|-+$/g, '') // Remove leading and trailing hyphens
+            .replace(/^(\d)/, '_$1'); // Prepend underscore if the name starts with a digit
+    }
+
+    function goBack() {
         setProjectData({
             ...projectData,
-            folderPath: path,
+            folderPath: undefined,
         });
+        prevStep();
     }
 
     return (
         <Card className="w-[30rem]">
             <CardHeader>
                 <CardTitle>{'Select your project folder'}</CardTitle>
-                <CardDescription>{'This is where we’ll reference your App'}</CardDescription>
+                <CardDescription>{"We'll create a folder with your new app here"}</CardDescription>
             </CardHeader>
             <CardContent className="h-24 flex items-center w-full">
                 {projectData.folderPath ? (
@@ -70,7 +88,7 @@ export const NewSelectFolder = ({
             <CardFooter className="text-sm">
                 <p>{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
-                    <Button type="button" onClick={prevStep} variant="ghost">
+                    <Button type="button" onClick={goBack} variant="ghost">
                         Rename folder
                     </Button>
                     <Button

diff --git a/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx b/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
@@ -61,6 +61,22 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
         };
     }, [scrollPrev, scrollNext]);
 
+    const handleWheel = useCallback(
+        (e: React.WheelEvent) => {
+            e.preventDefault();
+            const threshold = 50; // Adjust this value to change the sensitivity
+
+            if (Math.abs(e.deltaY) > threshold) {
+                if (e.deltaY > 0) {
+                    scrollNext();
+                } else {
+                    scrollPrev();
+                }
+            }
+        },
+        [scrollNext, scrollPrev],
+    );
+
     return (
         <div
             className="embla relative h-[calc(100vh-5.5rem)] overflow-hidden"
@@ -74,7 +90,7 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
                     zIndex: -1,
                 }}
             >
-                <div className="embla__container h-full">
+                <div className="embla__container h-full" onWheel={handleWheel}>
                     {slides.map((slide, index) => (
                         <div
                             key={slide.id}
@@ -105,7 +121,7 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
                     disabled={!prevBtnEnabled}
                 >
                     <ChevronUpIcon
-                        className={`w-7 h-7 ${prevBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                        className={`w-7 h-7 transition duration-300 ease-in-out ${prevBtnEnabled ? 'text-white' : 'text-gray-400'}`}
                     />
                 </button>
                 <div className="flex flex-row space-x-1 text-white items-center">
@@ -119,7 +135,7 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
                     disabled={!nextBtnEnabled}
                 >
                     <ChevronDownIcon
-                        className={`w-7 h-7 ${nextBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                        className={`w-7 h-7 transition duration-300 ease-in-out ${nextBtnEnabled ? 'text-white' : 'text-gray-400'}`}
                     />
                 </button>
             </div>