Add JSON support to CodeBlock

[pfferrari]

Closes #1136
Related commercelayer/issues-app/issues/430

What I did

Added JSON support to CodeBlock.

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests).
• Make sure to add/update documentation regarding your changes.
• You are NOT deprecating/removing a feature.

[netlify]

✅ Deploy Preview for commercelayer-app-elements ready!

Name	Link
🔨 Latest commit	0a05b04
🔍 Latest deploy log	https://app.netlify.com/projects/commercelayer-app-elements/deploys/6a0dc065effbec0008117f26
😎 Deploy Preview	https://deploy-preview-1137--commercelayer-app-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

Adds support for passing a JSON object as CodeBlock content so it can be rendered/copyable as a formatted JSON string, and documents the usage in Storybook.

Changes:

• Extend CodeBlock children prop to accept a JSON object and stringify it with 2-space indentation.
• Preserve whitespace when rendering JSON so indentation is visible.
• Add a new Storybook story demonstrating JSON usage.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/docs/src/stories/atoms/CodeBlock.stories.tsx	Adds a Storybook example showing how to render an object as JSON in CodeBlock.
packages/app-elements/src/ui/atoms/CodeBlock.tsx	Updates CodeBlock to stringify non-string children, preserve whitespace for indentation, and copy the formatted content.

Comments suppressed due to low confidence (2)

packages/app-elements/src/ui/atoms/CodeBlock.tsx:49

• JSON.stringify(children, null, 2) can throw (e.g. circular references, BigInt values) which would crash rendering. Since the prop type currently doesn't guarantee JSON-serializable content, consider guarding with a try/catch (and falling back to something like String(children) or a clear placeholder) to avoid bringing down the whole UI.

    const contentString =
      typeof children === "string"
        ? children
        : JSON.stringify(children, null, 2)

packages/app-elements/src/ui/atoms/CodeBlock.tsx:67

• New JSON-object rendering path (contentString + JSON.stringify) isn’t covered by unit tests. Since CodeBlock already has a test file, add a test asserting object children are formatted as expected (and that indentation is preserved, e.g. via whitespace-pre-wrap class) to prevent regressions.

    const contentString =
      typeof children === "string"
        ? children
        : JSON.stringify(children, null, 2)

    return (
      <InputWrapper {...rest} label={label} hint={hint}>
        <div className="flex group w-full rounded bg-gray-50 in-[.overlay-container]:bg-gray-200">
          <div
            className={cn(
              "flex flex-col w-full px-4 py-2.5 text-teal text-sm font-mono marker:font-bold border-none break-all",
              typeof children !== "string" ? "whitespace-pre-wrap" : "",
            )}
            data-testid="codeblock-content"
          >
            {isLoading === true
              ? ""
              : contentString.split("\n").map((line, idx) => (
                  // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here since the content is static and does not change and the lines are not reordered or filtered.
                  <span key={idx}>
                    {hideValue ? randomHiddenValue() : line}
                  </span>
                ))}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[pkg-pr-new]

npm i https://pkg.pr.new/commercelayer/app-elements/@commercelayer/app-elements@1137

commit: 0a05b04

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

packages/app-elements/src/ui/atoms/CodeBlock.tsx:69

• New behavior adds support for JSON-object children (stringification + whitespace handling), but CodeBlock.test.tsx only covers string/secret toggling. Add a unit test asserting JSON-object rendering uses 2-space indentation (and that copy-to-clipboard receives the formatted string) to prevent regressions.

    const contentString =
      typeof children === "string"
        ? children
        : JSON.stringify(children, null, 2)

    return (
      <InputWrapper {...rest} label={label} hint={hint}>
        <div className="flex group w-full rounded bg-gray-50 in-[.overlay-container]:bg-gray-200">
          <div
            className={cn(
              "flex flex-col w-full px-4 py-2.5 text-teal text-sm font-mono marker:font-bold border-none break-all",
              typeof children !== "string" ? "whitespace-pre-wrap" : "",
            )}
            data-testid="codeblock-content"
          >
            {isLoading === true
              ? ""
              : contentString.split("\n").map((line, idx) => (
                  // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here since the content is static and does not change and the lines are not reordered or filtered.
                  <span key={idx}>
                    {hideValue ? randomHiddenValue() : line}
                  </span>
                ))}
          </div>