@acusti/date-picker 0.10.0 → 0.11.0

package/src/MonthCalendar.tsx

@@ -1,195 +0,0 @@
-import { Style } from '@acusti/styling';
-import clsx from 'clsx';
-import * as React from 'react';
-
-import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
-import {
-    getDateFromMonthAndDay,
-    getLastDateFromMonth,
-    getMonthFromDate,
-    getMonthNameFromMonth,
-    getYearFromMonth,
-} from './utils.js';
-
-export type Props = {
-    className?: string;
-    dateEnd?: Date | null | number | string;
-    dateEndPreview?: null | string;
-    dateStart?: Date | null | number | string;
-    isRange?: boolean;
-    month: number; // a unique numerical value representing the number of months since jan 1970
-    onChange?: (date: string) => void;
-    onChangeEndPreview?: (date: string) => void;
-    title?: string;
-};
-
-type DateRangeDays = [null | number, null | number, null | number];
-
-const { Fragment, useCallback } = React;
-
-const DAYS = Array(7).fill(null);
-
-export default function MonthCalendar({
-    className,
-    dateEnd,
-    dateEndPreview,
-    dateStart,
-    isRange,
-    month,
-    onChange,
-    onChangeEndPreview,
-    title,
-}: Props) {
-    const year = getYearFromMonth(month);
-    title = title ?? `${getMonthNameFromMonth(month)} ${year}`;
-    const firstDate = getDateFromMonthAndDay(month, 1);
-    const lastDate = getLastDateFromMonth(month);
-    const totalDays = lastDate.getDate();
-    const firstDay = firstDate.getDay();
-    const spacesAfterLastDay = 7 - (lastDate.getDay() % 7); // prettier-ignore
-    const daySpaces = totalDays + firstDay + spacesAfterLastDay;
-
-    const [dateRangeStartDay, dateRangeEndDay, dateRangeEndPreviewDay]: DateRangeDays = [
-        dateStart,
-        dateEnd,
-        dateEndPreview,
-    ].reduce(
-        (acc: DateRangeDays, date, index) => {
-            if (date != null && !(date instanceof Date)) {
-                date = new Date(date);
-            }
-            if (date == null || Number.isNaN(date.getTime())) return acc;
-
-            const dateMonth = getMonthFromDate(date);
-            if (dateMonth < month) acc[index] = -1;
-            else if (dateMonth > month) acc[index] = totalDays + 1;
-            else acc[index] = date.getDate();
-            if (index === 1) {
-                const startDay = acc[index - 1];
-                const endDay = acc[index];
-                // Ensure that end date is after start date and swap them if not
-                if (startDay != null && endDay != null && startDay > endDay) {
-                    acc[index - 1] = endDay;
-                    acc[index] = startDay;
-                }
-            }
-
-            return acc;
-        },
-        [null, null, null],
-    );
-
-    const handleClickDay = useCallback(
-        (event: React.SyntheticEvent<HTMLElement>) => {
-            const { date } = event.currentTarget.dataset;
-            if (date && onChange) onChange(date);
-        },
-        [onChange],
-    );
-
-    const handleMouseEnterDay = useCallback(
-        (event: React.SyntheticEvent<HTMLElement>) => {
-            if (isRange && onChangeEndPreview) {
-                const { date } = event.currentTarget.dataset;
-                if (date) onChangeEndPreview(date);
-            }
-        },
-        [isRange, onChangeEndPreview],
-    );
-
-    return (
-        <Fragment>
-            <Style href="@acusti/date-picker/MonthCalendar">{STYLES}</Style>
-            <div className={clsx(ROOT_CLASS_NAME, className)}>
-                <div className={`${ROOT_CLASS_NAME}-month-title`}>
-                    <h3 className={`${ROOT_CLASS_NAME}-month-title-text`}>{title}</h3>
-                </div>
-                <div className={`${ROOT_CLASS_NAME}-month-week`}>
-                    <div className="week-day-item">
-                        <span className="week-day-item-text">Su</span>
-                    </div>
-                    <div className="week-day-item">
-                        <span className="week-day-item-text">Mo</span>
-                    </div>
-                    <div className="week-day-item">
-                        <span className="week-day-item-text">Tu</span>
-                    </div>
-                    <div className="week-day-item">
-                        <span className="week-day-item-text">We</span>
-                    </div>
-                    <div className="week-day-item">
-                        <span className="week-day-item-text">Th</span>
-                    </div>
-                    <div className="week-day-item">
-                        <span className="week-day-item-text">Fr</span>
-                    </div>
-                    <div className="week-day-item">
-                        <span className="week-day-item-text">Sa</span>
-                    </div>
-                </div>
-                <div className={`${ROOT_CLASS_NAME}-month-days`}>
-                    {Array(Math.floor(daySpaces / 7))
-                        .fill(null)
-                        .map((_, weekIndex) => (
-                            <div
-                                className={`${ROOT_CLASS_NAME}-month-row`}
-                                key={`MonthRow-${weekIndex}`}
-                            >
-                                {DAYS.map((__, dayIndex) => {
-                                    dayIndex += weekIndex * 7;
-                                    const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
-                                    const isEmpty =
-                                        dayNumber < 1 || dayNumber > totalDays;
-                                    const date = isEmpty
-                                        ? null
-                                        : getDateFromMonthAndDay(month, dayNumber);
-                                    const isAfterDateRangeStart =
-                                        dateRangeStartDay != null &&
-                                        dayNumber > dateRangeStartDay;
-                                    const isBeforeDateRangeEnd =
-                                        (dateRangeEndDay == null &&
-                                            dateRangeEndPreviewDay != null &&
-                                            dayNumber < dateRangeEndPreviewDay) ||
-                                        (dateRangeEndDay != null &&
-                                            dayNumber < dateRangeEndDay);
-
-                                    return (
-                                        <button
-                                            className={clsx(
-                                                `${ROOT_CLASS_NAME}-month-day-item`,
-                                                {
-                                                    'end-date':
-                                                        !isEmpty &&
-                                                        dayNumber === dateRangeEndDay,
-                                                    'is-empty': isEmpty,
-                                                    'is-selected':
-                                                        !isEmpty &&
-                                                        isAfterDateRangeStart &&
-                                                        isBeforeDateRangeEnd,
-                                                    'start-date':
-                                                        !isEmpty &&
-                                                        dayNumber === dateRangeStartDay,
-                                                },
-                                            )}
-                                            data-date={date?.toISOString()}
-                                            disabled={isEmpty}
-                                            key={`MonthDayItem-${dayNumber}`}
-                                            onClick={handleClickDay}
-                                            onMouseEnter={handleMouseEnterDay}
-                                            type="button"
-                                        >
-                                            {isEmpty ? null : (
-                                                <span className="month-day-item-text">
-                                                    {dayNumber}
-                                                </span>
-                                            )}
-                                        </button>
-                                    );
-                                })}
-                            </div>
-                        ))}
-                </div>
-            </div>
-        </Fragment>
-    );
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export { default as DatePicker } from './DatePicker.js';
-export { default as MonthCalendar } from './MonthCalendar.js';
-export * from './utils.js';

package/src/styles/date-picker.ts

@@ -1,62 +0,0 @@
-export const ROOT_CLASS_NAME = 'uktdatepicker';
-
-export const STYLES = `
-.${ROOT_CLASS_NAME} {
-    display: flex;
-    box-sizing: border-box;
-    padding: 40px 60px 60px;
-    flex: 1 1 auto;
-    position: relative;
-    max-width: 450px;
-}
-
-.${ROOT_CLASS_NAME}.two-up {
-    max-width: 820px;
-}
-
-.${ROOT_CLASS_NAME}-range-arrow-wrap {
-    position: absolute;
-    top: 30px;
-    left: 0px;
-    display: flex;
-    justify-content: space-between;
-    height: 0px;
-    width: 100%;
-    padding: 0px 60px;
-    box-sizing: border-box;
-}
-
-.${ROOT_CLASS_NAME}-range-arrow {
-    width: 35px;
-    height: 35px;
-    text-align: center;
-    cursor: pointer;
-}
-
-.${ROOT_CLASS_NAME}-range-arrow.disabled {
-    color: #ccc;
-    cursor: default;
-}
-
-.${ROOT_CLASS_NAME}-range-arrow:active {
-    transform: translateY(1px);
-}
-
-.${ROOT_CLASS_NAME}-range-arrow.left-arrow:after,
-.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
-    content: "‹";
-    font-size: 24px;
-    line-height: 35px;
-    font-weight: bold;
-}
-
-.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
-    content: "›";
-}
-
-.${ROOT_CLASS_NAME}-month-container {
-    display: flex;
-    flex: 1 1 auto;
-    justify-content: space-between;
-}
-`;

package/src/styles/month-calendar.ts

@@ -1,154 +0,0 @@
-export const ROOT_CLASS_NAME = 'uktmonthcalendar';
-
-export const STYLES = `
-.${ROOT_CLASS_NAME} {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    box-sizing: border-box;
-    max-width: 325px;
-}
-
-.${ROOT_CLASS_NAME}-month-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    padding-bottom: 25px;
-}
-
-h3.${ROOT_CLASS_NAME}-month-title-text {
-    font-size: 18px;
-    line-height: 23px;
-    font-weight: 600;
-    color: #000;
-    margin: 0px;
-    text-align: center;
-}
-
-.${ROOT_CLASS_NAME}-month-week {
-    flex: 0 0 auto;
-    display: grid;
-    grid-column-gap: 0px;
-    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
-    grid-auto-flow: dense;
-    box-sizing: border-box;
-    padding-bottom: 12px;
-}
-
-.${ROOT_CLASS_NAME}-month-week .week-day-item {
-    flex: 1 1 auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.${ROOT_CLASS_NAME}-month-week span.week-day-item-text {
-    text-align: center;
-    font-size: 13px;
-    line-height: 21px;
-    margin: 0px;
-    color: #9a9a9a;
-}
-
-.${ROOT_CLASS_NAME}-month-days {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-}
-
-.${ROOT_CLASS_NAME}-month-row {
-    flex: 1 1 auto;
-    display: grid;
-    grid-column-gap: 0px;
-    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
-    grid-auto-flow: dense;
-    margin-bottom: 1px;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    height: 46px;
-    width: 46px;
-    cursor: pointer;
-    border: none;
-    background-color: transparent;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item:disabled {
-    cursor: auto;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item.is-selected {
-    background-color: #f8f8f8;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item.start-date {
-    background-color: #f8f8f8;
-    border-top-left-radius: 50%;
-    border-bottom-left-radius: 50%;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item.start-date:after {
-    background-color: #000;
-    opacity: 1;
-    visibility: visible;
-}
-.${ROOT_CLASS_NAME}-month-day-item.start-date span.month-day-item-text {
-    color: #fff;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item.end-date {
-    background-color: #f8f8f8;
-    border-top-right-radius: 50%;
-    border-bottom-right-radius: 50%;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item.end-date:after {
-    background-color: #000;
-    opacity: 1;
-    visibility: visible;
-}
-.${ROOT_CLASS_NAME}-month-day-item.end-date span.month-day-item-text {
-    color: #fff;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item:hover:after {
-    opacity: 1;
-    visibility: visible;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item:after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-    border-radius: 50%;
-    border: 1px solid #000;
-    width: 43px;
-    height: 43px;
-    transition: opacity 0.25s ease-in-out;
-    opacity: 0;
-    visibility: hidden;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item.is-empty:after {
-    content: none;
-}
-
-.${ROOT_CLASS_NAME}-month-day-item span.month-day-item-text {
-    text-align: center;
-    font-size: 13px;
-    line-height: 21px;
-    margin: 0px;
-    color: #000;
-    position: relative;
-    z-index: 1;
-}
-`;

package/src/utils.test.ts

@@ -1,163 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import {
-    getDateFromMonthAndDay,
-    getLastDateFromMonth,
-    getMonthFromDate,
-    getMonthNameFromMonth,
-    getYearFromMonth,
-} from './utils.js';
-
-const INVALID_DATE = new Date('');
-
-describe('@acusti/date-picker', () => {
-    describe('utils', () => {
-        describe('getMonthFromDate', () => {
-            it('returns the correct month digit for a post-unix epoch month', () => {
-                expect(getMonthFromDate(new Date(1970, 0, 8))).toBe(0); // january 8, 1970
-                expect(getMonthFromDate(new Date(1971, 11, 1))).toBe(23); // november 1, 1971
-            });
-
-            it('returns the correct month digit for a pre-unix epoch month', () => {
-                expect(getMonthFromDate(new Date(1969, 11, 31))).toBe(-1); // december 31, 1969
-                expect(getMonthFromDate(new Date(1968, 3, 30))).toBe(-21); // april 30, 1968
-            });
-
-            it('returns the correct month digit based on UTC time if asUTC is true', () => {
-                const date = new Date('1970-01-01T00:00:00.000Z');
-                expect(getMonthFromDate(date, true)).toBe(0);
-                // if test is run in a timezone behind UTC, ommitting asUTC returns -1
-                // if not, the month should be the same with or without asUTC flag
-                expect(getMonthFromDate(date)).toBe(
-                    date.getTimezoneOffset() >= 60 ? -1 : 0,
-                );
-            });
-
-            it('returns NaN for an Invalid Date', () => {
-                expect(getMonthFromDate(INVALID_DATE)).toBe(NaN);
-            });
-        });
-
-        describe('getYearFromMonth', () => {
-            it('returns the correct year for a post-unix epoch date', () => {
-                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 1)))).toBe(
-                    1970,
-                );
-                expect(getYearFromMonth(getMonthFromDate(new Date(2048, 4, 31)))).toBe(
-                    2048,
-                );
-            });
-
-            it('returns the correct year digit for a pre-unix epoch date', () => {
-                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 0)))).toBe(
-                    1969,
-                );
-                expect(getYearFromMonth(getMonthFromDate(new Date(100, 11, 31)))).toBe(
-                    100,
-                );
-            });
-
-            it('returns NaN for an Invalid Date', () => {
-                expect(getYearFromMonth(getMonthFromDate(INVALID_DATE))).toBe(NaN);
-            });
-        });
-
-        describe('getMonthNameFromMonth', () => {
-            it('returns the correct month name for a post-unix epoch month', () => {
-                expect(
-                    getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19))),
-                ).toBe('June');
-            });
-
-            it('returns the correct month name for a pre-unix epoch month', () => {
-                expect(
-                    getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 2))),
-                ).toBe('June');
-            });
-
-            it('returns an empty string if given NaN (e.g. if dealing with an Invalid Date)', () => {
-                expect(getMonthNameFromMonth(getMonthFromDate(INVALID_DATE))).toBe('');
-            });
-        });
-
-        describe('getDateFromMonthAndDay', () => {
-            it('returns the date of the specified day for a post-unix epoch month', () => {
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(2008, 2, 13)), 1),
-                ).toEqual(new Date(2008, 2, 1));
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(1999, 11, 1)), 31),
-                ).toEqual(new Date(1999, 11, 31));
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(2000, 0, 0)), 31),
-                ).toEqual(new Date(1999, 11, 31));
-            });
-
-            it('returns the correct date for a pre-unix epoch month', () => {
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30),
-                ).toEqual(new Date(1865, 5, 30));
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1),
-                ).toEqual(new Date(100, 11, 1));
-            });
-
-            it('returns date for start of day as UTC time if asUTC is true', () => {
-                expect(
-                    getDateFromMonthAndDay(
-                        getMonthFromDate(new Date(1865, 5, 2)),
-                        30,
-                        true,
-                    ),
-                ).toEqual(new Date(Date.UTC(1865, 5, 30)));
-                expect(
-                    getDateFromMonthAndDay(
-                        getMonthFromDate(new Date(101, 0, 0)),
-                        1,
-                        true,
-                    ),
-                ).toEqual(new Date(Date.UTC(100, 11, 1)));
-            });
-
-            it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
-                expect(getDateFromMonthAndDay(getMonthFromDate(INVALID_DATE), 1)).toEqual(
-                    INVALID_DATE,
-                );
-            });
-        });
-
-        describe('getLastDateFromMonth', () => {
-            it('returns the date of the last day for a post-unix epoch month', () => {
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(2008, 2, 13))),
-                ).toEqual(new Date(2008, 2, 31));
-                // february in a leap year
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(2024, 1, 23))),
-                ).toEqual(new Date(2024, 1, 29));
-                // february in a non-leap year
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(1985, 1, 1))),
-                ).toEqual(new Date(1985, 1, 28));
-            });
-
-            it('returns the correct date for a pre-unix epoch month', () => {
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2))),
-                ).toEqual(new Date(1865, 5, 30));
-            });
-
-            it('returns date for start of day as UTC time if asUTC is true', () => {
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)), true),
-                ).toEqual(new Date(Date.UTC(1865, 5, 30)));
-            });
-
-            it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
-                expect(getLastDateFromMonth(getMonthFromDate(INVALID_DATE))).toEqual(
-                    INVALID_DATE,
-                );
-            });
-        });
-    });
-});

