colibri-ui 0.8.1 → 0.8.4

package/src/components/Datepicker/components/DatePicker/index.tsx

@@ -1,75 +0,0 @@
-import React, { useState } from "react";
-import classNames from "classnames/bind";
-import Dropdown from "../../../Dropdown";
-import Calendar from "../../../Calendar";
-import { toDMYDate, toISODate } from "../../../helpers/date";
-import styles from "./index.module.scss";
-import type { DatePickerProps } from "./index.props";
-import type { CalendarPayload } from "../../../Calendar/index.props";
-
-const clx = classNames.bind(styles);
-
-const CalendarIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    className={clx("calendar-icon")}
-    strokeWidth={1.5}
-    stroke="currentColor"
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
-    />
-  </svg>
-);
-
-const DatePicker: React.FC<DatePickerProps> = ({
-  className,
-  selectedDate = "",
-  onChangeDate,
-}) => {
-  const [date, setDate] = useState(selectedDate);
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  const handleDateChange = ({ date }: CalendarPayload) => {
-    setDate(date);
-    onChangeDate?.(date);
-  };
-
-  return (
-    <Dropdown
-      placement="bottom"
-      fontSize={14}
-      trigger={["click"]}
-      overlay={
-        <Calendar
-          minWidth={260}
-          className={clx("calendar", className)}
-          today={toISODate(new Date())}
-          titleSize="h5"
-          selectedDate={date}
-          onChange={handleDateChange}
-        />
-      }
-    >
-      <div className={clx("input-container", "input-date", className)}>
-        <input
-          className={clx("input-field")}
-          tabIndex={0}
-          aria-expanded="false"
-          aria-haspopup="true"
-          aria-invalid="false"
-          autoComplete="off"
-          maxLength={7}
-          readOnly
-          value={toDMYDate(date)}
-        />
-        <CalendarIcon />
-      </div>
-    </Dropdown>
-  );
-};
-
-export default DatePicker;

package/src/components/Datepicker/components/TimePicker/Label/index.tsx

@@ -1,20 +0,0 @@
-import React, { useRef } from "react";
-import type { FC } from "react";
-
-type OptionLabelProps = {
-  time: string;
-  onClick?: () => void;
-  onMouseEnter?: () => void;
-};
-
-const OptionLabel: FC<OptionLabelProps> = ({ time, onClick, onMouseEnter }) => {
-  const ref = useRef<HTMLLIElement | null>(null);
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <span onClick={onClick} onMouseEnter={onMouseEnter} ref={ref}>
-      {time}
-    </span>
-  );
-};
-
-export default OptionLabel;

package/src/components/Datepicker/components/TimePicker/helpers.ts

@@ -1,42 +0,0 @@
-import { addMinutes, format, isBefore, parse } from "date-fns";
-
-export type Timestamp = {
-  time: string;
-  disabled?: boolean;
-};
-
-const day = new Date();
-
-day.setHours(24, 0, 0, 0);
-
-export const DEFAULT_TIME = { index: 24, time: "12:00" };
-export const formatTime = (date: Date): string => format(date, "HH:mm");
-
-export const generateSuggest = (interval: number = 15): Timestamp[] =>
-  new Array((24 * 60) / interval).fill(null).map((_, index) => {
-    const date = addMinutes(day, index * interval);
-
-    return {
-      time: formatTime(date),
-    };
-  });
-
-export const checkIsBeforeNow = (
-  time: string,
-  currentDate?: Date | null,
-): boolean =>
-  currentDate ? isBefore(parse(time, "HH:mm", currentDate), new Date()) : false;
-
-export const checkIsBeforeSelectedDate = (
-  time: string,
-  interval: number,
-  date?: Date | null,
-): boolean => {
-  if (date) {
-    const selectedDate = new Date(date);
-    selectedDate.setMinutes(selectedDate.getMinutes() + interval);
-    return isBefore(parse(time, "HH:mm", date), selectedDate);
-  }
-
-  return false;
-};

package/src/components/Datepicker/components/TimePicker/index.props.ts

@@ -1,8 +0,0 @@
-type TimePickerInterval = 5 | 10 | 15 | 30;
-
-export type TimePickerProps = {
-  className?: string;
-  interval?: TimePickerInterval;
-  selectedTime?: string;
-  onChangeTime?: (time: string) => void;
-};

package/src/components/Datepicker/components/TimePicker/index.tsx

