From 0ef3206b45492cc718735cc40934c9ac20132248 Mon Sep 17 00:00:00 2001 From: Nathan Young <1447339+nathanyoung@users.noreply.github.com> Date: Tue, 9 Jun 2026 11:04:15 -0700 Subject: [PATCH 1/2] Migrate Calendar to @daypicker/react v10 Replace react-day-picker v9 with @daypicker/react v10 in package.json and update Calendar code to use the new package APIs. Adjust imports and types (DayPickerProps, Matcher, DateRange) and import the new stylesheet path. Add 'w-100' to the month grid class and remove the previous table class usage. Update stories to import DateRange from @daypicker/react and add a unit test asserting the month grid receives the width class. --- package.json | 12 ++--- pnpm-lock.yaml | 49 +++++++++++++------- src/components/Calendar/Calendar.stories.tsx | 2 +- src/components/Calendar/Calendar.test.tsx | 8 +++- src/components/Calendar/Calendar.tsx | 11 ++--- 5 files changed, 52 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index b688f711..418f53b6 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ } ], "dependencies": { + "@daypicker/react": "^10.0.1", "@emotion/react": "^11.14.0", "@hyphen/hyphen-design-tokens": "^7.6.0", "@radix-ui/react-aspect-ratio": "^1.1.8", @@ -76,7 +77,6 @@ "classnames": "^2.5.1", "date-fns": "^4.1.0", "formik": "^2.4.9", - "react-day-picker": "^9.11.3", "react-focus-lock": "^2.13.2", "react-modal": "^3.16.3", "react-remove-scroll": "^2.6.3", @@ -107,6 +107,8 @@ "@types/react-modal": "^3.16.3", "@typescript-eslint/eslint-plugin": "^8.0.0", "@typescript-eslint/parser": "^8.0.0", + "@vitest/browser-playwright": "^4.1.8", + "@vitest/coverage-v8": "^4.1.8", "autoprefixer": "^10.4.20", "babel-loader": "^9.1.3", "chromatic": "^13.3.5", @@ -128,6 +130,7 @@ "jest-environment-jsdom": "^30.2.0", "jest-preview": "^0.3.1", "mini-css-extract-plugin": "^2.9.1", + "playwright": "^1.60.0", "postcss": "^8.4.47", "postcss-loader": "^7.3.4", "postcss-modules": "^6.0.0", @@ -145,12 +148,9 @@ "typescript": "^5.9.3", "url-loader": "^4.1.1", "vite": "^6.4.2", + "vitest": "^4.1.8", "webpack": "^5.94.0", "webpack-cli": "^5.1.4", - "webpack-fix-style-only-entries": "^0.6.1", - "vitest": "^4.1.8", - "playwright": "^1.60.0", - "@vitest/browser-playwright": "^4.1.8", - "@vitest/coverage-v8": "^4.1.8" + "webpack-fix-style-only-entries": "^0.6.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b16140c5..892c6e96 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@daypicker/react': + specifier: ^10.0.1 + version: 10.0.1(@types/react@18.3.5)(react@18.3.1) '@emotion/react': specifier: ^11.14.0 version: 11.14.0(@types/react@18.3.5)(react@18.3.1) @@ -50,9 +53,6 @@ importers: formik: specifier: ^2.4.9 version: 2.4.9(react@18.3.1) - react-day-picker: - specifier: ^9.11.3 - version: 9.11.3(react@18.3.1) react-focus-lock: specifier: ^2.13.2 version: 2.13.2(@types/react@18.3.5)(react@18.3.1) @@ -554,8 +554,18 @@ packages: resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==} engines: {node: '>=18'} - '@date-fns/tz@1.4.1': - resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==} + '@date-fns/tz@1.5.0': + resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==} + + '@daypicker/react@10.0.1': + resolution: {integrity: sha512-lH4YQz4iMBWP8hsI1bD9Eg0T7t503IkSUR/WDGGkV5mKZvwVv+ukCkJz7yN+uVFBv7vHTK+ww7a5EvlkeFwPYQ==} + engines: {node: '>=18'} + peerDependencies: + '@types/react': '>=16.8.0' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true '@discoveryjs/json-ext@0.5.7': resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} @@ -3304,9 +3314,6 @@ packages: resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==} engines: {node: '>= 0.4'} - date-fns-jalali@4.1.0-0: - resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==} - date-fns@4.1.0: resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} @@ -5708,11 +5715,15 @@ packages: peerDependencies: react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 - react-day-picker@9.11.3: - resolution: {integrity: sha512-7lD12UvGbkyXqgzbYIGQTbl+x29B9bAf+k0pP5Dcs1evfpKk6zv4EdH/edNc8NxcmCiTNXr2HIYPrSZ3XvmVBg==} + react-day-picker@10.0.1: + resolution: {integrity: sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==} engines: {node: '>=18'} peerDependencies: + '@types/react': '>=16.8.0' react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true react-docgen-typescript@2.4.0: resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==} @@ -7373,7 +7384,14 @@ snapshots: '@csstools/css-tokenizer@3.0.4': {} - '@date-fns/tz@1.4.1': {} + '@date-fns/tz@1.5.0': {} + + '@daypicker/react@10.0.1(@types/react@18.3.5)(react@18.3.1)': + dependencies: + react: 18.3.1 + react-day-picker: 10.0.1(@types/react@18.3.5)(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.5 '@discoveryjs/json-ext@0.5.7': {} @@ -10216,8 +10234,6 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.2 - date-fns-jalali@4.1.0-0: {} - date-fns@4.1.0: {} debug@2.6.9: @@ -12868,12 +12884,13 @@ snapshots: '@babel/runtime': 7.27.6 react: 18.3.1 - react-day-picker@9.11.3(react@18.3.1): + react-day-picker@10.0.1(@types/react@18.3.5)(react@18.3.1): dependencies: - '@date-fns/tz': 1.4.1 + '@date-fns/tz': 1.5.0 date-fns: 4.1.0 - date-fns-jalali: 4.1.0-0 react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 react-docgen-typescript@2.4.0(typescript@5.9.3): dependencies: diff --git a/src/components/Calendar/Calendar.stories.tsx b/src/components/Calendar/Calendar.stories.tsx index 7f3e3193..cb2cd5a2 100644 --- a/src/components/Calendar/Calendar.stories.tsx +++ b/src/components/Calendar/Calendar.stories.tsx @@ -2,7 +2,7 @@ import { Calendar } from './Calendar'; import type { Meta } from '@storybook/react-vite'; import React, { useState, ChangeEvent } from 'react'; -import { type DateRange } from 'react-day-picker'; +import { type DateRange } from '@daypicker/react'; import { TextInput } from '../TextInput/TextInput'; import { format, isValid, parse } from 'date-fns'; diff --git a/src/components/Calendar/Calendar.test.tsx b/src/components/Calendar/Calendar.test.tsx index 57ce1086..19b3b1d6 100644 --- a/src/components/Calendar/Calendar.test.tsx +++ b/src/components/Calendar/Calendar.test.tsx @@ -76,7 +76,6 @@ describe('Calendar', () => { /> ); - // In react-day-picker v9, we need to click the button inside the day cell const dayButton = screen.getByRole('button', { name: /June 16th/i }); fireEvent.click(dayButton); @@ -214,6 +213,13 @@ describe('Calendar', () => { '--rdp-accent-color': 'var(--color-font-base)', }); }); + + test('applies table width class to the month grid', () => { + const { container } = render(); + const monthGrid = container.querySelector('.rdp-month_grid'); + + expect(monthGrid).toHaveClass('w-100'); + }); }); describe('Chevron icons', () => { diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index b0acb9e2..e6929a70 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -2,11 +2,11 @@ import React from 'react'; import classNames from 'classnames'; import { DayPicker, - DayPickerProps, getDefaultClassNames, - Matcher, -} from 'react-day-picker'; -import 'react-day-picker/style.css'; + type DayPickerProps, + type Matcher, +} from '@daypicker/react'; +import '@daypicker/react/style.css'; import { Icon } from '../Icon/Icon'; export type CalendarProps = DayPickerProps; @@ -74,11 +74,10 @@ function Calendar({ selected: classNames( 'font-color-inverse background-color-inverse hover:font-color-inverse' ), - month_grid: classNames(defaultClassNames.month_grid, 'm-top-lg'), + month_grid: classNames(defaultClassNames.month_grid, 'm-top-lg w-100'), day: classNames(defaultClassNames.day, 'hover:font-color-base'), day_button: classNames(defaultClassNames.day_button), range_middle: classNames(defaultClassNames.range_middle), - table: classNames('w-100'), dropdowns: classNames(defaultClassNames.dropdowns, 'h-100'), caption_label: classNames(defaultClassNames.caption_label, 'g-2xs'), }} From 241c5c9e516f5083a2e5dba5abb184b988faba62 Mon Sep 17 00:00:00 2001 From: Nathan Young <1447339+nathanyoung@users.noreply.github.com> Date: Tue, 9 Jun 2026 11:11:35 -0700 Subject: [PATCH 2/2] docs: use pnpm in agent instructions --- AGENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index ac41a55e..a5bc6b39 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -3,13 +3,13 @@ ## Testing instructions - Find the CI plan in the .github/workflows folder. -- From the package root you can just call `npm test`. The commit should pass all tests before you merge. +- From the package root you can just call `pnpm test`. The commit should pass all tests before you merge. - Fix any test or type errors until the whole suite is green. - Add or update tests for the code you change, even if nobody asked. ## PR instructions -- Always run `npm lint` and `npm test` before committing. +- Always run `pnpm lint` and `pnpm test` before committing. ## Code Review Checklist