@datarecce/ui 0.1.30 → 0.1.32

package/recce-source/js/src/components/ui/markdown/ExternalLinkConfirmDialog.tsx

@@ -0,0 +1,134 @@
+/**
+ * ExternalLinkConfirmDialog - Confirmation dialog for external links.
+ *
+ * Shows a warning when users click on links that navigate outside of Recce.
+ */
+
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import MuiDialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import { useRef } from "react";
+import { IoClose } from "react-icons/io5";
+import { PiWarning } from "react-icons/pi";
+
+interface ExternalLinkConfirmDialogProps {
+  /** Whether the dialog is open */
+  isOpen: boolean;
+  /** The external URL the user is trying to navigate to */
+  url: string;
+  /** Callback when user confirms navigation */
+  onConfirm: () => void;
+  /** Callback when user cancels navigation */
+  onCancel: () => void;
+}
+
+/**
+ * Truncate a URL for display, keeping the domain visible
+ */
+function truncateUrl(url: string, maxLength = 60): string {
+  if (url.length <= maxLength) return url;
+
+  try {
+    const urlObj = new URL(url);
+    const domain = urlObj.hostname;
+    const path = urlObj.pathname + urlObj.search + urlObj.hash;
+
+    // Always show the domain
+    if (domain.length >= maxLength - 3) {
+      return domain.substring(0, maxLength - 3) + "...";
+    }
+
+    // Calculate remaining space for path
+    const remainingLength = maxLength - domain.length - 3;
+    if (path.length > remainingLength) {
+      return `${domain}${path.substring(0, remainingLength)}...`;
+    }
+
+    return url;
+  } catch {
+    // If URL parsing fails, just truncate normally
+    return url.substring(0, maxLength - 3) + "...";
+  }
+}
+
+export function ExternalLinkConfirmDialog({
+  isOpen,
+  url,
+  onConfirm,
+  onCancel,
+}: ExternalLinkConfirmDialogProps) {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <MuiDialog
+      open={isOpen}
+      onClose={onCancel}
+      maxWidth="sm"
+      fullWidth
+      aria-labelledby="external-link-dialog-title"
+    >
+      <DialogTitle
+        id="external-link-dialog-title"
+        sx={{ display: "flex", alignItems: "center", gap: 1 }}
+      >
+        <Box component={PiWarning} sx={{ color: "amber.500", fontSize: 20 }} />
+        External Link
+      </DialogTitle>
+      <IconButton
+        aria-label="close"
+        onClick={onCancel}
+        sx={{
+          position: "absolute",
+          right: 8,
+          top: 8,
+          color: "grey.500",
+        }}
+      >
+        <IoClose />
+      </IconButton>
+
+      <DialogContent>
+        <Typography sx={{ mb: 1.5 }}>
+          This link will take you to an external website outside of Recce. Are
+          you sure you want to continue?
+        </Typography>
+        <Box
+          sx={{
+            bgcolor: "grey.50",
+            p: 1,
+            borderRadius: 1,
+            border: "1px solid",
+            borderColor: "grey.200",
+          }}
+        >
+          <Box
+            component="code"
+            sx={{
+              fontSize: "0.875rem",
+              wordBreak: "break-all",
+              whiteSpace: "pre-wrap",
+              bgcolor: "transparent",
+              fontFamily: "monospace",
+            }}
+          >
+            {truncateUrl(url, 100)}
+          </Box>
+        </Box>
+      </DialogContent>
+
+      <DialogActions sx={{ gap: 1 }}>
+        <Button ref={cancelRef} variant="outlined" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button color="iochmara" variant="contained" onClick={onConfirm}>
+          Open Link
+        </Button>
+      </DialogActions>
+    </MuiDialog>
+  );
+}

package/recce-source/js/src/components/ui/markdown/MarkdownContent.tsx

