doclific 0.2.0 → 0.2.2

package/frontend/src/hooks/use-upload-file.ts

@@ -1,128 +0,0 @@
-import * as React from 'react';
-
-import type { OurFileRouter } from '@/lib/uploadthing';
-import type {
-  ClientUploadedFileData,
-  UploadFilesOptions,
-} from 'uploadthing/types';
-
-import { generateReactHelpers } from '@uploadthing/react';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-export type UploadedFile<T = unknown> = ClientUploadedFileData<T>;
-
-interface UseUploadFileProps
-  extends Pick<
-    UploadFilesOptions<OurFileRouter['editorUploader']>,
-    'headers' | 'onUploadBegin' | 'onUploadProgress' | 'skipPolling'
-  > {
-  onUploadComplete?: (file: UploadedFile) => void;
-  onUploadError?: (error: unknown) => void;
-}
-
-export function useUploadFile({
-  onUploadComplete,
-  onUploadError,
-  ...props
-}: UseUploadFileProps = {}) {
-  const [uploadedFile, setUploadedFile] = React.useState<UploadedFile>();
-  const [uploadingFile, setUploadingFile] = React.useState<File>();
-  const [progress, setProgress] = React.useState<number>(0);
-  const [isUploading, setIsUploading] = React.useState(false);
-
-  async function uploadThing(file: File) {
-    setIsUploading(true);
-    setUploadingFile(file);
-
-    try {
-      const res = await uploadFiles('editorUploader', {
-        ...props,
-        files: [file],
-        onUploadProgress: ({ progress }) => {
-          setProgress(Math.min(progress, 100));
-        },
-      });
-
-      setUploadedFile(res[0]);
-
-      onUploadComplete?.(res[0]);
-
-      return uploadedFile;
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-
-      const message =
-        errorMessage.length > 0
-          ? errorMessage
-          : 'Something went wrong, please try again later.';
-
-      toast.error(message);
-
-      onUploadError?.(error);
-
-      // Mock upload for unauthenticated users
-      // toast.info('User not logged in. Mocking upload process.');
-      const mockUploadedFile = {
-        key: 'mock-key-0',
-        appUrl: `https://mock-app-url.com/${file.name}`,
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        url: URL.createObjectURL(file),
-      } as UploadedFile;
-
-      // Simulate upload progress
-      let progress = 0;
-
-      const simulateProgress = async () => {
-        while (progress < 100) {
-          await new Promise((resolve) => setTimeout(resolve, 50));
-          progress += 2;
-          setProgress(Math.min(progress, 100));
-        }
-      };
-
-      await simulateProgress();
-
-      setUploadedFile(mockUploadedFile);
-
-      return mockUploadedFile;
-    } finally {
-      setProgress(0);
-      setIsUploading(false);
-      setUploadingFile(undefined);
-    }
-  }
-
-  return {
-    isUploading,
-    progress,
-    uploadedFile,
-    uploadFile: uploadThing,
-    uploadingFile,
-  };
-}
-
-export const { uploadFiles, useUploadThing } =
-  generateReactHelpers<OurFileRouter>();
-
-export function getErrorMessage(err: unknown) {
-  const unknownError = 'Something went wrong, please try again later.';
-
-  if (err instanceof z.ZodError) {
-    const errors = err.issues.map((issue) => issue.message);
-
-    return errors.join('\n');
-  }
-  if (err instanceof Error) {
-    return err.message;
-  }
-  return unknownError;
-}
-
-export function showErrorToast(err: unknown) {
-  const errorMessage = getErrorMessage(err);
-
-  return toast.error(errorMessage);
-}

package/frontend/src/index.css

@@ -1,128 +0,0 @@
-@import 'tailwindcss';
-
-@plugin 'tailwind-scrollbar-hide';
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-brand: var(--brand);
-  --color-highlight: var(--highlight);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-  --brand: oklch(0.623 0.214 259.815);
-  --highlight: oklch(0.852 0.199 91.936);
-}
-
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-  --brand: oklch(0.707 0.165 254.624);
-  --highlight: oklch(0.852 0.199 91.936);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/frontend/src/layout.tsx

