colibri-ui 0.8.1 → 0.8.3

package/src/components/Calendar/components/Presets/index.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-import classNames from "classnames/bind";
-import Button from "../../../Button";
-import styles from "./index.module.scss";
-
-const clx = classNames.bind(styles);
-
-export enum PRESETS {
-  TODAY = "today",
-  TOMORROW = "tomorrow",
-  WEEKENDS = "weekends",
-  CURWEEK = "currWeek",
-  NEXTWEEK = "nextWeek",
-}
-
-export type Preset = {
-  name: string;
-  date: string;
-  period: number;
-};
-
-type Props = {
-  presets: Preset[];
-  onPresetSelect(preset: Preset): void;
-};
-
-export const Presets: React.FunctionComponent<Props> = ({
-  presets,
-  onPresetSelect,
-}) => (
-  <div data-testid="presets">
-    <div className={clx(styles["native-scroll-inner"])}>
-      <div className={clx(styles.inner)}>
-        {presets.map((preset, ...rest) => (
-          <div className={clx(styles.item)} key={`preset=${rest[0]}`}>
-            <Button
-              variant="outline"
-              onClick={() => onPresetSelect(preset)}
-              size="m"
-            >
-              {preset.name}
-            </Button>
-          </div>
-        ))}
-      </div>
-    </div>
-  </div>
-);

package/src/components/Calendar/index.props.ts

@@ -1,34 +0,0 @@
-import type { Preset } from "./components/Presets";
-
-export type CalendarPayload = {
-  date: string;
-  period: number;
-};
-
-export type CalendarTitleSize =
-  | "xs"
-  | "s"
-  | "m"
-  | "l"
-  | "h1"
-  | "h2"
-  | "h3"
-  | "h4"
-  | "h5"
-  | "h6";
-
-export type CalendarProps = {
-  today: string;
-  selectedDate?: string;
-  selectedPeriod?: number;
-  canSelectRange?: boolean;
-  activeDates?: string[];
-  datePresets?: Preset[];
-  availableDates?: string[];
-  onChange?: (payload: CalendarPayload) => void;
-  onCancel?: () => void;
-  withContinueButton?: boolean;
-  className?: string;
-  minWidth?: number;
-  titleSize?: CalendarTitleSize;
-};

