@invoicebox/ui 0.1.0-alpha.4 → 0.1.0-alpha.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/README.md +15 -1
  2. package/dist/breakpoints/index.d.ts +7 -0
  3. package/dist/breakpoints/index.js +13 -0
  4. package/dist/components/common/Arrow/components/StyledSvg/index.d.ts +11 -0
  5. package/dist/components/common/Arrow/components/StyledSvg/index.js +31 -0
  6. package/dist/components/common/Arrow/components/StyledSvg/index.stories.d.ts +5 -0
  7. package/dist/components/common/Arrow/components/StyledSvg/index.stories.js +29 -0
  8. package/dist/components/common/Arrow/components/Svg/index.d.ts +6 -0
  9. package/dist/components/common/Arrow/components/Svg/index.js +26 -0
  10. package/dist/components/common/Arrow/components/Svg/index.stories.d.ts +6 -0
  11. package/dist/components/common/Arrow/components/Svg/index.stories.js +21 -0
  12. package/dist/components/common/Arrow/index.d.ts +11 -0
  13. package/dist/components/common/Arrow/index.js +34 -0
  14. package/dist/components/common/Arrow/index.stories.d.ts +6 -0
  15. package/dist/components/common/Arrow/index.stories.js +22 -0
  16. package/dist/components/common/Arrow/palette.d.ts +8 -0
  17. package/dist/components/common/Arrow/palette.js +16 -0
  18. package/dist/components/common/Dropdown/index.d.ts +14 -0
  19. package/dist/components/common/Dropdown/index.js +117 -0
  20. package/dist/components/common/Dropdown/index.stories.d.ts +6 -0
  21. package/dist/components/common/Dropdown/index.stories.js +59 -0
  22. package/dist/components/common/Dropdown/palette.d.ts +6 -0
  23. package/dist/components/common/Dropdown/palette.js +14 -0
  24. package/dist/components/common/Dropdown/styles.d.ts +14 -0
  25. package/dist/components/common/Dropdown/styles.js +47 -0
  26. package/dist/components/common/InvoiceboxLoader/index.d.ts +5 -0
  27. package/dist/components/common/InvoiceboxLoader/index.js +878 -0
  28. package/dist/components/common/InvoiceboxLoader/index.stories.d.ts +5 -0
  29. package/dist/components/common/InvoiceboxLoader/index.stories.js +18 -0
  30. package/dist/components/common/InvoiceboxSpinner/index.d.ts +8 -0
  31. package/dist/components/common/InvoiceboxSpinner/index.js +41 -0
  32. package/dist/components/common/InvoiceboxSpinner/index.stories.d.ts +10 -0
  33. package/dist/components/common/InvoiceboxSpinner/index.stories.js +19 -0
  34. package/dist/components/common/InvoiceboxSpinner/palette.d.ts +8 -0
  35. package/dist/components/common/InvoiceboxSpinner/palette.js +14 -0
  36. package/dist/components/common/InvoiceboxSpinner/styles.d.ts +4 -0
  37. package/dist/components/common/InvoiceboxSpinner/styles.js +19 -0
  38. package/dist/components/common/Scrollbar/index.d.ts +6 -0
  39. package/dist/components/common/Scrollbar/index.js +69 -0
  40. package/dist/components/common/Scrollbar/index.stories.d.ts +12 -0
  41. package/dist/components/common/Scrollbar/index.stories.js +36 -0
  42. package/dist/components/common/Scrollbar/palette.d.ts +5 -0
  43. package/dist/components/common/Scrollbar/palette.js +11 -0
  44. package/dist/components/common/SecondaryButton/index.d.ts +19 -0
  45. package/dist/components/common/SecondaryButton/index.js +51 -0
  46. package/dist/components/common/SecondaryButton/index.stories.d.ts +11 -0
  47. package/dist/components/common/SecondaryButton/index.stories.js +38 -0
  48. package/dist/components/common/SecondaryButton/palette.d.ts +8 -0
  49. package/dist/components/common/SecondaryButton/palette.js +14 -0
  50. package/dist/components/common/SecondaryButton/styles.d.ts +11 -0
  51. package/dist/components/common/SecondaryButton/styles.js +46 -0
  52. package/dist/components/common/Skeleton/index.d.ts +8 -0
  53. package/dist/components/common/Skeleton/index.js +28 -0
  54. package/dist/components/common/Skeleton/index.stories.d.ts +11 -0
  55. package/dist/components/common/Skeleton/index.stories.js +29 -0
  56. package/dist/components/common/Skeleton/palette.d.ts +6 -0
  57. package/dist/components/common/Skeleton/palette.js +12 -0
  58. package/dist/components/common/Skeleton/styles.d.ts +10 -0
  59. package/dist/components/common/Skeleton/styles.js +37 -0
  60. package/dist/components/common/Typography/docs.stories.d.ts +6 -0
  61. package/dist/components/common/Typography/docs.stories.js +20 -0
  62. package/dist/components/common/Typography/index.d.ts +26 -0
  63. package/dist/components/common/Typography/index.js +49 -0
  64. package/dist/components/common/Typography/index.stories.d.ts +11 -0
  65. package/dist/components/common/Typography/index.stories.js +35 -0
  66. package/dist/components/common/Typography/styles.d.ts +5 -0
  67. package/dist/components/common/Typography/styles.js +16 -0
  68. package/dist/components/common/Typography/typography.d.ts +20 -0
  69. package/dist/components/common/Typography/typography.js +28 -0
  70. package/dist/components/form/InputLabel/index.d.ts +10 -0
  71. package/dist/components/form/InputLabel/index.js +32 -0
  72. package/dist/components/form/InputLabel/index.stories.d.ts +5 -0
  73. package/dist/components/form/InputLabel/index.stories.js +33 -0
  74. package/dist/components/form/InputLabel/palette.d.ts +7 -0
  75. package/dist/components/form/InputLabel/palette.js +13 -0
  76. package/dist/components/form/InputLabel/styles.d.ts +12 -0
  77. package/dist/components/form/InputLabel/styles.js +40 -0
  78. package/dist/components/form/PositiveIntegerInput/hooks/useFilters.d.ts +6 -0
  79. package/dist/components/form/PositiveIntegerInput/hooks/useFilters.js +21 -0
  80. package/dist/components/form/PositiveIntegerInput/hooks/useIncrement.d.ts +4 -0
  81. package/dist/components/form/PositiveIntegerInput/hooks/useIncrement.js +22 -0
  82. package/dist/components/form/PositiveIntegerInput/hooks/useIncrementDisabledFlags.d.ts +9 -0
  83. package/dist/components/form/PositiveIntegerInput/hooks/useIncrementDisabledFlags.js +24 -0
  84. package/dist/components/form/PositiveIntegerInput/hooks/useNormalizers.d.ts +4 -0
  85. package/dist/components/form/PositiveIntegerInput/hooks/useNormalizers.js +22 -0
  86. package/dist/components/form/PositiveIntegerInput/index.d.ts +10 -0
  87. package/dist/components/form/PositiveIntegerInput/index.js +94 -0
  88. package/dist/components/form/PositiveIntegerInput/index.stories.d.ts +5 -0
  89. package/dist/components/form/PositiveIntegerInput/index.stories.js +49 -0
  90. package/dist/components/form/PositiveIntegerInput/styles.d.ts +5 -0
  91. package/dist/components/form/PositiveIntegerInput/styles.js +21 -0
  92. package/dist/components/form/PureInput/index.d.ts +12 -0
  93. package/dist/components/form/PureInput/index.js +43 -0
  94. package/dist/components/form/PureInput/index.stories.d.ts +5 -0
  95. package/dist/components/form/PureInput/index.stories.js +23 -0
  96. package/dist/components/form/PureInput/palette.d.ts +10 -0
  97. package/dist/components/form/PureInput/palette.js +18 -0
  98. package/dist/components/form/PureInput/styles.d.ts +10 -0
  99. package/dist/components/form/PureInput/styles.js +34 -0
  100. package/dist/hooks/useFocusField.d.ts +11 -0
  101. package/dist/hooks/useFocusField.js +37 -0
  102. package/dist/index.d.ts +14 -1
  103. package/dist/index.js +94 -4
  104. package/dist/palette/colors.stories.d.ts +4 -0
  105. package/dist/palette/colors.stories.js +40 -0
  106. package/dist/palette/constants.d.ts +2 -0
  107. package/dist/palette/constants.js +18 -0
  108. package/dist/palette/context.d.ts +21 -0
  109. package/dist/palette/context.js +26 -0
  110. package/dist/palette/index.d.ts +3 -0
  111. package/dist/palette/index.js +19 -0
  112. package/dist/palette/index.stories.d.ts +4 -0
  113. package/dist/palette/index.stories.js +81 -0
  114. package/dist/palette/provider.d.ts +20 -0
  115. package/dist/palette/provider.js +71 -0
  116. package/dist/palette/types.d.ts +12 -0
  117. package/dist/palette/types.js +1 -0
  118. package/dist/palette/useComponentPalette.d.ts +2 -0
  119. package/dist/palette/useComponentPalette.js +22 -0
  120. package/dist/palette/usePalette.d.ts +10 -0
  121. package/dist/palette/usePalette.js +11 -0
  122. package/package.json +22 -10
  123. package/dist/stories/Button.d.ts +0 -26
  124. package/dist/stories/Button.js +0 -41
  125. package/dist/stories/Button.stories.d.ts +0 -21
  126. package/dist/stories/Button.stories.js +0 -44
  127. package/dist/stories/styles.d.ts +0 -30
  128. package/dist/stories/styles.js +0 -33
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.PositiveIntegerInput = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var S = _interopRequireWildcard(require("./styles"));
10
+ var _useFocusField = require("../../../hooks/useFocusField");
11
+ var _InputLabel = require("../InputLabel");
12
+ var _PureInput = require("../PureInput");
13
+ var _Arrow = require("../../common/Arrow");
14
+ var _useFilters = require("./hooks/useFilters");
15
+ var _useNormalizers2 = require("./hooks/useNormalizers");
16
+ var _useIncrement2 = require("./hooks/useIncrement");
17
+ var _useIncrementDisabledFlags = require("./hooks/useIncrementDisabledFlags");
18
+ 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); }
19
+ 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 && Object.prototype.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; }
20
+ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveIntegerInput(_ref) {
21
+ var value = _ref.value,
22
+ onChange = _ref.onChange,
23
+ _ref$max = _ref.max,
24
+ max = _ref$max === void 0 ? Infinity : _ref$max,
25
+ _ref$upAndDown = _ref.upAndDown,
26
+ upAndDown = _ref$upAndDown === void 0 ? false : _ref$upAndDown,
27
+ label = _ref.label,
28
+ placeholder = _ref.placeholder,
29
+ hasError = _ref.hasError,
30
+ onFocus = _ref.onFocus,
31
+ onBlur = _ref.onBlur,
32
+ name = _ref.name;
33
+ var _useInputFocus = (0, _useFocusField.useInputFocus)({
34
+ onFocus: onFocus,
35
+ onBlur: onBlur
36
+ }),
37
+ inFocus = _useInputFocus.inFocus,
38
+ handleFocus = _useInputFocus.handleFocus,
39
+ handleBlur = _useInputFocus.handleBlur;
40
+ var filters = (0, _useFilters.useFilters)({
41
+ max: max
42
+ });
43
+ var _useNormalizers = (0, _useNormalizers2.useNormalizers)(),
44
+ normalizeFrom = _useNormalizers.normalizeFrom,
45
+ normalizeTo = _useNormalizers.normalizeTo;
46
+ var _useIncrement = (0, _useIncrement2.useIncrement)(),
47
+ increment = _useIncrement.increment,
48
+ decrement = _useIncrement.decrement;
49
+ var _useIncrementDisabled = (0, _useIncrementDisabledFlags.useIncrementDisabledFlags)({
50
+ max: max,
51
+ value: value
52
+ }),
53
+ isDecrementDisabled = _useIncrementDisabled.isDecrementDisabled,
54
+ isIncrementDisabled = _useIncrementDisabled.isIncrementDisabled;
55
+ var handleChange = (0, _react.useCallback)(function (event) {
56
+ var newValue = event.target.value;
57
+ var filtredValue = filters.reduce(function (acc, fn) {
58
+ return fn(acc);
59
+ }, newValue);
60
+ onChange(normalizeTo(filtredValue));
61
+ }, [normalizeTo, onChange, filters]);
62
+ var handleUp = (0, _react.useCallback)(function () {
63
+ onChange(increment(value));
64
+ }, [increment, value, onChange]);
65
+ var handleDown = (0, _react.useCallback)(function () {
66
+ onChange(decrement(value));
67
+ }, [decrement, value, onChange]);
68
+ return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
69
+ inFocus: inFocus,
70
+ label: label
71
+ }, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, {
72
+ name: name,
73
+ hasError: hasError,
74
+ inFocus: inFocus,
75
+ placeholder: placeholder,
76
+ onFocus: handleFocus,
77
+ onBlur: handleBlur,
78
+ value: normalizeFrom(value),
79
+ onChange: handleChange,
80
+ paddingRight: upAndDown ? 44 : undefined
81
+ }), upAndDown && /*#__PURE__*/_react["default"].createElement(S.Arrows, null, /*#__PURE__*/_react["default"].createElement(S.Arrow, {
82
+ onClick: handleUp,
83
+ $disabled: isIncrementDisabled
84
+ }, /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
85
+ isOpen: true,
86
+ outterSize: 12
87
+ })), /*#__PURE__*/_react["default"].createElement(S.Arrow, {
88
+ onClick: handleDown,
89
+ $disabled: isDecrementDisabled
90
+ }, /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
91
+ isOpen: false,
92
+ outterSize: 12
93
+ }))));
94
+ };
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { PositiveIntegerInput, TProps } from '.';
3
+ declare const meta: Meta<typeof PositiveIntegerInput>;
4
+ export default meta;
5
+ export declare const Default: StoryObj<TProps>;
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = exports.Default = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _addonActions = require("@storybook/addon-actions");
10
+ var _ = require(".");
11
+ 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); }
12
+ 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 && Object.prototype.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; }
13
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
14
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
15
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
16
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
17
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
18
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
19
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
20
+ var meta = {
21
+ title: 'form/PositiveIntegerInput',
22
+ component: _.PositiveIntegerInput,
23
+ tags: ['autodocs']
24
+ };
25
+ var _default = exports["default"] = meta;
26
+ var Component = function Component(props) {
27
+ var _useState = (0, _react.useState)(null),
28
+ _useState2 = _slicedToArray(_useState, 2),
29
+ value = _useState2[0],
30
+ setValue = _useState2[1];
31
+ var handleChange = (0, _react.useCallback)(function (newValue) {
32
+ setValue(newValue);
33
+ (0, _addonActions.action)('onChange')(newValue);
34
+ }, []);
35
+ return /*#__PURE__*/_react["default"].createElement(_.PositiveIntegerInput, _extends({}, props, {
36
+ value: value,
37
+ onChange: handleChange
38
+ }));
39
+ };
40
+ var Default = exports.Default = {
41
+ args: {
42
+ max: 1000,
43
+ upAndDown: true,
44
+ label: 'Label',
45
+ placeholder: 'Placeholder',
46
+ hasError: false
47
+ },
48
+ render: Component
49
+ };
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ export declare const Arrows: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
3
+ export declare const Arrow: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
4
+ $disabled: boolean;
5
+ }>>;
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.Arrows = exports.Arrow = void 0;
8
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
+ 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); }
10
+ 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 && Object.prototype.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; }
11
+ var Arrows = exports.Arrows = _styledComponents["default"].div.withConfig({
12
+ displayName: "styles__Arrows",
13
+ componentId: "sc-ctutr8-0"
14
+ })(["display:flex;flex-direction:column;position:absolute;height:100%;justify-content:center;top:0;right:18px;"]);
15
+ var Arrow = exports.Arrow = _styledComponents["default"].div.withConfig({
16
+ displayName: "styles__Arrow",
17
+ componentId: "sc-ctutr8-1"
18
+ })(["cursor:pointer;display:flex;user-select:none;", ""], function (_ref) {
19
+ var $disabled = _ref.$disabled;
20
+ return $disabled && (0, _styledComponents.css)(["opacity:0.4;pointer-events:none;"]);
21
+ });
@@ -0,0 +1,12 @@
1
+ import { FC, InputHTMLAttributes } from 'react';
2
+ import { TPureInputPalette } from './palette';
3
+ export type TProps = InputHTMLAttributes<HTMLInputElement> & {
4
+ paddingLeft?: number;
5
+ paddingRight?: number;
6
+ hasError?: boolean;
7
+ inFocus?: boolean;
8
+ hasBorder?: boolean;
9
+ className?: never;
10
+ palette?: Partial<TPureInputPalette>;
11
+ };
12
+ export declare const PureInput: FC<TProps>;
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.PureInput = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var S = _interopRequireWildcard(require("./styles"));
10
+ var _palette = require("../../../palette");
11
+ var _excluded = ["paddingLeft", "paddingRight", "hasError", "inFocus", "hasBorder", "className", "palette"];
12
+ 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); }
13
+ 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 && Object.prototype.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; }
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
16
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
17
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
18
+ var PureInput = exports.PureInput = function PureInput(_ref) {
19
+ var _ref$paddingLeft = _ref.paddingLeft,
20
+ paddingLeft = _ref$paddingLeft === void 0 ? 18 : _ref$paddingLeft,
21
+ _ref$paddingRight = _ref.paddingRight,
22
+ paddingRight = _ref$paddingRight === void 0 ? 18 : _ref$paddingRight,
23
+ _ref$hasError = _ref.hasError,
24
+ hasError = _ref$hasError === void 0 ? false : _ref$hasError,
25
+ _ref$inFocus = _ref.inFocus,
26
+ inFocus = _ref$inFocus === void 0 ? false : _ref$inFocus,
27
+ _ref$hasBorder = _ref.hasBorder,
28
+ hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
29
+ className = _ref.className,
30
+ palette = _ref.palette,
31
+ rest = _objectWithoutProperties(_ref, _excluded);
32
+ var mergedPalette = (0, _palette.useComponentPalette)('pureInput', palette);
33
+ return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
34
+ variant: "bodyMRegular",
35
+ element: "input",
36
+ $paddingLeft: paddingLeft,
37
+ $paddingRight: paddingRight,
38
+ $hasError: hasError,
39
+ $inFocus: inFocus,
40
+ $hasBorder: hasBorder,
41
+ $palette: mergedPalette
42
+ }, rest));
43
+ };
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { PureInput } from '.';
3
+ declare const meta: Meta<typeof PureInput>;
4
+ export default meta;
5
+ export declare const Default: StoryObj<typeof PureInput>;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Default = void 0;
7
+ var _ = require(".");
8
+ var meta = {
9
+ title: 'form/PureInput',
10
+ component: _.PureInput,
11
+ tags: ['autodocs']
12
+ };
13
+ var _default = exports["default"] = meta;
14
+ var Default = exports.Default = {
15
+ args: {
16
+ paddingLeft: 18,
17
+ paddingRight: 18,
18
+ hasError: false,
19
+ inFocus: false,
20
+ hasBorder: true,
21
+ placeholder: 'Введите текст'
22
+ }
23
+ };
@@ -0,0 +1,10 @@
1
+ import { TAbstractPalette } from '../../../palette';
2
+ export type TPureInputPalette = {
3
+ text: string;
4
+ bg: string;
5
+ error: string;
6
+ border: string;
7
+ borderFocus: string;
8
+ placeholder: string;
9
+ };
10
+ export declare const generatePureInputPalette: (abstractPalette: TAbstractPalette) => TPureInputPalette;
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.generatePureInputPalette = void 0;
7
+ var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
9
+ var generatePureInputPalette = exports.generatePureInputPalette = function generatePureInputPalette(abstractPalette) {
10
+ return {
11
+ text: abstractPalette.primary,
12
+ bg: abstractPalette.base,
13
+ error: abstractPalette.error,
14
+ border: (0, _hexToRgba["default"])(abstractPalette.neutralBrutal, 0.3),
15
+ borderFocus: abstractPalette.primary,
16
+ placeholder: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3)
17
+ };
18
+ };
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import { TPureInputPalette } from './palette';
3
+ export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps, {
4
+ $paddingLeft: number;
5
+ $paddingRight: number;
6
+ $hasError: boolean;
7
+ $inFocus: boolean;
8
+ $hasBorder: boolean;
9
+ $palette: TPureInputPalette;
10
+ }>> & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Wrapper = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _Typography = require("../../common/Typography");
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
+ var Wrapper = exports.Wrapper = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
11
+ displayName: "styles__Wrapper",
12
+ componentId: "sc-1g8ijo6-0"
13
+ })(["color:", ";border-radius:10px;outline:none;padding:12px 18px;width:100%;background-color:", ";transition:all 0.2s ease-in-out 0s;box-sizing:border-box;padding-right:", "px;padding-left:", "px;border:1px solid ", ";&::placeholder{color:", ";}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus{transition:background-color 0s 600000s,color 0s 600000s !important;}"], function (_ref) {
14
+ var $palette = _ref.$palette;
15
+ return $palette.text;
16
+ }, function (_ref2) {
17
+ var $palette = _ref2.$palette;
18
+ return $palette.bg;
19
+ }, function (_ref3) {
20
+ var $paddingRight = _ref3.$paddingRight;
21
+ return $paddingRight;
22
+ }, function (_ref4) {
23
+ var $paddingLeft = _ref4.$paddingLeft;
24
+ return $paddingLeft;
25
+ }, function (_ref5) {
26
+ var $hasError = _ref5.$hasError,
27
+ $inFocus = _ref5.$inFocus,
28
+ $hasBorder = _ref5.$hasBorder,
29
+ $palette = _ref5.$palette;
30
+ return !$hasBorder ? 'transparent' : $hasError ? $palette.error : $inFocus ? $palette.borderFocus : $palette.border;
31
+ }, function (_ref6) {
32
+ var $palette = _ref6.$palette;
33
+ return $palette.placeholder;
34
+ });
@@ -0,0 +1,11 @@
1
+ type TProps<TEvent> = {
2
+ initialFocusFlag?: boolean;
3
+ onFocus?: (e: TEvent) => void;
4
+ onBlur?: (e: TEvent) => void;
5
+ };
6
+ export declare const useInputFocus: <TEvent>({ initialFocusFlag, onFocus, onBlur }?: TProps<TEvent>) => {
7
+ inFocus: boolean;
8
+ handleFocus: (event: TEvent) => void;
9
+ handleBlur: (event: TEvent) => void;
10
+ };
11
+ export {};
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useInputFocus = void 0;
7
+ var _react = require("react");
8
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
9
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
11
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
12
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
13
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
14
+ var useInputFocus = exports.useInputFocus = function useInputFocus() {
15
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
16
+ _ref$initialFocusFlag = _ref.initialFocusFlag,
17
+ initialFocusFlag = _ref$initialFocusFlag === void 0 ? false : _ref$initialFocusFlag,
18
+ onFocus = _ref.onFocus,
19
+ onBlur = _ref.onBlur;
20
+ var _useState = (0, _react.useState)(initialFocusFlag),
21
+ _useState2 = _slicedToArray(_useState, 2),
22
+ inFocus = _useState2[0],
23
+ setInFocus = _useState2[1];
24
+ var handleFocus = function handleFocus(event) {
25
+ setInFocus(true);
26
+ if (onFocus) onFocus(event);
27
+ };
28
+ var handleBlur = function handleBlur(event) {
29
+ setInFocus(false);
30
+ if (onBlur) onBlur(event);
31
+ };
32
+ return {
33
+ inFocus: inFocus,
34
+ handleFocus: handleFocus,
35
+ handleBlur: handleBlur
36
+ };
37
+ };
package/dist/index.d.ts CHANGED
@@ -1 +1,14 @@
1
- export { Button } from './stories/Button';
1
+ export { Skeleton } from './components/common/Skeleton';
2
+ export { InvoiceboxLoader } from './components/common/InvoiceboxLoader';
3
+ export { Typography, TypographyGlobalStyle } from './components/common/Typography';
4
+ export { InvoiceboxSpinner } from './components/common/InvoiceboxSpinner';
5
+ export { SecondaryButton } from './components/common/SecondaryButton';
6
+ export { Arrow } from './components/common/Arrow';
7
+ export { InputLabel } from './components/form/InputLabel';
8
+ export { PureInput } from './components/form/PureInput';
9
+ export { PositiveIntegerInput } from './components/form/PositiveIntegerInput';
10
+ export type { TProps as TPositiveIntegerInputProps } from './components/form/PositiveIntegerInput';
11
+ export { Dropdown } from './components/common/Dropdown';
12
+ export type { TProps as TDropdownProps } from './components/common/Dropdown';
13
+ export { Scrollbar } from './components/common/Scrollbar';
14
+ export { PaletteProvider } from './palette';
package/dist/index.js CHANGED
@@ -1,5 +1,95 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Button = void 0;
4
- var Button_1 = require("./stories/Button");
5
- Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Arrow", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Arrow.Arrow;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "Dropdown", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Dropdown.Dropdown;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "InputLabel", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _InputLabel.InputLabel;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "InvoiceboxLoader", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _InvoiceboxLoader.InvoiceboxLoader;
28
+ }
29
+ });
30
+ Object.defineProperty(exports, "InvoiceboxSpinner", {
31
+ enumerable: true,
32
+ get: function get() {
33
+ return _InvoiceboxSpinner.InvoiceboxSpinner;
34
+ }
35
+ });
36
+ Object.defineProperty(exports, "PaletteProvider", {
37
+ enumerable: true,
38
+ get: function get() {
39
+ return _palette.PaletteProvider;
40
+ }
41
+ });
42
+ Object.defineProperty(exports, "PositiveIntegerInput", {
43
+ enumerable: true,
44
+ get: function get() {
45
+ return _PositiveIntegerInput.PositiveIntegerInput;
46
+ }
47
+ });
48
+ Object.defineProperty(exports, "PureInput", {
49
+ enumerable: true,
50
+ get: function get() {
51
+ return _PureInput.PureInput;
52
+ }
53
+ });
54
+ Object.defineProperty(exports, "Scrollbar", {
55
+ enumerable: true,
56
+ get: function get() {
57
+ return _Scrollbar.Scrollbar;
58
+ }
59
+ });
60
+ Object.defineProperty(exports, "SecondaryButton", {
61
+ enumerable: true,
62
+ get: function get() {
63
+ return _SecondaryButton.SecondaryButton;
64
+ }
65
+ });
66
+ Object.defineProperty(exports, "Skeleton", {
67
+ enumerable: true,
68
+ get: function get() {
69
+ return _Skeleton.Skeleton;
70
+ }
71
+ });
72
+ Object.defineProperty(exports, "Typography", {
73
+ enumerable: true,
74
+ get: function get() {
75
+ return _Typography.Typography;
76
+ }
77
+ });
78
+ Object.defineProperty(exports, "TypographyGlobalStyle", {
79
+ enumerable: true,
80
+ get: function get() {
81
+ return _Typography.TypographyGlobalStyle;
82
+ }
83
+ });
84
+ var _Skeleton = require("./components/common/Skeleton");
85
+ var _InvoiceboxLoader = require("./components/common/InvoiceboxLoader");
86
+ var _Typography = require("./components/common/Typography");
87
+ var _InvoiceboxSpinner = require("./components/common/InvoiceboxSpinner");
88
+ var _SecondaryButton = require("./components/common/SecondaryButton");
89
+ var _Arrow = require("./components/common/Arrow");
90
+ var _InputLabel = require("./components/form/InputLabel");
91
+ var _PureInput = require("./components/form/PureInput");
92
+ var _PositiveIntegerInput = require("./components/form/PositiveIntegerInput");
93
+ var _Dropdown = require("./components/common/Dropdown");
94
+ var _Scrollbar = require("./components/common/Scrollbar");
95
+ var _palette = require("./palette");
@@ -0,0 +1,4 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ export declare const Docs: StoryObj;
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Docs = void 0;
7
+ var _constants = require("./constants");
8
+ var _Typography = require("../components/common/Typography");
9
+ var meta = {
10
+ title: 'palette/Colors'
11
+ };
12
+ var _default = exports["default"] = meta;
13
+ var Docs = exports.Docs = {
14
+ render: function render() {
15
+ return /*#__PURE__*/React.createElement("div", {
16
+ style: {
17
+ display: 'flex',
18
+ flexDirection: 'column',
19
+ gap: 30
20
+ }
21
+ }, Object.keys(_constants.defaultAbstractPalette).map(function (key) {
22
+ return /*#__PURE__*/React.createElement("div", {
23
+ style: {
24
+ display: 'flex',
25
+ alignItems: 'center',
26
+ gap: 20
27
+ }
28
+ }, /*#__PURE__*/React.createElement("div", {
29
+ style: {
30
+ backgroundColor: _constants.defaultAbstractPalette[key],
31
+ width: 40,
32
+ height: 40,
33
+ borderRadius: '50%'
34
+ }
35
+ }), /*#__PURE__*/React.createElement(_Typography.Typography, {
36
+ variant: "bodyL"
37
+ }, key, " ", _constants.defaultAbstractPalette[key]));
38
+ }));
39
+ }
40
+ };
@@ -0,0 +1,2 @@
1
+ import { TAbstractPalette } from './types';
2
+ export declare const defaultAbstractPalette: TAbstractPalette;
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.defaultAbstractPalette = void 0;
7
+ var defaultAbstractPalette = exports.defaultAbstractPalette = {
8
+ primary: '#353F47',
9
+ secondary: '#FAD247',
10
+ base: '#FFFFFF',
11
+ error: '#EB5757',
12
+ neutralLight: '#f9f9f9',
13
+ neutralUsual: '#f1f2f6',
14
+ neutralHeavy: '#ececf0',
15
+ neutralMassive: '#dee0e7',
16
+ neutralFoggy: '#ccc',
17
+ neutralBrutal: '#999'
18
+ };
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ import { TSkeletonPalette } from '../components/common/Skeleton/palette';
3
+ import { TInvoiceboxSpinnerPalette } from '../components/common/InvoiceboxSpinner/palette';
4
+ import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/palette';
5
+ import { TArrowPalette } from '../components/common/Arrow/palette';
6
+ import { TInputLabelPalette } from '../components/form/InputLabel/palette';
7
+ import { TPureInputPalette } from '../components/form/PureInput/palette';
8
+ import { TDropdownPalette } from '../components/common/Dropdown/palette';
9
+ import { TScrollbarPalette } from '../components/common/Scrollbar/palette';
10
+ type TContext = {
11
+ skeleton: TSkeletonPalette;
12
+ invoiceboxSpinner: TInvoiceboxSpinnerPalette;
13
+ secondaryButton: TSecondaryButtonPalette;
14
+ arrow: TArrowPalette;
15
+ inputLabel: TInputLabelPalette;
16
+ pureInput: TPureInputPalette;
17
+ dropdown: TDropdownPalette;
18
+ scrollbar: TScrollbarPalette;
19
+ };
20
+ export declare const PaletteContext: import("react").Context<TContext>;
21
+ export {};
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.PaletteContext = void 0;
7
+ var _react = require("react");
8
+ var _constants = require("./constants");
9
+ var _palette = require("../components/common/Skeleton/palette");
10
+ var _palette2 = require("../components/common/InvoiceboxSpinner/palette");
11
+ var _palette3 = require("../components/common/SecondaryButton/palette");
12
+ var _palette4 = require("../components/common/Arrow/palette");
13
+ var _palette5 = require("../components/form/InputLabel/palette");
14
+ var _palette6 = require("../components/form/PureInput/palette");
15
+ var _palette7 = require("../components/common/Dropdown/palette");
16
+ var _palette8 = require("../components/common/Scrollbar/palette");
17
+ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
18
+ skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
19
+ invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
20
+ secondaryButton: (0, _palette3.generateSecondaryButtonPalette)(_constants.defaultAbstractPalette),
21
+ arrow: (0, _palette4.generateArrowPalette)(_constants.defaultAbstractPalette),
22
+ inputLabel: (0, _palette5.generateInputLabelPalette)(_constants.defaultAbstractPalette),
23
+ pureInput: (0, _palette6.generatePureInputPalette)(_constants.defaultAbstractPalette),
24
+ dropdown: (0, _palette7.generateDropdownPalette)(_constants.defaultAbstractPalette),
25
+ scrollbar: (0, _palette8.generateScrollbarPalette)(_constants.defaultAbstractPalette)
26
+ });
@@ -0,0 +1,3 @@
1
+ export { PaletteProvider } from './provider';
2
+ export type { TAbstractPalette } from './types';
3
+ export { useComponentPalette } from './useComponentPalette';