colibri-ui 0.8.1 → 0.8.4

package/Button/Button.module.css

@@ -0,0 +1,225 @@
+.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;
+}
+.root_icon {
+  border-radius: 50%;
+  width: 36px;
+}
+.root_icon.size_xs {
+  width: 29px;
+}
+.root_icon.size_s {
+  width: 32px;
+}
+.root_icon.size_m {
+  width: 36px;
+}
+.root_icon.size_l {
+  width: 42px;
+}
+.root_fullWidth {
+  width: 100%;
+}
+
+.icon {
+  display: flex;
+}
+
+.size_xs {
+  font-size: 12px;
+  height: 29px;
+  line-height: 29px;
+}
+.size_s {
+  font-size: 13px;
+  height: 32px;
+  line-height: 32px;
+}
+.size_m {
+  font-size: 15px;
+  height: 36px;
+  line-height: 36px;
+}
+.size_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);
+}
+.variant_primary:hover {
+  background-color: var(--button-primary-bg-hovered);
+  border-color: var(--button-primary-border-color-hovered);
+  color: var(--button-primary-color-hovered);
+}
+.variant_primary:active {
+  background-color: var(--button-primary-bg-active);
+  border-color: var(--button-primary-border-color-active);
+  color: var(--button-primary-color-active);
+}
+.variant_primary_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;
+}
+.variant_secondary {
+  background-color: var(--button-secondary-bg);
+  border-color: var(--button-secondary-border-color);
+  color: var(--button-secondary-color);
+}
+.variant_secondary:hover {
+  background-color: var(--button-secondary-bg-hovered);
+  border-color: var(--button-secondary-border-color-hovered);
+  color: var(--button-secondary-color-hovered);
+}
+.variant_secondary:active {
+  background-color: var(--button-secondary-bg-active);
+  border-color: var(--button-secondary-border-color-active);
+  color: var(--button-secondary-color-active);
+}
+.variant_secondary_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;
+}
+.variant_pseudo {
+  background-color: var(--button-pseudo-bg);
+  border-color: var(--button-pseudo-border-color);
+  color: var(--button-pseudo-color);
+}
+.variant_pseudo:hover {
+  background-color: var(--button-pseudo-bg-hovered);
+  border-color: var(--button-pseudo-border-color-hovered);
+  color: var(--button-pseudo-color-hovered);
+}
+.variant_pseudo:active {
+  background-color: var(--button-pseudo-bg-active);
+  border-color: var(--button-pseudo-border-color-active);
+  color: var(--button-pseudo-color-active);
+}
+.variant_pseudo_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;
+}
+.variant_outline {
+  background-color: var(--button-outline-bg);
+  border-color: var(--button-outline-border-color);
+  color: var(--button-outline-color);
+}
+.variant_outline:hover {
+  background-color: var(--button-outline-bg-hovered);
+  border-color: var(--button-outline-border-color-hovered);
+  color: var(--button-outline-color-hovered);
+}
+.variant_outline:active {
+  background-color: var(--button-outline-bg-active);
+  border-color: var(--button-outline-border-color-active);
+  color: var(--button-outline-color-active);
+}
+.variant_outline_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;
+}
+.variant_clear {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--button-clear-color);
+}
+.variant_clear:hover {
+  color: var(--button-clear-color-hovered);
+}
+.variant_clear:active {
+  color: var(--button-clear-color-active);
+}
+.variant_clear_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;
+}
+.variant_alert {
+  background-color: var(--button-alert-bg);
+  border-color: var(--button-alert-border-color);
+  color: var(--button-alert-color);
+}
+.variant_alert:hover {
+  background-color: var(--button-alert-bg-hovered);
+  border-color: var(--button-alert-border-color-hovered);
+  color: var(--button-alert-color-hovered);
+}
+.variant_alert:active {
+  background-color: var(--button-alert-bg-active);
+  border-color: var(--button-alert-border-color-active);
+  color: var(--button-alert-color-active);
+}
+.variant_alert_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;
+}
+.variant_success {
+  background-color: var(--button-success-bg);
+  border-color: var(--button-success-border-color);
+  color: var(--button-success-color);
+}
+.variant_success:hover {
+  background-color: var(--button-success-bg-hovered);
+  border-color: var(--button-success-border-color-hovered);
+  color: var(--button-success-color-hovered);
+}
+.variant_success:active {
+  background-color: var(--button-success-bg-active);
+  border-color: var(--button-success-border-color-active);
+  color: var(--button-success-color-active);
+}
+.variant_success_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/Button/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type ButtonProps } from "./index.props";
+declare const Button: ({ className, fullWidth, variant, iconStart, iconEnd, icon, size, children, disabled, onClick, type, ref, ...props }: ButtonProps) => React.JSX.Element;
+export default Button;