@@ -0,0 +1,364 @@
+/**
+ * MarkdownContent - Renders GitHub-flavored Markdown content.
+ *
+ * Features:
+ * - GFM support (tables, task lists, strikethrough, autolinks)
+ * - Syntax highlighting for code blocks
+ * - External link confirmation dialog
+ * - XSS-safe rendering (no dangerouslySetInnerHTML)
+ */
+
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import { useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import React, { useState } from "react";
+import Markdown, { Components } from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import remarkGfm from "remark-gfm";
+import { ExternalLinkConfirmDialog } from "./ExternalLinkConfirmDialog";
+
+interface MarkdownContentProps {
+  /** The markdown content to render */
+  content: string;
+  /** Font size for the rendered content */
+  fontSize?: string;
+  /** Base URL for determining internal links (defaults to window.location.origin) */
+  internalDomains?: string[];
+}
+
+/**
+ * Check if a URL is external (not part of the Recce application)
+ */
+function isExternalUrl(href: string, internalDomains: string[]): boolean {
+  if (!href) return false;
+
+  // Relative URLs are internal
+  if (href.startsWith("/") || href.startsWith("#") || href.startsWith("?")) {
+    return false;
+  }
+
+  // Check for protocol-relative or absolute URLs
+  try {
+    const url = new URL(href, window.location.origin);
+
+    // Check if the hostname matches any internal domain
+    return !internalDomains.some(
+      (domain) =>
+        url.hostname === domain || url.hostname.endsWith(`.${domain}`),
+    );
+  } catch {
+    // If URL parsing fails, treat as internal (likely a relative path)
+    return false;
+  }
+}
+
+/**
+ * Custom link component that shows confirmation for external links
+ */
+function MarkdownLink({
+  href,
+  children,
+  internalDomains,
+}: {
+  href?: string;
+  children?: React.ReactNode;
+  internalDomains: string[];
+}) {
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [pendingUrl, setPendingUrl] = useState<string | null>(null);
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (!href) return;
+
+    if (isExternalUrl(href, internalDomains)) {
+      e.preventDefault();
+      setPendingUrl(href);
+      setShowConfirm(true);
+    }
+  };
+
+  const handleConfirm = () => {
+    if (pendingUrl) {
+      window.open(pendingUrl, "_blank", "noopener,noreferrer");
+    }
+    setShowConfirm(false);
+    setPendingUrl(null);
+  };
+
+  const handleCancel = () => {
+    setShowConfirm(false);
+    setPendingUrl(null);
+  };
+
+  const isExternal = href ? isExternalUrl(href, internalDomains) : false;
+
+  return (
+    <>
+      <Link
+        href={href}
+        onClick={handleClick}
+        sx={{
+          color: "primary.main",
+          textDecoration: "underline",
+          "&:hover": { color: "iochmara.600" },
+        }}
+        target="_blank"
+        rel={isExternal ? "noopener noreferrer" : undefined}
+      >
+        {children}
+        {isExternal && " ↗"}
+      </Link>
+      <ExternalLinkConfirmDialog
+        isOpen={showConfirm}
+        url={pendingUrl || ""}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+      />
+    </>
+  );
+}
+
+/**
+ * Custom code block component with syntax highlighting
+ */
+function CodeBlock({
+  className,
+  children,
+  isDark = false,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  node?: unknown;
+  isDark?: boolean;
+}) {
+  const match = /language-(\w+)/.exec(className || "");
+  const language = match ? match[1] : undefined;
+  const codeString = String(children).replace(/\n$/, "");
+
+  // Check if this is an inline code block (no language, single line, no newlines)
+  const isInline = !match && !String(children).includes("\n");
+
+  if (isInline) {
+    return (
+      <Box
+        component="code"
+        sx={{
+          bgcolor: isDark ? "grey.800" : "grey.100",
+          color: isDark ? "grey.200" : "inherit",
+          px: 1,
+          py: 0.5,
+          borderRadius: 0.5,
+          fontSize: "0.9em",
+          fontFamily: "monospace",
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{ my: 2, borderRadius: 1, overflow: "hidden", fontSize: "0.875rem" }}
+    >
+      <SyntaxHighlighter
+        style={oneDark}
+        language={language}
+        PreTag="div"
+        customStyle={{
+          margin: 0,
+          borderRadius: "6px",
+          fontSize: "0.85em",
+        }}
+      >
+        {codeString}
+      </SyntaxHighlighter>
+    </Box>
+  );
+}
+
+export function MarkdownContent({
+  content,
+  fontSize = "0.875rem",
+  internalDomains = [],
+}: MarkdownContentProps) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  // Build the list of internal domains
+  const allInternalDomains = [
+    window.location.hostname,
+    "reccehq.com",
+    "datarecce.io",
+    "localhost",
+    ...internalDomains,
+  ];
+
+  // Custom component renderers
+  const components: Components = {
+    // Links with external confirmation
+    a: ({ href, children }) => (
+      <MarkdownLink href={href} internalDomains={allInternalDomains}>
+        {children}
+      </MarkdownLink>
+    ),
+
+    // Code blocks with syntax highlighting
+    code: (props) => <CodeBlock {...props} isDark={isDark} />,
+
+    // Paragraphs
+    p: ({ children }) => (
+      <Typography
+        component="p"
+        sx={{ fontSize, mb: 2, "&:last-child": { mb: 0 } }}
+      >
+        {children}
+      </Typography>
+    ),
+
+    // Headers
+    h1: ({ children }) => (
+      <Typography
+        sx={{ fontSize: "1.25rem", fontWeight: "bold", mb: 2, mt: 3 }}
+      >
+        {children}
+      </Typography>
+    ),
+    h2: ({ children }) => (
+      <Typography
+        sx={{ fontSize: "1.125rem", fontWeight: "bold", mb: 2, mt: 3 }}
+      >
+        {children}
+      </Typography>
+    ),
+    h3: ({ children }) => (
+      <Typography sx={{ fontSize: "1rem", fontWeight: 600, mb: 2, mt: 2 }}>
+        {children}
+      </Typography>
+    ),
+
+    // Lists
+    ul: ({ children }) => (
+      <Box component="ul" sx={{ pl: 4, mb: 2, listStyleType: "disc" }}>
+        {children}
+      </Box>
+    ),
+    ol: ({ children }) => (
+      <Box component="ol" sx={{ pl: 4, mb: 2, listStyleType: "decimal" }}>
+        {children}
+      </Box>
+    ),
+    li: ({ children }) => (
+      <Box component="li" sx={{ fontSize, mb: 1 }}>
+        {children}
+      </Box>
+    ),
+
+    // Blockquotes
+    blockquote: ({ children }) => (
+      <Box
+        sx={{
+          borderLeft: "3px solid",
+          borderLeftColor: isDark ? "grey.600" : "grey.300",
+          pl: 3,
+          py: 1,
+          my: 2,
+          color: isDark ? "grey.400" : "grey.600",
+          fontStyle: "italic",
+        }}
+      >
+        {children}
+      </Box>
+    ),
+
+    // Tables
+    table: ({ children }) => (
+      <Box sx={{ overflowX: "auto", my: 2 }}>
+        <Box
+          component="table"
+          sx={{
+            width: "100%",
+            fontSize,
+            border: "1px solid",
+            borderColor: isDark ? "grey.700" : "grey.200",
+            borderRadius: 1,
+          }}
+        >
+          {children}
+        </Box>
+      </Box>
+    ),
+    thead: ({ children }) => (
+      <Box component="thead" sx={{ bgcolor: isDark ? "grey.800" : "grey.50" }}>
+        {children}
+      </Box>
+    ),
+    tbody: ({ children }) => <Box component="tbody">{children}</Box>,
+    tr: ({ children }) => (
+      <Box
+        component="tr"
+        sx={{
+          borderBottom: "1px solid",
+          borderColor: isDark ? "grey.700" : "grey.200",
+        }}
+      >
+        {children}
+      </Box>
+    ),
+    th: ({ children }) => (
+      <Box
+        component="th"
+        sx={{ px: 2, py: 1, fontWeight: 600, textAlign: "left" }}
+      >
+        {children}
+      </Box>
+    ),
+    td: ({ children }) => (
+      <Box component="td" sx={{ px: 2, py: 1 }}>
+        {children}
+      </Box>
+    ),
+
+    // Horizontal rule
+    hr: () => (
+      <Box
+        component="hr"
+        sx={{ my: 3, borderColor: isDark ? "grey.700" : "grey.200" }}
+      />
+    ),
+
+    // Strong/Bold
+    strong: ({ children }) => (
+      <Typography component="strong" sx={{ fontWeight: 600 }}>
+        {children}
+      </Typography>
+    ),
+
+    // Emphasis/Italic
+    em: ({ children }) => (
+      <Typography component="em" sx={{ fontStyle: "italic" }}>
+        {children}
+      </Typography>
+    ),
+
+    // Strikethrough
+    del: ({ children }) => (
+      <Typography
+        component="del"
+        sx={{ textDecoration: "line-through", color: "grey.500" }}
+      >
+        {children}
+      </Typography>
+    ),
+  };
+
+  return (
+    <Box className="markdown-content">
+      <Markdown remarkPlugins={[remarkGfm]} components={components}>
+        {content}
+      </Markdown>
+    </Box>
+  );
+}

package/recce-source/js/src/components/ui/mui/index.ts

@@ -0,0 +1,13 @@
+/**
+ * MUI Component Library for Recce
+ *
+ * This directory provides MUI-based components with Chakra-like APIs.
+ *
+ * Usage:
+ * ```tsx
+ * import { Box, Flex, Text } from "@/components/ui/mui";
+ * ```
+ */
+
+// Import for side effects - enables custom color type augmentations on MUI components
+import "../mui-utils";

package/recce-source/js/src/components/ui/mui-provider.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
+import { useTheme } from "next-themes";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { darkTheme, lightTheme } from "./mui-theme";
+
+interface MuiProviderProps {
+  children: ReactNode;
+  /**
+   * Force a specific theme mode. If not provided, follows system/user preference.
+   */
+  forcedTheme?: "light" | "dark";
+  /**
+   * Whether to include MUI's CssBaseline for consistent baseline styles.
+   * Disabled by default to avoid conflicts with Chakra/Tailwind during migration.
+   */
+  enableCssBaseline?: boolean;
+}
+
+/**
+ * MUI Theme Provider for Recce
+ *
+ * This provider integrates MUI theming with the existing next-themes
+ * color mode system used by Chakra UI. During the migration period,
+ * both Chakra and MUI components will share the same theme mode.
+ *
+ * Usage:
+ * ```tsx
+ * <MuiProvider>
+ *   <MuiButton>Click me</MuiButton>
+ * </MuiProvider>
+ * ```
+ */
+export function MuiProvider({
+  children,
+  forcedTheme,
+  enableCssBaseline = false,
+}: MuiProviderProps) {
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Avoid hydration mismatch - next-themes resolvedTheme is undefined on server
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Determine which theme to use
+  // Use light theme during SSR/hydration to match server render
+  const theme = useMemo(() => {
+    if (!mounted) {
+      return lightTheme;
+    }
+    const mode = forcedTheme ?? resolvedTheme;
+    return mode === "dark" ? darkTheme : lightTheme;
+  }, [forcedTheme, resolvedTheme, mounted]);
+
+  return (
+    <MuiThemeProvider theme={theme}>
+      {enableCssBaseline && <CssBaseline />}
+      {children}
+    </MuiThemeProvider>
+  );
+}
+
+export default MuiProvider;