feat: add new DatePicker component

[talkor]

User description

https://monday.monday.com/boards/3532714909/pulses/4640584267

---

PR Type

Enhancement, Documentation

---

Description

• Add new standalone DatePicker component package with single and range modes

• Deprecate old DatePicker component in core package

• Configure Storybook to support new date-picker package

• Add comprehensive tests and documentation for new component

---

Diagram Walkthrough

flowchart LR
  newPackage["New @vibe/date-picker package"] --> component["DatePicker component"]
  component --> single["Single date mode"]
  component --> range["Range date mode"]
  component --> features["Localization, week numbers, custom styling"]
  storybook["Storybook configuration"] --> alias["Package aliases"]
  storybook --> stories["New stories pattern"]
  core["Core package"] --> deprecated["Deprecated old DatePicker"]

Loading

File Walkthrough

	Relevant files
Enhancement	11 files DatePicker.tsx Main DatePicker component with single and range modes        +191/-0  DatePicker.types.ts TypeScript type definitions for DatePicker props                  +39/-0    utils.ts Date range selection logic and modifiers                                  +155/-0  DatePickerHeader.tsx Header component with month/year navigation dropdowns        +130/-0  DatePicker.module.scss Comprehensive styling for calendar and date ranges              +286/-0  DatePickerHeader.module.scss Styling for header navigation and dropdowns                            +28/-0    RangeDayContent.tsx Day content renderer for range mode with hover                      +34/-0    SingleDayContent.tsx Day content renderer for single date mode                                +12/-0    DateContentHoverContext.tsx React context for managing hover state in range mode          +15/-0    datePickerHooks.tsx Custom hooks for month and year dropdown options                  +37/-0    index.ts Package exports for DatePicker component and types              +3/-0
Tests	2 files DatePicker.test.jsx Component tests for date selection and navigation                +132/-0  utils.test.js Unit tests for date range utility functions                            +126/-0
Documentation	4 files DatePicker.stories.tsx Storybook stories for component variants and examples        +90/-0    DatePicker.mdx Documentation with usage guidelines and examples                  +46/-0    DatePicker.stories.tsx Mark old DatePicker story as deprecated                                    +1/-1      DatePicker.mdx Add deprecation warning with link to new component              +4/-0
Configuration changes	10 files package.json Package configuration with dependencies and scripts            +65/-0    tsconfig.json TypeScript configuration for date-picker package                  +8/-0      vitest.config.mjs Vitest test configuration setup                                                    +6/-0      vitest.setup.mjs Test environment setup with mocks                                                +23/-0    .eslintrc.cjs ESLint configuration for code quality                                        +3/-0      rollup.config.mjs Rollup build configuration                                                              +3/-0      files.d.ts TypeScript declarations for asset imports                                +15/-0    main.ts Update Storybook to include all packages and add aliases  +5/-3      tsconfig.json Fix TypeScript config extends path                                              +1/-1      tsconfig.json Fix TypeScript config extends path                                              +1/-1

---

[qodo-merge-for-open-source]

PR Reviewer Guide 🔍

(Review updated until commit c0ce873)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

Findings summary: - ⚠️ Title violates Conventional Commits: none. The title "feat: add new DatePicker component" is valid.