package/src/utils.ts

@@ -1,53 +0,0 @@
-// The following utils work on a “month” as a unique numerical value
-// representing the number of months since the unix epoch (jan 1970)
-const START_YEAR = 1970;
-const MONTH_NAMES = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-];
-
-const getYearFromDate = (date: Date, asUTC?: boolean) =>
-    (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;
-
-export const getMonthFromDate = (date: Date, asUTC?: boolean) => {
-    const yearAsMonths = getYearFromDate(date, asUTC) * 12;
-    return yearAsMonths + (asUTC ? date.getUTCMonth() : date.getMonth());
-};
-
-export const getYearFromMonth = (month: number) => Math.floor(month / 12) + START_YEAR;
-
-export const getMonthNameFromMonth = (month: number): string => {
-    let index = month % 12;
-    if (Number.isNaN(index)) return '';
-    if (index < 0) index = 12 + index;
-    return MONTH_NAMES[index];
-};
-
-export const getMonthAbbreviationFromMonth = (month: number) => {
-    const monthName = getMonthNameFromMonth(month);
-    if (monthName === 'September') return 'Sept';
-    return monthName.substring(0, 3);
-};
-
-export const getDateFromMonthAndDay = (month: number, day: number, asUTC?: boolean) => {
-    const monthIn12 = month < 0 ? (12 - Math.abs(month % 12)) % 12 : month % 12;
-    const year = getYearFromMonth(month);
-    return asUTC
-        ? new Date(Date.UTC(year, monthIn12, day))
-        : new Date(year, monthIn12, day);
-};
-
-export const getLastDateFromMonth = (month: number, asUTC?: boolean) => {
-    // day 0 of the next month is the last day of the current month
-    return getDateFromMonthAndDay(month + 1, 0, asUTC);
-};