@kushagradhawan/kookie-blocks 0.1.3 → 0.1.5

package/src/components/code/CodeBlock.tsx

@@ -1,64 +1,346 @@
-import React, { type ReactNode } from "react";
-import { Card, Flex } from "@kushagradhawan/kookie-ui";
-import { SyntaxHighlighter } from "./SyntaxHighlighter";
-import { CopyButton } from "./CopyButton";
-import { LanguageBadge } from "./LanguageBadge";
-import { PreviewSection } from "./PreviewSection";
+import React, { useState, useRef, useEffect, useCallback, memo, type ReactNode } from "react";
+import { Box, Card, Flex, Button, Code, Theme } from "@kushagradhawan/kookie-ui";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Copy01Icon, Tick01Icon } from "@hugeicons/core-free-icons";
+import { codeToHtml } from "shiki";
 import type { CodeBlockProps } from "./types";
 
-function extractLanguageFromChildren(children?: ReactNode): string {
-  if (!children) return "text";
+const 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;
+  };
+}
+
+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>
+    );
+  }
+
+  if (background === "dots") {
+    const dotsStyle: React.CSSProperties = {
+      backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,
+      borderRadius: `var(--radius-${radius})`,
+      backgroundSize: `${dotSize}px ${dotSize}px`,
+      backgroundPosition: "center",
+      backgroundColor,
+      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 }),
+  };
+
+  return (
+    <Card size="1" variant="soft">
+      <Flex justify="center" align="center" py="4" style={imageStyle}>
+        <Theme fontFamily="sans">{children}</Theme>
+      </Flex>
+    </Card>
+  );
+}
+
+// ============================================
+// Code Section (for runtime highlighting)
+// ============================================
 
-  // Try to extract language from pre > code className
+interface CodeSectionProps {
+  code: string;
+  language: string;
+  showCopy?: boolean;
+  showLanguage?: boolean;
+  lightTheme?: string;
+  darkTheme?: string;
+}
+
+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;
+
+  const contentStyle: React.CSSProperties = {
+    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,
+  };
+
+  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">
+              {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">
+            {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>
+
+          {shouldShowToggle && !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;
+}
+
+function extractCodeFromChildren(children?: ReactNode): string {
+  if (!children) return "";
   if (typeof children === "object" && children !== null && "props" in children) {
     const childProps = (children as any).props;
+    if (childProps?.children && typeof childProps.children === "object") {
+      const codeProps = (childProps.children as any).props;
+      const codeChildren = codeProps?.children;
+      if (typeof codeChildren === "string") return codeChildren;
+    }
+    if (typeof childProps?.children === "string") return childProps.children;
+  }
+  if (typeof children === "string") return children;
+  return "";
+}
 
-    // If children is a <pre><code className="language-xxx">
+function extractLanguageFromChildren(children?: ReactNode): string {
+  if (!children) return "text";
+  if (typeof children === "object" && children !== null && "props" in children) {
+    const childProps = (children as any).props;
     if (childProps?.children && typeof childProps.children === "object") {
       const codeProps = (childProps.children as any).props;
       const className = codeProps?.className || "";
       const match = className.match(/language-([\w-]+)/i);
       if (match) return match[1];
     }
-
-    // Direct className on children
     const className = childProps?.className || "";
     const match = className.match(/language-([\w-]+)/i);
     if (match) return match[1];
   }
-
   return "text";
 }
 
-function extractCodeFromChildren(children?: ReactNode): string {
-  if (!children) return "";
+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();
+}
 
-  // Try to extract text from pre > code structure
-  if (typeof children === "object" && children !== null && "props" in children) {
-    const childProps = (children as any).props;
+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);
 
-    // If children is <pre><code>...</code></pre>
-    if (childProps?.children && typeof childProps.children === "object") {
-      const codeProps = (childProps.children as any).props;
-      const codeChildren = codeProps?.children;
+  const code = extractCodeFromChildren(children);
+  const language = extractLanguageFromChildren(children);
+  const displayLanguage = formatLanguageLabel(language);
+
+  const shouldShowToggle = contentHeight > COLLAPSED_HEIGHT;
 
-      if (typeof codeChildren === "string") {
-        return codeChildren;
-      }
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
     }
+  }, [children]);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+    };
+  }, []);
 
-    // Direct text content
-    if (typeof childProps?.children === "string") {
-      return childProps.children;
+  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]);
 
-  if (typeof children === "string") {
-    return children;
-  }
+  const contentStyle: React.CSSProperties = {
+    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,
+  };
 
