├── .eslintrc.json ├── public ├── logo.png ├── sufi.png ├── loading-spinner.png ├── blank-document.svg ├── software-proposal.svg ├── project-proposal.svg ├── letter.svg ├── cover-letter.svg ├── resume.svg └── business-letter.svg ├── src ├── app │ ├── favicon.ico │ ├── documents │ │ ├── page.tsx │ │ └── [documentId] │ │ │ ├── loading.tsx │ │ │ ├── page.tsx │ │ │ ├── threads.tsx │ │ │ ├── document.tsx │ │ │ ├── actions.ts │ │ │ ├── avatar.tsx │ │ │ ├── inbox.tsx │ │ │ ├── room.tsx │ │ │ ├── document-input.tsx │ │ │ ├── editor.tsx │ │ │ └── ruler.tsx │ ├── (home) │ │ ├── page.tsx │ │ ├── navbar.tsx │ │ ├── document-row.tsx │ │ ├── document-menu.tsx │ │ ├── search-input.tsx │ │ ├── documents-table.tsx │ │ └── templates-gallery.tsx │ ├── layout.tsx │ ├── error.tsx │ ├── api │ │ └── liveblocks-auth │ │ │ └── route.ts │ └── globals.css ├── lib │ └── utils.ts ├── components │ ├── ui │ │ ├── aspect-ratio.tsx │ │ ├── skeleton.tsx │ │ ├── collapsible.tsx │ │ ├── textarea.tsx │ │ ├── label.tsx │ │ ├── input.tsx │ │ ├── separator.tsx │ │ ├── progress.tsx │ │ ├── toaster.tsx │ │ ├── sonner.tsx │ │ ├── checkbox.tsx │ │ ├── slider.tsx │ │ ├── switch.tsx │ │ ├── badge.tsx │ │ ├── hover-card.tsx │ │ ├── tooltip.tsx │ │ ├── popover.tsx │ │ ├── radio-group.tsx │ │ ├── avatar.tsx │ │ ├── toggle.tsx │ │ ├── alert.tsx │ │ ├── scroll-area.tsx │ │ ├── resizable.tsx │ │ ├── toggle-group.tsx │ │ ├── tabs.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── accordion.tsx │ │ ├── input-otp.tsx │ │ ├── breadcrumb.tsx │ │ ├── pagination.tsx │ │ ├── table.tsx │ │ ├── drawer.tsx │ │ ├── dialog.tsx │ │ ├── sheet.tsx │ │ ├── form.tsx │ │ ├── alert-dialog.tsx │ │ ├── toast.tsx │ │ ├── command.tsx │ │ ├── navigation-menu.tsx │ │ └── select.tsx │ ├── sufi-loader.tsx │ ├── fullscreen-loader.tsx │ ├── convex-client-provider.tsx │ ├── remove-dialog.tsx │ └── rename-dialog.tsx ├── hooks │ ├── use-search-param.ts │ ├── use-debounce.ts │ ├── use-mobile.tsx │ └── use-toast.ts ├── store │ └── use-editor-store.tsx ├── middleware.ts ├── extensions │ ├── font-size.ts │ └── line-height.ts └── constants │ └── templates.ts ├── next.config.ts ├── convex ├── auth.config.ts ├── _generated │ ├── api.js │ ├── api.d.ts │ ├── dataModel.d.ts │ ├── server.js │ └── server.d.ts ├── schema.ts └── documents.ts ├── postcss.config.mjs ├── .env.sample ├── components.json ├── .gitignore ├── tsconfig.json ├── liveblocks.config.ts ├── tailwind.config.ts ├── README.md └── package.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sufiprog/docs-clone/HEAD/public/logo.png -------------------------------------------------------------------------------- /public/sufi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sufiprog/docs-clone/HEAD/public/sufi.png -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sufiprog/docs-clone/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /public/loading-spinner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sufiprog/docs-clone/HEAD/public/loading-spinner.png -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /src/app/documents/page.tsx: -------------------------------------------------------------------------------- 1 | const DocumentsPage = () => { 2 | return ( 3 |
4 | Documents Page 5 |
6 | ); 7 | } 8 | 9 | export default DocumentsPage; -------------------------------------------------------------------------------- /convex/auth.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | providers: [ 3 | { 4 | domain: "https://cool-drake-84.clerk.accounts.dev", 5 | applicationID: "convex", 6 | } 7 | ] 8 | } -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /src/components/ui/aspect-ratio.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" 4 | 5 | const AspectRatio = AspectRatioPrimitive.Root 6 | 7 | export { AspectRatio } 8 | -------------------------------------------------------------------------------- /src/app/documents/[documentId]/loading.tsx: -------------------------------------------------------------------------------- 1 | import { FullsceenLoader } from "@/components/fullscreen-loader"; 2 | 3 | const LoadingPage = () => { 4 | return 5 | } 6 | 7 | export default LoadingPage; -------------------------------------------------------------------------------- /src/hooks/use-search-param.ts: -------------------------------------------------------------------------------- 1 | import { parseAsString, useQueryState } from 'nuqs' 2 | 3 | export function useSearchParam() { 4 | return useQueryState( 5 | "search", 6 | parseAsString.withDefault("").withOptions({ clearOnDefault: true }), 7 | ); 8 | } -------------------------------------------------------------------------------- /.env.sample: -------------------------------------------------------------------------------- 1 | CONVEX_DEPLOYMENT= #Your Convex Secret Code 2 | NEXT_PUBLIC_CONVEX_URL= #Your Convex Public Url 3 | 4 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= # Your Clerk Pulishable Key 5 | CLERK_SECRET_KEY= #Your Clerk Secret Key 6 | 7 | LIVE_BLOCK_SECRET_KEY= #Your Live Block Secret Key 8 | -------------------------------------------------------------------------------- /src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /src/store/use-editor-store.tsx: -------------------------------------------------------------------------------- 1 | import {create} from 'zustand'; 2 | import {type Editor} from '@tiptap/react' 3 | 4 | interface EditorStore{ 5 | editor: Editor | null; 6 | setEditor: (editor: Editor | null) => void; 7 | } 8 | 9 | export const useEditorStore = create((set)=> ({ 10 | editor: null, 11 | setEditor: (editor) => set ({editor}), 12 | })) -------------------------------------------------------------------------------- /public/blank-document.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/ui/collapsible.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" 4 | 5 | const Collapsible = CollapsiblePrimitive.Root 6 | 7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger 8 | 9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent 10 | 11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent } 12 | -------------------------------------------------------------------------------- /src/components/sufi-loader.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | export const SufiLoading = () => { 4 | return ( 5 |
6 | loading 7 |

8 | Loading… 9 |

10 |
11 | ) 12 | } -------------------------------------------------------------------------------- /src/middleware.ts: -------------------------------------------------------------------------------- 1 | import { clerkMiddleware } from "@clerk/nextjs/server"; 2 | 3 | export default clerkMiddleware(); 4 | 5 | export const config = { 6 | matcher: [ 7 | // Skip Next.js internals and all static files, unless found in search params 8 | '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', 9 | // Always run for API routes 10 | '/(api|trpc)(.*)', 11 | ], 12 | }; -------------------------------------------------------------------------------- /src/components/fullscreen-loader.tsx: -------------------------------------------------------------------------------- 1 | import { LoaderIcon } from "lucide-react"; 2 | 3 | interface FullscreenLoaderProps { 4 | label?: string; 5 | } 6 | 7 | export const FullsceenLoader = ({ label }: FullscreenLoaderProps) => { 8 | return ( 9 |
10 | 11 | {label &&

{label}

} 12 |
13 | ) 14 | } -------------------------------------------------------------------------------- /convex/_generated/api.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated `api` utility. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * To regenerate, run `npx convex dev`. 8 | * @module 9 | */ 10 | 11 | import { anyApi } from "convex/server"; 12 | 13 | /** 14 | * A utility for referencing Convex functions in your app's API. 15 | * 16 | * Usage: 17 | * ```js 18 | * const myFunctionReference = api.myModule.myFunction; 19 | * ``` 20 | */ 21 | export const api = anyApi; 22 | export const internal = anyApi; 23 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /convex/schema.ts: -------------------------------------------------------------------------------- 1 | import { defineSchema, defineTable } from "convex/server"; 2 | import { v } from "convex/values"; 3 | 4 | export default defineSchema({ 5 | documents: defineTable({ 6 | title: v.string(), 7 | initialContent: v.optional(v.string()), 8 | ownerId: v.string(), 9 | roomId: v.optional(v.string()), 10 | organizationId: v.optional(v.string()), 11 | }) 12 | .index("by_owner_id", ["ownerId"]) 13 | .index("by_organization_id", ["organizationId"]) 14 | .searchIndex("search_title", { 15 | searchField: "title", 16 | filterFields: ["ownerId", "organizationId"] 17 | }) 18 | }); -------------------------------------------------------------------------------- /src/hooks/use-debounce.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useRef } from "react"; 2 | 3 | export function useDebounce) => ReturnType 4 | >( 5 | callback: T, 6 | delay: number = 500 7 | ) { 8 | const timeoutRef = useRef | null>(null); 9 | 10 | return useCallback( 11 | (...args: Parameters) => { 12 | if (timeoutRef.current) { 13 | clearTimeout(timeoutRef.current); 14 | } 15 | 16 | timeoutRef.current = setTimeout(() => { 17 | callback(...args); 18 | }, delay); 19 | }, 20 | [callback, delay] 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/hooks/use-mobile.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | forme.md 16 | 17 | # next.js 18 | /.next/ 19 | /out/ 20 | 21 | # production 22 | /build 23 | 24 | # misc 25 | .DS_Store 26 | *.pem 27 | 28 | # debug 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env.local 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Textarea = React.forwardRef< 6 | HTMLTextAreaElement, 7 | React.ComponentProps<"textarea"> 8 | >(({ className, ...props }, ref) => { 9 | return ( 10 |