@fuma-content/studio 1.0.0 → 1.0.2

package/dist/src/hooks/use-upload-file.mjs

@@ -1,73 +0,0 @@
-import * as React$1 from "react";
-import { toast } from "sonner";
-import { generateReactHelpers } from "@uploadthing/react";
-import { z } from "zod";
-
-//#region src/hooks/use-upload-file.ts
-function useUploadFile({ onUploadComplete, onUploadError, ...props } = {}) {
-	const [uploadedFile, setUploadedFile] = React$1.useState();
-	const [uploadingFile, setUploadingFile] = React$1.useState();
-	const [progress, setProgress] = React$1.useState(0);
-	const [isUploading, setIsUploading] = React$1.useState(false);
-	async function uploadThing(file) {
-		setIsUploading(true);
-		setUploadingFile(file);
-		try {
-			const res = await uploadFiles("editorUploader", {
-				...props,
-				files: [file],
-				onUploadProgress: ({ progress: progress$1 }) => {
-					setProgress(Math.min(progress$1, 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);
-			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)
-			};
-			let progress$1 = 0;
-			const simulateProgress = async () => {
-				while (progress$1 < 100) {
-					await new Promise((resolve) => setTimeout(resolve, 50));
-					progress$1 += 2;
-					setProgress(Math.min(progress$1, 100));
-				}
-			};
-			await simulateProgress();
-			setUploadedFile(mockUploadedFile);
-			return mockUploadedFile;
-		} finally {
-			setProgress(0);
-			setIsUploading(false);
-			setUploadingFile(void 0);
-		}
-	}
-	return {
-		isUploading,
-		progress,
-		uploadedFile,
-		uploadFile: uploadThing,
-		uploadingFile
-	};
-}
-const { uploadFiles, useUploadThing } = generateReactHelpers();
-function getErrorMessage(err) {
-	const unknownError = "Something went wrong, please try again later.";
-	if (err instanceof z.ZodError) return err.issues.map((issue) => issue.message).join("\n");
-	if (err instanceof Error) return err.message;
-	return unknownError;
-}
-
-//#endregion
-export { useUploadFile };

package/dist/src/lib/config.mjs

@@ -1,34 +0,0 @@
-import { studioHook } from "../../index.mjs";
-import { Core } from "fuma-content";
-
-//#region src/lib/config.ts
-let core;
-async function getCore() {
-	core ??= (async () => {
-		const core$1 = new Core({
-			outDir: ".content",
-			configPath: process.env.STUDIO_CONFIG,
-			cwd: process.env.STUDIO_PARENT_DIR
-		});
-		await core$1.init({ config: await import("virtual:content.config") });
-		return core$1;
-	})();
-	return core;
-}
-async function requireCollection(collectionId) {
-	const collection = (await getCore()).getCollection(collectionId);
-	if (!collection) throw new Error(`Missing Collection ${collectionId}`);
-	return collection;
-}
-async function requireDocument(collectionId, documentId) {
-	const collection = await requireCollection(collectionId);
-	const document = await collection.pluginHook(studioHook).getDocument(documentId);
-	if (!document) throw new Error(`Missing Document ${documentId}`);
-	return {
-		collection,
-		document
-	};
-}
-
-//#endregion
-export { requireCollection, requireDocument };

package/dist/src/lib/data/store.d.mts

@@ -1,15 +0,0 @@
-import "@tanstack/query-db-collection";
-import "@tanstack/react-db";
-
-//#region src/lib/data/store.d.ts
-
-interface DocumentItem {
-  id: string;
-  collectionId: string;
-  name: string;
-  permissions: {
-    delete: boolean;
-  };
-}
-//#endregion
-export { DocumentItem };

package/dist/src/lib/lowlight.mjs

@@ -1,7 +0,0 @@
-import { all, createLowlight } from "lowlight";
-
-//#region src/lib/lowlight.ts
-const lowlight = createLowlight(all);
-
-//#endregion
-export { lowlight };

package/dist/src/lib/utils/deep-equal.mjs

@@ -1,18 +0,0 @@
-//#region src/lib/utils/deep-equal.ts
-function deepEqual(a, b) {
-	if (a === b) return true;
-	if (a == null || b == null) return false;
-	if (typeof a !== "object" || typeof b !== "object") return false;
-	if (Array.isArray(a) && Array.isArray(b)) {
-		if (a.length !== b.length) return false;
-		return a.every((item, index) => deepEqual(item, b[index]));
-	}
-	if (Array.isArray(a) || Array.isArray(b)) return false;
-	const keysA = Object.keys(a);
-	const keysB = Object.keys(b);
-	if (keysA.length !== keysB.length) return false;
-	return keysA.every((key) => Object.prototype.hasOwnProperty.call(b, key) && deepEqual(a[key], b[key]));
-}
-
-//#endregion
-export { deepEqual };

package/dist/src/lib/utils/remove-undefined.mjs

@@ -1,18 +0,0 @@
-//#region src/lib/utils/remove-undefined.ts
-function removeUndefined(value, deep = false) {
-	const obj = value;
-	for (const key in obj) {
-		if (obj[key] === void 0) delete obj[key];
-		if (!deep) continue;
-		const entry = obj[key];
-		if (typeof entry === "object" && entry !== null) {
-			removeUndefined(entry, deep);
-			continue;
-		}
-		if (Array.isArray(entry)) for (const item of entry) removeUndefined(item, deep);
-	}
-	return value;
-}
-
-//#endregion
-export { removeUndefined };

package/dist/src/lib/utils.mjs

@@ -1,10 +0,0 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-//#region src/lib/utils.ts
-function cn(...inputs) {
-	return twMerge(clsx(inputs));
-}
-
-//#endregion
-export { cn };

package/next.config.ts

@@ -1,23 +0,0 @@
-import type { NextConfig } from "next";
-import path from "node:path";
-
-const nextConfig: NextConfig = {
-  reactCompiler: true,
-  distDir: process.env.STUDIO_DIST
-    ? path.relative(process.cwd(), process.env.STUDIO_DIST)
-    : ".studio",
-  typescript: {
-    // ignore for performance
-    ignoreBuildErrors: true,
-    tsconfigPath: "tsconfig.build.json",
-  },
-  turbopack: {
-    resolveAlias: {
-      "virtual:content.config": process.env.STUDIO_CONFIG
-        ? path.relative(process.cwd(), process.env.STUDIO_CONFIG)
-        : "content.config.ts",
-    },
-  },
-};
-
-export default nextConfig;

package/postcss.config.mjs

@@ -1,7 +0,0 @@
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
-export default config;

package/src/app/(dashboard)/collection/[name]/[...slug]/page.client.tsx

@@ -1,26 +0,0 @@
-"use client";
-import { DocumentActionsDropdown } from "@/components/collection/document/actions";
-import { SiteHeader } from "@/components/site-header";
-import { documentCollection } from "@/lib/data/store";
-import { eq, and, useLiveQuery } from "@tanstack/react-db";
-import Link from "next/link";
-
-export function Header({ collectionId, documentId }: { collectionId: string; documentId: string }) {
-  const query = useLiveQuery((q) =>
-    q
-      .from({ doc: documentCollection })
-      .where((b) => and(eq(b.doc.id, documentId), eq(b.doc.collectionId, collectionId)))
-      .findOne(),
-  );
-  const doc = query.data;
-  if (!doc) return;
-
-  return (
-    <SiteHeader>
-      <Link href={`/collection/${collectionId}`} className="font-mono text-sm">
-        {collectionId}/{documentId}
-      </Link>
-      <DocumentActionsDropdown document={doc} />
-    </SiteHeader>
-  );
-}

package/src/app/(dashboard)/collection/[name]/[...slug]/page.tsx

@@ -1,18 +0,0 @@
-import { notFound } from "next/navigation";
-import { requireDocument } from "@/lib/config";
-import { Header } from "./page.client";
-import { studioHook } from "@lib/index";
-
-export default async function Page({ params }: PageProps<"/collection/[name]/[...slug]">) {
-  const { name, slug } = await params;
-  const { collection, document } = await requireDocument(name, slug[0]).catch(() => notFound());
-
-  return (
-    <>
-      <Header collectionId={collection.name} documentId={document.id} />
-      <div className="flex flex-1 min-w-0 flex-col gap-2 p-2">
-        {await collection.pluginHook(studioHook).pages?.edit?.({ document, collection })}
-      </div>
-    </>
-  );
-}

package/src/app/(dashboard)/collection/[name]/page.client.tsx

@@ -1,82 +0,0 @@
-"use client";
-import { Badge } from "@/components/ui/badge";
-import Link from "next/link";
-import { SiteHeader } from "@/components/site-header";
-import { useLiveQuery, eq } from "@tanstack/react-db";
-import { collection, documentCollection } from "@/lib/data/store";
-import { useCreateDocumentDialog } from "@/components/collection/client";
-import { FilePlusIcon } from "lucide-react";
-import { buttonVariants } from "@/components/ui/button";
-import {
-  DocumentActionsContext,
-  DocumentActionsDropdown,
-} from "@/components/collection/document/actions";
-
-export default function Client({ collectionId }: { collectionId: string }) {
-  const { data: info } = useLiveQuery((q) =>
-    q
-      .from({ collection })
-      .where((b) => eq(b.collection.id, collectionId))
-      .findOne(),
-  );
-  const { data: documents } = useLiveQuery((q) =>
-    q
-      .from({ documentCollection })
-      .where((b) => eq(b.documentCollection.collectionId, collectionId)),
-  );
-  const createDoc = useCreateDocumentDialog(collectionId);
-  if (!info) return null;
-
-  return (
-    <>
-      <SiteHeader>
-        <h1 className="font-mono text-sm">{info.name}</h1>
-      </SiteHeader>
-      <div className="flex flex-1 min-w-0 flex-col gap-2 px-2 py-6">
-        <h1 className="mb-2 inline-flex items-center gap-2 font-mono font-semibold text-2xl">
-          {info.name}
-          <Badge className="text-sm empty:hidden">{info.badge}</Badge>
-        </h1>
-        <div className="mb-4 flex flex-row flex-wrap items-center gap-2">
-          <p className="font-medium text-muted-foreground text-sm">Implements</p>
-          {info.handlers &&
-            Object.keys(info.handlers).map((handler) => (
-              <Badge key={handler} variant="outline">
-                {handler}
-              </Badge>
-            ))}
-        </div>
-        {info.handlers && "studio" in info.handlers ? (
-          <div className="grid grid-cols-1 border rounded-lg bg-card text-card-foreground overflow-hidden">
-            <div className="flex items-center gap-2 bg-secondary ps-4 pe-2 py-2">
-              <p className="text-sm text-muted-foreground me-auto">{documents.length} Items</p>
-              {createDoc && (
-                <createDoc.component>
-                  <createDoc.trigger className={buttonVariants()}>
-                    <FilePlusIcon />
-                    Create Document
-                  </createDoc.trigger>
-                </createDoc.component>
-              )}
-            </div>
-
-            {documents.map((doc) => (
-              <DocumentActionsContext key={doc.id} document={doc}>
-                <div className="flex text-sm font-medium hover:bg-accent hover:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground">
-                  <Link href={`/collection/${info.name}/${doc.id}`} className="px-4 py-2 flex-1">
-                    {doc.name}
-                  </Link>
-                  <DocumentActionsDropdown document={doc} />
-                </div>
-              </DocumentActionsContext>
-            ))}
-          </div>
-        ) : (
-          <div className="bg-muted text-sm text-muted-foreground p-4 rounded-lg border text-center">
-            This collection doesn't have studio integration.
-          </div>
-        )}
-      </div>
-    </>
-  );
-}

package/src/app/(dashboard)/collection/[name]/page.tsx

@@ -1,11 +0,0 @@
-import { notFound } from "next/navigation";
-import { getCore } from "@/lib/config";
-import Client from "./page.client";
-
-export default async function Page({ params }: PageProps<"/collection/[name]">) {
-  const core = await getCore();
-  const collection = core.getCollection((await params).name);
-  if (!collection) notFound();
-
-  return <Client collectionId={collection.name} />;
-}

package/src/app/(dashboard)/layout.tsx

@@ -1,34 +0,0 @@
-import { AppSidebar } from "@/components/app-sidebar";
-import { ClientContextProvider } from "@/components/collection/context";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { Toaster } from "@/components/ui/sonner";
-import { getCore } from "@/lib/config";
-import { DataBoundary } from "@/lib/data/boundary";
-import { ClientContext, studioHook } from "lib";
-import type { ReactNode } from "react";
-
-export default async function Layout({ children }: { children: ReactNode }) {
-  const core = await getCore();
-  const collections = core.getCollections(true);
-  const clientContexts = new Map<string, ClientContext>();
-  for (const collection of collections) {
-    const { client } = collection.pluginHook(studioHook);
-    if (client) {
-      clientContexts.set(collection.name, await client());
-    }
-  }
-
-  return (
-    <ClientContextProvider contexts={clientContexts}>
-      <DataBoundary>
-        <SidebarProvider>
-          <AppSidebar />
-          <SidebarInset>
-            {children}
-            <Toaster />
-          </SidebarInset>
-        </SidebarProvider>
-      </DataBoundary>
-    </ClientContextProvider>
-  );
-}

package/src/app/(dashboard)/page.tsx

@@ -1,38 +0,0 @@
-"use client";
-import { CollectionActionsContext } from "@/components/collection/actions";
-import { SiteHeader } from "@/components/site-header";
-import { collection } from "@/lib/data/store";
-import { useLiveQuery } from "@tanstack/react-db";
-import { AppWindowIcon } from "lucide-react";
-import Link from "next/link";
-
-export default function Page() {
-  const query = useLiveQuery((q) => q.from({ collection }));
-  return (
-    <>
-      <SiteHeader />
-      <div className="flex-1 px-2 py-6">
-        <h1 className="inline-flex items-center gap-2 text-xl font-semibold mb-6">
-          <AppWindowIcon />
-          Collections
-        </h1>
-        <div className="grid grid-cols-1 border rounded-lg bg-card text-card-foreground overflow-hidden">
-          <div className="flex items-center gap-2 bg-secondary ps-4 pe-2 py-2">
-            <p className="text-sm text-muted-foreground">Collections</p>
-          </div>
-
-          {query.data.map((collection) => (
-            <CollectionActionsContext key={collection.id} collection={collection}>
-              <Link
-                href={`/collection/${collection.id}`}
-                className="text-sm font-medium px-4 py-2 hover:bg-accent hover:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground"
-              >
-                {collection.name}
-              </Link>
-            </CollectionActionsContext>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-}