khairul169/code-share
1
0
Fork 0
mirror of https://github.com/khairul169/code-share.git synced 2025-04-29 17:19:37 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: working file listing & saving

Browse Source
This commit is contained in:
Khairul Hidayat 2024-02-20 06:52:39 +00:00
parent 6b278b092e
commit eb2fd4404b
37 changed files with 3268 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -34,3 +34,6 @@ yarn-error.log*
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
storage/**/*
!.gitkeep

11
drizzle.config.ts Normal file
View File

@ -0,0 +1,11 @@
import path from "node:path";
import type { Config } from "drizzle-kit";
export default {
schema: "./src/server/db/schema/_schema.ts",
out: "./src/server/db/drizzle",
driver: "better-sqlite",
dbCredentials: {
url: path.join(process.cwd(), "storage/database.db"),
},
} satisfies Config;

23
package.json
View File

@ -6,12 +6,23 @@
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint" "lint": "next lint",
"generate": "drizzle-kit generate:sqlite",
"drop": "drizzle-kit drop",
"push": "drizzle-kit push:sqlite",
"migrate": "tsx src/server/db/migrate.ts",
"seed": "tsx src/server/db/seed.ts",
"reset": "rm -f storage/database.db && npm run push && npm run seed"
}, },
"dependencies": { "dependencies": {
"@codemirror/lang-css": "^6.2.1", "@codemirror/lang-css": "^6.2.1",
"@codemirror/lang-html": "^6.4.8", "@codemirror/lang-html": "^6.4.8",
"@codemirror/lang-javascript": "^6.2.1", "@codemirror/lang-javascript": "^6.2.1",
"@emmetio/codemirror6-plugin": "^0.3.0",
"@hookform/resolvers": "^3.3.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-slot": "^1.0.2",
"@replit/codemirror-vscode-keymap": "^6.0.2",
"@tanstack/react-query": "^5.21.7", "@tanstack/react-query": "^5.21.7",
"@trpc/client": "11.0.0-next-beta.289", "@trpc/client": "11.0.0-next-beta.289",
"@trpc/next": "11.0.0-next-beta.289", "@trpc/next": "11.0.0-next-beta.289",
@ -19,13 +30,19 @@
"@trpc/server": "11.0.0-next-beta.289", "@trpc/server": "11.0.0-next-beta.289",
"@uiw/codemirror-theme-tokyo-night": "^4.21.22", "@uiw/codemirror-theme-tokyo-night": "^4.21.22",
"@uiw/react-codemirror": "^4.21.22", "@uiw/react-codemirror": "^4.21.22",
"bcrypt": "^5.1.1",
"better-sqlite3": "^9.4.1",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"drizzle-orm": "^0.29.3",
"drizzle-zod": "^0.5.1",
"lucide-react": "^0.331.0", "lucide-react": "^0.331.0",
"next": "14.1.0", "next": "14.1.0",
"prettier": "^3.2.5", "prettier": "^3.2.5",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"react-hook-form": "^7.50.1",
"react-icons": "^5.0.1",
"react-resizable-panels": "^2.0.9", "react-resizable-panels": "^2.0.9",
"tailwind-merge": "^2.2.1", "tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
@ -33,14 +50,18 @@
"zod": "^3.22.4" "zod": "^3.22.4"
}, },
"devDependencies": { "devDependencies": {
"@types/bcrypt": "^5.0.2",
"@types/better-sqlite3": "^7.6.9",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"autoprefixer": "^10.0.1", "autoprefixer": "^10.0.1",
"drizzle-kit": "^0.20.14",
"eslint": "^8", "eslint": "^8",
"eslint-config-next": "14.1.0", "eslint-config-next": "14.1.0",
"postcss": "^8", "postcss": "^8",
"tailwindcss": "^3.3.0", "tailwindcss": "^3.3.0",
"tsx": "^4.7.1",
"typescript": "^5" "typescript": "^5"
} }
} }

1897
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

86
src/app/api/file/[...path]/route.ts Normal file
View File

