feat: CodeGroup component

agents/Rules.md

@@ -46,7 +46,7 @@ if empty - nothing to change
 - ~~Callouts~~
     - ~~update to `variant="note"` instead of 7 different components. add `variant="custom"`, set it by default~~
 - ~~Cards~~
-- Code groups
+- ~~Code groups~~
 - ~~Color~~
     - nits https://mintlify.slack.com/archives/C09QQDHD7PG/p1764635576242229?thread_ts=1763963569.715779&cid=C09QQDHD7PG
 - ~~Columns~~

packages/components/src/components/code-block/base-code-block.tsx

@@ -17,7 +17,6 @@ import { CodeFooter } from "./code-footer";
 interface BaseCodeBlockProps extends CodeBlockProps {
   isParentCodeGroup?: boolean;
   shouldHighlight?: boolean;
-  // pass isLivePreview to forceExtract to force code string theme changes
   forceExtract?: boolean;
 }
 

packages/components/src/components/code-block/code-block.tsx

@@ -2,13 +2,15 @@ import type { ReactNode, RefObject } from "react";
 
 import { Classes } from "@/lib/local/selectors";
 import { cn } from "@/utils/cn";
-import type { CopyToClipboardResult } from "@/utils/copy-to-clipboard";
 import { getNodeText } from "@/utils/get-node-text";
-import type { CodeStyling } from "@/validation";
+import type { CodeBlockTheme, CodeStyling } from "@/validation";
 
 import { BaseCodeBlock } from "./base-code-block";
 import { CodeHeader } from "./code-header";
-import { CopyToClipboardButton } from "./copy-button";
+import {
+  CopyToClipboardButton,
+  type CopyToClipboardButtonProps,
+} from "./copy-button";
 
 type CodeBlockProps = {
   language?: string;
@@ -62,7 +64,7 @@ type CodeBlockProps = {
   /**
    * Prop to set the code block theme (code block UI theme)
    */
-  codeBlockTheme?: "dark" | "system";
+  codeBlockTheme?: CodeBlockTheme;
   /**
    * Prop to set the code block theme object (syntax highlighting theme)
    */
@@ -75,17 +77,13 @@ type CodeBlockProps = {
    * Pass in CodeSnippetFeedbackButton component
    */
   feedbackButton?: ReactNode;
-  /**
-   * The callback function when a user clicks on the copied to clipboard button
-   */
-  onCopied?: (result: CopyToClipboardResult, textToCopy?: string) => void;
   children?: ReactNode;
+  copyButtonProps?: CopyToClipboardButtonProps;
 };
 
 const CodeBlock = function CodeBlock(params: CodeBlockProps) {
   const {
     filename,
-    onCopied,
     children,
     className,
     icon,
@@ -97,6 +95,7 @@ const CodeBlock = function CodeBlock(params: CodeBlockProps) {
     codeBlockThemeObject,
     askAiButton,
     feedbackButton,
+    copyButtonProps,
   } = params;
 
   const codeString = getNodeText(children);
@@ -126,7 +125,11 @@ const CodeBlock = function CodeBlock(params: CodeBlockProps) {
           icon={icon}
         >
           {feedbackButton && feedbackButton}
-          <CopyToClipboardButton onCopied={onCopied} textToCopy={codeString} />
+          <CopyToClipboardButton
+            codeBlockTheme={codeBlockTheme}
+            textToCopy={codeString}
+            {...copyButtonProps}
+          />
           {askAiButton && askAiButton}
         </CodeHeader>
       ) : (
@@ -135,7 +138,11 @@ const CodeBlock = function CodeBlock(params: CodeBlockProps) {
           data-floating-buttons
         >
           {feedbackButton && feedbackButton}
-          <CopyToClipboardButton onCopied={onCopied} textToCopy={codeString} />
+          <CopyToClipboardButton
+            codeBlockTheme={codeBlockTheme}
+            textToCopy={codeString}
+            {...copyButtonProps}
+          />
           {askAiButton && askAiButton}
         </div>
       )}

packages/components/src/components/code-block/code-header.tsx

@@ -3,11 +3,12 @@ import type { ReactNode } from "react";
 import { Icon as ComponentIcon } from "@/components/icon";
 import { Classes } from "@/lib/local/selectors";
 import { cn } from "@/utils/cn";
+import type { CodeBlockTheme } from "@/validation";
 
 type CodeHeaderProps = {
   filename?: string;
   icon?: string;
-  codeBlockTheme?: "dark" | "system";
+  codeBlockTheme?: CodeBlockTheme;
   children?: ReactNode;
 };
 

packages/components/src/components/code-block/copy-button.tsx

@@ -5,6 +5,7 @@ import {
   type CopyToClipboardResult,
   copyToClipboard,
 } from "@/utils/copy-to-clipboard";
+import type { CodeBlockTheme } from "@/validation";
 
 const DEFAULT_COPY_BUTTON_ARIA_LABEL = "Copy the contents from the code block";
 const DEFAULT_TOOLTIP_COPY_TEXT = "Copy";
@@ -15,7 +16,7 @@ type CopyToClipboardButtonProps = {
   onCopied?: (result: CopyToClipboardResult, textToCopy?: string) => void;
   className?: string;
   showTooltip?: boolean;
-  codeBlockTheme?: "system" | "dark";
+  codeBlockTheme?: CodeBlockTheme;
   copyButtonAriaLabel?: string;
   tooltipCopyText?: string;
   tooltipCopiedText?: string;

packages/components/src/components/code-block/story-utils.ts

@@ -132,6 +132,38 @@ function MyComponent() {
   );
 }`;
 
+const getString = (tabIndex = 1, language?: string) => {
+  const lineInfo = tabIndex ? `Here are ${tabIndex} line(s)` : "";
+  if (language === "python") {
+    return new Array(tabIndex)
+      .fill(`print("Hello, World!${lineInfo ? ` ${lineInfo}` : ""}")`)
+      .join("\n");
+  }
+
+  if (language === "java") {
+    return new Array(tabIndex)
+      .fill(
+        `System.out.println("Hello, World!${lineInfo ? ` ${lineInfo}` : ""}");`
+      )
+      .join("\n");
+  }
+
+  return new Array(tabIndex)
+    .fill(`console.log('Hello, World!${lineInfo ? ` ${lineInfo}` : ""}');`)
+    .join("\n");
+};
+
+const shortMultiLineCode = `function greet(name) {
+  console.log("Hello, " + name + "!");
+  return true;
+}`;
+
+const shortMultiLineCodeTS =
+  // biome-ignore lint/suspicious/noTemplateCurlyInString: just example code for stories
+  "function greet(name: string): boolean {\n  console.log(`Hello, ${name}!`);\n  return true;\n}";
+
+const shortCode = `def greet(name):\n    print(f"Hello, {name}!")\n    return True`;
+
 export {
   mediumCode,
   longExpandableCode,
@@ -140,4 +172,8 @@ export {
   diffCodeWithRemove,
   simpleDiffCode,
   complexDiffCode,
+  getString,
+  shortMultiLineCode,
+  shortCode,
+  shortMultiLineCodeTS,
 };