@@ -1,60 +0,0 @@
-import React, { memo, useMemo, useState } from "react";
-import classNames from "classnames/bind";
-import Select from "../../../Select";
-import styles from "./index.module.scss";
-import { generateSuggest } from "./helpers";
-import OptionLabel from "./Label";
-import type { TimePickerProps } from "./index.props";
-
-const clx = classNames.bind(styles);
-
-const TimePicker = ({
-  className,
-  interval = 30,
-  selectedTime = "",
-  onChangeTime,
-}: TimePickerProps) => {
-  const [time, setTime] = useState<string>(selectedTime);
-
-  const options = useMemo(
-    () =>
-      generateSuggest(interval).map((item) => ({
-        value: item.time,
-        label: <OptionLabel time={item.time} />,
-        disabled: false,
-      })),
-    [interval],
-  );
-
-  const handleChange = (value: string) => {
-    setTime(value);
-    onChangeTime?.(value);
-  };
-
-  return (
-    <Select
-      className={clx(className, styles.select)}
-      options={options}
-      fontSize={14}
-      customInputRoot={
-        <div className={clx(styles["input-container"], styles["input-time"])}>
-          <input
-            className={clx(styles["input-field"])}
-            tabIndex={0}
-            aria-expanded="false"
-            aria-haspopup="true"
-            aria-invalid="false"
-            autoComplete="off"
-            maxLength={5}
-            readOnly
-            value={time}
-          />
-        </div>
-      }
-      value={time}
-      onChange={handleChange}
-    />
-  );
-};
-
-export default memo(TimePicker);

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

@@ -1,7 +0,0 @@
-export type Props = {
-  className?: string;
-  selectedTime?: string;
-  selectedDate?: string;
-  onChangeTime?: (time: string) => void;
-  onChangeDate?: (date: string) => void;
-};

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

@@ -1,29 +0,0 @@
-import React from "react";
-import Datepicker from ".";
-import { fn } from '@storybook/test';
-import type { Meta } from "@storybook/react";
-
-const meta: Meta<typeof Datepicker> = {
-  title: "UI/Datepicker",
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-
-  },
-  args: {
-    onChangeDate: fn(),
-    onChangeTime: fn(),
-  }, 
-  component: Datepicker,
-} satisfies Meta<typeof Datepicker>;
-
-export default meta;
-
-export const Default = (args) => {
-  const date = new Date();
-const formattedDate = date.toISOString().split('T')[0];
-  return (
-    <Datepicker {...args} selectedTime="10:00" selectedDate={formattedDate} />
-  );
-};

package/src/components/Datepicker/index.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import classNames from "classnames/bind";
-import styles from "./Datepicker.module.scss";
-import TimePickerInput from "./components/TimePicker";
-import DatePickerInput from "./components/DatePicker";
-import type { Props } from "./index.props";
-
-const clx = classNames.bind(styles);
-
-const Datepicker = ({
-  className,
-  selectedTime,
-  selectedDate,
-  onChangeDate,
-  onChangeTime,
-}: Props) => (
-  <div className={clx(styles.root, className)}>
-    <TimePickerInput selectedTime={selectedTime} onChangeTime={onChangeTime} />
-    <DatePickerInput selectedDate={selectedDate} onChangeDate={onChangeDate} />
-  </div>
-);
-
-export default Datepicker;

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

@@ -1,26 +0,0 @@
-import { Color } from "../Theme/colors/theme_default";
-
-import DotsLoader from ".";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof DotsLoader> = {
-  title: "UI/DotsLoader",
-  parameters: {
-    layout: "centered",
-  },
-  component: DotsLoader,
-} satisfies Meta<typeof DotsLoader>;
-
-export default meta;
-
-type Story = StoryObj<typeof DotsLoader>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Colored: Story = {
-  args: {
-    color: Color.PRIMARY_DEFAULT_5,
-  },
-};

package/src/components/DotsLoader/index.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import classNames from "classnames/bind";
-import styles from "./DotsLoader.module.scss";
-import type { FC } from "react";
-
-const clx = classNames.bind(styles);
-
-const DotsLoader: FC<{ color?: string }> = ({ color }) => (
-  <div className={clx("wrapper")}>
-    <div
-      style={{ backgroundColor: color }}
-      className={clx({ dot: true, dot_first: true })}
-    />
-    <div
-      style={{ backgroundColor: color }}
-      className={clx({ dot: true, dot_second: true })}
-    />
-    <div
-      style={{ backgroundColor: color }}
-      className={clx({ dot: true, dot_third: true })}
-    />
-    <div
-      style={{ backgroundColor: color }}
-      className={clx({ dot: true, dot_fourth: true })}
-    />
-  </div>
-);
-
-export default DotsLoader;

