@optilogic/core 1.0.0-beta.14 → 1.0.0-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/core",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.16",
   "description": "Core UI components for Optilogic - A professional React component library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -63,6 +63,9 @@
     "react-day-picker": "^9.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "sonner": "^2.0.0",
+    "react-markdown": "^9.0.0",
+    "remark-gfm": "^4.0.0",
+    "shiki": "^3.0.0",
     "tailwindcss": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -75,6 +78,15 @@
     "react-day-picker": {
       "optional": true
     },
+    "react-markdown": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    },
     "sonner": {
       "optional": true
     }
@@ -88,6 +100,8 @@
     "react": "^19.0.0",
     "react-day-picker": "^9.13.0",
     "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.0",
+    "remark-gfm": "^4.0.0",
     "tailwindcss": "^3.4.19",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2"

package/src/components/file-view/FileView.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+import { useContentType } from "./hooks/useContentType";
+import { mergeRenderers, resolveRenderer } from "./utils/rendererRegistry";
+import type { FileViewProps, FileViewError, RendererRegistry } from "./types";
+
+function DefaultEmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex h-full w-full items-center justify-center text-sm text-muted-foreground">
+      {message}
+    </div>
+  );
+}
+
+function DefaultLoadingState() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="flex flex-col items-center gap-3">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary/20 border-t-primary" />
+        <p className="text-sm text-muted-foreground">Loading file...</p>
+      </div>
+    </div>
+  );
+}
+
+function DefaultErrorState({ error }: { error: FileViewError }) {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="flex max-w-sm flex-col items-center gap-3 text-center">
+        <p className="text-sm font-medium text-destructive">{error.message}</p>
+        {error.onRetry && (
+          <button
+            onClick={error.onRetry}
+            className={cn(
+              "rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground",
+              "transition-colors hover:bg-muted",
+            )}
+          >
+            Retry
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * FileView
+ *
+ * A configurable file viewer that detects content type from the file name
+ * and delegates rendering to a pluggable renderer system.
+ *
+ * Built-in renderers: Code, Markdown, Image, PlainText.
+ * Users can override any renderer or add custom ones via the `renderers` prop.
+ *
+ * @example
+ * <FileView fileName="app.tsx" content={sourceCode} />
+ *
+ * @example
+ * <FileView fileName="photo.png" content={null} url={imageUrl} />
+ *
+ * @example
+ * <FileView
+ *   fileName="data.txt"
+ *   content={jsonContent}
+ *   contentType="code"
+ *   renderers={{ code: MyCustomCodeRenderer }}
+ * />
+ */
+export function FileView({
+  content,
+  url = null,
+  fileName,
+  contentType: contentTypeOverride,
+  renderers: userRenderers,
+  loading = false,
+  error = null,
+  loadingComponent,
+  emptyComponent,
+  emptyMessage = "No content to display",
+  errorComponent: ErrorComponent,
+  className,
+  rendererClassName,
+  resolveImageUrl,
+}: FileViewProps) {
+  const { type: resolvedType } = useContentType({
+    fileName,
+    contentTypeOverride,
+  });
+
+  const registry = React.useMemo<RendererRegistry>(
+    () => mergeRenderers(userRenderers),
+    [userRenderers],
+  );
+
+  const Renderer = React.useMemo(
+    () => resolveRenderer(registry, resolvedType),
+    [registry, resolvedType],
+  );
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className={cn("relative h-full w-full", className)}>
+        {loadingComponent ?? <DefaultLoadingState />}
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className={cn("relative h-full w-full", className)}>
+        {ErrorComponent ? (
+          <ErrorComponent error={error} />
+        ) : (
+          <DefaultErrorState error={error} />
+        )}
+      </div>
+    );
+  }
+
+  // Empty state
+  if ((content == null || content === "") && url == null) {
+    return (
+      <div className={cn("relative h-full w-full", className)}>
+        {emptyComponent ?? <DefaultEmptyState message={emptyMessage} />}
+      </div>
+    );
+  }
+
+  // Render
+  return (
+    <div className={cn("relative h-full w-full", className)}>
+      <Renderer
+        content={content}
+        url={url ?? null}
+        fileName={fileName}
+        contentType={resolvedType}
+        className={rendererClassName}
+        resolveImageUrl={resolveImageUrl}
+      />
+    </div>
+  );
+}
+
+FileView.displayName = "FileView";

package/src/components/file-view/components/CodeRenderer.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { cn } from "../../../utils/cn";
+import { useHighlightedTokens } from "../hooks/useHighlightedTokens";
+import type { FileRendererProps } from "../types";
+import { getLanguageFromFileName } from "../utils/languageMapping";
+
+/**
+ * CodeRenderer
+ *
+ * Renders text content as code with line numbers in a left gutter.
+ * Uses shiki for syntax highlighting when available, falling back to
+ * plain monospace text otherwise.
+ *
+ * Layout:
+ * ┌─────────────────────────────────────────┐
+ * │  1 │ import React from "react";         │
+ * │  2 │                                    │
+ * │  3 │ export function App() {            │
+ * │  4 │   return <div>Hello</div>;         │
+ * │  5 │ }                                  │
+ * └─────────────────────────────────────────┘
+ */
+export function CodeRenderer({
+  content,
+  fileName,
+  className,
+}: FileRendererProps) {
+  const language = React.useMemo(
+    () => getLanguageFromFileName(fileName),
+    [fileName],
+  );
+
+  const plainLines = React.useMemo(
+    () => (content ?? "").split("\n"),
+    [content],
+  );
+
+  const { lines: highlightedLines } = useHighlightedTokens(
+    content ?? "",
+    language,
+  );
+
+  const gutterWidth = React.useMemo(
+    () => `${Math.max(String(plainLines.length).length, 2) + 2}ch`,
+    [plainLines.length],
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative h-full w-full overflow-auto rounded-md border border-border bg-background",
+        "scrollbar-thin",
+        className,
+      )}
+    >
+      <pre className="m-0 p-0">
+        <code className="block font-mono text-sm leading-relaxed">
+          {highlightedLines
+            ? highlightedLines.map((tokens, index) => (
+                <div key={index} className="flex">
+                  <span
+                    className="sticky left-0 shrink-0 select-none border-r border-border bg-muted px-3 text-right text-muted-foreground"
+                    style={{ minWidth: gutterWidth }}
+                  >
+                    {index + 1}
+                  </span>
+                  <span className="whitespace-pre px-4">
+                    {tokens.length === 0 || (tokens.length === 1 && tokens[0].content === "")
+                      ? " "
+                      : tokens.map((token, ti) => (
+                          <span key={ti} style={{ color: token.color }}>
+                            {token.content}
+                          </span>
+                        ))}
+                  </span>
+                </div>
+              ))
+            : plainLines.map((line, index) => (
+                <div key={index} className="flex">
+                  <span
+                    className="sticky left-0 shrink-0 select-none border-r border-border bg-muted px-3 text-right text-muted-foreground"
+                    style={{ minWidth: gutterWidth }}
+                  >
+                    {index + 1}
+                  </span>
+                  <span className="whitespace-pre px-4 text-foreground">
+                    {line || " "}
+                  </span>
+                </div>
+              ))}
+        </code>
+      </pre>
+    </div>
+  );
+}
+
+CodeRenderer.displayName = "CodeRenderer";