package/Button/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./Button.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Button = function Button(_a) {
+  var _b;
+  var className = _a.className,
+    _c = _a.fullWidth,
+    fullWidth = _c === void 0 ? false : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? "primary" : _d,
+    iconStart = _a.iconStart,
+    iconEnd = _a.iconEnd,
+    icon = _a.icon,
+    size = _a.size,
+    children = _a.children,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    type = _a.type,
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick", "type", "ref"]);
+  return /*#__PURE__*/React__default.default.createElement("button", tslib.__assign({
+    onClick: onClick,
+    ref: ref,
+    className: clx(styles__default.default.root, (_b = {
+      root_icon: !!icon,
+      root_fullWidth: !!fullWidth
+    }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
+    disabled: disabled,
+    "data-testid": "button",
+    type: type || "button",
+    role: "button"
+  }, props), icon && /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.icon)
+  }, icon), iconStart && /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.icon)
+  }, iconStart), children && /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.text)
+  }, children), iconEnd && /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.icon)
+  }, iconEnd));
+};
+
+exports.default = Button;

package/Button/index.props.d.ts

@@ -0,0 +1,14 @@
+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/Button/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Button/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Calendar/components/ContinueButton/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type Props = {
+    isChanged: boolean;
+    selectedDate?: string;
+    selectedPeriod?: number;
+    onContinue: () => void;
+    onCancel: () => void;
+};
+export declare const ContinueButton: React.FC<Props>;
+export {};

package/Calendar/components/ContinueButton/index.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index$2 = require('../../../Button/index.js');
+var index$1 = require('../../../libs/requestIdleCallback/index.js');
+var index = require('../../../helpers/date/index.js');
+var styles = require('./index.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var ContinueButton = function ContinueButton(_a) {
+  var selectedDate = _a.selectedDate,
+    selectedPeriod = _a.selectedPeriod,
+    isChanged = _a.isChanged,
+    onContinue = _a.onContinue,
+    onCancel = _a.onCancel;
+  var selectedDates = React.useMemo(function () {
+    if (selectedDate && selectedPeriod) {
+      return index.getPeriodDates(selectedDate, selectedPeriod);
+    }
+    return null;
+  }, [selectedDate, selectedPeriod]);
+  var handleClick = React.useCallback(function () {
+    index$1.requestIdleCallback(function () {
+      return isChanged ? onContinue() : onCancel();
+    }, {
+      timeout: 200
+    });
+  }, [isChanged, onContinue, onCancel]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.root),
+    "data-testid": "continue-button"
+  }, /*#__PURE__*/React__default.default.createElement(index$2.default, {
+    size: "l",
+    onClick: handleClick
+  }, isChanged && selectedDates ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, "Select ", selectedDates) : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, "Cancel")));
+};
+
+exports.ContinueButton = ContinueButton;

package/Calendar/components/ContinueButton/index.module.css

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

package/Calendar/components/Month/Month.d.ts

@@ -0,0 +1,17 @@
+import type { CalendarTitleSize } from "../../index.props";
+import type { FunctionComponent } from "react";
+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;
+};
+export declare const Month: FCWithElements<Props>;
+export {};

