✨ New feats #458
✨ New feats #458
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
|
|
Warning Rate Limit Exceeded@naelob has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 34 minutes and 52 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. WalkthroughRecent updates to the Changes
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
|
New dependencies detected. Learn more about Socket for GitHub ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 15
Outside diff range and nitpick comments (17)
docs/recipes/import-existing-users.mdx (1)
Line range hint
66-66: Add a missing comma for clarity in the comment.- ...e_id` is the id of the user inside your system and this function returns a [LinkedUser... + ...e_id` is the id of the user inside your system, and this function returns a [LinkedUser...apps/client-ts/src/components/Auth/CustomLoginComponent/LoginUserForm.tsx (1)
Line range hint
1-77: Refine theLoginUserFormfor better type safety and accessibility.Improvements can be made for type safety by specifying a more accurate type than
any. Additionally, ensure that SVG elements have appropriatearia-labelattributes for accessibility.- success: (data: any) => { + success: (data: LoginResponse) => { + <svg aria-label="Success Icon" ...>docs/quick-start.mdx (1)
Line range hint
1-214: Enhance the readability and accuracy of theQuickstart Guide.There are a few areas where the document can be improved for better clarity and accuracy:
- Correct the spelling of "Node.js".
- Avoid repetitive sentence structures to enhance readability.
- Node JS v18.17.1 + Node.js v18.17.1 - We call the `sdk.crmContact.addContact` method... + The `sdk.crmContact.addContact` method is called...apps/client-ts/src/components/ui/file-uploader.tsx (6)
Line range hint
135-137: Consider usingfor...ofinstead offorEachfor better readability and performance in modern JavaScript.- files.forEach((file) => { + for (const file of files) {
Line range hint
146-146: Avoid using template literals when not necessary for string operations.- "Drop the files here" + 'Drop the files here'
Line range hint
173-177: Prefer usingfor...ofinstead offorEachfor iterating over arrays.- files.forEach((file) => { + for (const file of files) {
Line range hint
170-170: Ensure all dependencies are specified in theuseEffecthook to avoid potential bugs with stale closures.- }, []) + }, [files])
Line range hint
233-233: UseNumber.POSITIVE_INFINITYinstead ofInfinityfor clarity and consistency.- maxFiles === Infinity + maxFiles === Number.POSITIVE_INFINITY
Line range hint
248-248: Avoid using array indices as keys in React components to prevent issues with component state and re-rendering.- key={index} + key={file.name}apps/client-ts/src/components/Configuration/FieldMappings/mapForm.tsx (3)
Line range hint
73-73: Specify explicit types instead of usinganyto improve type safety and code maintainability.- const [sourceCustomFieldsData, setSourceCustomFieldsData] = useState<Record<string, any>[]>([]); + const [sourceCustomFieldsData, setSourceCustomFieldsData] = useState<Record<string, SomeSpecificType>[]>([]);Also applies to: 108-108, 109-109
Line range hint
159-163: Use optional chaining to safely access nested properties.- error ? <p className="text-sm font-bold">Error fetching properties</p> : sourceCustomFieldsData.map(field => ( + error ? <p className="text-sm font-bold">Error fetching properties</p> : sourceCustomFieldsData?.map(field => (
Line range hint
235-235: Provide a text alternative for all interactive elements for accessibility.- <SelectValue placeholder="Select a provider" /> + <SelectValue placeholder="Select a provider" aria-label="Select a provider" />apps/client-ts/src/components/Configuration/LinkedUsers/AddLinkedAccount.tsx (2)
Line range hint
99-99: Specify explicit types instead of usinganyto improve type safety and code maintainability.- const [data, setData] = useState<any[]>([]); + const [data, setData] = useState<SpecificDataType[]>([]);Also applies to: 100-100, 142-142, 143-143
Line range hint
105-105: Ensure all SVG elements have appropriate alternative text for accessibility.- <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Icon Description">Also applies to: 150-150, 202-202, 221-221
apps/client-ts/src/components/Connection/AddConnectionButton.tsx (3)
Line range hint
121-121: TheDialogTitleelement is empty, which might confuse users.- <DialogTitle></DialogTitle> + <DialogTitle>Project Required</DialogTitle>This change provides a clearer indication of the dialog's purpose when no project is created.
Line range hint
176-176: TheDialogTitleelement is empty, which might confuse users.- <DialogTitle></DialogTitle> + <DialogTitle>Link Creation</DialogTitle>This change provides a clearer indication of the dialog's purpose when creating a magic link.
Line range hint
194-194: TheDialogTitleelement is empty, which might confuse users.- <DialogTitle></DialogTitle> + <DialogTitle>Batch Link Creation</DialogTitle>This change provides a clearer indication of the dialog's purpose when creating batch magic links.
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (4)
apps/client-ts/package.jsonis excluded by!**/*.jsondocs/images/linkedusersbatch.mp4is excluded by!**/*.mp4,!**/*.mp4docs/images/magiclinkquickstart.mp4is excluded by!**/*.mp4,!**/*.mp4pnpm-lock.yamlis excluded by!pnpm-lock.yaml,!**/*.yaml
Files selected for processing (25)
- apps/client-ts/src/app/(Dashboard)/configuration/page.tsx (1 hunks)
- apps/client-ts/src/components/Auth/CustomLoginComponent/LoginUserForm.tsx (1 hunks)
- apps/client-ts/src/components/Configuration/FieldMappings/FieldMappingModal.tsx (1 hunks)
- apps/client-ts/src/components/Configuration/FieldMappings/FieldMappingsTable.tsx (3 hunks)
- apps/client-ts/src/components/Configuration/FieldMappings/Stepper/stepper-form.tsx (1 hunks)
- apps/client-ts/src/components/Configuration/FieldMappings/mapForm.tsx (1 hunks)
- apps/client-ts/src/components/Configuration/LinkedUsers/AddLinkedAccount.tsx (6 hunks)
- apps/client-ts/src/components/Connection/AddConnectionButton.tsx (4 hunks)
- apps/client-ts/src/components/Connection/columns.tsx (8 hunks)
- apps/client-ts/src/components/Events/columns.tsx (6 hunks)
- apps/client-ts/src/components/ui/file-uploader.tsx (2 hunks)
- apps/client-ts/src/components/ui/stepper/context.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/horizontal-step.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/index.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/step-button-container.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/step-icon.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/step-label.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/step.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/types.ts (1 hunks)
- apps/client-ts/src/components/ui/stepper/use-media-query.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/use-stepper.ts (1 hunks)
- apps/client-ts/src/components/ui/stepper/vertical-step.tsx (1 hunks)
- apps/client-ts/src/components/ui/use-toast.ts (1 hunks)
- docs/quick-start.mdx (2 hunks)
- docs/recipes/import-existing-users.mdx (2 hunks)
Files skipped from review due to trivial changes (1)
- apps/client-ts/src/app/(Dashboard)/configuration/page.tsx
Additional Context Used
LanguageTool (5)
docs/quick-start.mdx (3)
Near line 13: The official spelling of this programming framework is “Node.js”.
Context: ...our guide here - Node JS v18.17.1 or newer installed on your com...
Near line 214: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... SDKclient, passing in our API key. - We call thesdk.crmContact.addContact` me...
Near line 214: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...od to add a contact inside a 3rd party. We specify the input we want to use (see [...docs/recipes/import-existing-users.mdx (2)
Near line 20: Possible subject-verb agreement error detected.
Context: ... we only accept .txt or .csv files that contains your remote ids separated by a comma.</...
Near line 66: Possible missing comma found.
Context: ...e_id` is the id of the user inside your system and this function returns a [LinkedUser...
Biome (79)
apps/client-ts/src/components/Auth/CustomLoginComponent/LoginUserForm.tsx (4)
65-65: Unexpected any. Specify a different type.
69-69: Unexpected any. Specify a different type.
74-74: Alternative text title element cannot be empty
74-74: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
apps/client-ts/src/components/Configuration/FieldMappings/FieldMappingModal.tsx (11)
108-108: Unexpected any. Specify a different type.
141-141: Unexpected any. Specify a different type.
142-142: Unexpected any. Specify a different type.
147-147: Alternative text title element cannot be empty
147-147: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
176-176: Unexpected any. Specify a different type.
177-177: Unexpected any. Specify a different type.
182-182: Alternative text title element cannot be empty
182-182: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
233-236: Change to an optional chain.
349-353: Change to an optional chain.
apps/client-ts/src/components/Configuration/FieldMappings/Stepper/stepper-form.tsx (12)
134-134: Unexpected any. Specify a different type.
135-135: Unexpected any. Specify a different type.
140-140: Alternative text title element cannot be empty
140-140: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
176-179: Change to an optional chain.
275-275: Unexpected any. Specify a different type.
310-310: Unexpected any. Specify a different type.
311-311: Unexpected any. Specify a different type.
316-316: Alternative text title element cannot be empty
316-316: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
354-358: Change to an optional chain.
430-430: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
apps/client-ts/src/components/Configuration/FieldMappings/mapForm.tsx (7)
73-73: Unexpected any. Specify a different type.
108-108: Unexpected any. Specify a different type.
109-109: Unexpected any. Specify a different type.
114-114: Alternative text title element cannot be empty
114-114: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
159-163: Change to an optional chain.
235-235: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
apps/client-ts/src/components/Configuration/LinkedUsers/AddLinkedAccount.tsx (13)
99-99: Unexpected any. Specify a different type.
100-100: Unexpected any. Specify a different type.
105-105: Alternative text title element cannot be empty
105-105: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
132-132: Template literals are preferred over string concatenation.
142-142: Unexpected any. Specify a different type.
143-143: Unexpected any. Specify a different type.
150-150: Alternative text title element cannot be empty
150-150: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
202-202: Alternative text title element cannot be empty
202-202: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
221-221: Alternative text title element cannot be empty
221-221: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
apps/client-ts/src/components/Connection/AddConnectionButton.tsx (9)
114-114: Unexpected any. Specify a different type.
116-116: Unexpected any. Specify a different type.
121-121: Alternative text title element cannot be empty
121-121: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
176-176: Alternative text title element cannot be empty
176-176: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
194-194: Alternative text title element cannot be empty
194-194: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
207-207: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
apps/client-ts/src/components/Connection/columns.tsx (4)
14-14: Unexpected any. Specify a different type.
49-50: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
2-3: All these imports are only used as types.
4-5: All these imports are only used as types.
apps/client-ts/src/components/Events/columns.tsx (3)
82-83: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
2-3: All these imports are only used as types.
5-6: All these imports are only used as types.
apps/client-ts/src/components/ui/file-uploader.tsx (7)
135-137: Prefer for...of instead of forEach.
146-146: Do not use template literals if interpolation and special-character handling are not needed.
173-177: Prefer for...of instead of forEach.
170-170: This hook does not specify all of its dependencies: files
170-170: This hook does not specify all of its dependencies: files.forEach
233-233: Use Number.Infinity instead of the equivalent global.
248-248: Avoid using the index of an array as key property in an element.
apps/client-ts/src/components/ui/stepper/horizontal-step.tsx (1)
50-75: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
apps/client-ts/src/components/ui/stepper/index.tsx (1)
138-138: Unexpected any. Specify a different type.
apps/client-ts/src/components/ui/stepper/step-button-container.tsx (1)
1-1: All these imports are only used as types.
apps/client-ts/src/components/ui/stepper/step.tsx (1)
18-18: Unexpected any. Specify a different type.
apps/client-ts/src/components/ui/stepper/types.ts (1)
3-3: Unexpected any. Specify a different type.
apps/client-ts/src/components/ui/stepper/vertical-step.tsx (1)
95-114: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
apps/client-ts/src/components/ui/use-toast.ts (3)
101-103: Prefer for...of instead of forEach.
138-140: Prefer for...of instead of forEach.
177-177: This hook specifies more dependencies than necessary: state
Additional comments not posted (31)
apps/client-ts/src/components/ui/stepper/use-media-query.tsx (1)
3-18: The implementation ofuseMediaQueryhook is correct and follows best practices for React hooks.apps/client-ts/src/components/ui/stepper/use-stepper.ts (1)
14-41: TheuseStepperhook is well-implemented, ensuring proper error handling and state management within the stepper context.apps/client-ts/src/components/ui/stepper/step.tsx (1)
17-71: TheStepcomponent is correctly implemented, dynamically rendering based on the stepper's orientation and handling various states and props effectively.apps/client-ts/src/components/ui/stepper/context.tsx (1)
4-75: The implementation ofStepperContextandStepperProvideris robust, providing essential functionalities for step management and ensuring proper state handling.apps/client-ts/src/components/ui/stepper/step-button-container.tsx (1)
12-61: TheStepButtonContainercomponent is well-implemented, effectively using stepper context to configure and render the button based on the current step and stepper state.apps/client-ts/src/components/ui/stepper/step-label.tsx (1)
38-87: TheStepLabelcomponent is correctly implemented, using conditional rendering and stepper context effectively to display labels and descriptions based on the current step and configuration.apps/client-ts/src/components/ui/stepper/types.ts (6)
5-11: This type definition looks good and is well-structured.
13-51: TheStepOptionsinterface is comprehensive and well-defined.
53-58: TheStepperPropsinterface is correctly extendingStepOptionswith additional necessary properties.
60-70: TheStepPropsinterface is well-defined, extending HTML attributes for more flexibility.
72-79:StepSharedPropsis appropriately defined, extendingStepPropswith context-specific properties.
81-88: Export statements are correctly set up for all defined types.docs/recipes/import-existing-users.mdx (1)
60-60: The shell commands for fetching linked users are correctly documented.apps/client-ts/src/components/Events/columns.tsx (4)
19-19: The updatedBadgecomponent usage in themethodcolumn is correctly implemented.
34-34: The updatedBadgecomponent usage in theurlcolumn is correctly implemented.
47-47: The updatedBadgecomponent usage in thestatuscolumn is correctly implemented.
63-63: The updatedBadgecomponent usage in thedirectioncolumn is correctly implemented.apps/client-ts/src/components/ui/stepper/step-icon.tsx (1)
33-132: TheStepIconcomponent is well-implemented, handling various states and icons effectively.apps/client-ts/src/components/Connection/columns.tsx (2)
12-12: The addition of theButtonimport and its usage in theconnectionTokenComponentare correctly implemented.
68-68: The updatedBadgecomponent usage in thecategory,vertical,status,linkedUser, anddatecolumns is correctly implemented.Also applies to: 81-81, 101-101, 125-125, 143-143
apps/client-ts/src/components/ui/stepper/index.tsx (1)
17-119: Ensure proper handling ofrefandpropsinSteppercomponent.The
Steppercomponent is well-structured with clear separation of concerns and proper use of React patterns likeforwardRefand context. The use of destructuring for props and the default values provided inStepper.defaultPropsare appropriate and enhance the component's usability.apps/client-ts/src/components/Configuration/FieldMappings/FieldMappingsTable.tsx (1)
Line range hint
23-60: Ensure proper state management and conditional rendering inFieldMappingsTable.The addition of the
StepperFormand related state management for handling its visibility is well-implemented. The use of conditional rendering based onstepperClosestate to toggle between the button and the form is effective.apps/client-ts/src/components/Configuration/FieldMappings/mapForm.tsx (1)
114-114: Ensure all images have appropriate alternative text for accessibility.- <img src={connector.logoPath} className="w-8 h-8 rounded-lg mr-2"/> + <img src={connector.logoPath} alt="Logo" className="w-8 h-8 rounded-lg mr-2"/>Likely invalid or redundant comment.
apps/client-ts/src/components/Connection/AddConnectionButton.tsx (4)
49-50: Added new imports and aSelectcomponent for user selection.This enhances the component's functionality by allowing user selection from a list, which is a good use of UI components for better user interaction.
95-101: Logic to handle user selection in the form.The conditional handling of the form reset and setting values based on user selection is correctly implemented.
230-261: Added a newSelectcomponent for choosing existing linked users.This addition improves the UI by providing a clear and user-friendly way to select linked users.
85-85: Ensure thatuseLinkedUsershook is properly tested.apps/client-ts/src/components/Configuration/FieldMappings/FieldMappingModal.tsx (1)
185-185: Updated theBadgecomponent to usevalues.nameinstead ofdata.name.This change aligns with the new state management approach, ensuring that the displayed name is always up-to-date with the form values.
apps/client-ts/src/components/Configuration/FieldMappings/Stepper/stepper-form.tsx (3)
77-98: TheStepperFormcomponent is well-structured and effectively manages the rendering of different forms based on the stepper's state.
484-517: TheStepperFormActionscomponent is effectively managing navigation actions within the stepper with appropriate conditional rendering.
519-531: TheMyStepperFootercomponent is simple and effectively uses the stepper context to conditionally render the reset button.
| }); | ||
| return ( | ||
| <div className="flex flex-row items-center"> | ||
| <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg> |
There was a problem hiding this comment.
Ensure all images have appropriate alternative text for accessibility.
- <img src={connector.logoPath} className="w-8 h-8 rounded-lg mr-2"/>
+ <img src={connector.logoPath} alt={`${connector.name} logo`} className="w-8 h-8 rounded-lg mr-2"/>Also applies to: 430-430
Committable suggestion was skipped due low confidence.
| }), | ||
| { | ||
| loading: 'Loading...', | ||
| success: (data: any) => { |
There was a problem hiding this comment.
Consider specifying more appropriate types instead of using any for better type safety and to leverage TypeScript's capabilities.
- success: (data: any) => {
+ success: (data: MappingResponseType) => {Also applies to: 135-135
Committable suggestion was skipped due low confidence.
| }), | ||
| { | ||
| loading: 'Loading...', | ||
| success: (data: any) => { |
There was a problem hiding this comment.
Consider specifying more appropriate types instead of using any for better type safety and to leverage TypeScript's capabilities.
- success: (data: any) => {
+ success: (data: MappingResponseType) => {Also applies to: 311-311
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| success: (data: any) => { | |
| success: (data: MappingResponseType) => { |
| reader.onloadend = async (e) => { | ||
| const text = e.target?.result; | ||
| if (text) { | ||
| console.log("values of text file "+ (text as string)) |
There was a problem hiding this comment.
Prefer template literals for string concatenation for better readability and consistency.
- "values of text file "+ (text as string)
+ `values of text file ${text as string}`Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| console.log("values of text file "+ (text as string)) | |
| console.log(`values of text file ${text as string}`) |
| {React.Children.map(children, (child, i) => { | ||
| const isCompletedStep = | ||
| (React.isValidElement(child) && | ||
| (child.props as any).isCompletedStep) ?? |
There was a problem hiding this comment.
Specify a more appropriate type instead of any.
Using any can lead to potential type safety issues. It's better to define a more specific type that accurately represents the expected properties.
- (child.props as any).isCompletedStep
+ (child.props as StepProps).isCompletedStepCommittable suggestion was skipped due low confidence.
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| "stepper__vertical-step", | ||
| verticalStepVariants({ | ||
| variant: variant?.includes("circle") ? "circle" : "line", | ||
| }), | ||
| isLastStepCurrentStep && "gap-[var(--step-gap)]", | ||
| styles?.["vertical-step"], | ||
| )} | ||
| data-optional={steps[index || 0]?.optional} | ||
| data-completed={isCompletedStep} | ||
| data-active={active} | ||
| data-clickable={clickable || !!onClickStep} | ||
| data-invalid={localIsError} | ||
| onClick={() => | ||
| onClickStep?.(index || 0, setStep) || | ||
| onClickStepGeneral?.(index || 0, setStep) | ||
| } | ||
| > |
There was a problem hiding this comment.
Add keyboard accessibility to clickable elements.
For accessibility, it's important to ensure that all clickable elements are also accessible via keyboard. This can be achieved by adding keyboard event handlers such as onKeyUp, onKeyDown, or onKeyPress.
+ onKeyUp={(event) => {
+ if (event.key === 'Enter') onClickStep?.(index || 0, setStep);
+ }}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| <div | |
| ref={ref} | |
| className={cn( | |
| "stepper__vertical-step", | |
| verticalStepVariants({ | |
| variant: variant?.includes("circle") ? "circle" : "line", | |
| }), | |
| isLastStepCurrentStep && "gap-[var(--step-gap)]", | |
| styles?.["vertical-step"], | |
| )} | |
| data-optional={steps[index || 0]?.optional} | |
| data-completed={isCompletedStep} | |
| data-active={active} | |
| data-clickable={clickable || !!onClickStep} | |
| data-invalid={localIsError} | |
| onClick={() => | |
| onClickStep?.(index || 0, setStep) || | |
| onClickStepGeneral?.(index || 0, setStep) | |
| } | |
| > | |
| <div | |
| ref={ref} | |
| className={cn( | |
| "stepper__vertical-step", | |
| verticalStepVariants({ | |
| variant: variant?.includes("circle") ? "circle" : "line", | |
| }), | |
| isLastStepCurrentStep && "gap-[var(--step-gap)]", | |
| styles?.["vertical-step"], | |
| )} | |
| data-optional={steps[index || 0]?.optional} | |
| data-completed={isCompletedStep} | |
| data-active={active} | |
| data-clickable={clickable || !!onClickStep} | |
| data-invalid={localIsError} | |
| onClick={() => | |
| onClickStep?.(index || 0, setStep) || | |
| onClickStepGeneral?.(index || 0, setStep) | |
| } | |
| onKeyUp={(event) => { | |
| if (event.key === 'Enter') onClickStep?.(index || 0, setStep); | |
| }} | |
| > |
| @@ -0,0 +1,88 @@ | |||
| import type { LucideIcon } from "lucide-react"; | |||
|
|
|||
| type IconType = LucideIcon | React.ComponentType<any> | undefined; | |||
There was a problem hiding this comment.
Specify a more precise type instead of any for React.ComponentType.
- type IconType = LucideIcon | React.ComponentType<any> | undefined;
+ type IconType = LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>> | undefined;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| type IconType = LucideIcon | React.ComponentType<any> | undefined; | |
| type IconType = LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>> | undefined; |
| @@ -17,18 +17,18 @@ icon: "users" | |||
| </Frame> | |||
|
|
|||
| #### You can add a batch of linked users by using the drag n drop tool | |||
|
|
|||
| <Info>Currently, we only accept .txt or .csv files that contains your remote ids separated by a comma.</Info> | |||
There was a problem hiding this comment.
Correct the grammatical error in the description of accepted file formats.
- <Info>Currently, we only accept .txt or .csv files that contains your remote ids separated by a comma.</Info>
+ <Info>Currently, we only accept .txt or .csv files that contain your remote ids separated by a comma.</Info>Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| <Info>Currently, we only accept .txt or .csv files that contains your remote ids separated by a comma.</Info> | |
| <Info>Currently, we only accept .txt or .csv files that contain your remote ids separated by a comma.</Info> |
| <div | ||
| aria-disabled={!hasVisited} | ||
| className={cn( | ||
| "stepper__horizontal-step", | ||
| "flex items-center relative transition-all duration-200", | ||
| "[&:not(:last-child)]:flex-1", | ||
| "[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200", | ||
| "[&:not(:last-child)]:after:content-[''] [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:bg-border", | ||
| "data-[completed=true]:[&:not(:last-child)]:after:bg-primary", | ||
| "data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive", | ||
| variant === "circle-alt" && | ||
| "justify-start flex-col flex-1 [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:order-[-1] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]", | ||
| variant === "circle" && | ||
| "[&:not(:last-child)]:after:flex-1 [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:me-[var(--step-gap)]", | ||
| variant === "line" && | ||
| "flex-col flex-1 border-t-[3px] data-[active=true]:border-primary", | ||
| styles?.["horizontal-step"], | ||
| )} | ||
| data-optional={steps[index || 0]?.optional} | ||
| data-completed={isCompletedStep} | ||
| data-active={active} | ||
| data-invalid={localIsError} | ||
| data-clickable={clickable} | ||
| onClick={() => onClickStep?.(index || 0, setStep)} | ||
| ref={ref} | ||
| > |
There was a problem hiding this comment.
Add keyboard event handlers to improve accessibility.
+ onKeyUp={(event) => { if (event.key === 'Enter') onClickStep?.(index || 0, setStep); }}Committable suggestion was skipped due low confidence.
| <Badge variant={"outline"} className="rounded-sm pr-6 py-1 font-normal"> | ||
| <img src={getLogoURL(provider)} className="w-5 h-5 rounded-sm mr-2" | ||
| /> | ||
| /> |
There was a problem hiding this comment.
Add an alt attribute to the image for accessibility.
- <img src={getLogoURL(provider)} className="w-5 h-5 rounded-sm mr-2" />
+ <img src={getLogoURL(provider)} alt={`Logo of ${provider}`} className="w-5 h-5 rounded-sm mr-2" />Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| <Badge variant={"outline"} className="rounded-sm pr-6 py-1 font-normal"> | |
| <img src={getLogoURL(provider)} className="w-5 h-5 rounded-sm mr-2" | |
| /> | |
| /> | |
| <Badge variant={"outline"} className="rounded-sm pr-6 py-1 font-normal"> | |
| <img src={getLogoURL(provider)} alt={`Logo of ${provider}`} className="w-5 h-5 rounded-sm mr-2" | |
| /> |
There was a problem hiding this comment.
Actionable comments posted: 4
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- apps/client-ts/src/components/ui/stepper/horizontal-step.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/index.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/step-icon.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/step.tsx (1 hunks)
- apps/client-ts/src/components/ui/stepper/vertical-step.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/client-ts/src/components/ui/stepper/step-icon.tsx
Additional Context Used
Biome (4)
apps/client-ts/src/components/ui/stepper/horizontal-step.tsx (1)
50-75: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
apps/client-ts/src/components/ui/stepper/index.tsx (1)
141-141: Unexpected any. Specify a different type.
apps/client-ts/src/components/ui/stepper/step.tsx (1)
18-18: Unexpected any. Specify a different type.
apps/client-ts/src/components/ui/stepper/vertical-step.tsx (1)
95-114: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
| interface FullStepProps extends StepProps, StepInternalConfig {} | ||
|
|
||
| const Step = React.forwardRef<HTMLLIElement, StepProps>( | ||
| (props, ref: React.Ref<any>) => { |
There was a problem hiding this comment.
Specify a more specific type instead of any for better type safety.
- (props, ref: React.Ref<any>)
+ (props, ref: React.Ref<HTMLLIElement>)Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| (props, ref: React.Ref<any>) => { | |
| (props, ref: React.Ref<HTMLLIElement>) => |
| <div | ||
| aria-disabled={!hasVisited} | ||
| className={cn( | ||
| "stepper__horizontal-step", | ||
| "flex items-center relative transition-all duration-200", | ||
| "[&:not(:last-child)]:flex-1", | ||
| "[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200", | ||
| "[&:not(:last-child)]:after:content-[''] [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:bg-border", | ||
| "data-[completed=true]:[&:not(:last-child)]:after:bg-primary", | ||
| "data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive", | ||
| variant === "circle-alt" && | ||
| "justify-start flex-col flex-1 [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:order-[-1] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]", | ||
| variant === "circle" && | ||
| "[&:not(:last-child)]:after:flex-1 [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:me-[var(--step-gap)]", | ||
| variant === "line" && | ||
| "flex-col flex-1 border-t-[3px] data-[active=true]:border-primary", | ||
| styles?.["horizontal-step"], | ||
| )} | ||
| data-optional={steps[index || 0]?.optional} | ||
| data-completed={isCompletedStep} | ||
| data-active={active} | ||
| data-invalid={localIsError} | ||
| data-clickable={clickable} | ||
| onClick={() => onClickStep?.(index || 0, setStep)} | ||
| ref={ref} | ||
| > |
There was a problem hiding this comment.
Add keyboard event handlers to improve accessibility.
+ onKeyUp={(event) => { if (event.key === 'Enter') onClickStep?.(index || 0, setStep); }}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| <div | |
| aria-disabled={!hasVisited} | |
| className={cn( | |
| "stepper__horizontal-step", | |
| "flex items-center relative transition-all duration-200", | |
| "[&:not(:last-child)]:flex-1", | |
| "[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200", | |
| "[&:not(:last-child)]:after:content-[''] [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:bg-border", | |
| "data-[completed=true]:[&:not(:last-child)]:after:bg-primary", | |
| "data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive", | |
| variant === "circle-alt" && | |
| "justify-start flex-col flex-1 [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:order-[-1] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]", | |
| variant === "circle" && | |
| "[&:not(:last-child)]:after:flex-1 [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:me-[var(--step-gap)]", | |
| variant === "line" && | |
| "flex-col flex-1 border-t-[3px] data-[active=true]:border-primary", | |
| styles?.["horizontal-step"], | |
| )} | |
| data-optional={steps[index || 0]?.optional} | |
| data-completed={isCompletedStep} | |
| data-active={active} | |
| data-invalid={localIsError} | |
| data-clickable={clickable} | |
| onClick={() => onClickStep?.(index || 0, setStep)} | |
| ref={ref} | |
| > | |
| <div | |
| aria-disabled={!hasVisited} | |
| className={cn( | |
| "stepper__horizontal-step", | |
| "flex items-center relative transition-all duration-200", | |
| "[&:not(:last-child)]:flex-1", | |
| "[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200", | |
| "[&:not(:last-child)]:after:content-[''] [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:bg-border", | |
| "data-[completed=true]:[&:not(:last-child)]:after:bg-primary", | |
| "data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive", | |
| variant === "circle-alt" && | |
| "justify-start flex-col flex-1 [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:order-[-1] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]", | |
| variant === "circle" && | |
| "[&:not(:last-child)]:after:flex-1 [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:me-[var(--step-gap)]", | |
| variant === "line" && | |
| "flex-col flex-1 border-t-[3px] data-[active=true]:border-primary", | |
| styles?.["horizontal-step"], | |
| )} | |
| data-optional={steps[index || 0]?.optional} | |
| data-completed={isCompletedStep} | |
| data-active={active} | |
| data-invalid={localIsError} | |
| data-clickable={clickable} | |
| onClick={() => onClickStep?.(index || 0, setStep)} | |
| onKeyUp={(event) => { if (event.key === 'Enter') onClickStep?.(index || 0, setStep); }} | |
| ref={ref} | |
| > |
| {React.Children.map(children, (child, i) => { | ||
| const isCompletedStep = | ||
| (React.isValidElement(child) && | ||
| (child.props as any).isCompletedStep) ?? |
There was a problem hiding this comment.
Specify a more specific type instead of any for better type safety.
- (child.props as any).isCompletedStep
+ (child.props as StepProps).isCompletedStepCommittable suggestion was skipped due low confidence.
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| "stepper__vertical-step", | ||
| verticalStepVariants({ | ||
| variant: variant?.includes("circle") ? "circle" : "line", | ||
| }), | ||
| isLastStepCurrentStep && "gap-[var(--step-gap)]", | ||
| styles?.["vertical-step"], | ||
| )} | ||
| data-optional={steps[index || 0]?.optional} | ||
| data-completed={isCompletedStep} | ||
| data-active={active} | ||
| data-clickable={clickable || !!onClickStep} | ||
| data-invalid={localIsError} | ||
| onClick={() => | ||
| onClickStep?.(index || 0, setStep) || | ||
| onClickStepGeneral?.(index || 0, setStep) | ||
| } | ||
| > |
There was a problem hiding this comment.
Add keyboard event handlers to improve accessibility.
+ onKeyUp={(event) => {
+ if (event.key === 'Enter') onClickStep?.(index || 0, setStep);
+ }}Committable suggestion was skipped due low confidence.
No description provided.