@datarecce/ui 0.1.41 → 0.2.0

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

@@ -1,134 +0,0 @@
-/**
- * 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

@@ -1,364 +0,0 @@
-/**
- * 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

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,67 +0,0 @@
-"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;