Conversation
WalkthroughThis update introduces several new files that asynchronously retrieve source code from example files using the Changes
Sequence Diagram(s)sequenceDiagram
participant U as Usage File
participant G as getSourceCodeFromPath
participant E as Example File
participant D as Documentation Page
U->>G: Call getSourceCodeFromPath(filePath)
G->>E: Retrieve source code from file
E-->>G: Return source code
G-->>U: Return code snippet
U->>D: Export and provide code object for rendering
sequenceDiagram
participant S as Storybook Story
participant C as Code Component
S->>C: Render Code with variant & size props
C-->>S: Return styled code snippet display
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
docs/app/docs/components/code/docs/colorCodeUsage.jsOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/app/docs/components/code/docs/sizeCodeUsage.jsOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/app/docs/components/code/examples/CodeSizes.tsxOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (9)
src/components/ui/Code/Code.tsx (1)
16-16: Fix spacing around assignment operators.The spacing around the
=operators forvariantandsizeis inconsistent with the other props.-const Code = ({ children, customRootClass = '', color = '', variant= '', size= '' }: CodeProps) => { +const Code = ({ children, customRootClass = '', color = '', variant = '', size = '' }: CodeProps) => {🧰 Tools
🪛 ESLint
[error] 16-16: Operator '=' must be spaced.
(space-infix-ops)
[error] 16-16: Operator '=' must be spaced.
(space-infix-ops)
docs/app/docs/components/code/examples/CodeSizes.tsx (1)
12-16: Clean up whitespace and fix indentationThere's unnecessary whitespace between the opening and closing tags, and inconsistent indentation. This makes the code harder to read and maintain.
<Code key={index} size={size} variant={variant}> - - <Text>console.log('This is some code')</Text> - - </Code>) + <Text>console.log('This is some code')</Text> + </Code>)styles/themes/components/code.scss (3)
18-27: Simplify border declarationYou're declaring the same border on all four sides individually. This can be simplified to a single declaration.
&[data-code-variant="soft"]{ - border-top: 1px solid var(--rad-ui-color-accent-600); - border-left: 1px solid var(--rad-ui-color-accent-600); - border-right: 1px solid var(--rad-ui-color-accent-600); - border-bottom: 1px solid var(--rad-ui-color-accent-600); + border: 1px solid var(--rad-ui-color-accent-600); color: var(--rad-ui-color-accent-950); background-color: var(--rad-ui-color-accent-400); }
24-24: Check for redundant style declarationThe background-color for the "soft" variant is identical to the default background-color defined in line 3. If this is intentional, consider adding a comment explaining why; otherwise, it can be removed to avoid redundancy.
31-53: Ensure height accommodates multiline contentUsing fixed heights can cause content to overflow if it wraps to multiple lines. Consider using
min-heightinstead ofheight, or adding sufficient line-height and padding to accommodate multiline content.&[data-code-size="small"]{ font-size: small; padding: 2px 8px; - height: 24px; + min-height: 24px; }docs/app/docs/components/code/examples/CodeColor.tsx (1)
12-16: Clean up whitespace and fix indentationThere's unnecessary whitespace and inconsistent indentation that makes the code harder to read.
<Code key={index} size={size} variant={variant} color='pink'> - - <Text>console.log('This is some code')</Text> - - </Code>) + <Text>console.log('This is some code')</Text> + </Code>)docs/app/docs/components/code/examples/CodeVariants.tsx (3)
8-11: Improve variant descriptions for clarityThe descriptions for "soft" and "outline" variants are very similar and not very descriptive. Consider making them more distinct and informative:
const codeStyleDescription = { - soft: 'Soft code have a soft background color and a border.', - outline: 'Outline code have a border and a background color.', + soft: 'Soft variant displays code with a colored background and matching border for a subtle, cohesive appearance.', + outline: 'Outline variant displays code with a transparent background and contrasting border for emphasis.' };
22-22: Avoid inline stylesUsing inline styles is generally not recommended in React applications as it makes styles harder to maintain. Consider moving this style to your CSS/SCSS file.
- <Separator orientation="horizontal" style={{ marginTop: 20 }} /> + <Separator orientation="horizontal" className="mt-5" />Then define the margin in your CSS/SCSS file:
.mt-5 { margin-top: 20px; }
19-20: Clean up unnecessary whitespaceThere's extra whitespace between the opening Code tag and the Text component. This makes the code harder to read.
<Code variant={variant} className="space-x-2"> - - <Text>console.log('This is some code')</Text> + <Text>console.log('This is some code')</Text>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
docs/app/docs/components/code/docs/colorCodeUsage.js(1 hunks)docs/app/docs/components/code/docs/sizeCodeUsage.js(1 hunks)docs/app/docs/components/code/docs/variantCodeUsage.js(1 hunks)docs/app/docs/components/code/examples/CodeColor.tsx(1 hunks)docs/app/docs/components/code/examples/CodeSizes.tsx(1 hunks)docs/app/docs/components/code/examples/CodeVariants.tsx(1 hunks)docs/app/docs/components/code/page.mdx(2 hunks)src/components/ui/Code/Code.tsx(1 hunks)src/components/ui/Code/stories/Code.stories.tsx(2 hunks)styles/themes/components/code.scss(1 hunks)
🧰 Additional context used
🪛 ESLint
src/components/ui/Code/Code.tsx
[error] 16-16: Operator '=' must be spaced.
(space-infix-ops)
[error] 16-16: Operator '=' must be spaced.
(space-infix-ops)
🔇 Additional comments (12)
docs/app/docs/components/code/docs/colorCodeUsage.js (1)
1-9: Code looks well-structured and follows a consistent pattern.The implementation correctly imports the source code parsing utility and exports the code in a structured format that can be easily consumed by documentation components.
docs/app/docs/components/code/docs/sizeCodeUsage.js (1)
1-9: Implementation follows the established pattern.The code correctly implements the same structure as the other usage files, maintaining consistency in how example code is retrieved and exported.
docs/app/docs/components/code/docs/variantCodeUsage.js (1)
1-9: Implementation is consistent with other usage files.The code properly implements the same pattern as the color and size usage files, ensuring consistency across the codebase.
src/components/ui/Code/Code.tsx (2)
11-12: LGTM! New props extend component configurability.The addition of variant and size props enhances the flexibility of the Code component.
21-27: LGTM! Clean implementation of data attributes.The conditional logic correctly adds the appropriate data attributes based on the presence of the variant and size props, following the same pattern used for the color attribute.
docs/app/docs/components/code/page.mdx (5)
4-9: LGTM: Good structured imports for new documentation sectionsThese imports provide access to the code examples and components needed to showcase the new variant, size, and color features of the Code component. The imports follow a consistent pattern and are organized logically.
21-23: LGTM: Well-structured Variants documentation sectionThis section adds documentation for Code variants by following the same pattern as the main component documentation, with appropriate title and component references.
26-28: LGTM: Well-structured Sizes documentation sectionThis section adds documentation for Code sizes by following the same pattern as the other documentation sections, maintaining consistency throughout the document.
30-32: LGTM: Well-structured Color documentation sectionThis section adds documentation for Code colors by following the same pattern as the other documentation sections, completing the feature set documentation.
34-40: LGTM: Proper component closureThe Documentation component is properly closed, maintaining the overall structure of the page with the table at the end.
src/components/ui/Code/stories/Code.stories.tsx (2)
6-7: LGTM: Good constant definitions for variants and sizesThese constants clearly define the available variants and sizes for the Code component, making them easily reusable throughout the stories.
69-84: LGTM: Clean Variant story implementationThe Variant story is well implemented, showcasing each variant option in a clear and consistent way. The structure matches other component stories in the project.
| {variants.map((variant, index) => { | ||
| return <div key={index} className='flex justify-center w-80 flex-wrap gap-4'> | ||
| {sizes.map((size, index) => { | ||
| return ( | ||
| <Code key={index} size={size} variant={variant}> | ||
|
|
||
| <Text>console.log('This is some code')</Text> | ||
|
|
||
| </Code>) | ||
| })} | ||
| </div> | ||
| })} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use unique keys instead of array indices
Using array indices as keys in React map functions can lead to rendering issues if the array order changes. Consider using the combination of variant and size for a more stable key.
- {variants.map((variant, index) => {
- return <div key={index} className='flex justify-center w-80 flex-wrap gap-4'>
+ {variants.map((variant) => {
+ return <div key={variant} className='flex justify-center w-80 flex-wrap gap-4'>
{sizes.map((size, index) => {
return (
- <Code key={index} size={size} variant={variant}>
+ <Code key={`${variant}-${size}`} size={size} variant={variant}>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {variants.map((variant, index) => { | |
| return <div key={index} className='flex justify-center w-80 flex-wrap gap-4'> | |
| {sizes.map((size, index) => { | |
| return ( | |
| <Code key={index} size={size} variant={variant}> | |
| <Text>console.log('This is some code')</Text> | |
| </Code>) | |
| })} | |
| </div> | |
| })} | |
| {variants.map((variant) => { | |
| return <div key={variant} className='flex justify-center w-80 flex-wrap gap-4'> | |
| {sizes.map((size, index) => { | |
| return ( | |
| <Code key={`${variant}-${size}`} size={size} variant={variant}> | |
| <Text>console.log('This is some code')</Text> | |
| </Code>) | |
| })} | |
| </div> | |
| })} |
| import Code from '@radui/ui/Code'; | ||
| import Text from "@radui/ui/Text"; | ||
|
|
||
| const CodeColor = () => { | ||
| const sizes = ['small', 'medium', 'large', 'x-large']; | ||
| const variants = ['soft', 'outline']; | ||
| return <div className='flex'> | ||
| {variants.map((variant, index) => { | ||
| return <div key={index} className='flex justify-center w-80 flex-wrap gap-4'> | ||
| {sizes.map((size, index) => { | ||
| return ( | ||
| <Code key={index} size={size} variant={variant} color='pink'> | ||
|
|
||
| <Text>console.log('This is some code')</Text> | ||
|
|
||
| </Code>) | ||
| })} | ||
| </div> | ||
| })} | ||
| </div> | ||
| } | ||
|
|
||
| export default CodeColor; No newline at end of file |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider consolidating duplicate components
This component is nearly identical to CodeSizes.tsx with the only difference being the addition of the color='pink' prop. Consider creating a more generic component that accepts props for color, or refactor to remove duplication.
// Example of a more generic component that could replace both:
const CodeExamples = ({ color }) => {
const sizes = ['small', 'medium', 'large', 'x-large'];
const variants = ['soft', 'outline'];
return <div className='flex'>
{variants.map((variant) => {
return <div key={variant} className='flex justify-center w-80 flex-wrap gap-4'>
{sizes.map((size) => {
return (
<Code
key={`${variant}-${size}`}
size={size}
variant={variant}
color={color}
>
<Text>console.log('This is some code')</Text>
</Code>
)
})}
</div>
})}
</div>
}
// Usage:
// <CodeExamples /> // No color, like CodeSizes
// <CodeExamples color="pink" /> // With color, like CodeColor| {variants.map((variant, index) => { | ||
| return <div key={index} className='flex justify-center w-80 flex-wrap gap-4'> | ||
| {sizes.map((size, index) => { | ||
| return ( | ||
| <Code key={index} size={size} variant={variant} color='pink'> | ||
|
|
||
| <Text>console.log('This is some code')</Text> | ||
|
|
||
| </Code>) | ||
| })} | ||
| </div> | ||
| })} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use unique keys instead of array indices
Similar to CodeSizes.tsx, using array indices as keys can cause issues. Use the variant and size combination for more stable keys.
- {variants.map((variant, index) => {
- return <div key={index} className='flex justify-center w-80 flex-wrap gap-4'>
+ {variants.map((variant) => {
+ return <div key={variant} className='flex justify-center w-80 flex-wrap gap-4'>
{sizes.map((size, index) => {
return (
- <Code key={index} size={size} variant={variant} color='pink'>
+ <Code key={`${variant}-${size}`} size={size} variant={variant} color='pink'>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {variants.map((variant, index) => { | |
| return <div key={index} className='flex justify-center w-80 flex-wrap gap-4'> | |
| {sizes.map((size, index) => { | |
| return ( | |
| <Code key={index} size={size} variant={variant} color='pink'> | |
| <Text>console.log('This is some code')</Text> | |
| </Code>) | |
| })} | |
| </div> | |
| })} | |
| {variants.map((variant) => { | |
| return <div key={variant} className='flex justify-center w-80 flex-wrap gap-4'> | |
| {sizes.map((size, index) => { | |
| return ( | |
| <Code key={`${variant}-${size}`} size={size} variant={variant} color='pink'> | |
| <Text>console.log('This is some code')</Text> | |
| </Code>) | |
| })} | |
| </div> | |
| })} |
| export const Size = () => { | ||
| return <SandboxEditor> | ||
| <div className='mt-4 mb-2'> | ||
| <p className='text-gray-950'>Code Size</p> | ||
| </div> | ||
| <div> | ||
|
|
||
| {Variants.map((variant, index) => ( | ||
| <div key={index} className='mb-10'> | ||
| <span key={index} className="inline-flex items-start space-x-2"> | ||
| {Sizes.map((size, index) => { | ||
| return <Code key={index} size={size} variant={variant}> | ||
|
|
||
| {Code_TEXT} | ||
|
|
||
| </Code>; | ||
| })} | ||
| </span> | ||
| </div> | ||
| ))} | ||
|
|
||
| </div> | ||
| </SandboxEditor>; | ||
| }; |
There was a problem hiding this comment.
Fix duplicate key props in nested mapping
The Size story looks good overall, but there's a duplicate key issue in your nested mapping that could cause React warnings.
{Variants.map((variant, index) => (
- <div key={index} className='mb-10'>
- <span key={index} className="inline-flex items-start space-x-2">
+ <div key={`variant-${index}`} className='mb-10'>
+ <span className="inline-flex items-start space-x-2">Using the same index as keys for both the outer and inner elements in a nested structure can lead to React key uniqueness warnings. The fix uses a prefixed key for the outer element.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const Size = () => { | |
| return <SandboxEditor> | |
| <div className='mt-4 mb-2'> | |
| <p className='text-gray-950'>Code Size</p> | |
| </div> | |
| <div> | |
| {Variants.map((variant, index) => ( | |
| <div key={index} className='mb-10'> | |
| <span key={index} className="inline-flex items-start space-x-2"> | |
| {Sizes.map((size, index) => { | |
| return <Code key={index} size={size} variant={variant}> | |
| {Code_TEXT} | |
| </Code>; | |
| })} | |
| </span> | |
| </div> | |
| ))} | |
| </div> | |
| </SandboxEditor>; | |
| }; | |
| export const Size = () => { | |
| return <SandboxEditor> | |
| <div className='mt-4 mb-2'> | |
| <p className='text-gray-950'>Code Size</p> | |
| </div> | |
| <div> | |
| {Variants.map((variant, index) => ( | |
| <div key={`variant-${index}`} className='mb-10'> | |
| <span className="inline-flex items-start space-x-2"> | |
| {Sizes.map((size, index) => { | |
| return <Code key={index} size={size} variant={variant}> | |
| {Code_TEXT} | |
| </Code>; | |
| })} | |
| </span> | |
| </div> | |
| ))} | |
| </div> | |
| </SandboxEditor>; | |
| }; |
kotAPI
added
the
automerge
2 participants
code component
Summary by CodeRabbit
New Features
Documentation
Style