Bugs/0.0.26

app/electron/main/analytics/index.ts

@@ -27,7 +27,7 @@ class Analytics {
 
     private restoreSettings() {
         const settings = PersistentStorage.USER_SETTINGS.read() || {};
-        const enable = settings.enableAnalytics;
+        const enable = settings.enableAnalytics !== undefined ? settings.enableAnalytics : true;
         this.id = settings.id;
         if (!this.id) {
             this.id = nanoid();

app/package.json

@@ -36,7 +36,7 @@
         "remove_tag": "./scripts/remove_tag.sh"
     },
     "dependencies": {
-        "@onlook/utils": "0.0.3",
+        "@onlook/utils": "0.0.5",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-context-menu": "^2.2.1",

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

@@ -97,6 +97,14 @@ export const LoadVerifyProject = ({
             );
         }
 
+        if (state === StepState.ERROR) {
+            return (
+                <div className="text-sm w-full flex flex-row items-center border-[0.5px] p-4 rounded gap-2 border-red-600 text-red-200 bg-red-900">
+                    <p>{progressMessage}</p>
+                </div>
+            );
+        }
+
         function boxDecoration() {
             if (state === StepState.INSTALLED) {
                 return 'border-green-600 text-green-900 bg-green-100';
@@ -146,7 +154,7 @@ export const LoadVerifyProject = ({
         }
     }
 
-    function renderDescription() {
+    function renderDescription(): string | JSX.Element {
         if (state === StepState.VERIFYING) {
             return 'Checking your dependencies and configurations';
         } else if (state === StepState.INSTALLING) {
@@ -155,8 +163,18 @@ export const LoadVerifyProject = ({
             return 'It takes one second to install Onlook on your project';
         } else if (state === StepState.INSTALLED) {
             return 'Your project is all set up';
+        } else if (state === StepState.ERROR) {
+            return (
+                <p>
+                    {`Please `}
+                    <a href="mailto:support@onlook.dev" className="underline">
+                        {'contact support'}
+                    </a>
+                    {` for help. Or run 'npx onlook setup' in your project folder instead.`}
+                </p>
+            );
         } else {
-            return progressMessage || 'Please try again or contact support';
+            return 'Setting up project...';
         }
     }
 

app/src/routes/projects/ProjectsTab/Create/New/Setup.tsx

@@ -38,6 +38,8 @@ export const NewSetupProject = ({
                 setMessage(message);
                 if (stage === 'cloning') {
                     setProgress(30);
+                } else if (stage === 'git_init') {
+                    setProgress(50);
                 } else if (stage === 'installing') {
                     setProgress(80);
                 } else if (stage === 'complete') {
@@ -69,12 +71,20 @@ export const NewSetupProject = ({
         return 'Setting up project...';
     }
 
-    function renderDescription(): string {
+    function renderDescription(): string | JSX.Element {
         if (state === StepState.INSTALLED) {
             return 'Open this project in Onlook any time to start designing';
         }
         if (state === StepState.ERROR) {
-            return 'Please again or contact support';
+            return (
+                <p>
+                    {`Please `}
+                    <a href="mailto:support@onlook.dev" className="underline">
+                        {'contact support'}
+                    </a>
+                    {` for help. Or run 'npx onlook create' in your terminal instead.`}
+                </p>
+            );
         }
         return 'Installing the right files and folders for you.';
     }

utils/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@onlook/utils",
     "description": "A shared utility library for Onlook",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "type": "commonjs",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

utils/src/create/index.ts

@@ -8,12 +8,20 @@ import { CreateStage, type CreateCallback } from '..';
 const NEXT_TEMPLATE_REPO = 'onlook-dev/starter';
 const execAsync = promisify(exec);
 
+async function checkCommandExists(command: string): Promise<boolean> {
+    try {
+        await execAsync(`${command} --version`);
+        return true;
+    } catch (error) {
+        return false;
+    }
+}
+
 export async function createProject(
     projectName: string,
     targetPath: string,
     onProgress: CreateCallback
 ): Promise<void> {
-
     try {
         const fullPath = path.join(targetPath, projectName);
         // Check if the directory already exists
@@ -34,14 +42,36 @@ export async function createProject(
         // Change to the project directory
         process.chdir(fullPath);
 
-        // Install dependencies
-        onProgress(CreateStage.INSTALLING, 'Installing dependencies...');
-        await execAsync('npm install');
+        // Initialize git repository
+        const gitExists = await checkCommandExists('git');
+        if (gitExists) {
+            onProgress(CreateStage.GIT_INIT, 'Initializing git repository...');
+            await execAsync('git init');
+            await execAsync('git add .');
+            await execAsync('git commit -m "Initial commit"');
+        } else {
+            console.log('Git not found. Skipping git initialization.');
+        }
+
+        // Check if npm exists
+        const npmExists = await checkCommandExists('npm');
+
+        if (npmExists) {
+            // Install dependencies
+            onProgress(CreateStage.INSTALLING, 'Installing dependencies...');
+            await execAsync('npm install');
+        } else {
+            onProgress(CreateStage.ERROR, 'npm not found. Please install npm and retry.');
+            console.log('To install npm, you can:');
+            console.log('1. Install Node.js (which includes npm) from https://nodejs.org/');
+            console.log('2. Use a package manager like nvm (Node Version Manager)');
+            console.log('After installing npm, run "npm install" in the project directory.');
+            return;
+        }
 
         onProgress(CreateStage.COMPLETE, 'Project created successfully!');
     } catch (error) {
         onProgress(CreateStage.ERROR, `Project creation failed: ${error}`);
         throw error;
     }
-}
-
+}

utils/src/index.ts

@@ -4,6 +4,7 @@ export { verifyProject } from './verify';
 
 export enum CreateStage {
     CLONING = 'cloning',
+    GIT_INIT = 'git_init',
     INSTALLING = 'installing',
     COMPLETE = 'complete',
     ERROR = 'error'