package/src/components/file-view/components/CsvRenderer.tsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { cn } from "../../../utils/cn";
+import { DataGrid } from "../../data-grid";
+import type { ColumnDef } from "../../data-grid";
+import type { FileRendererProps } from "../types";
+
+/**
+ * Parse a CSV/TSV string into headers and row objects.
+ * Handles quoted fields and double-quote escaping.
+ */
+function parseCSV(text: string): {
+  headers: string[];
+  rows: Record<string, string>[];
+} {
+  const lines = text.split("\n");
+  if (lines.length === 0) return { headers: [], rows: [] };
+
+  // Auto-detect delimiter: if first line has tabs, treat as TSV
+  const firstLine = lines[0] ?? "";
+  const delimiter = firstLine.includes("\t") ? "\t" : ",";
+
+  function parseLine(line: string): string[] {
+    const fields: string[] = [];
+    let current = "";
+    let inQuotes = false;
+    let i = 0;
+
+    while (i < line.length) {
+      const char = line[i]!;
+      if (inQuotes) {
+        if (char === '"') {
+          if (i + 1 < line.length && line[i + 1] === '"') {
+            current += '"';
+            i += 2;
+          } else {
+            inQuotes = false;
+            i++;
+          }
+        } else {
+          current += char;
+          i++;
+        }
+      } else {
+        if (char === '"') {
+          inQuotes = true;
+          i++;
+        } else if (char === delimiter) {
+          fields.push(current.trim());
+          current = "";
+          i++;
+        } else {
+          current += char;
+          i++;
+        }
+      }
+    }
+    fields.push(current.trim());
+    return fields;
+  }
+
+  const headers = parseLine(firstLine);
+  const rows: Record<string, string>[] = [];
+
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i]!;
+    if (line.trim() === "") continue;
+    const values = parseLine(line);
+    const row: Record<string, string> = {};
+    for (let j = 0; j < headers.length; j++) {
+      row[headers[j]!] = values[j] ?? "";
+    }
+    rows.push(row);
+  }
+
+  return { headers, rows };
+}
+
+/**
+ * CsvRenderer
+ *
+ * Parses CSV/TSV content and renders it in a DataGrid
+ * with sorting, filtering, resizable columns, and virtualization.
+ */
+export function CsvRenderer({ content, className }: FileRendererProps) {
+  const { headers, rows } = React.useMemo(
+    () => parseCSV(content ?? ""),
+    [content],
+  );
+
+  const columns = React.useMemo<ColumnDef<Record<string, string>>[]>(
+    () =>
+      headers.map((header) => ({
+        key: header,
+        header,
+        sortable: true,
+        filterable: true,
+        filterType: "text" as const,
+      })),
+    [headers],
+  );
+
+  if (headers.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full items-center justify-center text-sm text-muted-foreground",
+          className,
+        )}
+      >
+        No CSV data to display
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("h-full w-full overflow-auto", className)}>
+      <DataGrid
+        data={rows}
+        columns={columns}
+        getRowKey={(_, index) => String(index)}
+        resizableColumns
+      />
+    </div>
+  );
+}
+
+CsvRenderer.displayName = "CsvRenderer";