package/src/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -1,75 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import Dropdown from "..";
-import Menu from "../../Menu";
-import MenuItem from "../../Menu/components/MenuItem";
-
-describe("<Dropdown />", () => {
-  const overlay = (
-    <Menu>
-      <MenuItem>Test 1</MenuItem>
-      <MenuItem>Test 2</MenuItem>
-      <MenuItem>Test 3</MenuItem>
-    </Menu>
-  );
-
-  it("renders without crashing", () => {
-    render(<Dropdown overlay={overlay}>Open</Dropdown>);
-    expect(screen.getByRole("button", { name: /open/i })).toBeInTheDocument();
-  });
-
-  it("has the correct title", () => {
-    render(<Dropdown overlay={overlay}>Open</Dropdown>);
-    expect(screen.getByRole("button")).toHaveTextContent("Open");
-  });
-
-  it("displays dropdown content on click when trigger is 'click'", async () => {
-    render(
-      <Dropdown trigger={["click"]} overlay={overlay}>
-        Open
-      </Dropdown>
-    );
-    const button = screen.getByRole("button", { name: /open/i });
-    fireEvent.click(button);
-    
-    const menuItems = screen.getAllByTestId("menuitem");
-
-    await waitFor(() => {
-      expect(menuItems[0]).toBeVisible();
-      expect(menuItems[0]).toHaveTextContent("Test 1");
-      expect(menuItems[1]).toHaveTextContent("Test 2");
-      expect(menuItems[2]).toHaveTextContent("Test 3");
-    });
-  });
-
-  it("displays dropdown content on hover when trigger is 'hover'", async () => {
-    render(
-      <Dropdown trigger={["hover"]} overlay={overlay}>
-        Open
-      </Dropdown>
-    );
-    const button = screen.getByRole("button", { name: /open/i });
-    fireEvent.mouseEnter(button);
-
-    const menuItems = screen.getAllByTestId("menuitem");
-    await waitFor(() => {
-    expect(menuItems[0]).toBeVisible();
-    expect(menuItems[0]).toHaveTextContent("Test 1");
-    })
-  });
-
-  it("contains the correct child element", async () => {
-    render(
-      <Dropdown trigger={["hover"]} overlay={overlay}>
-        Open
-      </Dropdown>
-    );
-    const button = screen.getByRole("button", { name: /open/i });
-    fireEvent.mouseEnter(button);
-
-    const menuItems = screen.getAllByTestId("menuitem");
-    await waitFor(() => {
-    expect(menuItems[0]).toHaveTextContent("Test 1");
-    })
-  });
-});

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

@@ -1,27 +0,0 @@
-import type { ReactNode } from "react";
-import type { PositioningStrategy } from "@popperjs/core";
-
-import type { Placement as PopperPlacement } from "@popperjs/core";
-
-export type Placement = Extract<
-  PopperPlacement,
-  "bottom-start" | "bottom" | "bottom-end"
->;
-
-export type Trigger = "click" | "hover" | "focus";
-
-export type DropdownProps = {
-  zIndex?: number;
-  fontSize?: number;
-  disabled?: boolean;
-  onVisibleChange?: (visible: boolean) => void;
-  overlay: ReactNode;
-  placement?: Placement;
-  strategy?: PositioningStrategy;
-  trigger?: [Trigger, ...Trigger[]];
-  visible?: boolean;
-  preventOverflow?: boolean;
-  preventAutoClose?: boolean;
-  flip?: boolean;
-  samewidth?: boolean;
-};

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

