Fix responsive landing page and light mode issues #79
Conversation
Make the landing page mobile responsive and fix light mode issues. * **Landing Page (`apps/www/app/page.tsx`)** - Add Tailwind CSS classes to make the landing page mobile responsive. - Update the `Hero` component to use responsive classes. - Adjust the grid layout to be responsive. * **Header Component (`apps/www/components/header/index.tsx`)** - Add responsive classes to the `Header` component. - Ensure the `Header` component is mobile-friendly. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ruru-m07/ruru-ui?shareId=XXXX-XXXX-XXXX-XXXX).
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
feat(components): introduce new stack component
Fixes #65 Add support for multiple animation variants in the Modal component. * Extend the `modalVariants` object in `packages/ui/src/components/modal.tsx` to include multiple animation options such as `fade`, `zoom`, `scaleBounce`, `slideUp`, `slideDown`, `slideRight`, `slideLeft`, `flip`, and `rotate`. * Allow dynamic selection of animation variants based on the `animationVariant` prop in the `Modal` component. * Update the documentation in `apps/www/content/docs/components/modal.mdx` to explain how to select and use the new animation variants. * Add test cases in `apps/www/app/playground/page.tsx` to cover all supported animation options for the `Modal` component. * Add a new file `apps/www/components/preview/Modal/modalAnimation.tsx` to demonstrate the use of different animation variants in the Modal component. * Update the version in `packages/ui/package.json` from `2.2.3` to `2.2.4`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ruru-m07/ruru-ui/issues/65?shareId=XXXX-XXXX-XXXX-XXXX).
…onent Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
feat(modal): enhance modal component with multiple animation variants
…removing @radix-ui/react-switch dependency Fixes #63 Refactor the `Switch` component to be self-contained and remove dependency on `@radix-ui/react-switch`. * **Switch Component**: - Remove import statement for `@radix-ui/react-switch`. - Update the `Switch` component to be self-contained with its own state management and event handling. - Update the `Switch` component's props to include `checked` and `onCheckedChange`. * **Documentation**: - Update the documentation in `apps/www/content/docs/components/switch.mdx` to reference the self-contained `Switch` component. - Add a new props table to the documentation to reflect the updated `Switch` component's props. * **Dependencies**: - Remove `@radix-ui/react-switch` from `packages/ui/package.json`. - Update `pnpm-lock.yaml` to remove references to `@radix-ui/react-switch`. * **Registry**: - Update `apps/www/public/registry/index.json` and `apps/www/public/registry/components/switch.json` to remove the dependency on `@radix-ui/react-switch`. - Update `apps/www/registry/ui.ts` to remove the dependency on `@radix-ui/react-switch`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ruru-m07/ruru-ui/issues/63?shareId=XXXX-XXXX-XXXX-XXXX).
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…07/ruru-ui into refactor-switch-component
refactor(component: switch): make Switch component self-dependent by removing @radix-ui/react-switch dependency
Make the landing page mobile responsive and fix light mode issues. * **Landing Page (`apps/www/app/page.tsx`)** - Add Tailwind CSS classes to make the landing page mobile responsive. - Update the `Hero` component to use responsive classes. - Adjust the grid layout to be responsive. * **Header Component (`apps/www/components/header/index.tsx`)** - Add responsive classes to the `Header` component. - Ensure the `Header` component is mobile-friendly. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ruru-m07/ruru-ui?shareId=XXXX-XXXX-XXXX-XXXX).
…-m07/ruru-ui into fix-responsive-landing-page
|
Note Reviews pausedUse the following commands to manage reviews:
WalkthroughThe pull request introduces several changes across multiple files. Key modifications include updating the Changes
Possibly related PRs
Suggested labels
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: 11
🧹 Outside diff range and nitpick comments (60)
.husky/pre-commit (3)
5-8: LGTM: Proper registry build with error handlingThe registry build segment is well-implemented:
- Uses pnpm with appropriate filtering for monorepo setup
- Includes error handling to abort the commit if the build fails
- Provides a clear error message
For consistency with the Prettier command (line 10), consider using the full command form:
-if ! pnpm run --filter=./apps/www build:registry; then +if ! pnpm run --filter=./apps/www build:registry; thenThis change is optional but might improve readability and consistency.
9-13: LGTM: Proper Prettier execution with error handlingThe Prettier formatting segment is well-implemented:
- Uses pnpm to run Prettier, consistent with the build command
- Includes error handling to abort the commit if formatting fails
- Provides a clear error message
For clarity, consider adding a comment about what
pnpm prettierdoes. For example:echo "Registry built successfully. Running Prettier..." +# Run Prettier on all applicable files if ! pnpm prettier; then echo "Error: Prettier formatting failed. Commit aborted." exit 1 fiThis addition would help developers understand the scope of the Prettier command.
1-14: Overall: Well-implemented pre-commit hook with room for minor improvementThis pre-commit hook script is well-structured and implements important checks to maintain code quality:
- It builds the registry to ensure no breaking changes are introduced.
- It runs Prettier to maintain consistent code formatting.
- It provides clear feedback at each stage of the process.
- Error handling is implemented to prevent commits when checks fail.
To improve robustness, consider adding a trap to handle unexpected exits:
#!/bin/sh . "$(dirname "$0")/_/husky.sh" +# Set up error handling +trap 'echo "An error occurred. Aborting commit."; exit 1' ERR + echo "Running pre-commit hook..." if ! pnpm run --filter=./apps/www build:registry; then echo "Error: Failed to build registry. Commit aborted." exit 1 fi echo "Registry built successfully. Running Prettier..." if ! pnpm prettier; then echo "Error: Prettier formatting failed. Commit aborted." exit 1 fi echo "Pre-commit hook completed successfully."This addition will ensure that any unexpected errors are caught and reported, providing an extra layer of safety to the pre-commit process.
apps/www/components/SwitchEvent.tsx (2)
11-12: Good improvement in HTML attribute consistency.The
idattribute of theSwitchcomponent and the correspondinghtmlForattribute of the label have been updated from "toggle value" to "toggle-value". This change improves consistency by using a hyphen instead of a space, which is a best practice for HTML id attributes.Consider updating the label text to match the id format for even better consistency:
- <label htmlFor="toggle-value"> toggle value </label> + <label htmlFor="toggle-value">Toggle Value</label>
Line range hint
1-19: Overall, excellent improvements to the SwitchEvent component.The changes in this file effectively address the typo in the component name and improve HTML attribute consistency. These modifications enhance code quality without altering the component's functionality.
Consider enhancing type safety by defining a props interface for the
SwitchEventcomponent, even if it currently doesn't accept any props. This practice can make future extensions easier:interface SwitchEventProps { // Add any future props here } const SwitchEvent: React.FC<SwitchEventProps> = () => { // ... component logic ... };This approach aligns with TypeScript best practices and can make the component more maintainable as it evolves.
apps/www/components/header/index.tsx (2)
16-16: Responsive padding improvement looks good!The addition of
px-4 md:px-8to theclassNameenhances the header's responsiveness by providing appropriate horizontal padding for different screen sizes. This change aligns well with the PR objective of improving mobile responsiveness.Consider adding a smaller padding for extra small screens:
- className={`h-[80px] space-x-4 flex items-center justify-between w-full my-4 border rounded-md px-4 md:px-8`} + className={`h-[80px] space-x-4 flex items-center justify-between w-full my-4 border rounded-md px-2 sm:px-4 md:px-8`}This change will provide a more compact layout on very small mobile devices while maintaining the current padding on larger screens.
Remove the commented-out
TooltipcomponentsThe
ThemeFeaturesandThemeImportcomponents are still active in theindex.tsxfile. Since theirTooltipwrappers are commented out, it's best to remove the commented code to keep the codebase clean and avoid confusion. If theTooltipfunctionality is needed in the future, consider implementing it with a clear intent.🔗 Analysis chain
Line range hint
32-43: Clarify the status of commented-outTooltipcomponentsThere are two
Tooltipcomponents (forThemeFeaturesandThemeImport) that are currently commented out. It's unclear whether this is intentional or if these features are planned to be re-enabled in the future.Could you please clarify the status of these components? If they are no longer needed, it would be best to remove them entirely rather than keeping them as commented-out code. If they are intended for future use, consider moving them to a separate file or adding a TODO comment explaining the plan for these features.
To help verify the usage of these components, you can run the following script:
This will help determine if these components are used elsewhere in the project or if they can be safely removed.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for usage of ThemeFeatures and ThemeImport components echo "Searching for ThemeFeatures usage:" rg "ThemeFeatures" echo "\nSearching for ThemeImport usage:" rg "ThemeImport"Length of output: 715
apps/www/public/registry/components/switch.json (2)
Line range hint
13-33: LGTM: Robust state management with a minor improvement suggestionThe component implementation demonstrates good practices:
- Proper use of
React.forwardReffor ref forwarding.- Correct handling of both controlled and uncontrolled states.
- Well-structured
handleClickfunction for state updates and callback invocation.Consider memoizing the
handleClickfunction usinguseCallbackto optimize performance, especially if the component is used in a list or frequently re-rendered:const handleClick = React.useCallback(() => { const newChecked = !isCheckedValue; if (!isControlled) { setIsCheckedInternal(newChecked); } if (onCheckedChange) { onCheckedChange(newChecked); } }, [isCheckedValue, isControlled, onCheckedChange]);
Line range hint
35-54: LGTM: Accessible and well-styled component with a suggestionThe rendering and styling of the component are well-implemented:
- Proper use of ARIA attributes for accessibility.
- Clean and maintainable styling using Tailwind CSS and conditional classes.
- Correct implementation of transition effects for the switch handle.
To further enhance accessibility, consider adding a visually hidden label for screen readers:
<button type="button" role="switch" aria-checked={isCheckedValue} className={cn( // ... existing classes )} onClick={handleClick} ref={ref} {...props} > <span className="sr-only"> {props['aria-label'] || 'Toggle switch'} </span> <span className={cn( // ... existing classes for the switch handle )} /> </button>This addition ensures that screen reader users have a clear understanding of the switch's purpose, even if a visible label is not provided.
apps/www/registry/ui.ts (1)
96-100: LGTM! Consider adding a brief comment for the new stack component.The addition of the "stack" component to the registry is well-structured and consistent with other entries. This new component aligns with the PR objectives of improving responsiveness, as stack layouts are often used for flexible and responsive designs.
To enhance maintainability, consider adding a brief comment above the "stack" entry to describe its purpose or key features, similar to how you might document it in the component file itself. For example:
// Flexible layout component for managing vertical or horizontal stacks { name: "stack", type: "components:ui", files: ["stack.tsx"], },apps/www/content/docs/components/spinner.mdx (1)
28-28: LGTM! Consider adding a comment for clarity.The update from
npxtoyarn dlxis correct and consistent with other component documentation. This change improves the accuracy of installation instructions for Yarn users.Consider adding a brief comment above the command to explain the use of
dlxfor one-time script execution in Yarn:+ # Use dlx for one-time execution of the CLI yarn dlx ruru-ui-cli@latest add spinnerThis addition would help users understand why
dlxis used instead of a globalyarncommand.apps/www/content/docs/components/label.mdx (1)
29-29: LGTM! Consider adding a comment for clarity.The update to use
yarn dlxinstead ofnpxfor the yarn installation command is correct and aligns with yarn's preferred method of running one-off commands. This change improves the accuracy of the documentation for yarn users.For consistency with other package manager examples, consider adding a comment to explain the use of
dlx. Here's a suggested change:```bash -yarn dlx ruru-ui-cli@latest add label +yarn dlx ruru-ui-cli@latest add label # `dlx` is yarn's equivalent of `npx`This addition would help users understand why `dlx` is used specifically for yarn. </blockquote></details> <details> <summary>apps/www/content/docs/components/textarea.mdx (1)</summary><blockquote> `28-28`: **Approved: Installation command updated correctly for yarn.** The installation command for yarn has been appropriately updated to use `yarn dlx` and the correct package name `ruru-ui-cli`. This change improves the accuracy of the documentation and ensures users can properly install the component using yarn. Consider adding a brief comment explaining the difference between `ruru-ui` and `ruru-ui-cli` packages, if applicable, to provide more context for users. </blockquote></details> <details> <summary>apps/www/content/docs/components/dropzone.mdx (1)</summary><blockquote> `29-29`: **LGTM! Consider adding a note about Yarn version compatibility.** The update from `npx` to `yarn dlx` for the Yarn installation command is correct and aligns with the PR objectives. This change improves the documentation accuracy for Yarn users. For additional clarity, consider adding a note specifying the minimum Yarn version required for the `dlx` command (Yarn 2+). This would help users with older Yarn versions avoid potential confusion. Example addition: ```markdown > Note: The `yarn dlx` command requires Yarn 2 or later. For Yarn 1.x, use `npx` instead.apps/www/content/docs/components/tabs.mdx (1)
27-27: LGTM! Consider updating other package manager commands for consistency.The update to use
yarn dlxinstead ofnpxfor the Yarn installation command is correct and aligns with modern Yarn usage. This change improves the accuracy of the documentation for Yarn users.For consistency, consider reviewing and updating the installation commands for other package managers (npm, pnpm, bun) if necessary. This ensures all commands follow the latest best practices for each package manager.
apps/www/content/docs/components/switch.mdx (3)
30-30: LGTM: Yarn installation command updatedThe installation command for yarn has been correctly updated to use 'yarn dlx' instead of 'npx'. This change aligns with the proper usage of the yarn package manager.
Consider adding a comment above the yarn command to explain why 'yarn dlx' is used instead of 'npx' for clarity, especially for users who might be less familiar with yarn.
95-96: LGTM: ID updated in "Switch with labels" exampleThe id and htmlFor attributes have been updated from 'airplane-mode' to 'airplane-mode-demo'. This change helps avoid potential conflicts with other examples or real-world usage.
Consider updating the code example below this preview (around line 102) to reflect the same id change for consistency throughout the documentation.
172-181: LGTM: Props table addedThe addition of the props table is a significant improvement to the documentation. It clearly outlines the Switch component's API, including prop names, types, default values, and descriptions. This will greatly assist developers in understanding and using the component correctly.
Consider adding a brief introduction before the table to explain its purpose and how to use the information provided. For example: "The following table describes the props available for the Switch component:"
apps/www/components/stackPlayground.tsx (6)
5-6: LGTM: Well-structured component with consistent layout.The
StackPlaygroundcomponent is well-organized, using a consistent pattern of title, description, and example for each Stack property. The use ofspace-y-5provides good vertical spacing between sections.Consider adding an
aria-labelto the maindivto improve accessibility:- <div className="space-y-5"> + <div className="space-y-5" aria-label="Stack Component Examples">
7-25: LGTM: Effective demonstration of responsive direction and gap properties.The examples for
directionandgapproperties effectively showcase the responsive capabilities of the Stack component. The use of different background colors helps visually distinguish the examples.For consistency, consider using the same background color scheme for both examples:
- <div className="bg-gray-200 h-12 w-12 rounded-md" /> - <div className="bg-gray-300 h-12 w-12 rounded-md" /> + <div className="bg-blue-300 h-12 w-12 rounded-md" /> + <div className="bg-blue-400 h-12 w-12 rounded-md" />
27-52: LGTM: Clear demonstrations of align, justify, and wrap properties.The examples for
align,justify, andwrapproperties effectively showcase their functionality and responsive capabilities. The use of an array to generate multiple child elements in the wrap example is a good approach.For the wrap example, consider adding a key prop based on a unique identifier instead of the array index:
- {Array(10) - .fill(0) - .map((_, i) => ( - <div key={i} className="bg-yellow-200 h-12 w-12 m-2 rounded-md" /> - ))} + {Array.from({ length: 10 }, (_, i) => ( + <div key={`wrap-item-${i}`} className="bg-yellow-200 h-12 w-12 m-2 rounded-md" /> + ))}
54-92: LGTM: Comprehensive demonstrations of various Stack properties.The examples for
padding,margin,grow,zIndex, andvisibilityproperties effectively showcase their functionality and responsive capabilities. The use of different background colors and sizes helps distinguish the examples.For the
zIndexexample, consider adding another element to better demonstrate the stacking order:<Stack zIndex={10} className="relative"> <div className="bg-indigo-500 h-12 w-12 rounded-md" /> </Stack> + <div className="bg-indigo-300 h-12 w-12 rounded-md absolute top-2 left-2" />
94-123: LGTM: Effective demonstrations of alignContent and combined props usage.The
alignContentexample effectively shows the alignment of multiple rows of content. The combined props example provides a good real-world use case, showcasing how multiple Stack properties can work together.For the
alignContentexample, consider adding more variety to the child elements to better demonstrate the alignment:<Stack wrap="wrap" alignContent="center" height={200}> {Array(6) .fill(0) .map((_, i) => ( - <div key={i} className="bg-blue-200 h-12 w-12 m-2 rounded-md" /> + <div + key={i} + className={`bg-blue-${200 + i * 100} h-${8 + i * 2} w-12 m-2 rounded-md`} + /> ))} </Stack>
125-137: LGTM: Useful utility components for consistent styling.The
H1andPcomponents provide a good way to maintain consistent styling throughout the playground. The use of Tailwind classes aligns well with the project's styling approach.Consider making these utility components more reusable by accepting additional props:
interface TextProps { children: ReactNode; className?: string; } const H1 = ({ children, className = '' }: TextProps) => ( <h1 className={`scroll-m-20 text-2xl font-extrabold tracking-tight ${className}`}> {children} </h1> ); const P = ({ children, className = '' }: TextProps) => ( <p className={`leading-7 ${className}`}>{children}</p> );This change allows for additional classes to be passed to these components when needed.
apps/www/content/docs/components/form.mdx (1)
31-31: LGTM! Consider adding a note about Yarn version compatibility.The change from
npxtoyarn dlxaligns with the project's standardization efforts and preference for Yarn. This update improves consistency across the documentation.Consider adding a note about Yarn version compatibility, as
yarn dlxis only available in Yarn 2+. This could prevent confusion for users who might be using older versions of Yarn. For example:> Note: The `yarn dlx` command requires Yarn 2 or later. If you're using Yarn 1, please use `npx` instead.apps/www/content/docs/components/checkbox.mdx (1)
29-29: LGTM! Consider adding a comment aboutdlx.The update to use
yarn dlxinstead ofnpxfor the Yarn installation command is correct and aligns with Yarn's best practices.Consider adding a brief comment explaining that
dlxis Yarn's equivalent ofnpxfor running one-off commands. This could help users understand the difference:```bash + # Use dlx with Yarn (equivalent to npx for one-off commands) yarn dlx ruru-ui-cli@latest add checkbox ```apps/www/content/docs/cli.mdx (3)
124-124: Approve yarn command correction with a minor suggestion.The change from
npxtoyarn dlxfor the yarn command is correct and aligns with best practices for using yarn. This update ensures consistency with yarn's command structure.Consider adding a note explaining why
yarn dlxis preferred overnpxfor yarn users, as it might not be immediately clear to all readers.
Line range hint
190-190: Update yarn command for consistency.The yarn command in the block example is inconsistent with the updated command in the initialization section. It should use
yarn dlxinstead ofnpxfor consistency.Please update the yarn command as follows:
-npx ruru-ui-cli@latest block [name] +yarn dlx ruru-ui-cli@latest block [name]This change will ensure consistency across all yarn commands in the documentation.
Line range hint
1-256: Overall documentation improvements with suggestions for further enhancements.The updates to the CLI documentation are generally positive, improving clarity and providing more comprehensive examples. Here are some suggestions for further enhancements:
- Consider adding a table of contents at the beginning of the document for easier navigation.
- The "Configuration Options" section could benefit from a brief explanation of each option's purpose.
- In the "Adding Components" and "Adding Blocks" sections, consider providing a list of available components and blocks, or a link to where users can find this information.
- The "Block Info" section at the end seems a bit disconnected. Consider integrating it more smoothly into the "Adding Blocks" section.
These suggestions aim to improve the overall structure and completeness of the documentation, making it more user-friendly and informative.
apps/www/public/registry/components/stack.json (3)
Line range hint
30-89: LGTM: Comprehensive StackProps interface with a minor suggestion.The StackProps interface is well-defined and extensively covers various layout and style properties. The use of the Responsive type for screen-size-dependent styling is a great feature.
Consider adding a
asprop to allow changing the rendered element type, enhancing the component's flexibility:as?: React.ElementType;This would allow users to render the Stack as different HTML elements when needed.
Line range hint
91-124: Improve type inference in getResponsiveValue function.The utility functions are well-implemented, but there's room for improvement in type inference for
getResponsiveValue.Consider updating the
getResponsiveValuefunction to improve type inference:const getResponsiveValue = <T,>( value: Responsive<T> | undefined, defaultValue: T ): T => { // ... existing implementation ... } as const;Adding
as constat the end of the function will help TypeScript infer more specific types, potentially catching more type-related issues at compile-time.
Line range hint
161-241: LGTM: Comprehensive useEffect for responsive styles with a minor optimization suggestion.The useEffect hook is well-implemented, handling all responsive props and correctly managing the window resize event listener. The cleanup function properly removes the event listener, preventing memory leaks.
Consider debouncing the resize event handler to optimize performance, especially on lower-end devices:
import { debounce } from 'lodash'; // or implement your own debounce function useEffect(() => { const updateStyles = () => { // ... existing implementation ... }; const debouncedUpdateStyles = debounce(updateStyles, 250); updateStyles(); // Initial call window.addEventListener("resize", debouncedUpdateStyles); return () => { window.removeEventListener("resize", debouncedUpdateStyles); debouncedUpdateStyles.cancel(); // Cancel any pending debounced calls }; }, [/* ... existing dependencies ... */]);This will reduce the frequency of style updates during rapid window resizing, potentially improving performance.
apps/www/components/preview/index.tsx (1)
210-224: LGTM: New stack entry demonstrates Stack component functionality.The new
stackentry effectively showcases theStackcomponent's features, including gap, justification, padding, and border radius. The structure is consistent with other entries in the exported object.For improved consistency with other entries, consider the following minor suggestion:
stack: ( <Wrapper> - <Stack - gap={100} - justify={"space-between"} - padding={25} - borderRadius="8px" - className="bg-primary-foreground/95 border" - > - <div className="bg-gray-300 h-12 w-12 rounded-md" /> - <div className="bg-gray-400 h-12 w-12 rounded-md" /> - <div className="bg-gray-500 h-12 w-12 rounded-md" /> - </Stack> + <div className="flex items-center justify-center"> + <Stack + gap={100} + justify="space-between" + padding={25} + borderRadius="8px" + className="bg-primary-foreground/95 border" + > + <div className="bg-gray-300 h-12 w-12 rounded-md" /> + <div className="bg-gray-400 h-12 w-12 rounded-md" /> + <div className="bg-gray-500 h-12 w-12 rounded-md" /> + </Stack> + </div> </Wrapper> ),This change wraps the
Stackcomponent in a centered container, which is more consistent with other entries in the file.apps/www/content/docs/components/badge.mdx (1)
29-29: LGTM! Consider adding a brief explanation for clarity.The update from
npxtoyarn dlxfor the Yarn command is correct and aligns with Yarn's syntax for executing one-off commands. This change improves consistency across different package manager instructions.Consider adding a brief comment explaining the use of
dlxfor users who might be unfamiliar with it. For example:- yarn dlx ruru-ui-cli@latest add badge + # Use 'dlx' to download and execute the CLI tool + yarn dlx ruru-ui-cli@latest add badgeThis addition would enhance clarity for users new to Yarn or the
dlxcommand.apps/www/public/registry/components/modal.json (2)
6-6: LGTM: Comprehensive set of animation variants addedThe addition of the
modalVariantsobject is an excellent enhancement to the Modal component. It provides a rich set of predefined animation styles, which can significantly improve the user experience and visual appeal of the modals in the application.Suggestion for improvement:
Consider adding a custom variant option that allows users to define their own animation properties. This could provide even more flexibility for advanced use cases.export const modalVariants = { // ... existing variants ... custom: (props: CustomAnimationProps) => ({ hidden: props.hidden, visible: props.visible, exit: props.exit, }), };This would allow users to define completely custom animations while still benefiting from the existing structure.
6-6: LGTM: Proper integration of animation variants in Modal componentThe changes in the Modal component implementation effectively integrate the new animation variants. The use of a default value for
animationVariantensures backward compatibility, which is a great practice.Suggestion for improvement:
Consider adding a type assertion tomodalVariants[animationVariant]to ensure type safety:variants={modalVariants[animationVariant] as typeof modalVariants[keyof typeof modalVariants]}This change would make the type relationship more explicit and could prevent potential type errors in the future.
apps/www/content/docs/components/avatar.mdx (1)
32-32: LGTM! Consider adding a note about yarn version compatibility.The update to use
yarn dlxinstead ofnpxfor the yarn installation command is correct and aligns with the PR objectives. This change improves the accuracy of the documentation for yarn users.Consider adding a note about yarn version compatibility, as
yarn dlxis available in Yarn 2+. For example:> Note: The `yarn dlx` command is available in Yarn 2+. For Yarn 1.x, use `npx` instead.This addition would help users with different yarn versions understand which command to use.
apps/www/content/docs/components/accordion.mdx (3)
30-30: LGTM! Consider adding a note about Yarn version compatibility.The update to use
yarn dlxinstead ofnpxfor Yarn users is correct and aligns with modern Yarn usage. This change improves the accuracy of the installation instructions.Consider adding a note specifying which Yarn version this command is compatible with (e.g., "For Yarn 2+"). This can help prevent confusion for users on older Yarn versions.
Line range hint
196-235: LGTM! Consider adding a brief explanation for the Link component.The customizability example effectively demonstrates how to add custom elements to the AccordionTrigger and properly handle event propagation. This is valuable for users looking to extend the component's functionality.
Consider adding a brief comment or explanation about the
Linkcomponent from 'lucide-react'. This would help users understand its purpose in the example and potentially guide them on how to import and use it in their own projects.
Line range hint
237-279: LGTM! Consider adding default values for all props.The props documentation is comprehensive and well-structured, providing clear descriptions and type information for both the Accordions and Accordion components. The inclusion of data attributes is particularly helpful for advanced usage scenarios.
For completeness, consider adding default values for all props where applicable. For example, the
propsprop for both Accordions and Accordion is listed with a default of{}, but other props likecollapsibleorshowCopyButtoncould also benefit from explicitly stated default values.apps/www/content/docs/components/select.mdx (1)
43-43: LGTM! Consider adding a comment for clarity.The update to use
yarn dlxinstead ofnpxfor the Yarn installation command is correct and aligns with Yarn's best practices.Consider adding a brief comment explaining why
dlxis used for Yarn, as it might not be familiar to all users. For example:```bash + # Use 'dlx' for Yarn, which is equivalent to 'npx' for running one-off commands yarn dlx ruru-ui-cli@latest add select ```apps/www/content/docs/components/button.mdx (1)
34-34: LGTM! Consider adding a comment about Yarn version compatibility.The update from
npxtoyarn dlxis correct and aligns with modern Yarn usage. This change ensures consistency across the documentation for Yarn users.Consider adding a small comment about Yarn version compatibility, as
yarn dlxis available in Yarn 2+. For example:```bash + # For Yarn 2+ yarn dlx ruru-ui-cli@latest add button ```This addition would help users with older Yarn versions understand why the command might not work for them.
packages/ui/src/components/modal.tsx (3)
62-68: LGTM! Consider adding JSDoc for better documentation.The addition of the
animationVariantprop enhances the Modal component's flexibility by allowing customizable animations. The type safety ensures only valid variants can be used, and the default value maintains backward compatibility.Consider adding a JSDoc comment for the
animationVariantprop to provide more detailed information about its usage and available options. For example:/** * The animation variant to use for the modal. * @type {keyof typeof modalVariants} * @default "default" */ animationVariant?: keyof typeof modalVariants;
130-304: LGTM! Consider adding type annotation for better type safety.The
modalVariantsconstant provides a comprehensive set of pre-defined animations, enhancing the Modal component's versatility. Each animation is well-defined with appropriate properties and durations.Consider adding a type annotation to the
modalVariantsconstant for improved type safety and better IDE support. For example:export const modalVariants: Record<string, { hidden: MotionProps; visible: MotionProps; exit: MotionProps; }> = { // ... existing code };This will ensure that all variants have the required states and that the properties within each state are valid
MotionProps.
363-363: LGTM! Consider adding error handling for invalid animation variants.The implementation of the
animationVariantprop in the Modal component is correct and maintains backward compatibility with the default value. The use ofmodalVariants[animationVariant]effectively applies the selected animation configuration.Consider adding error handling for cases where an invalid
animationVariantis provided. While TypeScript should catch this at compile-time, it's good to have a runtime check as well. For example:const variant = modalVariants[animationVariant] || modalVariants.default; <motion.div // ...other props variants={variant} // ... > {children} </motion.div>This ensures that even if an invalid variant is somehow provided, the component will fall back to the default animation instead of potentially crashing.
Also applies to: 398-398
apps/www/content/docs/components/stack.mdx (5)
48-80: LGTM: Clear explanation and example for the 'direction' propThe usage section effectively explains the 'direction' prop and provides a good example demonstrating its use with responsive design.
Consider adding a brief note about the default value of the 'direction' prop in the explanation, as it's only mentioned in the props table at the end of the document.
82-393: LGTM: Comprehensive and consistent prop explanationsThe explanations for each prop are clear, concise, and consistently structured. The examples effectively demonstrate the usage of each prop, which is very helpful for users.
Consider the following minor improvements:
- For the
zIndexprop (lines 300-327), provide a more realistic example that shows how it affects the stacking order in relation to other elements.- For the
visibilityprop (lines 329-356), include a note about how it differs from CSS display property and when to use one over the other.- Consider adding a note about performance implications for frequently changed props like
paddingandmargin, if applicable.🧰 Tools
🪛 LanguageTool
[style] ~331-~331: To form a complete sentence, be sure to include a subject.
Context: ...lity Sets the visibility of the stack. Can be"visible","hidden", or `"collap...(MISSING_IT_THERE)
444-468: LGTM: Comprehensive props tableThe props table provides a clear and concise overview of all available props for the Stack component. This is extremely useful for quick reference.
Consider adding a brief explanation or link to documentation for complex types like
Responsive<T>,AlignItems,JustifyContent, etc., to help users understand these types without needing to look them up separately.
1-468: LGTM: Well-structured and comprehensive documentationThe documentation for the Stack component is well-organized, comprehensive, and user-friendly. It provides a good balance of explanations and examples, making it easy for developers to understand and use the component effectively.
Consider enhancing the documentation with the following additions:
- A "Best Practices" section that provides guidelines on when and how to use the Stack component most effectively.
- A "Common Pitfalls" or "Troubleshooting" section that addresses frequent issues developers might encounter when using the Stack component.
- A brief introduction at the beginning that explains the purpose and benefits of using the Stack component in a project.
🧰 Tools
🪛 LanguageTool
[style] ~331-~331: To form a complete sentence, be sure to include a subject.
Context: ...lity Sets the visibility of the stack. Can be"visible","hidden", or `"collap...(MISSING_IT_THERE)
331-331: Minor grammatical improvement suggestionThe sentence "Sets the visibility of the stack." is grammatically incomplete. While this style is consistent with other prop descriptions, consider revising it for better readability.
You could revise this to "This prop sets the visibility of the stack." However, if you make this change, consider applying it consistently to all prop descriptions throughout the document for uniformity.
🧰 Tools
🪛 LanguageTool
[style] ~331-~331: To form a complete sentence, be sure to include a subject.
Context: ...lity Sets the visibility of the stack. Can be"visible","hidden", or `"collap...(MISSING_IT_THERE)
apps/www/app/page.tsx (4)
Line range hint
1-44: Consider preserving user theme preferenceThe current implementation forces the theme to "dark" if it's set to "light" in localStorage. This might lead to unexpected behavior for users who prefer light mode.
Consider modifying the useEffect hook to respect the user's theme preference:
useEffect(() => { - if (localStorage.getItem("theme") === "light") { - localStorage.setItem("theme", "dark"); + const userTheme = localStorage.getItem("theme"); + if (!userTheme) { + localStorage.setItem("theme", "dark"); window.location.reload(); } }, []);This change will only set the theme to "dark" if no theme preference is found in localStorage, preserving the user's choice if they've set it before.
Line range hint
393-413: Enhanced navigation and call-to-action elementsThe updates to the Link components and the addition of new call-to-action buttons improve user engagement and navigation.
The full-width Link components on smaller screens and the new "Read Docs" and "Give a star" buttons are great additions. Consider adding
aria-labelattributes to these links for improved accessibility, especially for the GitHub star link which uses an icon.Example:
<Link className={cn( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", "border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]", "h-9 px-4 py-2", )} href={"https://github.com/ruru-m07/ruru-ui"} target="_blank" + aria-label="Give a star on GitHub" > <GitHubLogoIcon className="mr-2" /> Give a star </Link>Also applies to: 455-496
Line range hint
215-392: Enhanced landing page with new components and sectionsThe addition of new components (ShapratorHorizontal, StepCounter, Terminal) and sections for showcasing features and contributors significantly improves the landing page's visual appeal and information density.
The new components and sections are well-implemented and provide valuable information to users. Consider adding brief comments to the new component functions (ShapratorHorizontal, StepCounter, Terminal) to explain their purpose and any props they accept. This will improve code maintainability.
Example:
+ /** + * Renders a horizontal separator line. + */ const ShapratorHorizontal = () => { return <div className="border-t w-full" />; }; + /** + * Renders a circular step counter. + * @param {Object} props - The component props. + * @param {number} props.count - The step number to display. + * @param {string} [props.className] - Additional CSS classes to apply. + */ const StepCounter = ({ count, className, }: { count: number; className?: string; }) => { // ... (existing code) };Also applies to: 506-557
Line range hint
1-557: Consider refactoring for improved maintainabilityWhile the HomePage component functions well and achieves its objectives, its size and complexity might pose challenges for future maintenance.
Consider refactoring the component to improve its maintainability:
- Extract larger sections (e.g., the feature grid, the theming and blocks sections) into separate components.
- Move the ShapratorHorizontal, StepCounter, and Terminal components into separate files in a
componentsdirectory.- Use React.lazy() for dynamic imports of heavy components to improve initial load time.
Example refactoring:
import React, { lazy, Suspense } from 'react'; import Hero from "@/components/hero"; import FeatureGrid from "@/components/FeatureGrid"; import ThemingAndBlocks from "@/components/ThemingAndBlocks"; import { ShapratorHorizontal, StepCounter, Terminal } from "@/components/ui"; const ContributorSection = lazy(() => import("@/components/ContributorSection")); export default function HomePage() { // ... (existing useEffect and data) return ( <> <main> <div> <Hero /> {/* ... */} <FeatureGrid /> <ShapratorHorizontal /> <Suspense fallback={<div>Loading...</div>}> <ContributorSection /> </Suspense> <ShapratorHorizontal /> <ThemingAndBlocks /> {/* ... */} </div> </main> <Footer /> </> ); }This refactoring will make the code more modular, easier to maintain, and potentially improve performance through code splitting.
apps/www/content/docs/components/modal.mdx (2)
528-614: New Animation Variants section added with clear explanation and example.The new section effectively introduces the animation variants feature for the Modal component. The included code example is comprehensive, demonstrating how to use the
animationVariantprop with an interactive dropdown for selecting different variants.Consider adding a brief description of each animation variant in the documentation to help users understand what visual effect each variant provides without having to test them all.
Line range hint
1-626: Overall documentation improvements for Modal component.The changes to this file significantly enhance the documentation for the Modal component:
- The new Animation Variants section provides clear information about a new feature.
- Installation instructions have been updated for consistency across package managers.
- The Props section has been expanded to include the new
animationVariantprop.These updates improve the overall quality and completeness of the documentation, making it easier for users to understand and implement the Modal component with its new features.
To further improve the documentation:
- Consider adding a live demo or gif showcasing different animation variants.
- Include a "Best Practices" or "Usage Guidelines" section to help users choose appropriate animation variants for different scenarios.
apps/www/components/contributor-count.tsx (2)
21-23: Simplify the type definition in useStateThe type definition
Contributor[] | []is redundant because an empty array[]is already a validContributor[]. Simplifying the type improves code clarity.Suggested change:
- const [topContributors, setTopContributors] = useState<Contributor[] | []>( + const [topContributors, setTopContributors] = useState<Contributor[]>( [], );
20-20: Consider changing the return type to 'JSX.Element'Using
JSX.Elementas the return type provides better type safety for components that return JSX.React.ReactNodeis a broader type that includes primitives and arrays which may not be necessary here.Suggested change:
}: ContributorCounterProps): React.ReactNode => { + }: ContributorCounterProps): JSX.Element => {apps/www/components/preview/Modal/modalAnimation.tsx (2)
28-36: Review the error handling inhandleSubmit.The current implementation of
handleSubmituses a try-catch block, but the code within thetryblock doesn't include any operations that could throw an error. This might render thecatchblock ineffective. Consider adding proper error handling or adjusting the logic to simulate potential errors for testing purposes.
84-84: Remove unnecessary JSX whitespace.The
{" "}in the JSX expression adds extra space that might not be needed. This can be simplified for cleaner code.Apply this diff to simplify the JSX:
- {submissionStatus === "loading" && <Spinner className="mr-2" />}{" "} Submit + {submissionStatus === "loading" && <Spinner className="mr-2" />}SubmitIf spacing is required, consider adding it through CSS or adjusting the JSX accordingly.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (39)
- .gitignore (1 hunks)
- .husky/pre-commit (1 hunks)
- apps/www/app/layout.tsx (1 hunks)
- apps/www/app/page.tsx (8 hunks)
- apps/www/app/playground/page.tsx (3 hunks)
- apps/www/components/SwitchEvent.tsx (1 hunks)
- apps/www/components/contributor-count.tsx (3 hunks)
- apps/www/components/header/index.tsx (1 hunks)
- apps/www/components/preview/Modal/modalAnimation.tsx (1 hunks)
- apps/www/components/preview/index.tsx (2 hunks)
- apps/www/components/stackPlayground.tsx (1 hunks)
- apps/www/content/docs/cli.mdx (1 hunks)
- apps/www/content/docs/components/accordion.mdx (1 hunks)
- apps/www/content/docs/components/avatar.mdx (1 hunks)
- apps/www/content/docs/components/badge.mdx (1 hunks)
- apps/www/content/docs/components/button.mdx (1 hunks)
- apps/www/content/docs/components/checkbox.mdx (1 hunks)
- apps/www/content/docs/components/dropzone.mdx (1 hunks)
- apps/www/content/docs/components/form.mdx (1 hunks)
- apps/www/content/docs/components/input.mdx (1 hunks)
- apps/www/content/docs/components/label.mdx (1 hunks)
- apps/www/content/docs/components/modal.mdx (3 hunks)
- apps/www/content/docs/components/select.mdx (1 hunks)
- apps/www/content/docs/components/spinner.mdx (1 hunks)
- apps/www/content/docs/components/stack.mdx (1 hunks)
- apps/www/content/docs/components/switch.mdx (8 hunks)
- apps/www/content/docs/components/tabs.mdx (1 hunks)
- apps/www/content/docs/components/textarea.mdx (1 hunks)
- apps/www/content/docs/components/tooltip.mdx (1 hunks)
- apps/www/content/docs/installation.mdx (1 hunks)
- apps/www/public/registry/components/modal.json (1 hunks)
- apps/www/public/registry/components/stack.json (1 hunks)
- apps/www/public/registry/components/switch.json (1 hunks)
- apps/www/public/registry/index.json (1 hunks)
- apps/www/registry/ui.ts (1 hunks)
- packages/ui/package.json (1 hunks)
- packages/ui/src/components/modal.tsx (4 hunks)
- packages/ui/src/components/stack.tsx (1 hunks)
- packages/ui/src/components/switch.tsx (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .gitignore
🧰 Additional context used
🪛 LanguageTool
apps/www/content/docs/components/stack.mdx
[style] ~331-~331: To form a complete sentence, be sure to include a subject.
Context: ...lity Sets the visibility of the stack. Can be"visible","hidden", or `"collap...(MISSING_IT_THERE)
🔇 Additional comments (44)
.husky/pre-commit (2)
1-4: LGTM: Proper script setupThe script setup is correct and follows best practices:
- Appropriate shebang for a shell script
- Correctly sources the Husky script
- Provides clear feedback about the hook execution
14-14: LGTM: Clear success messageThe success message is concise and informative, providing clear feedback that all pre-commit checks have passed successfully.
apps/www/components/SwitchEvent.tsx (2)
6-6: Excellent correction of the component name.The component name has been updated from
SwiychEventtoSwitchEvent, fixing the typo. This improvement enhances code readability and maintainability, and aligns the component name with its intended purpose.
19-19: Correct update of the export statement.The export statement has been updated to reflect the new component name
SwitchEvent. This change ensures that the component can be correctly imported and used in other parts of the application.apps/www/app/layout.tsx (1)
32-32: 🛠️ Refactor suggestionConsider system preferences for default theme
The addition of the
themeprop withdefaultThemeset to "dark" aligns with the PR objective of addressing light mode issues. However, setting a fixed default theme might not cater to all user preferences.Consider the following suggestions:
- Instead of a fixed "dark" theme, you could use a system preference check to set the initial theme. This would provide a better out-of-the-box experience for users.
- Ensure that there's a way for users to override this default setting easily.
- Test this change thoroughly in both light and dark mode to ensure it doesn't introduce any visual inconsistencies.
Here's a potential implementation that respects system preferences:
- <RootProvider theme={{ defaultTheme: "dark" }}> + <RootProvider theme={{ defaultTheme: "system" }}>Consider adding a comment or updating the component's documentation to explain this default theme behavior.
To ensure this change doesn't affect other parts of the application, let's check for any hardcoded theme references:
✅ Verification successful
Default theme aligns with existing theme management
The addition of the
themeprop withdefaultThemeset to "dark" integrates seamlessly with the current theme context. User preferences can still override this default setting as theme management is handled through context and hooks. No hardcoded theme references were found that would prevent respecting user preferences.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for hardcoded theme references rg -i '(dark|light)\s*(mode|theme)' --type tsx --type tsLength of output: 86
Script:
#!/bin/bash # Search for hardcoded theme references in .ts and .tsx files rg -i '(dark|light)\s*(mode|theme)' --glob '*.ts' --glob '*.tsx'Length of output: 2599
apps/www/components/header/index.tsx (1)
Line range hint
1-50: Summary: Responsive improvements implemented, light mode changes not observedThe changes in this file successfully address the PR objective of enhancing mobile responsiveness for the header component. The addition of responsive padding classes improves the layout across different screen sizes.
However, I didn't observe any specific changes related to addressing light mode issues in this file. If there were supposed to be light mode-related changes in the header component, they might need to be implemented.
To ensure we haven't missed any light mode-related changes, you can run the following script to check for any theme-related classes or variables in this file:
#!/bin/bash # Description: Check for theme-related classes or variables in the header component echo "Searching for theme-related classes or variables in the header component:" rg -i "(dark|light|theme|mode)" apps/www/components/header/index.tsxThis will help verify if any theme-related changes were implemented but not immediately apparent in the diff.
apps/www/public/registry/components/switch.json (2)
Line range hint
6-10: LGTM: Well-defined component interfaceThe
SwitchPropsinterface is well-structured, extending button props and including necessary properties for both controlled and uncontrolled usage of the Switch component. This provides flexibility and ease of use for developers implementing the component.
Line range hint
57-59: LGTM: Proper component naming and exportThe component is correctly named and exported:
- Setting
Switch.displayName = "Switch"is good for debugging and dev tools.- Using a named export for the component is appropriate and follows best practices.
apps/www/registry/ui.ts (1)
Line range hint
36-39: Verify the status of the "switch" component dependencies.The AI summary mentioned that dependencies for the "switch" component (specifically "@radix-ui/react-switch") were removed. However, the current code doesn't show this change. Could you please verify if this change was made in a different commit or if it's still pending?
To confirm the current state of the "switch" component, you can run the following command:
If the "dependencies" property is still present for the "switch" component, you may want to update it to reflect the removal of "@radix-ui/react-switch".
apps/www/public/registry/index.json (1)
93-97: New "stack" component added correctly.The new "stack" component has been added to the registry with the correct structure, following the existing conventions. It includes the necessary fields: name, files, and type.
packages/ui/package.json (3)
3-3: Version update looks good.The version bump from 2.2.2 to 2.2.5 is appropriate for the changes described in the PR objectives. It follows semantic versioning principles, indicating bug fixes or minor improvements without breaking changes.
Line range hint
1-138: Limited scope of changes in package.jsonThe changes in this file are minimal and focused, which is good for maintainability. However, the PR objectives mention changes to the landing page and header component, which are not reflected in this package.json file.
To ensure all intended changes are present, please run the following script to check for modifications in the relevant files:
Line range hint
1-138: Verify the new Switch component implementation.The removal of the
@radix-ui/react-switchdependency aligns with the mentioned complete rewrite of the Switch component. While this can potentially reduce package size and simplify dependencies, it's crucial to ensure that the new implementation maintains all necessary functionality and accessibility features previously provided by Radix UI.Please run the following script to locate and review the new Switch component implementation:
✅ Verification successful
Dependency Removal Verified Successfully.
The
@radix-ui/react-switchdependency has been completely removed, and the new self-contained Switch component inpackages/ui/src/components/switch.tsxmaintains all necessary functionality and accessibility features. No remaining references to the Radix UI Switch component were found in the repository.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Locate and display the new Switch component implementation # Find the Switch component file switch_file=$(fd -e tsx -e ts 'Switch' packages/ui/src) if [ -n "$switch_file" ]; then echo "Switch component found at: $switch_file" echo "Contents of the Switch component:" cat "$switch_file" else echo "Switch component file not found. Please verify the component's location and implementation." fi # Check for any remaining references to @radix-ui/react-switch echo "Checking for any remaining references to @radix-ui/react-switch:" rg "@radix-ui/react-switch" packages/uiLength of output: 5630
Script:
#!/bin/bash # Description: Locate and display the new Switch component implementation # Find the Switch component file switch_file=$(fd -e tsx -e ts 'Switch' packages/ui/src) if [ -n "$switch_file" ]; then echo "Switch component found at: $switch_file" echo "Contents of the Switch component:" cat "$switch_file" else echo "Switch component file not found. Please verify the component's location and implementation." fi # Check for any remaining references to @radix-ui/react-switch echo "Checking for any remaining references to @radix-ui/react-switch:" rg "@radix-ui/react-switch" packages/uiLength of output: 447
Script:
#!/bin/bash # Description: Search the entire repository for the Switch component implementation echo "Searching for Switch component files across the entire repository:" fd -E "node_modules" -E "dist" -e tsx -e ts -e jsx -e js "Switch" . if [ $? -ne 0 ]; then echo "Error occurred while searching for Switch component." exit 1 fi echo "" echo "Listing files containing the Switch component definition or export:" rg --files-with-matches --glob '*.{ts,tsx,js,jsx}' "export\s+.*Switch" echo "" echo "Searching for any remaining references to @radix-ui/react-switch across the repository:" rg "@radix-ui/react-switch"Length of output: 789
Script:
#!/bin/bash # Description: Display the contents of the Switch component files echo "Displaying contents of Switch component at: packages/ui/src/components/switch.tsx" cat packages/ui/src/components/switch.tsx echo "" echo "Displaying contents of SwitchEvent component at: apps/www/components/SwitchEvent.tsx" cat apps/www/components/SwitchEvent.tsxLength of output: 3280
apps/www/content/docs/components/tooltip.mdx (1)
35-35: LGTM: Correct update for Yarn installation command.The change from
npxtoyarn dlxfor the Yarn installation command is accurate and aligns with modern Yarn usage. This update ensures consistency with other component documentation and provides the correct installation method for Yarn users.apps/www/content/docs/components/switch.mdx (3)
10-10: LGTM: Import statement correctedThe import statement has been correctly updated from 'SwiychEvent' to 'SwitchEvent', fixing the typo. This change ensures that the correct component is imported and used in the documentation.
58-58: LGTM: Import path updated in usage exampleThe import statement in the usage example has been correctly updated to use the path 'ruru-ui/components/switch'. This change ensures consistency with the actual package structure and improves the accuracy of the documentation.
141-141: LGTM: Component name corrected in "onCheckedChange function" exampleThe component name has been correctly updated from 'SwiychEvent' to 'SwitchEvent'. This change aligns with the corrected import statement at the beginning of the file, ensuring consistency throughout the documentation.
apps/www/components/stackPlayground.tsx (2)
1-4: LGTM: Imports and component declaration are well-structured.The import statements are concise and appropriate for the component's requirements. The
StackPlaygroundcomponent is correctly declared as a functional component, adhering to React best practices.
1-137: Great job on the StackPlayground component!This component serves as an excellent showcase for the capabilities of the Stack component from the ruru-ui library. It's well-structured, comprehensive, and provides clear examples for each property. The consistent use of titles, descriptions, and visual examples makes it easy for developers to understand and utilize the Stack component effectively.
The minor suggestions provided throughout the review can further enhance the component's consistency, accessibility, and reusability. Overall, this is a valuable addition to the project that will greatly aid in documenting and demonstrating the Stack component's functionality.
apps/www/content/docs/installation.mdx (2)
116-116: Excellent update to the Yarn command!The change from
npx ruru-ui-cli@latest add buttontoyarn dlx ruru-ui-cli@latest add buttonis correct and important. This update ensures that Yarn users are using the appropriate command for their package manager, which is crucial for a smooth installation process.
Line range hint
1-116: Final verification of installation documentation recommendedThe installation documentation has been updated with improved accuracy for Yarn users. However, there's a discrepancy in the RuruProvider import statement that needs to be addressed.
To ensure the documentation is fully up-to-date and consistent:
- Verify that all package manager commands (npm, pnpm, yarn, bun) are correct and use the latest syntax.
- Double-check all import statements, especially for the RuruProvider, to ensure they reflect the current package structure.
- Consider adding a note about any recent changes in the package structure or import methods that users should be aware of.
These steps will help maintain the high quality and reliability of the installation guide.
apps/www/public/registry/components/stack.json (4)
1-10: LGTM: JSON structure is well-organized and valid.The JSON structure for the "stack" component is correctly formatted and includes all necessary information for component registration. The use of "type": "components:ui" appropriately categorizes this as a UI component.
Line range hint
1-17: LGTM: Well-structured imports and type definitions.The import statements and type definitions are comprehensive and well-organized. The use of the "use client" directive is appropriate for a component that relies on browser APIs like window resizing.
Line range hint
127-159: LGTM: Well-implemented Stack component.The Stack component is well-structured as a memoized functional component. It correctly handles all props defined in StackProps and uses useState for managing responsive styles, which is a good approach for handling dynamic styling.
Line range hint
243-251: LGTM: Clean and efficient render method.The render method is concise and effectively applies all computed styles. The use of clsx for className composition is a good practice, and spreading the style prop allows for additional custom styling, providing flexibility to the component users.
apps/www/content/docs/components/input.mdx (1)
30-30: LGTM! Important update for Yarn users.The change from
npxtoyarn dlxfor the Yarn installation command is correct and important. This update ensures that Yarn users follow the recommended method for executing one-off commands, improving the accuracy and consistency of the documentation.apps/www/components/preview/index.tsx (1)
35-35: LGTM: Import statement for Stack component.The import statement for the
Stackcomponent is correctly placed and follows the established pattern for importing components from theruru-uipackage.apps/www/public/registry/components/modal.json (2)
6-6: LGTM: Flexible animation options added to Modal componentThe addition of the
animationVariantproperty to theModalPropsinterface is a great enhancement. It allows users to customize the modal's animation style, improving the component's flexibility and user experience. The optional typing and use ofkeyof typeof modalVariantsensure type safety and ease of use.
6-6: LGTM: Excellent enhancement to the Modal componentThe changes introduced in this pull request significantly enhance the Modal component by adding flexible animation options. The implementation is well-structured, maintaining backward compatibility while introducing new features. The core functionality remains intact, and the changes are additive, ensuring that existing usage is not disrupted.
Key points:
- New
animationVariantprop allows for easy customization of modal animations.- Comprehensive set of predefined animation variants added.
- Changes are well-integrated into the existing component structure.
- No negative impacts on performance or usability observed.
Overall, this is a valuable improvement that enhances the versatility and visual appeal of the Modal component. Great job!
packages/ui/src/components/modal.tsx (1)
Line range hint
1-605: Overall, excellent enhancements to the Modal component!The addition of customizable animations through the
animationVariantprop andmodalVariantsconstant significantly improves the flexibility and visual appeal of the Modal component. The implementation is well-integrated, maintains backward compatibility, and provides a wide range of pre-defined animations.A few minor suggestions have been made to further improve type safety, documentation, and error handling. These enhancements will make the component even more robust and developer-friendly.
Great job on this update!
apps/www/content/docs/components/stack.mdx (3)
1-46: LGTM: Comprehensive metadata and installation instructionsThe metadata and installation section is well-structured and informative. It provides clear instructions for various package managers, which is helpful for users with different development environments.
395-442: LGTM: Excellent combined exampleThe combined example effectively demonstrates how multiple props can be used together in a real-world scenario. This is particularly helpful for users to understand how to leverage the full power of the Stack component.
1-468: Excellent documentation for the Stack componentThis documentation file for the Stack component is exceptionally well-crafted. It provides comprehensive coverage of the component's features, clear installation instructions, and detailed usage examples. The consistent structure and the balance between explanations and code samples make it very user-friendly.
The minor suggestions provided in the review comments are aimed at further enhancing what is already a high-quality document. These include adding some additional context for certain props, expanding on complex type definitions, and considering new sections for best practices and troubleshooting.
Overall, this documentation sets a high standard and will greatly assist developers in effectively utilizing the Stack component in their projects.
🧰 Tools
🪛 LanguageTool
[style] ~331-~331: To form a complete sentence, be sure to include a subject.
Context: ...lity Sets the visibility of the stack. Can be"visible","hidden", or `"collap...(MISSING_IT_THERE)
apps/www/app/page.tsx (1)
Line range hint
128-155: Improved responsive layoutThe changes to the grid layout and text sizing enhance the mobile responsiveness of the page, aligning well with the PR objectives.
The adjustment from a 2-column to a 1-column layout on smaller screens (
grid grid-cols-1 sm:grid-cols-2) and the text size modifications improve readability and usability on mobile devices.apps/www/content/docs/components/modal.mdx (3)
17-17: New import for ModalAnimation component added.The import statement for the
ModalAnimationcomponent is correctly placed and consistent with other imports. This addition aligns with the new animation variants section introduced later in the document.
36-36: Updated yarn installation command.The installation command for yarn has been correctly updated to use
yarn dlxinstead ofnpx. This change ensures that yarn users have the correct method to install the package, maintaining consistency across different package managers.
618-626: Props section updated with new animationVariant prop.The Props section has been effectively updated to include the new
animationVariantprop for the Modal component. The documentation is well-formatted, consistent, and provides clear information about the prop's type, default value, and purpose.packages/ui/src/components/switch.tsx (2)
6-10:SwitchPropsinterface is well-defined and follows best practicesThe
SwitchPropsinterface correctly extendsReact.ComponentPropsWithoutRef<"button">and includes optional propertieschecked,onCheckedChange, anddefaultChecked. This allows theSwitchcomponent to support both controlled and uncontrolled usage effectively.
27-71:Switchcomponent implementation is correct and handles state appropriatelyThe
Switchcomponent efficiently manages both controlled and uncontrolled states using theisControlledpattern. It correctly updates the internal state when uncontrolled and relies on thecheckedprop when controlled. The use ofReact.forwardRefand passing...propsensures flexibility and extensibility. Additionally, ARIA attributes likerole="switch"andaria-checkedenhance accessibility.packages/ui/src/components/stack.tsx (1)
393-399: 🛠️ Refactor suggestionHandle units for 'width' and 'height' props to support CSS strings
Similar to the
gapprop, allowingwidthandheightto accept string values with CSS units enhances flexibility.Adjust the handling of
widthandheight:if (width) { const widthValue = getResponsiveValue(width, "auto"); - newStyles.width = typeof widthValue === "number" ? `${widthValue}px` : widthValue; + newStyles.width = typeof widthValue === "number" ? `${widthValue}px` : widthValue; } if (height) { const heightValue = getResponsiveValue(height, "auto"); - newStyles.height = typeof heightValue === "number" ? `${heightValue}px` : heightValue; + newStyles.height = typeof heightValue === "number" ? `${heightValue}px` : heightValue; }Ensure that the
widthandheightprops inStackPropsacceptnumber | string:width?: Responsive<number | string>; height?: Responsive<number | string>;This change allows users to pass values like
"50%"or"100vh".Likely invalid or redundant comment.
apps/www/app/playground/page.tsx (4)
41-41: Import statement is correctThe import of
Modal,ModalProvider, andmodalVariantsfrom"ruru-ui/components/modal"is appropriate and sets up the necessary components for modal functionality.
44-44: ImportingStackPlaygroundcomponentThe
StackPlaygroundcomponent is imported correctly from"@/components/stackPlayground"and is ready for use within the playground page.
613-614: Type assertion onObject.keys(modalVariants)The type assertion
(Object.keys(modalVariants) as Array<keyof typeof modalVariants>)ensures proper typing when iterating overmodalVariants. This is a common practice in TypeScript to avoid issues withObject.keys()returningstring[]. The usage here is appropriate.
652-652: RenderingStackPlaygroundcomponentThe
StackPlaygroundcomponent is rendered correctly, showcasing theStackcomponent's properties for flexible layout management.
|
@coderabbitai ignore |
|
@coderabbitai ignore ✅ Actions performedReviews paused. |
Make the landing page mobile responsive and fix light mode issues.
Landing Page (
apps/www/app/page.tsx)Herocomponent to use responsive classes.Header Component (
apps/www/components/header/index.tsx)Headercomponent.Headercomponent is mobile-friendly.For more details, open the Copilot Workspace session.
Summary by CodeRabbit
New Features
Stackcomponent for flexible layout management.Modalcomponent.Switchcomponent functionality with internal state management.ModalAnimationcomponent for selecting animation variants.HomePagecomponent to include theme preference checks and improved responsiveness.Bug Fixes
yarninstead ofnpx.Documentation