Update contributing guidelines for before you start#723
Conversation
|
Caution Review failedThe pull request is closed. 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/contributing/contributing-to-rad-ui/StarButton.tsxOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThis pull request introduces significant improvements to the documentation and navigation structure of the Rad UI project. The changes include updating the contributing guidelines, adding a new page for setting up the development environment, modifying the documentation layout, and enhancing navigation. The modifications aim to provide clearer, more structured guidance for potential contributors and improve the overall user experience of the documentation. Changes
Sequence DiagramsequenceDiagram
participant Contributor
participant Docs
participant Repository
participant DevEnvironment
Contributor->>Docs: Read Contributing Guidelines
Docs-->>Contributor: Display Prerequisites
Contributor->>Docs: Navigate to Dev Environment Setup
Docs-->>Contributor: Show Cloning & Setup Instructions
Contributor->>Repository: Fork & Clone
Contributor->>DevEnvironment: Install Dependencies
Contributor->>DevEnvironment: Start Storybook
Contributor->>DevEnvironment: Run Documentation Server
Possibly related PRs
Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
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: 0
🧹 Nitpick comments (1)
docs/app/docs/contributing/setting-up-dev-environment/page.tsx (1)
8-9: Consider consistent naming betweenPAGE_NAMEand component title.You use
PAGE_NAME = 'BEFORE_YOU_START', but this page is actually "Setting Up Dev Environment." For clarity in debugging and maintenance, consider renaming thePAGE_NAMEconstant to reflect the page’s actual title (e.g.,'SETTING_UP_DEV_ENV'), or ensure a matching name/label so readers and contributors can locate relevant content more intuitively.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/app/docs/contributing/before-you-start/page.tsx(1 hunks)docs/app/docs/contributing/setting-up-dev-environment/page.tsx(1 hunks)docs/app/docs/layout.tsx(1 hunks)docs/components/Main/Main.js(1 hunks)docs/components/layout/Documentation/utils.js(1 hunks)docs/components/navigation/Navigation.js(2 hunks)
🔇 Additional comments (12)
docs/components/Main/Main.js (1)
20-20: Good use of flex layout and updated background color
This change effectively applies a column layout and sets a more neutral background color (bg-gray-50) in light mode, aligning with contemporary UI conventions.
docs/app/docs/contributing/before-you-start/page.tsx (4)
5-5: PAGE_NAME constant renamed for clarity
Renaming the PAGE_NAME to "BEFORE_YOU_START" improves clarity and consistently reflects the updated page context.
10-10: Title change for better readability
Updating the title to "Before You Start" aligns well with standard heading capitalization practices.
12-22: Clear prerequisites section
Shifting from a single paragraph to a bullet list is beneficial. It outlines the essential knowledge (HTML, CSS, JS, TS, React) in a more digestible format. This should help contributors identify readiness at a glance.
26-34: Logical new “Getting Started” section
Introducing a concise bullet list of recommended first steps (Playground, documentation, local setup) provides a structured path for newcomers.
docs/app/docs/layout.tsx (3)
15-15: Scrollable main content container
Applying overflow-scroll and pt-2 on the main content area with id="docs-content" offers better scrolling behavior and a clear anchor target.
21-23: Encouraging contributions in callout
The updated text clarifies that Rad UI is open for contributors, referencing the “Before You Start” doc. This change should motivate and guide potential collaborators.
26-26: Wrapper div for content
Adding a separate wrapper div (.mt-2) under the callout improves readability and visual spacing.
docs/components/layout/Documentation/utils.js (1)
11-19: Improving scroll behavior with preventDefault and direct element scrolling
Preventing the default link behavior avoids conflicting jumps, and using element.scrollTo() ensures that the target element scrolls directly without relying on a container’s scroll offset. This refines user navigation for deep links.
docs/app/docs/contributing/setting-up-dev-environment/page.tsx (1)
13-75: Overall structure and readability look good!
This file provides a clear, step-by-step guide for setting up the environment, effectively using Rad UI components for consistent styling. No obvious logical issues or security concerns are introduced in these lines. The sections are well-demarcated, and the instructions match standard repository setup flows.
docs/components/navigation/Navigation.js (2)
186-189: Good addition of the new “Setting up dev environment” link.
Linking to the new documentation page under the “Contributing” section is consistent and improves discoverability for new contributors.
200-200: Ensure the extra bottom padding meets design expectations.
A pb-[200px] class adds a large empty space at the bottom of the navigation. Verify that this is intentional and does not negatively impact the layout.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
docs/components/Main/NavBar.js (2)
70-70: Unify repetitive button code for improved maintainability.Define a small helper or common component to reduce repeated logic for Discord/GitHub buttons, differing only in icon and link. Reusability will make future styling or functional changes easier.
74-74: Ensure dark mode toggling remains intuitive with the new outline style.The toggle button’s outline variant may reduce visual emphasis. Confirm that the button remains aesthetically clear and distinguishable for all users, especially regarding its state (on/off).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
docs/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
docs/components/Main/NavBar.js(1 hunks)docs/package.json(1 hunks)
🔇 Additional comments (2)
docs/components/Main/NavBar.js (1)
67-67: Consider verifying button contrast on different backgrounds.Switching the variant to "outline" appears to provide a clearer contrast. However, ensure that the resulting color scheme remains accessible in both light and dark modes, particularly if the background color is also changing.
docs/package.json (1)
Line range hint
14-24: Review React and Next.js version configurationsThere appear to be some inconsistencies in the dependency versions:
- React is pinned to 19.0.0, but the latest stable version is 18.2.0
- Next.js is listed as 15.1.2, but the latest stable version is 14.x.x
These version numbers seem incorrect and could lead to compatibility issues.
| }, | ||
| "dependencies": { | ||
| "@radui/ui": "^0.0.26", | ||
| "@radui/ui": "^0.0.27", |
There was a problem hiding this comment.
💡 Codebase verification
Version bump appears safe but React version mismatch needs attention
The version bump from 0.0.26 to 0.0.27 appears to be a minor update, and looking at the dependencies, there are no major changes in the core dependencies of @radui/ui. However, there's an important issue to note:
- Your project has React pinned to version 19.0.2 in dependencies, but @radui/ui requires and bundles React ^18.2.0
- This version mismatch could lead to compatibility issues and React duplicate instance problems
- Consider updating your React version to match the one required by @radui/ui (^18.2.0) or consult with the library maintainers about React 19 compatibility
🔗 Analysis chain
Verify the impact of @radui/ui version bump
Since this library is in the 0.x.x range (pre-1.0), even patch updates could potentially contain breaking changes. Let's verify the changelog and any breaking changes.
Let me try a different approach to verify the version bump impact.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for breaking changes between versions 0.0.26 and 0.0.27
# Check the changelog or commit history for breaking changes
gh api repos/rad-ui/ui/releases/tags/v0.0.27 --jq '.body' || echo "Release notes not found"
# Look for potential breaking changes in commit messages
git log --grep="BREAKING" --grep="breaking" --grep="!" --since="2024-01-01" --pretty=format:"%h %s"
Length of output: 272
Script:
#!/bin/bash
# Check if there are any other files that depend on @radui/ui
rg "@radui/ui" --type-add 'tsx:*.tsx' --type-add 'ts:*.ts' --type tsx --type ts --type js --type jsx -l
# Look for any migration guides or documentation
fd -e md -e mdx | xargs rg -l "@radui/ui|rad-ui"
# Check package-lock.json for detailed dependency information
fd "package-lock.json" --exec cat {} \; | grep -A 5 -B 5 "@radui/ui"
Length of output: 3622
1 participant
This PR adds docs improvements for new contributors and existing
Summary by CodeRabbit
Documentation
New Features
Style
Chores
@radui/ui.