colibri-ui 0.7.154 → 0.8.1

package/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Badge /> should render correctly 1`] = `
+<div>
+  <span
+    class="root"
+  >
+    <svg
+      fill="currentColor"
+      focusable="false"
+      height="24"
+      viewBox="0 0 20 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.677,5.214 C17.6474966,4.87676512 17.3655221,4.61778237 17.027,4.617 L14.47,4.617 C14.47,2.033 12.103,0 9.54,0 C6.976,0 4.768,2.063 4.729,4.617 L2.052,4.617 C1.71273371,4.61587046 1.42966152,4.87586137 1.402,5.214 L0.042,20.519 C0.037,22.32 1.634,23.738 3.601,23.738 L15.478,23.738 C17.444,23.738 19.042,22.32 19.042,20.578 C19.042,20.558 17.677,5.214 17.677,5.214 L17.677,5.214 Z M15.762,22.62 L3.438,22.62 C2.158,22.62 1.12,21.774 1.1,20.731 L2.45,5.5 L4.73,5.5 L4.728,7.566 C4.728,7.944 5.03,8.246 5.408,8.246 C5.786,8.246 6.088,7.944 6.088,7.566 L6.09,5.5 L13.107,5.5 L13.107,7.566 C13.107,7.944 13.409,8.246 13.787,8.246 C13.9678664,8.24679795 14.1415988,8.17550771 14.2697731,8.04789639 C14.3979474,7.92028506 14.4700018,7.7468682 14.47,7.566 L14.47,5.5 L16.745,5.5 L18.1,20.731 C18.08,21.774 17.037,22.621 15.762,22.621 L15.762,22.62 Z M9.595,1.13 C11.482,1.13 13.07,2.716 13.11,4.62 L6.09,4.62 C6.13,2.716 7.708,1.13 9.595,1.13 L9.595,1.13 Z"
+      />
+    </svg>
+    <span
+      class="root root_direction_right"
+      data-testid="badge"
+    >
+      3
+    </span>
+  </span>
+</div>
+`;

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

@@ -0,0 +1,12 @@
+import type { ControlProps } from "./Control/index.props";
+
+export interface Props extends ControlProps {
+  className?: string;
+  color?: string;
+  background?: string;
+  content?: number;
+  invisible?: boolean;
+  max?: number;
+  showZero?: boolean;
+  direction?: "right" | "left";
+}

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

@@ -0,0 +1,68 @@
+import React from "react";
+import User from "../Icons/User";
+import Cart from "../Icons/Cart";
+import generateUniqID from '../helpers/generateUniqID';
+import Badge from ".";
+import type { ReactNode } from "react";
+import type { Meta } from "@storybook/react";
+
+const meta: Meta<typeof Badge> = {
+  title: "UI/Badge",
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    content: {
+      control: { type: "number" },
+    },
+    max: {
+      control: { type: "number" },
+    },
+    color: {
+      control: { type: "color" },
+    },
+    background: {
+      control: { type: "color" },
+    },
+    invisible: {
+      control: { type: "boolean" },
+      options: [true, false],
+    },
+    showZero: {
+      control: { type: "boolean" },
+      options: [true, false],
+    },
+    direction: {
+      control: { type: "select" },
+      options: ["right", "left"],
+    },
+  },
+  args: {
+    invisible: false,
+    showZero: false,
+    background: "#FC5759",
+    color: "#fff",
+    direction: "right",
+  },
+  component: Badge,
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+function render(args) {
+  return (
+    <div style={{ display: "flex", gap: "30px" }}>
+      {[<Cart />, <User />].map((icon: ReactNode, index: number) => {
+        return (
+          <Badge key={generateUniqID(index)} content={3} {...args}>
+            {icon}
+          </Badge>
+        );
+      })}
+    </div>
+  );
+}
+
+export const Default = (args) => {
+  return <div style={{display: 'flex', flexWrap: 'wrap', gap: '10px'}} >{render(args)}</div>;
+};

package/src/components/Badge/index.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import classNames from "classnames/bind";
+import { BadgeControl as Control } from "./Control";
+import styles from "./Badge.module.scss";
+import type { FC, PropsWithChildren } from "react";
+import type { Props } from "./index.props";
+
+const clx = classNames.bind(styles);
+
+const Badge: FC<PropsWithChildren<Props>> = ({
+  background,
+  children,
+  className,
+  color,
+  content,
+  direction = "right",
+  invisible: invisibleProp,
+  max = 99,
+  showZero = false,
+  ...props
+}) => {
+  let invisible = invisibleProp;
+
+  if (
+    invisibleProp == null &&
+    ((content === 0 && !showZero) || content == null)
+  ) {
+    invisible = true;
+  }
+
+  const displayValue = content
+    ? content > max
+      ? `${max}+`
+      : content
+    : undefined;
+
+  return (
+    <Control {...props}>
+      {children}
+      {displayValue && (
+        <span
+          className={clx(
+            "root",
+            {
+              [`root_direction_${direction}`]: !!direction,
+              root_invisible: invisible,
+            },
+            className,
+          )}
+          data-testid="badge"
+          style={{ backgroundColor: background, color }}
+        >
+          {displayValue}
+        </span>
+      )}
+    </Control>
+  );
+};
+
+export default Badge;

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

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

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

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

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

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

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

@@ -0,0 +1,45 @@
+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>
+  );
+};