feat: add CodeBlock component for syntax highlighting #40223
Conversation
- 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.
WalkthroughThis pull request introduces the Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant CodeBlock
participant ThemeContext
participant SyntaxHighlighter
App->>CodeBlock: Render CodeBlock with code snippet
CodeBlock->>ThemeContext: Retrieve current theme
ThemeContext-->>CodeBlock: Return dark/light theme info
CodeBlock->>SyntaxHighlighter: Render code with props and theme
SyntaxHighlighter-->>CodeBlock: Return highlighted code
CodeBlock-->>App: Display highlighted code snippet
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (8)
🔇 Additional comments (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx (1)
10-23: Consider some improvements to the CodeBlock implementation.The CodeBlock component correctly implements syntax highlighting with theming support, but there are some potential enhancements:
- The spreading of props and explicit children usage is redundant
- No error handling for invalid/empty code content
- No documentation for the
useInlineStylespropConsider these improvements:
export const CodeBlock = (props: SyntaxHighlighterProps) => { const theme = useThemeContext(); + // Ensure children content exists or provide fallback + const content = props.children || ''; return ( <SyntaxHighlighter className={getTypographyClassName("caption")} {...props} style={theme.colorMode === "dark" ? darkTheme : lightTheme} useInlineStyles + // useInlineStyles is required to apply the theme styling correctly > - {props.children} + {content} </SyntaxHighlighter> ); };app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx (2)
16-21: Consider API consistency between stories.The Main story passes code via the
codeprop while the Sizes story passes it as children.For consistency, consider using the same approach in both stories:
export const Main: Story = { args: { - code: "{ test: 123 }", language: "json", + children: "{ test: 123 }", }, };
23-33: Rename story to better reflect its purpose.The name "Sizes" doesn't accurately describe what this story demonstrates, which is the component's ability to render different languages.
- export const Sizes: Story = { + export const DifferentLanguages: Story = { render: (props) => ( <CodeBlock language={props.language} {...props}> {props.code} </CodeBlock> ), };Also, consider adding examples with different languages to better showcase the component's capabilities.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts(1 hunks)app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts(1 hunks)app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx (1)
app/client/src/constants/DefaultTheme.tsx (1)
theme(2749-3016)
⏰ Context from checks skipped due to timeout of 90000ms (10)
- GitHub Check: perform-test / client-build / client-build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: perform-test / rts-build / build
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
- GitHub Check: chromatic-deployment
- GitHub Check: storybook-tests
- GitHub Check: chromatic-deployment
🔇 Additional comments (4)
app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts (1)
1-1: Export implementation looks good.The index file correctly re-exports all entities from the src/index module, following standard module pattern practices.
app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts (1)
1-1: Export implementation looks good.The src/index.ts file correctly re-exports all entities from the CodeBlock module, maintaining a clean export structure.
app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx (1)
1-9: Import statements look good.All necessary dependencies are properly imported, including React, SyntaxHighlighter component, types, themes, and utility functions.
app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx (1)
1-14: Storybook setup looks good.The metadata and Story type definition are properly set up for the component.
Description
This addition enhances the design system by providing a reusable component for code display.
Automation
/ok-to-test tags="@tag.Anvil"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14402871511
Commit: 81bb9cf
Cypress dashboard.
Tags:
@tag.AnvilSpec:
Fri, 11 Apr 2025 12:40:24 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit