From 7cdee43f13cc977de43de0bfe93047e7a9b0a4d4 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Fri, 11 Apr 2025 18:39:55 +0530
Subject: [PATCH] feat: add CodeBlock component for syntax highlighting
 (#40223)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

- Introduced a new CodeBlock component that utilizes
react-syntax-highlighter for displaying code snippets with syntax
highlighting.
- Implemented responsive theming based on the current theme context
(dark/light).
- Added Storybook stories for the CodeBlock component to demonstrate its
usage and capabilities.

This addition enhances the design system by providing a reusable
component for code display.


## Automation

/ok-to-test tags="@tag.Anvil"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14402871511>
> Commit: 81bb9cf84ab73e43edf8c59c6d8ecff03cb5eae0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14402871511&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 11 Apr 2025 12:40:24 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new CodeBlock component that renders code snippets with
syntax highlighting and theme support (light/dark modes).
  - Enabled customizable styling and behavior through property options.
- Added interactive examples for previewing different code formats and
sizes.
- Consolidated access to the CodeBlock component through new export
statements in the design system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../widgets/src/components/CodeBlock/index.ts |  1 +
 .../components/CodeBlock/src/CodeBlock.tsx    | 23 +++++++++++++
 .../src/components/CodeBlock/src/index.ts     |  1 +
 .../CodeBlock/stories/CodeBlock.stories.tsx   | 33 +++++++++++++++++++
 .../design-system/widgets/src/index.ts        |  1 +
 5 files changed, 59 insertions(+)
 create mode 100644 app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts
 create mode 100644 app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx
 create mode 100644 app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts
 create mode 100644 app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx

diff --git a/app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts b/app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts
new file mode 100644
index 0000000000..e910bb060c
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts
@@ -0,0 +1 @@
+export * from "./src/index";
diff --git a/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx
new file mode 100644
index 0000000000..951e6d9e26
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import type { SyntaxHighlighterProps } from "react-syntax-highlighter";
+import {
+  atomOneDark as darkTheme,
+  lightfair as lightTheme,
+} from "react-syntax-highlighter/dist/cjs/styles/hljs";
+import { getTypographyClassName, useThemeContext } from "@appsmith/wds-theming";
+
+export const CodeBlock = (props: SyntaxHighlighterProps) => {
+  const theme = useThemeContext();
+
+  return (
+    <SyntaxHighlighter
+      className={getTypographyClassName("caption")}
+      {...props}
+      style={theme.colorMode === "dark" ? darkTheme : lightTheme}
+      useInlineStyles
+    >
+      {props.children}
+    </SyntaxHighlighter>
+  );
+};
diff --git a/app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts
new file mode 100644
index 0000000000..ca111193d8
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts
@@ -0,0 +1 @@
+export * from "./CodeBlock";
diff --git a/app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx b/app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx
new file mode 100644
index 0000000000..3aa0343d1f
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeBlock } from "@appsmith/wds";
+
+/**
+ * CodeBlock is a component that displays a code block.
+ */
+const meta: Meta<typeof CodeBlock> = {
+  component: CodeBlock,
+  title: "WDS/Widgets/Code Block",
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+
+export const Main: Story = {
+  args: {
+    code: "{ test: 123 }",
+    language: "json",
+  },
+};
+
+/**
+ * The code block can render any code and will format based on the language
+ *
+ */
+export const Sizes: Story = {
+  render: (props) => (
+    <CodeBlock language={props.language} {...props}>
+      {props.code}
+    </CodeBlock>
+  ),
+};
diff --git a/app/client/packages/design-system/widgets/src/index.ts b/app/client/packages/design-system/widgets/src/index.ts
index 0c5c63f8d1..1610a8c782 100644
--- a/app/client/packages/design-system/widgets/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/index.ts
@@ -36,6 +36,7 @@ export * from "./components/Calendar";
 export * from "./components/Datepicker";
 export * from "./components/TimeField";
 export * from "./components/MultiSelect";
+export * from "./components/CodeBlock";
 
 export * from "./utils";
 export * from "./hooks";