package/Calendar/components/Month/Month.js

@@ -0,0 +1,144 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var leadingZeros = require('../../../libs/numbers/leadingZeros.js');
+var index = require('../../../Typography/index.js');
+var index$1 = require('../../../helpers/date/index.js');
+var getMonthWeeks = require('../../utils/getMonthWeeks.js');
+var styles = require('./index.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Item = function Item(_a) {
+  var isSelected = _a.isSelected,
+    isInSelectedRange = _a.isInSelectedRange,
+    isStartOfSelection = _a.isStartOfSelection,
+    isEndOfSelection = _a.isEndOfSelection,
+    children = _a.children;
+  var noSelection = isStartOfSelection && isEndOfSelection ? styles__default.default["no-selection"] : "";
+  var startClass = isStartOfSelection && !isEndOfSelection ? styles__default.default["start-of-selection"] : "";
+  var endClass = isEndOfSelection && !isStartOfSelection ? styles__default.default["end-of-selection"] : "";
+  var firstChildClass = isEndOfSelection ? styles__default.default["first-child"] : "";
+  var lastChildClass = isStartOfSelection ? styles__default.default["last-child"] : "";
+  if (isSelected) {
+    return /*#__PURE__*/React__namespace.createElement("li", {
+      className: clx(styles__default.default["selected-range-day"], styles__default.default["selected-day"], noSelection, startClass, endClass, firstChildClass, lastChildClass)
+    }, children);
+  } else if (isInSelectedRange) {
+    return /*#__PURE__*/React__namespace.createElement("li", {
+      className: clx(styles__default.default["selected-range-day"])
+    }, children);
+  }
+  return /*#__PURE__*/React__namespace.createElement("li", {
+    className: clx(styles__default.default.day)
+  }, children);
+};
+var Month = function Month(props) {
+  var year = props.startDate.getFullYear();
+  var month = leadingZeros.leadingZeros(props.startDate.getMonth() + 1, 2);
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    "data-testid": "month",
+    className: clx(styles__default.default.root),
+    style: {
+      left: props.offsetLeft ? "".concat(props.offsetLeft, "px") : undefined
+    }
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    className: clx(styles__default.default["month-name"])
+  }, /*#__PURE__*/React__namespace.createElement(index.default, {
+    tag: "span",
+    size: props.titleSize
+  }, index$1.getUpperMonthName(props.startDate))), /*#__PURE__*/React__namespace.createElement("div", {
+    className: clx(styles__default.default.table)
+  }, /*#__PURE__*/React__namespace.createElement("ul", {
+    className: clx(styles__default.default.legend)
+  }, tslib.__spreadArray([], Array(7), true).map(function (_) {
+    var rest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      rest[_i - 1] = arguments[_i];
+    }
+    var index$2 = rest[0] + 1;
+    return /*#__PURE__*/React__namespace.createElement("li", {
+      className: clx(styles__default.default.day),
+      key: index$2
+    }, /*#__PURE__*/React__namespace.createElement(index.default, {
+      style: {
+        opacity: index$2 > 5 ? 80 : 30,
+        color: index$2 > 5 ? "var(--typography-alert)" : "var(--palette-black)"
+      }
+    }, index$1.getShortWeekDayNameByIndex(index$2)));
+  })), getMonthWeeks.getMonthWeeks(props).map(function (days) {
+    var rest1 = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      rest1[_i - 1] = arguments[_i];
+    }
+    return /*#__PURE__*/React__namespace.createElement("ul", {
+      key: "week-".concat(rest1[0]),
+      className: clx(styles__default.default.week)
+    }, days.map(function (day) {
+      var rest2 = [];
+      for (var _i = 1; _i < arguments.length; _i++) {
+        rest2[_i - 1] = arguments[_i];
+      }
+      var key = "day-".concat(rest2[0]);
+      if (day.isDummy) {
+        return /*#__PURE__*/React__namespace.createElement("li", {
+          className: clx(styles__default.default.day),
+          key: key
+        });
+      }
+      var attrs = {
+        isStartOfSelection: day.isStartOfSelection,
+        isEndOfSelection: day.isEndOfSelection,
+        isSelected: day.isSelected,
+        isInSelectedRange: day.isInSelectedRange
+      };
+      var dayInnerActive = day.isActive ? styles__default.default["day-inner-active"] : "";
+      return /*#__PURE__*/React__namespace.createElement(Item, tslib.__assign({}, attrs, {
+        key: key
+      }), /*#__PURE__*/React__namespace.createElement("button", {
+        className: clx(styles__default.default["day-inner"], dayInnerActive),
+        style: {
+          background: day.isSelected ? "var(--palette-bg-2)" : "transparent"
+        },
+        role: "button",
+        type: "button",
+        onClick: day.isActive ? function () {
+          return props.onDayClick([year, month, leadingZeros.leadingZeros(day.day, 2)].join("-"));
+        } : undefined
+      }, /*#__PURE__*/React__namespace.createElement(index.default, {
+        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)));
+    }));
+  })));
+};
+
+exports.Month = Month;

