Chore/enable corepack GitHub actions #75
Conversation
chore: accordion-migration
feat: migrate to vite and add storybook
Feat: add accordion stories
chore: button-migration
Feat/add accordion stories
fix: add toString config to useBigNumberField
Chore/tag migration
WalkthroughThis update is a comprehensive refactor and modernization of the Kleros UI Components Library. It removes all usage of styled-components and theme JS objects, replacing them with utility-first CSS via Tailwind, custom global CSS, and React Aria components for accessibility and composability. All form, navigation, layout, and interactive components are rewritten to use accessible primitives and utility classes. The build system is migrated from Parcel to Vite, and Storybook is upgraded with new stories and configuration. Numerous configuration and example files are deleted, and the documentation is fully rewritten. The codebase now leverages TypeScript, Tailwind CSS, and modern React best practices. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UIComponent
participant ReactAria
participant TailwindCSS
participant GlobalCSS
User->>UIComponent: Interacts with component (e.g., Button, Form)
UIComponent->>ReactAria: Delegates accessibility, state, and ARIA roles
UIComponent->>TailwindCSS: Applies utility classes for styling
UIComponent->>GlobalCSS: Inherits global theme variables and base styles
ReactAria-->>UIComponent: Provides accessible behavior and state
TailwindCSS-->>UIComponent: Resolves class names and applies styles
GlobalCSS-->>UIComponent: Applies theme colors, typography, and transitions
UIComponent-->>User: Renders accessible, themed UI
Possibly related PRs
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
🧹 Nitpick comments (47)
src/stories/utils.tsx (1)
1-6: Type alias is correct, but consider deduplicating with.storybook/preview.tsx.The
IPreviewArgstype is well-structured for Storybook controls. However, a nearly identical type exists in.storybook/preview.tsx. To avoid future inconsistencies, consider defining this type in a single location and importing it where needed.src/stories/copiable.stories.tsx (1)
1-44: The Copiable stories are well-structured and demonstrate both icon placement options.The file effectively sets up two story variants showing different icon placements (right and left), with appropriate controls and preview arguments. The structure follows Storybook best practices with proper TypeScript typing.
There's a minor inconsistency in the info text: one has a period at the end (line 30) while the other doesn't (line 41).
info: "Copy this text",to
info: "Copy this text.",for consistency between story variants.
src/styles/global.css (1)
35-42: Avoid using !important in CSS rulesUsing
!importantin CSS rules can lead to specificity issues and make future styling changes more difficult. Consider refactoring these hover effects to use more specific selectors or a different approach that doesn't require!important..hover-medium-blue:hover { - background-color: var(--klerosUIComponentsMediumBlue) !important; + background-color: var(--klerosUIComponentsMediumBlue); } .hover-white-background:hover { - background-color: var(--klerosUIComponentsWhiteBackground) !important; + background-color: var(--klerosUIComponentsWhiteBackground); }src/lib/container/modal.tsx (1)
14-17: Avoid hardcoded dimensions for flexible componentsThe Modal component has hardcoded dimensions (
h-[200px] w-[328px]), which limits its flexibility for different use cases. Consider making the dimensions configurable via props or removing these constraints to allow for more flexible usage.<AriaModal className={cn( - "bg-klerosUIComponentsWhiteBackground h-[200px] w-[328px]", + "bg-klerosUIComponentsWhiteBackground", "rounded-base box-border", className, )} >This allows the consumer to control the dimensions through the
classNameprop, making the component more reusable.src/lib/form/datepicker/calendar.tsx (2)
74-76: Consider more flexible weekday abbreviation handlingThe current implementation hardcodes weekday abbreviations to the first two characters, which might not be ideal for all languages and locales.
- {day.substring(0, 2)} + {day.substring(0, + // Some languages need more than 2 chars for meaningful abbreviations + locale?.startsWith('zh') || locale?.startsWith('ja') ? 1 : 2 + )}
101-101: Consider using a more flexible date formatting approachThe current implementation manually formats day numbers with zero-padding. Consider using a proper date formatting utility for better localization support.
- {date.day.toString().length === 1 ? `0${date.day}` : date.day} + {new Intl.NumberFormat(locale, { minimumIntegerDigits: 2 }).format(date.day)}vite.config.ts (2)
5-6: Consider resolving ESLint warning properlyThe ESLint disable comment suggests an issue with the import resolution. Consider fixing the underlying issue rather than disabling the ESLint rule.
If the Tailwind import is causing issues, ensure it's properly installed and configured in your project dependencies:
npm install @tailwindcss/vite --save-devAlso make sure your
tsconfig.jsonincludes the path in its module resolution.
13-14: Ensure consistent module format configurationThe configuration specifies only ES modules format (
formats: ["es"]), but later includes UMD globals configuration. If UMD is actually needed, consider adding it to the formats array.- formats: ["es"], + formats: ["es", "umd"],src/stories/circular-progress.stories.tsx (2)
34-67: Consider adding JSDoc comments for all storiesThere's a JSDoc comment for the NonAnimated story but not for the others. Consider adding descriptive comments for all stories to maintain consistency and improve documentation.
+/** Default circular progress component with 50% completion. */ export const Default: Story = { args: { themeUI: "dark", backgroundUI: "light", value: 50, }, }; +/** Shows a fully completed circular progress (100%). */ export const Completed: Story = { args: { themeUI: "dark", backgroundUI: "light", value: 100, }, }; +/** Smaller variant of the circular progress component. */ export const Small: Story = { args: { themeUI: "dark", backgroundUI: "light", value: 70, small: true, }, };
32-32: Consider documenting the IPreviewArgs interfaceThe Story type extends IPreviewArgs, but there's no explanation of what this interface contains. Consider adding a comment or TypeScript reference to clarify its purpose and structure.
-type Story = StoryObj<typeof meta> & IPreviewArgs; +/** + * Story type with additional preview arguments for theme and background. + * IPreviewArgs contains themeUI and backgroundUI properties. + */ +type Story = StoryObj<typeof meta> & IPreviewArgs;src/lib/container/box.tsx (2)
7-11: Consider making dimensions customizableThe Box component has hardcoded dimensions (
h-[200px] w-[328px]) which limits its flexibility. Consider making these customizable through props to allow for different size variations.- "bg-klerosUIComponentsMediumBlue h-[200px] w-[328px]", + "bg-klerosUIComponentsMediumBlue", + className, - className,Then document the expected classes for sizing in a comment or README.
4-16: Add typedoc comments for the componentThis component lacks documentation. Consider adding JSDoc/TSDoc comments to describe the component's purpose and usage.
+/** + * A basic container component with rounded corners and blue background. + * @param className - Additional CSS classes to apply + * @param props - Standard HTML div attributes + */ function Box({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {src/lib/accordion/custom.tsx (1)
22-25: Consider making width responsive or customizableThe hardcoded width of 1000px makes the accordion less flexible for different viewports and use cases. Consider making this responsive or allowing it to be overridden through props.
- "box-border flex w-[1000px] flex-col" + "box-border flex w-full max-w-[1000px] flex-col"src/lib/scrollbar.tsx (1)
6-24: Effective refactoring to functional component with utility classesThe component has been nicely refactored from styled-components to a functional component using Tailwind utility classes. The implementation correctly spreads props to SimpleBar and properly composes classNames using the
cnutility.The complex Tailwind class selectors target SimpleBar's internal elements effectively, but consider extracting these to constants or a configuration object to improve readability:
+const scrollbarClasses = { + scrollbar: "[&_.simplebar-scrollbar]:before:!bg-klerosUIComponentsPrimaryBlue", + visible: "[&_.simplebar-visible]:before:!opacity-100", + mask: "[&_.simplebar-mask]:!bg-klerosUIComponentsWhiteBackground", +}; function Scrollbar({ children, className, ...props }: React.ComponentProps<typeof SimpleBar>) { return ( <SimpleBar className={cn( - "[&_.simplebar-scrollbar]:before:!bg-klerosUIComponentsPrimaryBlue", - "[&_.simplebar-visible]:before:!opacity-100", - "[&_.simplebar-mask]:!bg-klerosUIComponentsWhiteBackground", + scrollbarClasses.scrollbar, + scrollbarClasses.visible, + scrollbarClasses.mask, className, )} {...props} > {children} </SimpleBar> ); }src/lib/dropdown/select/simple-button.tsx (1)
69-69: Consider removing trailing space character.There's a trailing space character after the Arrow component
{" "}. While this might be intentional for spacing, it's generally better to handle spacing with CSS.- />{" "} + />src/stories/custom-timeline.stories.tsx (1)
110-149: Missing explicit alignment variation in the TimelineAlignment story.While the story is named "TimelineAlignment" and has a comment about changing alignment for individual steps, the actual implementation doesn't show different alignment settings for the steps. Both items appear to use the default alignment.
Consider adding explicit alignment properties to demonstrate the variation, for example:
{ title: "Pay 250 DAI", party: (...), subtitle: "06 Jul 2023 12:00 UTC", variant: "#4D00B4", Icon: Circle, + rightSided: true, }, { title: "Jury Decision - Round 1", party: "No", subtitle: "06 Jul 2023 12:00 UTC", variant: "#ca2314", state: "loading", + rightSided: false, },src/lib/progress/steps/horizontal-bullet.tsx (1)
75-86: Consider using optional chaining for cleaner conditional rendering.The current implementation works correctly, but could be simplified with optional chaining.
-{subitems && - subitems.map((item, i) => ( +{subitems?.map((item, i) => (Also,
aria-descriptionis not a standard ARIA attribute. Consider usingaria-describedbyinstead.- aria-description={`subitem ${i + 1}`} + aria-describedby={`horizontal-step-${index}-subitem-${i}`}🧰 Tools
🪛 Biome (1.9.4)
[error] 75-85: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/lib/container/card.tsx (1)
4-7: Consider adding default values for booleans.
Currently,roundandhoverdefault tofalse. To clarify intent, you can either rely on the implicitundefinedcheck or define explicit defaults via ES6 default parameters.src/lib/form/bignumber-field/index.tsx (1)
13-18: Interface extends well.
ExtendingBigNumberFieldPropswhile addingvariant,message,Icon, andclassNameprovides clarity. Consider documenting default behavior forvariantwhen it’s unset.src/lib/form/checkbox.tsx (1)
10-12: Inline label approach.
Requiring alabelas a string ensures the checkbox is accessible. Consider an optional render-prop orReactNodeif richer labeling is needed.src/lib/progress/timeline/index.tsx (1)
41-51: Usage ofh-[unset],grow-0, andbasis-autois logically consistent.
It effectively customizes the last bullet’s size constraints without affecting earlier items. If needed, consider a small comment explaining the customh-[unset]style for clarity.src/stories/text-field.stories.tsx (2)
15-35: Consider adding anerrorvariant story.
You've defined avariantprop supporting "success", "warning", "error", and "info," but there isn't a dedicated story showcasing theerrorvariant behavior. Including anerrorstory variant would mirror the existingsuccessdemo and help users see how the text field handles invalid inputs or error states.
80-102: Form-based required story is beneficial.
The form submission handling illustrates how required fields can be validated and integrated.If you plan to add real validation logic here, you could show an error message if the field is left empty upon submission.
src/lib/display/icon.tsx (1)
22-45: Accessible, flexible structure.
Using multiple nestedCardcomponents for layout, providing ARIA labeling, and merging custom classes withcnhelp ensure both composability and accessibility.If you anticipate further variation (e.g., vertical layout, bigger icon sizes), consider accepting layout-related props or passing a custom wrapper rather than stacking nested
Cardcomponents.src/lib/form/datepicker/display-button.tsx (1)
44-55: Appropriate dynamic icon coloring on focus.
This ensures visual feedback for keyboard or screen reader users.Consider describing the icon in a visually hidden label or
titleattribute for fully non-visual contexts.src/lib/form/text-field.tsx (2)
41-41: Consider allowing more flexible width configuration.The component has a fixed width of 278px which might limit reusability in different contexts. Consider making the width more configurable either through additional props or by letting container styles determine the width.
- className={cn("flex w-[278px] flex-col", className)} + className={cn("flex w-full flex-col", className)}
79-90: Add keyboard accessibility attributes to icon containerWhile the
aria-hidden="true"attribute is correct for decorative elements, since this container appears to be interactive, consider adding keyboard focus management attributes if the icon is meant to be interactive.src/styles/theme.css (1)
72-223: Consider adding section comments for better maintainability.This theme file provides a comprehensive set of CSS custom properties, but lacks documentation. Consider adding comments to explain the purpose of different sections for better maintainability.
src/lib/dropdown/cascader/item.tsx (2)
52-65: Use a more semantically appropriate element than label.The
labelelement is typically used for form controls, but here it's being used to display the children count. Consider using aspanordivelement instead for better semantic HTML.- <label + <span className={cn( "border-klerosUIComponentsStroke ease-ease size-6 rounded-full border transition", "flex items-center justify-center", "text-klerosUIComponentsStroke text-sm", isHovered && "border-klerosUIComponentsPrimaryBlue text-klerosUIComponentsPrimaryBlue cursor-pointer", isSelected && "border-klerosUIComponentsPrimaryBlue text-klerosUIComponentsPrimaryBlue", isDisabled && "cursor-not-allowed", )} > {children.length} - </label> + </span>
51-51: Simplify conditional check for children.The condition checks both
childrenandchildren?.length > 0, which is redundant. Ifchildrenis truthy, there's no need to use optional chaining to check its length.- {children && children?.length > 0 && ( + {children && children.length > 0 && (src/lib/dropdown/select/item.tsx (2)
16-16: Consider using a more specific type instead ofany.The
itemValueproperty is typed asany, which reduces type safety. Consider using a more specific type or a generic parameter to improve type checking.- itemValue?: any; + itemValue?: string | number | boolean | object;
41-42: Simplify icon rendering logic.The current implementation uses nullish coalescing with a nested condition, which is slightly hard to read. Consider simplifying this logic for better readability.
- {icon ?? - (Icon && <Icon className="max-h-4 min-h-3 max-w-4 min-w-3" />)} + {icon || (Icon && <Icon className="max-h-4 min-h-3 max-w-4 min-w-3" />)}src/stories/bignumber-field.stories.tsx (1)
156-162: Rename "Error" story to avoid shadowing global Error object.The name "Error" shadows the global Error constructor, which could lead to confusion.
-export const Error: Story = { +export const ErrorState: Story = { args: { ...Default.args, variant: "error", message: "Invalid amount", }, };🧰 Tools
🪛 Biome (1.9.4)
[error] 156-156: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
src/stories/dropdown-cascader.stories.tsx (1)
75-90: Add JSDoc comments for consistencyThe DefaultValueSelected story is missing JSDoc comments while some other stories have them. Consider adding them to all stories for consistent documentation.
+/** Dropdown Cascader with a default key selected. */ export const DefaultValueSelected: Story = { args: { ...DropdownCascader.args, defaultSelectedKey: 1, }, };src/lib/progress/timeline/spine.tsx (1)
5-5: Consider using a regular expression literal instead of the RegExp constructorRegular expression literals are generally preferred as they avoid some escaping requirements and are easier to analyze statically.
-export const colorRegex = new RegExp("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"); +export const colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: Use a regular expression literal instead of the RegExp constructor.
Regular expression literals avoid some escaping required in a string literal, and are easier to analyze statically.
Safe fix: Use a literal notation instead.(lint/complexity/useRegexLiterals)
README.md (3)
90-90: Minor grammar fix needed.
Replace “If want to override or edit” with “If you want to override or edit…”- If want to override or edit the defined theme variables, you can do so like this: + If you want to override or edit the defined theme variables, you can do so like this:
185-185: Refine “feel free to” wording.
Consider adopting more concise and direct phrasing to maintain a professional tone.- Contributions are welcome! Please feel free to submit a Pull Request. + Contributions are welcome! Please submit a Pull Request.🧰 Tools
🪛 LanguageTool
[style] ~185-~185: The phrase ‘feel free to’ is used quite frequently. Consider using a less frequent alternative to set your writing apart from others and make it sound more professional.
Context: ...ontributing Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the rep...(FEEL_FREE_TO_STYLE_ME)
189-189: Avoid using “amazing.”
A more professional term can help maintain a consistent tone.- git commit -m 'feat: add some amazing feature' + git commit -m 'feat: add some impressive feature'🧰 Tools
🪛 LanguageTool
[style] ~189-~189: Consider using a more formal and expressive alternative to ‘amazing’.
Context: ...our changes using conventional commits (git commit -m 'feat: add some amazing feature') 4. Push to the branch (`git ...(AWESOME)
src/lib/button/index.tsx (1)
37-85: Consider destructuringsmallfor consistency.Using
props.smallin line 59 is functional but less consistent than directly destructuringsmallalongsidevariant,isLoading, etc. This slight refactor can simplify the code and enhance readability.-function Button({ +function Button({ + small, className, isDisabled, ...props }: Readonly<ButtonProps>): React.ReactElement { return ( <AriaButton - className={cn( - props.small ? "px-6 py-1.5" : "px-8 py-[11.5px]", + className={cn( + small ? "px-6 py-1.5" : "px-8 py-[11.5px]", ... )} >src/lib/breadcrumb.tsx (2)
2-4: Consider consolidating imports.
Using bothcn(which internally relies onclsx) and directclsximports is slightly redundant. You could unify them to simplify import statements.2 import { cn } from "../utils"; 3-import { Button } from "react-aria-components"; 4-import { clsx } from "clsx"; +import { Button } from "react-aria-components"; // remove direct clsx usage if not needed
31-35: Use a stable key for mapping breadcrumb items.
Currently,key={i}in the mapped items can lead to unexpected behavior if items are re-ordered. Consider using a stable unique property (e.g.,value) if possible.- {items.map(({ text, value }, i) => - i === items.length - 1 ? ( + {items.map(({ text, value }, index) => + index === items.length - 1 ? ( ... - key={i} + key={value} ...Also applies to: 36-37, 38-77
src/lib/dropdown/cascader/dropdown-container.tsx (1)
46-59: Magic number for column width.
The239used to compute scrolling might be unclear to future maintainers. Consider storing it in a named constant to improve readability.48- const columnWidth = 239; // 238 + 1 for column gap + const COLUMN_WIDTH_PX = 239; // 238 + 1 for column gap + - const target = columnWidth * (level + 1); + const target = COLUMN_WIDTH_PX * (level + 1);src/lib/form/datepicker/index.tsx (1)
76-85: Consider clarity for "Clear" button behavior.
Currently, pressing "Clear" resets to thedefaultValue. If truly clearing the picker to an empty state is desired, consider settingstate.setValue(null)or a similar approach.src/lib/form/bignumber-field/useBigNumberField.tsx (1)
357-613: ARIA attributes and event handlers.
Handling focus, blur, keyboard arrows, Home/End, and wheel events thoroughly addresses accessibility and usability.Consider strongly typing the returned ARIA props in
getAriaAttributesfor additional type safety.src/lib/tooltip/index.tsx (1)
49-60: Potential overshadowing ofprops.tooltipProps.className
Currently, the code doesn't incorporateprops.tooltipProps.classNameinto the combinedclassNameprop. If you wish to allow users to pass custom classes viaprops.tooltipProps.className, consider merging it viacn(...)to avoid overshadowing.src/lib/tag/index.tsx (1)
14-36: Optimize semantic usage
Consider replacing the<p>tag with a<span>to ensure textual content is semantically inline inside the Button.src/lib/pagination/tabs.tsx (1)
17-37: Consider using a stricter type thananyforvalue
Relying onanycan reduce type safety. Consider makingTabsItemgeneric or using a union type if applicable.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
src/stories/assets/addon-library.pngis excluded by!**/*.pngsrc/stories/assets/cover.pngis excluded by!**/*.pngsrc/stories/assets/figma.pngis excluded by!**/*.pngsrc/stories/assets/file.pngis excluded by!**/*.pngsrc/stories/assets/github.pngis excluded by!**/*.pngsrc/stories/assets/tutorials.svgis excluded by!**/*.svgyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (172)
.babelrc(0 hunks).eslintrc.json(0 hunks).github/workflows/eslint.yml(1 hunks).github/workflows/tsc.yml(1 hunks).gitignore(1 hunks).lintstagedrc.json(1 hunks).parcelrc(0 hunks).prettierrc(1 hunks).storybook/main.ts(1 hunks).storybook/preview.tsx(1 hunks)README.md(1 hunks)eslint.config.mjs(1 hunks)global.d.ts(0 hunks)index.html(1 hunks)package.json(1 hunks)src/App.tsx(0 hunks)src/examples/accordion.tsx(0 hunks)src/examples/buttons.tsx(0 hunks)src/examples/containers.tsx(0 hunks)src/examples/copiable.tsx(0 hunks)src/examples/displays.tsx(0 hunks)src/examples/dropdowns.tsx(0 hunks)src/examples/form.tsx(0 hunks)src/examples/input.tsx(0 hunks)src/examples/messages.tsx(0 hunks)src/examples/pagination.tsx(0 hunks)src/examples/progress.tsx(0 hunks)src/examples/timeline.tsx(0 hunks)src/examples/tooltip.tsx(0 hunks)src/global.d.ts(1 hunks)src/hooks/pagination/use-pagination.tsx(2 hunks)src/hooks/use-focus-outside.tsx(1 hunks)src/hooks/useElementSize.ts(1 hunks)src/hooks/useResizeObserver.ts(1 hunks)src/lib/accordion/accordion-item.tsx(2 hunks)src/lib/accordion/custom.tsx(3 hunks)src/lib/accordion/index.tsx(3 hunks)src/lib/breadcrumb.tsx(1 hunks)src/lib/button/ButtonIcon.tsx(1 hunks)src/lib/button/ButtonText.tsx(1 hunks)src/lib/button/KlerosSymbol.tsx(1 hunks)src/lib/button/base.tsx(0 hunks)src/lib/button/index.tsx(1 hunks)src/lib/button/primary.tsx(0 hunks)src/lib/button/secondary.tsx(0 hunks)src/lib/button/tertiary.tsx(0 hunks)src/lib/container/box.tsx(1 hunks)src/lib/container/card.tsx(1 hunks)src/lib/container/modal.tsx(1 hunks)src/lib/copiable/index.tsx(3 hunks)src/lib/display/icon.tsx(1 hunks)src/lib/display/large.tsx(1 hunks)src/lib/display/small.tsx(1 hunks)src/lib/dot.tsx(1 hunks)src/lib/dropdown/base-item-container.tsx(0 hunks)src/lib/dropdown/base-item.tsx(0 hunks)src/lib/dropdown/button.tsx(0 hunks)src/lib/dropdown/cascader/button.tsx(1 hunks)src/lib/dropdown/cascader/dropdown-container.tsx(1 hunks)src/lib/dropdown/cascader/index.tsx(1 hunks)src/lib/dropdown/cascader/item-container.tsx(0 hunks)src/lib/dropdown/cascader/item.tsx(1 hunks)src/lib/dropdown/cascader/select-button.tsx(1 hunks)src/lib/dropdown/cascader/selector.tsx(0 hunks)src/lib/dropdown/dropdown-container.tsx(0 hunks)src/lib/dropdown/select/button.tsx(0 hunks)src/lib/dropdown/select/dropdown-button.tsx(1 hunks)src/lib/dropdown/select/dropdown-container.tsx(1 hunks)src/lib/dropdown/select/index.tsx(1 hunks)src/lib/dropdown/select/item-container.tsx(0 hunks)src/lib/dropdown/select/item.tsx(1 hunks)src/lib/dropdown/select/simple-button.tsx(1 hunks)src/lib/dropdown/simple-button.tsx(0 hunks)src/lib/form/bignumber-field/index.tsx(1 hunks)src/lib/form/bignumber-field/useBigNumberField.tsx(1 hunks)src/lib/form/checkbox.tsx(1 hunks)src/lib/form/datepicker/arrow-button.tsx(1 hunks)src/lib/form/datepicker/calendar.tsx(1 hunks)src/lib/form/datepicker/date-selector.tsx(0 hunks)src/lib/form/datepicker/datepickerContext.ts(0 hunks)src/lib/form/datepicker/day.tsx(0 hunks)src/lib/form/datepicker/display-button.tsx(1 hunks)src/lib/form/datepicker/dropdown.tsx(0 hunks)src/lib/form/datepicker/index.tsx(1 hunks)src/lib/form/datepicker/month-selector.tsx(0 hunks)src/lib/form/datepicker/month.tsx(0 hunks)src/lib/form/datepicker/time-control.tsx(1 hunks)src/lib/form/datepicker/time-controls.tsx(0 hunks)src/lib/form/datepicker/time-selector.tsx(0 hunks)src/lib/form/field.tsx(0 hunks)src/lib/form/file-uploader.tsx(1 hunks)src/lib/form/index.tsx(1 hunks)src/lib/form/number-field.tsx(1 hunks)src/lib/form/radio-group.tsx(1 hunks)src/lib/form/radio.tsx(0 hunks)src/lib/form/searchbar.tsx(1 hunks)src/lib/form/slider.tsx(1 hunks)src/lib/form/slider/handle.tsx(0 hunks)src/lib/form/slider/index.tsx(0 hunks)src/lib/form/switch.tsx(1 hunks)src/lib/form/text-area.tsx(1 hunks)src/lib/form/text-field.tsx(1 hunks)src/lib/form/textarea.tsx(0 hunks)src/lib/index.ts(2 hunks)src/lib/messages/alert.tsx(1 hunks)src/lib/messages/push.tsx(1 hunks)src/lib/pagination/compact.tsx(1 hunks)src/lib/pagination/standard.tsx(2 hunks)src/lib/pagination/tabs.tsx(1 hunks)src/lib/progress/circular/index.tsx(2 hunks)src/lib/progress/linear/index.tsx(1 hunks)src/lib/progress/steps/bullet-circle.tsx(2 hunks)src/lib/progress/steps/bullet.tsx(3 hunks)src/lib/progress/steps/horizontal-bullet.tsx(2 hunks)src/lib/progress/steps/horizontal.tsx(2 hunks)src/lib/progress/steps/index.tsx(1 hunks)src/lib/progress/steps/vertical.tsx(2 hunks)src/lib/progress/timeline/bullet.tsx(2 hunks)src/lib/progress/timeline/custom.tsx(1 hunks)src/lib/progress/timeline/index.tsx(1 hunks)src/lib/progress/timeline/spine.tsx(2 hunks)src/lib/scrollbar.tsx(1 hunks)src/lib/tag/index.tsx(1 hunks)src/lib/theme.ts(1 hunks)src/lib/tooltip/index.tsx(1 hunks)src/stories/KlerosUIComponentsLibrary.mdx(1 hunks)src/stories/accordion.stories.tsx(1 hunks)src/stories/alert.stories.tsx(1 hunks)src/stories/bignumber-field.stories.tsx(1 hunks)src/stories/box.stories.tsx(1 hunks)src/stories/breadcrumb.stories.tsx(1 hunks)src/stories/button.stories.tsx(1 hunks)src/stories/card.stories.tsx(1 hunks)src/stories/checkbox.stories.tsx(1 hunks)src/stories/circular-progress.stories.tsx(1 hunks)src/stories/compactPagination.stories.tsx(1 hunks)src/stories/copiable.stories.tsx(1 hunks)src/stories/custom-timeline.stories.tsx(1 hunks)src/stories/datepicker.stories.tsx(1 hunks)src/stories/displayIcon.stories.tsx(1 hunks)src/stories/displayLarge.stories.tsx(1 hunks)src/stories/displaySmall.stories.tsx(1 hunks)src/stories/dropdown-cascader.stories.tsx(1 hunks)src/stories/dropdown-select.stories.tsx(1 hunks)src/stories/fileuploader.stories.tsx(1 hunks)src/stories/form.stories.tsx(1 hunks)src/stories/linear-progress.stories.tsx(1 hunks)src/stories/modal.stories.tsx(1 hunks)src/stories/number-field.stories.tsx(1 hunks)src/stories/push.stories.tsx(1 hunks)src/stories/radioGroup.stories.tsx(1 hunks)src/stories/searchbar.stories.tsx(1 hunks)src/stories/slider.stories.tsx(1 hunks)src/stories/standardPagination.stories.tsx(1 hunks)src/stories/steps.stories.tsx(1 hunks)src/stories/switch.stories.tsx(1 hunks)src/stories/tabs.stories.tsx(1 hunks)src/stories/tag.stories.tsx(1 hunks)src/stories/text-area.stories.tsx(1 hunks)src/stories/text-field.stories.tsx(1 hunks)src/stories/timeline.stories.tsx(1 hunks)src/stories/tooltip.stories.tsx(1 hunks)src/stories/utils.tsx(1 hunks)src/styles/common-style.ts(0 hunks)src/styles/global-style.ts(0 hunks)src/styles/global.css(1 hunks)src/styles/theme.css(1 hunks)src/styles/themes.ts(0 hunks)src/utils/index.ts(1 hunks)tsconfig.json(1 hunks)vite.config.theme.ts(1 hunks)vite.config.ts(1 hunks)
💤 Files with no reviewable changes (47)
- .babelrc
- src/lib/button/tertiary.tsx
- src/examples/accordion.tsx
- src/examples/containers.tsx
- global.d.ts
- src/examples/progress.tsx
- src/examples/displays.tsx
- src/lib/dropdown/base-item-container.tsx
- .parcelrc
- src/lib/form/slider/handle.tsx
- src/lib/button/primary.tsx
- src/examples/copiable.tsx
- src/styles/global-style.ts
- src/lib/button/secondary.tsx
- src/lib/dropdown/cascader/selector.tsx
- src/lib/form/datepicker/datepickerContext.ts
- src/examples/buttons.tsx
- src/examples/dropdowns.tsx
- src/lib/dropdown/dropdown-container.tsx
- src/lib/dropdown/select/button.tsx
- src/lib/form/radio.tsx
- src/lib/form/datepicker/dropdown.tsx
- src/styles/themes.ts
- src/App.tsx
- src/examples/timeline.tsx
- src/lib/dropdown/base-item.tsx
- src/lib/form/textarea.tsx
- src/lib/dropdown/button.tsx
- src/lib/dropdown/select/item-container.tsx
- src/lib/button/base.tsx
- src/examples/tooltip.tsx
- src/examples/pagination.tsx
- src/examples/input.tsx
- src/lib/form/datepicker/month-selector.tsx
- src/lib/form/slider/index.tsx
- src/lib/form/datepicker/time-controls.tsx
- src/lib/dropdown/simple-button.tsx
- .eslintrc.json
- src/lib/form/datepicker/date-selector.tsx
- src/lib/form/datepicker/day.tsx
- src/lib/form/datepicker/month.tsx
- src/lib/form/field.tsx
- src/lib/form/datepicker/time-selector.tsx
- src/examples/messages.tsx
- src/lib/dropdown/cascader/item-container.tsx
- src/examples/form.tsx
- src/styles/common-style.ts
🧰 Additional context used
🧬 Code Graph Analysis (65)
src/lib/form/index.tsx (1)
src/stories/form.stories.tsx (1)
Form(19-44)
src/stories/accordion.stories.tsx (2)
.storybook/preview.tsx (1)
IPreviewArgs(8-11)src/stories/utils.tsx (1)
IPreviewArgs(1-6)
src/stories/utils.tsx (1)
.storybook/preview.tsx (1)
IPreviewArgs(8-11)
src/lib/button/ButtonIcon.tsx (2)
src/lib/button/index.tsx (1)
ButtonProps(26-35)src/utils/index.ts (1)
cn(4-6)
src/lib/dropdown/cascader/select-button.tsx (3)
src/lib/dropdown/cascader/index.tsx (1)
IDropdownCascader(14-19)src/utils/index.ts (1)
isUndefined(8-11)src/lib/dropdown/cascader/item.tsx (1)
IItem(7-12)
src/lib/accordion/custom.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/progress/steps/horizontal.tsx (2)
src/lib/progress/steps/index.tsx (1)
StepsProps(12-18)src/utils/index.ts (1)
cn(4-6)
src/stories/tooltip.stories.tsx (1)
src/stories/tag.stories.tsx (1)
Tag(22-29)
src/lib/form/slider.tsx (2)
src/stories/slider.stories.tsx (1)
Slider(22-34)src/utils/index.ts (1)
cn(4-6)
src/lib/form/number-field.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/form/datepicker/arrow-button.tsx (2)
src/lib/button/index.tsx (1)
ButtonProps(26-35)src/utils/index.ts (1)
cn(4-6)
src/lib/accordion/index.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/button/ButtonText.tsx (2)
src/lib/button/index.tsx (1)
ButtonProps(26-35)src/utils/index.ts (1)
cn(4-6)
src/lib/container/box.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/button/KlerosSymbol.tsx (2)
src/lib/button/index.tsx (1)
ButtonProps(26-35)src/utils/index.ts (1)
cn(4-6)
src/lib/form/checkbox.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/stories/searchbar.stories.tsx (1)
src/stories/form.stories.tsx (1)
Form(19-44)
src/stories/linear-progress.stories.tsx (1)
src/stories/circular-progress.stories.tsx (2)
Default(34-40)NonAnimated(60-67)
src/lib/scrollbar.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/dropdown/select/simple-button.tsx (2)
src/lib/button/index.tsx (1)
ButtonProps(26-35)src/utils/index.ts (1)
cn(4-6)
src/lib/dropdown/cascader/button.tsx (2)
src/utils/index.ts (1)
cn(4-6)src/lib/dropdown/cascader/item.tsx (1)
IItem(7-12)
src/stories/timeline.stories.tsx (1)
src/stories/custom-timeline.stories.tsx (2)
Timeline(19-39)TimelineAlignment(113-149)
src/lib/form/searchbar.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/stories/custom-timeline.stories.tsx (1)
src/stories/timeline.stories.tsx (2)
Timeline(17-39)TimelineAlignment(44-66)
src/lib/form/text-area.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/dropdown/select/dropdown-button.tsx (3)
src/lib/dropdown/select/item.tsx (1)
IItem(19-23)src/lib/button/index.tsx (1)
ButtonProps(26-35)src/utils/index.ts (1)
cn(4-6)
src/lib/container/modal.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/form/bignumber-field/index.tsx (2)
src/lib/form/bignumber-field/useBigNumberField.tsx (2)
BigNumberFieldProps(31-66)useBigNumberField(80-613)src/utils/index.ts (1)
cn(4-6)
.storybook/preview.tsx (1)
src/stories/utils.tsx (1)
IPreviewArgs(1-6)
src/lib/dropdown/select/dropdown-container.tsx (1)
src/lib/dropdown/select/item.tsx (1)
IItem(19-23)
src/stories/radioGroup.stories.tsx (1)
src/stories/form.stories.tsx (1)
Form(19-44)
src/lib/dropdown/cascader/item.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/stories/dropdown-select.stories.tsx (2)
src/stories/dropdown-cascader.stories.tsx (2)
DisabledKeysSelect(84-90)RequiredSelect(93-115)src/stories/form.stories.tsx (1)
Form(19-44)
src/stories/text-area.stories.tsx (3)
src/stories/number-field.stories.tsx (4)
Default(42-49)Variant(51-56)Labelled(65-70)Required(80-102)src/stories/text-field.stories.tsx (4)
Default(42-49)Variant(51-56)Labelled(65-70)Required(80-102)src/stories/form.stories.tsx (1)
Form(19-44)
src/lib/form/datepicker/display-button.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/progress/steps/bullet.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/stories/text-field.stories.tsx (3)
src/stories/number-field.stories.tsx (6)
Default(42-49)Variant(51-56)CustomIcon(58-63)Labelled(65-70)WithDescription(72-78)Required(80-102)src/stories/text-area.stories.tsx (4)
Default(47-54)Variant(56-61)Labelled(63-68)Required(80-102)src/stories/form.stories.tsx (1)
Form(19-44)
src/lib/dropdown/select/item.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/form/datepicker/index.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/form/text-field.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/progress/timeline/spine.tsx (1)
src/utils/index.ts (1)
isUndefined(8-11)
src/lib/display/large.tsx (3)
src/stories/displayLarge.stories.tsx (1)
DisplayLarge(18-27)src/lib/display/icon.tsx (1)
DisplayIconProps(7-12)src/utils/index.ts (1)
cn(4-6)
src/lib/button/index.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/container/card.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/stories/dropdown-cascader.stories.tsx (2)
src/stories/dropdown-select.stories.tsx (2)
DisabledKeysSelect(80-86)RequiredSelect(89-111)src/stories/form.stories.tsx (1)
Form(19-44)
src/lib/breadcrumb.tsx (2)
src/utils/index.ts (1)
cn(4-6)src/stories/breadcrumb.stories.tsx (1)
Breadcrumb(26-38)
src/lib/messages/alert.tsx (2)
src/stories/alert.stories.tsx (1)
Alert(23-32)src/utils/index.ts (1)
cn(4-6)
src/lib/pagination/compact.tsx (3)
src/lib/button/index.tsx (1)
ButtonProps(26-35)src/utils/index.ts (1)
cn(4-6)src/stories/compactPagination.stories.tsx (1)
CompactPagination(29-50)
src/lib/progress/timeline/bullet.tsx (2)
src/utils/index.ts (2)
cn(4-6)isUndefined(8-11)src/lib/progress/timeline/spine.tsx (1)
colorRegex(5-5)
src/lib/display/icon.tsx (3)
src/stories/displayIcon.stories.tsx (1)
DisplayIcon(18-27)src/stories/card.stories.tsx (1)
Card(25-33)src/utils/index.ts (1)
cn(4-6)
src/lib/dot.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/progress/steps/vertical.tsx (2)
src/lib/progress/steps/index.tsx (1)
StepsProps(12-18)src/utils/index.ts (1)
cn(4-6)
src/lib/form/datepicker/calendar.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/form/radio-group.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/progress/timeline/custom.tsx (3)
src/lib/progress/timeline/bullet.tsx (2)
VariantProp(3-3)StateProp(11-13)src/lib/progress/timeline/spine.tsx (1)
VariantProp(7-7)src/utils/index.ts (1)
cn(4-6)
src/lib/progress/linear/index.tsx (1)
src/utils/index.ts (2)
cn(4-6)isUndefined(8-11)
src/lib/dropdown/select/index.tsx (2)
src/lib/dropdown/select/item.tsx (1)
IItem(19-23)src/utils/index.ts (1)
cn(4-6)
src/lib/messages/push.tsx (2)
src/stories/push.stories.tsx (1)
Push(23-34)src/utils/index.ts (1)
cn(4-6)
src/lib/accordion/accordion-item.tsx (1)
src/utils/index.ts (1)
cn(4-6)
src/lib/form/file-uploader.tsx (2)
src/stories/fileuploader.stories.tsx (1)
FileUploader(26-33)src/utils/index.ts (1)
cn(4-6)
src/lib/tag/index.tsx (3)
src/lib/button/index.tsx (1)
ButtonProps(26-35)src/stories/tag.stories.tsx (1)
Tag(22-29)src/utils/index.ts (1)
cn(4-6)
src/lib/progress/timeline/index.tsx (3)
src/lib/progress/timeline/bullet.tsx (2)
SideProp(7-9)VariantProp(3-3)src/lib/progress/timeline/spine.tsx (1)
VariantProp(7-7)src/utils/index.ts (1)
cn(4-6)
src/lib/dropdown/cascader/dropdown-container.tsx (3)
src/lib/dropdown/cascader/index.tsx (1)
IDropdownCascader(14-19)src/lib/dropdown/cascader/item.tsx (1)
IItem(7-12)src/utils/index.ts (1)
cn(4-6)
src/lib/form/datepicker/time-control.tsx (2)
src/lib/form/datepicker/arrow-button.tsx (1)
ArrowButtonProps(13-20)src/utils/index.ts (1)
cn(4-6)
src/lib/pagination/tabs.tsx (2)
src/stories/tabs.stories.tsx (1)
Tabs(19-44)src/utils/index.ts (1)
cn(4-6)
🪛 actionlint (1.7.4)
.github/workflows/eslint.yml
9-9: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
.github/workflows/tsc.yml
9-9: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🪛 Biome (1.9.4)
src/styles/global.css
[error] 4-4: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
src/lib/progress/steps/horizontal-bullet.tsx
[error] 75-85: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/lib/progress/timeline/spine.tsx
[error] 5-5: Use a regular expression literal instead of the RegExp constructor.
Regular expression literals avoid some escaping required in a string literal, and are easier to analyze statically.
Safe fix: Use a literal notation instead.
(lint/complexity/useRegexLiterals)
src/lib/breadcrumb.tsx
[error] 9-9: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
src/stories/bignumber-field.stories.tsx
[error] 156-156: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
src/lib/messages/push.tsx
[error] 16-16: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
🪛 LanguageTool
README.md
[grammar] ~89-~89: It seems that a pronoun is missing.
Context: ...variables here. If want to override or edit the defined th...
(IF_VB)
[style] ~185-~185: The phrase ‘feel free to’ is used quite frequently. Consider using a less frequent alternative to set your writing apart from others and make it sound more professional.
Context: ...ontributing Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the rep...
(FEEL_FREE_TO_STYLE_ME)
[style] ~189-~189: Consider using a more formal and expressive alternative to ‘amazing’.
Context: ...our changes using conventional commits (git commit -m 'feat: add some amazing feature') 4. Push to the branch (`git ...
(AWESOME)
🔇 Additional comments (365)
.prettierrc (1)
1-3: Prettier Tailwind plugin configuration looks good.This ensures Tailwind CSS classes are consistently formatted. No issues found.
src/hooks/use-focus-outside.tsx (1)
4-4: ESLint directive update is appropriate.The new rule better matches the intent and updated linting config. No issues.
src/hooks/useElementSize.ts (1)
12-13: Trailing comma and lint cleanup are correct.These changes are stylistic and align with project standards. No issues found.
src/hooks/useResizeObserver.ts (1)
5-5: Trailing comma addition is correct.This is a stylistic update for consistency. No issues found.
tsconfig.json (1)
34-37: TypeScript config updates are correct.Excluding new config files and removing the suppress option improves type safety and build reliability.
src/lib/theme.ts (1)
1-1: Theme entry point is correct and minimal.This file correctly serves as a CSS entry point for the theme build. No issues found.
.lintstagedrc.json (1)
2-2: Lint-staged configuration is correct.Automatically fixing lint issues on commit is a best practice. No issues found.
index.html (2)
6-6: Global CSS link is correct.The stylesheet is correctly linked for global styles.
11-11: Script source update is appropriate.Switching to an absolute path for the entry script is compatible with Vite and the new project structure.
.gitignore (1)
26-27: Obsolete ignores removed and Storybook log ignore added.The changes reflect the new build tooling and are correct.
src/hooks/pagination/use-pagination.tsx (4)
6-6: Trailing comma in parameter list is correct.This improves formatting consistency and has no functional impact.
35-35: Trailing comma in argument list is correct.This is a stylistic improvement and does not affect logic.
38-38: Trailing comma in argument list is correct.This is a stylistic improvement and does not affect logic.
41-41: Trailing comma in arrow function parameter is correct.This is a stylistic improvement and does not affect logic.
.github/workflows/eslint.yml (1)
10-11: Enable Corepack step is a best practice for Yarn/pnpm workflows.Adding
corepack enablebefore dependency installation ensures the correct package manager version is used, which is especially important for Yarn 2+ and pnpm. This is a solid improvement.src/global.d.ts (1)
1-4: SVG module declaration is correct and standard.This enables SVG imports as React components with proper typing, which is best practice for TypeScript + React projects using SVGR or similar tooling.
.github/workflows/tsc.yml (1)
10-11: Enable Corepack step is a best practice for Yarn/pnpm workflows.Adding
corepack enablebefore dependency installation ensures the correct package manager version is used, which is especially important for Yarn 2+ and pnpm. This is a solid improvement.vite.config.theme.ts (1)
1-16: Vite theme build configuration is correct and modular.This configuration cleanly separates theme assets from the main library and follows best practices for Vite library builds.
src/lib/form/index.tsx (1)
1-10: Clean and idiomatic wrapper implementation.The
Formcomponent is a well-typed, minimal wrapper aroundreact-aria-components'sForm, with clear documentation and correct prop forwarding.src/stories/checkbox.stories.tsx (1)
1-30: Well-structured Storybook story.The Checkbox story is clear, uses appropriate controls, and provides a good example for documentation and testing.
src/utils/index.ts (1)
1-11: Useful and idiomatic utility functions.Both
cnandisUndefinedare well-implemented and support the codebase's styling and type safety needs.src/lib/button/KlerosSymbol.tsx (1)
1-27: Concise and effective icon component.The
KlerosSymbolcomponent is well-implemented, with clear logic for dynamic styling and proper use of utility functions.src/stories/accordion.stories.tsx (1)
1-42: Clear and effective Accordion story.The Accordion story is well-structured, demonstrates usage, and supports documentation and testing.
src/stories/displayLarge.stories.tsx (1)
1-27: Well-structured Storybook setup for the LargeDisplayComponentThe story is properly configured with appropriate metadata, type annotations, and default props. The use of the
satisfiesoperator withMetaensures type safety, and extending theStoryObjwithIPreviewArgscorrectly integrates theme controls.src/stories/tooltip.stories.tsx (3)
9-40: Comprehensive metadata configuration with appropriate controlsThe
argTypesobject is well-structured with appropriate control types for each prop, making it easy to test different configurations in the Storybook interface.
46-53: Good implementation of default Tooltip storyThe default story provides clear example usage with a Tag component as a trigger and appropriate theme settings.
55-63: Excellent addition of an always-open Tooltip variantAdding the OpenTooltip variant with
isOpen: truedemonstrates an important use case and makes it easier to test the appearance without needing to hover.src/stories/box.stories.tsx (1)
1-23: Clean implementation of Box component storyThe story follows consistent patterns with other stories in the codebase, using the same structure for metadata and properly integrating theme controls via
IPreviewArgs.src/stories/tag.stories.tsx (2)
7-16: Well-defined metadata with appropriate controlsThe metadata includes proper component reference, title categorization, and autodocs tagging. The argTypes definition with a boolean control for the
activeprop supports interactive testing.
22-38: Good coverage of component states with two variantsIncluding both inactive and active tag variants provides comprehensive test coverage for the component's visual states.
src/lib/dot.tsx (1)
1-15: Clean refactoring from styled-components to utility-first CSSThe Dot component has been effectively refactored to use utility classes and the
cnhelper function, aligning with the library's migration away from styled-components. The component correctly accepts and combines the optionalclassNameprop with default utility classes using thecnutility.src/lib/button/ButtonIcon.tsx (1)
1-25: LGTM: Well-structured Button Icon component with good variant handlingThe component effectively handles two types of icon inputs (Icon component or React node), with appropriate conditional styling based on button state. Good use of the
cnutility for class name merging..storybook/main.ts (1)
15-39: Well-implemented TypeScript configuration for component docsThe prop filter implementation is excellent - it selectively includes props from your codebase and specific React Aria packages while excluding other third-party dependencies. This will result in cleaner and more relevant component documentation.
src/stories/switch.stories.tsx (1)
1-28: Good Switch story implementation with appropriate controlsThe story is well-structured with proper typing and controls. The boolean control for the "small" property is appropriate for this component type.
src/stories/push.stories.tsx (2)
11-16: Appropriate variant control configurationGood choice using a radio control for the variant options, making it clear that only one of the three predefined options can be selected.
23-34: Complete story args with meaningful defaultsThe story provides a comprehensive set of default arguments that showcase the component's capabilities. The inclusion of a no-op callback function is a good practice for event handler props.
src/stories/timeline.stories.tsx (1)
1-67: Well-structured Timeline stories with clear alignment demonstration.The file effectively showcases two variations of the Timeline component. The first displays both items right-aligned, while the second demonstrates mixed alignment (right and left). The JSDoc comment on lines 41-43 provides helpful context about the alignment functionality.
The component props match the expected pattern seen in other timeline stories, with appropriate styling and sample data that clearly illustrates the component's functionality.
src/stories/displayIcon.stories.tsx (1)
1-28: Clean implementation of DisplayIcon story.The story properly demonstrates the IconDisplayComponent with appropriate props including theme settings, width class, text content, label, and icon. The structure follows the standard pattern used in other display component stories.
src/stories/form.stories.tsx (1)
1-45: Effective Form component demonstration with practical example.The story shows a real-world use case of the FormComponent with a TextField and submit Button. The implementation includes:
- Proper form submission handling with preventDefault
- Required email field with appropriate placeholder
- Submit button with the correct type attribute
- Flexible layout using utility classes
This example provides developers with a clear pattern for implementing forms using the component library.
src/lib/button/ButtonText.tsx (1)
1-24: Clean implementation with good conditional stylingThe ButtonText component is well-structured and follows good React patterns. It properly handles different states (loading, disabled) and variants with appropriate conditional styling using the
cnutility function.src/stories/displaySmall.stories.tsx (1)
1-27: Well-structured Storybook storyThe implementation follows Storybook best practices with clear metadata, proper typing with the IPreviewArgs interface, and comprehensive default props for the story.
src/lib/progress/steps/index.tsx (3)
5-10: Great addition of JSDoc comments to improve documentation!Adding JSDoc comments to the
StepIteminterface properties enhances code clarity and developer experience. This makes the component's API more self-documenting.
12-18: Good enhancement of the StepsProps interfaceAdding the
classNameprop and JSDoc comment for thehorizontalproperty improves component flexibility and documentation. TheclassNameprop aligns with the project's shift toward utility-first CSS approach.
19-22: Nice refactoring to a named function with default prop valueThe refactoring from an arrow function to a named function declaration with a default value for
horizontalis a good practice. The added JSDoc comment also enhances code documentation.vite.config.ts (1)
9-43: Overall Vite configuration looks solidThe configuration sets up a proper build for the React component library with appropriate plugins and settings. The structure follows Vite's recommended patterns.
src/stories/circular-progress.stories.tsx (1)
7-28: Well-structured Storybook meta configurationThe meta configuration is well-structured with appropriate controls for the component's props. This makes the Storybook documentation interactive and useful.
src/lib/progress/steps/horizontal.tsx (2)
14-14: Verify custom width class compatibilityThe class
w-62.5appears to be a custom width class (equal to 250px based on the summary). Ensure this class is properly defined in your Tailwind configuration, or consider using standard Tailwind width classes for better maintainability.- "box-border flex w-62.5 items-start justify-center", + "box-border flex w-[250px] items-start justify-center",
18-20: Great accessibility improvements!The addition of aria attributes (
aria-orientation,role,aria-label) improves the component's accessibility. This is a valuable enhancement.src/lib/accordion/custom.tsx (1)
10-13: Good addition of className propAdding the optional className property to the AccordionProps interface allows for more flexible styling from external components, which is a good practice.
src/stories/tabs.stories.tsx (1)
1-44: Well-structured Storybook story with comprehensive feature coverage.The Tabs story effectively demonstrates the component's key features, including default selected tab, icon integration, and disabled state handling. Good use of TypeScript with proper typing and the satisfies operator.
src/stories/alert.stories.tsx (1)
1-32: Clean and well-structured Alert story with appropriate controls.The Alert story properly demonstrates the component with a warning variant and sets up radio controls for all available variants. Good TypeScript integration and prop configuration.
src/stories/card.stories.tsx (1)
1-33: Well-configured Card story with appropriate boolean controls.The Card story is properly set up with boolean controls for hover and round properties, allowing for interactive testing of these features. Good use of theme configuration and TypeScript typing.
src/lib/progress/steps/vertical.tsx (5)
4-4: Good use of utility function for class name composition.The import and use of the
cnutility function allows for proper merging of Tailwind classes with any passed className prop.
6-10: Properly updated component signature to handle className prop.The component now correctly destructures and utilizes the className prop, allowing for external styling customization.
13-18: Excellent accessibility improvements with proper ARIA attributes.The refactoring adds important accessibility attributes (aria-orientation, role, aria-label) that improve the component's usability for assistive technologies. The Tailwind classes maintain the visual styling while removing the dependency on styled-components.
19-30: Well-structured container for bullet items.The flex container properly organizes all bullets except the last one, maintaining the original design while using Tailwind's utility classes.
31-38: Proper handling of the last bullet with specific styling.The last bullet is correctly rendered with specific classes to control its layout behavior, ensuring it doesn't grow but maintains its base size.
src/lib/accordion/index.tsx (4)
3-3: Good addition of utility function import.The
cnutility function import enables proper class name composition with Tailwind CSS, allowing for clean merging of default and custom className props.
15-15: Well-implemented extensibility with className prop.Adding the optional
classNameprop toAccordionPropsinterface allows for external styling customization, which is a best practice for reusable components.
21-21: Good conversion to Tailwind classes.The styled component has been properly replaced with Tailwind utility classes for text styling and layout, maintaining the original design while eliminating the need for styled-components.
33-36: Excellent implementation of container with Tailwind.The styled wrapper has been effectively replaced with a standard div using Tailwind classes. The
cnutility function properly merges the default styling with any custom className passed as a prop, ensuring both consistency and flexibility.src/stories/datepicker.stories.tsx (5)
1-7: Good structure and imports for Storybook story.The imports are well organized, bringing in necessary Storybook types, utility components, and the Datepicker component. The internationalized date utilities are appropriate for handling date operations.
8-20: Well-defined Storybook metadata.The metadata correctly sets up the component, title, tags, and argTypes. The use of
satisfies Meta<typeof DatepickerComponent>provides good type checking.
21-29: Clear story definition with appropriate theme settings.The base story is well configured with dark theme, light background, and appropriate className for full width display.
31-38: Good variant showing time selection capability.This story variant properly demonstrates the time selection feature by setting the
timeprop to true while maintaining consistent styling with the base story.
40-49: Excellent demonstration of date constraints.The story variant with minimum date shows a practical use case using the current date/time in the local timezone. The comment adds helpful context for users.
src/lib/dropdown/select/dropdown-container.tsx (5)
1-6: Appropriate imports for dropdown functionality.The imports include necessary libraries for class management (clsx), React, React Aria components for accessibility, and custom components for scrolling and item rendering.
7-10: Clear component interface definition.The component properly defines its props with TypeScript types, accepting an optional boolean for open state and required items array that follows the IItem interface.
11-21: Well-implemented Popover with conditional styling.The Popover component uses clsx for conditional class composition, applying appropriate background, border, shadow, and focus styles. The animation classes for entering/exiting states are correctly implemented based on the isOpen prop.
22-31: Good implementation of scrollable content with virtualization.The component properly composes the Scrollbar with ListBox and Collection components, ensuring accessibility and performance with large lists. The grid layout for items is well-defined with appropriate spacing.
32-36: Clean component structure with appropriate exports.The component structure is clean and follows React best practices for functional components. The default export makes the component easy to import elsewhere.
src/stories/KlerosUIComponentsLibrary.mdx (8)
1-8: Good setup with necessary imports.The file imports all required Storybook components and assets for the documentation page.
9-25: Well-implemented SVG component for UI consistency.The RightArrow component is properly defined with appropriate viewBox, dimensions, and styling. Using inline SVG ensures design consistency across the documentation.
27-43: Clear introduction and welcome section.The documentation starts with a well-structured title and introduction that clearly explains the purpose of the library.
44-95: Comprehensive getting started section with installation instructions.This section provides clear guidance on installation, CSS import, and component usage with code examples and links to more detailed documentation.
96-138: Well-organized component categories.The documentation effectively categorizes components into logical groups (form, navigation, interactive, layout) with descriptions and links to detailed documentation.
139-152: Good contribution section with visual appeal.The contribution section encourages community involvement with a clear call to action and visually appealing design.
153-183: Excellent resource links section.The social section provides valuable links to GitHub, tutorials, and design resources, making it easy for users to find additional information.
184-406: Well-structured and responsive styling.The CSS styling is comprehensive and well-organized, with responsive breakpoints for different screen sizes. The card and grid layouts are visually appealing and maintain consistency across the documentation.
src/lib/accordion/accordion-item.tsx (5)
6-7: Appropriate usage of React Aria for accessibilityGood choice using the React Aria Button component to replace styled-components. This improves accessibility and follows modern React practices.
26-35: Well-structured class composition with clear organizationThe class names are well organized into logical groups (background/border, hover effects, spacing/padding, layout). The use of the
cnutility function for composing class names improves readability.
34-34: React Aria API alignment with onPressCorrect implementation using
onPressinstead ofonClickto align with React Aria's API. This ensures proper handling of keyboard and pointer events.
38-41: Consistent icon stylingGood use of utility classes for icons with appropriate sizing and fill colors.
43-53: Smooth collapsible implementation with proper transitionsThe collapsible animation implementation correctly uses the measured height from
useElementSizewith conditional classes for overflow and transitions. This ensures smooth animations without layout shifts.src/stories/button.stories.tsx (6)
8-24: Well-structured Storybook configurationThe meta configuration for the Button component is well-organized with appropriate controls for the component props.
29-36: Good primary button story implementationThe PrimaryButton story provides a clear example with appropriate default args.
38-45: Good secondary button story implementationThe SecondaryButton story provides a clear example with appropriate default args.
47-54: Good tertiary button story implementationThe TertiaryButton story provides a clear example with appropriate default args.
56-64: Good icon button story implementationThe IconButton story demonstrates how to use an SVG icon with the button component.
66-74: Good loading button story implementation with disabled stateThe LoadingButton story effectively demonstrates both loading and disabled states together.
src/lib/form/slider.tsx (5)
12-20: Well-defined props interface with clear documentationGood job extending the AriaSliderProps interface and documenting the additional props with JSDoc comments.
31-35: Appropriate callback handlingThe component correctly passes the callback to the onChange handler of the AriaSlider.
36-83: Excellent slider implementation with accessible UIThe slider implementation is well-structured with appropriate ARIA labels and state handling. The conditional styling based on disabled state is comprehensive.
49-57: Good implementation of the filled trackThe filled portion of the track is correctly styled and sized based on the current value percentage.
84-101: Accessible min/max labelsGood implementation of the min/max labels with appropriate ARIA attributes for accessibility.
src/lib/progress/steps/bullet-circle.tsx (4)
2-2: Migrated from styled-components to clsx utilityGood migration from styled-components to utility classes using clsx for class name composition.
18-21: Clean success icon implementationThe success icon implementation uses appropriate utility classes for size and fill color.
22-42: Well-structured circle implementation with conditional stylingThe circle implementation correctly handles the active state with appropriate color changes for background, border, and text.
43-52: Proper vertical line implementationThe connecting line implementation correctly changes color based on the completed state.
src/stories/linear-progress.stories.tsx (1)
1-67: Excellent implementation of Storybook stories for LinearComponentThis well-structured file defines comprehensive stories showcasing the LinearComponent with different configurations. The three variants (Default, NonAnimated, WithTimerLabel) effectively demonstrate the component's capabilities with clear documentation comments that explain the purpose of each variant.
The meta configuration properly defines all controls for the component's customizable properties, making it easy for users to experiment with different values in Storybook.
src/stories/compactPagination.stories.tsx (2)
39-49: Well-implemented state management in Storybook storyGood implementation of React state management with the useState hook to maintain the current page state. This approach allows the pagination component to be interactive within Storybook while preserving the controlled component pattern.
62-73: Well-implemented callback for last page scenarioThe addition of
onCloseOnLastPagecallback demonstrates an important use case for the pagination component. This story effectively shows how the component handles reaching the end of pagination.src/lib/progress/steps/bullet.tsx (3)
25-31: Great accessibility improvements with ARIA attributesThe refactoring adds critical accessibility attributes to make the component more inclusive. The use of
aria-label,role="listitem",aria-current, andaria-disabledsignificantly improves screen reader compatibility.
38-49: Good semantic HTML with conditional stylingUsing an
<h2>element for the title improves document structure and semantics. The conditional text color based on active state is well implemented usingclsxfor cleaner code.
51-62: Enhanced accessibility for subitemsEach subitem now includes proper ARIA attributes that improve screen reader compatibility. The use of
aria-labelandaria-descriptionprovides context for users with assistive technologies.src/stories/breadcrumb.stories.tsx (2)
11-19: Well-configured control types for component propertiesThe argTypes configuration uses appropriate control types for each property - radio buttons for the variant selection and a boolean toggle for clickable. This makes the Storybook interface intuitive for users testing the component.
31-35: Good example data structure for breadcrumb itemsThe example items array shows a clear pattern of how breadcrumb items should be structured with both text and value properties, making it easy for developers to understand the expected data format.
src/stories/slider.stories.tsx (5)
1-6: Well-structured imports with proper TypeScript typingThe import structure is clear, separating Storybook types, utility imports, and component imports with appropriate spacing.
7-16: Well-configured Storybook metadataThe meta configuration is properly typed with
satisfies Meta<typeof SliderComponent>and includes appropriate autodocs tags and control settings for theisDisabledproperty.
20-21: Good type extension for StoryExtending the
StoryObjtype with theIPreviewArgsinterface ensures proper typing for theme and background controls that are defined in the Storybook preview.
22-34: Comprehensive default story configurationThe default Slider story provides a complete set of props including theme settings, disabled state, min/max values, and labels. The empty callback function works for demonstration purposes.
36-42: Well-documented formatter exampleThe JSDoc comment clearly explains the purpose of the formatter function in the FormattedValueSlider story, and the implementation shows how to properly extend the base story with additional props.
src/stories/radioGroup.stories.tsx (5)
1-9: Clean and organized importsThe imports are well-structured, separating React, Storybook types, utility imports, and component imports with appropriate spacing.
10-32: Comprehensive Storybook metadata with well-defined controlsThe meta configuration is properly typed and includes a complete set of controls for all the component's main properties, making it easy to test different configurations in Storybook.
36-49: Well-structured Vertical RadioGroup storyThe Vertical story demonstrates the default vertical orientation with appropriate props and test options.
51-63: Properly configured Horizontal RadioGroup storyThe Horizontal story effectively demonstrates the horizontal orientation option with the same set of options for easy comparison.
65-76: Clear demonstration of disabled option functionalityThe DisabledOptions story shows how to selectively disable individual radio options, which is useful for showcasing this specific capability.
src/lib/scrollbar.tsx (1)
3-4: Proper imports for React and utility functionsThe added imports for React and the
cnutility function support the component's refactoring from styled-components to utility-based CSS..storybook/preview.tsx (4)
1-12: Well-structured theme configuration with proper typesThe imports and type definitions are well-organized, properly setting up the theming infrastructure for Storybook. The IPreviewArgs type clearly defines the available theme and background options.
13-34: Effective theme decorator implementationThe decorator implementation is clean and effective, using React's useEffect to toggle the dark mode class on the document root and applying appropriate background classes based on the selected option.
35-48: Proper default args and control configurationThe default arguments and control configurations are well-defined, providing good defaults and appropriate control types for the theme options.
49-54: Clean configuration exportThe centered layout parameter and clean export provide a good foundation for all stories in the project.
src/stories/steps.stories.tsx (4)
1-24: Well-structured Storybook configuration for Steps component.This Storybook configuration effectively sets up interactive controls for the Steps component, allowing testing of both horizontal layout and current step index. The type extension with
IPreviewArgsensures consistency with other stories.
25-38: Good default story implementation with clear props.The default story provides a comprehensive example with appropriate theme, layout orientation, and an active middle step. The container width ensures proper rendering in the Storybook canvas.
40-47: Effective demonstration of vertical orientation.This story properly extends the default story and only modifies the necessary props for vertical orientation. The adjustment of container dimensions (height and width) is appropriate for this layout change.
49-59: Good example of hierarchical step structure with subitems.This story demonstrates the component's flexibility with nested step information, providing a realistic example of how the component might be used in a multi-level workflow.
src/stories/fileuploader.stories.tsx (5)
1-24: Well-organized Storybook setup for FileUploader component.The meta configuration provides appropriate controls for the component's key properties (
variantandisDisabled), enabling interactive testing in Storybook.
26-34: Basic FileUploader story implementation is good.The story provides essential props including theme, background, width, and a callback placeholder.
35-44: Informative demonstration of FileUploader with message.This story effectively shows how the component handles informational messages.
45-54: Good variant demonstration with warning state.This story shows how the component renders in a warning state, which is useful for testing different visual treatments.
56-66: Comprehensive example with file type restrictions.This story demonstrates the file type restriction feature with PNG images, providing a practical usage example with appropriate informational messaging.
src/lib/form/datepicker/arrow-button.tsx (3)
1-20: Good interface definition and imports for ArrowButton component.The component properly imports necessary dependencies and defines a clear interface for props. The ArrowButtonProps appropriately extends ButtonProps and includes the specific props needed for this component.
22-47: Well-implemented time handling logic.The component correctly handles time state with proper initialization and adjustment logic for hours and minutes. The useCallback hook is appropriately used for the event handler with proper dependencies.
48-79: Accessible button implementation with appropriate visual feedback.The component renders an accessible button with proper aria-label and visual feedback for different states (focus, hover). The arrow rotation based on action type provides clear visual indication of the button's purpose.
src/lib/dropdown/select/dropdown-button.tsx (4)
1-14: Good imports and dependencies setup.The component imports all necessary dependencies from react-aria-components and includes utility functions for class name management.
15-34: Well-structured ItemDisplayContainer component.This nested component correctly handles both the placeholder state and selected item rendering with appropriate styling.
36-52: Good button styling with proper state management.The DropdownButton component applies appropriate styling for various states including hover, focus, and disabled states. The component properly accesses the select state through context.
53-66: Effective rendering of selected value and dropdown indicator.The component correctly uses SelectValue to render the selected item and provides visual feedback with a rotating arrow to indicate the dropdown state.
src/lib/messages/alert.tsx (3)
6-7: Good addition of utility imports for CSS class composition.The addition of
cnfrom utils and theclsxlibrary enables efficient composition of conditional class names, aligning with the move toward utility-first CSS.
14-14: LGTM: Optional className prop provides good extensibility.Adding an optional
classNameprop allows consumers to extend or override default styling, which is a best practice for reusable components.
17-63: Well-structured refactoring from styled-components to utility classes.The implementation effectively uses Tailwind utility classes with conditional rendering based on variants. The component maintains good accessibility with semantic HTML and proper color contrast.
The use of
cnfor class merging ensures the externalclassNameprop is properly applied, and the grid layout provides consistent spacing between the icon and text.src/lib/dropdown/cascader/button.tsx (5)
1-11: Good imports and interface usage for component development.The component properly leverages React Aria components for accessibility and includes the appropriate type imports. The IItem import ensures type safety.
13-18: Component signature follows best practices.The component is correctly typed as a React FC with ButtonProps extension and an additional optional placeholder prop. The context usage is appropriate for accessing the dropdown state.
19-28: Well-structured Button implementation with utility classes.The button styling uses appropriate Tailwind classes for colors, transitions, states, and focus management. The spread operator for props allows flexibility while maintaining the core styling.
30-46: Good implementation of dynamic content based on selection state.The component properly handles placeholder vs. selected states and uses appropriate text styling for each case.
47-53: Nice touch with the rotating arrow icon.The arrow icon rotation on dropdown open state provides good visual feedback to users. The conditional class application using clsx is well implemented.
src/lib/dropdown/select/simple-button.tsx (3)
7-11: Clear interface definition with appropriate props.The interface extends ButtonProps and includes specific props for the SimpleButton functionality. The isOpen, small, and placeholder props provide good flexibility.
19-27: Well-structured Button with appropriate base styling.The Button component is styled with appropriate utility classes for cursor states, focus handling, and basic layout.
28-71: Good use of render props for dynamic styling based on component state.The component effectively uses the Button render prop to access hover and disabled states, applying appropriate styling conditionally. The small prop toggle between text sizes is well implemented.
src/lib/dropdown/cascader/select-button.tsx (4)
9-12: Well-defined interface that reuses types from parent components.The interface correctly defines the props needed for this component, reusing the callback type from the parent IDropdownCascader interface.
14-20: Good handling of selected item retrieval from context.The component correctly uses SelectStateContext and properly handles the case when selectedKey is undefined or null.
21-28: Appropriate container styling with responsive adjustments.The container div uses proper border and padding classes, with responsive justification that changes between mobile and desktop views.
29-43: Well-implemented button with appropriate state management.The Button component correctly handles:
- Setting the selected key in state
- Calling the callback with the selected item
- Closing the dropdown
- Conditionally rendering text based on selection
- Disabling when no selection exists
This provides a complete and accessible user experience.
src/lib/form/datepicker/time-control.tsx (5)
1-9: Well-structured imports and interface definition.The component imports necessary React components and utilities, and properly defines a typed interface for props.
10-20: Good accessibility implementation with clear component structure.The component follows best practices by using semantic HTML and proper ARIA attributes. The header section is clearly defined with appropriate styling.
21-30: Clean implementation of the upper arrow controls.The component uses proper layout and properly passes the minValue prop to the ArrowButton components.
31-56: Well-implemented time display with proper accessibility.The DateInput implementation correctly filters and displays only hour and minute segments with appropriate styling for focus and hover states. The colon separator is handled elegantly.
57-66: Consistent implementation of lower arrow controls.The lower section mirrors the upper controls, maintaining consistency in the UI.
src/stories/searchbar.stories.tsx (4)
1-29: Well-structured Storybook configuration with proper typing.The story setup follows Storybook best practices with proper metadata, controls, and TypeScript typing.
31-37: Clear default story implementation.The Default story establishes a good baseline with appropriate theme and styling.
39-44: Good pattern of extending the default story.The Labelled story effectively extends the Default story's args, demonstrating good composition practice.
46-68: Well-implemented form integration example.The Required story demonstrates proper form integration with the Searchbar component, including:
- Form submission handling with preventDefault
- Proper button configuration
- Correct isRequired prop usage
src/stories/custom-timeline.stories.tsx (4)
1-18: Properly structured Storybook metadata and typing.The story configuration follows Storybook best practices with appropriate component reference, title, and tags.
19-39: Clear implementation of basic timeline story.The Timeline story provides a good example of the component's basic usage with appropriate props.
41-70: Good demonstration of different timeline states.The TimelineStates story effectively showcases the component's different states (default, disabled, loading) with helpful comments.
72-108: Excellent example of custom party content.The TimelineCustomParty story demonstrates how to use JSX elements for custom party content, including styled text and interactive links.
src/lib/index.ts (3)
1-1: Good practice to import global CSS in the entry point.Adding the global CSS import ensures styles are properly loaded when the library is used.
17-22: Well-structured form field component exports.The addition of specialized field components (NumberField, BigNumberField, TextField) improves the API by providing more specific components instead of a generic Field component. The TextArea naming is more consistent with React component naming conventions.
26-26: Updated Radio component path reflects architectural changes.The change to import from "./form/radio-group" suggests an architectural improvement, likely moving to a more comprehensive radio group implementation with better accessibility.
src/stories/number-field.stories.tsx (2)
1-102: Well-structured Storybook stories with good variation examplesThis new file provides comprehensive examples of the NumberField component with various configurations. The stories follow good Storybook practices by:
- Providing a detailed meta configuration with appropriate controls
- Showing different variants and states of the component
- Using TypeScript for proper type safety
- Demonstrating form integration with the Required story
85-101: Form handling is correctly implementedThe form submission handler properly prevents default behavior with
e.preventDefault(), which is essential for Storybook demonstrations to avoid page reloads or unintended form submissions.src/stories/dropdown-select.stories.tsx (3)
37-51: LGTM: Comprehensive base story configurationThe base story provides a good foundation with default items, placeholder, and callback function. The items array is well-structured with diverse properties that showcase the component's capabilities.
52-86: Good use of story variants with helpful JSDoc commentsThe story variants (DefaultValueSelect, SimpleSelect, SmallSimpleSelect, DisabledKeysSelect) effectively demonstrate different component configurations. The JSDoc comments provide helpful context about what each variant demonstrates.
89-111: Form integration matches pattern from other componentsThe RequiredSelect story follows the same pattern as seen in other form component stories, with proper form submission handling and consistent button styling. This consistency across components is excellent for maintainability.
src/lib/form/searchbar.tsx (3)
3-21: Good use of React Aria components for accessibilityThe component properly leverages React Aria components (SearchField, Input, Label, Group) which provides built-in accessibility features. The import structure is clean and well-organized.
14-21: Well-documented props interface with helpful JSDocThe SearchbarProps interface is clearly defined with appropriate JSDoc comments for the inputProps, including a link to React Spectrum documentation for further reference.
31-62: Clean implementation with good conditional renderingThe component properly handles conditional rendering of the label and uses utility-first CSS effectively. The positioning of the search icon is well-implemented, and the class composition with
cnandclsxis clean and maintainable.src/lib/form/number-field.tsx (3)
22-32: Well-defined props interface with good documentationThe NumberFieldProps interface clearly extends AriaNumberFieldProps with additional properties. The JSDoc comment for inputProps provides helpful reference to the React Spectrum documentation.
57-153: Excellent implementation of input with increment/decrement buttonsThe number field implementation follows best practices:
- Uses render props pattern to access hover state
- Shows increment/decrement buttons only when hovered and not disabled
- Properly handles different visual states based on variants
- Correctly positions icons and buttons with flexible spacing
- Uses consistent styling patterns with utility classes
154-172: Good handling of message display with variant stylingThe message display is well-implemented with:
- Consistent margin and styling
- Variant-specific text colors
- Conditional info icon rendering
- Proper slot assignment for accessibility
src/lib/form/text-area.tsx (5)
1-16: Well-organized imports with clear separation of concerns.The imports are logically grouped: React core, SVG assets, react-aria-components, and utilities. This organization makes the code more maintainable.
18-31: Well-defined TypeScript interface with good documentation.The interface extends
TextFieldPropsand includes proper JSDoc documentation with links to the React Aria documentation. The props are clearly defined with descriptive comments explaining their purpose, especially for the resize functionality.
33-43: Clean component definition with good default values.The component includes JSDoc documentation and uses proper TypeScript typing with
Readonly<TextAreaProps>to prevent accidental mutations. Default values for resize options are explicitly set tofalse.
44-75: Accessible implementation with conditional rendering and appropriate class composition.The component properly uses React Aria components for accessibility, conditionally renders the label, and applies appropriate CSS classes using the
cnutility function. The class composition is well-structured, using object syntax for conditional classes based on variants.
76-103: Well-implemented status message with appropriate icons.The message display includes proper semantic structure using the React Aria
Textcomponent with the correctslot="description"attribute. The variant-specific icons and styling are conditionally rendered based on the variant prop.src/lib/display/small.tsx (3)
4-6: Good addition of utility imports for className management.The imports of
cnandclsxalign with the broader refactoring effort from styled-components to utility-first CSS. TheLabelcomponent from react-aria-components will enhance accessibility.
8-14: Improved component signature with explicit typing.The component has been refactored from an arrow function to a named function with explicit
Readonly<DisplayIconProps>typing, which is a good practice for preventing accidental props mutation. The addition of an optionalclassNameprop allows for flexible external styling.
15-36:❓ Verification inconclusive
Enhanced accessibility and styling with utility classes.
The component now uses proper semantic HTML elements with utility classes, improving both accessibility and maintainability. The
aria-labelledbyattribute on theh2element appropriately references the label's ID, creating a programmatic association between the label and text.However, there's a potential issue with using the
labelvalue directly as an ID.
🏁 Script executed:
#!/bin/bash # Check if label values contain characters that would make them invalid HTML IDs rg "DisplaySmall\(" -A 10 | grep -E "label\s*=\s*[\"\']" | grep -E "[^\w\-:]"Length of output: 105
Below is an updated shell script to re‐verify the issue (using a modified regex that avoids the previous “invalid range” error). Please run this script and check if any output is produced—any output would indicate that the extracted label contains characters outside the allowed set for HTML IDs.
Action Required:
- Manual Verification Needed: Please run this script to confirm whether the
labelvalues may contain any invalid characters. If the script produces any output, consider sanitizing thelabelvalue before using it as an HTML ID.
🏁 Script executed:
#!/bin/bash # Re-run the check on label values from DisplaySmall to detect any invalid characters for HTML IDs. # This script extracts the label attribute value and filters for any characters outside: letters, digits, colon, underscore, or hyphen. rg "DisplaySmall\(" -A 10 | \ grep -E "label\s*=\s*['\"]" | \ sed -E "s/.*label\s*=\s*['\"]([^'\"]+)['\"].*/\1/" | \ grep -E "[^:[:alnum:]_-]"Length of output: 268
Enhanced accessibility verified—please manually confirm HTML ID validity in labels.
The changes in
src/lib/display/small.tsxeffectively improve semantic structure and accessibility by correctly associating the label with its corresponding text usingaria-labelledby. Automated checks for invalid characters in thelabel(used as an HTML ID) did not return any results, suggesting that the labels likely conform to valid HTML ID standards. However, the automated validation encountered issues (e.g., regex errors), so please manually verify that thelabelvalues do not include characters (such as spaces or other special symbols) that could invalidate them as HTML IDs.src/lib/progress/steps/horizontal-bullet.tsx (3)
32-54: Enhanced accessibility with ARIA attributes and semantic structure.The container div now includes appropriate ARIA attributes (
aria-label,role,aria-current,aria-disabled) that improve the accessibility of the step indicator. The conditional class names usingclsxeffectively replace the styled-component approach.
55-63: Well-structured responsive layout with utility classes.The text wrapper div effectively uses Tailwind's responsive classes to handle different layouts on smaller vs. larger screens. The reference to
textReffor dynamic height calculation is maintained from the previous implementation.
64-74: Improved heading with semantic structure and ARIA association.The
h2element now has a unique ID and uses appropriate text styling classes based on the active state. This creates a more accessible and semantically correct heading.src/lib/form/radio-group.tsx (6)
1-13: Well-organized imports with appropriate dependencies.The component imports the necessary React Aria components for accessibility and the utility functions for class name management.
14-29: Clear interface definitions with good documentation.The interfaces extend the React Aria interfaces and include proper JSDoc documentation with links to the React Aria documentation. The
RadioOptioninterface appropriately requires alabelproperty for each option.
31-41: Well-documented component with clear prop defaults.The component includes JSDoc documentation with a link to the React Aria documentation and sets a reasonable default for the
smallprop.
42-61: Accessible group structure with orientation support.The component uses the React Aria
RadioGroupcomponent for accessibility and includes comprehensive conditional styling for both horizontal and vertical orientations. The group label is properly rendered as a semanticLabelcomponent with appropriate styling.
62-101: Well-implemented radio buttons with comprehensive state styling.The mapping of options to radio buttons is well-structured, and the component uses render props to access various interaction states (
isSelected,isHovered, etc.). The conditional styling based on these states is comprehensive and visually consistent. The use of pseudo-elements for the radio circle visualization is a clean approach.
102-109: Appropriate error handling with accessible error message.The component includes the React Aria
FieldErrorcomponent with proper styling and the ability to pass custom props throughfieldErrorProps.src/lib/container/card.tsx (2)
1-2: Imports look good.
Basic React and utility imports are appropriately organized.
9-24: Straightforward utility-based styling approach.
The Tailwind-like CSS classes and conditional logic for rounding and hover effects are well-structured. The...propsspread ensures good extensibility.src/lib/form/bignumber-field/index.tsx (5)
22-33: Functional component signature is well-defined.
HandlingisDisabled,isReadOnly, and an optionalpropIdensures flexibility.
39-47: Custom hook integration is clean.
useBigNumberFieldprovides cohesive ARIA-compliant props. Great job abstracting complexity into a separate hook for maintainability.
50-81: Thoughtful Tailwind utility usage.
The combination ofcnandclsxfor dynamic classes based on state and variant is concise. Thefocusandplaceholderstates are well-handled.
138-157: Smart separation of variant icons from custom icons.
Allowing either a variant-driven icon or a user-provided icon fosters reusability.
161-179: Message section is clear and accessible.
Displaying error messages viaerrorMessagePropsor fallback todescriptionPropsis a nice accessibility pattern.src/lib/form/checkbox.tsx (2)
1-2: Imports are standard.
The combination of React andreact-aria-componentsfor improved accessibility is consistent with the rest of the refactoring.
15-57: Usage of AriaCheckbox for accessibility.
IntegratingAriaCheckboxwith dynamic styling is well-executed. TheisSelectedstate is handled elegantly, including the checkmark animation.src/lib/progress/timeline/index.tsx (6)
3-4: No issues with importingclsxand thecnutility.
These imports help maintain consistent and consolidated class handling in the component.
14-14: Introducing aclassNameprop is a good addition.
It allows consumers of the component to add custom styles more flexibly.
17-18: Clear and concise component documentation.
The doc comment aids maintainability by clarifying the component’s purpose.
21-26: Nice accessibility enhancements witharia-labelandrole="list".
This labeling and role attribute help screen readers interpret this as a timeline for users.
28-39: Well-structured iteration over timeline items.
Propagatingitemproperties and handling transformations with Tailwind classes viaclsxis clear and straightforward.
53-54: Default export is properly defined.
No issues found.src/lib/messages/push.tsx (11)
6-7:cnimport andButtonusage fromreact-aria-componentslook good.
TheButtoncomponent improves accessibility out of the box.
10-10: Designating explicit variant options.
This union type forvariantis a good approach for type safety.
17-17:classNameprop usage is fine.
This prop helps extend styling as needed.
20-20: Defaultingsmalltofalseis reasonable.
No issues observed, and it simplifies usage by not requiring an explicit prop.
25-26: Concise destructuring to access props and maintain clarity.
It cleanly sets up local usage ofvariant,title,msg, etc.
30-45: Good usage of Tailwind utility classes for dynamic sizing.
Using conditional arrays incnneatly organizes the styling differences forsmallvs. default.
48-50: Properly rendering icons based on thevariant.
Straightforward logic, easy to read.
51-51: Excellent positioning for main text with margin-left.
Ensures icons and text spacing is consistent.
55-56: Correct usage of heading element.
Using<h2>for the title helps with semantic structure.
62-68: Use ofreact-aria-components<Button>for the close icon is commendable.
onPressis more accessible than a plain click event.
69-71: Wrapper structure is consistent and complete.
No issues found in the final return statement.src/lib/copiable/index.tsx (11)
5-6: No issues withcnandButtonimports.
They streamline class handling and improve accessibility.
7-7: EnsuringButtonfromreact-aria-componentsis beneficial for a11y.
No concerns here.
9-9: Clear documentation oncopiableContent.
Good practice clarifying how it is used.
11-11: Optionalinfoprop is well handled.
Prevents complexity when no tooltip text is needed.
13-15: Logical docstring foriconPlacement.
Defaults torightfor consistent usage across the codebase.
31-39: Good approach to defaulticonPlacement = "right"and keep the component flexible.
Spreading...propsalso ensures any extra attributes are forwarded.
53-60: Neat inline-flex layout with directional classes.
Thegap-2helps visually distinguish text from the icon.
62-68: Tooltip usage is straightforward and consistent.
isCopiedstate toggling is handled nicely.
69-75: Accessible button usage for copying.
onPressis properly disabled when already copied, preventing repeated triggers.
76-77: Proper container closing and completed returns.
All state and logic are cleanly encapsulated.
79-79: Export is well-defined.
No issues with the final default export.src/lib/dropdown/select/index.tsx (12)
1-9: Imports for React,clsx, andreact-aria-componentsare correct and clearly define dependencies.
No issues here.
10-14: Imports for the local files (SimpleButton,IItem,DropdownButton, etc.) look correct.
They keep the module structure well organized.
16-19: ExtendingAriaSelectPropsensures the component remains compatible with standard select behaviors.
Defining acallbackto receive a selected item object is a neat addition.
21-23: Allowinglabeland optionalsimpleButton/smallButton.
Keeps usage flexible for different dropdown styles.
26-30: Clear component documentation.
Helps maintain clarity on usage and props.
31-36: Consistent destructuring of props.
Reduces boilerplate and keeps the function signature concise.
37-44: Callback function properly locates the selected item by matchingselectedKey.
This is a straightforward and robust approach.
47-51: ApplyingclassNameandonSelectionChangewithAriaSelectis well-structured.
Merging everything incn("flex flex-col gap-1", className)fosters consistent styling.
53-70: Excellent conditional rendering withinAriaSelect.
- The label is displayed only when defined.
FieldErroris used for error feedback, which improves usability.DropdownContaineris well-encapsulated.
72-72: No issues in the final return block.
It properly wraps children in<AriaSelect>.
73-73: Export statement is correct.
No concerns here.
75-75: Default export declared cleanly.
Implementation is complete and consistent.src/stories/text-field.stories.tsx (5)
42-49: Looks good as a default story.
No concerns with the default textual usage and class handling.
51-56: Story variant is appropriate.
Showcasing the "success" state is consistent with the provided variants.
58-63: Well-structured custom icon example.
Demonstrates how to substitute the default icon with a custom SVG effectively.
65-70: Label control is consistent.
Including a labeled version helps highlight accessibility and clarity.
72-78: Good demonstration of descriptive messaging.
This showcases how to supply user guidance or additional details below the field.src/lib/display/icon.tsx (2)
3-5: Imports align with the new utility-first styling approach.
Leveragingcnandclsxfor class composition, andreact-aria-componentsfor accessible labeling is consistent with the broader library refactor.
11-11: Optional className prop.
Allowing aclassNameoverride is a good practice for library consumers to provide additional styling or override defaults.src/lib/progress/timeline/bullet.tsx (6)
2-5: Use ofcolorRegexandisUndefinedis clear.
These imports neatly handle dynamic coloring and undefined checks for thepartyprop or variant.
22-22: OptionalclassNameprop is consistent with library patterns.
This ensures outside consumers can apply layout or styling overrides as needed.
31-45: Robust ARIA attributes.
You're correctly specifying roles, states (aria-current,aria-busy,aria-disabled), and an accessible label for the overall list item. This fosters an inclusive user experience for assistive technologies.
64-65: The heading andaria-labelusage.
Defining an aria-label for the heading helps clarify the timeline item’s title for screen readers.
75-95: Dynamic party text color handling is effective.
Applying a fallback color class forpartytext and defaulting to a known color if the variant is undefined ensures a consistent visual representation. ThecolorRegexusage for custom hex color is a neat extension.
109-115: Subtitle is well-handled.
Using a<small>tag with appropriate text classes for the subtitle is aligned with typical timeline item design patterns.src/lib/form/datepicker/display-button.tsx (3)
13-17: Context-driven date picker state logic is clear.
Tapping intoDatePickerStateContextand exposing anopen()method is a neat approach to reduce prop-passing overhead and keep the code modular.
19-27: Hover and focus states highlight the control well.
Border, background, and error highlighting are well-managed with utility classes.
28-43: Segment-based date editing is accessible.
UsingDateSegmentto handle placeholders and a focus style is a best practice for accessible date input controls.src/lib/form/text-field.tsx (1)
30-114: The TextField implementation looks good and uses React Aria components correctly.The component correctly implements a text field with accessibility features using React Aria components, properly handles different variants, and conditionally renders status icons and messages. The code structure is clean and follows best practices.
src/styles/theme.css (1)
1-70: Well-structured theme variables with light and dark mode support.The theme variables are well-organized and provide comprehensive color, shadow, and transition definitions for both light and dark modes. The naming convention is consistent and follows the project's namespace approach.
src/lib/dropdown/cascader/item.tsx (2)
14-84: Well-implemented accessible cascader item with proper state handling.The component correctly uses React Aria's
TreeItemContentto handle accessibility and state management for the cascader item. The implementation properly handles different states (selected, hovered, expanded, disabled) and provides appropriate styling for each state.
48-48:❓ Verification inconclusive
Verify the continuePropagation method.
The
e.continuePropagation()method is not a standard DOM event method. Verify if this is a custom method provided by react-aria-components, otherwise it might need to bee.stopPropagation()to prevent event bubbling or something else depending on the intended behavior.
🏁 Script executed:
#!/bin/bash # Check if continuePropagation is a custom method in react-aria-components # Search for the method name in the project rg -i "continuePropagation" --type ts --type tsxLength of output: 76
I'll re-run the search using file glob patterns (instead of relying on predefined file types) to cover both ".ts" and ".tsx" files. This should help us verify if the
continuePropagationmethod is defined anywhere in the project.Please execute this script and share the output for further verification.
🏁 Script executed:
#!/bin/bash # Search for the "continuePropagation" method in TypeScript and TSX files using file glob patterns. rg -i "continuePropagation" -g "*.ts" -g "*.tsx"Length of output: 244
Attention: Verify the Custom Event Propagation Handling
It appears that
e.continuePropagation()is not a standard DOM event method and no definition for it was found in the codebase. Please verify whether this method is intended as a custom implementation from react-aria-components or if it should be replaced with the standarde.stopPropagation()to achieve the desired event-handling behavior.
- File:
src/lib/dropdown/cascader/item.tsx- Line: 48
src/lib/dropdown/select/item.tsx (1)
25-58: Well-structured select item with appropriate accessibility features.The component correctly uses React Aria's
ListBoxItemfor accessibility and implements appropriate styling for different states. The code handles optional icons and dot indicators well, and the structure follows React best practices.src/stories/bignumber-field.stories.tsx (3)
1-55: LGTM! Good structure and organization of the Storybook metadata.The component meta configuration is well-organized with comprehensive controls for all props, making it highly interactive for Storybook users.
58-64: LGTM! Clear default story setup.The default story provides a good baseline with essential props that will help users understand the component's basic usage.
66-177: LGTM! Comprehensive set of examples showcasing various features.The stories cover a wide range of functionality including labels, min/max constraints, large number handling, formatting options, validation states, and disabled/readonly modes - providing excellent documentation and testing of the component capabilities.
🧰 Tools
🪛 Biome (1.9.4)
[error] 156-156: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
src/stories/text-area.stories.tsx (4)
1-54: LGTM! Well-structured story configuration.The metadata setup with comprehensive controls follows the same pattern as other form components, maintaining consistency across the codebase. Good inclusion of key properties like resize options that are specific to text areas.
56-68: LGTM! Clear examples of basic variants.The Variant and Labelled stories match the same patterns used in text-field.stories.tsx, maintaining a consistent API across form components.
70-78: LGTM! Good demonstration of text area-specific features.The Resizable story effectively showcases the unique resizing capabilities of the text area component, an important differentiation from other form inputs.
80-102: LGTM! Form integration example follows established pattern.The Required story demonstrates form integration and validation exactly as implemented in other form component stories, maintaining consistency in API usage patterns.
src/stories/dropdown-cascader.stories.tsx (2)
1-74: LGTM! Well-structured dropdown cascader story with complex example data.The component metadata and base story are well implemented with a good example of nested hierarchical data structure that demonstrates the cascading selection capabilities.
92-115: LGTM! Good form integration example.The RequiredSelect story effectively demonstrates how the component integrates with React Aria's Form component for validation, following the same pattern used in other form components.
src/lib/progress/timeline/custom.tsx (3)
2-3: LGTM! Improved imports and dependencies.Clean refactoring to remove styled-components dependencies and add the utility function for class name merging.
5-15: LGTM! Interface simplification and added className prop.Good removal of unused interfaces and addition of the className prop for better component customization.
17-42: LGTM! Improved accessibility and styling approach.Excellent refactoring to replace styled-components with utility-first CSS classes. The addition of ARIA attributes (
aria-label="Timeline"androle="list") improves accessibility significantly.src/lib/progress/timeline/spine.tsx (2)
1-1: Import patterns and utility update look goodThe updated imports and exports are well-structured, importing
clsxfor conditional class name handling and theisUndefinedutility. ThecolorRegexis properly exported.Also applies to: 3-5
38-69: Great refactoring to Tailwind CSSThe component has been effectively refactored from styled-components to Tailwind CSS utility classes. The implementation correctly handles:
- Conditional rendering of the top line based on
topHeight- Flexible display of either a custom icon or a styled circle
- Conditional styling based on the variant prop
- Proper inline styling when variant is a hex color
The flex layout is well-structured and the conditional class application using
clsxis appropriate.src/lib/pagination/standard.tsx (4)
1-7: Good import structure with React Aria componentsThe imports are well-organized, bringing in React Aria's
Buttoncomponent for accessibility improvements and utilities likecnandclsxfor class name handling.
8-36: Well-implemented PageButton component with conditional stylingThe PageButton component is nicely encapsulated with proper TypeScript typing. It effectively:
- Extends React Aria's Button props and adds a selected state
- Implements conditional styling based on selection state
- Uses a clean pattern for hover states and color transitions
- Properly forwards all props to the underlying Button component
This approach creates a consistent button experience throughout the pagination component.
37-46: Good documentation for new propsThe added JSDoc comments explain the new
disableNumbersandhideNumbersprops clearly, which is helpful for component users.
48-95: Excellent refactoring to React Aria and TailwindThe StandardPagination component has been properly refactored to:
- Use React Aria's Button component via the PageButton wrapper
- Apply Tailwind CSS utility classes for styling
- Handle conditional rendering of number buttons
- Implement proper event handling via onPress instead of onClick
- Apply appropriate disabled states
The SVG arrow styling is particularly well done with conditional classes based on button state.
src/lib/display/large.tsx (3)
1-5: Good modernization of importsThe imports have been updated to include React Aria's
Labelcomponent and thecnutility function, which aligns with the codebase's move to utility-first CSS and accessibility components.
7-13: Improved type safety with Readonly propsThe component signature has been updated to a named function with
Readonly<DisplayIconProps>typing, which is a good practice for ensuring immutability of props.
14-37: Well-implemented accessible display componentThe DisplayLarge component has been effectively refactored to:
- Use a Card component with proper Tailwind utility classes
- Position the icon absolutely with appropriate size constraints
- Use semantic HTML with h1 for the main text
- Improve accessibility by using React Aria's Label component with proper aria-labelledby association
- Handle className prop correctly for component extensibility
The layout and styling are clean and responsive.
src/lib/progress/linear/index.tsx (5)
1-9: Good module organization with React Aria componentsThe imports are well-structured, bringing in React Aria's ProgressBar and Label components for accessibility improvements along with utility functions for class handling.
11-20: Well-documented props interfaceThe LinearProps interface is clearly defined with good JSDoc comments explaining the purpose of each prop. The extension of ProgressBar props with appropriate omissions shows good attention to component API design.
22-39: Optimized progress calculation with useMemoThe component effectively uses useMemo to calculate the progress percentage only when relevant values change. The default values for minValue and maxValue are sensibly set, and the function is properly typed with Readonly props.
40-82: Good SVG implementation with conditional animationThe SVG progress bar implementation is well done:
- Creates two paths - one for the background track and one for the filled portion
- Properly calculates the filled portion based on progress
- Uses CSS animation conditionally based on the animated prop
- Handles edge cases like empty progress values
The stroke-dasharray technique for animation is much cleaner than using JavaScript-based animations.
82-94: Well-structured timer display with iconThe timer display is cleanly implemented with:
- Conditional rendering based on timerText prop
- Good alignment of the hourglass icon and text
- Proper semantic structure and styling
- Appropriate text color for timer emphasis
The flex layout ensures consistent alignment of the icon and text.
src/lib/form/switch.tsx (2)
1-5: Imports look good and improve clarity.
Code appears to correctly importreact-aria-componentswith a renamedSwitchfor clarity. No issues found here.
14-41: Implementation aligns excellently withreact-aria-components.
This is a clean and accessible approach. Using the render prop ({ isSelected }) is a best practice to ensure ARIA state is accurately reflected. The utility classes incn()also look consistent with the rest of the codebase.README.md (5)
17-29: Overview sections are well-documented.
The introduction and features convey clear advantages of using the library. No issues found.
30-41: Components list is well-structured and descriptive.
Each section is helpful for new users.
44-79: Installation and setup instructions are detailed and user-friendly.
Good job outlining usage examples and steps.
80-110: Theme usage guidance is thorough.
Providing instructions on overriding theme variables is very helpful to end-users.🧰 Tools
🪛 LanguageTool
[grammar] ~89-~89: It seems that a pronoun is missing.
Context: ...variables here. If want to override or edit the defined th...(IF_VB)
113-146: Development and code quality sections are comprehensive.
Clear instructions on how to build and test the library locally.eslint.config.mjs (3)
1-22: Import structure is concise and modern.
Using@eslint/compatto fix up plugin rules is a good practice for consistent linting behavior.
26-38: Lint configuration extensions appear well-structured.
The recommended and security legacy configs cover a broad range of rules. Looks good.
104-105: Confirm the rationale for disabling certain security rules.
Disablingdetect-object-injectionanddetect-non-literal-fs-filenamecan open potential security risks, depending on usage patterns. Ensure these are intentionally disabled.Would you like a script to scan for potential object injection usage or non-literal file paths in your codebase to confirm it is safe?
src/lib/button/index.tsx (2)
2-9: Imports look consistent and align with the new utility-based approach.All imported modules appear to be in use, and the transition from styled-components to
react-aria-componentsplus thecnutility is well-structured.
26-35: Interfaces validate the props clearly.The
ButtonPropsextension fromAriaButtonPropsand the omission of$loadingappear intentional and help ensure only permissible props are exposed. This design can reduce confusion and strengthen component reusability.src/lib/pagination/compact.tsx (3)
5-7: Switch toreact-aria-componentsmeets accessibility standards.The imports of
cn,ButtonProps, andclsxsuggest a consistent approach to utility classes. The overall structure for pagination is clear.
9-31:ArrowButtonsuccinctly incorporates accessibility traits.The small wrapper around
Buttonproperly applies class names and hover states. No major issues are noted here.
43-86:✅ Verification successful
Verify no conflicting
onClickusage remains.The switch to
onPressforincrementPageanddecrementPageis correct forreact-aria-components. Ensure no older code referencesonClickinstead ofonPress.Use this script to confirm no leftover
onClickreferences in pagination components:
🏁 Script executed:
#!/bin/bash rg -A4 "onClick" src/lib/paginationLength of output: 35
Confirmed: The pagination component correctly uses
onPresswith no residualonClickreferences.
- The search in the
src/lib/paginationdirectory produced no output, indicating that all usages of event handlers now follow theonPressconvention as required byreact-aria-components.- No further legacy
onClickreferences were detected, so no additional changes are necessary.package.json (2)
80-85: Peer dependencies align with Tailwind-based refactor.Declaring
@tailwindcss/postcssandtailwindcssinpeerDependenciesis consistent with the shift from styled-components to utility-first CSS. This helps ensure the parent apps have the correct toolchain installed.
3-3:❓ Verification inconclusive
Validate major version bump.
Upgrading from 2.x to 3.0.0 is a breaking change. Confirm that the consuming packages and environments are ready for this major version shift.
Please ensure no dependent code relies on the older version constraints by searching and auditing references:
🏁 Script executed:
#!/bin/bash rg "@kleros/ui-components-library@2" --ignore-caseLength of output: 50
Major Version Upgrade Verification: Manual Confirmation Needed
Upgrading from 2.x to 3.0.0 is a breaking change. Our automated search for references to
@kleros/ui-components-library@2returned no matches. However, to confidently proceed:
- Action Required: Manually verify that no consuming packages or lock files (e.g.,
package-lock.json,yarn.lock) reference the older version.- Next Steps: Double-check across the entire codebase and dependency declarations to ensure that all consuming environments are prepared for the major version bump.
src/lib/dropdown/cascader/index.tsx (3)
1-9: Refactor toreact-aria-componentsimproves accessibility.Moving to
Select-based building blocks ensures proper keyboard, focus, and screen reader support with minimal boilerplate.
14-19: Confirm callback requirements.The
callbackprop is required; validate that upstream components or consumers always supply it. Otherwise, consider marking it optional or providing a no-op default.
33-63: Nicely structured cascader flow.The code neatly wraps label handling, field error rendering, and the dropdown container’s nested items. This approach is consistent with the new utility-based design patterns in the PR.
src/lib/breadcrumb.tsx (1)
15-29: Clean usage of utility classes inContentcomponent.
This component follows best practices for composable, reusable UI elements. No issues found.src/lib/dropdown/cascader/dropdown-container.tsx (3)
16-22: Good approach reusing partial props.
UsingPick<IDropdownCascader, ...>ensures consistency with the main interface while limiting scope. No concerns here.
42-44: Automatic expansion on default selection.
WhendefaultSelectedKeyis set andisOpenis true, the code expands parent keys. This is user-friendly. Just ensure performance is acceptable for large trees.
80-157: Overall selection & expansion logic.
The combination ofdisallowEmptySelectionplus dynamic scrolling on each selection offers a smooth user experience. No immediate issues seen.src/lib/progress/circular/index.tsx (2)
5-16: Well-defined prop interface.
Defining progress withvalue,minValue,maxValue, and an optionalanimatedflag is clear. No issues here.
43-46: Accessible progress bar logic.
Usingreact-aria-componentsfor the progress bar ensures accessibility. The CSS-based animation is straightforward, and the fallback text display ({progress}%) also looks good.Also applies to: 48-82
src/lib/form/datepicker/index.tsx (14)
1-11: Imports look good.
No immediate concerns with these imports; they appear to be properly utilized in the component.
12-16: Additional imports verified.
All imported subcomponents (CustomButton, Calendar, TimeControl) and utilities are used appropriately.
18-18: Utility import confirmation.
cnis a clear approach for merging Tailwind classes and handling conditional styling. No issues found.
20-28: Well-structured interface.
TheDatePickerPropsinterface is clearly defined, and the omission ofgranularity,hourCycle, andfirstDayOfWeekfrom the underlyingDatePickerPropsis a suitable approach to maintain control within this custom component.
30-44: Default parameters and prop forwarding look correct.
Usingnow(getLocalTimeZone())fordefaultValueand conditionally settinggranularitybased on thetimeprop is a neat approach. Everything is consistent.
46-47: No issues with render prop usage.
Destructuring thestateobject from the render function is standard usage forreact-aria-components.
49-52: Conditional label classes.
Hiding the label when it's not provided is straightforward and user-friendly.
54-54: Label fallback.
Defaulting the label to "Date" when not specified is sensible.
57-58: Display and error components.
RenderingDisplayButtonandFieldErroris clean and keeps form feedback visible.
60-66: Popover styling logic seems fine.
Conditionally applying width classes whentimeis true is clear and well-organized.
68-75: Dialog layout with optional time control.
PassingminValueto<TimeControl>is consistent, likely ensuring time constraints align with the date constraints.
86-91: Select button usage confirmed.
Closing the popover on "Select" click is a solid user experience.
93-97: Popover closure and final render.
All structural elements align withreact-aria-componentsbest practices.
99-99: No additional concerns.
The component definition wraps up cleanly.src/lib/form/bignumber-field/useBigNumberField.tsx (8)
1-11: Initial imports and BigNumber usage.
All imported hooks appear to be needed for the custom field logic. Looks well-prepared for advanced numeric handling.
12-29: FormatOptions interface is comprehensive.
Providing extensive customization (prefix/suffix, grouping, decimals) is helpful for diverse numeric requirements.
31-66: BigNumberFieldProps type checks.
Defines clear, flexible props (including min, max, step, and event handlers). Good coverage of edge cases.
68-79: Default format.
Applying a standard decimal separator, group separator, and prefix/suffix ensures a consistent base. No issues found.
80-146: Hook initialization and BigNumber configuration.
Using auseEffectfor dynamicBigNumber.configbased onformatOptionsis straightforward.
148-180: Controlled/uncontrolled logic.
The approach to support bothvalue(controlled) anddefaultValue(uncontrolled) is well-structured, with checks that parse and store the initial BigNumber state.
182-234: Arithmetic and clamping.
Increment/decrement logic looks correct, and boundary checks (min/max) are effectively enforced. Good defaulting withstep = "1".
236-355: Formatting approach with debouncing.
The 3-second delay beforetoFormat()reactivates is a nice balance for user input. Implementation is robust and avoids excessive re-rendering.src/lib/form/file-uploader.tsx (15)
1-1: Initial import and state usage.
UsinguseState<File>()is appropriate for single-file handling.
8-8: Reusingcnutility.
Merging utility classes withcnis consistent with the rest of the codebase.
9-15: File-related imports.
FileTrigger,DropZone, andFileDropItemfromreact-aria-componentsare used correctly, promoting accessibility.
16-16:clsximport validated.
All class merges remain consistent; no conflict withcn.
18-20: Prop shape is clear.
callbackto receive the file, optional message and variant for feedback, andacceptedFileTypesare well-defined.
22-23: Variant usage is typed.
Acceptable string unions for "success," "warning," "error," and "info" are well-handled.
25-26:isDisableddrop zone.
Supports disabling drag-and-drop if needed. Nicely handled.
32-34: Functional component definition.
Destructuring props is standard. Good use ofReadonly<FileUploaderProps>.
44-45: Wrapping container.
Applyingw-50plus the user-suppliedclassNameis straightforward for styling.
46-62: DropZone setup.
Properly overriding default drop behavior. Good handling of accepted file types with custom logic ingetDropOperation.
64-77: Drop handler logic.
Finding the first item that matches accepted types and sending it back viacallback. Solid single-file approach.
79-89: FileTrigger onSelect.
Consistent with the drop logic, ensuring only one file is set and passed up.
90-109: Button presentation.
Displaying the file name or upload icon is user-friendly, with a clear hover/focus style.
111-139: Feedback rendering with variant icons.
Conditionally showing success/warning/error/info states next to the message is a neat design. Icons load as expected.
140-140: No extra concerns.
ExportingFileUploadercompletes the flow for a single-file drop or selection with custom feedback.src/lib/tooltip/index.tsx (3)
2-3: Imports look consistent
No issues are found in the updated import statements.
14-26: Interface updates look well documented
The additions fortooltipProps,overlayArrowProps, andwrapperPropsappear thoroughly documented and aligned with react-aria components references.
61-110: Overall tooltip rendering logic looks solid
The arrow positioning and conditional styling for each placement are well implemented.src/lib/tag/index.tsx (2)
2-4: Import statements look good
The usage ofreact-aria-componentsButton is a suitable approach.
6-8: Interface extension with ButtonProps is appropriate
No issues found, and it ensures the Tag component inherits accessibility attributes.src/lib/pagination/tabs.tsx (4)
1-15: Imports look consistent with react-aria-components usage
No issues found, everything is correctly imported for tab functionalities.
39-50: Interface extension aligns with react-aria's approach
Merging custom props withAriaTabsPropskeeps the component flexible and accessible.
52-60: Local state management is straightforward
Storing theselectedKeyin local state is a valid approach for controlling the Tabs. No concerns here.
61-144: Implementation of tab list and tab panels appears robust
The usage ofCollectionand mapping each item to a dedicatedTabPanelis clean, ensuring a reliable tabs-to-panels pairing.
| run: yarn | ||
| - name: Run ESLint | ||
| run: yarn check-style | ||
| - uses: actions/checkout@v2 |
There was a problem hiding this comment.
Update actions/checkout to the latest version.
The workflow uses actions/checkout@v2, which is now outdated and may not be compatible with the latest GitHub Actions runners. Update to actions/checkout@v3 or later for improved security and compatibility.
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - uses: actions/checkout@v2 | |
| - uses: actions/checkout@v3 |
🧰 Tools
🪛 actionlint (1.7.4)
9-9: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
| run: yarn | ||
| - name: Run TypeScriptCompiler | ||
| run: yarn check-types | ||
| - uses: actions/checkout@v2 |
There was a problem hiding this comment.
Update actions/checkout to the latest version.
The workflow uses actions/checkout@v2, which is now outdated and may not be compatible with the latest GitHub Actions runners. Update to actions/checkout@v3 or later for improved security and compatibility.
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - uses: actions/checkout@v2 | |
| - uses: actions/checkout@v3 |
🧰 Tools
🪛 actionlint (1.7.4)
9-9: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
| @import "tailwindcss"; | ||
| @plugin "tailwindcss-react-aria-components"; | ||
|
|
||
| @import "./theme.css"; |
There was a problem hiding this comment.
Fix the @import position
The @import "./theme.css"; statement is in the wrong position according to CSS standards. @import rules must precede all other at-rules and style rules in a stylesheet (except @charset).
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
+@import "./theme.css";
-@import "./theme.css";Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Biome (1.9.4)
[error] 4-4: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
| export const StandardPagination: Story = { | ||
| args: { | ||
| themeUI: "light", | ||
| backgroundUI: "light", | ||
| numPages: 6, | ||
| currentPage: 0, | ||
| callback: () => {}, | ||
| className: "w-full", | ||
| disableNumbers: false, | ||
| hideNumbers: false, | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Inconsistency between args and state initialization
There's an inconsistency between the initial currentPage value in args (0) and the useState initialization (1). This could lead to unexpected behavior when the story is rendered.
export const StandardPagination: Story = {
args: {
themeUI: "light",
backgroundUI: "light",
numPages: 6,
- currentPage: 0,
+ currentPage: 1,
callback: () => {},
className: "w-full",
disableNumbers: false,
hideNumbers: false,
},📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const StandardPagination: Story = { | |
| args: { | |
| themeUI: "light", | |
| backgroundUI: "light", | |
| numPages: 6, | |
| currentPage: 0, | |
| callback: () => {}, | |
| className: "w-full", | |
| disableNumbers: false, | |
| hideNumbers: false, | |
| }, | |
| export const StandardPagination: Story = { | |
| args: { | |
| themeUI: "light", | |
| backgroundUI: "light", | |
| numPages: 6, | |
| currentPage: 1, | |
| callback: () => {}, | |
| className: "w-full", | |
| disableNumbers: false, | |
| hideNumbers: false, | |
| }, |
| const Calendar: React.FC = () => ( | ||
| <AriaCalender | ||
| className="flex w-82.5 flex-col items-center" | ||
| firstDayOfWeek="mon" | ||
| > | ||
| <header | ||
| className={clsx( | ||
| "flex h-16 w-full items-center justify-between p-6", | ||
| "border-b-klerosUIComponentsStroke border-b", | ||
| )} | ||
| > | ||
| <Button | ||
| slot="previous" | ||
| className={clsx( | ||
| "focus:outline-klerosUIComponentsPrimaryBlue rounded-base focus:outline-offset-2", | ||
| "cursor-pointer disabled:cursor-default", | ||
| )} | ||
| > | ||
| {({ isDisabled, isHovered }) => ( | ||
| <Arrow | ||
| className={cn( | ||
| "fill-klerosUIComponentsPrimaryBlue ease-ease size-4 transition", | ||
| isDisabled && "fill-klerosUIComponentsStroke", | ||
| isHovered && "fill-klerosUIComponentsSecondaryBlue", | ||
| )} | ||
| /> | ||
| )} | ||
| </Button> | ||
| <Heading className="text-klerosUIComponentsPrimaryText text-base font-semibold select-none" /> | ||
| <Button | ||
| slot="next" | ||
| className="focus:outline-klerosUIComponentsPrimaryBlue rounded-base cursor-pointer focus:outline-offset-2" | ||
| > | ||
| {({ isHovered }) => ( | ||
| <Arrow | ||
| className={cn( | ||
| "ease-ease size-4 rotate-180 transition", | ||
| "fill-klerosUIComponentsPrimaryBlue", | ||
| isHovered && "fill-klerosUIComponentsSecondaryBlue", | ||
| )} | ||
| /> | ||
| )} | ||
| </Button> | ||
| </header> | ||
| <CalendarGrid | ||
| className={cn( | ||
| "mt-4 mb-6", | ||
| "border-separate border-spacing-x-1.75 border-spacing-y-0.5", | ||
| )} | ||
| weekdayStyle="short" | ||
| > | ||
| <CalendarGridHeader> | ||
| {(day) => ( | ||
| <CalendarHeaderCell | ||
| className={clsx( | ||
| "size-6 cursor-pointer pb-1", | ||
| "text-klerosUIComponentsPrimaryText text-center text-sm font-semibold", | ||
| )} | ||
| > | ||
| {day.substring(0, 2)} | ||
| </CalendarHeaderCell> | ||
| )} | ||
| </CalendarGridHeader> | ||
| <CalendarGridBody> | ||
| {(date) => ( | ||
| <CalendarCell | ||
| date={date} | ||
| className={({ isFocused, isUnavailable, isDisabled, isSelected }) => | ||
| cn( | ||
| "flex size-6 cursor-pointer items-center justify-center rounded-full", | ||
| "text-klerosUIComponentsSecondaryText text-center text-sm font-semibold", | ||
| "hover:bg-klerosUIComponentsSecondaryBlue hover:text-klerosUIComponentsWhiteBackground", | ||
| "outside-month:hidden", | ||
| isSelected && [ | ||
| "bg-klerosUIComponentsPrimaryBlue text-klerosUIComponentsWhiteBackground", | ||
| "hover:bg-klerosUIComponentsPrimaryBlue", | ||
| ], | ||
| (isDisabled || isUnavailable) && | ||
| "text-klerosUIComponentsStroke cursor-not-allowed", | ||
| isFocused && [ | ||
| "outline-klerosUIComponentsPrimaryBlue outline-2", | ||
| ], | ||
| ) | ||
| } | ||
| > | ||
| {date.day.toString().length === 1 ? `0${date.day}` : date.day} | ||
| </CalendarCell> | ||
| )} | ||
| </CalendarGridBody> | ||
| </CalendarGrid> | ||
| </AriaCalender> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding props for better component flexibility
The Calendar component is implemented as a one-way functional component with no props, which limits its customization potential. Consider adding props to allow for:
- Custom date selection handlers
- Localization options (first day of week, month/day names)
- Minimum/maximum selectable dates
- Custom styling overrides
-const Calendar: React.FC = () => (
+interface CalendarProps {
+ onDateSelect?: (date: Date) => void;
+ minDate?: Date;
+ maxDate?: Date;
+ locale?: string;
+ firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+ className?: string;
+}
+
+const Calendar: React.FC<CalendarProps> = ({
+ onDateSelect,
+ minDate,
+ maxDate,
+ locale = 'en-US',
+ firstDayOfWeek = 'mon',
+ className,
+}) => (
<AriaCalender
- className="flex w-82.5 flex-col items-center"
- firstDayOfWeek="mon"
+ className={cn("flex w-82.5 flex-col items-center", className)}
+ firstDayOfWeek={firstDayOfWeek}
+ minValue={minDate}
+ maxValue={maxDate}
+ onChange={onDateSelect}📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const Calendar: React.FC = () => ( | |
| <AriaCalender | |
| className="flex w-82.5 flex-col items-center" | |
| firstDayOfWeek="mon" | |
| > | |
| <header | |
| className={clsx( | |
| "flex h-16 w-full items-center justify-between p-6", | |
| "border-b-klerosUIComponentsStroke border-b", | |
| )} | |
| > | |
| <Button | |
| slot="previous" | |
| className={clsx( | |
| "focus:outline-klerosUIComponentsPrimaryBlue rounded-base focus:outline-offset-2", | |
| "cursor-pointer disabled:cursor-default", | |
| )} | |
| > | |
| {({ isDisabled, isHovered }) => ( | |
| <Arrow | |
| className={cn( | |
| "fill-klerosUIComponentsPrimaryBlue ease-ease size-4 transition", | |
| isDisabled && "fill-klerosUIComponentsStroke", | |
| isHovered && "fill-klerosUIComponentsSecondaryBlue", | |
| )} | |
| /> | |
| )} | |
| </Button> | |
| <Heading className="text-klerosUIComponentsPrimaryText text-base font-semibold select-none" /> | |
| <Button | |
| slot="next" | |
| className="focus:outline-klerosUIComponentsPrimaryBlue rounded-base cursor-pointer focus:outline-offset-2" | |
| > | |
| {({ isHovered }) => ( | |
| <Arrow | |
| className={cn( | |
| "ease-ease size-4 rotate-180 transition", | |
| "fill-klerosUIComponentsPrimaryBlue", | |
| isHovered && "fill-klerosUIComponentsSecondaryBlue", | |
| )} | |
| /> | |
| )} | |
| </Button> | |
| </header> | |
| <CalendarGrid | |
| className={cn( | |
| "mt-4 mb-6", | |
| "border-separate border-spacing-x-1.75 border-spacing-y-0.5", | |
| )} | |
| weekdayStyle="short" | |
| > | |
| <CalendarGridHeader> | |
| {(day) => ( | |
| <CalendarHeaderCell | |
| className={clsx( | |
| "size-6 cursor-pointer pb-1", | |
| "text-klerosUIComponentsPrimaryText text-center text-sm font-semibold", | |
| )} | |
| > | |
| {day.substring(0, 2)} | |
| </CalendarHeaderCell> | |
| )} | |
| </CalendarGridHeader> | |
| <CalendarGridBody> | |
| {(date) => ( | |
| <CalendarCell | |
| date={date} | |
| className={({ isFocused, isUnavailable, isDisabled, isSelected }) => | |
| cn( | |
| "flex size-6 cursor-pointer items-center justify-center rounded-full", | |
| "text-klerosUIComponentsSecondaryText text-center text-sm font-semibold", | |
| "hover:bg-klerosUIComponentsSecondaryBlue hover:text-klerosUIComponentsWhiteBackground", | |
| "outside-month:hidden", | |
| isSelected && [ | |
| "bg-klerosUIComponentsPrimaryBlue text-klerosUIComponentsWhiteBackground", | |
| "hover:bg-klerosUIComponentsPrimaryBlue", | |
| ], | |
| (isDisabled || isUnavailable) && | |
| "text-klerosUIComponentsStroke cursor-not-allowed", | |
| isFocused && [ | |
| "outline-klerosUIComponentsPrimaryBlue outline-2", | |
| ], | |
| ) | |
| } | |
| > | |
| {date.day.toString().length === 1 ? `0${date.day}` : date.day} | |
| </CalendarCell> | |
| )} | |
| </CalendarGridBody> | |
| </CalendarGrid> | |
| </AriaCalender> | |
| ); | |
| interface CalendarProps { | |
| onDateSelect?: (date: Date) => void; | |
| minDate?: Date; | |
| maxDate?: Date; | |
| locale?: string; | |
| firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'; | |
| className?: string; | |
| } | |
| const Calendar: React.FC<CalendarProps> = ({ | |
| onDateSelect, | |
| minDate, | |
| maxDate, | |
| locale = 'en-US', | |
| firstDayOfWeek = 'mon', | |
| className, | |
| }) => ( | |
| <AriaCalender | |
| className={cn("flex w-82.5 flex-col items-center", className)} | |
| firstDayOfWeek={firstDayOfWeek} | |
| minValue={minDate} | |
| maxValue={maxDate} | |
| onChange={onDateSelect} | |
| > | |
| <header | |
| className={clsx( | |
| "flex h-16 w-full items-center justify-between p-6", | |
| "border-b-klerosUIComponentsStroke border-b", | |
| )} | |
| > | |
| <Button | |
| slot="previous" | |
| className={clsx( | |
| "focus:outline-klerosUIComponentsPrimaryBlue rounded-base focus:outline-offset-2", | |
| "cursor-pointer disabled:cursor-default", | |
| )} | |
| > | |
| {({ isDisabled, isHovered }) => ( | |
| <Arrow | |
| className={cn( | |
| "fill-klerosUIComponentsPrimaryBlue ease-ease size-4 transition", | |
| isDisabled && "fill-klerosUIComponentsStroke", | |
| isHovered && "fill-klerosUIComponentsSecondaryBlue", | |
| )} | |
| /> | |
| )} | |
| </Button> | |
| <Heading className="text-klerosUIComponentsPrimaryText text-base font-semibold select-none" /> | |
| <Button | |
| slot="next" | |
| className="focus:outline-klerosUIComponentsPrimaryBlue rounded-base cursor-pointer focus:outline-offset-2" | |
| > | |
| {({ isHovered }) => ( | |
| <Arrow | |
| className={cn( | |
| "ease-ease size-4 rotate-180 transition", | |
| "fill-klerosUIComponentsPrimaryBlue", | |
| isHovered && "fill-klerosUIComponentsSecondaryBlue", | |
| )} | |
| /> | |
| )} | |
| </Button> | |
| </header> | |
| <CalendarGrid | |
| className={cn( | |
| "mt-4 mb-6", | |
| "border-separate border-spacing-x-1.75 border-spacing-y-0.5", | |
| )} | |
| weekdayStyle="short" | |
| > | |
| <CalendarGridHeader> | |
| {(day) => ( | |
| <CalendarHeaderCell | |
| className={clsx( | |
| "size-6 cursor-pointer pb-1", | |
| "text-klerosUIComponentsPrimaryText text-center text-sm font-semibold", | |
| )} | |
| > | |
| {day.substring(0, 2)} | |
| </CalendarHeaderCell> | |
| )} | |
| </CalendarGridHeader> | |
| <CalendarGridBody> | |
| {(date) => ( | |
| <CalendarCell | |
| date={date} | |
| className={({ isFocused, isUnavailable, isDisabled, isSelected }) => | |
| cn( | |
| "flex size-6 cursor-pointer items-center justify-center rounded-full", | |
| "text-klerosUIComponentsSecondaryText text-center text-sm font-semibold", | |
| "hover:bg-klerosUIComponentsSecondaryBlue hover:text-klerosUIComponentsWhiteBackground", | |
| "outside-month:hidden", | |
| isSelected && [ | |
| "bg-klerosUIComponentsPrimaryBlue text-klerosUIComponentsWhiteBackground", | |
| "hover:bg-klerosUIComponentsPrimaryBlue", | |
| ], | |
| (isDisabled || isUnavailable) && | |
| "text-klerosUIComponentsStroke cursor-not-allowed", | |
| isFocused && [ | |
| "outline-klerosUIComponentsPrimaryBlue outline-2", | |
| ], | |
| ) | |
| } | |
| > | |
| {date.day.toString().length === 1 ? `0${date.day}` : date.day} | |
| </CalendarCell> | |
| )} | |
| </CalendarGridBody> | |
| </CalendarGrid> | |
| </AriaCalender> | |
| ); |
| export const RequiredOptions: Story = { | ||
| args: { | ||
| themeUI: "dark", | ||
| backgroundUI: "light", | ||
| groupLabel: "Variants:", | ||
| options: [ | ||
| { value: "primary", label: "Primary" }, | ||
| { value: "secondary", label: "Secondary" }, | ||
| ], | ||
| small: true, | ||
| isRequired: true, | ||
| isReadOnly: true, | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Conflicting accessibility props in RequiredOptions story
The story includes both isRequired: true and isReadOnly: true, which could potentially create conflicting states - a field typically shouldn't be both required and read-only simultaneously.
Consider creating separate stories for required and read-only states, or clarify the intention behind combining these states:
export const RequiredOptions: Story = {
args: {
themeUI: "dark",
backgroundUI: "light",
groupLabel: "Variants:",
options: [
{ value: "primary", label: "Primary" },
{ value: "secondary", label: "Secondary" },
],
small: true,
isRequired: true,
- isReadOnly: true,
},
// ...📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const RequiredOptions: Story = { | |
| args: { | |
| themeUI: "dark", | |
| backgroundUI: "light", | |
| groupLabel: "Variants:", | |
| options: [ | |
| { value: "primary", label: "Primary" }, | |
| { value: "secondary", label: "Secondary" }, | |
| ], | |
| small: true, | |
| isRequired: true, | |
| isReadOnly: true, | |
| }, | |
| export const RequiredOptions: Story = { | |
| args: { | |
| themeUI: "dark", | |
| backgroundUI: "light", | |
| groupLabel: "Variants:", | |
| options: [ | |
| { value: "primary", label: "Primary" }, | |
| { value: "secondary", label: "Secondary" }, | |
| ], | |
| small: true, | |
| isRequired: true, | |
| }, | |
| // ... | |
| } |
| )} | ||
| {...props} | ||
| > | ||
| <SelectValue<IItem>> |
There was a problem hiding this comment.
Fix syntax error in SelectValue component.
There's an extra closing bracket in the SelectValue generic type declaration.
- <SelectValue<IItem>>
+ <SelectValue<IItem>📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <SelectValue<IItem>> | |
| <SelectValue<IItem> |
|
|
||
| interface PushProps extends SmallProp, VariantProp { | ||
| title: string; | ||
| msg?: string; | ||
| //eslint-disable-next-line @typescript-eslint/ban-types | ||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type | ||
| callback: Function; |
There was a problem hiding this comment.
Avoid using Function as a type.
This can mask potential typing issues and hamper readability.
Here’s a suggested fix:
- callback: Function;
+ callback: () => void;Adjust parameters or return types if the callback requires them.
📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| callback: Function; | |
| callback: () => void; |
🧰 Tools
🪛 Biome (1.9.4)
[error] 16-16: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
| transform: scaleY(0); | ||
| } | ||
| } | ||
| --animate-scale-out: slideOut var(--klerosUIComponentsTransitionSpeed) ease; |
There was a problem hiding this comment.
Fix incorrect animation reference.
The --animate-scale-out property references slideOut keyframes, which don't exist in this file. It should reference scaleOut instead.
- --animate-scale-out: slideOut var(--klerosUIComponentsTransitionSpeed) ease;
+ --animate-scale-out: scaleOut var(--klerosUIComponentsTransitionSpeed) ease;📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --animate-scale-out: slideOut var(--klerosUIComponentsTransitionSpeed) ease; | |
| --animate-scale-out: scaleOut var(--klerosUIComponentsTransitionSpeed) ease; |
| // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type | ||
| callback?: Function; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Define a specific callback signature.
Using the Function type is discouraged, as flagged by the linter. Replace it with a more explicit function type, e.g., (val: any) => void, to ensure type safety.
8 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
9- callback?: Function;
+ callback?: (value: unknown) => void;📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type | |
| callback?: Function; | |
| // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type | |
| callback?: (value: unknown) => void; |
🧰 Tools
🪛 Biome (1.9.4)
[error] 9-9: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
PR-Codex overview
This PR focuses on significant refactoring and improvements to the codebase, including the removal of outdated files, enhancements to components, and updates to styling and configurations for better maintainability and functionality.
Detailed summary
Summary by CodeRabbit
New Features
Refactor
Bug Fixes
Chores
Documentation
Style
Tests