Project creation/import

.vscode/.debug.script.mjs

@@ -13,11 +13,10 @@ fs.writeFileSync(path.join(__dirname, '.debug.env'), envContent.join('\n'))
 
 // bootstrap
 spawn(
-  // TODO: terminate `npm run dev` when Debug exits.
-  process.platform === 'win32' ? 'npm.cmd' : 'npm',
-  ['run', 'dev'],
-  {
-    stdio: 'inherit',
-    env: Object.assign(process.env, { VSCODE_DEBUG: 'true' }),
-  },
+    process.platform === 'win32' ? 'npm.cmd' : 'npm',
+    ['run', 'dev'],
+    {
+        stdio: 'inherit',
+        env: Object.assign(process.env, { VSCODE_DEBUG: 'true' }),
+    },
 )

.vscode/tasks.json

@@ -1,31 +1,30 @@
 {
-  // See https://go.microsoft.com/fwlink/?LinkId=733558 
-  // for the documentation about the tasks.json format
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "Before Debug",
-      "type": "shell",
-      "command": "node .vscode/.debug.script.mjs",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "fileLocation": "relative",
-        "pattern": {
-          // TODO: correct "regexp"
-          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
-          "file": 1,
-          "line": 3,
-          "column": 4,
-          "code": 5,
-          "message": 6
-        },
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
-          "endsPattern": "^.*\\[startup\\] Electron App.*$"
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Before Debug",
+            "type": "shell",
+            "command": "node .vscode/.debug.script.mjs",
+            "isBackground": true,
+            "problemMatcher": {
+                "owner": "typescript",
+                "fileLocation": "relative",
+                "pattern": {
+                    "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+                    "file": 1,
+                    "line": 3,
+                    "column": 4,
+                    "code": 5,
+                    "message": 6
+                },
+                "background": {
+                    "activeOnStart": true,
+                    "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+                    "endsPattern": "^.*\\[startup\\] Electron App.*$"
+                }
+            }
         }
-      }
-    }
-  ]
+    ]
 }

app/common/constants.ts

