colibri-ui 0.7.154 → 0.8.1

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,42 @@
+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/{esm/Datepicker/components/TimePicker/index.module.css → src/components/Datepicker/components/TimePicker/index.module.scss}

@@ -55,4 +55,4 @@
 
 .select {
   flex: 2;
-}
+}

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,60 @@
+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

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

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,23 @@
+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/{esm/DotsLoader/DotsLoader.module.css → src/components/DotsLoader/DotsLoader.module.scss}

@@ -8,13 +8,16 @@
   0% {
     transform: scale(0);
   }
+
   50% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0);
   }
 }
+
 .dot {
   animation-duration: 1.6s;
   animation-iteration-count: infinite;
@@ -24,16 +27,20 @@
   height: 10px;
   transform: scale(0);
   width: 10px;
+
+  &_first {
+    animation-delay: 0s;
+  }
+
+  &_second {
+    animation-delay: 0.2s;
+  }
+
+  &_third {
+    animation-delay: 0.4s;
+  }
+
+  &_fourth {
+    animation-delay: 0.6s;
+  }
 }
-.dot_first {
-  animation-delay: 0s;
-}
-.dot_second {
-  animation-delay: 0.2s;
-}
-.dot_third {
-  animation-delay: 0.4s;
-}
-.dot_fourth {
-  animation-delay: 0.6s;
-}

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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,29 @@
+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/{esm/Dropdown/Dropdown.module.css → src/components/Dropdown/Dropdown.module.scss}

@@ -11,4 +11,4 @@
   border-style: solid;
   border-width: 1px;
   overflow: hidden;
-}
+}

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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,210 @@
+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;

package/{esm/Grid/Grid.module.css → src/components/Grid/Grid.module.scss}

@@ -9,7 +9,8 @@
     grid-auto-rows: minmax(50px, auto);
     grid-gap: 10px;
   }
+
   .root > * {
     margin: 0;
   }
-}
+}

package/{Grid/Item/Grid-Item.module.css → src/components/Grid/Item/Grid-Item.module.scss}

@@ -1,9 +1,9 @@
 .full {
-  grid-column: 1/-1;
+  grid-column: 1 / -1;
 }
 
 .item {
   flex: 1 1 250px;
   margin-left: 5px;
   margin-right: 5px;
-}
+}