@kushagradhawan/kookie-blocks 0.1.4 → 0.1.6

package/src/components/code/CodeBlock.tsx

@@ -1,65 +1,396 @@
-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, ArrowDown01Icon } from "@hugeicons/core-free-icons";
+import { codeToHtml } from "shiki";
 import type { CodeBlockProps } from "./types";
 
-function extractLanguageFromChildren(children?: ReactNode): string {
-  if (!children) return "text";
-
-  // Try to extract language from pre > code className
-  if (typeof children === "object" && children !== null && "props" in children) {
-    const childProps = (children as any).props;
-
-    // If children is a <pre><code className="language-xxx">
-    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];
-    }
+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;
 
-    // Direct className on children
-    const className = childProps?.className || "";
-    const match = className.match(/language-([\w-]+)/i);
-    if (match) return match[1];
+  if (background === "none") {
+    return (
+      <Card size="1" variant="soft">
+        <Flex justify="center" align="center" py="4">
+          <Theme fontFamily="sans">{children}</Theme>
+        </Flex>
+      </Card>
+    );
   }
 
-  return "text";
+  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>
+  );
 }
 
-function extractCodeFromChildren(children?: ReactNode): string {
-  if (!children) return "";
+// ============================================
+// Code Section (for runtime highlighting)
+// ============================================
 
-  // Try to extract text from pre > code structure
-  if (typeof children === "object" && children !== null && "props" in children) {
-    const childProps = (children as any).props;
+interface CodeSectionProps {
+  code: string;
+  language: string;
+  showCopy?: boolean;
+  showLanguage?: boolean;
+  lightTheme?: string;
+  darkTheme?: string;
+}
 
-    // 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 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);
 
-      if (typeof codeChildren === "string") {
-        return codeChildren;
-      }
+  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);
+    };
+  }, []);
 
-    // 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 displayLanguage = language === "text" ? "plaintext" : language;
+
+  const handleToggle = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const contentStyle: React.CSSProperties = {
+    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,
+  };
+
+  const chevronStyle: React.CSSProperties = {
+    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+  };
+
+  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">
+            {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;
+}
 
-  return "";
+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);
 }
 
+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;
+          }
+        } 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);
+    };
+  }, []);
+
+  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 contentStyle: React.CSSProperties = {
+    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,
+  };
+
+  const handleToggle = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const chevronStyle: React.CSSProperties = {
+    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+  };
+
+  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>
+  );
+});
+
+// ============================================
+// Main CodeBlock Component
+// ============================================
+
 export function CodeBlock({
   children,
   code,
@@ -72,48 +403,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

@@ -15,7 +15,7 @@ interface PreviewSectionProps {
 }
 
 export function PreviewSection({ children, background = "none", backgroundProps = {} }: PreviewSectionProps) {
-  const { dotSize = 24, color = "var(--gray-10)", backgroundColor = "var(--gray-2)", height = "300px", width = "100%", radius = "3" } = backgroundProps;
+  const { dotSize = 24, color = "var(--gray-10)", backgroundColor = "var(--gray-2)", height, width = "100%", radius = "3" } = backgroundProps;
 
   // Render with no background (default card styling)
   if (background === "none") {
@@ -36,8 +36,8 @@ export function PreviewSection({ children, background = "none", backgroundProps
       backgroundSize: `${dotSize}px ${dotSize}px`,
       backgroundPosition: "center",
       backgroundColor,
-      height,
       width,
+      ...(height && { height }),
     };
 
     return (
@@ -56,8 +56,8 @@ export function PreviewSection({ children, background = "none", backgroundProps
     backgroundPosition: "center",
     backgroundRepeat: "no-repeat",
     borderRadius: `var(--radius-${radius})`,
-    height,
     width,
+    ...(height && { height }),
   };
 
   return (

package/src/components/index.css

@@ -1,15 +1,19 @@
-/* Components CSS aggregator for Kookie Blocks (e.g., hero variants if styled). */
+/* Components CSS aggregator for Kookie Blocks */
 
 /* ============================================
    Code Block Component Styles
    ============================================ */
 
-/* Code block wrapper - constrain width in flex containers */
-.code-block-wrapper {
-  min-width: 0;
-  max-width: 100%;
+/* Main docs code block wrapper */
+.docs-code-block {
   width: 100%;
+}
+
+/* Code content area - handles expand/collapse */
+.code-content {
   overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  position: relative;
 }
 
 /* Code block content (the pre part, below the header) */
@@ -52,14 +56,17 @@
   height: 0 !important;
 }
 
-.code-block-wrapper pre,
-.code-block-wrapper .code-block-content pre {
-  overflow-x: visible; /* Let .code-block-content handle scrolling */
+/* Pre elements inside code content */
+.code-content pre,
+.code-block-content pre {
+  overflow-x: visible;
   max-width: 100%;
   min-width: 0;
   margin: 0;
   width: 100%;
   box-sizing: border-box;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
 /* Ensure Shiki-generated pre elements fill width */
@@ -69,8 +76,8 @@
 }
 
 /* Code elements inside pre */
-.code-block-wrapper pre code,
-.code-block-wrapper .code-block-content pre code {
+.code-content pre code,
+.code-block-content pre code {
   font-family: var(--font-mono);
   font-size: var(--font-size-2);
   line-height: 1.75;
@@ -82,16 +89,16 @@
 }
 
 /* Shiki line spans */
-.code-block-wrapper pre code .line,
-.code-block-wrapper .code-block-content pre code .line {
+.code-content pre code .line,
+.code-block-content pre code .line {
   display: flex;
   align-items: center;
   gap: 0;
 }
 
 /* Line numbers */
-.code-block-wrapper pre code .line::before,
-.code-block-wrapper .code-block-content pre code .line::before {
+.code-content pre code .line::before,
+.code-block-content pre code .line::before {
   counter-increment: line;
   content: counter(line);
   display: inline-block;
@@ -104,8 +111,37 @@
   margin-right: var(--space-4);
 }
 
+/* Scroll shadow overlay for collapsed state */
+.code-scroll-shadow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(to top, var(--color-panel-solid), transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 1;
+}
+
+.code-scroll-shadow.visible {
+  opacity: 1;
+}
+
+/* Action buttons styling */
+.code-action-buttons {
+  flex-shrink: 0;
+}
+
+/* Chevron rotation animation */
+.code-chevron {
+  transition: transform 0.2s ease-in-out;
+}
+
 /* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
-.code-block-wrapper pre.shiki span {
+.code-block-content pre.shiki span,
+.code-content pre.shiki span {
   color: var(--shiki-light) !important;
   font-style: var(--shiki-light-font-style);
   font-weight: var(--shiki-light-font-weight);
@@ -113,9 +149,12 @@
 }
 
 /* Override with dark theme colors when inside a dark context */
-.dark .code-block-wrapper pre.shiki span,
-.dark-theme .code-block-wrapper pre.shiki span,
-[data-appearance="dark"] .code-block-wrapper pre.shiki span {
+.dark .code-block-content pre.shiki span,
+.dark-theme .code-block-content pre.shiki span,
+[data-appearance="dark"] .code-block-content pre.shiki span,
+.dark .code-content pre.shiki span,
+.dark-theme .code-content pre.shiki span,
+[data-appearance="dark"] .code-content pre.shiki span {
   color: var(--shiki-dark) !important;
   font-style: var(--shiki-dark-font-style);
   font-weight: var(--shiki-dark-font-weight);