New Project + Settings page UI (#381)

---------

Co-authored-by: Daniel R Farrell <[email protected]>

app/common/tokens.js

@@ -137,70 +137,80 @@ export const fontSize = {
  '1rem',
  {
  lineHeight: '1.4rem',
- fontWeight: '500',
+ fontWeight: '400',
+ letterSpacing: '0.02rem',
  },
  ],
  large: [
  '1rem',
  {
  lineHeight: '1.4rem',
  fontWeight: 'normal',
+ letterSpacing: '0.02rem',
  },
  ],
  regularPlus: [
  '0.9375rem',
  {
  lineHeight: '1.4rem',
- fontWeight: '500',
+ fontWeight: '400',
+ letterSpacing: '0.02rem',
  },
  ],
  regular: [
  '0.9375rem',
  {
  lineHeight: '1.4rem',
- fontWeight: 'normal',
+ fontWeight: '300',
+ letterSpacing: '0.02rem',
  },
  ],
  smallPlus: [
  '0.8125rem',
  {
- lineHeight: '1.4rem',
- fontWeight: '500',
+ lineHeight: '1.3rem',
+ fontWeight: '300',
+ letterSpacing: '0.015rem',
  },
  ],
  small: [
  '0.8125rem',
  {
- lineHeight: '1.4rem',
- fontWeight: 'normal',
+ lineHeight: '1.3rem',
+ fontWeight: '300',
+ letterSpacing: '0.015rem',
  },
  ],
  miniPlus: [
  '1rem',
  {
  lineHeight: 'normal',
  fontWeight: '500',
+ letterSpacing: '0.01rem',
  },
  ],
  mini: [
  '1rem',
  {
  lineHeight: 'normal',
  fontWeight: 'normal',
+ letterSpacing: '0.01rem',
  },
  ],
  microPlus: [
  '0.6875rem',
  {
  lineHeight: 'normal',
  fontWeight: '500',
+ letterSpacing: '0.01rem',
  },
  ],
  micro: [
  '0.6875rem',
  {
  lineHeight: 'normal',
  fontWeight: 'normal',
+ letterSpacing: '0.01rem',
  },
  ],
 };

app/src/components/ui/button.tsx

@@ -9,19 +9,20 @@ const buttonVariants = cva(
  {
  variants: {
  variant: {
- default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+ default:
+ 'bg-primary text-primary-foreground shadow hover:bg-primary/90 hover:border-border-hover',
  destructive:
  'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
  outline:
- 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+ 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-border-hover',
  secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
- ghost: 'hover:bg-accent hover:text-accent-foreground',
+ ghost: 'hover:bg-bg-hover hover:text-accent-foreground hover:border-border-hover',
  link: 'text-primary underline-offset-4 hover:underline',
  },
  size: {
  default: 'h-9 px-4 py-2',
- sm: 'h-8 rounded-md px-3 text-xs',
- lg: 'h-10 rounded-md px-8',
+ sm: 'h-8 rounded-sm px-3 text-xs',
+ lg: 'h-10 rounded-sm px-8',
  icon: 'h-9 w-9',
  },
  },

app/src/components/ui/card.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+ ({ className, ...props }, ref) => (
+ <div
+ ref={ref}
+ className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+ {...props}
+ />
+ ),
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+ ({ className, ...props }, ref) => (
+ <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+ ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+ ({ className, ...props }, ref) => (
+ <h3
+ ref={ref}
+ className={cn('font-semibold leading-none tracking-tight', className)}
+ {...props}
+ />
+ ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+ <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+ ({ className, ...props }, ref) => (
+ <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+ ),
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+ ({ className, ...props }, ref) => (
+ <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+ ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

app/src/routes/projects/ProjectsTab/Create/LoadProject.tsx

@@ -0,0 +1,43 @@
+import { ProjectData } from '.';
+
+// Step components for "Load existing project" path
+export const LoadStep1 = ({
+ formData,
+ setProjectData,
+}: {
+ formData: ProjectData;
+ setProjectData: (data: ProjectData) => void;
+}) => (
+ <div className="space-y-4">
+ <h2 className="text-xl font-bold">Step 1: Select Project</h2>
+ <input
+ type="text"
+ placeholder="Project Name"
+ value={formData.projectName}
+ onChange={(e) => setProjectData({ ...formData, projectName: e.target.value })}
+ className="w-full p-2 border rounded"
+ />
+ </div>
+);
+
+export const LoadStep2 = ({
+ formData,
+ setProjectData,
+}: {
+ formData: ProjectData;
+ setProjectData: (data: ProjectData) => void;
+}) => (
+ <div className="space-y-4">
+ <h2 className="text-xl font-bold">Step 2: Configure</h2>
+ <select
+ value={formData.projectType}
+ onChange={(e) => setProjectData({ ...formData, projectType: e.target.value })}
+ className="w-full p-2 border rounded"
+ >
+ <option value="">Select Project Type</option>
+ <option value="react">React</option>
+ <option value="vue">Vue</option>
+ <option value="angular">Angular</option>
+ </select>
+ </div>
+);

app/src/routes/projects/ProjectsTab/Create/NewProject.tsx

@@ -0,0 +1,50 @@
+import { ProjectData } from '.';
+
+// Step components for "New Onlook project" path
+export const NewStep1 = ({
+ formData,
+ setProjectData,
+}: {
+ formData: ProjectData;
+ setProjectData: (data: ProjectData) => void;
+}) => (
+ <div className="space-y-4">
+ <h2 className="text-xl font-bold">Step 1: Project Details</h2>
+ <input
+ type="text"
+ placeholder="Project Name"
+ value={formData.projectName}
+ onChange={(e) => setProjectData({ ...formData, projectName: e.target.value })}
+ className="w-full p-2 border rounded"
+ />
+ <input
+ type="text"
+ placeholder="Description"
+ value={formData.description}
+ onChange={(e) => setProjectData({ ...formData, description: e.target.value })}
+ className="w-full p-2 border rounded"
+ />
+ </div>
+);
+
+export const NewStep2 = ({
+ formData,
+ setProjectData,
+}: {
+ formData: ProjectData;
+ setProjectData: (data: ProjectData) => void;
+}) => (
+ <div className="space-y-4">
+ <h2 className="text-xl font-bold">Step 2: React Setup</h2>
+ <select
+ value={formData.reactVersion}
+ onChange={(e) => setProjectData({ ...formData, reactVersion: e.target.value })}
+ className="w-full p-2 border rounded"
+ >
+ <option value="">Select React Version</option>
+ <option value="18">React 18</option>
+ <option value="17">React 17</option>
+ <option value="16">React 16</option>
+ </select>
+ </div>
+);