@@ -1,42 +0,0 @@
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
-import { AppSidebar } from "@/components/app-sidebar"
-import { Separator } from "@radix-ui/react-separator"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { ModeToggle } from "./components/mode-toggle"
-import { LayoutHeader } from "./components/ui/layout-header"
-
-const queryClient = new QueryClient()
-
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-
-    return (
-        <QueryClientProvider client={queryClient}>
-            <SidebarProvider style={
-                {
-                    "--sidebar-width": "calc(var(--spacing) * 72)",
-                    "--header-height": "calc(var(--spacing) * 12)",
-                } as React.CSSProperties
-            }>
-                <AppSidebar />
-                <SidebarInset className="overflow-hidden">
-                    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
-                        <div className="flex w-full items-center justify-between gap-1 px-4 lg:gap-2 lg:px-6">
-                            <div className="flex items-center gap-1 lg:gap-2">
-                                <SidebarTrigger className="-ml-1" />
-                                <Separator
-                                    orientation="vertical"
-                                    className="mx-2 data-[orientation=vertical]:h-4"
-                                />
-                                <LayoutHeader />
-                            </div>
-
-                            <ModeToggle />
-                        </div>
-                    </header>
-                    {children}
-                </SidebarInset>
-            </SidebarProvider>
-        </QueryClientProvider>
-    )
-}

package/frontend/src/lib/markdown-joiner-transform.ts