@@ -41,6 +41,7 @@ export enum WebviewChannels {
 }
 
 export enum MainChannels {
+    OPEN_IN_EXPLORER = 'open-in-explorer',
     OPEN_EXTERNAL_WINDOW = 'open-external-window',
     QUIT_AND_INSTALL = 'quit-and-update-app',
     UPDATE_DOWNLOADED = 'update-downloaded',
@@ -81,6 +82,14 @@ export enum MainChannels {
     UPDATE_USER_SETTINGS = 'update-user-settings',
     UPDATE_APP_STATE = 'update-app-state',
     UPDATE_PROJECTS = 'update-projects',
+
+    // Create
+    CREATE_NEW_PROJECT = 'create-new-project',
+    CREATE_NEW_PROJECT_CALLBACK = 'create-new-project-callback',
+    VERIFY_PROJECT = 'verify-project',
+    VERIFY_PROJECT_CALLBACK = 'verify-project-callback',
+    SETUP_PROJECT = 'setup-project',
+    SETUP_PROJECT_CALLBACK = 'setup-project-callback',
 }
 
 export enum Links {

app/electron/main/events/create.ts

@@ -0,0 +1,50 @@
+import {
+    CreateCallback,
+    CreateStage,
+    SetupCallback,
+    SetupStage,
+    VerifyCallback,
+    VerifyStage,
+    createProject,
+    setupProject,
+    verifyProject,
+} from '@onlook/utils';
+import { ipcMain } from 'electron';
+import { mainWindow } from '..';
+import { MainChannels } from '/common/constants';
+
+export function listenForCreateMessages() {
+    ipcMain.handle(MainChannels.CREATE_NEW_PROJECT, (e: Electron.IpcMainInvokeEvent, args) => {
+        const progressCallback: CreateCallback = (stage: CreateStage, message: string) => {
+            mainWindow?.webContents.send(MainChannels.CREATE_NEW_PROJECT_CALLBACK, {
+                stage,
+                message,
+            });
+        };
+
+        const { name, path } = args as { name: string; path: string };
+        return createProject(name, path, progressCallback);
+    });
+
+    ipcMain.handle(MainChannels.VERIFY_PROJECT, (e: Electron.IpcMainInvokeEvent, args: string) => {
+        const progressCallback: VerifyCallback = (stage: VerifyStage, message: string) => {
+            mainWindow?.webContents.send(MainChannels.VERIFY_PROJECT_CALLBACK, {
+                stage,
+                message,
+            });
+        };
+        const path = args as string;
+        return verifyProject(path, progressCallback);
+    });
+
+    ipcMain.handle(MainChannels.SETUP_PROJECT, (e: Electron.IpcMainInvokeEvent, args: string) => {
+        const progressCallback: SetupCallback = (stage: SetupStage, message: string) => {
+            mainWindow?.webContents.send(MainChannels.SETUP_PROJECT_CALLBACK, {
+                stage,
+                message,
+            });
+        };
+        const path = args as string;
+        return setupProject(path, progressCallback);
+    });
+}

app/electron/main/events/index.ts

@@ -3,6 +3,7 @@ import { updater } from '../update';
 import { listenForAnalyticsMessages } from './analytics';
 import { listenForAuthMessages } from './auth';
 import { listenForCodeMessages } from './code';
+import { listenForCreateMessages } from './create';
 import { listenForStorageMessages } from './storage';
 import { listenForTunnelMessages } from './tunnel';
 import { MainChannels } from '/common/constants';
@@ -14,9 +15,17 @@ export function listenForIpcMessages() {
     listenForCodeMessages();
     listenForStorageMessages();
     listenForAuthMessages();
+    listenForCreateMessages();
 }
 
 function listenForGeneralMessages() {
+    ipcMain.handle(
+        MainChannels.OPEN_IN_EXPLORER,
+        (e: Electron.IpcMainInvokeEvent, args: string) => {
+            return shell.showItemInFolder(args);
+        },
+    );
+
     ipcMain.handle(
         MainChannels.OPEN_EXTERNAL_WINDOW,
         (e: Electron.IpcMainInvokeEvent, args: string) => {

app/package.json

@@ -36,6 +36,7 @@
         "remove_tag": "./scripts/remove_tag.sh"
     },
     "dependencies": {
+        "@onlook/utils": "0.0.3",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-context-menu": "^2.2.1",
@@ -89,8 +90,8 @@
         "@eslint/compat": "^1.1.1",
         "@eslint/js": "^9.7.0",
         "@playwright/test": "^1.42.1",
-        "@types/babel__traverse": "^7.20.6",
         "@types/babel-generator": "^6.25.8",
+        "@types/babel__traverse": "^7.20.6",
         "@types/bun": "^1.1.6",
         "@types/css-tree": "^2.3.8",
         "@types/culori": "^2.1.0",

app/src/routes/projects/ProjectsTab/Create/Load/Name.tsx

@@ -0,0 +1,63 @@
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { StepProps } from '..';
+import { getRandomPlaceholder } from '../../../helpers';
+
+export const LoadNameProject = ({
+    props: { projectData, currentStep, setProjectData, totalSteps, prevStep, nextStep },
+}: {
+    props: StepProps;
+}) => {
+    function setProjectName(name: string) {
+        setProjectData({
+            ...projectData,
+            name,
+        });
+    }
+    return (
+        <Card className="w-[30rem]">
+            <CardHeader>
+                <CardTitle>{'Let’s name your project'}</CardTitle>
+                <CardDescription>
+                    {"We'll install the necessary dependencies for you"}
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="h-24 flex items-center w-full">
+                <div className="flex flex-col w-full gap-2">
+                    <Label htmlFor="text">Project Name</Label>
+                    <Input
+                        type="text"
+                        placeholder={getRandomPlaceholder()}
+                        value={projectData.name || ''}
+                        onInput={(e) => setProjectName(e.currentTarget.value)}
+                    />
+                </div>
+            </CardContent>
+            <CardFooter className="text-sm">
+                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <div className="flex ml-auto gap-2">
+                    <Button type="button" onClick={prevStep} variant="ghost">
+                        Back
+                    </Button>
+                    <Button
+                        disabled={!projectData.name || projectData.name.length === 0}
+                        type="button"
+                        onClick={nextStep}
+                        variant="outline"
+                    >
+                        Next
+                    </Button>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+};

app/src/routes/projects/ProjectsTab/Create/Load/SelectFolder.tsx

@@ -35,6 +35,15 @@ export const LoadSelectFolder = ({
         });
     }
 
+    function verifyFolder() {
+        window.api.invoke(MainChannels.VERIFY_PROJECT, projectData.folderPath);
+        nextStep();
+    }
+
+    function handleClickPath() {
+        window.api.invoke(MainChannels.OPEN_IN_EXPLORER, projectData.folderPath);
+    }
+
     return (
         <Card className="w-[30rem]">
             <CardHeader>
@@ -43,10 +52,15 @@ export const LoadSelectFolder = ({
             </CardHeader>
             <CardContent className="min-h-24 flex items-center w-full ">
                 {projectData.folderPath ? (
-                    <div className="w-full flex flex-row items-center border border-[0.5px] bg-bg/60 px-4 py-5 rounded">
+                    <div className="w-full flex flex-row items-center border-[0.5px] bg-bg/60 px-4 py-5 rounded">
                         <div className="flex flex-col text-sm gap-1 break-all">
                             <p className="text-regularPlus">{projectData.name}</p>
-                            <p className="text-mini text-text">{projectData.folderPath}</p>
+                            <button
+                                className="hover:underline text-mini text-text"
+                                onClick={handleClickPath}
+                            >
+                                {projectData.folderPath}
+                            </button>
                         </div>
                         <Button
                             className="ml-auto w-10 h-10"
@@ -64,7 +78,7 @@ export const LoadSelectFolder = ({
                     </div>
                 ) : (
                     <Button
-                        className="w-full h-20 text-regularPlus text-text border border-[0.5px] bg-bg/50"
+                        className="w-full h-20 text-regularPlus text-text border-[0.5px] bg-bg/50"
                         variant={'outline'}
                         onClick={pickProjectFolder}
                     >
@@ -81,7 +95,7 @@ export const LoadSelectFolder = ({
                     <Button
                         disabled={!projectData.folderPath}
                         type="button"
-                        onClick={nextStep}
+                        onClick={verifyFolder}
                         variant="outline"
                     >
                         Next