Conversation
WalkthroughThe Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
…-dat-range-selector
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
web/core/components/inbox/modals/snooze-issue-modal.tsx (1)
69-69:⚠️ Potential issueFix undefined
closefunction call.The
close()function is called but not defined. UsehandleCloseinstead, which is provided in props.- close(); + handleClose();
🧹 Nitpick comments (1)
web/core/components/dropdowns/date.tsx (1)
62-101: Consider extracting dropdown logic to a custom hook.The dropdown handling logic (state, refs, popper setup, keyboard interactions) could be extracted into a reusable custom hook to improve maintainability and reusability.
Example structure:
// hooks/use-date-dropdown.ts export const useDateDropdown = ({ onClose, onChange, closeOnSelect }) => { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef<HTMLDivElement | null>(null); const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null); const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null); // ... popper setup, keyboard handlers, etc. return { isOpen, dropdownRef, referenceElement, popperElement, setReferenceElement, setPopperElement, handleClose, handleKeyDown, handleOnClick, styles, attributes, }; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (7)
packages/ui/src/calendar.tsx(1 hunks)packages/ui/src/index.ts(1 hunks)web/core/components/core/filters/date-filter-modal.tsx(3 hunks)web/core/components/dropdowns/date-range.tsx(2 hunks)web/core/components/dropdowns/date.tsx(2 hunks)web/core/components/inbox/modals/snooze-issue-modal.tsx(2 hunks)web/package.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- web/core/components/dropdowns/date-range.tsx
🔇 Additional comments (8)
packages/ui/src/index.ts (1)
33-33: LGTM! Export added in the correct location.The new calendar module export follows the existing pattern and maintains alphabetical order.
packages/ui/src/calendar.tsx (2)
30-34: Verify color contrast ratios for accessibility.The background colors used for selected dates (
bg-custom-primary-100) should be verified for sufficient contrast with the text colors to ensure WCAG compliance.#!/usr/bin/env python3 import requests from colorsys import rgb_to_hls def get_contrast_ratio(color1, color2): # Convert hex to RGB r1, g1, b1 = int(color1[1:3], 16), int(color1[3:5], 16), int(color1[5:7], 16) r2, g2, b2 = int(color2[1:3], 16), int(color2[3:5], 16), int(color2[5:7], 16) # Calculate relative luminance def get_luminance(r, g, b): rs = r/255 gs = g/255 bs = b/255 if rs <= 0.03928: r = rs/12.92 else: r = ((rs+0.055)/1.055) ** 2.4 if gs <= 0.03928: g = gs/12.92 else: g = ((gs+0.055)/1.055) ** 2.4 if bs <= 0.03928: b = bs/12.92 else: b = ((bs+0.055)/1.055) ** 2.4 return 0.2126 * r + 0.7152 * g + 0.0722 * b l1 = get_luminance(r1, g1, b1) l2 = get_luminance(r2, g2, b2) # Calculate contrast ratio if l1 > l2: return (l1 + 0.05) / (l2 + 0.05) return (l2 + 0.05) / (l1 + 0.05) # Get your theme colors and verify contrast # Note: Replace these with your actual theme colors bg_color = "#F3F4F6" # custom-primary-100 text_color = "#FFFFFF" # white ratio = get_contrast_ratio(bg_color, text_color) print(f"Contrast ratio: {ratio:.2f}") print(f"WCAG AA compliance (minimum 4.5:1): {'Pass' if ratio >= 4.5 else 'Fail'}")
1-58: Well-structured Calendar component with comprehensive styling!The implementation:
- Properly extends DayPicker with custom styling
- Includes responsive design considerations
- Handles outside days and disabled states
- Uses custom navigation icons
- Exports with correct TypeScript types
web/core/components/inbox/modals/snooze-issue-modal.tsx (1)
50-65: Clean Calendar integration with proper date constraints!The Calendar implementation:
- Correctly handles date selection
- Properly disables past dates
- Maintains the existing modal functionality
web/core/components/dropdowns/date.tsx (1)
176-189: Clean Calendar integration with proper configuration!The Calendar implementation:
- Correctly handles date selection
- Properly manages focus with initialFocus
- Maintains existing date constraints
- Shows outside days for better context
web/core/components/core/filters/date-filter-modal.tsx (2)
8-8: LGTM! Calendar component integration looks good.The replacement of
DayPickerwith the newCalendarcomponent from@plane/uiis well-implemented. The component configurations maintain the necessary functionality for date selection and validation.Also applies to: 96-110, 121-135
148-161: Verify if action buttons should be removed.The PR objectives mention removing action buttons for date selection, but this component still includes Cancel/Apply buttons. Please verify if these buttons should also be removed as part of the date range selector modifications.
web/package.json (1)
59-59:Details
❓ Verification inconclusive
Verify the rationale for downgrading react-day-picker.
The package version has been downgraded from
^9.5.0to8.10.1. This is a major version downgrade that could introduce breaking changes.Let's check the changelog and compatibility:
Additionally, run this script to check for potential version conflicts:
🏁 Script executed:
#!/bin/bash # Check for react-day-picker usage and potential version conflicts npm ls react-day-picker # Check for any peer dependency warnings npm ls 2>&1 | grep "UNMET PEER DEPENDENCY"Length of output: 93
🌐 Web query:
What are the breaking changes between react-day-picker v8 and v9?💡 Result:
React DayPicker v9 introduces several breaking changes from v8 that developers need to address during upgrades:
1. Dependency Changes
date-fnsmoved from peer dependencies to direct dependencies[4][7]- Removed Moment.js support entirely (already deprecated in v8)[5]
2. Component Architecture
- Complete overhaul of component structure with renamed core components:
v8 Component v9 Equivalent CaptionMonthCaptionHeadRowWeekdaysRowWeekDayDayButton3. Prop Changes
- Removed deprecated props:
useInputhook completely removed (migration guide required)[4][7]onWeekNumberClickdiscontinued[4]onDayTouchStart/onDayDoubleClickeliminated[4]- New required props for accessibility:
<DayPicker labels={{ headRow: 'Week numbers', navNext: 'Next month' }} />4. Styling Breakage
- Simplified CSS with updated class names (
.rdp-head→.rdp-weekdays)[4][9]- Font family inheritance changed (system-ui → parent element's font)[2][4]
5. Localization Changes
- Persian calendar replaces Jalali calendar implementation[2][4]
- ISO week calculation now uses locale settings by default[1][4]
6. Behavior Changes
- Month navigation buttons repositioned to top-right[5][9]
- Strict type checking enforced for TypeScript users[4][7]
7. Modifier System
- Requires dual configuration for custom modifiers:
dayPickerProps={{ modifiers: { weekend: { dayOfWeek: [0,6] } }, modifiersClassNames: { weekend: 'weekend-style' } }} ```[5][8]Key upgrade steps include updating CSS imports (
dist/style.css), replacing deprecated components[9], and migrating fromDateUtilsto date-fns functions[1]. The maintainers provide an Upgrading Guide with code transformation examples[9].Citations:
- 1: https://daypicker.dev/v8/upgrading
- 2: https://github.com/gpbl/react-day-picker/releases
- 3: https://bundlephobia.com/package/react-day-picker
- 4: https://github.com/gpbl/react-day-picker/blob/master/CHANGELOG.md
- 5: https://github.com/palantir/blueprint/wiki/react-day-picker-8-migration
- 6: https://canvas.workday.com/v10/whats-new/upgrade-guides/canvas-kit-v8-upgrade-guide
- 7: gpbl/react-day-picker#2280
- 8: https://react-day-picker-v7.netlify.app/docs/matching-days/
- 9: https://daypicker.dev/upgrading
- 10: https://www.npmjs.com/package/react-day-picker/v/8.9.1
Action Needed: Confirm Impact of React-Day-Picker Version Downgrade
The dependency in the file
web/package.jsonhas been downgraded from^9.5.0to a strictly pinned8.10.1. As the web changelog indicates, there are significant breaking changes between v8 and v9 (e.g., altered component structure, prop removals, and styling adjustments). Although the automated checks (via thenpm lscommands) did not report any peer dependency conflicts, the absence of output means we should manually verify the following:
- Rationale Confirmation: Ensure that the downgrade was intentional to accommodate compatibility with the new Calendar component or related usage.
- Breaking Changes Verification: Confirm that none of the breaking changes introduced in v9 (such as renamed components or removed props) are inadvertently expected by other parts of the application.
- Manual Checks: Since the shell script produced an empty result, please double-check locally whether any instances in the codebase rely on v9-specific features.
Please review and validate these aspects to ensure that the version downgrade does not introduce unforeseen issues.
* fix: Handled workspace switcher closing on click * fix: removed action btns from date range selector * fix: updated calendar component
3 participants
Description
This PR removes the action buttons from date range. And selects them on date click itself.
Summary by CodeRabbit
Calendarcomponent for improved date selection.react-day-pickerdependency version to ensure compatibility.