⚡ Recommended focus areas for review Console Log A stray console.log in the range selection handler may leak noise to consumer apps and should be removed. lastChangeByInnerSelection.current = true; if (mode === "range") { const newRange = addToRange(selectedDay, selected as DateRange, intent); console.log("newRange", newRange); (onDateChange as (range: DatePickerRange) => void)({ date: newRange?.from, endDate: newRange?.to }); } else { const newDate = newValue as Date; const { hours, minutes } = date ? { hours: date.getHours(), minutes: date.getMinutes() } : DEFAULT_TIME; Peer Deps Range Dev deps use React 16 while peer range is >=16.9; confirm compatibility with React 17/18 and consider aligning tested versions to avoid unexpected issues. "vibe-storybook-components": "1.0.2", "react": "^16.14.0", "react-dom": "^16.14.0", "react-test-renderer": "16", "vitest": "^1.6.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" }, Alias Path Change The alias for '~vibe-storybook-components' now points to '/src' whereas it previously mapped to the package root; verify build/Storybook still resolves correctly across all stories. resolve: { alias: { "monday-ui-style/dist/index.min.css": path.resolve(__dirname, "../../style/src/index.scss"), "monday-ui-style/dist": path.resolve(__dirname, "../../style/src"), // mixins workaround for vite: "~monday-ui-style/dist/mixins": path.resolve(__dirname, "../../style/src/mixins"), "~monday-ui-style/dist/functions": path.resolve(__dirname, "../../style/src/functions"), "~monday-ui-style": path.resolve(__dirname, "../../style"), "~vibe-storybook-components": path.resolve(__dirname, "../../storybook-blocks/src"), "@vibe/shared": path.resolve(__dirname, "../../shared/src"), "@vibe/storybook-config": path.resolve(__dirname, "../../storybook-config/src/index.ts") }

[github-actions]

📦 Bundle Size Analysis

✅ No bundle size changes detected.

Unchanged Components

Component	Base	PR	Diff
Accordion	6.35KB	6.35KB	0B ➖
AccordionItem	67.77KB	67.77KB	0B ➖
AlertBanner	72.5KB	72.5KB	0B ➖
AlertBannerButton	19.03KB	19.03KB	0B ➖
AlertBannerLink	15.34KB	15.34KB	0B ➖
AlertBannerText	65.16KB	65.16KB	0B ➖
AttentionBox	74.03KB	74.03KB	0B ➖
AttentionBoxLink	15.22KB	15.22KB	0B ➖
Avatar	68.06KB	68.06KB	0B ➖
AvatarGroup	95.34KB	95.34KB	0B ➖
Badge	43.52KB	43.52KB	0B ➖
Box	9.36KB	9.36KB	0B ➖
BreadcrumbItem	65.8KB	65.8KB	0B ➖
BreadcrumbMenu	69.97KB	69.97KB	0B ➖
BreadcrumbMenuItem	78.71KB	78.71KB	0B ➖
BreadcrumbsBar	5.78KB	5.78KB	0B ➖
Button	18.74KB	18.74KB	0B ➖
ButtonGroup	69.92KB	69.92KB	0B ➖
Checkbox	68.08KB	68.08KB	0B ➖
Chips	76.76KB	76.76KB	0B ➖
Clickable	6.28KB	6.28KB	0B ➖
ColorPicker	75.86KB	75.86KB	0B ➖
ColorPickerContent	75.12KB	75.12KB	0B ➖
Combobox	85.69KB	85.69KB	0B ➖
Counter	42.36KB	42.36KB	0B ➖
DatePicker	134.16KB	134.16KB	0B ➖
Dialog	53.98KB	53.98KB	0B ➖
DialogContentContainer	6.32KB	6.32KB	0B ➖
Divider	5.55KB	5.55KB	0B ➖
Dropdown	125.01KB	125.01KB	0B ➖
menu	59.85KB	59.85KB	0B ➖
option	92.86KB	92.86KB	0B ➖
singleValue	92.71KB	92.71KB	0B ➖
EditableHeading	67.84KB	67.84KB	0B ➖
EditableText	67.75KB	67.75KB	0B ➖
EmptyState	72.4KB	72.4KB	0B ➖
ExpandCollapse	67.59KB	67.59KB	0B ➖
Flex	7.52KB	7.52KB	0B ➖
FormattedNumber	5.87KB	5.87KB	0B ➖
GridKeyboardNavigationContext	4.65KB	4.65KB	0B ➖
Heading	66.46KB	66.46KB	0B ➖
HiddenText	5.43KB	5.43KB	0B ➖
CustomSvgIcon	11.86KB	11.86KB	0B ➖
Icon	13.78KB	13.78KB	0B ➖
IconButton	69.59KB	69.59KB	0B ➖
Info	73.87KB	73.87KB	0B ➖
Label	70.08KB	70.08KB	0B ➖
LayerProvider	2.95KB	2.95KB	0B ➖
LegacyModal	76.28KB	76.28KB	0B ➖
LegacyModalContent	66.55KB	66.55KB	0B ➖
LegacyModalFooter	3.46KB	3.46KB	0B ➖
LegacyModalFooterButtons	20.44KB	20.44KB	0B ➖
LegacyModalHeader	72.56KB	72.56KB	0B ➖
Link	14.97KB	14.97KB	0B ➖
List	74.35KB	74.35KB	0B ➖
ListItem	66.99KB	66.99KB	0B ➖
ListItemAvatar	68.25KB	68.25KB	0B ➖
ListItemIcon	14.13KB	14.13KB	0B ➖
ListTitle	66.59KB	66.59KB	0B ➖
Loader	5.82KB	5.82KB	0B ➖
Menu	8.66KB	8.66KB	0B ➖
MenuDivider	5.65KB	5.65KB	0B ➖
MenuGridItem	7.22KB	7.22KB	0B ➖
MenuItem	78.7KB	78.7KB	0B ➖
MenuItemButton	71.68KB	71.68KB	0B ➖
MenuTitle	66.78KB	66.78KB	0B ➖
MenuButton	67.57KB	67.57KB	0B ➖
MultiStepIndicator	53.05KB	53.05KB	0B ➖
NumberField	74.49KB	74.49KB	0B ➖
LinearProgressBar	7.43KB	7.43KB	0B ➖
RadioButton	67.34KB	67.34KB	0B ➖
Search	72KB	72KB	0B ➖
Skeleton	6.19KB	6.19KB	0B ➖
Slider	75.62KB	75.62KB	0B ➖
SplitButton	68.37KB	68.37KB	0B ➖
SplitButtonMenu	8.81KB	8.81KB	0B ➖
Steps	73.08KB	73.08KB	0B ➖
Table	7.28KB	7.28KB	0B ➖
TableBody	68.25KB	68.25KB	0B ➖
TableCell	66.59KB	66.59KB	0B ➖
TableContainer	5.37KB	5.37KB	0B ➖
TableHeader	5.68KB	5.68KB	0B ➖
TableHeaderCell	73.72KB	73.72KB	0B ➖
TableRow	5.59KB	5.59KB	0B ➖
TableRowMenu	70.25KB	70.25KB	0B ➖
TableVirtualizedBody	72.99KB	72.99KB	0B ➖
Tab	65.22KB	65.22KB	0B ➖
TabList	8.92KB	8.92KB	0B ➖
TabPanel	5.35KB	5.35KB	0B ➖
TabPanels	5.94KB	5.94KB	0B ➖
TabsContext	5.54KB	5.54KB	0B ➖
Text	66.37KB	66.37KB	0B ➖
TextArea	67.69KB	67.69KB	0B ➖
TextField	70.95KB	70.95KB	0B ➖
TextWithHighlight	65.5KB	65.5KB	0B ➖
ThemeProvider	4.69KB	4.69KB	0B ➖
Tipseen	72.89KB	72.89KB	0B ➖
TipseenContent	73.39KB	73.39KB	0B ➖
TipseenImage	73.19KB	73.19KB	0B ➖
TipseenMedia	72.98KB	72.98KB	0B ➖
TipseenWizard	75.65KB	75.65KB	0B ➖
Toast	75.66KB	75.66KB	0B ➖
ToastButton	18.85KB	18.85KB	0B ➖
ToastLink	15.22KB	15.22KB	0B ➖
Toggle	68.08KB	68.08KB	0B ➖
Tooltip	64.43KB	64.43KB	0B ➖
TransitionView	37.68KB	37.68KB	0B ➖
VirtualizedGrid	12.58KB	12.58KB	0B ➖
VirtualizedList	12.36KB	12.36KB	0B ➖

---

📊 Summary:

• Total Base Size: 5.12MB
• Total PR Size: 5.12MB
• Total Difference: +0B

[qodo-merge-for-open-source]

CI Feedback 🧐

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: Test / Test

Failed stage: Run /./.github/actions/download-builds [❌]

Failure summary: The action failed because actions/download-artifact@v4 could not find the artifact named ci-builds-18554206419-2 for run-id 18554206419. - Error at line 1941: "Artifact not found for name: ci-builds-18554206419-2" - Likely causes: the artifact with that name was never uploaded in the referenced workflow run, was uploaded under a different name, or has expired/been deleted. Also ensure compatible versions of upload/download-artifact were used.

Relevant error logs: 1: ##[group]Runner Image Provisioner 2: Hosted Compute Agent ... 133: * [new branch] feature/moro/disabled-legacy-editable-heading-text-selection -> origin/feature/moro/disabled-legacy-editable-heading-text-selection 134: * [new branch] feature/moshe/auto_scroll_after_back_on_store -> origin/feature/moshe/auto_scroll_after_back_on_store 135: * [new branch] feature/moshe/vulcan_upgrade -> origin/feature/moshe/vulcan_upgrade 136: * [new branch] feature/sergeyro/icon-deprecate-clickable -> origin/feature/sergeyro/icon-deprecate-clickable 137: * [new branch] feature/shanab/input-type-time -> origin/feature/shanab/input-type-time 138: * [new branch] fix-add-tslib -> origin/fix-add-tslib 139: * [new branch] fix-chromatic-action -> origin/fix-chromatic-action 140: * [new branch] fix-dialog-show-contextmenu-default-menu -> origin/fix-dialog-show-contextmenu-default-menu 141: * [new branch] fix-dropdown-spec -> origin/fix-dropdown-spec 142: * [new branch] fix-showHideEvent-in-dialog-story -> origin/fix-showHideEvent-in-dialog-story 143: * [new branch] fix/combobox-spacings-9062326510 -> origin/fix/combobox-spacings-9062326510 144: * [new branch] fix/modal-focus -> origin/fix/modal-focus 145: * [new branch] fix/orhal/playwright-install-performance-fix -> origin/fix/orhal/playwright-install-performance-fix 146: * [new branch] fix/yossi/test-focus-lock-esm -> origin/fix/yossi/test-focus-lock-esm 147: * [new branch] gh-pages -> origin/gh-pages 148: * [new branch] lint-error-fixes -> origin/lint-error-fixes 149: * [new branch] master -> origin/master ... 1876: Created: src/react/WrapText.tsx 1877: Created: index.ts 1878: �[2K�[1G�[2m$ node scripts/generate-lazy-icons.js�[22m 1879: Generated lazy components and index.ts for 272 icons. 1880: �[2K�[1G�[2m$ node scripts/generate-svg-index.js�[22m 1881: Generated index.ts for SVG exports in ./src/svg 1882: �[36m 1883: �[1msrc/react/index.ts, src/lazy/index.ts, src/svg/index.ts, src/iconsMetaData.ts�[22m → �[1mdist�[22m...�[39m 1884: �[32mcreated �[1mdist�[22m in �[1m44.9s�[22m�[39m 1885: �[2K�[1GDone in 51.37s. 1886: ##[endgroup] 1887: Lerna (powered by Nx) Successfully ran target build for 2 projects 1888: Done in 77.65s. 1889: ##[group]Run if [[ -n "$(git status --porcelain yarn.lock)" ]]; then 1890: �[36;1mif [[ -n "$(git status --porcelain yarn.lock)" ]]; then�[0m 1891: �[36;1m echo "Error: yarn.lock has uncommitted changes. Please commit it."�[0m 1892: �[36;1m exit 1�[0m ... 1926: NPM_CONFIG_USERCONFIG: /home/runner/work/_temp/.npmrc 1927: NODE_AUTH_TOKEN: XXXXX-XXXXX-XXXXX-XXXXX 1928: ##[endgroup] 1929: ##[group]Run actions/download-artifact@v4 1930: with: 1931: name: ci-builds-18554206419-2 1932: path: packages/ 1933: merge-multiple: false 1934: repository: mondaycom/vibe 1935: run-id: 18554206419 1936: env: 1937: NPM_CONFIG_USERCONFIG: /home/runner/work/_temp/.npmrc 1938: NODE_AUTH_TOKEN: XXXXX-XXXXX-XXXXX-XXXXX 1939: ##[endgroup] 1940: Downloading single artifact 1941: ##[error]Unable to download artifact(s): Artifact not found for name: ci-builds-18554206419-2 1942: Please ensure that your artifact is not expired and the artifact was uploaded using a compatible version of toolkit/upload-artifact.