Conversation
WalkthroughThis pull request adds new documentation pages and code usage examples for several UI components. For each component (BlockQuote, Button, Callout, Card, Code, and Em), new JavaScript files provide sample code snippets in both JavaScript and SCSS, along with structured data (such as property tables). The documentation pages have been restructured using a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ButtonPage
participant ColorUsage
participant SizeUsage
participant VariantUsage
participant SourceFetcher
User->>ButtonPage: Request Button Documentation Page
ButtonPage->>ColorUsage: Load color example
ColorUsage->>SourceFetcher: getSourceCodeFromPath("ButtonColor.tsx")
SourceFetcher-->>ColorUsage: Return source code snippet
ButtonPage->>SizeUsage: Load size example
SizeUsage->>SourceFetcher: getSourceCodeFromPath("ButtonSizes.tsx")
SourceFetcher-->>SizeUsage: Return source code snippet
ButtonPage->>VariantUsage: Load variant example
VariantUsage->>SourceFetcher: getSourceCodeFromPath("ButtonVariants.tsx")
SourceFetcher-->>VariantUsage: Return source code snippet
ButtonPage-->>User: Render documentation with interactive examples
Possibly related PRs
Suggested labels
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/docsv2/components/blockquote/docs/codeUsage.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/docsv2/components/button/docs/codeUsage.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/docsv2/components/button/examples/ButtonColor.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.
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (26)
docs/app/docsv2/components/blockquote/docs/codeUsage.js (3)
1-21: Consider enhancing code examples with TypeScript and additional use cases.The code examples are clear and demonstrate basic usage. However, consider these improvements:
- Add TypeScript examples since the project appears to use it.
- Include examples of different color variations.
- Show examples with different content types (e.g., nested elements).
15-19: Add documentation for CSS custom properties.The SCSS example uses a CSS custom property (
--rad-ui-color-accent-600) but doesn't document its purpose or available values.Consider adding a comment like:
scss: { code: `.rad-ui-block-quote{ + // Uses theme's accent color for the border border-color: var(--rad-ui-color-accent-600); border-left-width: 0.5rem; padding-left: 0.75rem; // Assuming 1rem = 16px }`
23-34: Enhance property documentation.The table structure is good, but the properties documentation could be improved:
- Add validation rules for the
colorprop (e.g., allowed values).- Consider adding more properties like
classNamewhich is used in the example.data : [ {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the quote', id: 'color'}, + {prop: 'className', type: 'string', default: 'undefined', description: 'Additional CSS classes to apply', id: 'className'} ]docs/app/docsv2/components/blockquote/page.mdx (3)
5-7: Enhance component description.The current description is quite basic. Consider adding:
- Common use cases
- Best practices
- Accessibility considerations
<Documentation title={`BlockQuote`} description={` - BlockQuote is used to display a quote. + BlockQuote is used to display quoted content with visual emphasis. It follows semantic HTML practices + using the native <blockquote> element, making it accessible to screen readers. Use it for testimonials, + excerpts, or any content that needs to be distinguished as a quote. `}>🧰 Tools
🪛 LanguageTool
[uncategorized] ~7-~7: Loose punctuation mark.
Context: ...te is used to display a quote. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
10-19: Add citation to the quote example.The BlockQuote example could be improved by adding attribution to demonstrate best practices in quoting content.
<BlockQuote color="green" className="space-x-2" > When my time comes, forget the wrong that I've done. Help me leave behind some reasons to be missed. Don't resent me and when you're feeling empty, keep me in your memory. Leave out all the rest, leave out all the rest. + <footer> + <cite>— Leave Out All The Rest by Linkin Park</cite> + </footer> </BlockQuote>
26-26: Consider adding more documentation sections.The documentation could benefit from additional sections like:
- Installation instructions
- Theming guidelines
- Examples of different variations
docs/app/docsv2/components/callout/docs/codeUsage.js (2)
1-29: Consider improving the SCSS code formatting and variable naming.The SCSS code block could benefit from:
- Consistent indentation (some lines use 4 spaces, others 5)
- Using semantic CSS variable names (e.g.,
--rad-ui-callout-bginstead of--rad-ui-color-accent-200)- Adding comments to explain the CSS variable usage
Apply this diff to improve the SCSS code formatting:
scss: { code: `.rad-ui-callout { - padding:16px; - border-radius:8px; - background-color: var(--rad-ui-color-accent-200); - color: var(--rad-ui-color-accent-950); - display: flex; - align-items: center; - font-weight: 300; - font-size: 14px; - gap:8px; + padding: 16px; + border-radius: 8px; + /* Use semantic color variables for better maintainability */ + background-color: var(--rad-ui-callout-bg, var(--rad-ui-color-accent-200)); + color: var(--rad-ui-callout-text, var(--rad-ui-color-accent-950)); + display: flex; + align-items: center; + font-weight: 300; + font-size: 14px; + gap: 8px; }`
31-33: Add accessibility attributes to the SVG icon.The BookmarkIcon SVG should include ARIA attributes for better accessibility.
Apply this diff to improve accessibility:
export const BookmarkIcon = () => { - return <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 2C3.22386 2 3 2.22386 3 2.5V13.5C3 13.6818 3.09864 13.8492 3.25762 13.9373C3.41659 14.0254 3.61087 14.0203 3.765 13.924L7.5 11.5896L11.235 13.924C11.3891 14.0203 11.5834 14.0254 11.7424 13.9373C11.9014 13.8492 12 13.6818 12 13.5V2.5C12 2.22386 11.7761 2 11.5 2H3.5Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>; + return <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" aria-label="Bookmark icon"><path d="M3.5 2C3.22386 2 3 2.22386 3 2.5V13.5C3 13.6818 3.09864 13.8492 3.25762 13.9373C3.41659 14.0254 3.61087 14.0203 3.765 13.924L7.5 11.5896L11.235 13.924C11.3891 14.0203 11.5834 14.0254 11.7424 13.9373C11.9014 13.8492 12 13.6818 12 13.5V2.5C12 2.22386 11.7761 2 11.5 2H3.5Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>; };docs/app/docsv2/components/callout/page.mdx (1)
6-21: Fix formatting and enhance component description.The code has some formatting issues and could benefit from a more detailed description:
- Remove extra whitespace and newlines
- Enhance the component description to include use cases and variants
Apply this diff to improve formatting and description:
-<Documentation title={`Callout`} description={` - Callout is a component that can be used to display a message or a notification to the user. - `}> - <Documentation.ComponentHero codeUsage={codeUsage}> - <Callout color="red"> - - <BookmarkIcon /> - - - <Text className="font-bold">Error</Text> - <Text>Something went wrong. Please try again later.</Text> - - - </Callout> - </Documentation.ComponentHero> - </Documentation> +<Documentation + title={`Callout`} + description={` + Callout is a component that displays important messages or notifications to users. + It supports different color variants (red, blue, green) for various message types + like errors, information, or success states. Use it to highlight important + information or draw attention to specific messages in your UI. + `} +> + <Documentation.ComponentHero codeUsage={codeUsage}> + <Callout color="red"> + <BookmarkIcon /> + <Text className="font-bold">Error</Text> + <Text>Something went wrong. Please try again later.</Text> + </Callout> + </Documentation.ComponentHero> +</Documentation>🧰 Tools
🪛 LanguageTool
[uncategorized] ~8-~8: Loose punctuation mark.
Context: ...or a notification to the user. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docsv2/components/code/docs/codeUsage.js (3)
12-19: Consider using relative units and consistent spacing in CSS example.The CSS example could be improved for better maintainability and responsiveness:
- Replace pixel values with relative units (rem/em)
- Maintain consistent spacing in property declarations
.rui-code-root{ color: var(--rad-ui-color-accent-950); background-color: var(--rad-ui-color-accent-400); - padding: 1px 10px; // Add space for readability + padding: 0.0625rem 0.625rem; // Add space for readability display: inline-block; border-radius: 4px; - font-size:12px; + font-size: 0.75rem; }
3-9: Enhance code example with TypeScript and more use cases.Consider:
- Adding TypeScript types to the example
- Demonstrating more advanced usage scenarios (e.g., different colors, custom styling)
-const CodeExample = () => ( +interface CodeProps { + color?: string; + className?: string; +} + +const CodeExample: React.FC<CodeProps> = () => ( <div> - <Code>console.log('This is some code')</Code> + <Code color="blue">console.log('Basic example')</Code> + <Code className="custom-style">npm install @radui/ui</Code> </div> )
23-33: Enhance props documentation with additional details.Consider adding:
- Common props (className, style)
- Validation information for the color prop
- Examples in the description
export const CodeTable = { columns : [ {name: 'Prop', id: 'prop'}, {name: 'Type', id: 'type'}, {name: 'Default', id: 'default'}, {name: 'Description', id: 'description'}, ], data : [ - {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the code', id: 'color'}, + {prop: 'color', type: 'string', default: 'null', description: 'Accent color of the code. Accepts any valid CSS color value (e.g., "blue", "#ff0000")', id: 'color'}, + {prop: 'className', type: 'string', default: 'null', description: 'Additional CSS class names', id: 'className'}, + {prop: 'style', type: 'CSSProperties', default: 'null', description: 'Additional inline styles', id: 'style'}, ] }docs/app/docsv2/components/code/page.mdx (2)
5-15: Fix indentation and enhance documentation structure.The documentation structure needs improvement:
- Fix inconsistent indentation
- Add sections for accessibility and best practices
<Documentation - title={`Code`} description={` - Code is used to display inline code. - `}> - <Documentation.ComponentHero codeUsage={codeUsage}> - <div className='bg-gray-100 p-5 flex items-center rounded-md shadow'> - <Code className="space-x-2" style={{ margin: 0 }}>console.log('This is some code')</Code> - </div> - </Documentation.ComponentHero> + title="Code" + description="Code is used to display inline code." +> + <Documentation.ComponentHero codeUsage={codeUsage}> + <div className='bg-gray-100 p-5 flex items-center rounded-md shadow'> + <Code className="space-x-2" style={{ margin: 0 }}>console.log('This is some code')</Code> + </div> + </Documentation.ComponentHero> + + <Documentation.Section title="Accessibility"> + <p>The Code component follows WCAG guidelines for color contrast and is keyboard accessible.</p> + </Documentation.Section> + + <Documentation.Section title="Best Practices"> + <ul> + <li>Use for short, inline code snippets</li> + <li>For multi-line code blocks, consider using a dedicated code block component</li> + </ul> + </Documentation.Section>🧰 Tools
🪛 LanguageTool
[uncategorized] ~8-~8: Loose punctuation mark.
Context: ...s used to display inline code. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
17-19: Fix table placement and indentation.Remove empty lines and fix indentation for better code organization.
- - <Documentation.Table columns={CodeTable.columns} data={CodeTable.data} /> - + <Documentation.Table columns={CodeTable.columns} data={CodeTable.data} />docs/app/docsv2/components/card/page.mdx (2)
6-8: Enhance Documentation Description Clarity
TheDocumentationcomponent’s title and description effectively introduce the Card component. However, the description text is somewhat repetitive (e.g., "used to group related information and actions" vs. "used to display information in a structured way") and could be streamlined for improved clarity and brevity. Additionally, a static analysis hint noted a loose punctuation mark—double-check for any unintended punctuation or formatting in the multi-line string.🧰 Tools
🪛 LanguageTool
[uncategorized] ~8-~8: Loose punctuation mark.
Context: ...formation in a structured way. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
12-19: Consider Semantic HTML for Accessibility
The nested<div>structure displaying "Peter Parker" and "Biochemist" conveys the intended content, but using more semantic elements (like heading tags or paragraph tags) could improve accessibility and SEO. If the MDX context permits, consider using semantic HTML tags to better describe the content hierarchy.docs/app/docsv2/components/em/docs/codeUsage.js (1)
19-21: Replace CSS placeholder with actual styling examples.The CSS section contains a placeholder. Consider adding relevant CSS examples to demonstrate any custom styling possibilities for the Em component.
Would you like me to help generate CSS examples for styling the Em component?
docs/app/docsv2/components/em/page.mdx (1)
14-14: Consider extracting the common className to avoid repetition.The same className
"text-gray-1000"is repeated multiple times. Consider extracting it to a parent element or a variable for better maintainability.<div className='text-gray-900 bg-gray-50 rounded shadow-lg font-normal p-5 space-y-1'> <Text> I have a dream of a scene between the green hills. <br /> - <Em className="text-gray-1000">Clouds</Em> pull away and the sunlight's revealed. + <Em>Clouds</Em> pull away and the sunlight's revealed. <br /> - People don't talk about keeping it <Em className="text-gray-1000">real</Em>. + People don't talk about keeping it <Em>real</Em>. <br /> - <Em className="text-gray-1000">It's understood</Em> that they actually will. + <Em>It's understood</Em> that they actually will. </Text> </div>And add the className to the parent Text component:
-<Text> +<Text className="text-gray-1000">Also applies to: 16-16, 18-18
docs/app/docsv2/components/button/docs/sizeCodeUsage.js (1)
1-9: Consider abstracting the code usage pattern.This file follows the same pattern as
colorCodeUsage.js. Consider creating a utility function to reduce code duplication.+// utils/createCodeUsage.js +export async function createCodeUsage(examplePath) { + let sourceCode; + try { + sourceCode = await getSourceCodeFromPath(examplePath); + } catch (error) { + console.error(`Failed to load example from ${examplePath}:`, error); + sourceCode = '// Error loading example code'; + } + return { + javascript: { + code: sourceCode + } + }; +} +// sizeCodeUsage.js import { getSourceCodeFromPath } from '@/utils/parseSourceCode'; +import { createCodeUsage } from '@/utils/createCodeUsage'; -const buttonSizesSourceCode = await getSourceCodeFromPath('docs/app/docs/components/button/examples/ButtonSizes.tsx'); - -export const code = { - javascript: { - code: buttonSizesSourceCode - } -}; +export const code = await createCodeUsage('docs/app/docs/components/button/examples/ButtonSizes.tsx');docs/app/docsv2/components/button/examples/ButtonColor.tsx (2)
5-6: Move configuration arrays to constants or import from a central location.The sizes and variants arrays should be defined as constants or imported from a central configuration file to ensure consistency across components.
+import { BUTTON_SIZES, BUTTON_VARIANTS } from '@/constants/button'; +// or +const BUTTON_SIZES = ['small', 'medium', 'large', 'x-large'] as const; +const BUTTON_VARIANTS = ['solid', 'soft', 'outline', 'ghost'] as const; const ButtonColor = () => { - const sizes = ['small', 'medium', 'large', 'x-large']; - const variants = ['solid', 'soft', 'outline', 'ghost']; + const sizes = BUTTON_SIZES; + const variants = BUTTON_VARIANTS;
4-16: Add TypeScript types for better type safety.The component is using TypeScript (.tsx) but doesn't leverage type safety. Consider adding proper types.
+type ButtonSize = 'small' | 'medium' | 'large' | 'x-large'; +type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost'; -const ButtonColor = () => { +const ButtonColor: React.FC = () => { const sizes: ButtonSize[] = ['small', 'medium', 'large', 'x-large']; const variants: ButtonVariant[] = ['solid', 'soft', 'outline', 'ghost'];docs/app/docsv2/components/button/examples/ButtonSizes.tsx (1)
4-18: Add TypeScript types and improve accessibility.Consider the following improvements:
- Add TypeScript types for the size and variant arrays.
- Use unique identifiers instead of array indices as keys.
- Add ARIA labels to describe button sizes and variants.
-const ButtonSizes = () => { +type ButtonSize = 'small' | 'medium' | 'large' | 'x-large'; +type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost'; + +const ButtonSizes = () => { - const sizes = ['small', 'medium', 'large', 'x-large']; - const variants = ['solid', 'soft', 'outline', 'ghost']; + const sizes: ButtonSize[] = ['small', 'medium', 'large', 'x-large']; + const variants: ButtonVariant[] = ['solid', 'soft', 'outline', 'ghost']; return <div className='flex flex-col gap-4'> - {variants.map((variant, index) => { - return <div key={index} className='flex items-center gap-4'> - {sizes.map((size, index) => { - return <Button key={index} size={size} variant={variant}> + {variants.map((variant) => { + return <div key={variant} className='flex items-center gap-4'> + {sizes.map((size) => { + return <Button + key={`${variant}-${size}`} + size={size} + variant={variant} + aria-label={`${size} ${variant} button`}> <span>Button</span> </Button> })}docs/app/docsv2/components/button/docs/codeUsage.js (2)
12-56: Enhance button styles for better accessibility and maintainability.The SCSS styles need improvements:
- Missing focus states for keyboard navigation.
- Consider using CSS custom properties for consistent spacing.
- Add transitions for smoother hover effects.
.rad-ui-button{ + --button-padding: 12px; + --button-height: 32px; + --button-radius: 4px; + --button-transition: background-color 0.2s ease; + - height: 32px; - border-radius: 4px; + height: var(--button-height); + border-radius: var(--button-radius); display:flex; align-items:center; justify-content:center; - padding:0px 12px; + padding: 0 var(--button-padding); + transition: var(--button-transition); + + &:focus-visible { + outline: 2px solid var(--rad-ui-color-accent-900); + outline-offset: 2px; + } }
60-62: Consider moving Arrow component to a shared location.The Arrow component is duplicated in ButtonVariants.tsx. Consider moving it to a shared location to maintain DRY principles.
docs/app/docsv2/components/button/page.mdx (2)
11-14: Enhance component documentation with props table and usage guidelines.The documentation would benefit from:
- A table of available props and their types.
- Common use cases and best practices.
- Accessibility guidelines.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~14-~14: Loose punctuation mark.
Context: ...m in forms, dialogs, and more. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
16-19: Add more context to the example button.The initial example should demonstrate a common use case and explain the purpose of the Arrow component.
<Documentation.ComponentHero codeUsage={codeUsage}> - <Button color="green" className="space-x-2" ><span>Click Me! </span><Arrow /></Button> + <Button color="green" className="space-x-2" aria-label="Submit form"> + <span>Submit </span> + <Arrow /> + </Button> </Documentation.ComponentHero>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
docs/app/docsv2/components/blockquote/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/blockquote/page.mdx(1 hunks)docs/app/docsv2/components/button/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/button/docs/colorCodeUsage.js(1 hunks)docs/app/docsv2/components/button/docs/sizeCodeUsage.js(1 hunks)docs/app/docsv2/components/button/docs/variantCodeUsage.js(1 hunks)docs/app/docsv2/components/button/examples/ButtonColor.tsx(1 hunks)docs/app/docsv2/components/button/examples/ButtonSizes.tsx(1 hunks)docs/app/docsv2/components/button/examples/ButtonVariants.tsx(1 hunks)docs/app/docsv2/components/button/page.mdx(1 hunks)docs/app/docsv2/components/callout/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/callout/page.mdx(1 hunks)docs/app/docsv2/components/card/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/card/page.mdx(1 hunks)docs/app/docsv2/components/code/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/code/page.mdx(1 hunks)docs/app/docsv2/components/em/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/em/page.mdx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/app/docsv2/components/card/docs/codeUsage.js
🧰 Additional context used
🪛 LanguageTool
docs/app/docsv2/components/em/page.mdx
[uncategorized] ~8-~8: Loose punctuation mark.
Context: ... Em is used to emphasize text. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docsv2/components/card/page.mdx
[uncategorized] ~8-~8: Loose punctuation mark.
Context: ...formation in a structured way. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docsv2/components/code/page.mdx
[uncategorized] ~8-~8: Loose punctuation mark.
Context: ...s used to display inline code. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docsv2/components/callout/page.mdx
[uncategorized] ~8-~8: Loose punctuation mark.
Context: ...or a notification to the user. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docsv2/components/blockquote/page.mdx
[uncategorized] ~7-~7: Loose punctuation mark.
Context: ...te is used to display a quote. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docsv2/components/button/page.mdx
[uncategorized] ~14-~14: Loose punctuation mark.
Context: ...m in forms, dialogs, and more. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (7)
docs/app/docsv2/components/callout/docs/codeUsage.js (1)
35-35: LGTM!The default export is correctly implemented.
docs/app/docsv2/components/callout/page.mdx (1)
1-4: LGTM!The imports are correctly structured and all necessary components are imported.
docs/app/docsv2/components/card/page.mdx (3)
1-4: Import Declarations Are Clear
The imports forDocumentation,Card,Avatar, andcodeUsageare well-organized and use clear aliasing. The paths look correct given your project structure.
9-11: Component Hero and Card Usage Look Good
The integration of<Documentation.ComponentHero>with the providedcodeUsageand the usage of theCardandAvatarcomponents to showcase an example are implemented correctly. The fallback "PP" in the Avatar seems appropriate for "Peter Parker."
20-22: Component Closure Is Correct
The closing tags for<Card>,<Documentation.ComponentHero>, and<Documentation>are properly placed, ensuring a well-structured component layout.docs/app/docsv2/components/em/page.mdx (1)
1-5: LGTM! Well-structured imports and organization.The imports are properly organized and the component dependencies are correctly specified.
docs/app/docsv2/components/button/docs/variantCodeUsage.js (1)
1-9: Apply the same improvements as suggested for other usage files.This file has the same structure as
colorCodeUsage.jsandsizeCodeUsage.js. Please apply the same error handling and abstraction improvements suggested in the previous comments.
| code: `import Em from "@radui/ui/Em" | ||
|
|
||
| const EmExample = () => ( | ||
| <div> | ||
| <Text> | ||
| I have a dream of a scene between the green hills. | ||
| <br /> | ||
| <Em>Clouds</Em> pull away and the sunlight's revealed. | ||
| <br /> | ||
| People don't talk about keeping it <Em>real</Em>. | ||
| <br /> | ||
| <Em>It's understood</Em> that they actually will. | ||
| </Text> | ||
| </div> | ||
| )` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add missing Text component import.
The example code uses the Text component but doesn't import it. Add the import statement to make the example complete.
const code = {
javascript: {
code: `import Em from "@radui/ui/Em"
+import Text from "@radui/ui/Text"
const EmExample = () => (📝 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.
| code: `import Em from "@radui/ui/Em" | |
| const EmExample = () => ( | |
| <div> | |
| <Text> | |
| I have a dream of a scene between the green hills. | |
| <br /> | |
| <Em>Clouds</Em> pull away and the sunlight's revealed. | |
| <br /> | |
| People don't talk about keeping it <Em>real</Em>. | |
| <br /> | |
| <Em>It's understood</Em> that they actually will. | |
| </Text> | |
| </div> | |
| )` | |
| code: `import Em from "@radui/ui/Em" | |
| import Text from "@radui/ui/Text" | |
| const EmExample = () => ( | |
| <div> | |
| <Text> | |
| I have a dream of a scene between the green hills. | |
| <br /> | |
| <Em>Clouds</Em> pull away and the sunlight's revealed. | |
| <br /> | |
| People don't talk about keeping it <Em>real</Em>. | |
| <br /> | |
| <Em>It's understood</Em> that they actually will. | |
| </Text> | |
| </div> | |
| )` |
| import { getSourceCodeFromPath } from '@/utils/parseSourceCode'; | ||
|
|
||
| const buttonColorSourceCode = await getSourceCodeFromPath('docs/app/docs/components/button/examples/ButtonColor.tsx'); | ||
|
|
||
| export const code = { | ||
| javascript: { | ||
| code: buttonColorSourceCode | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for source code retrieval.
The source code retrieval could fail if the file path is incorrect or the file is not accessible. Consider wrapping the operation in a try-catch block.
import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
-const buttonColorSourceCode = await getSourceCodeFromPath('docs/app/docs/components/button/examples/ButtonColor.tsx');
+let buttonColorSourceCode;
+try {
+ buttonColorSourceCode = await getSourceCodeFromPath('docs/app/docs/components/button/examples/ButtonColor.tsx');
+} catch (error) {
+ console.error('Failed to load button color example:', error);
+ buttonColorSourceCode = '// Error loading example code';
+}
export const code = {
javascript: {
code: buttonColorSourceCode
}
};📝 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.
| import { getSourceCodeFromPath } from '@/utils/parseSourceCode'; | |
| const buttonColorSourceCode = await getSourceCodeFromPath('docs/app/docs/components/button/examples/ButtonColor.tsx'); | |
| export const code = { | |
| javascript: { | |
| code: buttonColorSourceCode | |
| } | |
| }; | |
| import { getSourceCodeFromPath } from '@/utils/parseSourceCode'; | |
| let buttonColorSourceCode; | |
| try { | |
| buttonColorSourceCode = await getSourceCodeFromPath('docs/app/docs/components/button/examples/ButtonColor.tsx'); | |
| } catch (error) { | |
| console.error('Failed to load button color example:', error); | |
| buttonColorSourceCode = '// Error loading example code'; | |
| } | |
| export const code = { | |
| javascript: { | |
| code: buttonColorSourceCode | |
| } | |
| }; |
| {variants.map((variant, index) => { | ||
| return <div key={index} className='flex items-center gap-4'> | ||
| {sizes.map((size, index) => { | ||
| return <Button key={index} size={size} variant={variant} color='pink'>Button</Button> | ||
| })} | ||
| </div> | ||
| })} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid using array indices as React keys.
Using array indices as keys can lead to issues with React's reconciliation process when items are reordered or removed.
- {variants.map((variant, index) => {
- return <div key={index} className='flex items-center gap-4'>
- {sizes.map((size, index) => {
- return <Button key={index} size={size} variant={variant} color='pink'>Button</Button>
+ {variants.map((variant) => {
+ return <div key={variant} className='flex items-center gap-4'>
+ {sizes.map((size) => {
+ return <Button key={`${variant}-${size}`} size={size} variant={variant} color='pink'>Button</Button>
})}
</div>
})}📝 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 items-center gap-4'> | |
| {sizes.map((size, index) => { | |
| return <Button key={index} size={size} variant={variant} color='pink'>Button</Button> | |
| })} | |
| </div> | |
| })} | |
| {variants.map((variant) => { | |
| return <div key={variant} className='flex items-center gap-4'> | |
| {sizes.map((size) => { | |
| return <Button key={`${variant}-${size}`} size={size} variant={variant} color='pink'>Button</Button> | |
| })} | |
| </div> | |
| })} |
| const buttonStyleDescription = { | ||
| solid: 'Solid buttons are the most common type of button. They have a solid background color and a border.', | ||
| soft: 'Soft buttons have a soft background color and a border.', | ||
| outline: 'Outline buttons have a border and a background color.', | ||
| ghost: 'Ghost buttons have a border and a background color.', | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Update button variant descriptions for accuracy.
The descriptions for 'outline' and 'ghost' buttons are incorrect:
- Outline buttons should be described as having only a border with transparent background.
- Ghost buttons should be described as having no border or background until hovered.
const buttonStyleDescription = {
solid: 'Solid buttons are the most common type of button. They have a solid background color and a border.',
soft: 'Soft buttons have a soft background color and a border.',
- outline: 'Outline buttons have a border and a background color.',
- ghost: 'Ghost buttons have a border and a background color.',
+ outline: 'Outline buttons have only a border with transparent background.',
+ ghost: 'Ghost buttons have no border or background until hovered.',
};📝 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.
| const buttonStyleDescription = { | |
| solid: 'Solid buttons are the most common type of button. They have a solid background color and a border.', | |
| soft: 'Soft buttons have a soft background color and a border.', | |
| outline: 'Outline buttons have a border and a background color.', | |
| ghost: 'Ghost buttons have a border and a background color.', | |
| }; | |
| const buttonStyleDescription = { | |
| solid: 'Solid buttons are the most common type of button. They have a solid background color and a border.', | |
| soft: 'Soft buttons have a soft background color and a border.', | |
| outline: 'Outline buttons have only a border with transparent background.', | |
| ghost: 'Ghost buttons have no border or background until hovered.', | |
| }; |
2 participants
Summary by CodeRabbit