@@ -1,40 +0,0 @@
-import React from "react";
-import Menu from "../Menu";
-import Button from "../Button";
-import Dropdown from ".";
-import type { Meta } from "@storybook/react";
-import MenuItem from "../Menu/components/MenuItem";
-
-const meta: Meta<typeof Dropdown> = {
-  title: "UI/Dropdown",
-  parameters: {
-    layout: "centered",
-  },
-  args: {},
-  component: Dropdown,
-} satisfies Meta<typeof Dropdown>;
-
-export default meta;
-
-const Template = (args) => {
-  return (
-    <Dropdown
-      {...args}
-      overlay={
-        <Menu>
-          <MenuItem>Test 1</MenuItem>
-          <MenuItem>Test 2</MenuItem>
-          <MenuItem>Test 3</MenuItem>
-        </Menu>
-      }
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: <Button variant="primary">Hover me</Button>,
-  trigger: ["hover"],
-  disabled: false,
-};

package/src/components/Dropdown/index.tsx

@@ -1,210 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  Children,
-} from "react";
-import classNames from "classnames/bind";
-import { usePopper } from "react-popper";
-import Portal from "../Portal";
-
-import { on } from "../helpers/on";
-import ClickOutside from "../ClickOutside";
-
-import styles from "./Dropdown.module.scss";
-import type { DropdownProps } from "./index.props";
-import type {
-  FC,
-  MouseEventHandler,
-  PropsWithChildren,
-  ReactElement,
-} from "react";
-
-const clx = classNames.bind(styles);
-
-const Dropdown: FC<PropsWithChildren<DropdownProps>> = ({
-  children,
-  zIndex,
-  fontSize,
-  disabled,
-  onVisibleChange,
-  overlay,
-  placement = "bottom-start",
-  strategy = "absolute",
-  trigger = ["hover"],
-  visible: visibleProp = true,
-  preventOverflow = false,
-  preventAutoClose = false,
-  flip = true,
-  samewidth = false,
-}) => {
-  const [controlElement, setControlElement] = useState<HTMLElement | null>(
-    null,
-  );
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null,
-  );
-
-  const [visible, setVisible] = useState(false);
-
-  const isVisible = visibleProp && visible && !disabled;
-
-  const {
-    styles: popperStyles,
-    attributes,
-    update,
-  } = usePopper(controlElement, popperElement, {
-    placement,
-    strategy,
-    modifiers: [
-      {
-        name: "flip",
-        enabled: flip,
-        options: {
-          fallbackPlacements: ["top"],
-        },
-      },
-      {
-        name: "preventOverflow",
-        enabled: preventOverflow,
-      },
-    ],
-  });
-
-  const isNotComponent = typeof children === "string";
-
-  const reference: ReactElement | null = useMemo(() => {
-    if (!children) return null;
-
-    return Children.only(
-      isNotComponent ? <button>{children}</button> : children,
-    ) as ReactElement;
-  }, [children, isNotComponent]);
-
-  const onToggle = useCallback(
-    (event: MouseEvent | TouchEvent) => {
-      if (
-        (event.target as HTMLElement)?.closest('[data-ignore-click="true"]')
-      ) {
-        return;
-      }
-
-      setVisible((state) => !state);
-    },
-    [setVisible],
-  );
-
-  const onShow = useCallback(() => {
-    setVisible(true);
-  }, [setVisible]);
-
-  const onHide = useCallback(() => {
-    setVisible(false);
-  }, [setVisible]);
-
-  const onClickOutside = useCallback(
-    (event: MouseEvent | TouchEvent) => {
-      if (controlElement?.contains(event.target as Node)) return;
-      onHide();
-    },
-    [onHide, controlElement],
-  );
-
-  const onClickOverlay: MouseEventHandler<HTMLDivElement> = useCallback(
-    (event) => {
-      event.stopPropagation();
-      if (!preventAutoClose) {
-        onHide();
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onHide],
-  );
-
-  useEffect(() => {
-    const unsubscribes: ReturnType<typeof on>[] = [];
-
-    if (trigger.includes("click")) {
-      unsubscribes.push(on(controlElement, "click", onToggle, false));
-    }
-
-    if (trigger.includes("hover")) {
-      unsubscribes.push(on(controlElement, "mouseenter", onShow, false));
-      unsubscribes.push(on(controlElement, "mouseleave", onHide, false));
-      unsubscribes.push(on(popperElement, "mouseenter", onShow, false));
-      unsubscribes.push(on(popperElement, "mouseleave", onHide, false));
-    }
-
-    if (trigger.includes("focus")) {
-      const onFocusOut = () => {
-        requestAnimationFrame(() => {
-          if (controlElement?.contains(document.activeElement)) return;
-          if (popperElement?.contains(document.activeElement)) return;
-
-          onHide();
-        });
-      };
-      unsubscribes.push(on(controlElement, "focusin", onShow, false));
-      unsubscribes.push(on(controlElement, "focusout", onFocusOut, false));
-      unsubscribes.push(on(popperElement, "focusin", onShow, false));
-      unsubscribes.push(on(popperElement, "focusout", onFocusOut, false));
-    }
-
-    return () => unsubscribes.forEach((un) => un());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlElement, popperElement, onToggle, onShow, onHide]);
-
-  useEffect(() => {
-    if (onVisibleChange) onVisibleChange(visible);
-  }, [onVisibleChange, visible]);
-
-  useEffect(() => {
-    if (update) update();
-  }, [update, visible]);
-
-  return (
-    <>
-      {reference && (
-        <reference.type
-          ref={setControlElement}
-          tabIndex={0}
-          {...reference.props}
-        />
-      )}
-      {isVisible && (
-        <Portal>
-          <ClickOutside onClick={onClickOutside}>
-            <div
-              ref={setPopperElement}
-              data-testid="popper-container"
-              className={clx("popper-container")}
-              style={{
-                ...popperStyles.popper,
-                zIndex,
-                minWidth: controlElement?.offsetWidth,
-                ...(samewidth && {
-                  maxWidth: controlElement?.offsetWidth,
-                }),
-                fontSize: `${fontSize}px`,
-              }}
-              tabIndex={0}
-              {...attributes.popper}
-            >
-              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-              <div
-                data-testid="overlay-container"
-                className={clx("overlay-container")}
-                onClick={onClickOverlay}
-              >
-                {overlay}
-              </div>
-            </div>
-          </ClickOutside>
-        </Portal>
-      )}
-    </>
-  );
-};
-
-export default Dropdown;