colibri-ui 0.8.1 → 0.8.3

package/src/components/Button/Button.module.scss

@@ -1,265 +0,0 @@
-.root {
-  align-items: center;
-  border: 1px solid;
-  border-radius: 1.125rem;
-  box-sizing: border-box;
-  color: 0.15s linear;
-  cursor: pointer;
-  display: inline-flex;
-  flex-shrink: 0;
-  font-size: 15px;
-  font-style: normal;
-  font-weight: 400;
-  gap: 8px;
-  height: 36px;
-  justify-content: center;
-  line-height: 36px;
-  overflow: hidden;
-  padding: 0 12px;
-  text-overflow: ellipsis;
-  transform: scale(1);
-  transition: transform 0.1s ease-out;
-  white-space: nowrap;
-  width: fit-content;
-
-  &_icon {
-    border-radius: 50%;
-    width: 36px;
-
-    &.size_xs {
-      width: 29px;
-    }
-
-    &.size_s {
-      width: 32px;
-    }
-
-    &.size_m {
-      width: 36px;
-    }
-
-    &.size_l {
-      width: 42px;
-    }
-  }
-
-  &_fullWidth {
-    width: 100%;
-  }
-}
-
-.icon {
-  display: flex;
-}
-
-.size {
-  &_xs {
-    font-size: 12px;
-    height: 29px;
-    line-height: 29px;
-  }
-
-  &_s {
-    font-size: 13px;
-    height: 32px;
-    line-height: 32px;
-  }
-
-  &_m {
-    font-size: 15px;
-    height: 36px;
-    line-height: 36px;
-  }
-
-  &_l {
-    font-size: 18px;
-    height: 42px;
-    line-height: 42px;
-  }
-}
-
-.variant {
-  &_primary {
-    background-color: var(--button-primary-bg);
-    border-color: var(--button-primary-border-color);
-    color: var(--button-primary-color);
-
-    &:hover {
-      background-color: var(--button-primary-bg-hovered);
-      border-color: var(--button-primary-border-color-hovered);
-      color: var(--button-primary-color-hovered);
-    }
-
-    &:active {
-      background-color: var(--button-primary-bg-active);
-      border-color: var(--button-primary-border-color-active);
-      color: var(--button-primary-color-active);
-    }
-
-    &_disabled {
-      background-color: var(--button-primary-bg-disabled);
-      border-color: var(--button-primary-border-color-disabled);
-      color: var(--button-primary-color-disabled);
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &_secondary {
-    background-color: var(--button-secondary-bg);
-    border-color: var(--button-secondary-border-color);
-    color: var(--button-secondary-color);
-
-    &:hover {
-      background-color: var(--button-secondary-bg-hovered);
-      border-color: var(--button-secondary-border-color-hovered);
-      color: var(--button-secondary-color-hovered);
-    }
-
-    &:active {
-      background-color: var(--button-secondary-bg-active);
-      border-color: var(--button-secondary-border-color-active);
-      color: var(--button-secondary-color-active);
-    }
-
-    &_disabled {
-      background-color: var(--button-secondary-bg-disabled);
-      border-color: var(--button-secondary-border-color-disabled);
-      color: var(--button-secondary-color-disabled);
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &_pseudo {
-    background-color: var(--button-pseudo-bg);
-    border-color: var(--button-pseudo-border-color);
-    color: var(--button-pseudo-color);
-
-    &:hover {
-      background-color: var(--button-pseudo-bg-hovered);
-      border-color: var(--button-pseudo-border-color-hovered);
-      color: var(--button-pseudo-color-hovered);
-    }
-
-    &:active {
-      background-color: var(--button-pseudo-bg-active);
-      border-color: var(--button-pseudo-border-color-active);
-      color: var(--button-pseudo-color-active);
-    }
-
-    &_disabled {
-      background-color: var(--button-pseudo-bg-disabled);
-      border-color: var(--button-pseudo-border-color-disabled);
-      color: var(--button-pseudo-color-disabled);
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &_outline {
-    background-color: var(--button-outline-bg);
-    border-color: var(--button-outline-border-color);
-    color: var(--button-outline-color);
-
-    &:hover {
-      background-color: var(--button-outline-bg-hovered);
-      border-color: var(--button-outline-border-color-hovered);
-      color: var(--button-outline-color-hovered);
-    }
-
-    &:active {
-      background-color: var(--button-outline-bg-active);
-      border-color: var(--button-outline-border-color-active);
-      color: var(--button-outline-color-active);
-    }
-
-    &_disabled {
-      background-color: var(--button-outline-bg-disabled);
-      border-color: var(--button-outline-border-color-disabled);
-      color: var(--button-outline-color-disabled);
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &_clear {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--button-clear-color);
-
-    &:hover {
-      color: var(--button-clear-color-hovered);
-    }
-
-    &:active {
-      color: var(--button-clear-color-active);
-    }
-
-    &_disabled {
-      background-color: var(--button-clear-bg-disabled);
-      border-color: var(--button-clear-border-color-disabled);
-      color: var(--button-clear-color-disabled);
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &_alert {
-    background-color: var(--button-alert-bg);
-    border-color: var(--button-alert-border-color);
-    color: var(--button-alert-color);
-
-    &:hover {
-      background-color: var(--button-alert-bg-hovered);
-      border-color: var(--button-alert-border-color-hovered);
-      color: var(--button-alert-color-hovered);
-    }
-
-    &:active {
-      background-color: var(--button-alert-bg-active);
-      border-color: var(--button-alert-border-color-active);
-      color: var(--button-alert-color-active);
-    }
-
-    &_disabled {
-      background-color: var(--button-alert-bg-disabled);
-      border-color: var(--button-alert-border-color-disabled);
-      color: var(--button-alert-color-disabled);
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &_success {
-    background-color: var(--button-success-bg);
-    border-color: var(--button-success-border-color);
-    color: var(--button-success-color);
-
-    &:hover {
-      background-color: var(--button-success-bg-hovered);
-      border-color: var(--button-success-border-color-hovered);
-      color: var(--button-success-color-hovered);
-    }
-
-    &:active {
-      background-color: var(--button-success-bg-active);
-      border-color: var(--button-success-border-color-active);
-      color: var(--button-success-color-active);
-    }
-
-    &_disabled {
-      background-color: var(--button-success-bg-disabled);
-      border-color: var(--button-success-border-color-disabled);
-      color: var(--button-success-color-disabled);
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-}
-
-.text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

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

@@ -1,23 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
-
-export type ButtonVariant =
-  | "primary"
-  | "secondary"
-  | "outline"
-  | "pseudo"
-  | "alert"
-  | "success"
-  | "clear";
-export type ButtonSize = "xs" | "s" | "m" | "l";
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  fullWidth?: boolean;
-  icon?: ReactNode;
-  iconStart?: ReactNode;
-  iconEnd?: ReactNode;
-  size?: ButtonSize;
-  disabled?: boolean;
-  type?: "submit" | "reset" | "button" | undefined;
-  ref?: React.Ref<HTMLButtonElement>;
-}

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

@@ -1,109 +0,0 @@
-import React from "react";
-import { fn } from "@storybook/test";
-import More from "../Icons/More";
-import Button from ".";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Button> = {
-  title: "UI/Button",
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["xs", "s", "m", "l"],
-    },
-    variant: {
-      control: { type: "select" },
-      options: ["primary", "secondary", "outline", "pseudo", "clear", "alert", "success"],
-    },
-    disabled: {
-      control: { type: "boolean" },
-      options: [true, false],
-    },
-    fullWidth: {
-      control: { type: "boolean" },
-      options: [true, false],
-    },
-  },
-  args: { onClick: fn() },
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-const TEXT = "Click me";
-
-export const Default: Story = {
-  args: {
-    children: TEXT,
-  },
-};
-
-export const withIcon: Story = {
-  args: {
-    children: TEXT,
-    iconEnd: <More />,
-  },
-};
-
-export const onlyIcon: Story = {
-  args: {
-    icon: <More />,
-    size: 'xs'
-  },
-};
-
-export const Sizes = (args) => (
-  <div>
-    <Button size="xs" {...args}>
-      size = xs
-    </Button>{' '}
-    <Button size="s" {...args}>
-      size = s
-    </Button>{' '}
-    <Button size="m" {...args}>
-      size = m
-    </Button>{' '}
-    <Button size="l" {...args}>
-      size = l
-    </Button>
-  </div>
-);
-
-export const Variants = (args) => (
-  <div>
-    <Button size="m" variant="primary" {...args}>
-      primary
-    </Button>{' '}
-    <Button size="m" variant="secondary" {...args}>
-      secondary
-    </Button>{' '}
-    <Button size="m" variant="outline" {...args}>
-      outline
-    </Button>{' '}
-    <Button size="m" variant="pseudo" {...args}>
-      pseudo
-    </Button>{' '}
-    <Button size="m" variant="clear" {...args}>
-      clear
-    </Button>
-    <Button size="m" variant="alert" {...args}>
-      alert
-    </Button>{' '}
-    <Button size="m" variant="success" {...args}>
-      success
-    </Button>
-  </div>
-);
-
-export const LongText = (args) => (
-  <div style={{width: '200px'}}>
-    <Button size="m" variant="primary" {...args} fullWidth>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit
-    </Button>
-  </div>
-);

package/src/components/Button/index.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import classNames from "classnames/bind";
-import { type ButtonProps } from "./index.props";
-import styles from "./Button.module.scss";
-
-const clx = classNames.bind(styles);
-
-const Button = ({
-  className,
-  fullWidth = false,
-  variant = "primary",
-  iconStart,
-  iconEnd,
-  icon,
-  size,
-  children,
-  disabled,
-  onClick,
-  type,
-  ref,
-  ...props
-}: ButtonProps) => (
-  <button
-    onClick={onClick}
-    ref={ref}
-    className={clx(
-      styles.root,
-      {
-        root_icon: !!icon,
-        root_fullWidth: !!fullWidth,
-        [`size_${size}`]: !!size,
-        [`variant_${variant}`]: !!variant,
-        [`variant_${variant}_disabled`]: !!disabled,
-      },
-      className,
-    )}
-    disabled={disabled}
-    data-testid="button"
-    type={type || "button"}
-    role="button"
-    {...props}
-  >
-    {icon && <span className={clx(styles.icon)}>{icon}</span>}
-    {iconStart && <span className={clx(styles.icon)}>{iconStart}</span>}
-    {children && <span className={clx(styles.text)}>{children}</span>}
-    {iconEnd && <span className={clx(styles.icon)}>{iconEnd}</span>}
-  </button>
-);
-
-export default Button;

package/src/components/Calendar/components/ContinueButton/index.module.scss

@@ -1,6 +0,0 @@
-.root {
-  & button {
-    display: block;
-    width: 100%;
-  }
-}

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

@@ -1,45 +0,0 @@
-import React, { useMemo, useCallback } from "react";
-import classNames from "classnames/bind";
-import Button from "../../../Button";
-import { requestIdleCallback } from "../../../libs/requestIdleCallback";
-import { getPeriodDates } from "../../../helpers/date";
-import styles from "./index.module.scss";
-
-const clx = classNames.bind(styles);
-
-type Props = {
-  isChanged: boolean;
-  selectedDate?: string;
-  selectedPeriod?: number;
-  onContinue: () => void;
-  onCancel: () => void;
-};
-
-export const ContinueButton: React.FC<Props> = ({
-  selectedDate,
-  selectedPeriod,
-  isChanged,
-  onContinue,
-  onCancel,
-}) => {
-  const selectedDates = useMemo(() => {
-    if (selectedDate && selectedPeriod) {
-      return getPeriodDates(selectedDate, selectedPeriod);
-    }
-    return null;
-  }, [selectedDate, selectedPeriod]);
-
-  const handleClick = useCallback(() => {
-    requestIdleCallback(() => (isChanged ? onContinue() : onCancel()), {
-      timeout: 200,
-    });
-  }, [isChanged, onContinue, onCancel]);
-
-  return (
-    <div className={clx(styles.root)} data-testid="continue-button">
-      <Button size="l" onClick={handleClick}>
-        {isChanged && selectedDates ? <>Select {selectedDates}</> : <>Cancel</>}
-      </Button>
-    </div>
-  );
-};

package/src/components/Calendar/components/Month/Month.tsx

@@ -1,172 +0,0 @@
-import * as React from "react";
-import classNames from "classnames/bind";
-import { leadingZeros } from "../../../libs/numbers/leadingZeros";
-import Typography from "../../../Typography";
-import {
-  getShortWeekDayNameByIndex,
-  getUpperMonthName,
-} from "../../../helpers/date";
-import { getMonthWeeks } from "../../utils/getMonthWeeks";
-import styles from "./index.module.scss";
-import type { CalendarTitleSize } from "../../index.props";
-import type { FunctionComponent, PropsWithChildren } from "react";
-
-const clx = classNames.bind(styles);
-// eslint-disable-next-line @typescript-eslint/ban-types
-export interface FCWithElements<T = {}> extends FunctionComponent<T> {}
-
-type Props = {
-  today: string;
-  startDate: Date;
-  activeDays?: string[];
-  selectedDate?: string;
-  selectedPeriod?: number;
-  onDayClick: (date: string) => void;
-  offsetLeft: number;
-  availableDates?: string[];
-  titleSize?: CalendarTitleSize;
-};
-
-type ComponentProps = {
-  isStartOfSelection?: boolean;
-  isEndOfSelection?: boolean;
-  isSelected?: boolean;
-  isInSelectedRange?: boolean;
-};
-
-const Item = ({
-  isSelected,
-  isInSelectedRange,
-  isStartOfSelection,
-  isEndOfSelection,
-  children,
-}: PropsWithChildren<ComponentProps>) => {
-  const noSelection =
-    isStartOfSelection && isEndOfSelection ? styles["no-selection"] : "";
-  const startClass =
-    isStartOfSelection && !isEndOfSelection ? styles["start-of-selection"] : "";
-  const endClass =
-    isEndOfSelection && !isStartOfSelection ? styles["end-of-selection"] : "";
-  const firstChildClass = isEndOfSelection ? styles["first-child"] : "";
-  const lastChildClass = isStartOfSelection ? styles["last-child"] : "";
-
-  if (isSelected) {
-    return (
-      <li
-        className={clx(
-          styles["selected-range-day"],
-          styles["selected-day"],
-          noSelection,
-          startClass,
-          endClass,
-          firstChildClass,
-          lastChildClass,
-        )}
-      >
-        {children}
-      </li>
-    );
-  } else if (isInSelectedRange) {
-    return <li className={clx(styles["selected-range-day"])}>{children}</li>;
-  }
-
-  return <li className={clx(styles.day)}>{children}</li>;
-};
-
-export const Month: FCWithElements<Props> = (props) => {
-  const year = props.startDate.getFullYear();
-  const month = leadingZeros(props.startDate.getMonth() + 1, 2);
-
-  return (
-    <div
-      data-testid="month"
-      className={clx(styles.root)}
-      style={{ left: props.offsetLeft ? `${props.offsetLeft}px` : undefined }}
-    >
-      <div className={clx(styles["month-name"])}>
-        <Typography tag="span" size={props.titleSize}>
-          {getUpperMonthName(props.startDate)}
-        </Typography>
-      </div>
-      <div className={clx(styles.table)}>
-        <ul className={clx(styles.legend)}>
-          {[...Array(7)].map((_, ...rest) => {
-            const index = rest[0] + 1;
-
-            return (
-              <li className={clx(styles.day)} key={index}>
-                <Typography
-                  style={{
-                    opacity: index > 5 ? 80 : 30,
-                    color:
-                      index > 5
-                        ? "var(--typography-alert)"
-                        : "var(--palette-black)",
-                  }}
-                >
-                  {getShortWeekDayNameByIndex(index)}
-                </Typography>
-              </li>
-            );
-          })}
-        </ul>
-        {getMonthWeeks(props).map((days, ...rest1) => (
-          <ul key={`week-${rest1[0]}`} className={clx(styles.week)}>
-            {days.map((day, ...rest2) => {
-              const key = `day-${rest2[0]}`;
-
-              if (day.isDummy) {
-                return <li className={clx(styles.day)} key={key} />;
-              }
-              const attrs = {
-                isStartOfSelection: day.isStartOfSelection,
-                isEndOfSelection: day.isEndOfSelection,
-                isSelected: day.isSelected,
-                isInSelectedRange: day.isInSelectedRange,
-              };
-
-              const dayInnerActive = day.isActive
-                ? styles["day-inner-active"]
-                : "";
-
-              return (
-                <Item {...attrs} key={key}>
-                  <button
-                    className={clx(styles["day-inner"], dayInnerActive)}
-                    style={{
-                      background: day.isSelected
-                        ? "var(--palette-bg-2)"
-                        : "transparent",
-                    }}
-                    role="button"
-                    type="button"
-                    onClick={
-                      day.isActive
-                        ? () =>
-                            props.onDayClick(
-                              [year, month, leadingZeros(day.day, 2)].join("-"),
-                            )
-                        : undefined
-                    }
-                  >
-                    <Typography
-                      size="s"
-                      style={{
-                        opacity: day.isActive ? 80 : 30,
-                        color: day.isActive
-                          ? "rgba(0, 0, 0, 0.8)"
-                          : "rgba(0, 0, 0, 0.3)",
-                      }}
-                    >
-                      {day.day}
-                    </Typography>
-                  </button>
-                </Item>
-              );
-            })}
-          </ul>
-        ))}
-      </div>
-    </div>
-  );
-};