@@ -1,239 +0,0 @@
-import type { TextStreamPart, ToolSet } from 'ai';
-
-/**
- * Transform chunks like [**,bold,**] to [**bold**] make the md deserializer
- * happy.
- *
- * @experimental
- */
-export const markdownJoinerTransform =
-  <TOOLS extends ToolSet>() =>
-  () => {
-    const joiner = new MarkdownJoiner();
-    let lastTextDeltaId: string | undefined;
-    let textStreamEnded = false;
-
-    return new TransformStream<TextStreamPart<TOOLS>, TextStreamPart<TOOLS>>({
-      async flush(controller) {
-        // Only flush if we haven't seen text-end yet
-        if (!textStreamEnded) {
-          const remaining = joiner.flush();
-          if (remaining && lastTextDeltaId) {
-            controller.enqueue({
-              id: lastTextDeltaId,
-              text: remaining,
-              type: 'text-delta',
-            } as TextStreamPart<TOOLS>);
-          }
-        }
-      },
-      async transform(chunk, controller) {
-        if (chunk.type === 'text-delta') {
-          lastTextDeltaId = chunk.id;
-          const processedText = joiner.processText(chunk.text);
-          if (processedText) {
-            controller.enqueue({
-              ...chunk,
-              text: processedText,
-            });
-            await delay(joiner.delayInMs);
-          }
-        } else if (chunk.type === 'text-end') {
-          // Flush any remaining buffer before text-end
-          const remaining = joiner.flush();
-          if (remaining && lastTextDeltaId) {
-            controller.enqueue({
-              id: lastTextDeltaId,
-              text: remaining,
-              type: 'text-delta',
-            } as TextStreamPart<TOOLS>);
-          }
-          textStreamEnded = true;
-          controller.enqueue(chunk);
-        } else {
-          controller.enqueue(chunk);
-        }
-      },
-    });
-  };
-
-const DEFAULT_DELAY_IN_MS = 10;
-const NEST_BLOCK_DELAY_IN_MS = 100;
-
-const BOLD_PATTERN = /\*\*.*?\*\*/;
-const CODE_LINE_PATTERN = /```[^\s]+/;
-const LINK_PATTERN = /^\[.*?\]\(.*?\)$/;
-const UNORDERED_LIST_PATTERN = /^[*-]\s+.+/;
-const TODO_LIST_PATTERN = /^[*-]\s+\[[ xX]\]\s+.+/;
-const ORDERED_LIST_PATTERN = /^\d+\.\s+.+/;
-const MDX_TAG_PATTERN = /<([A-Za-z][A-Za-z0-9\-_]*)>/;
-const DIGIT_PATTERN = /^[0-9]$/;
-
-export class MarkdownJoiner {
-  delayInMs = DEFAULT_DELAY_IN_MS;
-
-  private buffer = '';
-  private documentCharacterCount = 0;
-  private isBuffering = false;
-  private streamingCodeBlock = false;
-  private streamingLargeDocument = false;
-  private streamingTable = false;
-
-  private clearBuffer(): void {
-    this.buffer = '';
-    this.isBuffering = false;
-  }
-  private isCompleteBold(): boolean {
-    return BOLD_PATTERN.test(this.buffer);
-  }
-
-  private isCompleteCodeBlockEnd(): boolean {
-    return this.buffer.trimEnd() === '```';
-  }
-
-  private isCompleteCodeBlockStart(): boolean {
-    return CODE_LINE_PATTERN.test(this.buffer);
-  }
-
-  private isCompleteLink(): boolean {
-    return LINK_PATTERN.test(this.buffer);
-  }
-
-  private isCompleteList(): boolean {
-    if (UNORDERED_LIST_PATTERN.test(this.buffer) && this.buffer.includes('['))
-      return TODO_LIST_PATTERN.test(this.buffer);
-
-    return (
-      UNORDERED_LIST_PATTERN.test(this.buffer) ||
-      ORDERED_LIST_PATTERN.test(this.buffer) ||
-      TODO_LIST_PATTERN.test(this.buffer)
-    );
-  }
-
-  private isCompleteMdxTag(): boolean {
-    return MDX_TAG_PATTERN.test(this.buffer);
-  }
-
-  private isCompleteTableStart(): boolean {
-    return this.buffer.startsWith('|') && this.buffer.endsWith('|');
-  }
-
-  private isFalsePositive(char: string): boolean {
-    // when link is not complete, even if ths buffer is more than 30 characters, it is not a false positive
-    if (this.buffer.startsWith('[') && this.buffer.includes('http')) {
-      return false;
-    }
-
-    return char === '\n' || this.buffer.length > 30;
-  }
-
-  private isLargeDocumentStart(): boolean {
-    return this.documentCharacterCount > 2500;
-  }
-
-  private isListStartChar(char: string): boolean {
-    return char === '-' || char === '*' || DIGIT_PATTERN.test(char);
-  }
-
-  private isTableExisted(): boolean {
-    return this.buffer.length > 10 && !this.buffer.includes('|');
-  }
-
-  flush(): string {
-    const remaining = this.buffer;
-    this.clearBuffer();
-    return remaining;
-  }
-
-  processText(text: string): string {
-    let output = '';
-
-    for (const char of text) {
-      if (
-        this.streamingCodeBlock ||
-        this.streamingTable ||
-        this.streamingLargeDocument
-      ) {
-        this.buffer += char;
-
-        if (char === '\n') {
-          output += this.buffer;
-          this.clearBuffer();
-        }
-
-        if (this.isCompleteCodeBlockEnd() && this.streamingCodeBlock) {
-          this.streamingCodeBlock = false;
-          this.delayInMs = DEFAULT_DELAY_IN_MS;
-
-          output += this.buffer;
-          this.clearBuffer();
-        }
-
-        if (this.isTableExisted() && this.streamingTable) {
-          this.streamingTable = false;
-          this.delayInMs = DEFAULT_DELAY_IN_MS;
-
-          output += this.buffer;
-          this.clearBuffer();
-        }
-      } else if (this.isBuffering) {
-        this.buffer += char;
-
-        if (this.isCompleteCodeBlockStart()) {
-          this.delayInMs = NEST_BLOCK_DELAY_IN_MS;
-          this.streamingCodeBlock = true;
-          continue;
-        }
-
-        if (this.isCompleteTableStart()) {
-          this.delayInMs = NEST_BLOCK_DELAY_IN_MS;
-          this.streamingTable = true;
-          continue;
-        }
-
-        if (this.isLargeDocumentStart()) {
-          this.delayInMs = NEST_BLOCK_DELAY_IN_MS;
-          this.streamingLargeDocument = true;
-          continue;
-        }
-
-        if (
-          this.isCompleteBold() ||
-          this.isCompleteMdxTag() ||
-          this.isCompleteList() ||
-          this.isCompleteLink()
-        ) {
-          output += this.buffer;
-          this.clearBuffer();
-        } else if (this.isFalsePositive(char)) {
-          // False positive - flush buffer as raw text
-          output += this.buffer;
-          this.clearBuffer();
-        }
-        // Check if we should start buffering
-      } else if (
-        char === '*' ||
-        char === '<' ||
-        char === '`' ||
-        char === '|' ||
-        char === '[' ||
-        this.isListStartChar(char)
-      ) {
-        this.buffer = char;
-        this.isBuffering = true;
-      } else {
-        // Pass through character directly
-        output += char;
-      }
-    }
-
-    this.documentCharacterCount += text.length;
-    return output;
-  }
-}
-
-async function delay(delayInMs?: number | null): Promise<void> {
-  return delayInMs == null
-    ? Promise.resolve()
-    : new Promise((resolve) => setTimeout(resolve, delayInMs));
-}