-  return "";
-}
+  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">
+              {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>
+  );
+});
+
+// ============================================
+// Main CodeBlock Component
+// ============================================
 
 export function CodeBlock({
   children,
@@ -72,48 +354,28 @@ export function CodeBlock({
   background,
   backgroundProps,
 }: CodeBlockProps) {
-  // Determine the code and language to display
-  let displayCode = code;
-  let displayLanguage = language;
-
-  // If children are provided (pre-highlighted from MDX), extract code and language
-  if (children && !code) {
-    displayCode = extractCodeFromChildren(children);
-    displayLanguage = language || extractLanguageFromChildren(children);
-  }
-
-  // Default language
-  if (!displayLanguage) {
-    displayLanguage = "text";
-  }
-
-  // If no code to display, render nothing
-  if (!displayCode && !children) {
-    return null;
-  }
+  const hasCode = code || (children && React.Children.count(children) > 0);
+  const displayLanguage = language || extractLanguageFromChildren(children) || "text";
 
   return (
-    <Flex direction="column" className="code-block-wrapper" style={{ minWidth: 0 }} my="2">
-      {preview && (
-        <PreviewSection background={background} backgroundProps={backgroundProps}>
-          {preview}
-        </PreviewSection>
-      )}
-
-      <Card size="2" variant="soft">
-        <Flex gap="2" direction="column">
-          <Flex align="start" justify="between">
-            {showLanguage && <LanguageBadge language={displayLanguage} />}
-            {showCopy && displayCode && <CopyButton code={displayCode} />}
-          </Flex>
+    <Box className="docs-code-block" mt="6" mb="8">
+      <Flex direction="column" gap="2">
+        {preview && (
+          <PreviewSection background={background} backgroundProps={backgroundProps}>
+            {preview}
+          </PreviewSection>
+        )}
 
-          {/* If we have runtime code, use SyntaxHighlighter */}
-          {code && <SyntaxHighlighter code={code} language={displayLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />}
+        {code && (
+          <CodeSection code={code} language={displayLanguage} showCopy={showCopy} showLanguage={showLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />
+        )}
 
-          {/* If we have pre-highlighted children from MDX, render them */}
-          {children && !code && <div className="code-block-content">{children}</div>}
-        </Flex>
-      </Card>
-    </Flex>
+        {children && !code && (
+          <ChildrenCodeSection showCopy={showCopy} showLanguage={showLanguage}>
+            {children}
+          </ChildrenCodeSection>
+        )}
+      </Flex>
+    </Box>
   );
 }

package/src/components/code/PreviewSection.tsx

@@ -1,5 +1,5 @@
 import React, { type ReactNode } from "react";
-import { Box } from "@kushagradhawan/kookie-ui";
+import { Card, Flex, Theme } from "@kushagradhawan/kookie-ui";
 
 interface PreviewSectionProps {
   children: ReactNode;
@@ -15,38 +15,56 @@ interface PreviewSectionProps {
 }
 
 export function PreviewSection({ children, background = "none", backgroundProps = {} }: PreviewSectionProps) {
-  const { dotSize = 2, color = "#d4d4d8", backgroundColor = "transparent", height = "auto", width = "100%", radius = "var(--radius-3)" } = backgroundProps;
+  const { dotSize = 24, color = "var(--gray-10)", backgroundColor = "var(--gray-2)", height, width = "100%", radius = "3" } = backgroundProps;
 
-  const backgroundStyle =
-    background === "dots"
-      ? {
-          backgroundImage: `radial-gradient(circle, ${color} ${dotSize}px, ${backgroundColor} ${dotSize}px)`,
-          backgroundSize: "20px 20px",
-        }
-      : background !== "none"
-        ? {
-            backgroundImage: `url(${background})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-          }
-        : {};
+  // Render with no background (default card styling)
+  if (background === "none") {
+    return (
+      <Card size="1" variant="soft">
+        <Flex justify="center" align="center" py="4">
+          <Theme fontFamily="sans">{children}</Theme>
+        </Flex>
+      </Card>
+    );
+  }
+
+  // Render with dots pattern background
+  if (background === "dots") {
+    const dotsStyle: React.CSSProperties = {
+      backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,
+      borderRadius: `var(--radius-${radius})`,
+      backgroundSize: `${dotSize}px ${dotSize}px`,
+      backgroundPosition: "center",
+      backgroundColor,
+      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>
+    );
+  }
+
+  // Render with custom image background
+  const imageStyle: React.CSSProperties = {
+    backgroundImage: `url(${background})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    borderRadius: `var(--radius-${radius})`,
+    width,
+    ...(height && { height }),
+  };
 
   return (
-    <Box
-      p="4"
-      style={{
-        ...backgroundStyle,
-        height,
-        width,
-        borderRadius: radius,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: "200px",
-      }}
-    >
-      {children}
-    </Box>
+    <Card size="1" variant="soft">
+      <Flex justify="center" align="center" py="4" style={imageStyle}>
+        <Theme fontFamily="sans">{children}</Theme>
+      </Flex>
+    </Card>
   );
 }
-