Conversation
WalkthroughThis change introduces a new ESLint rule in the configuration and updates the Rad UI documentation. Numerous documentation components and source examples (both in the primary docs and the legacy “docsv2” folder) have been removed or replaced. New exports for structured code usage examples (e.g. tables for component props, SVG helper components) have been added. Navigation and layout components have been refactored to use Next.js’s Link component and improved type annotations, and documentation paths have been updated from Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant N as NavBar
participant L as Next.js Link
participant D as Docs Page
U->>N: Click on "Docs" link
N->>L: Route to new URL (/docs/...)
L->>D: Load updated documentation page
D-->>U: Render content
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/aspect-ratio/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/docs/components/avatar/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/docs/components/badge/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.
✨ 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: 5
🔭 Outside diff range comments (2)
docs/app/docs/components/visually-hidden/docs/codeUsage.js (1)
3-9: 🛠️ Refactor suggestionFix code example issues and improve best practices.
The code example has several issues:
- The import statement has an extra quotation mark
- There's a typo in the component name
- The
styleprop is redundant asVisuallyHiddenalready handles hiding contentApply this diff to fix the issues:
-import VisuallyHidden from "@radui/ui/VisuallyHidden"" +import VisuallyHidden from "@radui/ui/VisuallyHidden" -const VisualltHiddenExample = () => ( - <VisuallyHidden asChild style={{display: "none"}}> +const VisuallyHiddenExample = () => ( + <VisuallyHidden asChild> <span>This is a visually hidden text</span> </VisuallyHidden> )docs/app/docs/components/callout/docs/codeUsage.js (1)
3-14: 🛠️ Refactor suggestionAdd missing import statement for BookmarkIcon.
The code example is missing the import statement for the
BookmarkIconcomponent, which could confuse users trying to implement this example.Add the import statement:
import Callout from "@radui/ui/Callout"; import Text from "@radui/ui/Text"; +import { BookmarkIcon } from "@radui/ui/icons";
🧹 Nitpick comments (35)
docs/app/docs/components/separator/docs/codeUsage.js (1)
41-53: Enhance prop documentation clarity and completeness.The table structure is good, but the prop documentation could be more detailed and precise:
- The 'color' prop's type should specify accepted values (e.g., CSS color values, theme colors)
- The descriptions could be more comprehensive
- The 'id' field in data objects appears redundant with 'prop'
Consider this improved version:
export const SeparatorTable = { 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 separator', id: 'color'}, - {prop: 'orientation', type: 'horizontal | vertical', default: 'horizontal', description: 'orientation of the separator', id: 'orientation'}, + { + prop: 'color', + type: 'CSS color | theme.color', + default: 'null', + description: 'Sets the separator color. Accepts any valid CSS color value or theme color key.' + }, + { + prop: 'orientation', + type: 'horizontal | vertical', + default: 'horizontal', + description: 'Controls the separator direction. Use horizontal for row dividers and vertical for column dividers.' + } ] };docs/app/docs/components/visually-hidden/docs/codeUsage.js (1)
13-24: Enhance props documentation and remove empty line.
- Remove the empty line in the data array
- Consider adding documentation for other common props
- Enhance the description to better explain the prop's purpose
Apply this diff to improve the documentation:
export const VisuallyHiddenTable = { columns: [ {name: 'Prop', id: 'prop'}, {name: 'Type', id: 'type'}, {name: 'Default', id: 'default'}, {name: 'Description', id: 'description'}, ], data : [ - {prop: 'asChild', type: 'boolean', default: 'false', description: 'renders the children in desired element', id: 'asChild'}, - + {prop: 'asChild', type: 'boolean', default: 'false', description: 'When true, the component will render its children in the DOM element of your choice instead of a default element', id: 'asChild'}, + {prop: 'as', type: 'string | component', default: 'span', description: 'HTML element or component to render as', id: 'as'}, + {prop: 'className', type: 'string', default: 'undefined', description: 'Additional CSS classes to apply to the component', id: 'className'} ] }docs/app/docs/components/code/docs/codeUsage.js (2)
1-21: Improve code examples for better documentation.The code examples could be enhanced for better clarity and maintainability:
const code = { javascript: { code: `import Code from "@radui/ui/Code" const CodeExample = () => ( <div> <Code>console.log('This is some code')</Code> </div> )` }, css: { code: `.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 + /* Horizontal padding for readability, vertical for text alignment */ + padding: 2px 10px; display: inline-block; border-radius: 4px; - font-size:12px; + font-size: 0.75rem; }` }, }
23-33: Enhance CodeTable documentation structure.Consider the following improvements:
+/** @type {Object} CodeTable - Documentation for Code component props */ 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: 'undefined', + description: 'Custom accent color for the code block. When provided, overrides the default theme color.', + id: 'color' + }, ] }docs/app/docs/layout.tsx (2)
12-15: Remove unnecessary empty lines.Consider removing the empty lines after the component definition for better code organization.
const Layout = ({ children }: Doc) => { - - - return (
17-20: Remove redundant flex container.The div wrapper with 'md:flex' class is redundant as the parent already has 'md:flex'.
<div className= "md:flex max-h-screen overflow-y-auto"> - <div className='md:flex'> <Navigation customSections={docsNavigationSections} /> - </div>docs/app/docs/components/blockquote/docs/codeUsage.js (1)
23-34: Consider enhancing the props documentation.The
BlockQuoteTableprovides good structure but could be improved:
- The
idfield in the data array seems redundant as it duplicates thepropvalue.- Consider documenting additional props like
childrenwhich is implicitly required based on the usage example.Apply this diff to enhance the documentation:
export const BlockQuoteTable = { 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 quote', id: 'color'}, + {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the quote'}, + {prop: 'children', type: 'ReactNode', default: 'null', description: 'Content to be displayed within the quote'} ] }docs/app/docs/components/badge/docs/codeUsage.js (3)
3-9: Enhance the JavaScript example to demonstrate all available props.The current example is too basic and doesn't showcase the
colorprop documented in the BadgeTable. Consider expanding it to demonstrate all supported features.const BadgeExample = () => ( <div> - <Badge>Badge</Badge> + <Badge>Default Badge</Badge> + <Badge color="primary">Primary Badge</Badge> + <Badge color="secondary">Secondary Badge</Badge> </div> )
26-37: Improve the BadgeTable implementation for better maintainability.Consider the following improvements:
- The export name could be more specific (e.g.,
BadgePropsTable)- The default value should use consistent JavaScript notation
- The color prop description could be more detailed with available options
-export const BadgeTable = { +export const BadgePropsTable = { 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 component', id: 'color'}, + { + prop: 'color', + type: "'primary' | 'secondary' | string", + default: 'undefined', + description: 'Sets the accent color of the badge. Use semantic values "primary"/"secondary" or any valid color string.', + id: 'color' + }, ] }Additionally, consider adding TypeScript types to improve maintainability:
type Column = { name: string; id: string; } type PropData = { prop: string; type: string; default: string; description: string; id: string; } type BadgePropsTable = { columns: Column[]; data: PropData[]; }
1-38: Consider enhancing the documentation with additional sections.The documentation would benefit from including:
- Accessibility considerations for the Badge component
- Best practices and common use cases
- Common pitfalls and how to avoid them
Would you like me to provide a template for these additional sections?
docs/components/navigation/Navigation.tsx (3)
121-160: Consider cleaning up commented-out component entries.These commented-out component entries could cause confusion about component availability. If these components are planned for future implementation, consider tracking them in issues instead.
257-257: Consider using a more specific type instead of 'any'.The
customSectionsprop type is currently set toany, which defeats TypeScript's type checking benefits. Consider defining a proper interface that matches the structure of thesectionsarray.-const Navigation = ({customSections}:{customSections?: any}) => { +interface Section { + title: string; + type?: 'CATEGORY'; + items: Array<{ + title: string; + path: string; + is_new?: boolean; + }>; +} + +const Navigation = ({customSections}:{customSections?: Section[]}) => {
261-261: Consider moving the NavBarContext type to a shared definition.The inline type assertion could be moved to the context definition for better reusability and maintainability.
// In NavBarContext.ts +interface NavBarContextType { + isDocsNavOpen: boolean; + setIsDocsNavOpen: (isDocsNavOpen: boolean) => void; +} + +export const NavBarContext = createContext<NavBarContextType | undefined>(undefined); // In Navigation.tsx -const {isDocsNavOpen,setIsDocsNavOpen} = useContext(NavBarContext) as {isDocsNavOpen: boolean, setIsDocsNavOpen: (isDocsNavOpen: boolean) => void}; +const {isDocsNavOpen,setIsDocsNavOpen} = useContext(NavBarContext) as NavBarContextType;docs/app/docs/components/callout/docs/codeUsage.js (2)
8-8: Consider using a semantic color name.Using "red" as a color prop value might not be the best practice for documentation. Consider using a semantic color name that reflects the error state being demonstrated.
- <Callout color="red"> + <Callout color="error">
31-33: Add accessibility attributes to the SVG icon.The SVG icon should include ARIA attributes and a title for better 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>; +export const BookmarkIcon = () => { + 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" + > + <title>Bookmark</title> + <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" + /> + </svg> + ); +};docs/app/docs/components/avatar/docs/codeUsage.js (2)
1-45: Consider enhancing the code examples for completeness.The examples could be improved to:
- Use TypeScript for better type safety
- Demonstrate all documented props including the
colorprop variations- Use CSS variables for dimensions and border-radius
Here's a suggested improvement for the JavaScript example:
javascript: { - code: `import Avatar from "@radui/ui/Avatar" + code: `import { Avatar } from "@radui/ui/Avatar" + + type AvatarExampleProps = { + className?: string; + } - const AvatarExample = () => ( + const AvatarExample: React.FC<AvatarExampleProps> = () => ( <div style={{ display: 'flex', gap: 20 }}> <Avatar src="https://i.pravatar.cc/1000" /> <Avatar fallback="RU" /> <Avatar fallback="AA" color='pink'/> + <Avatar fallback="JD" color='blue'/> </div> )`
48-60: Enhance prop documentation for better clarity and type safety.The documentation structure could be improved to:
- Remove redundant 'id' fields
- Provide more specific type information
- Add validation constraints to descriptions
Here's a suggested improvement:
export const avatarBasicUsageExample = { columns: [ - {name: 'Prop', id: 'prop'}, - {name: 'Type', id: 'type'}, - {name: 'Default', id: 'default'}, - {name: 'Description', id: 'description'}, + {name: 'Prop'}, + {name: 'Type'}, + {name: 'Default'}, + {name: 'Description'}, ], data: [ - {prop: 'src', type: 'string', default: 'null', description: 'URL of the image to be displayed as the avatar.', id: 'src'}, - {prop: 'fallback', type: 'string', default: 'null', description: 'Text initials or placeholder displayed when the image fails to load or if no src is provided.', id: 'fallback'}, - {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the text initials or placeholder displayed when the image fails to load or if no src is provided.', id: 'color'}, + { + prop: 'src', + type: 'string', + default: 'null', + description: 'URL of the image to be displayed as the avatar. Must be a valid image URL.' + }, + { + prop: 'fallback', + type: 'string', + default: 'null', + description: 'Text initials or placeholder displayed when the image fails to load or if no src is provided. Recommended to use 1-2 characters for best display.' + }, + { + prop: 'color', + type: "'pink' | 'blue' | string", + default: 'null', + description: 'Accent color for the fallback background. Can use predefined values like "pink", "blue" or any valid CSS color value.' + } ] }docs/app/docs/components/kbd/page.mdx (1)
6-15: Fix indentation in JSX code.The JSX code has inconsistent indentation. Consider fixing it for better readability:
- <Documentation title='Kbd' description={` - Kbd is a component that can be used to display keyboard keys. - `}> - <Documentation.ComponentHero codeUsage={codeUsage}> - <Card className="flex items-center justify-center bg-gray-50 w-[80%] h-24" > - <Kbd>Ctrl + C</Kbd> - </Card> - </Documentation.ComponentHero> - - </Documentation> +<Documentation title='Kbd' description={` + Kbd is a component that can be used to display keyboard keys. +`}> + <Documentation.ComponentHero codeUsage={codeUsage}> + <Card className="flex items-center justify-center bg-gray-50 w-[80%] h-24"> + <Kbd>Ctrl + C</Kbd> + </Card> + </Documentation.ComponentHero> +</Documentation>🧰 Tools
🪛 LanguageTool
[uncategorized] ~8-~8: Loose punctuation mark.
Context: ...used to display keyboard keys. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docs/components/text/page.mdx (1)
5-7: Simplified Documentation Component Usage & Description Formatting
The<Documentation>component is now directly used with cleartitleanddescriptionprops, which simplifies the layout by removing unnecessary wrappers and metadata exports (such as the removedPAGE_NAMEand corresponding SEO metadata). Ensure that SEO metadata is now managed elsewhere in the system.Minor Note: The multi-line template literal used for the
descriptionprop may introduce extra whitespace in the rendered output. If this is not desired, consider trimming the string (e.g., using.trim()) to ensure consistent formatting.🧰 Tools
🪛 LanguageTool
[uncategorized] ~7-~7: Loose punctuation mark.
Context: ...lay customizable text content. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docs/components/progress/docs/codeUsage.js (2)
3-11: Enhance the JavaScript example to showcase more features.The current example is quite basic and doesn't demonstrate key features like:
- Different color variations
- Custom styling
- Progress states (indeterminate, complete)
- Accessibility attributes
Consider expanding the example:
const ProgressExample = () => ( <div style={{ width: "90%" }}> - <Progress value={90} /> + {/* Basic usage */} + <Progress value={90} /> + + {/* Custom color */} + <Progress value={75} color="blue" /> + + {/* Indeterminate state */} + <Progress /> + + {/* With ARIA labels */} + <Progress + value={60} + aria-label="Loading progress" + aria-valuetext="60 percent complete" + /> </div> )
14-27: Document the source of CSS variables.The CSS example uses design system variables (
--rad-ui-color-*) without explaining where these variables are defined or how to customize them.Add a comment explaining the CSS variable system:
.rad-ui-progress { + /* Uses Rad UI's design system colors. Import '@radui/ui/styles' to access these variables */ background: var(--rad-ui-color-sand-600); overflow: hidden; height:32px; border-radius: 8px; }docs/app/docs/components/heading/page.mdx (1)
7-21: Simplified and Focused Documentation Component StructureThis refactor directly returns the
<Documentation>component with its nested content, cleanly presenting the heading examples without extra wrappers or exports. The streamlined approach improves clarity and maintainability.
As a nitpick, consider aligning the closing</Documentation>tag indentation with the opening tag to maintain consistency.🧰 Tools
🪛 LanguageTool
[uncategorized] ~9-~9: Loose punctuation mark.
Context: ... display titles and subtitles. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docs/components/switch/docs/codeUsage.js (2)
3-10: Enhance the JavaScript example to demonstrate the documented props.The example is too basic and doesn't showcase the
colorprop that's documented in the props table. Consider adding a more comprehensive example.const SwitchExample = () => ( <div> - <Switch /> + {/* Basic usage */} + <Switch /> + + {/* With custom accent color */} + <Switch color="blue" /> </div> )
13-58: Document CSS variable requirements in SCSS.The SCSS uses CSS variables like
--rad-ui-color-accent-500but doesn't indicate where these should be defined. Consider adding a comment block explaining the required CSS variables./** Switch */ +/** Required CSS Variables: + * --rad-ui-color-accent-50: Background color for the switch handle + * --rad-ui-color-accent-500: Default switch color + * --rad-ui-color-accent-900: Active switch color + */ .rad-ui-Switch {docs/app/docs/components/toggle/docs/codeUsage.js (1)
3-18: Add missing imports and improve type safety in the example code.The example code could be improved by:
- Adding the missing React import
- Including the Icon import statement
- Adding TypeScript types for better documentation
code: ` +import React from 'react'; import Toggle from "@radui/ui/Toggle"; +import { Icon } from "@radui/ui/icons"; const ToggleExample = () => { const [pressed, setPressed] = React.useState(false) - const handleChange = (newPressed) => { + const handleChange = (newPressed: boolean) => { setPressed(newPressed) }docs/app/docs/components/toggle-group/docs/codeUsage.js (2)
19-24: Add example for thecolorprop.The code example should demonstrate the usage of the
colorprop that is documented in the props table.<ToggleGroup defaultPressed={false} onChange={handleChange} type="multiple" items={items} + color="blue" />
65-70: Add required/optional status to the table structure.Consider adding a column to indicate whether each prop is required or optional.
columns: [ {name: 'Prop', id: 'prop'}, {name: 'Type', id: 'type'}, {name: 'Default', id: 'default'}, + {name: 'Required', id: 'required'}, {name: 'Description', id: 'description'}, ],docs/app/docs/components/aspect-ratio/docs/codeUsage.js (1)
1-17: Enhance the code example for better documentation.Consider the following improvements to make the example more comprehensive and maintainable:
const code = { javascript: { - code: `import AspectRatio from "@radui/ui/AspectRatio" + code: `import { AspectRatio } from "@radui/ui/AspectRatio"; -const AspectRatioExample = () => ( +interface AspectRatioExampleProps {} + +export const AspectRatioExample: React.FC<AspectRatioExampleProps> = () => ( <AspectRatio ratio='16/9'> <img - style={{ width: '100%', height: '100%', objectFit: 'cover' }} - className="Image" - src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg" - alt="Landscape photograph" - /> + style={{ + width: '100%', + height: '100%', + objectFit: 'cover', + }} + className="aspect-ratio-image" + src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" + alt="Landscape photograph" + /> </AspectRatio> )` } }docs/app/docs/contributing/contributing-to-rad-ui/page.mdx (7)
12-13: Eliminate Extraneous Whitespace in Button Tag
There is an extra space in the opening tag of the Button component. Consider removing it for cleaner JSX syntax.-<Button >Star us on GitHub</Button> +<Button>Star us on GitHub</Button>
15-18: Discord Section Readability
The "Join the Discord" section is clear. For conciseness and improved style, you might consider phrasing like “Join our friendly and active Discord community” rather than “an active and a friendly community”.
19-25: Issue Discovery Section is Informative
This section provides useful guidance on how to find issues to work on. To enhance clarity, consider adding a direct link to the GitHub issues page or “Good First Issues” if available.
31-34: Minor Punctuation Fix in Commit Instructions
There is a missing space after the period in “make your changes.Commit your work…”. A slight edit will improve readability.-Follow the issue description and make your changes.Commit your work with a clear message +Follow the issue description and make your changes. Commit your work with a clear message
44-50: PR Submission Guidelines – Consider Refining Sentence Structure
The guidelines for raising a pull request are practical. However, the three successive sentences beginning with “If you're...” may come across as repetitive, and the phrase “a lot of visual changes” could be refined for precision. Consider a reworded version:-If you're fixing an issue, make sure to reference the issue number in the description. If you're adding a new feature, make sure to include a description of the feature and how it works. If your PR has a lot of visual changes, please include screenshots or a video demonstrating the changes or additions. +For issue fixes, reference the corresponding issue number in your description. For new features, describe the functionality and its benefits. For PRs with significant visual changes, consider including screenshots or a video demonstration.🧰 Tools
🪛 LanguageTool
[style] ~50-~50: Consider using a different verb for a more formal wording.
Context: ...nd any relevant information. If you're fixing an issue, make sure to reference the is...(FIX_RESOLVE)
[style] ~50-~50: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...iption of the feature and how it works. If your PR has a lot of visual changes, pl...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~50-~50: The phrase ‘a lot of’ might be wordy and overused. Consider using an alternative.
Context: ...eature and how it works. If your PR has a lot of visual changes, please include screensh...(A_LOT_OF)
59-61: Improve Closing Remarks for a Stronger Call-to-Action
The final congratulatory message is welcoming, yet it could benefit from slightly more dynamic phrasing. Consider rewording to better celebrate the contributor’s effort and invite ongoing engagement. For example:-Congratulations! You've contributed to Rad UI. This is just a first step. We'll be happy to have you as a contributor and work together to make Rad UI better. +Congratulations on your contribution to Rad UI! This is just the beginning, and we look forward to your continued involvement as we enhance the project together.🧰 Tools
🪛 LanguageTool
[style] ~60-~60: The wording of this phrase can be improved.
Context: ...u as a contributor and work together to make Rad UI better.(MAKE_STYLE_BETTER)
62-62: Remove Trailing Line Marker if Unintentional
Line 62 appears to be a stray marker or an artifact. If it was not intended as part of the content, please remove it to maintain document cleanliness.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (101)
docs/.eslintrc.json(1 hunks)docs/app/docs/components/accordion/page.js(0 hunks)docs/app/docs/components/aspect-ratio/docs/codeUsage.js(1 hunks)docs/app/docs/components/aspect-ratio/page.js(0 hunks)docs/app/docs/components/avatar-group/page.js(0 hunks)docs/app/docs/components/avatar/docs/codeUsage.js(1 hunks)docs/app/docs/components/avatar/page.js(0 hunks)docs/app/docs/components/badge/docs/codeUsage.js(1 hunks)docs/app/docs/components/badge/page.js(0 hunks)docs/app/docs/components/blockquote/docs/codeUsage.js(1 hunks)docs/app/docs/components/blockquote/page.js(0 hunks)docs/app/docs/components/blockquote/page.mdx(1 hunks)docs/app/docs/components/button/docs/codeUsage.js(1 hunks)docs/app/docs/components/button/page.js(0 hunks)docs/app/docs/components/callout/docs/codeUsage.js(2 hunks)docs/app/docs/components/callout/page.js(0 hunks)docs/app/docs/components/card/page.js(0 hunks)docs/app/docs/components/card/page.mdx(1 hunks)docs/app/docs/components/checkbox/page.js(0 hunks)docs/app/docs/components/code/docs/codeUsage.js(1 hunks)docs/app/docs/components/code/page.js(0 hunks)docs/app/docs/components/collapsible/page.js(0 hunks)docs/app/docs/components/context-menu/page.js(0 hunks)docs/app/docs/components/dialog/page.js(0 hunks)docs/app/docs/components/dropdown/page.js(0 hunks)docs/app/docs/components/em/page.js(0 hunks)docs/app/docs/components/form/page.js(0 hunks)docs/app/docs/components/heading/page.mdx(2 hunks)docs/app/docs/components/kbd/page.mdx(2 hunks)docs/app/docs/components/popover/page.js(0 hunks)docs/app/docs/components/progress/docs/codeUsage.js(1 hunks)docs/app/docs/components/progress/page.js(0 hunks)docs/app/docs/components/radio/page.js(0 hunks)docs/app/docs/components/scroll-area/page.js(0 hunks)docs/app/docs/components/select/page.js(0 hunks)docs/app/docs/components/separator/docs/codeUsage.js(1 hunks)docs/app/docs/components/separator/page.js(0 hunks)docs/app/docs/components/slider/page.js(0 hunks)docs/app/docs/components/strong/page.js(0 hunks)docs/app/docs/components/switch/docs/codeUsage.js(1 hunks)docs/app/docs/components/switch/page.js(0 hunks)docs/app/docs/components/text/page.mdx(2 hunks)docs/app/docs/components/toggle-group/ToggleGroupWrapper.js(0 hunks)docs/app/docs/components/toggle-group/docs/codeUsage.js(1 hunks)docs/app/docs/components/toggle-group/page.js(0 hunks)docs/app/docs/components/toggle/ToggleWrapper.js(0 hunks)docs/app/docs/components/toggle/docs/codeUsage.js(1 hunks)docs/app/docs/components/toggle/page.js(0 hunks)docs/app/docs/components/tooltip/page.js(0 hunks)docs/app/docs/components/visually-hidden/docs/codeUsage.js(1 hunks)docs/app/docs/components/visually-hidden/page.js(0 hunks)docs/app/docs/contributing/before-you-start/page.mdx(1 hunks)docs/app/docs/contributing/before-you-start/page.tsx(0 hunks)docs/app/docs/contributing/contributing-to-rad-ui/StarButton.tsx(0 hunks)docs/app/docs/contributing/contributing-to-rad-ui/page.mdx(1 hunks)docs/app/docs/contributing/contributing-to-rad-ui/page.tsx(0 hunks)docs/app/docs/contributing/setting-up-dev-environment/page.mdx(1 hunks)docs/app/docs/contributing/setting-up-dev-environment/page.tsx(0 hunks)docs/app/docs/docsIndex.js(0 hunks)docs/app/docs/docsNavigationSections.tsx(6 hunks)docs/app/docs/first-steps/installation/page.js(0 hunks)docs/app/docs/first-steps/introduction/page.js(0 hunks)docs/app/docs/first-steps/usage/page.js(0 hunks)docs/app/docs/layout.tsx(1 hunks)docs/app/docs/principles/accessibility/page.js(0 hunks)docs/app/docsv2/components/accordion/docs/accordion_anatomy.tsx(0 hunks)docs/app/docsv2/components/accordion/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/accordion/docs/example_1.tsx(0 hunks)docs/app/docsv2/components/aspect-ratio/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/avatar-group/docs/avatarGroup_anatomy.tsx(0 hunks)docs/app/docsv2/components/avatar-group/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/avatar-group/docs/example_1.tsx(0 hunks)docs/app/docsv2/components/avatar/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/badge/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/blockquote/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/button/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/button/docs/colorCodeUsage.js(0 hunks)docs/app/docsv2/components/button/docs/sizeCodeUsage.js(0 hunks)docs/app/docsv2/components/button/docs/variantCodeUsage.js(0 hunks)docs/app/docsv2/components/button/examples/ButtonColor.tsx(0 hunks)docs/app/docsv2/components/button/examples/ButtonSizes.tsx(0 hunks)docs/app/docsv2/components/button/examples/ButtonVariants.tsx(0 hunks)docs/app/docsv2/components/callout/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/card/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/code/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/em/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/heading/page.mdx(0 hunks)docs/app/docsv2/components/kbd/page.mdx(0 hunks)docs/app/docsv2/components/progress/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/separator/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/strong/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/switch/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/text/page.mdx(0 hunks)docs/app/docsv2/components/toggle-group/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/toggle/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/tooltip/docs/codeUsage.js(0 hunks)docs/app/docsv2/components/visually-hidden/docs/codeUsage.js(0 hunks)docs/app/docsv2/layout.tsx(0 hunks)docs/components/Main/NavBar/index.js(2 hunks)docs/components/layout/Documentation/Documentation.js(2 hunks)docs/components/navigation/Navigation.tsx(2 hunks)
💤 Files with no reviewable changes (74)
- docs/app/docsv2/components/kbd/page.mdx
- docs/app/docsv2/components/heading/page.mdx
- docs/app/docs/components/dialog/page.js
- docs/app/docsv2/components/button/docs/sizeCodeUsage.js
- docs/app/docs/components/progress/page.js
- docs/app/docs/components/scroll-area/page.js
- docs/app/docsv2/components/tooltip/docs/codeUsage.js
- docs/app/docs/components/dropdown/page.js
- docs/app/docs/components/checkbox/page.js
- docs/app/docs/components/collapsible/page.js
- docs/app/docsv2/components/button/examples/ButtonColor.tsx
- docs/app/docs/components/radio/page.js
- docs/app/docsv2/components/accordion/docs/accordion_anatomy.tsx
- docs/app/docs/components/form/page.js
- docs/app/docsv2/components/accordion/docs/example_1.tsx
- docs/app/docsv2/components/avatar-group/docs/example_1.tsx
- docs/app/docsv2/components/strong/docs/codeUsage.js
- docs/app/docsv2/components/button/docs/variantCodeUsage.js
- docs/app/docs/components/context-menu/page.js
- docs/app/docs/contributing/contributing-to-rad-ui/page.tsx
- docs/app/docsv2/components/button/docs/colorCodeUsage.js
- docs/app/docs/components/button/page.js
- docs/app/docsv2/components/avatar-group/docs/avatarGroup_anatomy.tsx
- docs/app/docsv2/components/button/examples/ButtonVariants.tsx
- docs/app/docs/components/toggle-group/page.js
- docs/app/docsv2/components/button/examples/ButtonSizes.tsx
- docs/app/docsv2/components/em/docs/codeUsage.js
- docs/app/docs/components/select/page.js
- docs/app/docs/contributing/contributing-to-rad-ui/StarButton.tsx
- docs/app/docs/principles/accessibility/page.js
- docs/app/docsv2/components/progress/docs/codeUsage.js
- docs/app/docs/components/strong/page.js
- docs/app/docs/components/separator/page.js
- docs/app/docsv2/components/avatar/docs/codeUsage.js
- docs/app/docs/components/badge/page.js
- docs/app/docsv2/components/button/docs/codeUsage.js
- docs/app/docsv2/components/card/docs/codeUsage.js
- docs/app/docs/components/avatar/page.js
- docs/app/docsv2/components/blockquote/docs/codeUsage.js
- docs/app/docs/components/visually-hidden/page.js
- docs/app/docs/components/toggle-group/ToggleGroupWrapper.js
- docs/app/docsv2/components/text/page.mdx
- docs/app/docsv2/components/code/docs/codeUsage.js
- docs/app/docs/components/avatar-group/page.js
- docs/app/docsv2/components/toggle/docs/codeUsage.js
- docs/app/docs/first-steps/usage/page.js
- docs/app/docs/components/tooltip/page.js
- docs/app/docs/docsIndex.js
- docs/app/docsv2/components/avatar-group/docs/codeUsage.js
- docs/app/docsv2/components/separator/docs/codeUsage.js
- docs/app/docs/components/slider/page.js
- docs/app/docs/contributing/before-you-start/page.tsx
- docs/app/docs/components/accordion/page.js
- docs/app/docsv2/components/aspect-ratio/docs/codeUsage.js
- docs/app/docsv2/components/accordion/docs/codeUsage.js
- docs/app/docsv2/components/badge/docs/codeUsage.js
- docs/app/docs/components/callout/page.js
- docs/app/docs/components/popover/page.js
- docs/app/docs/components/toggle/ToggleWrapper.js
- docs/app/docs/components/em/page.js
- docs/app/docsv2/layout.tsx
- docs/app/docs/components/code/page.js
- docs/app/docs/first-steps/introduction/page.js
- docs/app/docs/components/card/page.js
- docs/app/docsv2/components/callout/docs/codeUsage.js
- docs/app/docs/contributing/setting-up-dev-environment/page.tsx
- docs/app/docsv2/components/toggle-group/docs/codeUsage.js
- docs/app/docsv2/components/switch/docs/codeUsage.js
- docs/app/docs/components/blockquote/page.js
- docs/app/docs/components/toggle/page.js
- docs/app/docs/components/aspect-ratio/page.js
- docs/app/docs/first-steps/installation/page.js
- docs/app/docsv2/components/visually-hidden/docs/codeUsage.js
- docs/app/docs/components/switch/page.js
✅ Files skipped from review due to trivial changes (4)
- docs/app/docs/contributing/setting-up-dev-environment/page.mdx
- docs/app/docs/components/card/page.mdx
- docs/app/docs/contributing/before-you-start/page.mdx
- docs/components/layout/Documentation/Documentation.js
🧰 Additional context used
🪛 LanguageTool
docs/app/docs/contributing/contributing-to-rad-ui/page.mdx
[style] ~50-~50: Consider using a different verb for a more formal wording.
Context: ...nd any relevant information. If you're fixing an issue, make sure to reference the is...
(FIX_RESOLVE)
[style] ~50-~50: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...iption of the feature and how it works. If your PR has a lot of visual changes, pl...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~50-~50: The phrase ‘a lot of’ might be wordy and overused. Consider using an alternative.
Context: ...eature and how it works. If your PR has a lot of visual changes, please include screensh...
(A_LOT_OF)
[style] ~60-~60: The wording of this phrase can be improved.
Context: ...u as a contributor and work together to make Rad UI better.
(MAKE_STYLE_BETTER)
🔇 Additional comments (26)
docs/app/docs/components/button/docs/codeUsage.js (2)
1-58: Code object and its export should be removed.According to the AI summary, as part of the documentation restructuring, the
codeobject and its default export were meant to be removed. However, they are still present in the file.#!/bin/bash # Description: Check if the code object is still being used in the codebase # Search for imports of this file rg -l "from.*button/docs/codeUsage.*code" # Search for direct usage of the code object rg "code\.javascript|code\.scss" "docs/app"Also applies to: 64-64
Likely an incorrect or invalid review comment.
60-62: LGTM! SVG Arrow component looks good.The Arrow component is well-implemented with proper SVG attributes and path data. The use of
currentColorfor the fill allows for dynamic color inheritance from parent elements.docs/app/docs/components/separator/docs/codeUsage.js (1)
1-38: LGTM! Well-structured code examples.The code examples effectively demonstrate both horizontal and vertical separator usage, with clear SCSS styling that leverages CSS custom properties for theming.
docs/app/docs/components/code/docs/codeUsage.js (1)
35-35: LGTM!The default export is clean and follows standard practices.
docs/app/docs/layout.tsx (3)
1-4: LGTM! Well-structured imports and type definition.The imports are well-organized, and the type definition is clear and properly typed.
Also applies to: 7-9
21-27: LGTM! Well-structured content section.The content section has proper overflow handling and well-organized components with appropriate spacing.
32-32: LGTM! Proper export statement.The export statement follows React component export conventions.
docs/app/docs/components/blockquote/page.mdx (2)
10-12: LGTM! Well-formatted quote with proper attribution.The quote is properly formatted with quotation marks and includes clear attribution.
1-22: LGTM! Clean documentation structure.The documentation page is well-organized with:
- Clear component description
- Interactive example
- Props table integration
🧰 Tools
🪛 LanguageTool
[uncategorized] ~7-~7: Loose punctuation mark.
Context: ...te is used to display a quote. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
docs/components/navigation/Navigation.tsx (1)
5-5: LGTM! Import cleanup.The import statement has been optimized to only include the required
useContexthook.docs/app/docs/docsNavigationSections.tsx (1)
8-167: LGTM! Documentation paths are consistently updated and new Contributing section is well-structured.The changes look good:
- All documentation paths are consistently updated from
/docsv2/to/docs/.- The new "Contributing" section is well-organized with clear subsections for onboarding new contributors.
Also applies to: 124-141
docs/components/Main/NavBar/index.js (1)
4-4: LGTM! Navigation is improved using Next.js Link components.The changes enhance navigation by:
- Using Next.js's
Linkcomponent instead of<a>tags for client-side navigation.- Consistently updating documentation paths from
/docsv2/to/docs/.Also applies to: 7-7, 164-170, 172-178
docs/.eslintrc.json (1)
22-23: LGTM! ESLint configuration is updated.The addition of
"no-tabs": "off"rule is consistent with the documentation improvements.docs/app/docs/components/text/page.mdx (2)
2-2: Text Component Import Added
The new import for theTextcomponent from@radui/ui/Textis correctly added and supports its usage (see line 10). Please ensure the module path remains correct with respect to the new Docs V2 structure.
14-14: Component Closure Consistency
The closing</Documentation>tag correctly finalizes the simplified component structure. This adjustment aligns with the overall Docs V2 refactoring effort by directly returning the documentation component without additional wrapping elements.docs/app/docs/components/progress/docs/codeUsage.js (1)
1-45:Details
❓ Verification inconclusive
Verify the new location of this documentation.
Since this file is being removed as part of the documentation restructuring, ensure that this content is properly migrated to its new location.
Let's check for the new location of the Progress component documentation:
🏁 Script executed:
#!/bin/bash # Search for new Progress component documentation files fd -t f -e js -e jsx -e ts -e tsx -e mdx "Progress.*" docs/Length of output: 61
Verify the new location of the Progress component documentation content.
The initial search returned no results, so please double-check that the content previously indocs/app/docs/components/progress/docs/codeUsage.jshas been migrated to its intended new location. Consider doing a manual verification or re-running searches with alternative patterns (e.g., looking for keywords likeProgressExampleorProgressTable) to ensure that the documentation is correctly referenced in the updated structure.docs/app/docs/components/heading/page.mdx (1)
5-6: Removed Legacy Export Statements and ConstantsThe removal of obsolete items like the
PAGE_NAMEconstant and themetadataexport helps simplify the file, making it more aligned with the current documentation structure and reducing unnecessary code clutter.docs/app/docs/components/toggle/docs/codeUsage.js (1)
21-46: Well-structured CSS with proper theming and accessibility!The CSS implementation is excellent, using CSS custom properties for theming, handling component states appropriately, and including proper focus styles for accessibility.
docs/app/docs/contributing/contributing-to-rad-ui/page.mdx (8)
1-2: Import Statement Usage is Correct
The import of theButtoncomponent from@radui/ui/Buttonis clear and consistent with the usage later in the document.
5-7: Heading and Introduction are Well Structured
The “Contributing to Rad UI” heading and introductory paragraph are clear and provide a good overview.
8-11: Introduction Text is Encouraging and Clear
The opening paragraphs effectively invite contributions and explain how contributors can support the project, including a call-to-action to star the repository.
27-30: Branch Creation Instructions are Clear
The instructions for creating a new branch are straightforward and practical.
35-38: Commit Code Block is Appropriately Formatted
The code block showing the commit command is clear and correctly formatted.
39-43: Test Contribution Guidance is Clear
The instructions regarding adding tests are informative and set the correct expectations for new contributions.
52-55: PR Review Instructions are Concise and Clear
The "Wait for the PR to be reviewed" section clearly outlines the review process and expectations.
56-58: Merge Instructions are Straightforward
The instructions on merging the PR post-approval are clear and unambiguous.
| export const ProgressTable = { | ||
| 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 progress bar', id: 'color'}, | ||
| ] | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Expand the props documentation.
The ProgressTable only documents the color prop, missing several important props like:
valuemaxaria-labelaria-valuetext
Enhance the props table:
export const ProgressTable = {
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 progress bar', id: 'color'},
+ {prop: 'value', type: 'number', default: 'undefined', description: 'Current progress value. Omit for indeterminate state.', id: 'value'},
+ {prop: 'max', type: 'number', default: '100', description: 'Maximum value for calculating progress percentage', id: 'max'},
+ {prop: 'color', type: 'string', default: 'null', description: 'Accent color of the progress bar', id: 'color'},
+ {prop: 'aria-label', type: 'string', default: 'undefined', description: 'Accessible label for the progress bar', id: 'aria-label'},
+ {prop: 'aria-valuetext', type: 'string', default: 'undefined', description: 'Textual representation of the current value', id: 'aria-valuetext'}
]
};📝 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 ProgressTable = { | |
| 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 progress bar', id: 'color'}, | |
| ] | |
| }; | |
| export const ProgressTable = { | |
| columns: [ | |
| {name: 'Prop', id: 'prop'}, | |
| {name: 'Type', id: 'type'}, | |
| {name: 'Default', id: 'default'}, | |
| {name: 'Description', id: 'description'}, | |
| ], | |
| data: [ | |
| {prop: 'value', type: 'number', default: 'undefined', description: 'Current progress value. Omit for indeterminate state.', id: 'value'}, | |
| {prop: 'max', type: 'number', default: '100', description: 'Maximum value for calculating progress percentage', id: 'max'}, | |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent color of the progress bar', id: 'color'}, | |
| {prop: 'aria-label', type: 'string', default: 'undefined', description: 'Accessible label for the progress bar', id: 'aria-label'}, | |
| {prop: 'aria-valuetext', type: 'string', default: 'undefined', description: 'Textual representation of the current value', id: 'aria-valuetext'} | |
| ] | |
| }; |
| export const SwitchTable = { | ||
| 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 switch', id: 'color'}, | ||
| ] | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance props documentation for completeness.
The props table is missing several common Switch props. Consider adding:
checked(boolean) for controlled stateonChange(function) for state changesdisabled(boolean) for disabled state
Also, the color prop description could be more specific about acceptable values.
export const SwitchTable = {
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 switch', id: 'color'},
+ {prop: 'color', type: 'string', default: 'null', description: 'Custom accent color for the switch. Accepts any valid CSS color value.', id: 'color'},
+ {prop: 'checked', type: 'boolean', default: 'false', description: 'Controls the checked state of the switch', id: 'checked'},
+ {prop: 'onChange', type: '(checked: boolean) => void', default: 'undefined', description: 'Callback fired when the switch state changes', id: 'onChange'},
+ {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, the switch is disabled and cannot be toggled', id: 'disabled'},
]
};📝 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 SwitchTable = { | |
| 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 switch', id: 'color'}, | |
| ] | |
| }; | |
| export const SwitchTable = { | |
| 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: 'Custom accent color for the switch. Accepts any valid CSS color value.', id: 'color'}, | |
| {prop: 'checked', type: 'boolean', default: 'false', description: 'Controls the checked state of the switch', id: 'checked'}, | |
| {prop: 'onChange', type: '(checked: boolean) => void', default: 'undefined', description: 'Callback fired when the switch state changes', id: 'onChange'}, | |
| {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, the switch is disabled and cannot be toggled', id: 'disabled'}, | |
| ] | |
| }; |
| export const ToggleTable = { | ||
| 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 toggled item', id: 'color'}, | ||
| // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'}, | ||
| // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'}, | ||
| ] | ||
| }; |
There was a problem hiding this comment.
Complete the component props documentation.
The props documentation is incomplete:
- Important props shown in the example code (
pressed,onChange) are missing from the table - Commented props have duplicate descriptions
- The
childrenprop should be documented as it's used in the example
data: [
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'},
- // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'},
- // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'},
+ {prop: 'pressed', type: 'boolean', default: 'false', description: 'Controls the toggled state of the component', id: 'pressed'},
+ {prop: 'onChange', type: '(pressed: boolean) => void', default: 'undefined', description: 'Callback fired when the toggle state changes', id: 'onChange'},
+ {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, disables user interaction', id: 'disabled'},
+ {prop: 'children', type: 'ReactNode', default: 'undefined', description: 'The content to be rendered inside the toggle', id: 'children'},
]📝 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 ToggleTable = { | |
| 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 toggled item', id: 'color'}, | |
| // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'}, | |
| // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'}, | |
| ] | |
| }; | |
| export const ToggleTable = { | |
| 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 toggled item', id: 'color'}, | |
| {prop: 'pressed', type: 'boolean', default: 'false', description: 'Controls the toggled state of the component', id: 'pressed'}, | |
| {prop: 'onChange', type: '(pressed: boolean) => void', default: 'undefined', description: 'Callback fired when the toggle state changes', id: 'onChange'}, | |
| {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, disables user interaction', id: 'disabled'}, | |
| {prop: 'children', type: 'ReactNode', default: 'undefined', description: 'The content to be rendered inside the toggle', id: 'children'}, | |
| ] | |
| }; |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'}, | ||
| // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'}, | ||
| // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'}, |
There was a problem hiding this comment.
Fix prop descriptions and add missing props.
The commented props have incorrect descriptions (they're identical to the color prop's description). Additionally, several essential props shown in the code example are missing from the table.
data: [
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'},
- // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'},
- // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'},
+ {prop: 'pressed', type: 'boolean', default: 'false', description: 'Controls the pressed state of the toggle group', id: 'pressed'},
+ {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, disables user interaction', id: 'disabled'},
+ {prop: 'defaultPressed', type: 'boolean', default: 'false', description: 'The initial pressed state', id: 'defaultPressed'},
+ {prop: 'onChange', type: '(pressed: boolean) => void', default: 'undefined', description: 'Callback when pressed state changes', id: 'onChange'},
+ {prop: 'type', type: '"single" | "multiple"', default: '"single"', description: 'Determines if multiple items can be selected', id: 'type'},
+ {prop: 'items', type: 'Array<{label: ReactNode, value: string}>', default: '[]', description: 'Array of items to display in the toggle group', id: 'items'},
]📝 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.
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'}, | |
| // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'}, | |
| // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'}, | |
| data: [ | |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'}, | |
| {prop: 'pressed', type: 'boolean', default: 'false', description: 'Controls the pressed state of the toggle group', id: 'pressed'}, | |
| {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, disables user interaction', id: 'disabled'}, | |
| {prop: 'defaultPressed', type: 'boolean', default: 'false', description: 'The initial pressed state', id: 'defaultPressed'}, | |
| {prop: 'onChange', type: '(pressed: boolean) => void', default: 'undefined', description: 'Callback when pressed state changes', id: 'onChange'}, | |
| {prop: 'type', type: '"single" | "multiple"', default: '"single"', description: 'Determines if multiple items can be selected', id: 'type'}, | |
| {prop: 'items', type: 'Array<{label: ReactNode, value: string}>', default: '[]', description: 'Array of items to display in the toggle group', id: 'items'}, | |
| ] |
| export const AspectRatioTable = { | ||
| columns : [ | ||
| {name: 'Prop', id: 'prop'}, | ||
| {name: 'Type', id: 'type'}, | ||
| {name: 'Default', id: 'default'}, | ||
| {name: 'Description', id: 'description'}, | ||
| ], | ||
|
|
||
| data :[ | ||
| {prop: 'ratio', type: 'string', default: '1', description: 'Used to set desired ratio', id: 'ratio'}, | ||
|
|
||
| ] | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve type safety and completeness of the props documentation.
The table structure needs TypeScript types and additional props documentation.
+interface TableColumn {
+ name: string;
+ id: string;
+}
+
+interface PropData {
+ prop: string;
+ type: string;
+ default: string;
+ description: string;
+ id: string;
+}
+
-export const AspectRatioTable = {
+export const AspectRatioTable: {
+ columns: TableColumn[];
+ data: PropData[];
+} = {
columns : [
{name: 'Prop', id: 'prop'},
{name: 'Type', id: 'type'},
{name: 'Default', id: 'default'},
{name: 'Description', id: 'description'},
],
-
data :[
{prop: 'ratio', type: 'string', default: '1', description: 'Used to set desired ratio', id: 'ratio'},
-
+ {prop: 'asChild', type: 'boolean', default: 'false', description: 'Change the default rendered element for the one passed as a child', id: 'asChild'},
+ {prop: 'className', type: 'string', default: '', description: 'Additional CSS classes to apply to the component', id: 'className'},
]
}📝 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 AspectRatioTable = { | |
| columns : [ | |
| {name: 'Prop', id: 'prop'}, | |
| {name: 'Type', id: 'type'}, | |
| {name: 'Default', id: 'default'}, | |
| {name: 'Description', id: 'description'}, | |
| ], | |
| data :[ | |
| {prop: 'ratio', type: 'string', default: '1', description: 'Used to set desired ratio', id: 'ratio'}, | |
| ] | |
| } | |
| interface TableColumn { | |
| name: string; | |
| id: string; | |
| } | |
| interface PropData { | |
| prop: string; | |
| type: string; | |
| default: string; | |
| description: string; | |
| id: string; | |
| } | |
| export const AspectRatioTable: { | |
| columns: TableColumn[]; | |
| data: PropData[]; | |
| } = { | |
| columns: [ | |
| { name: 'Prop', id: 'prop' }, | |
| { name: 'Type', id: 'type' }, | |
| { name: 'Default', id: 'default' }, | |
| { name: 'Description', id: 'description' }, | |
| ], | |
| data: [ | |
| { prop: 'ratio', type: 'string', default: '1', description: 'Used to set desired ratio', id: 'ratio' }, | |
| { prop: 'asChild', type: 'boolean', default: 'false', description: 'Change the default rendered element for the one passed as a child', id: 'asChild' }, | |
| { prop: 'className', type: 'string', default: '', description: 'Additional CSS classes to apply to the component', id: 'className' }, | |
| ] | |
| } |
1 participant
Summary by CodeRabbit
Documentation
Refactor