Skip to content

🎇 Fix calendar.tsx typescript errors #96

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

Merged
merged 1 commit into from
Jul 3, 2025

Conversation

ansballard
Copy link
Contributor

We were passing IconLeft and IconRight to the react-day-picker component, when those aren't actually options in the components prop. Per https://daypicker.dev/api/type-aliases/CustomComponents, it looks like what we should've used is PreviousMonthButton and NextMonthButton. Confirmed in a prod codespace editing calendar.tsx directly that this does render the correct icons.

This was the only tsc error that comes up when running npx tsc from the built-in components, so resolving issues with generated code should be easier without the noise

before after
Screenshot 2025-07-03 at 1 50 03 PM Screenshot 2025-07-03 at 1 49 38 PM

We were passing `IconLeft` and `IconRight` to the `react-day-picker` component, when those aren't actually options in the components prop. Per https://daypicker.dev/api/type-aliases/CustomComponents, it looks like what we should've used is PreviousMonthButton and NextMonthButton. Confirmed in a prod codespace editing calendar.tsx directly that this does render the correct icons
@Copilot Copilot AI review requested due to automatic review settings July 3, 2025 19:51
Copy link

@Copilot Copilot AI left a 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 fixes TypeScript errors in the calendar component by aligning the custom navigation button props with the react-day-picker API.

  • Renamed IconLeft to PreviousMonthButton and IconRight to NextMonthButton in the components prop.
  • Eliminates the sole remaining tsc error in built-in components.
Comments suppressed due to low confidence (2)

src/components/ui/calendar.tsx:62

  • There are no existing tests covering custom month navigation buttons; consider adding unit or integration tests to verify that PreviousMonthButton and NextMonthButton render the correct icons and handle click events.
        PreviousMonthButton: ({ className, ...props }) => (

src/components/ui/calendar.tsx:62

  • Add a code comment or update the component's docs to explain the change from IconLeft/IconRight to PreviousMonthButton/NextMonthButton, referencing the relevant react-day-picker API.
        PreviousMonthButton: ({ className, ...props }) => (

Copy link
Collaborator

@justinmcbride justinmcbride left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not the point of this PR, but am I crazy or are those day markers in your screenshots all wonky?

@ansballard
Copy link
Contributor Author

Not the point of this PR, but am I crazy or are those day markers in your screenshots all wonky?

@justinmcbride They are, I've hit that a couple times but I haven't dug in to see if we need to add styles to the component or give the prompt a better stylistic nudge

@ansballard ansballard merged commit acf7b6c into main Jul 3, 2025
2 checks passed
@ansballard ansballard deleted the ansballard/workbench/fix-calendar-icons branch July 3, 2025 20:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants