@invoicebox/ui 0.1.0-alpha.120 → 0.1.0-alpha.122

package/dist/components/common/Calendar/docs.stories.js

@@ -16,6 +16,6 @@ var Installation = exports.Installation = {
   render: function render() {
     return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
       variant: "bodyL"
-    }, /*#__PURE__*/_react["default"].createElement(_markdownToJsx["default"], null, "\n### \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430\n\n\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430 [react-calendar](https://github.com/wojtekmaj/react-calendar).\n\u0414\u043B\u044F \u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0439 \u0440\u0430\u0431\u043E\u0442\u044B \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0441\u0442\u0438\u043B\u0438.\n\n```ts\nimport 'react-calendar/dist/Calendar.css';\nimport '@invoicebox/ui/dist/components/common/Calendar/index.css';\n```\n"));
+    }, /*#__PURE__*/_react["default"].createElement(_markdownToJsx["default"], null, "\n### \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430\n\n\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430 [react-calendar](https://github.com/wojtekmaj/react-calendar).\n\u0414\u043B\u044F \u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0439 \u0440\u0430\u0431\u043E\u0442\u044B \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0441\u0442\u0438\u043B\u0438.\n\n```ts\nimport 'react-calendar/dist/Calendar.css';\n```\n"));
   }
 };

package/dist/components/common/Calendar/index.d.ts

@@ -1,8 +1,16 @@
 import { FC } from 'react';
-export type TProps = {
-    onChange: (value: Date) => void;
-    value: null | Date;
+type TGeneralProps = {
     minDate?: Date;
     maxDate?: Date;
 };
+export type TProps = TGeneralProps & ({
+    onChange: (value: Date) => void;
+    value: null | Date;
+    selectRange?: false;
+} | {
+    onChange: (value: [Date, Date]) => void;
+    value: null | [Date, Date];
+    selectRange: true;
+});
 export declare const Calendar: FC<TProps>;
+export {};

package/dist/components/common/Calendar/index.js

@@ -6,27 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Calendar = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactCalendar = _interopRequireDefault(require("react-calendar"));
 var _palette = require("../../../palette");
-var _useCss = require("../../../hooks/useCss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _styles = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var CSS_ID = 'INVOICEBOX_UI_CALENDAR';
 var Calendar = exports.Calendar = function Calendar(_ref) {
   var onChange = _ref.onChange,
     value = _ref.value,
     minDate = _ref.minDate,
-    maxDate = _ref.maxDate;
+    maxDate = _ref.maxDate,
+    selectRange = _ref.selectRange;
   var palette = (0, _palette.useComponentPalette)('calendar');
-  (0, _useCss.useCss)({
-    id: CSS_ID,
-    css: ":root {\n            --invoicebox-ui-calendar-arrow: ".concat(palette.arrow, ";\n            --invoicebox-ui-calendar-weekday: ").concat(palette.weekday, ";\n            --invoicebox-ui-calendar-tile: ").concat(palette.tile, ";\n            --invoicebox-ui-calendar-tile-active: ").concat(palette.tileActive, ";\n            --invoicebox-ui-calendar-tile-bg-active: ").concat(palette.tileBgActive, ";\n        }")
-  });
   var handleChange = (0, _react.useCallback)(function (newValue) {
-    onChange(newValue);
-  }, [onChange]);
-  return /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], {
+    if (selectRange) {
+      onChange(newValue);
+    } else {
+      onChange(newValue);
+    }
+  }, [onChange, selectRange]);
+  return /*#__PURE__*/_react["default"].createElement(_styles.LibCalendar, {
     locale: "ru",
     minDate: minDate,
     maxDate: maxDate,
@@ -35,6 +33,15 @@ var Calendar = exports.Calendar = function Calendar(_ref) {
     next2Label: null,
     prev2Label: null,
     onChange: handleChange,
-    value: value
+    value: value,
+    selectRange: selectRange
+    // styles
+    ,
+    $arrow: palette.arrow,
+    $weekDay: palette.weekday,
+    $tile: palette.tile,
+    $tileActive: palette.tileActive,
+    $tileBgActive: palette.tileBgActive,
+    $tileBgRangeBetween: palette.tileBgRangeBetween
   });
 };

package/dist/components/common/Calendar/index.stories.d.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Calendar } from '.';
 import 'react-calendar/dist/Calendar.css';
