TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add sonner + project creation working

Browse Source
This commit is contained in:
Ishaan Dey 2024-04-27 16:22:35 -04:00
parent 676f88a7ce
commit d941e2c056
18 changed files with 427 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/database/drizzle/0002_rare_beyonder.sql Normal file
View File

@ -0,0 +1 @@
ALTER TABLE sandbox ADD `visibility` text;

118
backend/database/drizzle/meta/0002_snapshot.json Normal file
View File

@ -0,0 +1,118 @@
{
"version": "5",
"dialect": "sqlite",
"id": "a2239d60-e4b8-4375-979f-bbca5539a825",
"prevId": "739c5df4-de1b-408b-bc8c-5783688c5297",
"tables": {
"sandbox": {
"name": "sandbox",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"type": {
"name": "type",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"visibility": {
"name": "visibility",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {
"sandbox_id_unique": {
"name": "sandbox_id_unique",
"columns": [
"id"
],
"isUnique": true
}
},
"foreignKeys": {
"sandbox_user_id_user_id_fk": {
"name": "sandbox_user_id_user_id_fk",
"tableFrom": "sandbox",
"tableTo": "user",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {}
},
"user": {
"name": "user",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"email": {
"name": "email",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {
"user_id_unique": {
"name": "user_id_unique",
"columns": [
"id"
],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {}
}
},
"enums": {},
"_meta": {
"schemas": {},
"tables": {},
"columns": {}
}
}

118
backend/database/drizzle/meta/0003_snapshot.json Normal file
View File

@ -0,0 +1,118 @@
{
"version": "5",
"dialect": "sqlite",
"id": "913932e8-65cf-40b9-a978-8818396234f6",
"prevId": "a2239d60-e4b8-4375-979f-bbca5539a825",
"tables": {
"sandbox": {
"name": "sandbox",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"type": {
"name": "type",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"visibility": {
"name": "visibility",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {
"sandbox_id_unique": {
"name": "sandbox_id_unique",
"columns": [
"id"
],
"isUnique": true
}
},
"foreignKeys": {
"sandbox_user_id_user_id_fk": {
"name": "sandbox_user_id_user_id_fk",
"tableFrom": "sandbox",
"tableTo": "user",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {}
},
"user": {
"name": "user",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"email": {
"name": "email",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {
"user_id_unique": {
"name": "user_id_unique",
"columns": [
"id"
],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {}
}
},
"enums": {},
"_meta": {
"schemas": {},
"tables": {},
"columns": {}
}
}

14
backend/database/drizzle/meta/_journal.json
View File

@ -15,6 +15,20 @@
"when": 1713937589365,
"tag": "0001_magenta_tenebrous",
"breakpoints": true
},
{
"idx": 2,
"version": "5",
"when": 1714247208074,
"tag": "0002_rare_beyonder",
"breakpoints": true
},
{
"idx": 3,
"version": "5",
"when": 1714247272878,
"tag": "0003_silky_talos",
"breakpoints": true
}
]
}

67
backend/database/src/index.ts
View File

@ -13,6 +13,9 @@ export interface Env {
// https://github.com/drizzle-team/drizzle-orm/tree/main/examples/cloudflare-d1
// npm run generate
// npx wrangler d1 execute d1-sandbox --local --file=./drizzle/<FILE>
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
const success = new Response("Success", { status: 200 });
@ -26,37 +29,43 @@ export default {
const db = drizzle(env.DB, { schema });
if (path === "/api/sandbox/create" && method === "POST") {
const initSchema = z.object({
type: z.enum(["react", "node"]),
name: z.string(),
userId: z.string(),
});
const body = await request.json();
const { type, name, userId } = initSchema.parse(body);
const sb = await db.insert(sandbox).values({ type, name, userId }).returning().get();
console.log("sb:", sb);
await fetch("https://storage.ishaan1013.workers.dev/api/init", {
method: "POST",
body: JSON.stringify({ sandboxId: sb.id, type }),
headers: { "Content-Type": "application/json" },
});
return success;
} else if (path === "/api/sandbox" && method === "GET") {
const params = url.searchParams;
if (params.has("id")) {
const id = params.get("id") as string;
const res = await db.query.sandbox.findFirst({
where: (sandbox, { eq }) => eq(sandbox.id, id),
if (path === "/api/sandbox") {
if (method === "GET") {
const params = url.searchParams;
if (params.has("id")) {
const id = params.get("id") as string;
const res = await db.query.sandbox.findFirst({
where: (sandbox, { eq }) => eq(sandbox.id, id),
});
return json(res ?? {});
} else {
const res = await db.select().from(sandbox).all();
return json(res ?? {});
}
} else if (method === "PUT") {
const initSchema = z.object({
type: z.enum(["react", "node"]),
name: z.string(),
userId: z.string(),
visibility: z.enum(["public", "private"]),
});
return json(res ?? {});
const body = await request.json();
const { type, name, userId, visibility } = initSchema.parse(body);
const sb = await db.insert(sandbox).values({ type, name, userId, visibility }).returning().get();
// console.log("sb:", sb);
await fetch("https://storage.ishaan1013.workers.dev/api/init", {
method: "POST",
body: JSON.stringify({ sandboxId: sb.id, type }),
headers: { "Content-Type": "application/json" },
});
return new Response(sb.id, { status: 200 });
} else {
const res = await db.select().from(sandbox).all();
return json(res ?? {});
console.log(method);
return methodNotAllowed;
}
} else if (path === "/api/user") {
if (method === "GET") {

1
backend/database/src/schema.ts
View File

@ -24,6 +24,7 @@ export const sandbox = sqliteTable("sandbox", {
.unique(),
name: text("name").notNull(),
type: text("type", { enum: ["react", "node"] }).notNull(),
visibility: text("visibility", { enum: ["public", "private"] }),
userId: text("user_id")
.notNull()
.references(() => user.id),

1
backend/server/src/types.ts
View File

@ -11,6 +11,7 @@ export type Sandbox = {
id: string
name: string
type: "react" | "node"
visibility: "public" | "private"
userId: string
}

2
frontend/app/layout.tsx
View File

@ -4,6 +4,7 @@ import { GeistMono } from "geist/font/mono"
import "./globals.css"
import { ThemeProvider } from "@/components/layout/themeProvider"
import { ClerkProvider } from "@clerk/nextjs"
import { Toaster } from "@/components/ui/sonner"
export const metadata: Metadata = {
title: "Sandbox",
@ -26,6 +27,7 @@ export default function RootLayout({
disableTransitionOnChange
>
{children}
<Toaster position="bottom-left" richColors />
</ThemeProvider>
</body>
</html>

30
frontend/components/dashboard/newProject.tsx
View File

@ -10,7 +10,7 @@ import {
} from "@/components/ui/dialog"
import Image from "next/image"
import { useState } from "react"
import { z } from "zod"
import { set, z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
@ -32,6 +32,10 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { useUser } from "@clerk/nextjs"
import { createSandbox } from "@/lib/actions"
import { useRouter } from "next/navigation"
import { Loader2 } from "lucide-react"
type TOptions = "react" | "node"
@ -68,6 +72,10 @@ export default function NewProjectModal({
setOpen: (open: boolean) => void
}) {
const [selected, setSelected] = useState<TOptions>("react")
const [loading, setLoading] = useState(false)
const router = useRouter()
const user = useUser()
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
@ -77,8 +85,14 @@ export default function NewProjectModal({
},
})
function onSubmit(values: z.infer<typeof formSchema>) {
const sandboxData = { type: selected, ...values }
async function onSubmit(values: z.infer<typeof formSchema>) {
if (!user.isSignedIn) return
const sandboxData = { type: selected, userId: user.user.id, ...values }
setLoading(true)
const id = await createSandbox(sandboxData)
router.push(`/code/${id}`)
}
return (
@ -146,8 +160,14 @@ export default function NewProjectModal({
</FormItem>
)}
/>
<CustomButton type="submit" className="w-full">
Submit
<CustomButton disabled={loading} type="submit" className="w-full">
{loading ? (
<>
<Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
</>
) : (
"Submit"
)}
</CustomButton>
</form>
</Form>

2
frontend/components/dashboard/projectCard/dropdown.tsx
View File

@ -20,7 +20,7 @@ export default function ProjectCardDropdown({ sandbox }: { sandbox: Sandbox }) {
e.preventDefault()
e.stopPropagation()
}}
className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm outline-foreground"
>
<Ellipsis className="w-4 h-4" />
</DropdownMenuTrigger>

80
frontend/components/dashboard/projects.tsx
View File

@ -2,7 +2,9 @@ import { Sandbox } from "@/lib/types"
import ProjectCard from "./projectCard"
import Image from "next/image"
import ProjectCardDropdown from "./projectCard/dropdown"
import { Clock, Globe } from "lucide-react"
import { Clock, Globe, Lock } from "lucide-react"
import Link from "next/link"
import { Card } from "../ui/card"
export default function DashboardProjects({
sandboxes,
@ -12,35 +14,53 @@ export default function DashboardProjects({
return (
<div className="grow p-4 flex flex-col">
<div className="text-xl font-medium mb-8">My Projects</div>
<div className="grow w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
{sandboxes.map((sandbox) => (
<ProjectCard key={sandbox.id} id={sandbox.id}>
<div className="space-x-2 flex items-center justify-start w-full">
<Image
alt=""
src={
sandbox.type === "react"
? "/project-icons/react.svg"
: "/project-icons/node.svg"
}
width={20}
height={20}
/>
<div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
{sandbox.name}
</div>
<ProjectCardDropdown sandbox={sandbox} />
</div>
<div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
<div className="flex items-center">
<Globe className="w-3 h-3 mr-2" /> Public
</div>
<div className="flex items-center">
<Clock className="w-3 h-3 mr-2" /> 3d ago
</div>
</div>
</ProjectCard>
))}
<div className="grow w-full ">
<div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
{sandboxes.map((sandbox) => (
<Link
key={sandbox.id}
href={`/code/${sandbox.id}`}
className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
>
<Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
{/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
<div className="space-x-2 flex items-center justify-start w-full">
<Image
alt=""
src={
sandbox.type === "react"
? "/project-icons/react.svg"
: "/project-icons/node.svg"
}
width={20}
height={20}
/>
<div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
{sandbox.name}
</div>
<ProjectCardDropdown sandbox={sandbox} />
</div>
<div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
<div className="flex items-center">
{sandbox.visibility === "private" ? (
<>
<Lock className="w-3 h-3 mr-2" /> Private
</>
) : (
<>
<Globe className="w-3 h-3 mr-2" /> Public
</>
)}
</div>
<div className="flex items-center">
<Clock className="w-3 h-3 mr-2" /> 3d ago
</div>
</div>
{/* </ProjectCard> */}
</Card>
</Link>
))}
</div>
</div>
</div>
)

13
frontend/components/editor/index.tsx
View File

@ -23,8 +23,8 @@ import { useClerk } from "@clerk/nextjs"
import { TFile, TFileData, TFolder, TTab } from "./sidebar/types"
import { io } from "socket.io-client"
import { set } from "zod"
import { processFileType } from "@/lib/utils"
import { toast } from "sonner"
export default function CodeEditor({
userId,
@ -117,11 +117,6 @@ export default function CodeEditor({
setTabs((prev) => prev.filter((t) => t.id !== tab.id))
}
// Note: add renaming validation:
// In general: must not contain / or \ or whitespace, not empty, no duplicates
// Files: must contain dot
// Folders: must not contain dot
const handleRename = (
id: string,
newName: string,
@ -129,14 +124,18 @@ export default function CodeEditor({
type: "file" | "folder"
) => {
// Validation
if (newName === oldName) {
return false
}
if (
newName === oldName ||
newName.includes("/") ||
newName.includes("\\") ||
newName.includes(" ") ||
(type === "file" && !newName.includes(".")) ||
(type === "folder" && newName.includes("."))
) {
toast.error("Invalid file name.")
return false
}

5
frontend/components/ui/customButton.tsx
View File

@ -7,19 +7,22 @@ const Button = ({
className,
onClick,
type,
disabled = false,
}: {
children: React.ReactNode
className?: string
onClick?: () => void
type?: "button" | "submit" | "reset"
disabled?: boolean
}) => {
return (
<button
onClick={onClick}
disabled={disabled}
type={type ?? "button"}
className={cn(
className,
"gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
`gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`
)}
>
<div className="rounded-[6px] w-full gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-9">

31
frontend/components/ui/sonner.tsx Normal file
View File

@ -0,0 +1,31 @@
"use client"
import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"
type ToasterProps = React.ComponentProps<typeof Sonner>
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
toastOptions={{
classNames: {
toast:
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
description: "group-[.toast]:text-muted-foreground",
actionButton:
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
cancelButton:
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
},
}}
{...props}
/>
)
}
export { Toaster }

7
frontend/lib/actions.ts
View File

@ -3,13 +3,16 @@
export async function createSandbox(body: {
type: string
name: string
userId: string
visibility: string
}) {
const res = await fetch("http://localhost:8787/api/sandbox/create", {
method: "POST",
const res = await fetch("http://localhost:8787/api/sandbox", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
})
return await res.text()
}

1
frontend/lib/types.ts
View File

@ -11,6 +11,7 @@ export type Sandbox = {
id: string
name: string
type: "react" | "node"
visibility: "public" | "private"
userId: string
}

10
frontend/package-lock.json generated
View File

@ -30,6 +30,7 @@
"react-hook-form": "^7.51.3",
"react-resizable-panels": "^2.0.16",
"socket.io-client": "^4.7.5",
"sonner": "^1.4.41",
"tailwind-merge": "^2.2.2",
"tailwindcss-animate": "^1.0.7",
"vscode-icons-js": "^11.6.1",
@ -3012,6 +3013,15 @@
"node": ">=10.0.0"
}
},
"node_modules/sonner": {
"version": "1.4.41",
"resolved": "https://registry.npmjs.org/sonner/-/sonner-1.4.41.tgz",
"integrity": "sha512-uG511ggnnsw6gcn/X+YKkWPo5ep9il9wYi3QJxHsYe7yTZ4+cOd1wuodOUmOpFuXL+/RE3R04LczdNCDygTDgQ==",
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/source-map-js": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.1.0.tgz",

1
frontend/package.json
View File

@ -31,6 +31,7 @@
"react-hook-form": "^7.51.3",
"react-resizable-panels": "^2.0.16",
"socket.io-client": "^4.7.5",
"sonner": "^1.4.41",
"tailwind-merge": "^2.2.2",
"tailwindcss-animate": "^1.0.7",
"vscode-icons-js": "^11.6.1",