Fix spacing in docs, remove react warnings #607
Conversation
|
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/button/page.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. WalkthroughThis pull request includes various formatting and structural improvements across multiple JavaScript and SCSS files related to UI components. Changes involve standardizing import statements, adjusting function definitions for consistency, and enhancing the readability of JSX structures. Notable modifications include the transition of function declarations to arrow functions, updates to JSX attributes for camelCase compliance, and the addition of semicolons for better syntax adherence. The overall functionality of the components remains unchanged. Changes
Possibly related PRs
Suggested reviewers
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: 8
🧹 Outside diff range and nitpick comments (11)
docs/icons/Rows.js (1)
2-2: Consider formatting the SVG for better readabilityThe SVG markup is quite dense on a single line. Consider formatting it across multiple lines for better maintainability.
- return <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 12.85L1 12.85L1 14.15L14 14.15L14 12.85ZM14 8.85002L1 8.85002L1 10.15L14 10.15L14 8.85002ZM1 4.85003L14 4.85003L14 6.15003L1 6.15002L1 4.85003ZM14 0.850025L1 0.850025L1 2.15002L14 2.15002L14 0.850025Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>; + return ( + <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M14 12.85L1 12.85L1 14.15L14 14.15L14 12.85ZM14 8.85002L1 8.85002L1 10.15L14 10.15L14 8.85002ZM1 4.85003L14 4.85003L14 6.15003L1 6.15002L1 4.85003ZM14 0.850025L1 0.850025L1 2.15002L14 2.15002L14 0.850025Z" + fill="currentColor" + fillRule="evenodd" + clipRule="evenodd" + /> + </svg> + );docs/icons/RightArrow.js (1)
2-2: Consider formatting the SVG consistently with other icon componentsFor consistency with other icon components, consider formatting the SVG across multiple lines.
- return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>; + return ( + <svg + width="15" + height="15" + viewBox="0 0 15 15" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" + fill="currentColor" + fillRule="evenodd" + clipRule="evenodd" + /> + </svg> + );docs/app/docs/components/progress/docs/codeUsage.js (1)
8-8: Remove extra space in component propsThere's an extra space between
value={90}and the closing tag.- <Progress value={90} /> + <Progress value={90} />docs/app/docs/components/card/page.js (1)
25-30: Fix inconsistent indentation in Card contentThe nested content has inconsistent indentation which affects readability.
<div className="font-medium"> - Peter Kowalsky + Peter Kowalsky </div> <div className="text-xs text-gray-800"> - Content Engineer + Content Engineer </div>docs/app/docs/first-steps/usage/page.js (2)
33-33: Remove extra leading whitespaceThere's unnecessary whitespace at the beginning of the text content which affects consistency.
- <Text className="mb-2 text-gray-1000 font-light"> Rad UI is headless, meaning it doesn't come with any styles. But we do ship a default theme that you can use to get quickly started off the ground.</Text> + <Text className="mb-2 text-gray-1000 font-light">Rad UI is headless, meaning it doesn't come with any styles. But we do ship a default theme that you can use to get quickly started off the ground.</Text>
35-35: Use consistent quote styleFor consistency with the import statements, consider using single quotes.
- {'import "@radui/ui/themes/default.css";'} + {'import \'@radui/ui/themes/default.css\';'}docs/components/Copy.js (1)
34-36: Remove extra semicolon in classNameThere's an unnecessary semicolon in the button's className string.
- className=" m-0.5 mr-0 ml-2 px-1.5 py-1.5 border border-blue-500 text-sm font-bold rounded text-blue ;"> + className="m-0.5 mr-0 ml-2 px-1.5 py-1.5 border border-blue-500 text-sm font-bold rounded text-blue">docs/app/docs/components/accordion/docs/codeUsage.js (1)
4-4: Use consistent quote style across filesFor consistency with other files in the codebase, consider using single quotes.
-import Accordion from "@radui/ui/Accordion"; +import Accordion from '@radui/ui/Accordion'; let items = [ { - title: "React", - content: "React is a JavaScript library for building user interfaces." + title: 'React', + content: 'React is a JavaScript library for building user interfaces.' }, { - title: "Angular", - content: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript." + title: 'Angular', + content: 'Angular is a platform and framework for building single-page client applications using HTML and TypeScript.' }, { - title: "Vue", - content: "Vue.js is a progressive framework for building user interfaces." + title: 'Vue', + content: 'Vue.js is a progressive framework for building user interfaces.' } ]Also applies to: 8-8, 9-9, 12-12, 13-13, 16-16, 17-17
docs/components/Main/Main.js (3)
1-9: Consider extracting cookie logic into a custom hookThe dark mode persistence logic could be moved to a custom hook (e.g.,
useDarkMode) to improve reusability and separation of concerns.Example implementation:
// hooks/useDarkMode.js export const useDarkMode = (initialValue) => { const [darkMode, setDarkMode] = useState(initialValue); const toggleDarkMode = useCallback(() => { const toggledState = !darkMode; setDarkMode(toggledState); setCookie(null, 'darkMode', toggledState, { maxAge: 30 * 24 * 60 * 60, path: '/' }); }, [darkMode]); return [darkMode, toggleDarkMode]; };
28-51: Optimize SVG components for better maintainability and accessibilityConsider the following improvements for the SVG components:
- Move them to a separate
components/iconsdirectory- Wrap them with
React.memo- Add accessibility attributes
Example implementation:
// components/icons/DiscordLogo.js import { memo } from 'react'; export const DiscordLogo = memo(() => ( <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Discord" role="img" > {/* SVG path */} </svg> )); DiscordLogo.displayName = 'DiscordLogo';
53-95: Enhance accessibility and maintainability of the layout structureConsider the following improvements:
- Add keyboard navigation support
- Use semantic HTML elements
- Consider using CSS modules or CSS-in-JS for better CSS scoping
Example improvements:
-<div className={`px-3 py-2 flex items-center justify-between border-b border-gray-500 sticky z-20 top-0 ${darkMode ? 'rad-ui-dark-theme bg-black' : 'bg-white'}`}> +<header className={`px-3 py-2 flex items-center justify-between border-b border-gray-500 sticky z-20 top-0 ${darkMode ? 'rad-ui-dark-theme bg-black' : 'bg-white'}`}> <nav className='mr-3 flex space-x-8'> {/* Navigation content */} </nav> -</div> +</header> -<Button color="gray" variant="surface" onClick={toggleDarkMode}> +<Button + color="gray" + variant="surface" + onClick={toggleDarkMode} + aria-label={`Switch to ${darkMode ? 'light' : 'dark'} mode`} +> {/* Button content */} </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (34)
docs/app/docs/components/accordion/docs/codeUsage.js(2 hunks)docs/app/docs/components/button/page.js(1 hunks)docs/app/docs/components/callout/docs/codeUsage.js(2 hunks)docs/app/docs/components/callout/page.js(1 hunks)docs/app/docs/components/card/page.js(1 hunks)docs/app/docs/components/code/page.js(2 hunks)docs/app/docs/components/kbd/docs/codeUsage.js(2 hunks)docs/app/docs/components/progress/docs/codeUsage.js(2 hunks)docs/app/docs/components/switch/docs/codeUsage.js(2 hunks)docs/app/docs/components/toggle-group/ToggleGroupWrapper.js(1 hunks)docs/app/docs/components/toggle-group/docs/codeUsage.js(2 hunks)docs/app/docs/components/toggle/ToggleWrapper.js(1 hunks)docs/app/docs/components/toggle/docs/codeUsage.js(2 hunks)docs/app/docs/first-steps/usage/page.js(3 hunks)docs/app/docs/layout.tsx(2 hunks)docs/app/landingComponents/AddToCartDemo.js(2 hunks)docs/app/landingComponents/MusicAppPlayerDemo.js(1 hunks)docs/app/landingComponents/ToolbarDemo.js(2 hunks)docs/app/landingComponents/TrafficAnalyticsDemo.js(2 hunks)docs/components/Copy.js(2 hunks)docs/components/Main/Main.js(1 hunks)docs/components/layout/Documentation/Documentation.js(4 hunks)docs/components/layout/Documentation/helpers/CodeBlock.js(1 hunks)docs/icons/Disc.js(1 hunks)docs/icons/Home.js(1 hunks)docs/icons/Play.js(1 hunks)docs/icons/RightArrow.js(1 hunks)docs/icons/Rocket.js(1 hunks)docs/icons/Rows.js(1 hunks)docs/icons/TrackNext.js(1 hunks)docs/icons/TrackPrevious.js(1 hunks)src/components/ui/Callout/stories/Callout.stories.js(1 hunks)src/components/ui/Toggle/stories/Toggle.stories.js(1 hunks)src/components/ui/ToggleGroup/stories/ToggleGroup.stories.js(1 hunks)
✅ Files skipped from review due to trivial changes (18)
- docs/icons/TrackPrevious.js
- src/components/ui/Toggle/stories/Toggle.stories.js
- docs/app/docs/components/toggle/ToggleWrapper.js
- src/components/ui/Callout/stories/Callout.stories.js
- docs/icons/Home.js
- docs/app/docs/components/switch/docs/codeUsage.js
- docs/icons/Rocket.js
- docs/components/layout/Documentation/helpers/CodeBlock.js
- src/components/ui/ToggleGroup/stories/ToggleGroup.stories.js
- docs/app/landingComponents/TrafficAnalyticsDemo.js
- docs/app/docs/components/toggle-group/docs/codeUsage.js
- docs/app/landingComponents/ToolbarDemo.js
- docs/app/landingComponents/AddToCartDemo.js
- docs/app/docs/layout.tsx
- docs/icons/Play.js
- docs/app/docs/components/toggle-group/ToggleGroupWrapper.js
- docs/components/layout/Documentation/Documentation.js
- docs/app/landingComponents/MusicAppPlayerDemo.js
🔇 Additional comments (10)
docs/icons/Rows.js (1)
1-2: LGTM! Correct usage of camelCase SVG attributes
The SVG attributes are properly using camelCase (fillRule, clipRule), which resolves the React warnings as intended.
docs/icons/RightArrow.js (1)
2-2: LGTM! Correct usage of camelCase SVG attributes
The SVG attributes are properly using camelCase (fillRule, clipRule), which resolves the React warnings as intended.
docs/app/docs/components/progress/docs/codeUsage.js (1)
3-11: LGTM! Clear and well-structured documentation
The code example is clear and well-organized, effectively demonstrating the Progress component usage with both JavaScript and CSS sections.
Also applies to: 28-31
docs/app/docs/components/kbd/docs/codeUsage.js (1)
3-8: LGTM! Documentation spacing improvements look good.
The code example is well-structured with proper spacing and line breaks, making it more readable. The component example follows React best practices.
docs/icons/TrackNext.js (1)
1-2: LGTM! SVG attributes correctly use camelCase.
The SVG attributes have been properly converted from kebab-case (fill-rule, clip-rule) to camelCase (fillRule, clipRule), resolving the React warnings.
docs/app/docs/components/callout/docs/codeUsage.js (1)
3-6: LGTM! Import statements are well-organized.
The import statements are properly spaced and organized.
docs/app/docs/components/toggle/docs/codeUsage.js (1)
3-17: LGTM! Code example formatting improvements enhance readability.
The changes improve the documentation's clarity by:
- Consistent spacing around component definition
- Clear separation of hooks and handlers
- Well-structured JSX indentation
docs/icons/Disc.js (1)
2-2: LGTM! SVG attributes properly updated to React's camelCase format.
The changes correctly address React warnings by updating SVG attributes:
fill-rule→fillRuleclip-rule→clipRule
docs/app/docs/components/code/page.js (1)
11-11:
Update SVG attributes to React's camelCase format.
Similar to other SVG fixes in this PR, update the following attributes:
fill-rule→fillRuleclip-rule→clipRule
-<path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
+<path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>Likely invalid or redundant comment.
docs/components/Copy.js (1)
23-23:
Convert SVG attributes to camelCase
To resolve React warnings, SVG attributes should use camelCase instead of kebab-case.
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (8)
docs/app/docs/components/callout/docs/codeUsage.js (2)
7-19: Improve code example formatting for better readability.While the component structure is correct, the template literal's formatting could be improved to make it more readable in the documentation.
Consider this formatting:
const CalloutExample = () => ( <Callout color="red"> <div className="flex items-start"> <BookmarkIcon /> - <div className="ml-2"> <Text className="font-bold">Error</Text> <Text>Something went wrong. Please try again later.</Text> </div> </div> </Callout> )
Line range hint
21-33: Standardize SCSS indentation.The SCSS code block uses inconsistent indentation which could be standardized for better readability in the documentation.
Consider this formatting:
.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; + 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; }docs/components/Main/Main.js (1)
39-42: Consider improving dark mode configurationTwo suggestions for the dark mode implementation:
- Consider respecting user's system preference initially using
prefers-color-scheme- Extract cookie max age to a named constant
+const DARK_MODE_COOKIE_MAX_AGE = 30 * 24 * 60 * 60; // 30 days + setCookie(cookies, 'darkMode', toggledState, { - maxAge: 30 * 24 * 60 * 60, + maxAge: DARK_MODE_COOKIE_MAX_AGE, path: '/' });docs/app/docs/components/card/page.js (2)
11-31: Consider consistent indentation in JSX structure.While the component structure is good, the indentation could be more consistent. The JSX content is currently using varying indentation levels which might affect readability.
Apply this formatting:
const CardDocs = () => { - return <div> - <Documentation - currentPage={PAGE_NAME} title='Card' description={` + return ( + <div> + <Documentation + currentPage={PAGE_NAME} + title='Card' + description={` Cards are used to group related information and actions. They are used to display information in a structured way. - `}> + `} + >
18-28: Consider extracting the example card into a separate component.The example card implementation could be extracted into a separate component for better maintainability and reusability across documentation.
docs/app/docs/components/button/page.js (3)
6-6: Consider using a more concise constant name.The constant name 'BUTTON_DOCS' could be simplified to just 'Button' to match the pattern used in the Card component's page.
-const PAGE_NAME = 'BUTTON_DOCS'; +const PAGE_NAME = 'Button';
10-12: Consider moving Arrow component to a shared icons directory.The Arrow component could be moved to a shared icons directory since it's a reusable UI element. Also, consider adding prop types for customization.
+import { type SVGProps } from 'react'; + -const Arrow = () => { +const Arrow = ({ className, ...props }: SVGProps<SVGSVGElement>) => { - return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
21-23: Consider using className instead of inline styles.For consistency with other components, consider using CSS classes instead of inline styles for layout.
-<div style={{ display: 'flex', gap: 20 }}> +<div className="flex gap-5">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
docs/app/docs/components/button/page.js(1 hunks)docs/app/docs/components/callout/docs/codeUsage.js(2 hunks)docs/app/docs/components/callout/page.js(1 hunks)docs/app/docs/components/card/page.js(1 hunks)docs/app/docs/components/code/page.js(2 hunks)docs/app/docs/docsIndex.js(1 hunks)docs/components/Main/Main.js(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/app/docs/docsIndex.js
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/app/docs/components/code/page.js
- docs/app/docs/components/callout/page.js
🔇 Additional comments (3)
docs/app/docs/components/callout/docs/codeUsage.js (1)
4-5:
Add missing import for BookmarkIcon component.
The example uses a BookmarkIcon component on line 10, but there's no import statement for it. This could confuse users trying to follow the example.
Add the import statement:
import Callout from "@radui/ui/Callout";
import Text from "@radui/ui/Text";
+import { BookmarkIcon } from "@radui/ui/icons";docs/components/Main/Main.js (1)
45-47: 🛠️ Refactor suggestion
Add security attributes to external link handler
The window.open call should include security-related attributes for external links.
const openLink = useCallback((url) => () => {
- window.open(url, '_blank');
+ window.open(url, '_blank', 'noopener,noreferrer');
}, []);Likely invalid or redundant comment.
docs/app/docs/components/card/page.js (1)
1-9: LGTM! Clean import organization and proper constant naming.
The imports are well-organized and the PAGE_NAME constant correctly reflects the component being documented.
2 participants
Developed as a part of #589
There were numerous warnings while running the library, because React wants svg attributes to be camelCase, not kebab-case. I have adjusted such attributes and I have also fixed spacing in code examples in docs.
Summary by CodeRabbit
Release Notes
New Features
Callout,Toggle, andProgress.Bug Fixes
fill-ruletofillRule).Documentation
Style
These changes improve the overall user experience by providing clearer documentation and consistent code practices.