package/src/components/Calendar/index.stories.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import Calendar from ".";
-import type { Meta } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { toISODate } from "../helpers/date";
-import { getPresets } from "./utils/getPresets";
-import { PRESETS } from "./components/Presets";
-
-const meta: Meta<typeof Calendar> = {
-  title: "UI/Calendar",
-  parameters: {
-    layout: "centered",
-  },
-  args: { onChange: fn()},
-  component: Calendar,
-} satisfies Meta<typeof Calendar>;
-
-export default meta;
-
-const Template = (args) => {
-  return (
-    <Calendar
-      {...args}
-      today={toISODate(new Date())}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {};
-
-export const withContinueButton = Template.bind({});
-
-withContinueButton.args = {
-  withContinueButton: true
-};
-
-export const withPresets = Template.bind({});
-
-withPresets.args = {
-  datePresets: getPresets([PRESETS.TODAY, PRESETS.TOMORROW]),
-  withContinueButton: true,
-  canSelectRange: true
-};

package/src/components/Calendar/index.tsx

@@ -1,251 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import classNames from "classnames/bind";
-import { requestIdleCallback } from "../libs/requestIdleCallback";
-import { getDaysDiff } from "../helpers/date";
-import { ArrowNext } from "../Icons";
-import { Month } from "./components/Month/Month";
-import { getStartMonth } from "./utils/getStartMonth";
-import { Presets } from "./components/Presets";
-import { getNumberOfMonthsBetweenDates } from "./utils/getNumberOfMonthsBetweenDates";
-import { ContinueButton } from "./components/ContinueButton";
-import styles from "./index.module.scss";
-import type { MouseEvent } from "react";
-import type { CalendarProps } from "./index.props";
-import type { Preset } from "./components/Presets";
-
-const clx = classNames.bind(styles);
-
-const idleCallbackOptions = {
-  timeout: 1000,
-};
-
-const Calendar: React.FC<CalendarProps> = ({
-  today,
-  selectedDate: initialSelectedDate,
-  selectedPeriod: initialSelectedPeriod,
-  activeDates,
-  datePresets,
-  availableDates,
-  canSelectRange,
-  onChange,
-  onCancel,
-  minWidth = 360,
-  withContinueButton = false,
-  className,
-  titleSize = "h3",
-}) => {
-  const $root = useRef<HTMLDivElement>(null);
-
-  const startMonth = getStartMonth({ today, activeDates });
-
-  const [selectedDate, setSelectedDate] = useState(initialSelectedDate);
-  const [selectedPeriod, setSelectedPeriod] = useState(initialSelectedPeriod);
-  const [currentMonthOffset, setCurrentMonthOffset] = useState(() => {
-    if (initialSelectedDate) {
-      return getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
-    } else if (activeDates && activeDates.length) {
-      return getNumberOfMonthsBetweenDates(startMonth, activeDates.sort()[0]);
-    }
-    return 0;
-  });
-  const [contentWidth, setContentWidth] = useState(0);
-  const [isRangeCompleted, setIsRangeCompleted] = useState(true);
-
-  useEffect(() => {
-    setContentWidth($root.current?.offsetWidth || 0);
-  }, []);
-
-  const showPrevMonth = (event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setCurrentMonthOffset((prev) => prev - 1);
-  };
-
-  const showNextMonth = (event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setCurrentMonthOffset((prev) => prev + 1);
-  };
-
-  const selectDate = useCallback(
-    (date: string, period: number, rangeCompleted: boolean) => {
-      setSelectedDate(date);
-      setSelectedPeriod(period);
-      setIsRangeCompleted(rangeCompleted);
-      setCurrentMonthOffset(getNumberOfMonthsBetweenDates(startMonth, date));
-    },
-    [startMonth],
-  );
-
-  const handleDayClick = useCallback(
-    (date: string) => {
-      if (canSelectRange && selectedDate && !isRangeCompleted) {
-        const [startDate, endDate] = [date, selectedDate].sort();
-        const period = getDaysDiff(new Date(startDate), new Date(endDate)) + 1;
-
-        if (onChange) {
-          onChange({
-            date,
-            period,
-          });
-        }
-
-        requestIdleCallback(
-          () => selectDate(startDate, period, true),
-          idleCallbackOptions,
-        );
-      } else {
-        if (onChange) {
-          onChange({
-            date,
-            period: 1,
-          });
-        }
-
-        requestIdleCallback(
-          () => selectDate(date, 1, false),
-          idleCallbackOptions,
-        );
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [canSelectRange, selectedDate, isRangeCompleted, selectDate],
-  );
-
-  const handlePresetSelect = useCallback(
-    (preset: Preset) => {
-      requestIdleCallback(
-        () => selectDate(preset.date, preset.period, true),
-        idleCallbackOptions,
-      );
-    },
-    [selectDate],
-  );
-
-  const commitSelectedDates = useCallback(() => {
-    if (selectedDate && selectedPeriod) {
-      if (onCancel) {
-        onCancel();
-      }
-      if (onChange) {
-        onChange({
-          date: selectedDate,
-          period: selectedPeriod,
-        });
-      }
-    }
-  }, [selectedDate, selectedPeriod, onChange, onCancel]);
-
-  const cancelCalendar = useCallback(() => {
-    if (onCancel) {
-      onCancel();
-    }
-  }, [onCancel]);
-
-  const getMonthStartDate = useCallback(
-    (shiftIndex: number) => {
-      const startDate = new Date(startMonth);
-      startDate.setMonth(startDate.getMonth() + shiftIndex);
-      return startDate;
-    },
-    [startMonth],
-  );
-
-  const commonAttrs = {
-    selectedDate,
-    selectedPeriod,
-    activeDates,
-    availableDates,
-    isRangeCompleted,
-    onDayClick: handleDayClick,
-  };
-
-  return (
-    <div
-      className={clx(styles.root, className)}
-      style={{ minWidth: `${minWidth}px` }}
-      data-testid="calendar"
-      ref={$root}
-    >
-      <div>
-        {contentWidth ? (
-          <div
-            data-component="Months"
-            className={clx(styles.months)}
-            style={{
-              transform: `translate3D(${-1 * currentMonthOffset * contentWidth}px, 0, 0)`,
-            }}
-          >
-            {[
-              currentMonthOffset - 1,
-              currentMonthOffset,
-              currentMonthOffset + 1,
-            ]
-              .filter((index) => index >= 0)
-              .map((index) => {
-                const attrs = {
-                  ...commonAttrs,
-                  today,
-                  startDate: getMonthStartDate(index),
-                  offsetLeft: index * contentWidth,
-                };
-
-                return (
-                  <Month
-                    {...attrs}
-                    titleSize={titleSize}
-                    key={`month-${index}`}
-                  />
-                );
-              })}
-          </div>
-        ) : (
-          <Month
-            titleSize={titleSize}
-            today={today}
-            startDate={getMonthStartDate(currentMonthOffset)}
-            offsetLeft={0}
-            {...commonAttrs}
-          />
-        )}
-        <button
-          className={clx(styles["month-control"], styles["month-control-prev"])}
-          onClick={showPrevMonth}
-          disabled={currentMonthOffset <= 0}
-          type="button"
-          role="button"
-          aria-label="Prev"
-        >
-          <ArrowNext className={clx(styles["month-control-prev-arrow"])} />
-        </button>
-        <button
-          className={clx(styles["month-control"], styles["month-control-next"])}
-          onClick={showNextMonth}
-          disabled={currentMonthOffset >= 11}
-          type="button"
-          role="button"
-          aria-label="Next"
-        >
-          <ArrowNext className={clx(styles["month-control-next-arrow"])} />
-        </button>
-      </div>
-      {datePresets && (
-        <Presets presets={datePresets} onPresetSelect={handlePresetSelect} />
-      )}
-      {withContinueButton && (
-        <ContinueButton
-          isChanged={
-            selectedDate !== initialSelectedDate ||
-            selectedPeriod !== initialSelectedPeriod
-          }
-          selectedDate={selectedDate}
-          selectedPeriod={selectedPeriod}
-          onContinue={commitSelectedDates}
-          onCancel={cancelCalendar}
-        />
-      )}
-    </div>
-  );
-};
-
-export default Calendar;

package/src/components/Calendar/utils/__tests__/getNumberOfMonthsBetweenDates.test.ts

@@ -1,27 +0,0 @@
-import { getNumberOfMonthsBetweenDates } from "../getNumberOfMonthsBetweenDates";
-
-describe("<Calendar/> - utils - getNumberOfMonthsBetweenDates", () => {
-  it("should return proper number of dates", () => {
-    const start = "2019-01-15";
-
-    expect(getNumberOfMonthsBetweenDates(start, "2019-01-01")).toBe(0);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-01-15")).toBe(0);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-01-25")).toBe(0);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-02-01")).toBe(1);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-02-05")).toBe(1);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-03-10")).toBe(2);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-04-15")).toBe(3);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-05-20")).toBe(4);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-06-25")).toBe(5);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-07-30")).toBe(6);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-08-31")).toBe(7);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-12-01")).toBe(11);
-    expect(getNumberOfMonthsBetweenDates(start, "2019-12-31")).toBe(11);
-
-    expect(getNumberOfMonthsBetweenDates(start, "2020-01-01")).toBe(12);
-    expect(getNumberOfMonthsBetweenDates(start, "2020-01-15")).toBe(12);
-    expect(getNumberOfMonthsBetweenDates(start, "2020-01-25")).toBe(12);
-
-    expect(getNumberOfMonthsBetweenDates(start, "2021-01-25")).toBe(24);
-  });
-});