package/src/components/file-view/components/HtmlRenderer.tsx

@@ -0,0 +1,24 @@
+import { cn } from "../../../utils/cn";
+import type { FileRendererProps } from "../types";
+
+/**
+ * HtmlRenderer
+ *
+ * Renders HTML content in a fully sandboxed iframe.
+ */
+export function HtmlRenderer({
+  content,
+  fileName,
+  className,
+}: FileRendererProps) {
+  return (
+    <iframe
+      srcDoc={content ?? ""}
+      sandbox=""
+      title={fileName}
+      className={cn("h-full w-full border-0", className)}
+    />
+  );
+}
+
+HtmlRenderer.displayName = "HtmlRenderer";

package/src/components/file-view/components/ImageRenderer.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { cn } from "../../../utils/cn";
+import type { FileRendererProps } from "../types";
+
+/**
+ * ImageRenderer
+ *
+ * Renders an image from a URL, centered in its container.
+ * Handles load errors with a fallback message.
+ */
+export function ImageRenderer({
+  url,
+  fileName,
+  className,
+}: FileRendererProps) {
+  const [hasError, setHasError] = React.useState(false);
+
+  React.useEffect(() => {
+    setHasError(false);
+  }, [url]);
+
+  if (!url) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full items-center justify-center text-sm text-muted-foreground",
+          className,
+        )}
+      >
+        No image URL provided
+      </div>
+    );
+  }
+
+  if (hasError) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full flex-col items-center justify-center gap-2 text-sm text-muted-foreground",
+          className,
+        )}
+      >
+        <span>Failed to load image</span>
+        <span className="text-xs">{fileName}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full items-center justify-center overflow-auto bg-background p-4",
+        "scrollbar-thin",
+        className,
+      )}
+    >
+      <img
+        src={url}
+        alt={fileName}
+        onError={() => setHasError(true)}
+        className="max-h-full max-w-full object-contain"
+      />
+    </div>
+  );
+}
+
+ImageRenderer.displayName = "ImageRenderer";