package/{src/components/Calendar/components/Month/index.module.scss → Calendar/components/Month/index.module.css}

@@ -53,60 +53,51 @@
   text-align: center;
   width: 32px;
   z-index: 0;
-
-  &:hover {
-    z-index: 1;
-  }
-
-  &::before {
-    background: #f5f5f5;
-    content: "";
-    display: block;
-    height: 100%;
-    left: -50%;
-    position: absolute;
-    top: 0;
-    width: 200%;
-  }
-
-  &:first-child::before {
-    left: 0;
-    width: 150%;
-  }
-
-  &:last-child::before {
-    left: auto;
-    right: 0;
-    width: 150%;
-  }
+}
+.selected-range-day:hover {
+  z-index: 1;
+}
+.selected-range-day::before {
+  background: #f5f5f5;
+  content: "";
+  display: block;
+  height: 100%;
+  left: -50%;
+  position: absolute;
+  top: 0;
+  width: 200%;
+}
+.selected-range-day:first-child::before {
+  left: 0;
+  width: 150%;
+}
+.selected-range-day:last-child::before {
+  left: auto;
+  right: 0;
+  width: 150%;
 }
 
 .selected-day {
   z-index: 2;
-
-  &::before {
-    display: "block";
-    left: auto;
-    right: auto;
-    width: 90%;
-  }
-
-  &:first-child::before {
-    display: "block";
-    left: 50%;
-    width: 90%;
-  }
-
-  &:last-child::before {
-    display: "block";
-    right: 50%;
-    width: 90%;
-  }
-
-  & + &,
-  & + &:hover {
-    z-index: 4 !important;
-  }
+}
+.selected-day::before {
+  display: "block";
+  left: auto;
+  right: auto;
+  width: 90%;
+}
+.selected-day:first-child::before {
+  display: "block";
+  left: 50%;
+  width: 90%;
+}
+.selected-day:last-child::before {
+  display: "block";
+  right: 50%;
+  width: 90%;
+}
+.selected-day + .selected-day, .selected-day + .selected-day:hover {
+  z-index: 4 !important;
 }
 
 .no-selection::before {
@@ -123,16 +114,12 @@
   right: 50%;
 }
 
-.first-child {
-  &:first-child::before {
-    display: none;
-  }
+.first-child:first-child::before {
+  display: none;
 }
 
-.last-child {
-  &:last-child::before {
-    display: none;
-  }
+.last-child:last-child::before {
+  display: none;
 }
 
 .day-inner {
@@ -150,8 +137,7 @@
 
 .day-inner-active {
   cursor: pointer;
-
-  &:hover {
-    background: var(--palette-bg-2);
-  }
 }
+.day-inner-active:hover {
+  background: var(--palette-bg-2);
+}

package/Calendar/components/Presets/index.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export declare 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 declare const Presets: React.FunctionComponent<Props>;
+export {};