package/src/components/Calendar/utils/getMonthWeeks.ts

@@ -1,135 +0,0 @@
-import { leadingZeros } from "../../libs/numbers/leadingZeros";
-
-type Day = {
-  day: number;
-  isDummy?: boolean;
-  isActive?: boolean;
-  isSelected?: boolean;
-  isStartOfSelection?: boolean;
-  isEndOfSelection?: boolean;
-  isInSelectedRange?: boolean;
-};
-
-type Week = Day[];
-
-type Options = {
-  today: string;
-  startDate: Date;
-  activeDays?: string[];
-  selectedDate?: string;
-  selectedPeriod?: number;
-  availableDates?: string[];
-};
-
-const dummyDay: Day = {
-  day: 0,
-  isDummy: true,
-};
-
-function getDateDayInWeek(date: Date) {
-  const day = date.getDay() - 1;
-
-  return day >= 0 ? day : 6;
-}
-
-function doubleDigits(v: number) {
-  return leadingZeros(v, 2);
-}
-
-function formatToComparable(date: Date) {
-  return new Date(
-    [
-      date.getFullYear(),
-      doubleDigits(date.getMonth() + 1),
-      doubleDigits(date.getDate()),
-    ].join("-"),
-  ).getTime();
-}
-
-function checkIfDateIsAvailable(date: number, options: Options) {
-  const { availableDates, today } = options;
-
-  const todayCompatible = formatToComparable(new Date(today));
-
-  const availableDatesComparable =
-    availableDates &&
-    availableDates.length > 0 &&
-    availableDates.map((_date) => formatToComparable(new Date(_date)));
-
-  const isAvailableDate = availableDatesComparable
-    ? availableDatesComparable.includes(date)
-    : true;
-
-  return date >= todayCompatible && isAvailableDate;
-}
-
-function getSelectedDates(options: Options) {
-  const period = options.selectedPeriod ? options.selectedPeriod - 1 : 0;
-  const dateFrom = options.selectedDate
-    ? new Date(options.selectedDate)
-    : undefined;
-  const dateTo = dateFrom
-    ? new Date(dateFrom.getTime() + 24 * 60 * 60 * 1000 * period)
-    : undefined;
-
-  return {
-    selectedDateFrom: dateFrom ? formatToComparable(dateFrom) : undefined,
-    selectedDateTo: dateTo ? formatToComparable(dateTo) : undefined,
-  };
-}
-
-export function getMonthWeeks(options: Options): Week[] {
-  const { selectedDateFrom, selectedDateTo } = getSelectedDates(options);
-
-  const currMonth = options.startDate.getMonth();
-  const weeks: Week[] = [[]];
-
-  let currWeek = weeks[weeks.length - 1];
-  const currDate = new Date(options.startDate);
-
-  {
-    // Prepending wirst week with dummy days
-    let dayInWeek = getDateDayInWeek(currDate);
-
-    while (dayInWeek) {
-      weeks[0].push(dummyDay);
-      dayInWeek -= 1;
-    }
-  }
-
-  while (currDate.getMonth() === currMonth) {
-    const currCompareDate = formatToComparable(currDate);
-    const isStartOfSelection = currCompareDate === selectedDateFrom;
-    const isEndOfSelection = currCompareDate === selectedDateTo;
-
-    currWeek.push({
-      day: currDate.getDate(),
-      isActive: checkIfDateIsAvailable(currCompareDate, options),
-      isSelected: isStartOfSelection || isEndOfSelection,
-      isStartOfSelection,
-      isEndOfSelection,
-      isInSelectedRange:
-        !!selectedDateFrom &&
-        !!selectedDateTo &&
-        currCompareDate > selectedDateFrom &&
-        currCompareDate < selectedDateTo,
-    });
-
-    if (currWeek.length === 7) {
-      currWeek = [];
-      weeks.push(currWeek);
-    }
-
-    currDate.setDate(currDate.getDate() + 1);
-  }
-
-  {
-    const lastWeek = weeks[weeks.length - 1];
-
-    while (lastWeek.length < 7) {
-      lastWeek.push(dummyDay);
-    }
-  }
-
-  return weeks;
-}