-import './index.css';
 declare const meta: Meta<typeof Calendar>;
 export default meta;
 export declare const Default: StoryObj<typeof Calendar>;
+export declare const Range: StoryObj<typeof Calendar>;

package/dist/components/common/Calendar/index.stories.js

@@ -4,12 +4,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Range = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _ = require(".");
 require("react-calendar/dist/Calendar.css");
-require("./index.css");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -42,14 +41,38 @@ var Component = function Component(_ref) {
     minDate: minDate ? new Date(minDate) : undefined
   });
 };
+var RangeComponent = function RangeComponent(_ref2) {
+  var maxDate = _ref2.maxDate,
+    minDate = _ref2.minDate;
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var handleChange = (0, _react.useCallback)(function (date) {
+    setValue(date);
+    (0, _addonActions.action)('change')(date);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_.Calendar, {
+    value: value,
+    onChange: handleChange,
+    maxDate: maxDate ? new Date(maxDate) : undefined,
+    minDate: minDate ? new Date(minDate) : undefined,
+    selectRange: true
+  });
+};
 var maxDate = new Date();
 maxDate.setMonth(maxDate.getMonth() + 1);
 var minDate = new Date();
 minDate.setMonth(minDate.getMonth() - 1);
+var generalProps = {
+  maxDate: maxDate,
+  minDate: minDate
+};
 var Default = exports.Default = {
   render: Component,
-  args: {
-    maxDate: maxDate,
-    minDate: minDate
-  }
+  args: generalProps
+};
+var Range = exports.Range = {
+  render: RangeComponent,
+  args: generalProps
 };

package/dist/components/common/Calendar/palette.d.ts

@@ -5,5 +5,6 @@ export type TCalendarPalette = {
     tile: string;
     tileActive: string;
     tileBgActive: string;
+    tileBgRangeBetween: string;
 };
 export declare const generateCalendarPalette: (abstractPalette: TAbstractPalette) => TCalendarPalette;

package/dist/components/common/Calendar/palette.js

@@ -12,6 +12,7 @@ var generateCalendarPalette = exports.generateCalendarPalette = function generat
     weekday: (0, _hexToRgba["default"])(abstractPalette.primary, 0.4),
     tile: (0, _hexToRgba["default"])(abstractPalette.primary, 0.7),
     tileActive: abstractPalette.primary,
-    tileBgActive: abstractPalette.secondary
+    tileBgActive: abstractPalette.secondary,
+    tileBgRangeBetween: (0, _hexToRgba["default"])(abstractPalette.primary, 0.05)
   };
 };

