@kushagradhawan/kookie-blocks 0.1.6 → 0.1.8

package/src/components/code/CodeBlock.tsx

@@ -1,396 +1,293 @@
-import React, { useState, useRef, useEffect, useCallback, memo, type ReactNode } from "react";
-import { Box, Card, Flex, Button, Code, Theme } from "@kushagradhawan/kookie-ui";
+import React, { useState, useEffect, useMemo, memo, createContext, useContext, type ReactNode } from "react";
+import { Box, Card, Code, Flex, Button, Text, Theme, ScrollArea, IconButton } from "@kushagradhawan/kookie-ui";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Copy01Icon, Tick01Icon, ArrowDown01Icon } from "@hugeicons/core-free-icons";
-import { codeToHtml } from "shiki";
-import type { CodeBlockProps } from "./types";
+import { codeToHtml, type BundledLanguage, type BundledTheme } from "shiki";
+import type { CodeBlockProps, ShikiConfig, PreviewBackgroundProps } from "./types";
+import { extractTextFromChildren, extractLanguageFromChildren } from "./types";
+import { useCodeCard } from "./useCodeCard";
+import { LanguageBadge } from "./LanguageBadge";
 
-const COLLAPSED_HEIGHT = 360;
+const CodeBlockContext = createContext<boolean>(false);
+
+const DEFAULT_COLLAPSED_HEIGHT = 360;
 const DEFAULT_LIGHT_THEME = "one-light";
 const DEFAULT_DARK_THEME = "one-dark-pro";
 