package/src/components/Calendar/utils/getNumberOfMonthsBetweenDates.ts

@@ -1,28 +0,0 @@
-/**
- * Returns number of months between dates
- */
-
-function normalizeDate(date: string) {
-  return date.split("-").slice(0, 2).join("-");
-}
-
-export function getNumberOfMonthsBetweenDates(
-  startDate: string,
-  activeDate: string,
-) {
-  const start = new Date(normalizeDate(startDate));
-  const active = new Date(normalizeDate(activeDate));
-  const offset = active > start ? 1 : -1;
-
-  let count = 0;
-
-  while (
-    start.getFullYear() !== active.getFullYear() ||
-    start.getMonth() !== active.getMonth()
-  ) {
-    count += offset;
-    start.setMonth(start.getMonth() + offset);
-  }
-
-  return count;
-}

package/src/components/Calendar/utils/getPresets.ts

@@ -1,114 +0,0 @@
-import { toISODate } from "../../helpers/date";
-import { PRESETS } from "../components/Presets";
-
-export type DatePreset = {
-  name: string;
-  date: string;
-  period: number;
-};
-
-function format(date: Date): string {
-  return toISODate(date);
-}
-
-function increaseDate(date: Date) {
-  date.setDate(date.getDate() + 1);
-}
-
-function getToday() {
-  return {
-    name: "today",
-    date: format(new Date()),
-    period: 1,
-  };
-}
-
-function getTomorrow() {
-  const date = new Date();
-
-  increaseDate(date);
-
-  return {
-    name: "tomorrow",
-    date: format(date),
-    period: 1,
-  };
-}
-
-function getWeekends() {
-  const date = new Date();
-
-  while (date.getDay() !== 0 && date.getDay() !== 6) {
-    increaseDate(date);
-  }
-
-  return {
-    name: "weekends",
-    date: format(date),
-    period: date.getDay() === 6 ? 2 : 1,
-  };
-}
-
-function getCurrWeek() {
-  const today = new Date();
-  const date = new Date(today);
-  let days = 0;
-
-  if (today.getDay() === 1) {
-    increaseDate(date);
-    days += 1;
-  }
-
-  while (date.getDay() !== 1) {
-    increaseDate(date);
-    days += 1;
-  }
-
-  return {
-    name: "currWeek",
-    date: format(today),
-    period: days,
-  };
-}
-
-function getNextWeek() {
-  const today = new Date();
-  const date = new Date(today);
-
-  if (today.getDay() === 1) {
-    increaseDate(date);
-  }
-
-  while (date.getDay() !== 1) {
-    increaseDate(date);
-  }
-
-  return {
-    name: "nextWeek",
-    date: format(date),
-    period: 7,
-  };
-}
-
-export function getPresets(presets: string[]) {
-  if (!presets) {
-    return;
-  }
-
-  return presets.map((preset) => {
-    switch (preset) {
-      case PRESETS.TODAY:
-        return getToday();
-      case PRESETS.TOMORROW:
-        return getTomorrow();
-      case PRESETS.WEEKENDS:
-        return getWeekends();
-      case PRESETS.CURWEEK:
-        return getCurrWeek();
-      case PRESETS.NEXTWEEK:
-        return getNextWeek();
-      default:
-        return;
-    }
-  });
-}

package/src/components/Calendar/utils/getStartMonth.ts

@@ -1,19 +0,0 @@
-import { leadingZeros } from "../../libs/numbers/leadingZeros";
-
-type Options = {
-  today?: string;
-  activeDates?: string[];
-};
-
-export function getStartMonth({
-  today = "",
-  activeDates = [""],
-}: Options): string {
-  const sortedDates = ([] as string[])
-    .concat(activeDates, today)
-    .filter(Boolean)
-    .sort();
-  const date = new Date(sortedDates[0]);
-
-  return [date.getFullYear(), leadingZeros(date.getMonth() + 1, 2)].join("-");
-}