package/frontend/src/lib/orpc.ts

@@ -1,13 +0,0 @@
-import type { RouterClient } from '@orpc/server';
-import { createORPCClient } from '@orpc/client';
-import { RPCLink } from '@orpc/client/fetch';
-import type { Router } from '../../../src/server/router';
-import { createTanstackQueryUtils } from '@orpc/tanstack-query';
-
-const link = new RPCLink({
-	url: `http://localhost:${window.env.PORT ?? 6767}/rpc`,
-	headers: { Authorization: window.localStorage.getItem('token') || '' },
-});
-
-export const orpc: RouterClient<Router> = createORPCClient(link);
-export const orpcTs = createTanstackQueryUtils(orpc);

package/frontend/src/lib/uploadthing.ts

@@ -1,19 +0,0 @@
-import type { FileRouter } from 'uploadthing/next';
-
-import { createUploadthing } from 'uploadthing/next';
-
-const f = createUploadthing();
-
-export const ourFileRouter = {
-  editorUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio'])
-    .middleware(() => ({}))
-    .onUploadComplete(({ file }) => ({
-      key: file.key,
-      name: file.name,
-      size: file.size,
-      type: file.type,
-      url: file.ufsUrl,
-    })),
-} satisfies FileRouter;
-
-export type OurFileRouter = typeof ourFileRouter;

package/frontend/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/frontend/src/main.tsx

@@ -1,13 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-import { BrowserRouter } from 'react-router'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </StrictMode>,
-)

package/frontend/src/pages/editor.tsx

@@ -1,44 +0,0 @@
-import { orpcTs } from "@/lib/orpc"
-import { useMutation, useQuery } from "@tanstack/react-query"
-import { useLocation } from "react-router"
-import MarkdownDemo from "@/components/markdown-to-slate-demo";
-
-export default function RTE() {
-
-    const { pathname } = useLocation()
-    const filePath = pathname.slice(1)
-    const docQuery = useQuery({
-        ...orpcTs.docs.getDoc.queryOptions({
-            input: {
-                filePath,
-            },
-        }),
-        enabled: true,
-    })
-
-    const updateDoc = useMutation({
-        ...orpcTs.docs.updateDoc.mutationOptions(),
-    })
-
-    const onUpdate = (content: string) => {
-        updateDoc.mutate({
-            filePath,
-            content,
-        })
-    }
-
-    return (
-        <div className="flex-1 relative">
-            <div className="absolute inset-0 overflow-y-auto">
-                <div className="max-w-4xl mx-auto w-full relative p-4">
-                    {docQuery.data && (
-                        <MarkdownDemo
-                            initialMarkdown={docQuery.data}
-                            onUpdate={onUpdate}
-                        />
-                    )}
-                </div>
-            </div>
-        </div>
-    )
-}

package/frontend/src/types/docs.d.ts

@@ -1,6 +0,0 @@
-export type FolderStructure = {
-	name: string;
-	title: string;
-	icon?: string;
-	children: FolderStructure[];
-};

package/frontend/src/types/global.d.ts

@@ -1,9 +0,0 @@
-declare global {
-	interface Window {
-		env: {
-			PORT: number | string;
-		};
-	}
-}
-
-export {};

package/frontend/src/types/router.d.ts

@@ -1,4 +0,0 @@
-// Type-only import to avoid pulling in backend implementation
-import type { Router } from '../../../src/server/router';
-
-export type { Router };

package/frontend/tsconfig.app.json

@@ -1,33 +0,0 @@
-{
-	"compilerOptions": {
-		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-		"target": "ES2022",
-		"useDefineForClassFields": true,
-		"lib": ["ES2022", "DOM", "DOM.Iterable"],
-		"module": "ESNext",
-		"types": ["vite/client", "node"],
-		"skipLibCheck": true,
-
-		/* Bundler mode */
-		"moduleResolution": "bundler",
-		"allowImportingTsExtensions": true,
-		"verbatimModuleSyntax": true,
-		"moduleDetection": "force",
-		"noEmit": true,
-		"jsx": "react-jsx",
-
-		/* Linting */
-		"strict": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"erasableSyntaxOnly": true,
-		"noFallthroughCasesInSwitch": true,
-		"noUncheckedSideEffectImports": true,
-		"baseUrl": ".",
-		"paths": {
-			"@/*": ["./src/*"]
-		}
-	},
-	"include": ["src"],
-	"exclude": ["../src", "node_modules"]
-}