-// ============================================
-// Preview Section
-// ============================================
-
 interface PreviewSectionProps {
   children: ReactNode;
   background?: "none" | "dots" | string;
-  backgroundProps?: {
-    dotSize?: number;
-    color?: string;
-    backgroundColor?: string;
-    height?: string;
-    width?: string;
-    radius?: string;
-  };
+  backgroundProps?: PreviewBackgroundProps;
 }
 
 function PreviewSection({ children, background = "none", backgroundProps = {} }: PreviewSectionProps) {
   const { dotSize = 24, color = "var(--gray-10)", backgroundColor = "var(--gray-2)", height, width = "100%", radius = "3" } = backgroundProps;
 
-  if (background === "none") {
-    return (
-      <Card size="1" variant="soft">
-        <Flex justify="center" align="center" py="4">
-          <Theme fontFamily="sans">{children}</Theme>
-        </Flex>
-      </Card>
-    );
-  }
+  const backgroundStyle = useMemo((): React.CSSProperties | undefined => {
+    if (background === "none") return undefined;
+
+    if (background === "dots") {
+      return {
+        backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,
+        borderRadius: `var(--radius-${radius})`,
+        backgroundSize: `${dotSize}px ${dotSize}px`,
+        backgroundPosition: "center",
+        backgroundColor,
+        width,
+        ...(height && { height }),
+      };
+    }
 
-  if (background === "dots") {
-    const dotsStyle: React.CSSProperties = {
-      backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,
-      borderRadius: `var(--radius-${radius})`,
-      backgroundSize: `${dotSize}px ${dotSize}px`,
+    // Image background
+    return {
+      backgroundImage: `url(${background})`,
+      backgroundSize: "cover",
       backgroundPosition: "center",
-      backgroundColor,
+      backgroundRepeat: "no-repeat",
+      borderRadius: `var(--radius-${radius})`,
       width,
       ...(height && { height }),
     };
-
-    return (
-      <Card size="1" variant="soft">
-        <Flex justify="center" align="center" py="4" style={dotsStyle}>
-          <Theme fontFamily="sans">{children}</Theme>
-        </Flex>
-      </Card>
-    );
-  }
-
-  const imageStyle: React.CSSProperties = {
-    backgroundImage: `url(${background})`,
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    backgroundRepeat: "no-repeat",
-    borderRadius: `var(--radius-${radius})`,
-    width,
-    ...(height && { height }),
-  };
+  }, [background, color, backgroundColor, dotSize, height, width, radius]);
 
   return (
     <Card size="1" variant="soft">
-      <Flex justify="center" align="center" py="4" style={imageStyle}>
+      <Flex justify="center" align="center" py="4" style={backgroundStyle}>
         <Theme fontFamily="sans">{children}</Theme>
       </Flex>
     </Card>
   );
 }
 
-// ============================================
-// Code Section (for runtime highlighting)
-// ============================================
-
-interface CodeSectionProps {
+interface CodeCardProps {
   code: string;
   language: string;
-  showCopy?: boolean;
-  showLanguage?: boolean;
-  lightTheme?: string;
-  darkTheme?: string;
+  showCopy: boolean;
+  showLanguage: boolean;
+  showLineNumbers: boolean;
+  collapsible: boolean;
+  collapsedHeight: number;
+  file?: string;
+  isLoading?: boolean;
+  children: ReactNode;
 }
 
-const CodeSection = memo(function CodeSection({
-  code,
-  language,
-  showCopy = true,
-  showLanguage = true,
-  lightTheme = DEFAULT_LIGHT_THEME,
-  darkTheme = DEFAULT_DARK_THEME,
-}: CodeSectionProps) {
-  const [highlighted, setHighlighted] = useState<string | null>(null);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [contentHeight, setContentHeight] = useState(COLLAPSED_HEIGHT);
-  const [copied, setCopied] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const shouldShowToggle = contentHeight > COLLAPSED_HEIGHT;
-
-  useEffect(() => {
-    let cancelled = false;
-    codeToHtml(code, {
-      lang: language,
-      themes: { light: lightTheme, dark: darkTheme },
-      defaultColor: false,
-    })
-      .then((html) => {
-        if (!cancelled) setHighlighted(html);
-      })
-      .catch(() => {
-        if (!cancelled) setHighlighted(null);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [code, language, lightTheme, darkTheme]);
-
-  useEffect(() => {
-    if (contentRef.current) {
-      setContentHeight(contentRef.current.scrollHeight);
-    }
-  }, [highlighted]);
-
-  useEffect(() => {
-    return () => {
-      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
-    };
-  }, []);
-
-  const handleCopy = useCallback(async () => {
-    if (!code.trim()) return;
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
-      resetTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Silently fail
-    }
-  }, [code]);
-
-  const displayLanguage = language === "text" ? "plaintext" : language;
+function CodeSkeleton() {
+  // Generate varied line widths for visual interest
+  const lineWidths = ["85%", "70%", "90%", "60%", "75%", "80%"];
 
-  const handleToggle = useCallback(() => {
-    setIsExpanded((prev) => !prev);
-  }, []);
+  return (
+    <Box className="code-skeleton">
+      {lineWidths.map((width, index) => (
+        <Box key={index} className="code-skeleton-line" style={{ width }} />
+      ))}
+    </Box>
+  );
+}
 
-  const contentStyle: React.CSSProperties = {
-    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,
-  };
+const CodeCard = memo(function CodeCard({
+  code,
+  language,
+  showCopy,
+  showLanguage,
+  showLineNumbers,
+  collapsible,
+  collapsedHeight,
+  file,
+  isLoading = false,
+  children,
+}: CodeCardProps) {
+  const { isExpanded, shouldShowToggle, copied, contentRef, contentMaxHeight, handleToggle, handleCopy } = useCodeCard({
+    code,
+    collapsedHeight,
+  });
 
-  const chevronStyle: React.CSSProperties = {
-    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
-  };
+  const showToggle = collapsible && shouldShowToggle;
+  const chevronRotation = isExpanded ? "rotate(180deg)" : "rotate(0deg)";
+  const contentClassName = showLineNumbers ? "code-content" : "code-content hide-line-numbers";
 
   return (
     <Box position="relative">
       <Card size="1" variant="soft">
-        <Flex direction="column" gap="3">
-          <Flex gap="2" justify="between" align="start">
-            {showLanguage && (
-              <Code size="1" color="gray" highContrast>
-                {displayLanguage}
-              </Code>
-            )}
-            <Flex align="center" gap="2" className="code-action-buttons">
-              {shouldShowToggle && (
-                <Button
+        <Flex direction="column">
+          <Flex justify="between" align="start" gap="2">
+            <Flex align="center" gap="2">
+              {showLanguage && <LanguageBadge language={language} />}
+              {file && (
+                <Text size="1" color="gray" highContrast>
+                  {file}
+                </Text>
+              )}
+            </Flex>
+
+            <Flex align="center" className="code-action-buttons">
+              {showToggle && (
+                <IconButton
                   size="2"
                   variant="ghost"
                   color="gray"
+                  highContrast
                   onClick={handleToggle}
                   tooltip={isExpanded ? "Collapse" : "Expand"}
                   aria-label={isExpanded ? "Collapse code" : "Expand code"}
                 >
-                  <HugeiconsIcon icon={ArrowDown01Icon} style={chevronStyle} className="code-chevron" />
-                </Button>
+                  <HugeiconsIcon icon={ArrowDown01Icon} style={{ transform: chevronRotation }} className="code-chevron" strokeWidth={1.75} />
+                </IconButton>
               )}
               {showCopy && (
                 <Button
                   size="2"
                   variant="ghost"
                   color="gray"
+                  highContrast
                   onClick={handleCopy}
                   tooltip={copied ? "Copied!" : "Copy"}
                   aria-label={copied ? "Copied!" : "Copy code"}
                 >
-                  <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} /> Copy
+                  <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} strokeWidth={1.75} /> Copy
                 </Button>
               )}
             </Flex>
           </Flex>
 
-          <Box ref={contentRef} style={contentStyle} className="code-content">
-            {highlighted ? (
-              <Box className="code-block-content" width="100%" style={{ minWidth: 0 }} dangerouslySetInnerHTML={{ __html: highlighted }} />
-            ) : (
-              <pre className="code-block-content">
-                <Code size="3">{code}</Code>
-              </pre>
-            )}
+          <Box ref={contentRef} style={{ maxHeight: collapsible ? `${contentMaxHeight}px` : undefined }} className={contentClassName}>
+            <ScrollArea type="auto" scrollbars="horizontal">
+              {isLoading ? <CodeSkeleton /> : children}
+            </ScrollArea>
           </Box>
 
-          {shouldShowToggle && !isExpanded && <Box className="code-scroll-shadow visible" />}
+          {showToggle && !isExpanded && <Box className="code-scroll-shadow visible" />}
         </Flex>
       </Card>
     </Box>
   );
 });
 
-// ============================================
-// Children Code Section (for pre-highlighted MDX)
-// ============================================
-
-interface ChildrenCodeSectionProps {
-  children: ReactNode;
-  showCopy?: boolean;
-  showLanguage?: boolean;
+interface RuntimeCodeSectionProps {
+  code: string;
+  language: string;
+  showCopy: boolean;
+  showLanguage: boolean;
+  showLineNumbers: boolean;
+  collapsible: boolean;
+  collapsedHeight: number;
+  file?: string;
+  shikiConfig?: ShikiConfig;
 }
 
-function extractCodeFromChildren(children?: ReactNode): string {
-  const extractText = (node: any): string => {
-    if (typeof node === "string") return node;
-    if (typeof node === "number") return String(node);
-    if (!node) return "";
-    if (Array.isArray(node)) return node.map(extractText).join("");
-    if (typeof node === "object" && "props" in node) {
-      const props = node.props;
-      if (props?.children) return extractText(props.children);
-    }
-    return "";
-  };
-  return extractText(children);
-}
+const RuntimeCodeSection = memo(function RuntimeCodeSection({
+  code,
+  language,
+  showCopy,
+  showLanguage,
+  showLineNumbers,
+  collapsible,
+  collapsedHeight,
+  file,
+  shikiConfig,
+}: RuntimeCodeSectionProps) {
+  const [highlighted, setHighlighted] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Memoize Shiki config to prevent unnecessary re-highlights
+  const shikiOptions = useMemo(() => {
+    const lightTheme = shikiConfig?.themes?.light || DEFAULT_LIGHT_THEME;
+    const darkTheme = shikiConfig?.themes?.dark || DEFAULT_DARK_THEME;
+
+    return {
+      lang: language as BundledLanguage,
+      themes: {
+        light: lightTheme as BundledTheme,
+        dark: darkTheme as BundledTheme,
+      },
+      defaultColor: false as const,
+      langAlias: shikiConfig?.langAlias,
+      transformers: shikiConfig?.transformers,
+      meta: shikiConfig?.meta ? { __raw: shikiConfig.meta } : undefined,
+    };
+  }, [language, shikiConfig?.themes?.light, shikiConfig?.themes?.dark, shikiConfig?.langAlias, shikiConfig?.transformers, shikiConfig?.meta]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setIsLoading(true);
 
-function extractLanguageFromChildren(children?: ReactNode): string {
-  const findLanguage = (node: any): string | null => {
-    if (!node) return null;
-    if (typeof node === "object" && "props" in node) {
-      const props = node.props;
-      const className = props?.className || props?.class || "";
-      if (typeof className === "string") {
-        const match = className.match(/language-([\w-]+)/i);
-        if (match) return match[1];
-      }
-      if (props?.children) {
-        if (Array.isArray(props.children)) {
-          for (const child of props.children) {
-            const lang = findLanguage(child);
-            if (lang) return lang;
+    codeToHtml(code, shikiOptions)
+      .then((html) => {
+        if (!cancelled) {
+          setHighlighted(html);
+          setIsLoading(false);
+        }
+      })
+      .catch((error) => {
+        if (!cancelled) {
+          setHighlighted(null);
+          setIsLoading(false);
+          if (process.env.NODE_ENV === "development") {
+            console.error("[CodeBlock] Shiki highlighting failed:", error);
           }
-        } else {
-          return findLanguage(props.children);
         }
-      }
-    }
-    return null;
-  };
-  return findLanguage(children) || "text";
-}
-
-function formatLanguageLabel(lang: string): string {
-  const aliasMap: Record<string, string> = {
-    tsx: "TSX",
-    ts: "TS",
-    jsx: "JSX",
-    js: "JS",
-    javascript: "JS",
-    typescript: "TS",
-    css: "CSS",
-    html: "HTML",
-    json: "JSON",
-    bash: "SH",
-    sh: "SH",
-    shell: "SH",
-    text: "plaintext",
-  };
-  return aliasMap[lang.toLowerCase()] || lang.toLowerCase();
-}
-
-const ChildrenCodeSection = memo(function ChildrenCodeSection({ children, showCopy = true, showLanguage = true }: ChildrenCodeSectionProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [contentHeight, setContentHeight] = useState(COLLAPSED_HEIGHT);
-  const [copied, setCopied] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const code = extractCodeFromChildren(children);
-  const language = extractLanguageFromChildren(children);
-  const displayLanguage = formatLanguageLabel(language);
-
-  const shouldShowToggle = contentHeight > COLLAPSED_HEIGHT;
-
-  useEffect(() => {
-    if (contentRef.current) {
-      setContentHeight(contentRef.current.scrollHeight);
-    }
-  }, [children]);
+      });
 
-  useEffect(() => {
     return () => {
-      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+      cancelled = true;
     };
-  }, []);
-
-  const handleCopy = useCallback(async () => {
-    if (!code.trim()) return;
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
-      resetTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Silently fail
-    }
-  }, [code]);
+  }, [code, shikiOptions]);
 
-  const contentStyle: React.CSSProperties = {
-    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,
-  };
+  return (
+    <CodeCard
+      code={code}
+      language={language}
+      showCopy={showCopy}
+      showLanguage={showLanguage}
+      showLineNumbers={showLineNumbers}
+      collapsible={collapsible}
+      collapsedHeight={collapsedHeight}
+      file={file}
+      isLoading={isLoading}
+    >
+      {highlighted ? <Box dangerouslySetInnerHTML={{ __html: highlighted }} /> : null}
+    </CodeCard>
+  );
+});
 
-  const handleToggle = useCallback(() => {
-    setIsExpanded((prev) => !prev);
-  }, []);
+interface ChildrenCodeSectionProps {
+  children: ReactNode;
+  showCopy: boolean;
+  showLanguage: boolean;
+  showLineNumbers: boolean;
+  collapsible: boolean;
+  collapsedHeight: number;
+  file?: string;
+}
 
-  const chevronStyle: React.CSSProperties = {
-    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
-  };
+const ChildrenCodeSection = memo(function ChildrenCodeSection({
+  children,
+  showCopy,
+  showLanguage,
+  showLineNumbers,
+  collapsible,
+  collapsedHeight,
+  file,
+}: ChildrenCodeSectionProps) {
+  const code = extractTextFromChildren(children);
+  const language = extractLanguageFromChildren(children);
 
   return (
-    <Box position="relative">
-      <Card size="1" variant="soft">
-        <Flex direction="column" gap="3">
-          <Flex gap="2" justify="between" align="start">
-            {showLanguage && (
-              <Code size="1" color="gray" highContrast>
-                {displayLanguage}
-              </Code>
-            )}
-            <Flex align="center" gap="2" className="code-action-buttons">
-              {shouldShowToggle && (
-                <Button
-                  size="2"
-                  variant="ghost"
-                  color="gray"
-                  onClick={handleToggle}
-                  tooltip={isExpanded ? "Collapse" : "Expand"}
-                  aria-label={isExpanded ? "Collapse code" : "Expand code"}
-                >
-                  <HugeiconsIcon icon={ArrowDown01Icon} style={chevronStyle} className="code-chevron" />
-                </Button>
-              )}
-              {showCopy && (
-                <Button
-                  size="2"
-                  variant="ghost"
-                  color="gray"
-                  onClick={handleCopy}
-                  tooltip={copied ? "Copied!" : "Copy"}
-                  aria-label={copied ? "Copied!" : "Copy code"}
-                >
-                  <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} /> Copy
-                </Button>
-              )}
-            </Flex>
-          </Flex>
-
-          <Box ref={contentRef} style={contentStyle} className="code-content">
-            <div className="code-block-content">{children}</div>
-          </Box>
-
-          {shouldShowToggle && !isExpanded && <Box className="code-scroll-shadow visible" />}
-        </Flex>
-      </Card>
-    </Box>
+    <CodeCard
+      code={code}
+      language={language}
+      showCopy={showCopy}
+      showLanguage={showLanguage}
+      showLineNumbers={showLineNumbers}
+      collapsible={collapsible}
+      collapsedHeight={collapsedHeight}
+      file={file}
+    >
+      {children}
+    </CodeCard>
   );
 });
 
-// ============================================
-// Main CodeBlock Component
-// ============================================
-
 export function CodeBlock({
   children,
   code,
@@ -398,33 +295,58 @@ export function CodeBlock({
   preview,
   showCopy = true,
   showLanguage = true,
-  lightTheme,
-  darkTheme,
+  showLineNumbers = true,
+  shikiConfig,
   background,
   backgroundProps,
+  collapsible = true,
+  collapsedHeight = DEFAULT_COLLAPSED_HEIGHT,
+  file,
 }: CodeBlockProps) {
-  const hasCode = code || (children && React.Children.count(children) > 0);
   const displayLanguage = language || extractLanguageFromChildren(children) || "text";
 
   return (
-    <Box className="docs-code-block" mt="6" mb="8">
-      <Flex direction="column" gap="2">
-        {preview && (
-          <PreviewSection background={background} backgroundProps={backgroundProps}>
-            {preview}
-          </PreviewSection>
-        )}
-
-        {code && (
-          <CodeSection code={code} language={displayLanguage} showCopy={showCopy} showLanguage={showLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />
-        )}
-
-        {children && !code && (
-          <ChildrenCodeSection showCopy={showCopy} showLanguage={showLanguage}>
-            {children}
-          </ChildrenCodeSection>
-        )}
-      </Flex>
-    </Box>
+    <CodeBlockContext.Provider value={true}>
+      <Box className="docs-code-block" mt="6" mb="8">
+        <Flex direction="column" gap="2">
+          {preview && (
+            <PreviewSection background={background} backgroundProps={backgroundProps}>
+              {preview}
+            </PreviewSection>
+          )}
+
+          {code && (
+            <RuntimeCodeSection
+              code={code}
+              language={displayLanguage}
+              showCopy={showCopy}
+              showLanguage={showLanguage}
+              showLineNumbers={showLineNumbers}
+              collapsible={collapsible}
+              collapsedHeight={collapsedHeight}
+              file={file}
+              shikiConfig={shikiConfig}
+            />
+          )}
+
+          {children && !code && (
+            <ChildrenCodeSection
+              showCopy={showCopy}
+              showLanguage={showLanguage}
+              showLineNumbers={showLineNumbers}
+              collapsible={collapsible}
+              collapsedHeight={collapsedHeight}
+              file={file}
+            >
+              {children}
+            </ChildrenCodeSection>
+          )}
+        </Flex>
+      </Box>
+    </CodeBlockContext.Provider>
   );
 }
+
+export function useCodeBlockContext() {
+  return useContext(CodeBlockContext);
+}