package/dist/components/common/Calendar/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const LibCalendar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react-calendar").CalendarProps & import("react").RefAttributes<unknown>, "ref"> & {
+    ref?: ((instance: unknown) => void) | import("react").RefObject<unknown> | null | undefined;
+}, {
+    $arrow: string;
+    $weekDay: string;
+    $tile: string;
+    $tileActive: string;
+    $tileBgActive: string;
+    $tileBgRangeBetween: string;
+    selectRange?: boolean | undefined;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-calendar").CalendarProps & import("react").RefAttributes<unknown>>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common/Calendar/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LibCalendar = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactCalendar = _interopRequireDefault(require("react-calendar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var LibCalendar = exports.LibCalendar = (0, _styledComponents["default"])(_reactCalendar["default"]).withConfig({
+  displayName: "styles__LibCalendar",
+  componentId: "sc-1evd6f-0"
+})(["border:none;width:240px;min-width:210px;background:transparent;@media (max-width:320px){width:225px;}.react-calendar__navigation{margin-bottom:0;}.react-calendar__navigation__arrow{font-size:24px;background-color:transparent !important;color:", ";}.react-calendar__navigation__arrow:disabled{opacity:0.4;cursor:default;}.react-calendar__navigation__arrow:hover:not([disabled]){opacity:0.6;}.react-calendar__navigation__label{font-size:14px;background-color:transparent !important;cursor:default;}.react-calendar__month-view__weekdays__weekday{color:", ";font-size:12px;font-weight:400;}.react-calendar__month-view__weekdays__weekday abbr{text-decoration:none;}.react-calendar__tile{font-size:12px;color:", ";background-color:transparent !important;padding:4px 6.6667px;border-radius:5px;margin-bottom:4px;}.react-calendar__tile:disabled{opacity:0.4;cursor:default;}.react-calendar__tile:hover:not([disabled]){opacity:0.6;}.react-calendar__tile--active{background-color:", " !important;color:", ";}.react-calendar__tile--active:hover{opacity:1 !important;}", ""], function (_ref) {
+  var $arrow = _ref.$arrow;
+  return $arrow;
+}, function (_ref2) {
+  var $weekDay = _ref2.$weekDay;
+  return $weekDay;
+}, function (_ref3) {
+  var $tile = _ref3.$tile;
+  return $tile;
+}, function (_ref4) {
+  var $tileBgActive = _ref4.$tileBgActive;
+  return $tileBgActive;
+}, function (_ref5) {
+  var $tileActive = _ref5.$tileActive;
+  return $tileActive;
+}, function (_ref6) {
+  var selectRange = _ref6.selectRange,
+    $tileBgActive = _ref6.$tileBgActive,
+    $tileBgRangeBetween = _ref6.$tileBgRangeBetween;
+  return selectRange && "\n            .react-calendar__tile--range {\n                border-radius: 0;\n            }\n\n            .react-calendar__tile--rangeBothEnds {\n                border-radius: 5px;\n            }\n            \n            .react-calendar__tile--active {\n                background-color: ".concat($tileBgRangeBetween, " !important;\n            }\n\n            .react-calendar__tile--rangeStart {\n                border-top-left-radius: 5px;\n                border-bottom-left-radius: 5px;\n                background-color: ").concat($tileBgActive, " !important;\n            }\n\n            .react-calendar__tile--rangeEnd {\n                border-top-right-radius: 5px;\n                border-bottom-right-radius: 5px;\n                background-color: ").concat($tileBgActive, " !important;\n            }\n    ");
+});

package/dist/components/form/DateInput/index.stories.d.ts

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { DateInput } from '.';
 import 'react-calendar/dist/Calendar.css';
-import '../../common/Calendar/index.css';
 declare const meta: Meta<typeof DateInput>;
 export default meta;
 export declare const Default: StoryObj<typeof DateInput>;

package/dist/components/form/DateInput/index.stories.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _ = require(".");
 require("react-calendar/dist/Calendar.css");
-require("../../common/Calendar/index.css");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.120",
+    "version": "0.1.0-alpha.122",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {

package/dist/components/common/Calendar/index.css

@@ -1,81 +0,0 @@
-.react-calendar {
-    border: none;
-    width: 240px;
-    min-width: 210px;
-    background: transparent;
-
-    @media (max-width: 320px) {
-        width: 225px;
-    }
-}
-
-/* navigation block */
-
-.react-calendar__navigation {
-    margin-bottom: 0;
-}
-
-/* navigation arrow */
-
-.react-calendar__navigation__arrow {
-    font-size: 24px;
-    background-color: transparent !important;
-    color: var(--invoicebox-ui-calendar-arrow);
-}
-
-.react-calendar__navigation__arrow:disabled {
-    opacity: 0.4;
-    cursor: default;
-}
-
-.react-calendar__navigation__arrow:hover:not([disabled]) {
-    opacity: 0.6;
-}
-
-/* navigation label */
-
-.react-calendar__navigation__label {
-    font-size: 14px;
-    background-color: transparent !important;
-    cursor: default;
-}
-
-/* weekdays */
-
-.react-calendar__month-view__weekdays__weekday {
-    color: var(--invoicebox-ui-calendar-weekday);
-    font-size: 12px;
-    font-weight: 400;
-}
-
-.react-calendar__month-view__weekdays__weekday abbr {
-    text-decoration: none;
-}
-
-/* day */
-
-.react-calendar__tile {
-    font-size: 12px;
-    color: var(--invoicebox-ui-calendar-tile);
-    background-color: transparent !important;
-    padding: 4px 6.6667px;
-    border-radius: 6px;
-}
-
-.react-calendar__tile:disabled {
-    opacity: 0.4;
-    cursor: default;
-}
-
-.react-calendar__tile:hover:not([disabled]) {
-    opacity: 0.6;
-}
-
-.react-calendar__tile--active {
-    background-color: var(--invoicebox-ui-calendar-tile-bg-active) !important;
-    color: var(--invoicebox-ui-calendar-tile-active);
-}
-
-.react-calendar__tile--active:hover {
-    opacity: 1 !important;
-}

package/dist/declarations.d.js

@@ -1 +0,0 @@
-"use strict";