@ -0,0 +1,86 @@
import { getFileExt } from "@/lib/utils";
import db from "@/server/db";
import { file } from "@/server/db/schema/file";
import { and, eq, isNull } from "drizzle-orm";
import { NextRequest } from "next/server";
const handler = async (req: NextRequest, { params }: any) => {
const path = params.path.join("/");
const { searchParams } = new URL(req.url);
const fileData = await db.query.file.findFirst({
where: and(eq(file.path, path), isNull(file.deletedAt)),
});
if (!fileData) {
return new Response("File not found!", { status: 404 });
}
let content = fileData.content || "";
if (searchParams.get("index") === "true") {
content = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Code-Share</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
${content}
<script>
if (window.parent !== window) {
const _log = console.log;
const _error = console.error;
const _warn = console.warn;
console.log = function (...args) {
parent.window.postMessage({ type: "log", args: args }, "*");
_log(...args);
};
console.error = function (...args) {
parent.window.postMessage({ type: "error", args: args }, "*");
_error(...args);
};
console.warn = function (...args) {
parent.window.postMessage({ type: "warn", args: args }, "*");
_warn(...args);
};
}
</script>
<script type="text/babel" src="script.js" data-type="module"></script>
</body>
</html>`;
}
return new Response(content, {
headers: {
"Content-Type": getFileMimetype(fileData.filename),
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET",
"Access-Control-Allow-Headers": "Content-Type, Authorization",
},
});
};
function getFileMimetype(filename: string) {
const ext = getFileExt(filename);
switch (ext) {
case "html":
return "text/html";
case "css":
return "text/css";
case "js":
case "jsx":
return "text/javascript";
}
return "application/octet-stream";
}
export { handler as GET };

18
src/app/globals.css
View File

@ -3,9 +3,25 @@
@tailwind utilities; @tailwind utilities;
body { body {
@apply bg-slate-400 text-white; @apply bg-slate-600 text-white;
} }
.cm-theme { .cm-theme {
font-size: 16px;
@apply h-full; @apply h-full;
} }
.cm-editor {
@apply py-2;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

3
src/app/layout.tsx
View File

@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import Providers from "./providers"; import Providers from "./providers";
import { IS_DEV } from "@/lib/consts";
import "./globals.css"; import "./globals.css";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -16,7 +17,7 @@ type Props = {
const RootLayout = ({ children }: Props) => { const RootLayout = ({ children }: Props) => {
return ( return (
<html lang="en" className="dark"> <html lang="en" className="dark" suppressHydrationWarning={IS_DEV}>
<body className={inter.className}> <body className={inter.className}>
<Providers>{children}</Providers> <Providers>{children}</Providers>
</body> </body>

296
src/app/page.tsx
View File

@ -1,85 +1,114 @@
"use client"; "use client";
import React, { useCallback, useEffect, useRef, useState } from "react"; import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { import {
ResizableHandle, ResizableHandle,
ResizablePanel, ResizablePanel,
ResizablePanelGroup, ResizablePanelGroup,
} from "@/components/ui/resizable"; } from "@/components/ui/resizable";
import { useMediaQuery } from "@/hooks/useMediaQuery"; import { useScreen } from "usehooks-ts";
import Panel from "@/components/ui/panel"; import Panel from "@/components/ui/panel";
import CodeEditor from "@/components/ui/code-editor";
import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
import prettier from "prettier/standalone"; import { cn } from "@/lib/utils";
import prettierHtmlPlugin from "prettier/plugins/html"; import Tabs, { Tab } from "@/components/ui/tabs";
import FilePreview from "@/components/containers/file-preview";
import trpc from "@/lib/trpc";
import CreateFileDialog from "@/components/containers/createfile-dialog";
import { useDisclose } from "@/hooks/useDisclose";
import { Button } from "@/components/ui/button";
import { FaFileAlt } from "react-icons/fa";
const HomePage = () => { const HomePage = () => {
const codeMirror = useRef<ReactCodeMirrorRef>(null);
const frameRef = useRef<HTMLIFrameElement>(null); const frameRef = useRef<HTMLIFrameElement>(null);
const [isMounted, setMounted] = useState(false); const [isMounted, setMounted] = useState(false);
const isMobile = useMediaQuery("(max-width: 639px)"); const screen = useScreen();
const [data, setData] = useState(""); const isPortrait = screen?.width < screen?.height;
const [lang, setLang] = useState("html");
useEffect(() => { const files = trpc.file.getAll.useQuery();
setMounted(true); const [curTabIdx, setCurTabIdx] = useState(0);
const [curOpenFiles, setOpenFiles] = useState<number[]>([]);
const createFileDlg = useDisclose();
const [iframeLogs, setIframeLogs] = useState<any[]>([]);
const refreshPreview = useCallback(() => {
if (frameRef.current) {
frameRef.current.src = `/api/file/index.html?index=true`;
}
setIframeLogs([]);
}, []); }, []);
useEffect(() => { useEffect(() => {
if (frameRef.current) { setMounted(true);
frameRef.current.srcdoc = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Code-Share</title>
</head>
<body>
${data}
</body>
</html>
`;
}
}, [data]);
const onFormat = useCallback(async () => { const onMessage = (event: MessageEvent<any>) => {
const cursor = codeMirror.current?.view?.state.selection.main.head || 0; const { data } = event;
if (!data) {
return;
}
const { formatted, cursorOffset } = await prettier.formatWithCursor(data, { if (!["log", "warn", "error"].includes(data.type) || !data.args?.length) {
parser: "html", return;
plugins: [prettierHtmlPlugin], }
cursorOffset: cursor,
});
const cm = codeMirror.current?.view; if (data.args[0]?.includes("Babel transformer")) {
setData(formatted); return;
cm?.dispatch({ }
changes: { from: 0, to: cm?.state.doc.length, insert: formatted },
});
cm?.dispatch({
selection: { anchor: cursorOffset },
});
// setTimeout(() => { setIframeLogs((i) => [data, ...i]);
// }, 100); };
}, [data, setData]);
window.addEventListener("message", onMessage);
return () => {
window.removeEventListener("message", onMessage);
};
}, [setIframeLogs]);
useEffect(() => { useEffect(() => {
const handleKeyDown = (event: any) => { if (isMounted) {
if ((event.ctrlKey || event.metaKey) && event.key === "s") { refreshPreview();
event.preventDefault(); }
onFormat(); }, [isMounted]);
}
};
window.addEventListener("keydown", handleKeyDown); const onOpenFile = (fileId: number) => {
const idx = curOpenFiles.indexOf(fileId);
if (idx >= 0) {
return setCurTabIdx(idx);
}
return () => { setOpenFiles((state) => {
window.removeEventListener("keydown", handleKeyDown); setCurTabIdx(state.length);
}; return [...state, fileId];
}, [onFormat]); });
};
const onFileChange = (_fileId: number) => {
refreshPreview();
};
useEffect(() => {
if (files.data && files.data?.length > 0 && !curOpenFiles.length) {
files.data.forEach((file) => onOpenFile(file.id));
}
}, [files.data]);
const openFileList = useMemo(() => {
return curOpenFiles.map((fileId) => {
const fileData = files.data?.find((i) => i.id === fileId);
return {
title: fileData?.filename || "...",
render: () => (
<FilePreview id={fileId} onFileChange={() => onFileChange(fileId)} />
),
};
}) satisfies Tab[];
}, [curOpenFiles, files]);
if (!isMounted) { if (!isMounted) {
return null; return null;
@ -88,58 +117,139 @@ const HomePage = () => {
return ( return (
<ResizablePanelGroup <ResizablePanelGroup
autoSaveId="main-panel" autoSaveId="main-panel"
direction={isMobile ? "vertical" : "horizontal"} direction={isPortrait ? "vertical" : "horizontal"}
className="w-full !h-dvh" className="w-full !h-dvh"
> >
<ResizablePanel <ResizablePanel
defaultSize={isMobile ? 50 : 60} defaultSize={isPortrait ? 50 : 60}
minSize={20} collapsible
className="p-4 pr-0" collapsedSize={0}
minSize={isPortrait ? 10 : 30}
> >
<Panel> <div
<ResizablePanelGroup className={cn(
autoSaveId="editor-panel" "w-full h-full p-2 pb-0",
direction="horizontal" !isPortrait ? "p-4 pb-4 pr-0" : ""
className="border-t border-t-slate-900" )}
> >
<ResizablePanel <Panel>
defaultSize={25} <ResizablePanelGroup
minSize={10} autoSaveId="veditor-panel"
collapsible direction="horizontal"
collapsedSize={0}
className="bg-[#1e2536]"
> >
File List <ResizablePanel
</ResizablePanel> defaultSize={isPortrait ? 0 : 25}
<ResizableHandle className="bg-slate-900" /> minSize={10}
<ResizablePanel defaultSize={75}> collapsible
<button onClick={() => setLang("html")}>HTML</button> collapsedSize={0}
<button onClick={() => setLang("css")}>CSS</button> className="bg-[#1e2536]"
<button onClick={() => setLang("js")}>Javascript</button> >
<button onClick={onFormat}>Format</button> <div className="h-10 flex items-center pl-3">
<p className="text-xs uppercase truncate flex-1">
My Project
</p>
<Button
variant="ghost"
size="sm"
className="text-slate-400 text-xs"
onClick={() => createFileDlg.onOpen()}
>
<FaFileAlt />
</Button>
</div>
<div className="flex flex-col items-stretch">
{files.data?.map((file) => (
<button
key={file.id}
className="text-slate-400 hover:text-white transition-colors text-sm flex items-center px-3 py-1.5"
onClick={() => onOpenFile(file.id)}
>
{file.filename}
</button>
))}
</div>
<CodeEditor <CreateFileDialog
ref={codeMirror} disclose={createFileDlg}
lang={lang} onSuccess={(file, type) => {
value={data} files.refetch();
onChange={setData} if (type === "create") {
/> onOpenFile(file.id);
</ResizablePanel> }
</ResizablePanelGroup> }}
</Panel> />
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={isPortrait ? 100 : 75}>
<ResizablePanelGroup direction="vertical">
<ResizablePanel defaultSize={100} minSize={20}>
<Tabs
tabs={openFileList}
current={curTabIdx}
onChange={setCurTabIdx}
/>
</ResizablePanel>
{!isPortrait ? (
<>
<ResizableHandle />
<ResizablePanel
defaultSize={0}
collapsible
collapsedSize={0}
minSize={10}
>
<div className="pt-2 h-full border-t border-slate-700">
<div className="flex flex-col-reverse overflow-y-auto items-stretch h-full font-mono text-slate-400">
{iframeLogs.map((item, idx) => (
<p
key={idx}
className="text-xs border-b border-slate-900 first:border-b-0 px-2 py-1"
>
{item.args
?.map((arg: any) => {
if (typeof arg === "object") {
return JSON.stringify(arg, null, 2);
}
return arg;
})
.join(" ")}
</p>
))}
</div>
</div>
</ResizablePanel>
</>
) : null}
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
</Panel>
</div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle className="bg-transparent hover:bg-slate-500 transition-colors mx-1 my-4 w-2 rounded-lg" /> <ResizableHandle
withHandle
className="bg-transparent hover:bg-slate-500 transition-colors md:mx-1 w-2 data-[panel-group-direction=vertical]:h-2 rounded-lg"
/>
<ResizablePanel <ResizablePanel
defaultSize={isMobile ? 50 : 40} defaultSize={isPortrait ? 50 : 40}
collapsible collapsible
collapsedSize={0} collapsedSize={0}
minSize={10} minSize={10}
> >
<div className="w-full h-full p-4 pl-0"> <div
className={cn(
"w-full h-full p-2 pt-0",
!isPortrait ? "p-4 pt-4 pl-0" : ""
)}
>
<Panel> <Panel>
<iframe <iframe
ref={frameRef} ref={frameRef}
className="border-none w-full h-full bg-white" className="border-none w-full h-full bg-white"
sandbox="allow-scripts"
/> />
</Panel> </Panel>
</div> </div>

84
src/components/containers/createfile-dialog.tsx Normal file
View File

@ -0,0 +1,84 @@
import React, { useMemo } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
import { UseDiscloseReturn } from "@/hooks/useDisclose";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { useForm } from "@/hooks/useForm";
import { z } from "zod";
import FormErrorMessage from "../ui/form-error-message";
import trpc from "@/lib/trpc";
import type { FileSchema } from "@/server/db/schema/file";
type Props = {
disclose: UseDiscloseReturn;
onSuccess?: (file: FileSchema, type: "create" | "update") => void;
};
const fileSchema = z.object({
id: z.number().optional(),
parentId: z.number().optional(),
filename: z.string().min(1),
});
const defaultValues: z.infer<typeof fileSchema> = {
filename: "",
};
const CreateFileDialog = ({ disclose, onSuccess }: Props) => {
const form = useForm(fileSchema, disclose.data || defaultValues);
const create = trpc.file.create.useMutation({
onSuccess(data) {
if (onSuccess) onSuccess(data, "create");
disclose.onClose();
},
});
const update = trpc.file.update.useMutation({
onSuccess(data) {
if (onSuccess) onSuccess(data, "update");
disclose.onClose();
},
});
const onSubmit = form.handleSubmit((values) => {
if (update.isPending || create.isPending) {
return;
}
if (values.id) {
update.mutate({ id: values.id!, ...values });
} else {
create.mutate(values);
}
});
return (
<Dialog open={disclose.isOpen} onOpenChange={disclose.onChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>Create File</DialogTitle>
</DialogHeader>
<form onSubmit={onSubmit}>
<FormErrorMessage form={form} />
<Input
placeholder="Filename"
autoFocus
{...form.register("filename")}
/>
<div className="flex justify-end gap-4 mt-4">
<Button size="sm" variant="ghost">
Cancel
</Button>
<Button type="submit" size="sm">
Submit
</Button>
</div>
</form>
</DialogContent>
</Dialog>
);
};
export default CreateFileDialog;

48
src/components/containers/file-preview.tsx Normal file
View File

@ -0,0 +1,48 @@
"use client";
import { getFileExt } from "@/lib/utils";
import React from "react";
import CodeEditor from "../ui/code-editor";
import trpc from "@/lib/trpc";
type Props = {
id: number;
onFileChange?: () => void;
};
const FilePreview = ({ id, onFileChange }: Props) => {
const type = "text";
const { data, isLoading, refetch } = trpc.file.getById.useQuery(id);
const updateFileContent = trpc.file.update.useMutation({
onSuccess: () => {
if (onFileChange) onFileChange();
refetch();
},
});
if (isLoading) {
return <p>Loading...</p>;
}
if (!data) {
return <p>File not found.</p>;
}
const { filename } = data;
if (type === "text") {
const ext = getFileExt(filename);
return (
<CodeEditor
lang={ext}
value={data?.content || ""}
formatOnSave
onChange={(val) => updateFileContent.mutate({ id, content: val })}
/>
);
}
return null;
};
export default FilePreview;

62
src/components/ui/button.tsx Normal file
View File

@ -0,0 +1,62 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
{
variants: {
variant: {
default:
"bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
destructive:
"bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
outline:
"border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
secondary:
"bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
ghost:
"hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(
{ className, variant, size, type = "button", asChild = false, ...props },
ref
) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
type={type}
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = "Button";
export { Button, buttonVariants };

136
src/components/ui/code-editor.tsx
View File

@ -1,44 +1,90 @@
/* eslint-disable react/display-name */ /* eslint-disable react/display-name */
import ReactCodeMirror, { EditorView } from "@uiw/react-codemirror"; import ReactCodeMirror, {
EditorView,
ReactCodeMirrorRef,
keymap,
} from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript"; import { javascript } from "@codemirror/lang-javascript";
import { css } from "@codemirror/lang-css"; import { css } from "@codemirror/lang-css";
import { html } from "@codemirror/lang-html"; import { html } from "@codemirror/lang-html";
import { forwardRef, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night"; import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
import { useDebounceCallback } from "usehooks-ts"; import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
import prettier from "prettier/standalone";
import prettierHtmlPlugin from "prettier/plugins/html";
import prettierCssPlugin from "prettier/plugins/postcss";
import prettierBabelPlugin from "prettier/plugins/babel";
import * as prettierPluginEstree from "prettier/plugins/estree";
import { abbreviationTracker } from "@emmetio/codemirror6-plugin";
import { useDebounce } from "@/hooks/useDebounce";
type Props = { type Props = {
lang?: string; lang?: string;
value: string; value: string;
onChange: (val: string) => void; onChange: (val: string) => void;
formatOnSave?: boolean;
}; };
const CodeEditor = forwardRef(({ lang, value, onChange }: Props, ref: any) => { const CodeEditor = (props: Props) => {
const codeMirror = useRef<ReactCodeMirrorRef>(null);
const { lang, value, formatOnSave, onChange } = props;
const [data, setData] = useState(value); const [data, setData] = useState(value);
const debounceValue = useDebounceCallback(onChange, 100); const [debounceChange, resetDebounceChange] = useDebounce(onChange, 3000);
const langMetadata = useMemo(() => getLangMetadata(lang || "plain"), [lang]);
const extensions = useMemo(() => { const onSave = useCallback(async () => {
const e: any[] = []; try {
const cm = codeMirror.current?.view;
const content = cm ? cm.state.doc.toString() : data;
const formatter = langMetadata.formatter;
switch (lang) { if (formatOnSave && cm && formatter != null) {
case "html": const [parser, ...plugins] = formatter;
e.push(html({ selfClosingTags: true })); const cursor = cm.state.selection.main.head || 0;
case "css": const { formatted, cursorOffset } = await prettier.formatWithCursor(
e.push(css()); content,
case "jsx": {
case "js": parser,
case "ts": plugins,
case "tsx": cursorOffset: cursor,
e.push( }
javascript({
jsx: ["jsx", "tsx"].includes(lang),
typescript: ["tsx", "ts"].includes(lang),
})
); );
setData(formatted);
onChange(formatted);
if (cm) {
cm.dispatch({
changes: { from: 0, to: cm?.state.doc.length, insert: formatted },
});
cm.dispatch({
selection: { anchor: cursorOffset },
});
}
} else {
onChange(content);
}
} catch (err) {
console.log("prettier error", err);
} }
return e; setTimeout(() => resetDebounceChange(), 100);
}, [lang]); }, [data, setData, formatOnSave, langMetadata, resetDebounceChange]);
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === "s") {
e.preventDefault();
e.stopPropagation();
onSave();
}
};
window.addEventListener("keydown", handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, [onSave]);
useEffect(() => { useEffect(() => {
setData(value); setData(value);
@ -46,17 +92,53 @@ const CodeEditor = forwardRef(({ lang, value, onChange }: Props, ref: any) => {
return ( return (
<ReactCodeMirror <ReactCodeMirror
ref={ref} ref={codeMirror}
extensions={[EditorView.lineWrapping, ...extensions]} extensions={[
EditorView.lineWrapping,
...langMetadata.extensions,
keymap.of(vscodeKeymap),
]}
indentWithTab={false}
basicSetup={{ defaultKeymap: false }}
value={data} value={data}
onChange={(val) => { onChange={(val) => {
setData(val); setData(val);
debounceValue(val); debounceChange(val);
}} }}
height="100%" height="100%"
theme={tokyoNight} theme={tokyoNight}
/> />
); );
}); };
function getLangMetadata(lang: string) {
let extensions: any[] = [];
let formatter: any = null;
switch (lang) {
case "html":
extensions = [html({ selfClosingTags: true }), abbreviationTracker()];
formatter = ["html", prettierHtmlPlugin];
break;
case "css":
extensions = [css()];
formatter = ["css", prettierCssPlugin];
break;
case "jsx":
case "js":
case "ts":
case "tsx":
extensions = [
javascript({
jsx: ["jsx", "tsx"].includes(lang),
typescript: ["tsx", "ts"].includes(lang),
}),
];
formatter = ["babel", prettierBabelPlugin, prettierPluginEstree];
break;
}
return { extensions, formatter };
}
export default CodeEditor; export default CodeEditor;

122
src/components/ui/dialog.tsx Normal file
View File

@ -0,0 +1,122 @@
"use client";
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 md:p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:rounded-xl dark:border-slate-800 dark:bg-slate-950",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
);
DialogHeader.displayName = "DialogHeader";
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
);
DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
{...props}
/>
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
};

25
src/components/ui/form-error-message.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useForm } from "@/hooks/useForm";
import { FieldValues } from "react-hook-form";
import React from "react";
type Props<T extends FieldValues> = {
form: ReturnType<typeof useForm<T>>;
};
const FormErrorMessage = <T extends FieldValues>({ form }: Props<T>) => {
const { errors } = form.formState;
const error = Object.entries(errors)[0];
if (!error) {
return null;
}
const [key, { message }] = error as any;
return (
<div className="bg-slate-800 border border-slate-600 rounded-md px-4 py-2 text-sm mb-4">
{`${key}: ${message}`}
</div>
);
};
export default FormErrorMessage;

25
src/components/ui/input.tsx Normal file
View File

@ -0,0 +1,25 @@
import * as React from "react"
import { cn } from "@/lib/utils"
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }

6
src/components/ui/panel.tsx
View File

@ -6,13 +6,13 @@ type Props = {
const Panel = ({ children }: Props) => { const Panel = ({ children }: Props) => {
return ( return (
<div className="bg-slate-800 rounded-lg pt-9 w-full h-full relative shadow-lg overflow-hidden"> <div className="bg-slate-800 rounded-lg w-full h-full flex flex-col items-stretch shadow-lg overflow-hidden">
<div className="flex gap-2 absolute top-3 left-4"> <div className="flex gap-2 py-3 px-4">
<div className="bg-red-500 rounded-full h-3 w-3" /> <div className="bg-red-500 rounded-full h-3 w-3" />
<div className="bg-yellow-500 rounded-full h-3 w-3" /> <div className="bg-yellow-500 rounded-full h-3 w-3" />
<div className="bg-green-500 rounded-full h-3 w-3" /> <div className="bg-green-500 rounded-full h-3 w-3" />
</div> </div>
{children} <div className="flex-1 overflow-hidden">{children}</div>
</div> </div>
); );
}; };

2
src/components/ui/resizable.tsx
View File

@ -29,7 +29,7 @@ const ResizableHandle = ({
}) => ( }) => (
<ResizablePrimitive.PanelResizeHandle <ResizablePrimitive.PanelResizeHandle
className={cn( className={cn(
"relative flex w-px items-center justify-center bg-slate-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", "relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
className className
)} )}
{...props} {...props}

78
src/components/ui/tabs.tsx Normal file
View File

@ -0,0 +1,78 @@
import { cn, getFileExt } from "@/lib/utils";
import React, { useMemo, useState } from "react";
export type Tab = {
title: string;
icon?: React.ReactNode;
render?: () => React.ReactNode;
};
type Props = {
tabs: Tab[];
current?: number;
onChange?: (idx: number) => void;
};
const Tabs = ({ tabs, current = 0, onChange }: Props) => {
const tabView = useMemo(() => {
const tab = tabs[current];
const element = tab?.render ? tab.render() : null;
return element;
}, [tabs, current]);
return (
<div className="w-full h-full flex flex-col items-stretch bg-slate-800">
{tabs.length > 0 ? (
<nav className="flex items-stretch overflow-x-auto w-full h-10 min-h-10 hide-scrollbar">
{tabs.map((tab, idx) => (
<TabItem
key={idx}
title={tab.title}
icon={tab.icon}
isActive={idx === current}
onSelect={() => onChange && onChange(idx)}
onClose={() => {}}
/>
))}
</nav>
) : null}
<main className="flex-1 overflow-hidden">{tabView}</main>
</div>
);
};
type TabItemProps = {
title: string;
icon?: React.ReactNode;
isActive?: boolean;
onSelect: () => void;
onClose: () => void;
};
const TabItem = ({
title,
icon,
isActive,
onSelect,
onClose,
}: TabItemProps) => {
const lastDotFile = title.lastIndexOf(".");
const ext = title.substring(lastDotFile);
const filename = title.substring(0, lastDotFile);
return (
<button
className={cn(
"border-b-2 border-transparent text-white text-center max-w-[140px] md:max-w-[180px] px-4 text-sm flex items-center gap-0 relative z-[1]",
isActive ? "border-slate-500" : ""
)}
onClick={onSelect}
>
<span className="truncate">{filename}</span>
<span>{ext}</span>
</button>
);
};
export default Tabs;

26
src/hooks/useDebounce.ts Normal file
View File

@ -0,0 +1,26 @@
import { useCallback, useRef } from "react";
export const useDebounce = (fn: Function, delay = 500) => {
const timerRef = useRef<any>(null);
const cancel = useCallback(() => {
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = null;
}
}, []);
const debounce = useCallback(
(...params: any[]) => {
cancel();
timerRef.current = setTimeout(() => {
fn(...params);
timerRef.current = null;
}, delay);
},
[fn, delay, cancel]
);
return [debounce, cancel] as [typeof debounce, typeof cancel];
};

22
src/hooks/useDisclose.ts Normal file
View File

@ -0,0 +1,22 @@
import { useCallback, useState } from "react";
export const useDisclose = () => {
const [isOpen, setOpen] = useState(false);
const [data, setData] = useState<any>(null);
const onOpen = useCallback(
(_data?: any) => {
setOpen(true);
setData(data);
},
[setOpen]
);
const onClose = useCallback(() => {
setOpen(false);
}, [setOpen]);
return { isOpen, onOpen, onClose, onChange: setOpen, data };
};
export type UseDiscloseReturn = ReturnType<typeof useDisclose>;

22
src/hooks/useForm.ts Normal file
View File

@ -0,0 +1,22 @@
import { z } from "zod";
import { useForm as useHookForm, FieldValues } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
export const useForm = <T extends FieldValues>(
schema: z.ZodSchema<T>,
initialValues?: Partial<T>
) => {
const form = useHookForm<T>({
resolver: zodResolver(schema),
defaultValues: initialValues as never,
});
useEffect(() => {
if (initialValues) {
form.reset(initialValues as never);
}
}, [initialValues, form.reset]);
return form;
};

95
src/hooks/useMediaQuery.ts
View File

@ -1,95 +0,0 @@
import { useState } from "react";
import { useIsomorphicLayoutEffect } from "usehooks-ts";
type UseMediaQueryOptions = {
defaultValue?: boolean;
initializeWithValue?: boolean;
};
const IS_SERVER = typeof window === "undefined";
export function useMediaQuery(
query: string,
options?: UseMediaQueryOptions
): boolean;
/**
* Custom hook for tracking the state of a media query.
* @deprecated - this useMediaQuery's signature is deprecated, it now accepts an query parameter and an options object.
* @param {string} query - The media query to track.
* @param {?boolean} [defaultValue] - The default value to return if the hook is being run on the server (default is `false`).
* @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
* @see [Documentation](https://usehooks-ts.com/react-hook/use-media-query)
* @see [MDN Match Media](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
* @example
* const isSmallScreen = useMediaQuery('(max-width: 600px)');
* // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
*/
export function useMediaQuery(query: string, defaultValue: boolean): boolean; // defaultValue should be false by default
/**
* Custom hook for tracking the state of a media query.
* @param {string} query - The media query to track.
* @param {boolean | ?UseMediaQueryOptions} [options] - The default value to return if the hook is being run on the server (default is `false`).
* @param {?boolean} [options.defaultValue] - The default value to return if the hook is being run on the server (default is `false`).
* @param {?boolean} [options.initializeWithValue] - If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
* @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
* @see [Documentation](https://usehooks-ts.com/react-hook/use-media-query)
* @see [MDN Match Media](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
* @example
* const isSmallScreen = useMediaQuery('(max-width: 600px)');
* // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
*/
export function useMediaQuery(
query: string,
options?: boolean | UseMediaQueryOptions
): boolean {
// TODO: Refactor this code after the deprecated signature has been removed.
const defaultValue =
typeof options === "boolean" ? options : options?.defaultValue ?? false;
const initializeWithValue =
typeof options === "boolean"
? undefined
: options?.initializeWithValue ?? undefined;
const [matches, setMatches] = useState<boolean>(() => {
if (initializeWithValue) {
return getMatches(query);
}
return defaultValue;
});
const getMatches = (query: string): boolean => {
if (IS_SERVER) {
return defaultValue;
}
return window.matchMedia(query).matches;
};
/** Handles the change event of the media query. */
function handleChange() {
setMatches(getMatches(query));
}
useIsomorphicLayoutEffect(() => {
const matchMedia = window.matchMedia(query);
// Triggered at the first client-side load and if query changes
handleChange();
// Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
if (matchMedia.addListener) {
matchMedia.addListener(handleChange);
} else {
matchMedia.addEventListener("change", handleChange);
}
return () => {
if (matchMedia.removeListener) {
matchMedia.removeListener(handleChange);
} else {
matchMedia.removeEventListener("change", handleChange);
}
};
}, [query]);
return matches;
}

1
src/lib/consts.ts Normal file
View File

@ -0,0 +1 @@
export const IS_DEV = process.env.NODE_ENV === "development";

10
src/lib/utils.ts
View File

@ -1,6 +1,10 @@
import { type ClassValue, clsx } from "clsx" import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge" import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs));
}
export function getFileExt(filename: string) {
return filename.substring(filename.lastIndexOf(".") + 1);
} }

26
src/server/db/drizzle/0000_loud_hex.sql Normal file
View File

@ -0,0 +1,26 @@
CREATE TABLE `files` (
`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
`parent_id` integer,
`user_id` integer NOT NULL,
`path` text NOT NULL,
`filename` text NOT NULL,
`is_directory` integer DEFAULT false NOT NULL,
`is_file` integer DEFAULT false NOT NULL,
`content` text,
`created_at` text DEFAULT CURRENT_TIMESTAMP NOT NULL,
`deleted_at` text,
FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action,
FOREIGN KEY (`parent_id`) REFERENCES `files`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE TABLE `users` (
`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
`email` text NOT NULL,
`password` text NOT NULL,
`created_at` text DEFAULT CURRENT_TIMESTAMP NOT NULL,
`deleted_at` text
);
--> statement-breakpoint
CREATE UNIQUE INDEX `files_path_unique` ON `files` (`path`);--> statement-breakpoint
CREATE UNIQUE INDEX `files_filename_unique` ON `files` (`filename`);--> statement-breakpoint
CREATE UNIQUE INDEX `users_email_unique` ON `users` (`email`);

191
src/server/db/drizzle/meta/0000_snapshot.json Normal file
View File

@ -0,0 +1,191 @@
{
"version": "5",
"dialect": "sqlite",
"id": "30eeec75-2990-42f2-a773-b55bfa0a4c0a",
"prevId": "00000000-0000-0000-0000-000000000000",
"tables": {
"files": {
"name": "files",
"columns": {
"id": {
"name": "id",
"type": "integer",
"primaryKey": true,
"notNull": true,
"autoincrement": true
},
"parent_id": {
"name": "parent_id",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"path": {
"name": "path",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"filename": {
"name": "filename",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"is_directory": {
"name": "is_directory",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": false
},
"is_file": {
"name": "is_file",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": false
},
"content": {
"name": "content",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "CURRENT_TIMESTAMP"
},
"deleted_at": {
"name": "deleted_at",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {
"files_path_unique": {
"name": "files_path_unique",
"columns": [
"path"
],
"isUnique": true
},
"files_filename_unique": {
"name": "files_filename_unique",
"columns": [
"filename"
],
"isUnique": true
}
},
"foreignKeys": {
"files_user_id_users_id_fk": {
"name": "files_user_id_users_id_fk",
"tableFrom": "files",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
},
"parent_id_fk": {
"name": "parent_id_fk",
"tableFrom": "files",
"tableTo": "files",
"columnsFrom": [
"parent_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {}
},
"users": {
"name": "users",
"columns": {
"id": {
"name": "id",
"type": "integer",
"primaryKey": true,
"notNull": true,
"autoincrement": true
},
"email": {
"name": "email",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"password": {
"name": "password",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "CURRENT_TIMESTAMP"
},
"deleted_at": {
"name": "deleted_at",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {
"users_email_unique": {
"name": "users_email_unique",
"columns": [
"email"
],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {}
}
},
"enums": {},
"_meta": {
"schemas": {},
"tables": {},
"columns": {}
}
}

13
src/server/db/drizzle/meta/_journal.json Normal file
View File

@ -0,0 +1,13 @@
{
"version": "5",
"dialect": "sqlite",
"entries": [
{
"idx": 0,
"version": "5",
"when": 1708329026876,
"tag": "0000_loud_hex",
"breakpoints": true
}
]
}

9
src/server/db/index.ts Normal file
View File

@ -0,0 +1,9 @@
import { drizzle } from "drizzle-orm/better-sqlite3";
import path from "node:path";
import Database from "better-sqlite3";
import * as schema from "./schema/_schema";
const sqlite = new Database(path.join(process.cwd(), "storage/database.db"));
const db = drizzle(sqlite, { schema });
export default db;

5
src/server/db/migrate.ts Normal file
View File

@ -0,0 +1,5 @@
import { migrate } from "drizzle-orm/better-sqlite3/migrator";
import db from "./index";
migrate(db, { migrationsFolder: __dirname + "/drizzle" });
process.exit();

2
src/server/db/schema/_schema.ts Normal file
View File

@ -0,0 +1,2 @@
export { user } from "./user";
export { file } from "./file";

44
src/server/db/schema/file.ts Normal file
View File

@ -0,0 +1,44 @@
import { sql } from "drizzle-orm";
import {
integer,
sqliteTable,
text,
foreignKey,
} from "drizzle-orm/sqlite-core";
import { createInsertSchema, createSelectSchema } from "drizzle-zod";
import { z } from "zod";
import { user } from "./user";
export const file = sqliteTable(
"files",
{
id: integer("id").primaryKey({ autoIncrement: true }),
parentId: integer("parent_id"),
userId: integer("user_id")
.notNull()
.references(() => user.id),
path: text("path").notNull().unique(),
filename: text("filename").notNull().unique(),
isDirectory: integer("is_directory", { mode: "boolean" })
.notNull()
.default(false),
isFile: integer("is_file", { mode: "boolean" }).notNull().default(false),
content: text("content"),
createdAt: text("created_at")
.notNull()
.default(sql`CURRENT_TIMESTAMP`),
deletedAt: text("deleted_at"),
},
(table) => ({
parentFk: foreignKey({
columns: [table.parentId],
foreignColumns: [table.id],
name: "parent_id_fk",
}),
})
);
export const insertFileSchema = createInsertSchema(file);
export const selectFileSchema = createSelectSchema(file);
export type FileSchema = z.infer<typeof selectFileSchema>;

19
src/server/db/schema/user.ts Normal file
View File

@ -0,0 +1,19 @@
import { sql } from "drizzle-orm";
import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
import { createInsertSchema, createSelectSchema } from "drizzle-zod";
import { z } from "zod";
export const user = sqliteTable("users", {
id: integer("id").primaryKey({ autoIncrement: true }),
email: text("email").notNull().unique(),
password: text("password").notNull(),
createdAt: text("created_at")
.notNull()
.default(sql`CURRENT_TIMESTAMP`),
deletedAt: text("deleted_at"),
});
export const insertUserSchema = createInsertSchema(user);
export const selectUserSchema = createSelectSchema(user);
export type UserSchema = z.infer<typeof selectUserSchema>;

39
src/server/db/seed.ts Normal file
View File

@ -0,0 +1,39 @@
import db from ".";
import { hashPassword } from "../lib/crypto";
import { file } from "./schema/file";
import { user } from "./schema/user";
const main = async () => {
const [adminUser] = await db
.insert(user)
.values({
email: "admin@mail.com",
password: await hashPassword("123456"),
})
.returning();
await db.insert(file).values([
{
userId: adminUser.id,
path: "index.html",
filename: "index.html",
content: "<p>Hello world!</p>",
},
{
userId: adminUser.id,
path: "styles.css",
filename: "styles.css",
content: "body { padding: 16px; }",
},
{
userId: adminUser.id,
path: "script.js",
filename: "script.js",
content: "console.log('hello world!');",
},
]);
process.exit();
};
main();

13
src/server/lib/crypto.ts Normal file
View File

@ -0,0 +1,13 @@
import bcrypt from "bcrypt";
export const hashPassword = (password: string) => {
return bcrypt.hash(password, 10);
};
export const verifyPassword = async (hash: string, password: string) => {
try {
return await bcrypt.compare(password, hash);
} catch (err) {
return false;
}
};

16
src/server/routers/_app.ts
View File

@ -1,18 +1,8 @@
import { z } from "zod"; import { router } from "../trpc";
import { procedure, router } from "../trpc"; import file from "./file";
export const appRouter = router({ export const appRouter = router({
hello: procedure file,
.input(
z.object({
text: z.string(),
})
)
.query((opts) => {
return {
greeting: `hello ${opts.input.text}`,
};
}),
}); });
// export type definition of API // export type definition of API

49
src/server/routers/file.ts Normal file
View File

@ -0,0 +1,49 @@
import { and, eq, isNull } from "drizzle-orm";
import db from "../db";
import { procedure, router } from "../trpc";
import { file, insertFileSchema, selectFileSchema } from "../db/schema/file";
import { z } from "zod";
const fileRouter = router({
getAll: procedure.query(async () => {
const files = await db.query.file.findMany({
where: and(isNull(file.deletedAt)),
columns: { content: false },
});
return files;
}),
getById: procedure.input(z.number()).query(async ({ input }) => {
return db.query.file.findFirst({
where: and(eq(file.id, input), isNull(file.deletedAt)),
});
}),
create: procedure
.input(insertFileSchema.pick({ parentId: true, filename: true }))
.mutation(async ({ input }) => {
const data: z.infer<typeof insertFileSchema> = {
userId: 1,
parentId: input.parentId,
path: input.filename,
filename: input.filename,
};
const [result] = await db.insert(file).values(data).returning();
return result;
}),
update: procedure
.input(selectFileSchema.partial().required({ id: true }))
.mutation(async ({ input }) => {
const [result] = await db
.update(file)
.set(input)
.where(and(eq(file.id, input.id), isNull(file.deletedAt)))
.returning();
return result;
}),
});
export default fileRouter;

0
storage/.gitkeep Normal file
View File