feat(react/date-pickers)!: deprecate Calendar and replace it with DateCalendar

[cheton]

TODOs

• Introduce a locale prop to determine the starting day of the week, or consider renaming the firstDayOfWeek prop to weekStartsOn.
• DateRangeCalendar

import { isSameDay, isWithinInterval } from 'date-fns';
import React, { useState, useCallback } from 'react';
import { Box } from '../../box';
import DateCalendar from '../DateCalendar';

const DateRangeCalendar = ({
  value, // Controlled value
  defaultValue = [null, null], // Uncontrolled initial value
  onChange, // Callback for value change
  ...rest
}) => {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const [hoveredDate, setHoveredDate] = useState(null);

  const isControlled = value !== undefined;
  const [startDate, endDate] = isControlled ? value : internalValue;

  const handleDateChange = useCallback(
    (date) => {
      let newValue;
      if (!startDate || (startDate && endDate)) {
        // Reset selection or start a new range
        newValue = [date, null];
      } else {
        // Set the end date
        if (date >= startDate) {
          newValue = [startDate, date];
        } else {
          newValue = [date, startDate];
        }
      }

      if (!isControlled) {
        setInternalValue(newValue);
      }
      onChange?.(newValue);
    },
    [startDate, endDate, onChange, isControlled]
  );

  const isDateInRange = useCallback(
    (date) => {
      if (startDate && endDate) {
        return isWithinInterval(date, { start: startDate, end: endDate });
      }
      if (startDate && hoveredDate) {
        const start = startDate < hoveredDate ? startDate : hoveredDate;
        const end = startDate > hoveredDate ? startDate : hoveredDate;
        return isWithinInterval(date, { start, end });
      }
      return false;
    },
    [startDate, endDate, hoveredDate]
  );

  const renderDay = useCallback(
    (day) => {
      const isSelectedStart = startDate && isSameDay(day, startDate);
      const isSelectedEnd = endDate && isSameDay(day, endDate);
      const isInRange = isDateInRange(day);

      const style = {
        backgroundColor: isSelectedStart || isSelectedEnd ? 'blue' : isInRange ? 'lightblue' : 'transparent',
        color: isSelectedStart || isSelectedEnd ? 'white' : 'black',
        borderRadius: isSelectedStart ? '50%' : isSelectedEnd ? '50%' : '0%',
      };

      return (
        <div style={style}>
          {day.getDate()}
        </div>
      );
    },
    [startDate, endDate, isDateInRange]
  );

  return (
    <Box display="flex" gap="16px" {...rest}>
      <DateCalendar
        value={startDate}
        onChange={handleDateChange}
        onDayHover={setHoveredDate}
        //renderDay={renderDay}
      />
      <DateCalendar
        value={endDate}
        onChange={handleDateChange}
        onDayHover={setHoveredDate}
        //renderDay={renderDay}
      />
    </Box>
  );
};

export default DateRangeCalendar;

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

⚠️ No Changeset found

Latest commit: ae03b20

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Bundle Report

Changes will increase total bundle size by 5.22kB (0.19%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
@tonic-ui/react-cjs	832.62kB	2.64kB (0.32%) ⬆️
@tonic-ui/react-esm	780.56kB	2.58kB (0.33%) ⬆️

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

Attention: Patch coverage is 82.85714% with 6 lines in your changes missing coverage. Please review.

Project coverage is 78.41%. Comparing base (a6597a2) to head (ae03b20).
Report is 1 commits behind head on v2.

Files with missing lines	Patch %	Lines
packages/react/src/deprecated/Calendar.js	20.00%	4 Missing ⚠️
...eact/src/date-pickers/DateCalendar/DateCalendar.js	86.66%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##               v2     #961      +/-   ##
==========================================
- Coverage   78.46%   78.41%   -0.06%     
==========================================
  Files         403      404       +1     
  Lines        6692     6704      +12     
==========================================
+ Hits         5251     5257       +6     
- Misses       1441     1447       +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[trendmicro-frontend-bot]

Tonic UI Demo

On 2024-12-21 13:12:54 +0000, PR #961 (ae03b20) was successfully deployed. You can view it at the following link:
https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-961/