-
Notifications
You must be signed in to change notification settings - Fork 9
Feature: Add Alert, MultiSelect, TimePicker and MonthPicker components #97
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR adds three new UI components (Alert, MultiSelect, and TimePicker) with full functional and visual parity with Frappe UI, and implements feedback from PR #90.
- Adds Alert component with theme variants, dismissible behavior, and customizable slots for icon, description, and footer
- Adds MultiSelect component with search functionality, custom rendering options, and select/clear all actions
- Adds TimePicker component with 12/24-hour format support, flexible time input parsing, and customizable time intervals
Reviewed changes
Copilot reviewed 25 out of 25 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/frappe-ui-react/src/components/timePicker/utils.ts | Time parsing and formatting utilities for TimePicker |
| packages/frappe-ui-react/src/components/timePicker/useTimePicker.ts | Core TimePicker logic and state management hook |
| packages/frappe-ui-react/src/components/timePicker/timePicker.tsx | TimePicker component implementation |
| packages/frappe-ui-react/src/components/timePicker/types.ts | TypeScript type definitions for TimePicker |
| packages/frappe-ui-react/src/components/timePicker/timePicker.stories.tsx | Storybook stories for TimePicker |
| packages/frappe-ui-react/src/components/timePicker/index.ts | TimePicker component exports |
| packages/frappe-ui-react/src/components/multiSelect/multiselect.tsx | MultiSelect component implementation |
| packages/frappe-ui-react/src/components/multiSelect/types.ts | TypeScript type definitions for MultiSelect |
| packages/frappe-ui-react/src/components/multiSelect/multiselect.stories.tsx | Storybook stories for MultiSelect |
| packages/frappe-ui-react/src/components/multiSelect/index.ts | MultiSelect component exports |
| packages/frappe-ui-react/src/components/alert/alert.tsx | Refactored Alert component with new API |
| packages/frappe-ui-react/src/components/alert/types.ts | Updated Alert type definitions |
| packages/frappe-ui-react/src/components/alert/tests/alert.tsx | Comprehensive test coverage for Alert |
| packages/frappe-ui-react/src/components/alert/alert.stories.tsx | Storybook stories for Alert |
| packages/frappe-ui-react/src/components/textInput/types.ts | Extended TextInput props to include HTML input attributes |
| packages/frappe-ui-react/src/components/select/types.ts | Added defaultValue prop to Select |
| packages/frappe-ui-react/src/components/select/select.tsx | Support for defaultValue and removed selected attribute |
| packages/frappe-ui-react/src/components/listview/listprovider.tsx | Added useEffect to sync column updates |
| packages/frappe-ui-react/src/components/listview/listView.stories.tsx | Updated CustomList story to handle column state |
| packages/frappe-ui-react/src/components/datePicker/useDatePicker.ts | Added JSDoc comments for helper functions |
| packages/frappe-ui-react/src/components/datePicker/dateRangePicker.tsx | Refactored functions to useCallback hooks |
| packages/frappe-ui-react/src/components/combobox/combobox.tsx | Reorganized imports with comment sections |
| packages/frappe-ui-react/src/components/calendar/hooks/useCalendar.ts | Improved week view date formatting logic |
| packages/frappe-ui-react/src/components/calendar/calendar.stories.tsx | Added defaultValue to Select in CustomHeader story |
| packages/frappe-ui-react/src/components/index.ts | Exported new MultiSelect and TimePicker components |
packages/frappe-ui-react/src/components/listview/listView.stories.tsx
Outdated
Show resolved
Hide resolved
packages/frappe-ui-react/src/components/multiSelect/multiSelect.tsx
Outdated
Show resolved
Hide resolved
packages/frappe-ui-react/src/components/multiSelect/multiSelect.tsx
Outdated
Show resolved
Hide resolved
packages/frappe-ui-react/src/components/multiSelect/multiSelect.stories.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Copilot reviewed 25 out of 25 changed files in this pull request and generated 10 comments.
Description
Implements feedback received from PR Align components with updated frappe-ui components #90
Adds 4 new components with full functional and visual parity with Frappe UI.
timepicker-demo.mp4
MonthPIcker.Demo.mp4
Relevant Technical Choices
Testing Instructions
Additional Information:
Screenshot/Screencast
Checklist
Fixes #92