Add form component #3036
Add form component #3036
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 2990522 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThis pull request consolidates several enhancements across the 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
Documentation and Community
|
ryo-manba
changed the base branch from
canary
to
chore/validation-behavior-external
|
@ryo-manba please pull the changes from canary |
ryo-manba
requested review from
wingkwong and
jrgarciadev
and removed request for
jrgarciadev
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 20
🧹 Outside diff range and nitpick comments (42)
.changeset/purple-berries-play.md (1)
1-5: Changeset looks good, but consider expanding the description.The changeset is correctly formatted and indicates a major version update for the "@nextui-org/form" package. This aligns with the introduction of a new form component, which is a significant addition.
Consider expanding the description to provide more context about the new form component. For example:
- add form component + Add new Form component to @nextui-org/form package + + - Introduces a reusable Form component for managing form state and submissions + - Includes features such as validation behavior switching and server error handling + - Enhances form creation and management within NextUI applicationsThis additional information will make the changelog more informative for users updating to this new version.
packages/components/form/tsup.config.ts (1)
3-8: LGTM: Configuration is well-structured. Consider updating the target option.The configuration is well-defined and follows good practices:
- Cleaning the output directory before each build
- Building both CommonJS and ES modules for compatibility
- Adding the "use client" directive for client-side components
Consider updating the
targetoption to a more recent ECMAScript version, such as "es2022", to take advantage of newer language features while still maintaining good browser compatibility. This change would look like:export default defineConfig({ clean: true, - target: "es2019", + target: "es2022", format: ["cjs", "esm"], banner: {js: '"use client";'}, });This suggestion aligns with the PR objective of introducing a new
Formcomponent and could potentially leverage newer JavaScript features for better performance or cleaner code..changeset/sharp-pianos-pump.md (1)
1-9: LGTM! Consider expanding the change description.The changeset file correctly lists the minor version updates for the affected @nextui-org packages. This aligns with the PR objectives of introducing a new Form component and upgrading related packages.
Consider expanding the change description (line 9) to provide more context about the server validation feature. For example:
-support server validation with form +Add support for server-side validation in the new Form component, allowing for enhanced error handling and validation behaviors.This would give future readers and maintainers a clearer understanding of the changes introduced.
packages/components/form/src/index.ts (2)
4-5: LGTM: Hook export is correct. Consider adding documentation.The export of
useSlottedContextfrom "react-aria-components" is properly implemented. However, it would be beneficial to add a brief comment explaining its purpose and usage in the context of the new Form component.Consider adding a brief comment above the export, like:
// Export useSlottedContext hook for managing slotted content in forms export {useSlottedContext} from "react-aria-components";
1-11: Overall structure is clean and well-organized. Consider adding documentation.The file successfully introduces the necessary exports for the new Form component, leveraging react-aria-components and including a custom Form implementation. This aligns well with the PR objectives.
To improve maintainability and developer experience, consider adding:
- A file-level JSDoc comment explaining the purpose of this module.
- Brief comments for each export group, explaining their role in the Form component ecosystem.
Example:
/** * @file Form component module * This module exports the necessary types, hooks, context, and components * for implementing and using the Form component in the NextUI library. */ // FormProps type for defining form component properties export type {FormProps} from "react-aria-components"; // Hooks for managing form state and behavior export {useSlottedContext} from "react-aria-components"; // Context for sharing form data across components export {FormContext} from "react-aria-components"; // Custom Form component implementation export {Form} from "./form";packages/components/form/src/form.tsx (1)
4-10: LGTM: Well-implemented Form component with a minor suggestion.The
Formcomponent is well-structured and correctly wraps theAriaFormfrom react-aria-components. The fallback logic forvalidationBehavioris implemented effectively.Consider adding prop types validation using PropTypes or TypeScript interfaces for more robust type checking, especially if there are any additional props specific to this wrapper component.
Example using TypeScript:
interface FormWrapperProps extends FormProps { // Add any additional props specific to this wrapper } export const Form = ({validationBehavior, ...props}: FormWrapperProps) => { const globalContext = useProviderContext(); const finalValidationBehavior = validationBehavior ?? globalContext?.validationBehavior ?? "aria"; return <AriaForm {...props} validationBehavior={finalValidationBehavior} />; };This approach would provide better type safety and documentation for the component's props.
packages/components/form/README.md (2)
1-5: Enhance the component description and highlight internal usage.The title is appropriate, but the description could be more informative. Consider providing a brief explanation of the Form component's purpose and key features.
Additionally, to emphasize the internal nature of this utility, consider formatting the note as follows:
# @nextui-org/form A React component for creating and managing forms with enhanced validation and error handling capabilities. > **Note:** This is an internal utility, not intended for public usage.🧰 Tools
🪛 LanguageTool
[style] ~3-~3: Consider using the synonym “brief” (= concise, using a few words, not lasting long) to strengthen your wording.
Context: # @nextui-org/form A Quick description of the component > This is...(QUICK_BRIEF)
15-19: Minor typographical improvement in the contribution section.The content and link in the contribution section are appropriate and helpful. Consider adding a comma before "please" for improved readability:
-Yes please! See the +Yes, please! See the🧰 Tools
🪛 LanguageTool
[typographical] ~17-~17: Usually, a comma is necessary before ‘Yes’ at the end of a sentence. Did you mean “, please”?
Context: ...extui-org/form ``` ## Contribution Yes please! See the [contributing guidelines](http...(COMMA_BEFORE_PLEASE)
packages/components/calendar/src/utils.ts (1)
3-3: Approve changes with a minor suggestion for clarity.The updated function signature improves type safety by explicitly handling null values. This change aligns well with TypeScript's strict null checks and enhances the function's robustness.
For improved clarity, consider using non-nullable types and providing default values:
-export function getYearRange(start?: DateValue | null, end?: DateValue | null): DateValue[] { +export function getYearRange(start: DateValue = new Date(), end: DateValue = new Date()): DateValue[] {This approach eliminates the need for the null check and makes the function's behavior more predictable.
packages/components/checkbox/src/checkbox-group.tsx (1)
29-30: Approve changes with a minor suggestion for consistency.The simplification of the error message rendering logic improves code readability and potentially performance by removing unnecessary memoization. The behavior remains consistent with the previous implementation.
For consistency with the description rendering, consider using parentheses around the condition:
- {isInvalid && errorMessage ? ( + {(isInvalid && errorMessage) ? ( <div {...getErrorMessageProps()}>{errorMessage}</div> ) : description ? ( <div {...getDescriptionProps()}>{description}</div> ) : null}This change aligns the syntax with the
descriptioncondition and makes the code more uniform.packages/components/form/package.json (3)
1-26: Verify version number and consider adding more keywordsThe metadata for the new Form component looks good overall. However, please consider the following suggestions:
Verify if version "2.0.0" is appropriate for a new component. Typically, new packages start with version "1.0.0" unless there's a specific reason to align with the main project's version.
Consider adding more relevant keywords to improve discoverability. Some suggestions: "react", "nextui", "input", "validation", "react-aria".
27-35: Scripts look good, consider adding a test scriptThe scripts section is well-configured with necessary commands for building, development, and type checking. The use of clean-package for prepack and postpack is a good practice.
Suggestion: Consider adding a "test" script if you plan to include unit tests for the Form component. This would align with best practices for component development and continuous integration.
47-53: DevDependencies look good, consider adding testing librariesThe devDependencies listed are appropriate for development purposes. The inclusion of @nextui-org/button suggests it might be used in examples or internal implementation.
Suggestions:
- If you plan to add unit tests for the Form component, consider adding testing libraries such as Jest or React Testing Library to the devDependencies.
- Verify if any additional NextUI components are needed for development or testing purposes.
packages/components/form/stories/form.stories.tsx (3)
28-38: Track the unresolved Input component issueThe TODO comment indicates that the Input component is not working due to circular dependencies in the monorepo. This limits the demonstration capabilities of the Form component in these stories.
Consider the following actions:
- Create a GitHub issue to track this problem if one doesn't exist already.
- Add a link to the GitHub issue in the TODO comment for better traceability.
- Implement a temporary solution, such as using a basic HTML input element, to demonstrate form functionality until the issue is resolved.
Would you like me to create a GitHub issue for this?
40-76: Story variations are comprehensive, consider adding a disabled state storyThe story variations (Default, NativeValidation, AriaValidation, and ServerValidation) provide good coverage of the Form component's functionality. The ServerValidation story effectively demonstrates handling of server-side errors.
Consider adding an additional story variation to demonstrate the Form's disabled state, as it's included in the argTypes but not explicitly shown in a story. This could be implemented as follows:
export const DisabledForm = { render: Template, args: { ...defaultProps, isDisabled: true, }, };This will provide a clear visual representation of how the Form behaves when disabled.
1-76: Overall, good implementation with room for improvementThe Storybook stories for the Form component are well-structured and cover key use cases, including different validation behaviors and server-side error handling. However, there are a few areas for improvement:
- The unresolved issue with the Input component limits the full demonstration of the Form's capabilities. Prioritize resolving this to provide more comprehensive stories.
- Consider adding a disabled state story to showcase all available props.
- The ServerValidation story could benefit from more realistic error handling, perhaps simulating an API call with a delay.
Next steps:
- Resolve the circular dependency issue preventing the use of the Input component.
- Add the suggested DisabledForm story.
- Enhance the ServerValidation story with more realistic error handling.
- Once the Input component is working, update the stories to include various form fields for a more complete demonstration.
These improvements will result in a more robust and informative set of stories for the Form component.
packages/components/checkbox/package.json (1)
51-51: LGTM: Minor version update and flexibility added for @react-aria/utils.The update from version 3.24.1 to "^3.25.2" for "@react-aria/utils" is a minor version bump with added flexibility for future updates. The caret (^) allows for compatible updates, which can be beneficial for keeping the package up-to-date but may introduce unexpected changes in the future.
Consider if this level of flexibility is desired for all @react-aria packages or if it should be consistent across all of them.
packages/components/select/package.json (1)
55-60: Dependency updates look good, with a minor suggestion.The version updates for @react-aria and @react-stately packages are consistent and align with the PR objective of upgrading react-aria to resolve type-checking errors. This should help in incorporating the latest improvements related to form management.
I noticed that the @react-types/shared package has also been updated to version 3.24.1, which wasn't mentioned in the AI summary. Consider updating the PR description to include this change for completeness.
Also applies to: 71-72
packages/core/system/src/provider-context.ts (2)
41-41: Approve type change forminDateand suggest documentation update.The change from
CalendarDatetoDateValuefor theminDateproperty is a good improvement. It allows for more flexibility in date representation, which aligns with the PR's objective of upgrading react-aria and enhancing form handling.Consider updating the documentation comment for this property to reflect the new
DateValuetype and its implications for usage. You might want to include a link to theDateValuedocumentation in react-aria for further reference.
48-48: Approve type change formaxDateand suggest documentation update.The change from
CalendarDatetoDateValuefor themaxDateproperty is consistent with the change made tominDate. This maintains consistency and improves flexibility in date handling.As with the
minDateproperty, consider updating the documentation comment formaxDateto reflect the newDateValuetype and its usage implications. Include a link to theDateValuedocumentation in react-aria for further reference.packages/components/calendar/src/calendar-cell.tsx (1)
52-54: Overall improvement in selection logicThe changes to both
isSelectionStartandisSelectionEndare well-implemented and consistent. They enhance the safety and readability of the code without altering the component's interface or introducing new dependencies.As a minor suggestion for further improvement:
Consider extracting the common logic into a separate function to reduce duplication:
const isSelectionBoundary = (date: CalendarDate, boundaryDate: CalendarDate) => isSelected && highlightedRange ? isSameDay(date, boundaryDate) : false; const isSelectionStart = isSelectionBoundary(props.date, highlightedRange.start); const isSelectionEnd = isSelectionBoundary(props.date, highlightedRange.end);This would further enhance code maintainability and reduce the chance of inconsistencies in future updates.
package.json (1)
Line range hint
1-156: Consider a more comprehensive update of react-aria related packages.The changes in this file are limited to updating two
@react-typespackages. While these updates are a step in the right direction, they may not fully address the type-checking errors mentioned in the PR objectives.Recommendations:
- Review the entire set of
react-ariaand related packages to ensure all are updated to compatible versions.- After updating, thoroughly test the form functionality to verify that all type-checking errors are resolved.
- If you haven't already, consider using a tool like
npm-check-updatesoryarn upgrade-interactiveto identify and update all relevant packages systematically.To facilitate easier updates in the future, consider grouping related packages (like all
react-ariaand@react-typespackages) together in thepackage.jsonfile. This can make it easier to spot version mismatches and update related packages together.packages/components/radio/src/use-radio-group.ts (1)
79-79: LGTM: Improved validationBehavior assignment with clear precedence.The modified assignment for
validationBehaviorestablishes a clear precedence: prop value > form context > global context > "aria" (default). This hierarchy ensures flexibility while maintaining consistency.Consider extracting this logic into a separate function for improved readability:
const getValidationBehavior = () => validationBehavior ?? formValidationBehavior ?? globalContext?.validationBehavior ?? "aria"; // Usage validationBehavior: getValidationBehavior(),This extraction would make the code more maintainable and easier to test.
packages/components/date-picker/src/use-date-picker.ts (1)
67-73: LGTM: Enhanced validation behavior logic.The changes to the
validationBehaviorlogic are well-implemented:
- It now respects the Form context's validation behavior.
- The fallback chain is correctly ordered.
- The use of the nullish coalescing operator is appropriate.
Consider adding a comment explaining the fallback chain for better readability:
// Fallback chain: props > form context > global context > default const validationBehavior = originalProps.validationBehavior ?? formValidationBehavior ?? globalContext?.validationBehavior ?? "aria";packages/components/input/stories/textarea.stories.tsx (1)
217-238: LGTM: ServerValidationTemplate function implemented correctly.The
ServerValidationTemplatefunction effectively demonstrates the usage of the new Form component with server-side validation. It aligns well with the PR objectives.A minor suggestion for improvement:
Consider adding a comment explaining that this is a mock implementation of server-side validation for demonstration purposes. This will help other developers understand the purpose of this template more quickly.
const ServerValidationTemplate = (args: TextAreaProps) => { const [serverErrors, setServerErrors] = React.useState({}); + // Mock server-side validation for demonstration purposes const onSubmit = (e) => { e.preventDefault(); setServerErrors({ comment: "Please provide a valid comment.", }); }; // ... rest of the function };packages/components/date-input/src/use-time-input.ts (2)
78-78: LGTM: Enhanced validation behavior logic.The updated
validationBehaviorlogic now respects a hierarchy of contexts:
- Form-level validation behavior
- Global context validation behavior
- Default "aria" behavior
This change enhances the flexibility of the component while maintaining backward compatibility.
Consider extracting the fallback logic into a separate function for improved readability:
const getValidationBehavior = (formBehavior, globalBehavior) => formBehavior ?? globalBehavior ?? "aria"; // Usage validationBehavior = getValidationBehavior(formValidationBehavior, globalContext?.validationBehavior),This extraction would make the logic more explicit and easier to test if needed.
Also applies to: 97-97
Line range hint
1-268: Overall assessment: Changes align well with PR objectives.The modifications to
useTimeInputsuccessfully integrate the new Form component context and enhance the validation behavior logic. These changes improve the flexibility and context-awareness of the component.Consider grouping related imports and constants at the top of the file for better code organization. For example:
// React and react-aria imports import {useMemo} from "react"; import {useLocale} from "@react-aria/i18n"; import {mergeProps} from "@react-aria/utils"; import {useTimeField as useAriaTimeField} from "@react-aria/datepicker"; import {useTimeFieldState} from "@react-stately/datepicker"; // NextUI imports import {PropGetter, useProviderContext} from "@nextui-org/system"; import {HTMLNextUIProps, mapPropsVariants} from "@nextui-org/system"; import {useDOMRef} from "@nextui-org/react-utils"; import {dateInput} from "@nextui-org/theme"; import {FormContext, useSlottedContext} from "@nextui-org/form"; // Utility imports import {objectToDeps, clsx, dataAttr} from "@nextui-org/shared-utils"; // Types import type {/* ... */} from "/* ... */"; // Constants const DEFAULT_VALIDATION_BEHAVIOR = "aria";This organization can make the file structure more clear and easier to maintain.
packages/components/table/src/use-table.ts (1)
190-193: Approved: Good handling of deprecatedlayoutprop.The changes effectively address the name conflict with the
layoutprop and align with the upgrade of thereact-arialibrary. The exclusion of thelayoutproperty fromoriginalPropsensures it's not passed touseReactAriaTable, which is the correct approach for handling deprecated props.Consider updating the comment to provide more context:
- // Exclude the layout prop because it has a name conflict and is deprecated in useTable. + // Exclude the layout prop due to deprecation in react-aria and to avoid name conflicts.This slight modification provides a clearer explanation of why the
layoutprop is being excluded.packages/components/date-input/src/use-date-input.ts (1)
Line range hint
119-149: LGTM! Consider minor readability improvement.The changes in the
useDateInputfunction look good. The introduction of form context integration for validation behavior aligns well with the PR objectives. The new code properly handles the hierarchy of validation behavior sources: form context, global context, and default value.To improve code readability, consider extracting the default value assignment for
validationBehaviorinto a separate constant. This would make the code more self-documenting and easier to maintain. Here's a suggested change:+ const defaultValidationBehavior = "aria"; const { // ... other destructured properties - validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "aria", + validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? defaultValidationBehavior, // ... rest of the properties } = props;packages/components/date-picker/stories/date-picker.stories.tsx (1)
314-335: LGTM: ServerValidationTemplate implementation.The ServerValidationTemplate is well-implemented, correctly using the Form component and managing server-side validation errors. It aligns with the PR objectives of introducing server-side validation for the Form component.
Consider adding a comment explaining that this is a simulation of server-side validation, as it might not be immediately clear to other developers that this is just for demonstration purposes in a Storybook story.
packages/components/date-picker/stories/date-range-picker.stories.tsx (1)
380-402: LGTM: ServerValidationTemplate implemented correctlyThe ServerValidationTemplate effectively demonstrates server-side validation for the DateRangePicker component. It correctly uses the Form component to handle validation errors and prevents default form submission.
Consider adding a brief comment explaining the purpose of this template for better code documentation. For example:
+// Template to demonstrate server-side validation for DateRangePicker const ServerValidationTemplate = (args: DateRangePickerProps) => { // ... rest of the code };packages/components/input/stories/input.stories.tsx (1)
519-540: ServerValidationTemplate implementation looks good.The template effectively demonstrates the usage of the Form component with server-side validation. It correctly uses React hooks for state management and passes the serverErrors to the Form component.
A minor suggestion for improvement:
Consider adding a loading state to enhance user experience during form submission. This can be implemented as follows:
const ServerValidationTemplate = (args: InputProps) => { const [serverErrors, setServerErrors] = React.useState({}); + const [isLoading, setIsLoading] = React.useState(false); const onSubmit = (e) => { e.preventDefault(); + setIsLoading(true); + // Simulate server request + setTimeout(() => { setServerErrors({ username: "Please provide a valid username.", }); + setIsLoading(false); + }, 1000); }; return ( <Form className="flex flex-col items-start gap-2" validationErrors={serverErrors} onSubmit={onSubmit} > <Input {...args} label="Username" name="username" /> - <button className={button({color: "primary"})} type="submit"> + <button className={button({color: "primary"})} type="submit" disabled={isLoading}> - Submit + {isLoading ? "Submitting..." : "Submit"} </button> </Form> ); };This change will provide better feedback to the user during form submission.
packages/components/dropdown/__tests__/dropdown.test.tsx (1)
Line range hint
580-603: Crucial test case for dropdown interaction.This test case is important as it verifies the correct behavior when interacting with multiple dropdowns. It ensures that opening one dropdown closes the other, which is a critical user experience aspect.
Consider enhancing this test by also checking the visibility of the dropdown menus themselves, not just the triggers. This would provide a more comprehensive test of the dropdown's behavior. You could add assertions like:
expect(wrapper.queryByRole("menu")).toBeNull(); // Before opening any dropdown expect(wrapper.queryByRole("menu")).toBeVisible(); // After opening the first dropdown expect(wrapper.getAllByRole("menu")).toHaveLength(1); // After opening the second dropdownThis would ensure that the dropdown menus are properly shown and hidden as expected.
packages/components/autocomplete/stories/autocomplete.stories.tsx (1)
807-832: LGTM! Consider adding a success scenario.The
ServerValidationTemplateeffectively demonstrates server-side validation for the Autocomplete component within a Form. The implementation aligns well with the PR objectives of introducing enhanced form functionalities.Consider adding a success scenario to provide a more comprehensive example:
const onSubmit = (e) => { e.preventDefault(); - setServerErrors({ - animals: "Please select a valid animal.", - }); + if (!e.target.animals.value) { + setServerErrors({ + animals: "Please select a valid animal.", + }); + } else { + setServerErrors({}); + alert(`Selected animal: ${e.target.animals.value}`); + } };This change would demonstrate both error and success states, providing a more complete usage example.
packages/components/checkbox/stories/checkbox-group.stories.tsx (2)
140-140: Enhance type safety by specifyingserverErrorsstate typeConsider specifying the type for the
serverErrorsstate to improve type safety and code readability.Apply this change to define the state type:
- const [serverErrors, setServerErrors] = React.useState({}); + const [serverErrors, setServerErrors] = React.useState<Record<string, string>>({});
160-160: Consider defaultingvalidationBehaviorto avoid redundancySince
validationBehavior="native"might already be the default behavior, consider removing it to simplify the code unless a specific behavior is intended.Apply this change if appropriate:
name="terms" - validationBehavior="native" >packages/components/radio/stories/radio.stories.tsx (2)
210-210: Specify type forserverErrorsstateDefining the type of
serverErrorsimproves type safety and code readability.Consider specifying the type when initializing the state:
-const [serverErrors, setServerErrors] = React.useState({}); +const [serverErrors, setServerErrors] = React.useState<Record<string, string>>({});
211-211: Add type annotation toonSubmitevent handlerAdding a type annotation to the event parameter enhances type safety and clarity.
-const onSubmit = (e) => { +const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {packages/components/checkbox/__tests__/checkbox-group.test.tsx (1)
406-409: Address the TODO: Complete the test implementationThe test includes a TODO indicating that certain functions need to be fixed. Completing this test will ensure that the validation behavior is properly tested when users interact with the checkboxes.
Would you like me to help implement the missing test code or open a new GitHub issue to track this task?
packages/components/input/__tests__/input.test.tsx (2)
467-469: Complete the test by addressing the TODO commentThere's a TODO comment indicating incomplete test assertions. Finalizing these assertions ensures the test accurately verifies that the input no longer has validation errors after user interaction.
Do you need assistance in implementing the missing assertions? I can help craft the correct expectations or open a GitHub issue to track this task.
490-493: Finalize the test by resolving the TODOThe test includes a TODO comment with commented-out assertions. Completing these assertions is important to validate that the input's error state is cleared appropriately after user input.
Would you like help in completing this test? I can assist in writing the necessary assertions or create a GitHub issue to ensure this task is tracked.
packages/components/autocomplete/__tests__/autocomplete.test.tsx (1)
630-683: Suggestion: Improve consistency in test descriptionsTo enhance readability and maintain consistency, consider updating the test descriptions to follow a uniform style. For example, use either "should" or "supports" consistently at the beginning of test descriptions.
Also applies to: 725-851
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (82)
- .changeset/polite-mails-kneel.md (1 hunks)
- .changeset/purple-berries-play.md (1 hunks)
- .changeset/sharp-pianos-pump.md (1 hunks)
- package.json (1 hunks)
- packages/components/accordion/package.json (1 hunks)
- packages/components/autocomplete/tests/autocomplete.test.tsx (5 hunks)
- packages/components/autocomplete/package.json (3 hunks)
- packages/components/autocomplete/src/use-autocomplete.ts (3 hunks)
- packages/components/autocomplete/stories/autocomplete.stories.tsx (3 hunks)
- packages/components/avatar/package.json (1 hunks)
- packages/components/breadcrumbs/package.json (1 hunks)
- packages/components/button/package.json (1 hunks)
- packages/components/calendar/package.json (1 hunks)
- packages/components/calendar/src/calendar-cell.tsx (1 hunks)
- packages/components/calendar/src/utils.ts (1 hunks)
- packages/components/card/package.json (1 hunks)
- packages/components/checkbox/tests/checkbox-group.test.tsx (3 hunks)
- packages/components/checkbox/package.json (2 hunks)
- packages/components/checkbox/src/checkbox-group.tsx (1 hunks)
- packages/components/checkbox/src/use-checkbox-group.ts (4 hunks)
- packages/components/checkbox/src/use-checkbox.ts (3 hunks)
- packages/components/checkbox/stories/checkbox-group.stories.tsx (4 hunks)
- packages/components/checkbox/stories/checkbox.stories.tsx (1 hunks)
- packages/components/chip/package.json (1 hunks)
- packages/components/date-input/package.json (2 hunks)
- packages/components/date-input/src/date-input-segment.tsx (0 hunks)
- packages/components/date-input/src/use-date-input.ts (4 hunks)
- packages/components/date-input/src/use-time-input.ts (3 hunks)
- packages/components/date-picker/tests/date-picker.test.tsx (4 hunks)
- packages/components/date-picker/package.json (2 hunks)
- packages/components/date-picker/src/use-date-picker.ts (2 hunks)
- packages/components/date-picker/src/use-date-range-picker.ts (2 hunks)
- packages/components/date-picker/stories/date-picker.stories.tsx (3 hunks)
- packages/components/date-picker/stories/date-range-picker.stories.tsx (3 hunks)
- packages/components/divider/package.json (1 hunks)
- packages/components/dropdown/tests/dropdown.test.tsx (1 hunks)
- packages/components/dropdown/package.json (2 hunks)
- packages/components/form/README.md (1 hunks)
- packages/components/form/package.json (1 hunks)
- packages/components/form/src/form.tsx (1 hunks)
- packages/components/form/src/index.ts (1 hunks)
- packages/components/form/stories/form.stories.tsx (1 hunks)
- packages/components/form/tsconfig.json (1 hunks)
- packages/components/form/tsup.config.ts (1 hunks)
- packages/components/input/tests/input.test.tsx (2 hunks)
- packages/components/input/package.json (1 hunks)
- packages/components/input/src/use-input.ts (5 hunks)
- packages/components/input/stories/input.stories.tsx (3 hunks)
- packages/components/input/stories/textarea.stories.tsx (3 hunks)
- packages/components/kbd/package.json (1 hunks)
- packages/components/link/package.json (1 hunks)
- packages/components/listbox/package.json (1 hunks)
- packages/components/menu/package.json (1 hunks)
- packages/components/modal/package.json (1 hunks)
- packages/components/navbar/package.json (1 hunks)
- packages/components/pagination/package.json (1 hunks)
- packages/components/popover/package.json (1 hunks)
- packages/components/progress/package.json (1 hunks)
- packages/components/radio/tests/radio.test.tsx (3 hunks)
- packages/components/radio/package.json (2 hunks)
- packages/components/radio/src/use-radio-group.ts (3 hunks)
- packages/components/radio/stories/radio.stories.tsx (5 hunks)
- packages/components/select/package.json (2 hunks)
- packages/components/slider/package.json (1 hunks)
- packages/components/snippet/package.json (2 hunks)
- packages/components/switch/package.json (1 hunks)
- packages/components/table/package.json (2 hunks)
- packages/components/table/src/use-table.ts (2 hunks)
- packages/components/tabs/package.json (1 hunks)
- packages/components/tooltip/package.json (1 hunks)
- packages/components/user/package.json (1 hunks)
- packages/core/react/package.json (1 hunks)
- packages/core/system-rsc/package.json (1 hunks)
- packages/core/system/package.json (1 hunks)
- packages/core/system/src/provider-context.ts (2 hunks)
- packages/hooks/use-aria-accordion-item/package.json (2 hunks)
- packages/hooks/use-aria-accordion/package.json (2 hunks)
- packages/hooks/use-aria-button/package.json (2 hunks)
- packages/hooks/use-aria-link/package.json (2 hunks)
- packages/hooks/use-aria-menu/package.json (1 hunks)
- packages/hooks/use-aria-modal-overlay/package.json (1 hunks)
- packages/hooks/use-aria-multiselect/package.json (1 hunks)
⛔ Files not processed due to max files limit (6)
- packages/hooks/use-aria-toggle-button/package.json
- packages/hooks/use-disclosure/package.json
- packages/hooks/use-intersection-observer/package.json
- packages/hooks/use-is-mobile/package.json
- packages/hooks/use-pagination/package.json
- packages/utilities/aria-utils/package.json
💤 Files with no reviewable changes (1)
- packages/components/date-input/src/date-input-segment.tsx
🧰 Additional context used
🪛 LanguageTool
packages/components/form/README.md
[style] ~3-~3: Consider using the synonym “brief” (= concise, using a few words, not lasting long) to strengthen your wording.
Context: # @nextui-org/form A Quick description of the component > This is...(QUICK_BRIEF)
[typographical] ~17-~17: Usually, a comma is necessary before ‘Yes’ at the end of a sentence. Did you mean “, please”?
Context: ...extui-org/form ``` ## Contribution Yes please! See the [contributing guidelines](http...(COMMA_BEFORE_PLEASE)
🪛 Biome
packages/components/radio/stories/radio.stories.tsx
[error] 218-218: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
🔇 Additional comments (139)
packages/components/form/tsup.config.ts (1)
1-1: LGTM: Import statement is correct.The import of
defineConfigfrom the "tsup" package is appropriate for setting up the build configuration.packages/components/form/tsconfig.json (2)
1-10: LGTM: TypeScript configuration looks good overall.The
tsconfig.jsonfile is well-structured and follows good practices:
- It extends the root configuration, ensuring consistency across the project.
- The
baseUrlis correctly set to the current directory.- The
includearray properly specifies the files to be compiled.This setup should provide a solid foundation for the new Form component.
5-7: Verify the necessity of the tailwind-variants path mapping.The configuration includes a specific path mapping for
tailwind-variants. While this can be useful for resolving dependencies, it's worth verifying if this mapping is necessary for the Form component.Let's check if
tailwind-variantsis used in the Form component:If the search doesn't return any results, consider removing this path mapping to keep the configuration clean and simple.
packages/components/form/src/index.ts (3)
1-2: LGTM: Type export is correct and aligns with PR objectives.The export of
FormPropsfrom "react-aria-components" is properly implemented and supports the introduction of the new Form component.
7-8: LGTM: Context export is correct and essential for form functionality.The export of
FormContextfrom "react-aria-components" is properly implemented. This context will be crucial for sharing form-related data across components, supporting the new Form component's functionality.
10-11: LGTM: Component export is correct. Verify local file implementation.The export of the
Formcomponent from the local file "./form" is properly implemented. This aligns with the PR objective of introducing a new Form component.To ensure the Form component is correctly implemented, please run the following script:
✅ Verification successful
Verified: Form component export and implementation are correct.
The
Formcomponent is properly exported from./form, and no TODO comments were found in the implementation.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the Form component implementation # Test: Check if the Form component file exists and contains a default export fd -e ts -e tsx -e js -e jsx "form" packages/components/form/src --exec cat {} | ast-grep --lang typescript --pattern 'export $_ function Form' # Test: Check for any TODO comments in the Form component file fd -e ts -e tsx -e js -e jsx "form" packages/components/form/src --exec rg -i "TODO"Length of output: 573
Script:
#!/bin/bash # Description: Refined verification of the Form component export and file existence # Test 1: Check if the Form component file exists fd "form\.(ts|tsx|js|jsx)$" packages/components/form/src # Test 2: Verify the export of the Form component ast-grep --lang typescript --pattern $' export { Form } from "./form"; ' packages/components/form/src # Test 3: Check for any TODO comments in the Form component file fd "form\.(ts|tsx|js|jsx)$" packages/components/form/src --exec rg -i "TODO"Length of output: 444
Script:
#!/bin/bash # Description: Refined verification of the Form component export and file existence # Test 1: Check if the Form component file exists fd "form\.(ts|tsx|js|jsx)$" packages/components/form/src # Test 2: Verify the export of the Form component ast-grep --lang typescript --pattern $' export { Form } from "./form"; ' packages/components/form/src/index.ts # Test 3: Check for any TODO comments in the Form component file rg -i "TODO" packages/components/form/src/form.tsxLength of output: 439
packages/components/form/src/form.tsx (1)
1-2: LGTM: Imports are well-structured and appropriate.The import statements are clear and concise. Renaming
FormtoAriaFormis a good practice to avoid naming conflicts with the new component.packages/components/form/README.md (2)
7-13: Installation instructions look good.The installation section provides clear instructions for both yarn and npm users. The commands are correct and follow the standard format.
21-24: License information is correctly provided.The license section clearly states the project is licensed under the MIT license and provides a link to the full license text. This is sufficient and follows best practices for open-source projects.
packages/hooks/use-aria-accordion-item/package.json (1)
37-40: LGTM! Dependency versions updated as intended.The updates to the React Aria related packages align with the PR objectives of upgrading react-aria to resolve type-checking errors. This change looks good and should help address the mentioned issues.
To ensure consistency across the project, let's verify if similar updates have been made in other package.json files:
This script will help us verify if the same versions are used consistently across the project.
✅ Verification successful
<!-- [monologue] [task verify_dependency_consistency_1/1] Review the results of the dependency version consistency check. [observations] - The shell script executed four `rg` commands to verify the versions of `@react-aria/button`, `@react-aria/focus`, `@react-stately/tree`, and `@react-types/shared` across all `package.json` files in the project. - All occurrences of these dependencies across various packages match the specified versions in the PR: - `@react-aria/button`: "3.9.8" - `@react-aria/focus`: "3.18.2" - `@react-stately/tree`: "3.8.4" - `@react-types/shared`: "3.24.1" - No discrepancies were found in the dependency versions across the project. [analysis] - The consistency in dependency versions ensures that the upgrades align with the PR objectives of resolving type-checking errors. - Uniform versions across all packages prevent potential conflicts and maintain stability within the project. - Since all checks passed without issues, no further investigation is required. [actions] - Conclude the verification process by approving the dependency updates. - No additional shell scripts or actions are necessary. -->Dependency Versions Consistently Updated
All React Aria related package versions are consistently updated across the project, ensuring uniformity and resolving the type-checking errors as intended.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for consistency in React Aria package versions across the project # Test: Search for React Aria package versions in all package.json files rg --type json '"@react-aria/button": "3\.9\.8"' -g 'package.json' rg --type json '"@react-aria/focus": "3\.18\.2"' -g 'package.json' rg --type json '"@react-stately/tree": "3\.8\.4"' -g 'package.json' rg --type json '"@react-types/shared": "3\.24\.1"' -g 'package.json'Length of output: 5633
packages/core/system-rsc/package.json (1)
49-49: Approved: Dependency update looks good.The update of
@react-types/sharedfrom version 3.23.1 to 3.24.1 aligns with the PR objective of upgrading thereact-arialibrary to resolve type-checking errors. This minor version bump should introduce new features or bug fixes without breaking changes.To ensure this update doesn't introduce any conflicts, please run the following verification script:
This script will help identify any potential compatibility issues with peer dependencies or other packages in the monorepo that use
@react-types/shared.packages/hooks/use-aria-link/package.json (1)
40-44: Dependency updates look good, but verify compatibility and completeness.The version updates for React Aria and React Types dependencies align with the PR objective of upgrading the react-aria library. These minor version increments should not introduce breaking changes. However, please ensure:
- These updates are sufficient to resolve the type-checking errors mentioned in the PR objectives.
- The new versions are compatible with the rest of the project, especially the new Form component.
- No additional dependencies need to be updated in conjunction with these changes.
To verify the compatibility and completeness of these updates, run the following script:
packages/hooks/use-aria-modal-overlay/package.json (1)
37-40: Dependency updates look good, verify type-checking errors resolution.The updates to react-aria related packages align with the PR objective. These minor version increments should help resolve the type-checking errors mentioned in the PR description.
To ensure the updates have resolved the type-checking errors, please run the following command in the project root:
Also, note that @react-types/shared remains at version 3.24.1. While this might be intentional, please verify that this doesn't cause any compatibility issues with the updated packages.
packages/components/user/package.json (1)
46-47: LGTM! Dependency versions updated as intended.The updates to @react-aria/focus (3.18.2) and @react-aria/utils (3.25.2) align with the PR objective to upgrade the react-aria library. These minor version updates should help resolve the type-checking errors mentioned in the PR summary.
To ensure a smooth transition, please:
Review the changelogs for these updates to confirm there are no breaking changes:
Thoroughly test the User component and any related components that might be affected by these updates.
Verify that the type-checking errors mentioned in the PR objectives are indeed resolved with these updates.
✅ Verification successful
To verify the installed versions of
@react-aria/focusand@react-aria/utils, please run the following shell script:
Please run the following shell script to verify the versions of
@react-aria/focusand@react-aria/utilsinpackages/components/user/package.json:
Verified! The versions of
@react-aria/focus(3.18.2) and@react-aria/utils(3.25.2) inpackages/components/user/package.jsonare updated as intended and align with the PR objectives to upgrade the react-aria library.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the installed versions of @react-aria dependencies # Test: Check the installed versions of @react-aria/focus and @react-aria/utils echo "Installed versions of @react-aria dependencies:" npm list @react-aria/focus @react-aria/utilsLength of output: 222
Script:
#!/bin/bash # Description: Verify the installed versions of @react-aria dependencies # Check if package.json exists if [ ! -f package.json ]; then echo "package.json not found in the repository root." exit 1 fi # Extract the versions of @react-aria/focus and @react-aria/utils using jq echo "Installed versions of @react-aria dependencies:" jq -r '.dependencies["@react-aria/focus"] // "Not Found"' package.json jq -r '.dependencies["@react-aria/utils"] // "Not Found"' package.jsonLength of output: 300
Script:
#!/bin/bash # Description: Verify the installed versions of @react-aria dependencies in packages/components/user/package.json PACKAGE_JSON_PATH="packages/components/user/package.json" # Check if the target package.json exists if [ ! -f "$PACKAGE_JSON_PATH" ]; then echo "package.json not found at $PACKAGE_JSON_PATH." exit 1 fi # Extract the versions of @react-aria/focus and @react-aria/utils using jq echo "Installed versions of @react-aria dependencies in $PACKAGE_JSON_PATH:" jq -r '.dependencies["@react-aria/focus"] // "Not Found"' "$PACKAGE_JSON_PATH" jq -r '.dependencies["@react-aria/utils"] // "Not Found"' "$PACKAGE_JSON_PATH"Length of output: 509
packages/hooks/use-aria-accordion/package.json (2)
37-43: Verify if these updates resolve the mentioned type-checking errors.The updates to the
react-ariarelated packages align with the PR objective of upgrading thereact-arialibrary. However, it's important to verify if these specific updates address the type-checking errors mentioned in the PR objectives.Please run the following script to check for any remaining type-checking errors after these updates:
#!/bin/bash # Description: Check for type-checking errors after dependency updates. # Test: Run TypeScript compiler in noEmit mode to check for type errors echo "Running TypeScript compiler to check for type errors:" npx tsc --noEmitIf the script doesn't reveal any type-checking errors, please confirm that the issues mentioned in the PR objectives have been resolved.
37-43: Dependency versions have been updated.The following dependencies have been updated to newer versions:
- @react-aria/button: 3.9.5 → 3.9.8
- @react-aria/focus: 3.17.1 → 3.18.2
- @react-aria/selection: 3.18.1 → 3.19.3
- @react-aria/utils: 3.24.1 → 3.25.2
- @react-stately/tree: 3.8.1 → 3.8.4
- @react-types/accordion: 3.0.0-alpha.21 → 3.0.0-alpha.23
- @react-types/shared: 3.23.1 → 3.24.1
These updates appear to be minor version increments, which typically indicate bug fixes and non-breaking improvements.
To ensure these updates align with the PR objectives and don't introduce any unexpected changes, please run the following verification script:
.changeset/polite-mails-kneel.md (2)
47-48: Please provide more details on the react-aria update.Updating react-aria aligns with the PR objectives to resolve type-checking errors. However, the current comment lacks specificity.
Could you please provide the following information:
- The current version of react-aria being used.
- The specific version you're updating to.
- Any breaking changes or major features introduced in this update that might affect the NextUI components.
To help verify the current react-aria version, you can run this script:
#!/bin/bash # Description: Find the current react-aria version in package.json files # Test: Search for react-aria version in package.json files fd -e json | xargs grep -H '"react-aria":'
1-45: Version updates look good, but clarification needed on @nextui-org/table.The patch updates across most packages indicate a coordinated maintenance effort, which is good practice. However, the minor update for @nextui-org/table stands out.
Could you please clarify the reasons for the minor update to @nextui-org/table? Are there new features or significant changes that justify a minor version bump?
To verify the consistency of these updates, please run the following script:
✅ Verification successful
There was an error in the previous script. Please run the corrected verification script below:
All package version updates have been successfully verified.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the consistency of package updates in the changeset file # Test: Check if all packages except @nextui-org/table have patch updates grep -v "@nextui-org/table" .changeset/polite-mails-kneel.md | grep -v "^---" | grep -v "^$" | grep -v "patch$" || echo "All packages except @nextui-org/table have patch updates" # Test: Confirm @nextui-org/table has a minor update grep "@nextui-org/table.*minor" .changeset/polite-mails-kneel.md || echo "@nextui-org/table does not have a minor update"Length of output: 138
Script:
# #!/bin/bash # Description: Verify the consistency of package updates in the changeset file # Test: Check if all packages except @nextui-org/table have patch updates grep -v "@nextui-org/table" .changeset/polite-mails-kneel.md | grep -v "^---" | grep -v "^$" | grep -vq "patch$" && echo "All packages except @nextui-org/table have patch updates" # Test: Confirm @nextui-org/table has a minor update grep "@nextui-org/table.*minor" .changeset/polite-mails-kneel.md || echo "@nextui-org/table does not have a minor update"Length of output: 329
packages/components/form/package.json (2)
36-41: Peer dependencies look appropriate, verify version constraintsThe peer dependencies listed are appropriate for a NextUI component. The inclusion of @nextui-org/system and @nextui-org/theme ensures compatibility with the NextUI ecosystem.
Action item: Please verify that the version constraints (">= 2.0.0" for NextUI packages and ">= 18" for React) align with the project's overall requirements and other components.
42-46: Dependencies look good, verify react-aria-components versionThe dependencies listed are appropriate for the Form component. The use of workspace dependencies for NextUI utilities ensures consistency within the project.
Action item: Please verify that the specific version of react-aria-components (1.2.1) is the intended version and aligns with the project's requirements. Consider if a more flexible version range might be appropriate.
packages/components/chip/package.json (1)
46-49: LGTM! Package versions updated as intended.The updates to @react-aria and @react-types packages align with the PR objective of upgrading the react-aria library. These minor version updates should bring improvements and potentially new features without introducing breaking changes.
To ensure compatibility, please run the following script:
packages/core/system/package.json (1)
59-64: LGTM! Dependency updates align with PR objectives.The updates to react-aria packages and the addition of @react-types/datepicker align well with the PR objective of upgrading react-aria and introducing a new Form component. The minor version bumps suggest these changes should be backwards compatible.
To ensure compatibility, please run the following script:
If the script returns no output, it indicates that there are no peer dependency warnings and the new types are being used correctly.
✅ Verification successful
Dependency updates verified successfully.
No peer dependency warnings were detected during the installation process. Additionally, the
@react-types/datepickertypes are actively used in the codebase, ensuring the updates are correctly integrated.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the updated dependencies are compatible with the project and each other. # Test: Check if there are any peer dependency warnings after installation npm install --dry-run 2>&1 | grep -i "WARN" # Test: Verify that the types from @react-types/datepicker are being used in the new Form component rg --type typescript -g '!node_modules' --no-heading -n 'import.*from.*@react-types/datepicker'Length of output: 171
Script:
#!/bin/bash # Description: Verify that the updated dependencies are compatible with the project and each other. # Test: Check if there are any peer dependency warnings after installation npm install --dry-run 2>&1 | grep -i "WARN" # Test: Verify that the types from @react-types/datepicker are being used in the new Form component rg --type ts --type tsx -g '!node_modules' --no-heading -n 'import.*from.*@react-types/datepicker'Length of output: 167
Script:
#!/bin/bash # Description: Verify that the updated dependencies are compatible with the project and each other. # Test: Check if there are any peer dependency warnings after installation npm install --dry-run 2>&1 | grep -i "WARN" # Test: Verify that the types from @react-types/datepicker are being used in the new Form component rg -g "*.ts" -g "*.tsx" -g "!node_modules" --no-heading -n 'import.*from.*@react-types/datepicker'Length of output: 1807
packages/components/snippet/package.json (1)
50-51: LGTM: Dependency versions updated as intended.The updates to @react-aria/focus (3.18.2) and @react-aria/utils (3.25.2) align with the PR objective of upgrading the react-aria library. These minor version updates should not introduce breaking changes.
To ensure consistency and verify the impact of these updates, please run the following script:
This script will help ensure that the react-aria updates are consistent across the project and that they resolve the previously mentioned type-checking errors.
packages/components/avatar/package.json (1)
46-48: LGTM! Verify potential impacts of react-aria updates.The updates to @react-aria dependencies align with the PR objective of upgrading react-aria to resolve type-checking errors. These are minor version updates, which typically don't introduce breaking changes. However, it's important to verify that these updates don't negatively impact other parts of the project.
To ensure these updates don't cause unexpected issues, please run the following verification script:
This script will help identify any potential impacts on other packages and catch any type or runtime errors that might have been introduced by these updates.
packages/components/progress/package.json (1)
46-49: Dependency updates look good, but verify consistency across the project.The updates to react-aria related dependencies are in line with the PR objectives:
- @react-aria/i18n: 3.11.1 → 3.12.2
- @react-aria/progress: 3.4.13 → 3.4.16
- @react-aria/utils: 3.24.1 → 3.25.2
- @react-types/progress: 3.5.4 → 3.5.6
These are minor version bumps, which should not introduce breaking changes. However, it's important to ensure these updates are applied consistently across all components using these dependencies.
To verify the consistency of these updates across the project, run the following script:
This script will help identify any inconsistencies in the versions of these dependencies across different components in the project.
✅ Verification successful
To proceed with verifying the consistency of dependency updates across the project, please run the following script:
To continue verifying the consistency of dependency updates across the project, please run the following script:
Dependency versions are consistently updated across all package.json files.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if the updated dependencies are consistent across all package.json files # Define the dependencies to check dependencies=( "@react-aria/i18n" "@react-aria/progress" "@react-aria/utils" "@react-types/progress" ) # Function to extract version for a given dependency extract_version() { local dep=$1 local file=$2 grep "\"$dep\":" "$file" | sed -E 's/.*"([^"]+)".*/\1/' } # Find all package.json files mapfile -t package_files < <(fd --type f --glob 'package.json' --exclude 'node_modules') # Check each dependency for dep in "${dependencies[@]}"; do echo "Checking versions for $dep:" for file in "${package_files[@]}"; do version=$(extract_version "$dep" "$file") if [ -n "$version" ]; then echo " $file: $version" fi done echo doneLength of output: 818
Script:
# #!/bin/bash # Description: Locate all package.json files excluding node_modules find . -type f -name "package.json" ! -path "*/node_modules/*" -printLength of output: 3639
Script:
# #!/bin/bash # Description: Extract versions of specific dependencies from all package.json files dependencies=( "@react-aria/i18n" "@react-aria/progress" "@react-aria/utils" "@react-types/progress" ) # Find all package.json files excluding node_modules package_files=$(find . -type f -name "package.json" ! -path "*/node_modules/*" -print) for file in $package_files; do echo "File: $file" for dep in "${dependencies[@]}"; do version=$(grep "\"$dep\":" "$file" | sed -E 's/.*"([^"]+)".*/\1/') if [ -n "$version" ]; then echo " $dep: $version" fi done echo doneLength of output: 75431
packages/components/breadcrumbs/package.json (1)
46-50: LGTM! Dependency versions updated as intended.The updates to react-aria and related packages align with the PR objectives. These minor version bumps should help resolve the type-checking errors while maintaining backwards compatibility.
To ensure these updates resolve the type-checking errors without introducing new issues, please run the following verification script:
packages/components/slider/package.json (1)
46-52: Dependency versions updated for React Aria and React Stately libraries.The updates to the React Aria and React Stately dependencies align with the PR objective of upgrading the
react-arialibrary. These changes should resolve type-checking errors caused by version mismatches.However, please consider the following:
- Ensure that these updates are compatible with the new
Formcomponent being introduced.- Verify that these updates don't introduce any breaking changes that could affect the existing slider functionality.
- Consider updating the package version of
@nextui-org/sliderto reflect these dependency changes.To ensure consistency across the project, let's check if other components are using the same versions of these dependencies:
✅ Verification successful
Dependency versions are consistent across all components.
The React Aria and React Stately dependencies in
@nextui-org/slidermatch the versions used in other components, ensuring consistency and preventing potential compatibility issues.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for consistency in React Aria and React Stately dependency versions across components # Test: Search for React Aria and React Stately dependencies in all package.json files rg --type json -g 'package.json' '"@react-aria/|"@react-stately/' packages/components/Length of output: 11982
packages/components/radio/package.json (4)
43-43: LGTM: New Form dependency added correctly.The addition of
@nextui-org/formas a dependency aligns with the PR objective of introducing a new Form component. The use ofworkspace:*for the version is appropriate for a monorepo structure, ensuring consistency across the project.
51-53: LGTM: React Stately and React Types dependencies updated appropriately.The updates to react-stately and react-types dependencies complement the react-aria updates, maintaining consistency across the React Aria ecosystem. These minor version bumps should enhance compatibility without introducing breaking changes.
Line range hint
1-64: Summary: Package dependencies updated successfully for Form component integration.The changes in this file successfully update the necessary dependencies to support the new Form component and upgrade the react-aria ecosystem. These updates align well with the PR objectives and should resolve the mentioned type-checking errors while providing access to the latest features.
Key points:
- New Form component dependency added correctly.
- React Aria dependencies updated to latest minor versions.
- Complementary React Stately and React Types dependencies updated for consistency.
These changes set a solid foundation for integrating the new Form component and improving the overall functionality of the Radio component.
46-50: LGTM: React Aria dependencies updated consistently.The react-aria dependencies have been updated to their latest minor versions, which aligns with the PR objective of upgrading the react-aria library. This should resolve the mentioned type-checking errors and provide access to the latest features.
To ensure compatibility, please run the following command to verify that there are no breaking changes or unexpected issues:
packages/components/switch/package.json (1)
46-52: LGTM! Dependency versions updated as expected.The updates to @react-aria and @react-stately dependencies align with the PR objective of upgrading the react-aria library. This should help resolve type-checking errors and support the latest features related to form handling.
To ensure consistency across the project, please run the following script to check if other components have been updated similarly:
Consider adding or updating tests for the switch component to ensure its functionality remains intact with these new dependency versions.
✅ Verification successful
Dependency versions are consistent across all components.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency of react-aria and react-stately versions across components # Test: Check for inconsistencies in react-aria and react-stately versions fd package.json --exec grep -H -E "@react-(aria|stately|types)" {} | sortLength of output: 22679
packages/components/button/package.json (7)
49-49: LGTM: @react-aria/button version updateThe update from 3.9.5 to 3.9.8 is a minor version increment, which aligns with the PR objective of upgrading react-aria. This change should improve compatibility and resolve type-checking errors without introducing breaking changes.
50-50: LGTM: @react-aria/interactions version updateThe update from 3.21.3 to 3.22.2 is a minor version increment, consistent with the PR's goal of upgrading react-aria. This change should enhance functionality and resolve compatibility issues without causing breaking changes.
51-51: LGTM: @react-aria/utils version updateThe update from 3.24.1 to 3.25.2 is a minor version increment, in line with the PR's objective to upgrade react-aria. This change should improve utility functions and resolve any compatibility issues without introducing breaking changes.
52-52: LGTM: @react-aria/focus version updateThe update from 3.17.1 to 3.18.2 is a minor version increment, consistent with the PR's goal of upgrading react-aria. This change should enhance focus management capabilities and resolve any compatibility issues without causing breaking changes.
54-54: LGTM: @react-types/button version updateThe update from 3.9.4 to 3.9.6 is a patch version increment, which should only include backwards-compatible bug fixes. This change aligns with the PR's objective of upgrading react-aria and resolving type-checking errors, potentially addressing specific issues related to button types.
49-54: Summary of dependency updatesThe updates to react-aria related packages are consistent with the PR objectives:
- All updated packages have minor version increments, which should not introduce breaking changes.
- These updates should help resolve type-checking errors and improve overall compatibility.
- The only package that remains unchanged is @react-types/shared, which warrants verification of compatibility with the updated packages.
Overall, these changes appear to be appropriate and aligned with the goal of upgrading the react-aria library. However, please ensure that the unchanged version of @react-types/shared doesn't lead to any compatibility issues with the updated packages.
53-53: Verify compatibility with unchanged @react-types/shared versionWhile other react-aria related packages have been updated, the version of @react-types/shared remains unchanged at 3.24.1. Please verify that this version is compatible with the updated packages to ensure there are no potential conflicts or type-checking issues.
To check for potential compatibility issues, you can run the following command:
This script will help identify if any of the updated packages have a dependency on @react-types/shared and what version range they require. If any of them require a version higher than 3.24.1, you may need to update @react-types/shared as well.
✅ Verification successful
@react-types/shared version is compatible
The verification indicates that none of the updated packages depend on
@react-types/shared. Therefore, keeping it at version3.24.1does not introduce any compatibility issues.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if @react-types/shared is a dependency of the updated packages and if so, what version range they require. for package in "@react-aria/button" "@react-aria/interactions" "@react-aria/utils" "@react-aria/focus" "@react-types/button"; do echo "Checking $package..." npm info $package dependencies.@react-types/shared npm info $package peerDependencies.@react-types/shared doneLength of output: 2369
Script:
#!/bin/bash # Description: Check if @react-types/shared is a dependency or peerDependency of the updated packages and retrieve their version ranges using jq. packages=("@react-aria/button" "@react-aria/interactions" "@react-aria/utils" "@react-aria/focus" "@react-types/button") for package in "${packages[@]}"; do echo "Checking $package..." package_path=$(fd --type f --name "package.json" | grep "/$package/package.json") if [[ -f "$package_path" ]]; then dependencies=$(jq -r '.dependencies["@react-types/shared"] // "Not listed"' "$package_path") peer_dependencies=$(jq -r '.peerDependencies["@react-types/shared"] // "Not listed"' "$package_path") echo "dependencies.@react-types/shared: $dependencies" echo "peerDependencies.@react-types/shared: $peer_dependencies" else echo "package.json for $package not found." fi doneLength of output: 2972
Script:
#!/bin/bash # Description: Check if @react-types/shared is a dependency or peerDependency of the updated packages and retrieve their version ranges using jq. packages=("@react-aria/button" "@react-aria/interactions" "@react-aria/utils" "@react-aria/focus" "@react-types/button") for package in "${packages[@]}"; do echo "Checking $package..." package_path=$(fd "package.json" --type f | grep "/$package/package.json") if [[ -f "$package_path" ]]; then dependencies=$(jq -r '.dependencies["@react-types/shared"] // "Not listed"' "$package_path") peer_dependencies=$(jq -r '.peerDependencies["@react-types/shared"] // "Not listed"' "$package_path") echo "dependencies.@react-types/shared: $dependencies" echo "peerDependencies.@react-types/shared: $peer_dependencies" else echo "package.json for $package not found." fi doneLength of output: 1682
Script:
#!/bin/bash # Description: Check if @react-types/shared is a dependency or peerDependency of the updated packages and retrieve their version ranges using jq. packages=("@react-aria/button" "@react-aria/interactions" "@react-aria/utils" "@react-aria/focus" "@react-types/button") # Find all package.json files in the repository package_files=$(fd "package.json" --type f) for package in "${packages[@]}"; do echo "Checking $package..." package_found=false while IFS= read -r file; do pkg_name=$(jq -r '.name' "$file" 2>/dev/null) if [[ "$pkg_name" == "$package" ]]; then package_found=true dependencies=$(jq -r '.dependencies["@react-types/shared"] // "Not listed"' "$file") peer_dependencies=$(jq -r '.peerDependencies["@react-types/shared"] // "Not listed"' "$file") echo "Found in: $file" echo "dependencies.@react-types/shared: $dependencies" echo "peerDependencies.@react-types/shared: $peer_dependencies" break fi done <<< "$package_files" if ! $package_found; then echo "package.json for $package not found." fi doneLength of output: 83806
packages/components/date-input/package.json (2)
43-43: LGTM: New Form component dependency added.The addition of
@nextui-org/formas a dependency aligns with the PR objective of introducing a new Form component. Theworkspace:*version correctly indicates that this is an internal package within the monorepo.
46-52: LGTM: Dependencies updated to latest compatible versions.The updates to react-aria related dependencies align with the PR objective of upgrading the library. These are minor version bumps, which should maintain backwards compatibility. However, it's important to ensure that these updates work well together and with the rest of the project.
Please run the following script to verify the compatibility of the updated dependencies:
packages/hooks/use-aria-multiselect/package.json (1)
37-50: Dependency updates look good, verify compatibility.The updates to @react-aria, @react-stately, and @react-types dependencies are consistent and align with the PR objective of upgrading the react-aria library. These minor version increments should resolve type-checking errors and potentially introduce beneficial bug fixes and features.
To ensure compatibility, please run the following script:
packages/components/card/package.json (1)
48-52: LGTM! Dependency versions updated as intended.The updates to @react-aria dependencies align with the PR objective of upgrading react-aria to resolve type-checking errors. The incremental version bumps (e.g., 3.17.1 to 3.18.2) suggest that these updates incorporate bug fixes and new features without introducing breaking changes.
Could you please verify if the @react-types/shared package at version 3.24.1 is the latest compatible version? If a newer version is available and compatible, consider updating it as well for consistency.
To check the latest version, you can run:
If a newer version is available, please ensure it's compatible with the other updated @react-aria packages before updating.
packages/components/input/package.json (3)
37-40: LGTM: peerDependencies changes look goodThe reordering of peerDependencies and the slight modification to React version requirements (">=" instead of "^") are acceptable changes. These modifications don't affect functionality and provide more flexibility for React versions.
59-66: LGTM: devDependencies changes are appropriateThe reordering of @nextui-org/theme and the addition of specific versions for react and react-dom (^18.0.0) in devDependencies are appropriate changes. These modifications ensure consistency with the peerDependencies and don't affect functionality.
43-54: Dependency updates look good, verify compatibilityThe addition of
@nextui-org/formaligns with the PR objective of introducing a new Form component. The updates to @react-aria and @react-types dependencies are minor version bumps, which should maintain backwards compatibility.To ensure compatibility, please run the following script:
packages/components/form/stories/form.stories.tsx (1)
8-24: Storybook configuration looks goodThe Storybook configuration is well-structured and provides interactive controls for key props (isDisabled and validationBehavior). This will enhance the component's testability and demonstration in Storybook.
packages/components/tooltip/package.json (1)
49-55: Approved: Dependencies updated successfully.The updates to @react-aria and @react-stately packages are consistent and align with the PR objective of upgrading the react-aria library. These minor version increments should introduce new features or non-breaking changes.
To ensure these updates don't introduce any unexpected behavior changes, please run the following verification steps:
Update the project's dependencies:
Run the project's test suite:
Manually test the Tooltip component to verify its functionality remains intact.
If any issues are discovered during these steps, please address them before merging this PR.
packages/components/menu/package.json (1)
49-56: Dependency updates look good, but verify compatibility.The updates to @react-aria, @react-stately, and @react-types dependencies are consistent and align with the PR objective of upgrading the react-aria library. These minor version bumps should introduce new features or fixes without breaking changes.
To ensure compatibility, please run the following verification steps:
Additionally, manually test the menu component to ensure it functions correctly with these updated dependencies.
packages/components/dropdown/package.json (1)
49-53: LGTM! Dependency versions updated as intended.The updates to @react-aria and @react-stately dependencies align with the PR objective of upgrading react-aria to resolve type-checking errors. These minor version updates should be compatible and are unlikely to introduce breaking changes.
To ensure that the type-checking errors have been resolved, please run the following command:
If the command completes without errors, it confirms that the type-checking issues have been resolved.
packages/components/listbox/package.json (1)
48-54: Version updates for @react-aria and @react-types packages look good.The updates to the @react-aria and @react-types package versions are consistent with the PR objective of upgrading the react-aria library. These changes should help resolve type-checking errors caused by version mismatches and support the latest features related to form handling.
However, it's important to consider the following:
- Ensure that these version updates are compatible with other dependencies in the project.
- Verify that these changes don't introduce any breaking changes to the listbox component.
- Update any relevant documentation or usage examples if the new versions introduce new features or changes in API.
To verify the compatibility and potential impacts, run the following script:
packages/components/popover/package.json (1)
51-58: LGTM! Dependency versions updated appropriately.The updates to @react-aria and @react-types dependencies are consistent and align with the PR objectives. These minor version increments should resolve type-checking errors without introducing breaking changes.
To ensure these are the latest stable versions and compatible with the project, please run:
✅ Verification successful
Further Verification Required
The initial verification failed due to the absence of npm. To ensure the updated dependencies are the latest and compatible, please run the following scripts:
Dependency Versions Verified
All updated dependencies are at their latest stable versions and are compatible with the project requirements. No further action is needed.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify latest versions and compatibility of updated dependencies # Test: Check if the updated versions are the latest stable ones npm info @react-aria/dialog @react-aria/focus @react-aria/interactions @react-aria/overlays @react-aria/utils @react-stately/overlays @react-types/button @react-types/overlays version # Test: Check for any peer dependency warnings npm ls @react-aria/dialog @react-aria/focus @react-aria/interactions @react-aria/overlays @react-aria/utils @react-stately/overlays @react-types/button @react-types/overlaysLength of output: 503
Script:
# #!/bin/bash # Description: Extract current dependency versions using jq and fetch latest versions from npm registry # Check if jq is installed if ! command -v jq &> /dev/null then echo "jq could not be found. Please install jq to proceed." exit fi # Extract current versions from package.json echo "Current dependency versions:" jq '.dependencies["@react-aria/dialog"], .dependencies["@react-aria/focus"], .dependencies["@react-aria/interactions"], .dependencies["@react-aria/overlays"], .dependencies["@react-aria/utils"], .dependencies["@react-stately/overlays"], .dependencies["@react-types/button"], .dependencies["@react-types/overlays"]' packages/components/popover/package.json # Fetch latest versions from npm registry echo "Latest dependency versions:" for pkg in @react-aria/dialog @react-aria/focus @react-aria/interactions @react-aria/overlays @react-aria/utils @react-stately/overlays @react-types/button @react-types/overlays do latest=$(curl -s https://registry.npmjs.org/$pkg | jq -r '.["dist-tags"].latest') echo "$pkg: $latest" doneLength of output: 3441
packages/components/checkbox/package.json (9)
48-48: LGTM: Minor version update for @react-aria/checkbox.The update from version 3.14.3 to 3.14.6 for "@react-aria/checkbox" is a minor version bump, which typically includes bug fixes and small improvements. This change aligns with the PR objective to upgrade react-aria libraries.
50-50: LGTM: Minor version update for @react-aria/interactions.The update from version 3.21.3 to 3.22.2 for "@react-aria/interactions" is a minor version bump, which may include new features along with bug fixes. This change aligns with the PR objective to upgrade react-aria libraries.
52-52: LGTM: Patch version update for @react-aria/visually-hidden.The update from version 3.8.12 to 3.8.15 for "@react-aria/visually-hidden" is a patch version bump, which typically includes bug fixes. This change aligns with the PR objective to upgrade react-aria libraries.
53-53: LGTM: Patch version update for @react-stately/checkbox.The update from version 3.6.5 to 3.6.8 for "@react-stately/checkbox" is a patch version bump, which typically includes bug fixes. This change aligns with the PR objective to upgrade react-aria libraries.
54-54: LGTM: Patch version update for @react-stately/toggle.The update from version 3.7.4 to 3.7.7 for "@react-stately/toggle" is a patch version bump, which typically includes bug fixes. This change aligns with the PR objective to upgrade react-aria libraries.
55-55: LGTM: Patch version update for @react-types/checkbox.The update from version 3.8.1 to 3.8.3 for "@react-types/checkbox" is a patch version bump, which typically includes bug fixes. This change aligns with the PR objective to upgrade react-aria libraries.
43-43: LGTM: New form dependency added.The addition of "@nextui-org/form" aligns with the PR objective to introduce a new Form component. The "workspace:*" version indicates it's an internal package, which is appropriate for monorepo setups.
To ensure this new dependency is being used, run the following script:
#!/bin/bash # Description: Verify the usage of @nextui-org/form in the checkbox component # Test: Search for import statements of @nextui-org/form rg --type typescript 'from\s+["'']@nextui-org/form' packages/components/checkbox/src
49-49: LGTM: Minor version update for @react-aria/focus.The update from version 3.17.1 to 3.18.2 for "@react-aria/focus" is a minor version bump, which may include new features along with bug fixes. This change aligns with the PR objective to upgrade react-aria libraries.
It might be beneficial to check for any new features in this version that could enhance the checkbox component. Run the following script to check the changelog:
#!/bin/bash # Description: Check the changelog for @react-aria/focus # Test: Fetch the changelog for @react-aria/focus gh api repos/adobe/react-spectrum/releases | jq -r '.[] | select(.name | contains("@react-aria/[email protected]")) | .body'
56-56: LGTM: Minor version update for @react-types/shared.The update from version 3.23.1 to 3.24.1 for "@react-types/shared" is a minor version bump, which may include new features along with bug fixes. This change aligns with the PR objective to upgrade react-aria libraries.
It might be beneficial to check for any new features in this version that could enhance the checkbox component. Run the following script to check the changelog:
packages/components/date-picker/package.json (10)
48-48: LGTM: New Form component dependency addedThe addition of
"@nextui-org/form": "workspace:*"is in line with the PR objective of introducing a new Form component. Using a workspace reference is appropriate for monorepo setups.
53-53: LGTM: react-aria/datepicker updatedThe update of
@react-aria/datepickerto version 3.11.2 is in line with the PR objective of upgrading react-aria. As this is a minor version bump, it should introduce new features or non-breaking improvements.To ensure there are no unexpected changes, please review the changelog for
@react-aria/datepickerbetween versions 3.10.1 and 3.11.2.
54-54: LGTM: react-aria/i18n updatedThe update of
@react-aria/i18nto version 3.12.2 is consistent with the PR objective of upgrading react-aria. This minor version bump should bring new features or non-breaking improvements.To ensure there are no unexpected changes, please review the changelog for
@react-aria/i18nbetween versions 3.11.1 and 3.12.2.
55-55: LGTM: react-aria/utils updatedThe update of
@react-aria/utilsto version 3.25.2 aligns with the PR objective of upgrading react-aria. This minor version bump should introduce new features or non-breaking improvements.To ensure there are no unexpected changes, please review the changelog for
@react-aria/utilsbetween versions 3.24.1 and 3.25.2.
56-56: LGTM: react-stately/datepicker updatedThe update of
@react-stately/datepickerto version 3.10.2 is part of the react-aria ecosystem upgrade. This minor version bump should bring new features or non-breaking improvements.To ensure there are no unexpected changes, please review the changelog for
@react-stately/datepickerbetween versions 3.9.4 and 3.10.2.
57-57: LGTM: react-stately/overlays updatedThe update of
@react-stately/overlaysto version 3.6.10 is part of the react-aria ecosystem upgrade. This patch version bump should only include bug fixes and minor improvements, which is beneficial for the project.
58-58: LGTM: react-stately/utils updatedThe update of
@react-stately/utilsto version 3.10.3 is part of the react-aria ecosystem upgrade. This patch version bump should only include bug fixes and minor improvements, which is beneficial for the project.
59-59: LGTM: react-types/datepicker updatedThe update of
@react-types/datepickerto version 3.8.2 is part of the react-aria ecosystem upgrade. This minor version bump should bring new features or non-breaking improvements.To ensure there are no unexpected changes, please review the changelog for
@react-types/datepickerbetween versions 3.7.4 and 3.8.2.
60-60: LGTM: react-types/shared updatedThe update of
@react-types/sharedto version 3.24.1 is part of the react-aria ecosystem upgrade. This minor version bump should introduce new features or non-breaking improvements.To ensure there are no unexpected changes, please review the changelog for
@react-types/sharedbetween versions 3.23.1 and 3.24.1.
48-60: Summary: Dependency updates align with PR objectivesThe changes in this file successfully accomplish two main objectives:
Upgrading the react-aria ecosystem: Multiple dependencies related to react-aria and react-stately have been updated to their latest versions. This should bring new features, improvements, and bug fixes to the date-picker component.
Adding support for the new Form component: The addition of the
@nextui-org/formdependency prepares the date-picker for integration with the new Form component.These updates are consistent with the PR's goals and should improve the overall functionality and compatibility of the date-picker component.
To ensure a smooth integration, please:
- Test the date-picker component thoroughly with the updated dependencies.
- Verify that the date-picker works correctly within the new Form component.
- Update any relevant documentation to reflect any new features or changes in behavior resulting from these updates.
packages/components/modal/package.json (1)
51-57: Approve package updates with a suggestion for verification.The updates to @react-aria and related packages are consistent and align with the PR objective of upgrading the react-aria library. These minor version increments should help resolve type-checking errors without introducing breaking changes.
To ensure optimal compatibility and up-to-date dependencies, please verify:
- These are the latest stable versions of the packages.
- They are compatible with other dependencies in the project.
You can use the following script to check for the latest versions:
Compare the output with the versions in the package.json file to ensure you're using the latest stable versions.
packages/components/navbar/package.json (1)
49-54: Dependency updates look good, but verify compatibility.The updates to react-aria and react-stately dependencies align with the PR objective of upgrading the react-aria library. These minor version bumps should resolve type-checking errors and introduce backwards-compatible improvements.
To ensure compatibility, please run the following script:
packages/components/table/package.json (1)
48-56: Dependency updates look good, but verify compatibility.The updates to React Aria and React Stately packages align with the PR objective of upgrading the
react-arialibrary. These updates should resolve the type-checking errors mentioned in the PR summary. However, it's important to note:
- Most updates are minor version bumps, which typically introduce new features or non-breaking improvements.
- The update to
@react-stately/virtualizer(3.7.1 to 4.0.2) is a major version bump, which may introduce breaking changes.To ensure these updates don't introduce unexpected issues, please run the following verification steps:
After running these tests, please review the output and ensure that:
- The lock file has been updated appropriately.
- There are no critical breaking changes in
@react-stately/virtualizer.- The table component builds successfully with the new dependencies.
Also applies to: 68-68
packages/components/accordion/package.json (1)
57-63: Dependency updates look good, but ensure thorough testing.The updates to react-aria and related packages align with the PR objectives and should help resolve the type-checking errors. The changes are consistent and appear to be non-breaking. However, please note:
- The update to
@react-types/accordion(3.0.0-alpha.23) is still in alpha. Ensure thorough testing of the accordion component to catch any potential issues.- Consider documenting any new features or improvements that these updates might bring to the accordion component.
To verify the impact of these updates, please run the following script:
This script will help identify any breaking changes or deprecations that might affect the accordion component.
✅ Verification successful
Dependency updates verified successfully.
The updates to
react-ariaand related packages align with the PR objectives and do not introduce any breaking changes or deprecations. However, please ensure thorough testing of the@react-types/accordion(3.0.0-alpha.23) alpha version to verify its stability and compatibility within the accordion component.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any breaking changes or deprecations in the updated packages # Test: Search for breaking changes or deprecations in the changelogs of updated packages for package in "@react-aria/interactions" "@react-aria/focus" "@react-aria/utils" "@react-stately/tree" "@react-aria/button" "@react-types/accordion" "@react-types/shared" do echo "Checking $package changelog:" gh release view --repo adobe/react-spectrum $(npm view $package version) | grep -iE "breaking change|deprecat" echo "---" doneLength of output: 3319
Script:
#!/bin/bash # Description: Extract package versions from package.json and check for breaking changes or deprecations # Extract package versions using jq PACKAGE_JSON="packages/components/accordion/package.json" packages=( "@react-aria/interactions" "@react-aria/focus" "@react-aria/utils" "@react-stately/tree" "@react-aria/button" "@react-types/accordion" "@react-types/shared" ) for package in "${packages[@]}" do version=$(jq -r --arg pkg "$package" '.dependencies[$pkg] // .devDependencies[$pkg] // empty' "$PACKAGE_JSON" | tr -d '"') if [ -z "$version" ]; then echo "Version for $package not found in $PACKAGE_JSON." echo "---" continue fi echo "Checking $package changelog (version: $version):" # Assuming the repository follows the pattern 'adobe/react-spectrum' # Adjust the repository name if different repo="adobe/react-spectrum" # Fetch the release notes for the specific version gh release view --repo "$repo" "$version" 2>/dev/null | grep -iE "breaking change|deprecat" if [ $? -ne 0 ]; then echo "No breaking changes or deprecations found." fi echo "---" doneLength of output: 4431
Script:
#!/bin/bash # Description: Retrieve repository URLs for each package and check for breaking changes or deprecations in their release notes PACKAGE_JSON="packages/components/accordion/package.json" packages=( "@react-aria/interactions" "@react-aria/focus" "@react-aria/utils" "@react-stately/tree" "@react-aria/button" "@react-types/accordion" "@react-types/shared" ) for package in "${packages[@]}" do version=$(jq -r --arg pkg "$package" '.dependencies[$pkg] // .devDependencies[$pkg] // empty' "$PACKAGE_JSON" | tr -d '"') if [ -z "$version" ]; then echo "Version for $package not found in $PACKAGE_JSON." echo "---" continue fi echo "Checking $package changelog (version: $version):" # Fetch repository URL from npm registry using gh api repo_url=$(gh api /repos/$package --jq '.repository.url' 2>/dev/null | sed 's/^git+https/git:https/' | sed 's/.git$//') if [ -z "$repo_url" ]; then echo "Repository URL for $package not found." echo "---" continue fi # Extract owner and repo name from URL repo_owner=$(echo "$repo_url" | awk -F '/' '{print $(NF-1)}') repo_name=$(echo "$repo_url" | awk -F '/' '{print $NF}') if [ -z "$repo_owner" ] || [ -z "$repo_name" ]; then echo "Invalid repository URL format for $package." echo "---" continue fi # Attempt to fetch the release notes for the specific version release_notes=$(gh api repos/"$repo_owner"/"$repo_name"/releases/tags/"$version" --jq '.body' 2>/dev/null) if [ -z "$release_notes" ]; then echo "Release notes for version $version not found in $repo_owner/$repo_name." echo "---" continue fi # Search for 'breaking change' or 'deprecation' in release notes echo "$release_notes" | grep -iE "breaking change|deprecat" && echo "Potential breaking changes or deprecations found." || echo "No breaking changes or deprecations found." echo "---" doneLength of output: 13065
Script:
#!/bin/bash # Description: Retrieve repository URLs for each package from npm registry and check for breaking changes or deprecations in their release notes PACKAGE_JSON="packages/components/accordion/package.json" packages=( "@react-aria/interactions" "@react-aria/focus" "@react-aria/utils" "@react-stately/tree" "@react-aria/button" "@react-types/accordion" "@react-types/shared" ) for package in "${packages[@]}" do version=$(jq -r --arg pkg "$package" '.dependencies[$pkg] // .devDependencies[$pkg] // empty' "$PACKAGE_JSON" | tr -d '"') if [ -z "$version" ]; then echo "Version for $package not found in $PACKAGE_JSON." echo "---" continue fi echo "Checking $package changelog (version: $version):" # Encode package name for URL (handle scoped packages) encoded_package=$(echo "$package" | sed 's/@/%40/') # Fetch package metadata from npm registry package_metadata=$(curl -s "https://registry.npmjs.org/$encoded_package/$version") # Extract repository URL using jq repo_url=$(echo "$package_metadata" | jq -r '.repository.url // empty' | sed -e 's/^git+//' -e 's/.git$//') if [ -z "$repo_url" ]; then echo "Repository URL for $package not found." echo "---" continue fi # Extract owner and repo name from URL # Assuming the repository URL is in the format https://github.com/owner/repo repo_owner=$(echo "$repo_url" | awk -F '/' '{print $(NF-2)}') repo_name=$(echo "$repo_url" | awk -F '/' '{print $(NF-1)}') if [ -z "$repo_owner" ] || [ -z "$repo_name" ]; then echo "Invalid repository URL format for $package: $repo_url" echo "---" continue fi # Attempt to fetch the release notes for the specific version release_notes=$(gh api repos/"$repo_owner"/"$repo_name"/releases/tags/"$version" --jq '.body' 2>/dev/null) if [ -z "$release_notes" ]; then echo "Release notes for version $version not found in $repo_owner/$repo_name." echo "---" continue fi # Search for 'breaking change' or 'deprecation' in release notes if echo "$release_notes" | grep -iE "breaking change|deprecat" > /dev/null; then echo "Potential breaking changes or deprecations found." else echo "No breaking changes or deprecations found." fi echo "---" doneLength of output: 35734
Script:
#!/bin/bash # Description: Retrieve repository URLs for each package from npm registry and check for breaking changes or deprecations in their release notes PACKAGE_JSON="packages/components/accordion/package.json" packages=( "@react-aria/interactions" "@react-aria/focus" "@react-aria/utils" "@react-stately/tree" "@react-aria/button" "@react-types/accordion" "@react-types/shared" ) for package in "${packages[@]}" do version=$(jq -r --arg pkg "$package" '.dependencies[$pkg] // .devDependencies[$pkg] // empty' "$PACKAGE_JSON" | tr -d '"') if [ -z "$version" ]; then echo "Version for $package not found in $PACKAGE_JSON." echo "---" continue fi echo "Checking $package changelog (version: $version):" # Encode package name for URL (handle scoped packages) encoded_package=$(echo "$package" | sed 's/@/%40/') # Fetch package metadata from npm registry package_metadata=$(curl -s "https://registry.npmjs.org/$encoded_package/$version") # Extract repository URL using jq repo_url=$(echo "$package_metadata" | jq -r '.repository.url // empty' | sed -e 's/^git+//' -e 's/.git$//') if [ -z "$repo_url" ]; then echo "Repository URL for $package not found." echo "---" continue fi # Extract owner and repo name from URL # Corrected parsing: owner is $(NF-1), repo is $(NF) repo_owner=$(echo "$repo_url" | awk -F '/' '{print $(NF-1)}') repo_name=$(echo "$repo_url" | awk -F '/' '{print $NF}') if [ -z "$repo_owner" ] || [ -z "$repo_name" ]; then echo "Invalid repository URL format for $package: $repo_url" echo "---" continue fi # Attempt to fetch the release notes for the specific version release_notes=$(gh api repos/"$repo_owner"/"$repo_name"/releases/tags/"$version" --jq '.body' 2>/dev/null) if [ -z "$release_notes" ]; then echo "Release notes for version $version not found in $repo_owner/$repo_name." echo "---" continue fi # Search for 'breaking change' or 'deprecation' in release notes if echo "$release_notes" | grep -iE "breaking change|deprecat" > /dev/null; then echo "Potential breaking changes or deprecations found." else echo "No breaking changes or deprecations found." fi echo "---" doneLength of output: 35790
packages/components/calendar/package.json (1)
51-61: Dependency updates look good, verify compatibilityThe updates to @react-aria, @react-stately, and @react-types packages are consistent and align with the PR objective of upgrading the react-aria library. These minor version increments should introduce new features or non-breaking changes, which is positive for the calendar component.
To ensure these updates don't introduce any unexpected issues, please run the following verification steps:
- Rebuild the calendar component with the new dependencies.
- Run the existing test suite for the calendar component.
- Manually test the calendar component in a sample application to verify its functionality.
packages/components/autocomplete/package.json (3)
44-44: LGTM: New Form component dependency addedThe addition of
@nextui-org/formas a dependency aligns with the PR objective of introducing a new Form component. Theworkspace:*version indicates that it's a local package within the same monorepo, which is the correct approach for internal dependencies.
Line range hint
44-82: Summary: Package updates align with PR objectivesThe changes to
package.jsonare consistent with the PR objectives:
- The addition of
@nextui-org/formsupports the new Form component.- Updates to react-aria and related packages should resolve type-checking issues and provide access to the latest form handling features.
These changes should improve the overall functionality and developer experience when working with forms in the NextUI library.
57-65: LGTM: React Aria and React Stately dependencies updatedThe updates to react-aria and react-stately packages align with the PR objective of upgrading these libraries. This should resolve the type-checking errors and provide access to the latest features related to form handling.
To ensure compatibility, please verify that these updates don't introduce any breaking changes or unexpected behavior in the Autocomplete component. Consider running the component's test suite and manually testing its functionality.
Also applies to: 74-74
packages/core/react/package.json (1)
87-87: Approved: Dependency update for @react-aria/visually-hiddenThe update of @react-aria/visually-hidden from version 3.8.12 to 3.8.15 is a positive change that aligns with the PR objectives of upgrading the react-aria library. This minor version bump likely includes bug fixes and improvements.
To ensure this update doesn't introduce any conflicts, please run the following verification script:
After running these checks, please ensure that:
- There are no dependency conflicts reported.
- There are no breaking changes mentioned in the release notes that could affect our project.
packages/components/calendar/src/calendar-cell.tsx (2)
52-52: Improved safety and clarity in isSelectionStart logicThe new implementation enhances the code by:
- Explicitly checking for the presence of
highlightedRange.- Using a ternary operator for clearer conditional logic.
- Preventing potential errors if
highlightedRangeis undefined.These changes make the code more robust and easier to understand.
54-54: Consistent improvement in isSelectionEnd logicThis change mirrors the improvement made to
isSelectionStart:
- It uses the same ternary operator structure.
- It checks for the presence of
highlightedRangebefore evaluating.- The logic is now more explicit and safer.
The symmetry between
isSelectionStartandisSelectionEndenhances overall code readability and maintainability.packages/components/checkbox/stories/checkbox.stories.tsx (1)
78-78: LGTM! Consider verifying visual consistency.The change from
gap-4togap-2reduces the spacing between form elements, which may improve the form's appearance. This aligns with the PR's goal of introducing a new Form component.To ensure visual consistency across the application, please verify that this change doesn't create discrepancies with other form layouts. You might want to check:
- Other stories in this file that use similar form layouts.
- Any design system documentation or guidelines for form spacing.
- Other components that might be affected by this change.
✅ Verification successful
Verified! The usage of
gap-2is consistent with other components in the codebase.The change aligns with existing spacing patterns, ensuring visual consistency across the application.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for other instances of form layouts with gap-4 or gap-2 rg --type typescript --type tsx 'className="[^"]*\b(gap-[24])\b[^"]*"' packages/Length of output: 117
Script:
#!/bin/bash # Search for other instances of form layouts with gap-4 or gap-2 rg --type ts --type tsx 'className="[^"]*\b(gap-[24])\b[^"]*"' packages/Length of output: 102
Script:
#!/bin/bash # List all available file types in ripgrep rg --type-listLength of output: 4821
Script:
#!/bin/bash # Search for other instances of form layouts with gap-4 or gap-2 rg --type ts 'className="[^"]*\b(gap-[24])\b[^"]*"' packages/Length of output: 18903
package.json (1)
70-71: Verify if these updates resolve the type-checking errors.The versions of
@react-types/linkand@react-types/sharedhave been updated to newer minor versions. While these updates are likely beneficial, they may not be sufficient to resolve all the type-checking errors mentioned in the PR objectives.Consider the following:
- The core
react-ariapackage is not updated in this change. Ensure that it's also updated if necessary.- Test thoroughly to confirm that these updates resolve the type-checking errors related to form handling.
- If issues persist, you may need to update additional
react-ariarelated packages.To ensure all necessary packages are updated, run the following script:
This will help identify if any other related packages need updating.
packages/components/radio/src/use-radio-group.ts (3)
14-14: LGTM: New import for form integration.The addition of
FormContextanduseSlottedContextfrom@nextui-org/formis appropriate. This import facilitates the integration of the radio group component with the new Form component, aligning with the PR's objectives.
67-67: LGTM: Accessing form-level validation behavior.The addition of
useSlottedContext(FormContext)to extractvalidationBehavioris a good approach. It allows the radio group to respect the validation behavior set at the form level, enhancing consistency across form components.
Line range hint
1-238: Overall: Good integration with Form component.The changes in this file successfully integrate the radio group component with the new Form component. The addition of form context awareness and the hierarchical determination of validation behavior enhance the component's flexibility and consistency within forms. The code is well-structured and maintains backwards compatibility.
A minor suggestion for improvement has been made, but overall, these changes are approved and align well with the PR objectives.
packages/components/checkbox/src/use-checkbox-group.ts (5)
15-15: LGTM: New import aligns with PR objectives.The addition of
FormContextanduseSlottedContextfrom "@nextui-org/form" aligns well with the PR's objective of introducing a new Form component. This import suggests improved integration with form-related functionalities.
74-74: LGTM: Improved form-level validation behavior.The addition of
formValidationBehaviorfrom theFormContextallows for more flexible and context-aware validation behavior, which is in line with the PR objectives.
93-93: LGTM: Enhanced validation behavior hierarchy.The updated default value for
validationBehaviorcreates a clear hierarchy (form-level > global context > hardcoded default), improving the flexibility and consistency of validation across the application.
Line range hint
1-238: Summary: Changes align well with PR objectives.The modifications to
useCheckboxGroupenhance form integration and validation behavior, which aligns perfectly with the PR's goal of introducing a new Form component. The changes improve flexibility in validation handling and maintain consistency with the broader form context. These updates should facilitate better integration of checkbox groups within the new Form component.
109-109: Verify type inference forcheckboxGroupProps.The explicit type annotation for
checkboxGroupPropshas been removed. While TypeScript's type inference is often reliable, please verify that the inferred type matches the expected type to ensure type safety.Run the following script to check the inferred type:
packages/components/date-picker/src/use-date-picker.ts (2)
18-18: LGTM: Import statement for Form context.The import of
FormContextanduseSlottedContextfrom@nextui-org/formis correctly added and necessary for the changes in thevalidationBehaviorlogic.
Line range hint
1-238: Summary: Changes align well with PR objectives.The modifications to the
useDatePickerhook successfully integrate the new Form component's context:
- The new import statement adds the necessary Form context.
- The enhanced
validationBehaviorlogic respects the Form context's validation behavior.These changes support the PR's goal of introducing a new Form component and improving form handling in the NextUI library. The implementation is clean, follows best practices, and maintains consistency with the existing codebase.
packages/components/input/stories/textarea.stories.tsx (3)
8-8: LGTM: Form component import added.The import of the Form component from "@nextui-org/form" is correctly added. This aligns with the PR objective of introducing a new Form component.
319-325: LGTM: WithServerValidation story added correctly.The
WithServerValidationstory is properly exported, using theServerValidationTemplateand passing the default props. This addition effectively showcases the new Form component's server-side validation capabilities, aligning with the PR objectives.
Line range hint
1-326: Overall assessment: Well-implemented changes.The modifications to this file effectively introduce and demonstrate the new Form component with server-side validation capabilities. The changes align well with the PR objectives, and the implementation is solid. Only minor suggestions for improvement were made. Great job on enhancing the Textarea stories with this new functionality!
packages/components/date-input/src/use-time-input.ts (1)
17-17: LGTM: New import for form context integration.The addition of
FormContextanduseSlottedContextfrom@nextui-org/formaligns with the PR objective of introducing a new Form component. This import enables theuseTimeInputhook to access form-related context, enhancing its integration with the new Form component.packages/components/table/src/use-table.ts (1)
126-126: Verify the removal of generic type parameter<T>fromAriaTableProps.The change from
Omit<AriaTableProps<T>, "layout">toOmit<AriaTableProps, "layout">removes the generic type parameter<T>. While this might be intentional to align with changes in thereact-arialibrary, it's important to verify that this doesn't cause any unintended type inference issues in other parts of the codebase that depend on this type.To ensure this change doesn't introduce any type-related issues, please run the following command:
If the command reports any errors, please review and address them accordingly.
packages/components/date-input/src/use-date-input.ts (1)
4-5: LGTM! Verify impact on the rest of the codebase.The changes in the import statements look good. The
DateValueimport source has been updated, and new imports forCalendar,FormContext, anduseSlottedContexthave been added. These changes align with the PR objectives of upgrading thereact-arialibrary and introducing form-related functionality.To ensure these changes don't introduce any unintended side effects, please run the following script to check for any other occurrences of the old import statements in the codebase:
Also applies to: 21-21
packages/components/date-picker/src/use-date-range-picker.ts (2)
24-24: LGTM: New import statement for form context.The import of
FormContextanduseSlottedContextfrom@nextui-org/formis correctly placed and necessary for the new validation behavior logic.
75-80: LGTM: Enhanced validation behavior logic.The changes introduce a more flexible configuration for
validationBehavior:
- It first checks
originalProps.validationBehavior(component-level).- If not set, it falls back to
formValidationBehaviorfrom the FormContext (form-level).- If still not set, it checks
globalContext?.validationBehavior(global-level).- Finally, it defaults to "aria" if none of the above are set.
This cascading fallback logic allows for granular control over validation behavior at different levels of the component hierarchy.
packages/components/date-picker/stories/date-picker.stories.tsx (2)
21-21: LGTM: Form component import added.The Form component import from "@nextui-org/form" is correctly added, which is necessary for the new ServerValidationTemplate.
581-586: LGTM: WithServerValidation export added.The WithServerValidation export is correctly implemented, using the ServerValidationTemplate and passing the defaultProps. This maintains consistency with other stories in the file and provides a good example of server-side validation for the DatePicker component.
packages/components/autocomplete/src/use-autocomplete.ts (3)
21-21: LGTM: New import for form integration.The addition of
FormContextanduseSlottedContextfrom@nextui-org/formis appropriate for integrating the autocomplete component with the new Form component. This change aligns well with the PR objective.
124-124: LGTM: Enhanced validation behavior handling.The introduction of
formValidationBehaviorand its integration into thevalidationBehaviorparameter improves the component's flexibility. This change allows the autocomplete to respect the validation behavior set by the parent form while maintaining backward compatibility through fallback options. The prioritization order (form context > global context > default "aria") is well-structured.Also applies to: 163-163
21-21: Summary: Successful integration with Form component.The changes in this file effectively integrate the autocomplete component with the new Form component. The addition of form context imports and the enhanced handling of validation behavior allow the autocomplete to work seamlessly within a form context while maintaining backward compatibility. These modifications align perfectly with the PR objectives and improve the overall flexibility of the component.
Also applies to: 124-124, 163-163
packages/components/input/src/use-input.ts (3)
21-21: LGTM: New import for form integrationThe addition of
FormContextanduseSlottedContextfrom@nextui-org/formaligns with the PR objective of introducing a new Form component. This import allows the input to access form-level context, potentially enabling shared validation behavior across form elements.
116-116: LGTM: Enhanced validation behavior configurationThe updated
validationBehaviorlogic now prioritizes the form-level setting fromFormContext, falling back to the global context setting, and finally defaulting to "aria". This change provides more flexibility in configuring validation behavior while maintaining consistency across the application and ensuring backward compatibility.
388-388: LGTM: RepositionedrefpropertyThe
refproperty has been moved to the end of the object returned bygetInputProps. This change doesn't affect functionality and might be for consistency or to ensure that therefisn't accidentally overwritten by other props. It's a minor, safe change that improves the code structure.packages/components/date-picker/stories/date-range-picker.stories.tsx (2)
22-22: LGTM: Form component import addedThe Form component import from "@nextui-org/form" has been correctly added. This import is necessary for the new ServerValidationTemplate and is placed appropriately with other imports.
665-670: LGTM: WithServerValidation export addedThe WithServerValidation export has been correctly implemented. It uses the new ServerValidationTemplate and passes the default props, maintaining consistency with other exports in the file. The naming convention (PascalCase) is also consistent with the project's style.
packages/components/input/stories/input.stories.tsx (2)
17-17: Import of Form component looks good.The Form component is correctly imported from "@nextui-org/form". This import is necessary for the new ServerValidationTemplate.
714-720: WithServerValidation export looks good.The export correctly uses the new ServerValidationTemplate and follows the naming convention of other exports in the file. Passing defaultProps ensures consistency with other Input stories.
packages/components/dropdown/__tests__/dropdown.test.tsx (2)
Line range hint
1-903: Overall assessment of dropdown tests.The changes made to this file improve the quality of the test assertions. The test suite covers various important aspects of the Dropdown component, including keyboard interactions, selection modes, and multi-dropdown behavior. The tests appear comprehensive and well-structured.
To further enhance the test suite, consider:
- Adding more edge cases, such as testing with very long dropdown lists or with nested dropdowns if applicable.
- Including performance tests for rendering large numbers of dropdown items.
- Testing accessibility features more extensively, such as keyboard navigation through all items.
These suggestions are for future improvements and are not critical for the current changes.
577-578: Improved test assertions for dropdown visibility.The change from
not.toBeNull()totoBeVisible()is a good improvement in the test assertions. It provides a more meaningful check by ensuring that the dropdown elements are not only present in the DOM but also visible to the user.To ensure this change doesn't inadvertently affect the test's behavior, please run the following script to check for any other occurrences of
not.toBeNull()in dropdown-related tests:If the script returns any results, consider updating those assertions as well for consistency.
✅ Verification successful
Assertion Updates Verified Successfully.
All instances of
not.toBeNull()in the dropdown test files have been successfully replaced withtoBeVisible(). The updated test assertions now accurately verify the visibility of dropdown elements, enhancing the reliability of the tests.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any remaining `not.toBeNull()` assertions in dropdown test files rg --type typescript 'expect\(.*\)\.not\.toBeNull\(\)' packages/components/dropdown/__tests__Length of output: 130
Script:
#!/bin/bash # Search for any remaining `not.toBeNull()` assertions in dropdown test files rg 'expect\(.*\)\.not\.toBeNull\(\)' packages/components/dropdown/__tests__ --glob '*.ts' --glob '*.tsx'Length of output: 106
packages/components/autocomplete/stories/autocomplete.stories.tsx (1)
1009-1014: LGTM! Export looks good.The
WithServerValidationexport correctly sets up the server validation example as a Storybook story. It properly uses theServerValidationTemplateand passes the required props.packages/components/checkbox/stories/checkbox-group.stories.tsx (5)
7-7: Import ofFormcomponent addedThe
Formcomponent is correctly imported from@nextui-org/form, which is necessary for the newServerValidationTemplate.
94-94: Adjusted gap for consistent layout inFormTemplateThe
classNamehas been updated togap-2to ensure consistent spacing between form elements, aligning with the newServerValidationTemplate.
139-141: AddedServerValidationTemplatecomponentA new
ServerValidationTemplatecomponent is introduced to handle server-side validation for the checkbox group. The initial stateserverErrorsis properly initialized usingReact.useState({}).
150-170: Proper implementation of server-side validationThe
Formcomponent correctly utilizesvalidationErrorsto display server-side validation messages. TheCheckboxGroupis appropriately configured withvalidationBehavior="native"and matchingnameattribute. This setup ensures that validation errors are properly displayed to the user.
291-297: ExportingWithServerValidationstoryThe new story
WithServerValidationis correctly exported, rendering theServerValidationTemplatewith default arguments.packages/components/checkbox/src/use-checkbox.ts (3)
21-21: Imports added for form context integrationThe addition of
FormContextanduseSlottedContextfrom@nextui-org/formcorrectly brings in the necessary context for form validation behavior within the checkbox component.
79-79: Retrieve validation behavior from FormContextThe line accurately extracts
validationBehaviorasformValidationBehaviorfrom theFormContextusinguseSlottedContext, which ensures that the checkbox can access form-level validation settings when not part of a group.
102-104: Conditional determination of validationBehaviorThe updated logic for
validationBehaviorcorrectly prioritizes thegroupContextwhen the checkbox is part of a group. If not, it falls back toformValidationBehavior, then toglobalContext.validationBehavior, and defaults to"aria"if none are provided. This hierarchical approach enhances flexibility and consistency in validation behavior based on context.packages/components/radio/stories/radio.stories.tsx (5)
8-8: ImportingFormcomponentThe
Formcomponent is correctly imported to support the newServerValidationTemplate.
97-97: Adjusted form spacing for a more compact layoutChanging
gap-4togap-2in theclassNamereduces the spacing between form elements, resulting in a more compact form.
161-161: Consistent spacing inInvalidTemplateUpdating the
classNametogap-2ensures consistent spacing across all form templates.
209-237: AddedServerValidationTemplatefor server-side validationThe new
ServerValidationTemplateintroduces server-side validation handling, enhancing the form's capability to display server errors.🧰 Tools
🪛 Biome
[error] 218-218: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
332-338: ExportingWithServerValidationThe new
WithServerValidationexport correctly renders theServerValidationTemplatewith default arguments.packages/components/checkbox/__tests__/checkbox-group.test.tsx (1)
289-341: Test for server validation with 'validationBehavior="native"' is well implementedThe test effectively verifies server-side validation handling when
validationBehavioris set to"native". It checks the presence of error messages and the validity states before and after user interaction.packages/components/input/__tests__/input.test.tsx (1)
462-462: Verify the expected validity state of the inputIn line 462, the test expects
input.validity.validto betruewhile the input hasaria-invalid="true". This might be inconsistent since an input marked as invalid typically hasvalidity.validequal tofalse.Please confirm whether this is the intended behavior. If the component uses ARIA attributes for validation without affecting the native validity state, this expectation is correct. Otherwise, consider updating the test to reflect the accurate validity state.
packages/components/autocomplete/__tests__/autocomplete.test.tsx (7)
5-5: ImportingFormcomponentThe import statement for
Formfrom@nextui-org/formis correct and necessary for the tests involving form validation.
630-658: Test case validates Autocomplete when key equals textValueThe added test case correctly verifies that the
Autocompletecomponent functions as expected when thekeyequals thetextValue. The interactions and assertions are appropriately implemented.
660-682: Controlled Autocomplete test functions correctlyThe test for the controlled
Autocompletecomponent accurately checks that the value updates when a new item is selected. The use of state and event simulation is properly handled.
694-696: Wrapping AutocompleteExample in Form with native validationThe
AutocompleteExampleis correctly wrapped within theFormcomponent withvalidationBehavior="native". This setup is appropriate for testing native form validation behaviors.
725-779: Test for server-side validation with native behaviorThe test case effectively simulates server-side validation by setting
validationErrorsin theFormcomponent. It correctly checks that the error message appears and disappears based on user interaction.
Line range hint
787-815: Validation function correctly applied with aria validation behaviorThe
validatefunction is correctly implemented to trigger validation based on the selected key. The test accurately checks that the error message is displayed when expected and removed upon selecting a valid option.
817-850: Server validation works with aria validation behaviorThe test appropriately verifies that server-side validation errors are handled when
validationBehavioris set to"aria". It checks that the error message is displayed and cleared upon user correction.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (2)
packages/components/input/__tests__/input.test.tsx (2)
310-439: LGTM: Comprehensive native validation testsThe new test suite for native validation behavior is well-structured and covers crucial aspects of form validation, including required fields, custom validation functions, and server-side validation. These tests ensure that the Input component correctly interacts with native browser validation.
One minor suggestion:
Consider adding a test case for when the input is initially valid and then becomes invalid. This would ensure that the error states are correctly toggled in both directions.
302-495: Overall improvement in test coverage with room for enhancementThe addition of extensive validation tests for the Input component is a significant improvement. The separation of tests into native and ARIA validation behaviors is a good approach for ensuring compatibility with different validation modes.
To further enhance the test suite:
- Ensure consistency between native and ARIA validation tests by covering the same scenarios in both.
- Address the TODOs in the ARIA validation tests.
- Consider adding edge cases, such as testing behavior when switching between validation modes.
- Add tests for any untested props or behaviors of the Input component related to validation.
As the test suite grows, consider organizing the tests into separate files for each validation mode or major feature area. This will improve maintainability and make it easier to identify gaps in test coverage.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
- apps/docs/package.json (1 hunks)
- packages/components/input/tests/input.test.tsx (2 hunks)
🔇 Additional comments (2)
apps/docs/package.json (1)
40-47: LGTM! Verify compatibility with other dependencies.The updates to the @react-aria packages align with the PR objectives and should help resolve the type-checking errors mentioned. The minor version bumps suggest new features or non-breaking changes, which is good.
To ensure compatibility, please run the following command to check for any peer dependency warnings or errors:
If any issues are found, consider updating the affected dependencies or consult the react-aria changelog for potential breaking changes.
packages/components/input/__tests__/input.test.tsx (1)
2-3: LGTM: Improved imports and user setupThe changes to the import statements and the setup of the
userEventimprove type safety and provide a consistent user interaction simulation across all tests. This is a good practice that enhances the reliability of the tests.Also applies to: 304-308
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
.changeset/fuzzy-lies-brush.md (1)
5-5: Provide more context about the impact of removinglayoutNode.While the changeset mentions the removal of the
layoutNodeprop, it doesn't provide information about the impact of this change or any migration steps for users who might be affected.Consider expanding the description to include:
- The reason for removing the prop (beyond just mentioning the react-aria update).
- The impact this might have on existing code using the
layoutNodeprop.- Any migration steps or alternatives for users who were relying on this prop.
For example:
The `layoutNode` prop has been removed due to the update to react-aria. This change was necessary to align with the latest react-aria API changes, which no longer require this prop for layout management. Impact: - Existing code using the `layoutNode` prop will need to be updated. - The table layout is now managed internally, providing a more consistent experience across different use cases. Migration: If you were using the `layoutNode` prop to customize table layout, please refer to the updated documentation for alternative ways to achieve custom layouts with the new API.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- .changeset/fuzzy-lies-brush.md (1 hunks)
- .changeset/polite-mails-kneel.md (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- .changeset/polite-mails-kneel.md
|
@ryo-manba fix conflicts |
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (4)
packages/components/autocomplete/src/use-autocomplete.ts (2)
124-124: LGTM: Form context integration with a minor suggestion.The addition of form context usage is well-implemented, allowing the autocomplete component to access form-level validation behavior. The use of
useSlottedContextand optional chaining ensures safe access to the context.For improved clarity, consider adding a comment explaining the purpose of this line:
// Access form-level validation behavior, if available const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};This comment would help future developers understand the intent behind accessing the form context.
163-163: LGTM: ImprovedvalidationBehaviorassignment with a readability suggestion.The new assignment for
validationBehavioris well-structured, providing a clear priority order: form-level, global context, and then the default "aria" behavior. This ensures proper integration with form contexts while maintaining flexibility.To improve readability, consider breaking this line into multiple lines:
validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "aria",This format makes the fallback chain more visually apparent and easier to understand at a glance.
packages/components/autocomplete/__tests__/autocomplete.test.tsx (1)
Line range hint
650-653: Add type annotation to 'user' variable for consistencyIn the
validationdescribe block, consider declaringuserwith an explicit typeUserEventfor better type safety and consistency with other tests.Apply the following change:
-let user; +let user: UserEvent;packages/components/date-picker/__tests__/date-picker.test.tsx (1)
726-726: Avoid direct invocation ofcheckValidity()in testsCalling
(getByTestId("form") as HTMLFormElement).checkValidity();directly simulates a form validation but doesn't replicate a real user interaction.Consider triggering validation through user events for a more accurate simulation:
- act(() => { - (getByTestId("form") as HTMLFormElement).checkValidity(); - }); + await user.click(getByTestId("submit"));
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
- package.json (1 hunks)
- packages/components/autocomplete/tests/autocomplete.test.tsx (5 hunks)
- packages/components/autocomplete/src/use-autocomplete.ts (3 hunks)
- packages/components/checkbox/tests/checkbox-group.test.tsx (3 hunks)
- packages/components/date-picker/tests/date-picker.test.tsx (4 hunks)
- packages/components/date-picker/src/use-date-picker.ts (2 hunks)
- packages/components/dropdown/tests/dropdown.test.tsx (1 hunks)
- packages/components/radio/tests/radio.test.tsx (3 hunks)
🧰 Additional context used
🔇 Additional comments (20)
package.json (1)
70-71: LGTM! Verify compatibility with the new Form component.The updates to
@react-types/linkand@react-types/sharedare appropriate and align with the PR objectives of upgrading thereact-arialibrary. These minor version updates likely include bug fixes and improvements that may be necessary for the new Form component.Note that the version for
@react-types/linkis now pinned to a specific version (3.5.7) instead of using the caret (^) for flexible versioning. This change can help ensure consistency across different environments.To ensure these updates fully support the new Form component, please run the following verification script:
packages/components/autocomplete/src/use-autocomplete.ts (2)
21-21: LGTM: New import for form integration.The addition of
FormContextanduseSlottedContextfrom@nextui-org/formis appropriate for integrating form-level context into the autocomplete component. This change enhances the component's ability to work seamlessly within form structures.
Line range hint
1-524: Overall assessment: Well-implemented form context integration.The changes to the
useAutocompletehook successfully integrate form-level validation behavior into the autocomplete component. The additions are thoughtful and maintain backwards compatibility while enhancing the component's flexibility within form structures. The code remains clean and follows good practices.Key improvements:
- Addition of form context imports
- Safe access to form-level validation behavior
- Prioritized fallback chain for
validationBehaviorThese changes align well with the PR objectives of introducing enhanced form functionalities. The implementation is solid, with only minor suggestions for improved clarity and readability.
packages/components/dropdown/__tests__/dropdown.test.tsx (1)
565-566: Improved visibility assertionsThe visibility assertions have been updated from
expect(...).not.toBeNull()toexpect(...).toBeVisible(). This change provides a more accurate check for the visibility state of the dropdown elements.packages/components/date-picker/src/use-date-picker.ts (3)
18-18: Addition of Form Context IntegrationThe import of
FormContextanduseSlottedContextfrom"@nextui-org/form"enables integration with the form's validation behavior, enhancing the component's adaptability within form contexts.
67-67: Retrieving Validation Behavior from Form ContextExtracting
formValidationBehaviorusinguseSlottedContext(FormContext)ensures that the date picker respects the form's validation settings when used within a form.
70-73: Validation Behavior Fallback Sequence is AppropriateThe sequence for determining
validationBehaviorprioritizesoriginalProps.validationBehavior, thenformValidationBehavior, followed byglobalContext.validationBehavior, and defaults to"aria". This logical order ensures the most specific validation behavior is utilized.packages/components/radio/__tests__/radio.test.tsx (3)
4-4: Importing theFormcomponent is appropriateThe addition of
Formimport from@nextui-org/formis necessary for the new tests involving form validation.
311-357: Previous comments regarding type safety and test coverage still applyThe past review comment about improving type safety in the
onSubmitfunction and verifying that the form submission triggers theonSubmitfunction is still applicable to this code segment.
394-418: Previous comments about enhancing test coverage remain validThe past review comment suggesting enhancements to simulate user interaction and verify the
Formcomponent's behavior is still relevant to this code segment.packages/components/checkbox/__tests__/checkbox-group.test.tsx (2)
3-3: Import statement is correct.The
Formcomponent is correctly imported from@nextui-org/form, ensuring that the form functionalities are available for the tests.
286-338: Test case for server validation is well-implemented.The test effectively simulates server-side validation by triggering validation errors on form submission when the required checkbox is not selected. It verifies that the error message is displayed and that the validity states of the checkboxes are updated accordingly. This ensures the
CheckboxGroupcomponent handles server validation as expected.packages/components/autocomplete/__tests__/autocomplete.test.tsx (7)
5-5: Import of the 'Form' component is correctly addedThe
Formcomponent import from@nextui-org/formis appropriately added and will be used in the subsequent tests.
591-619: Test for 'key equals textValue' scenario is correctly implementedThe test accurately verifies that the
Autocompletecomponent functions as expected when thekeyequals thetextValue. It ensures that the default selected key is correctly displayed and that user interactions update the value appropriately.
621-644: Controlled component test for 'key equals textValue' scenario is correctly implementedThis test effectively checks that the controlled
Autocompletecomponent behaves correctly when thekeyequals thetextValue, confirming that state management works as intended.
655-657: Test for 'isRequired' validation with native behavior is correctly implementedThe test properly wraps the
AutocompleteExamplecomponent with theFormcomponent to test theisRequiredvalidation using native validation behavior. This setup correctly checks the required field validation.
686-740: Test for server-side validation with native behavior is correctly implementedThe test effectively verifies that server-side validation errors are displayed and cleared appropriately when using native validation behavior. It simulates server-side error handling and ensures the component responds correctly to validation errors.
Line range hint
748-777: Test for custom validate function with 'aria' validation behavior is correctly implementedThe test correctly checks that custom validation functions are handled properly when using
validationBehavior="aria". It ensures that the validation message is displayed when the custom validation fails and is removed when it passes.
778-811: Test for server-side validation with 'aria' validation behavior is correctly implementedThis test accurately confirms that server-side validation errors are displayed and resolved as expected when
validationBehavioris set to"aria". It ensures the component appropriately handles server-provided validation messages.packages/components/date-picker/__tests__/date-picker.test.tsx (1)
754-754: Verify if the default value should trigger validation errorThe
defaultValueis set tonew CalendarDate(2020, 2, 3), which fails the validation conditionv.year < 2022. Confirm if it's intentional for the test to start with an invalid value.If unintentional, consider updating the
defaultValueto a year that passes the validation or adjust the validation condition accordingly.
|
@jrgarciadev I've fixed it. |
|
When merging, please close the related issue in this PR. |
|
Thank you for your contribution, I have been looking forward to this update for a long time! Because in nextjs, collection controls will fail in server-side components, which is painful for me. |
📝 Description
Added a Form component and upgraded the entire react-aria version to resolve typecheck errors from version mismatches.
The details of the react-aria update are provided in the inline comments of the following PR.
#3732
⛳️ Current behavior (updates)
Currently, there is no
Formcomponent available, and the version ofreact-ariadoes not support the latest features related to form handling.🚀 New behavior
The new
Formcomponent has been added, allowing users to utilize features such as validation behavior switching and error handling throughserverErrors. Additionally, thereact-ariaversion has been updated to incorporate the latest form-related improvements.form-demo.mov
💣 Is this a breaking change (Yes/No):
No.
📝 Additional Information
A guideline on how to use the new
Formcomponent will be added in a separate PR.It will be based on the following reference.
React Aria Forms Guide
Test
Please verify the following in each story.
Formcomponent allows toggling ofvalidationBehavior.namefield when provided viaserverErrors.Summary by CodeRabbit
New Features
@nextui-org/formpackage for easier form management and validation.Autocomplete,CheckboxGroup,DatePicker, andRadioGroup, enhancing validation capabilities.Bug Fixes
layoutNodeprop from the@nextui-org/tablepackage to align with updates in the underlying library.Chores
NextUIlibrary for improved functionality and compatibility.