@invoicebox/ui 0.1.0-alpha.53 → 0.1.0-alpha.55
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.
- package/dist/components/common/Dropdown/index.js +2 -2
- package/dist/components/common/InvoiceboxSpinner/index.d.ts +0 -1
- package/dist/components/common/InvoiceboxSpinner/index.js +4 -6
- package/dist/components/common/InvoiceboxSpinner/index.stories.js +0 -1
- package/dist/components/common/InvoiceboxSpinner/palette.d.ts +2 -4
- package/dist/components/common/InvoiceboxSpinner/palette.js +2 -4
- package/dist/components/common/SecondaryButton/index.d.ts +0 -4
- package/dist/components/common/SecondaryButton/index.js +5 -8
- package/dist/components/form/InputLabel/index.d.ts +0 -2
- package/dist/components/form/InputLabel/index.js +4 -5
- package/dist/components/form/PureInput/index.d.ts +0 -2
- package/dist/components/form/PureInput/index.js +3 -4
- package/dist/palette/index.stories.js +14 -12
- package/dist/palette/provider.d.ts +0 -10
- package/dist/palette/provider.js +7 -27
- package/package.json +1 -1
|
@@ -33,7 +33,7 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
|
|
|
33
33
|
width = _ref$width === void 0 ? 'auto' : _ref$width,
|
|
34
34
|
zIndex = _ref.zIndex,
|
|
35
35
|
onCloseTransitionEnd = _ref.onCloseTransitionEnd;
|
|
36
|
-
var
|
|
36
|
+
var palette = (0, _palette.useComponentPalette)('dropdown');
|
|
37
37
|
var position = (0, _react.useRef)({
|
|
38
38
|
isAbove: true,
|
|
39
39
|
translateY: '0px'
|
|
@@ -112,6 +112,6 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
|
|
|
112
112
|
$width: width,
|
|
113
113
|
$zIndex: zIndex,
|
|
114
114
|
onTransitionEnd: handleCloseTransitionEnd,
|
|
115
|
-
$palette:
|
|
115
|
+
$palette: palette
|
|
116
116
|
}, children);
|
|
117
117
|
};
|
|
@@ -12,9 +12,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
12
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
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
14
|
var InvoiceboxSpinner = exports.InvoiceboxSpinner = function InvoiceboxSpinner(_ref) {
|
|
15
|
-
var
|
|
16
|
-
isSecondary = _ref$isSecondary === void 0 ? false : _ref$isSecondary,
|
|
17
|
-
palette = _ref.palette,
|
|
15
|
+
var palette = _ref.palette,
|
|
18
16
|
_ref$width = _ref.width,
|
|
19
17
|
width = _ref$width === void 0 ? '100%' : _ref$width;
|
|
20
18
|
var mergedPalette = (0, _palette.useComponentPalette)('invoiceboxSpinner', palette);
|
|
@@ -26,15 +24,15 @@ var InvoiceboxSpinner = exports.InvoiceboxSpinner = function InvoiceboxSpinner(_
|
|
|
26
24
|
fill: "none"
|
|
27
25
|
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
28
26
|
d: "M57.7133 46.2284C53.4996 49.6836 47.955 51.3595 42.7575 50.9354C37.5451 50.5665 32.6961 48.0942 29.5896 44.4627C28.6805 43.4002 28.8405 41.8302 29.9467 40.9575C30.9185 40.1909 32.3196 40.2339 33.2567 40.971C38.8952 45.3988 47.1298 43.815 50.4422 39.1834C52.0805 36.8927 55.3418 36.3112 57.7268 37.8848C60.1117 39.4584 60.7172 42.5909 59.0788 44.8817C58.818 45.2465 58.5158 45.5678 58.1832 45.8437L57.7133 46.2284Z",
|
|
29
|
-
fill:
|
|
27
|
+
fill: mergedPalette.rightEye
|
|
30
28
|
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
31
29
|
d: "M94 22.5C94 32.062 86.0453 40 76 40C65.9547 40 58 32.062 58 22.5C58 12.938 65.9547 5 76 5C86.0453 5 94 12.938 94 22.5Z",
|
|
32
|
-
stroke:
|
|
30
|
+
stroke: mergedPalette.rightEye,
|
|
33
31
|
strokeWidth: "10",
|
|
34
32
|
id: "right-eye"
|
|
35
33
|
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
36
34
|
d: "M26 27.5C26 32.0754 22.0922 36 17 36C11.9078 36 8 32.0754 8 27.5C8 22.9246 11.9078 19 17 19C22.0922 19 26 22.9246 26 27.5Z",
|
|
37
|
-
stroke:
|
|
35
|
+
stroke: mergedPalette.leftEye,
|
|
38
36
|
strokeWidth: "6",
|
|
39
37
|
id: "left-eye"
|
|
40
38
|
})));
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { TAbstractPalette } from '../../../palette';
|
|
2
2
|
export type TInvoiceboxSpinnerPalette = {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
leftEyeSecondary: string;
|
|
6
|
-
rightEyeSecondary: string;
|
|
3
|
+
leftEye: string;
|
|
4
|
+
rightEye: string;
|
|
7
5
|
};
|
|
8
6
|
export declare const generateInvoiceboxSpinnerPalette: (abstractPalette: TAbstractPalette) => TInvoiceboxSpinnerPalette;
|
|
@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.generateInvoiceboxSpinnerPalette = void 0;
|
|
7
7
|
var generateInvoiceboxSpinnerPalette = exports.generateInvoiceboxSpinnerPalette = function generateInvoiceboxSpinnerPalette(abstractPalette) {
|
|
8
8
|
return {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
leftEyeSecondary: abstractPalette.primary,
|
|
12
|
-
rightEyeSecondary: abstractPalette.secondary
|
|
9
|
+
leftEye: abstractPalette.primary,
|
|
10
|
+
rightEye: abstractPalette.secondary
|
|
13
11
|
};
|
|
14
12
|
};
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react';
|
|
2
|
-
import { TProps as TInvoiceboxSpinnerProps } from '../InvoiceboxSpinner';
|
|
3
|
-
import { TSecondaryButtonPalette } from './palette';
|
|
4
2
|
type TButtonProps = {
|
|
5
3
|
element?: 'button';
|
|
6
4
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
@@ -12,8 +10,6 @@ export type TProps = (TButtonProps | TAnchorProps) & {
|
|
|
12
10
|
fullWidth?: boolean;
|
|
13
11
|
disabled?: boolean;
|
|
14
12
|
className?: never;
|
|
15
|
-
palette?: Partial<TSecondaryButtonPalette>;
|
|
16
|
-
invoiceboxSpinnerProps?: Pick<TInvoiceboxSpinnerProps, 'palette'>;
|
|
17
13
|
};
|
|
18
14
|
export declare const SecondaryButton: FC<TProps>;
|
|
19
15
|
export {};
|
|
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var S = _interopRequireWildcard(require("./styles"));
|
|
10
10
|
var _InvoiceboxSpinner = require("../InvoiceboxSpinner");
|
|
11
11
|
var _palette = require("../../../palette");
|
|
12
|
-
var _excluded = ["element", "isLoading", "fullWidth", "disabled", "className", "
|
|
12
|
+
var _excluded = ["element", "isLoading", "fullWidth", "disabled", "className", "children"];
|
|
13
13
|
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); }
|
|
14
14
|
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; }
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -26,11 +26,9 @@ var SecondaryButton = exports.SecondaryButton = function SecondaryButton(_ref) {
|
|
|
26
26
|
_ref$disabled = _ref.disabled,
|
|
27
27
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
28
28
|
className = _ref.className,
|
|
29
|
-
palette = _ref.palette,
|
|
30
|
-
invoiceboxSpinnerProps = _ref.invoiceboxSpinnerProps,
|
|
31
29
|
children = _ref.children,
|
|
32
30
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
33
|
-
var
|
|
31
|
+
var palette = (0, _palette.useComponentPalette)('secondaryButton');
|
|
34
32
|
var isDisabled = disabled || isLoading;
|
|
35
33
|
return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
|
|
36
34
|
as: element
|
|
@@ -38,12 +36,11 @@ var SecondaryButton = exports.SecondaryButton = function SecondaryButton(_ref) {
|
|
|
38
36
|
$disabled: isDisabled
|
|
39
37
|
/* отправляет аргумент, для чистоты на уровне html атрибутов, на логику не влияет */,
|
|
40
38
|
disabled: element === 'button' ? isDisabled : undefined,
|
|
41
|
-
$palette:
|
|
39
|
+
$palette: palette,
|
|
42
40
|
$fullWidth: fullWidth
|
|
43
|
-
}, rest), isLoading && /*#__PURE__*/_react["default"].createElement(S.LoaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_InvoiceboxSpinner.InvoiceboxSpinner,
|
|
44
|
-
isSecondary: true,
|
|
41
|
+
}, rest), isLoading && /*#__PURE__*/_react["default"].createElement(S.LoaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_InvoiceboxSpinner.InvoiceboxSpinner, {
|
|
45
42
|
width: "32px"
|
|
46
|
-
}))
|
|
43
|
+
})), /*#__PURE__*/_react["default"].createElement(S.Inner, {
|
|
47
44
|
element: "span",
|
|
48
45
|
variant: "buttonM",
|
|
49
46
|
$isLoading: isLoading
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
|
-
import { TInputLabelPalette } from './palette';
|
|
3
2
|
export type TProps = {
|
|
4
3
|
disabled?: boolean;
|
|
5
4
|
label?: string;
|
|
6
5
|
inFocus?: boolean;
|
|
7
6
|
children: ReactNode;
|
|
8
|
-
palette?: Partial<TInputLabelPalette>;
|
|
9
7
|
};
|
|
10
8
|
export declare const InputLabel: FC<TProps>;
|
|
@@ -17,15 +17,14 @@ var InputLabel = exports.InputLabel = function InputLabel(_ref) {
|
|
|
17
17
|
label = _ref.label,
|
|
18
18
|
_ref$inFocus = _ref.inFocus,
|
|
19
19
|
inFocus = _ref$inFocus === void 0 ? false : _ref$inFocus,
|
|
20
|
-
children = _ref.children
|
|
21
|
-
|
|
22
|
-
var mergedPalette = (0, _palette.useComponentPalette)('inputLabel', palette);
|
|
20
|
+
children = _ref.children;
|
|
21
|
+
var palette = (0, _palette.useComponentPalette)('inputLabel');
|
|
23
22
|
return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
|
|
24
|
-
$palette:
|
|
23
|
+
$palette: palette,
|
|
25
24
|
$disabled: disabled,
|
|
26
25
|
$isLabel: !!label
|
|
27
26
|
}, label && /*#__PURE__*/_react["default"].createElement(S.Label, {
|
|
28
|
-
$palette:
|
|
27
|
+
$palette: palette,
|
|
29
28
|
$inFocus: inFocus,
|
|
30
29
|
variant: "captionRegular"
|
|
31
30
|
}, label), children);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { FC, InputHTMLAttributes } from 'react';
|
|
2
|
-
import { TPureInputPalette } from './palette';
|
|
3
2
|
export type TProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
4
3
|
paddingLeft?: number;
|
|
5
4
|
paddingRight?: number;
|
|
@@ -7,6 +6,5 @@ export type TProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
|
7
6
|
inFocus?: boolean;
|
|
8
7
|
hasBorder?: boolean;
|
|
9
8
|
className?: never;
|
|
10
|
-
palette?: Partial<TPureInputPalette>;
|
|
11
9
|
};
|
|
12
10
|
export declare const PureInput: FC<TProps>;
|
|
@@ -8,7 +8,7 @@ exports.PureInput = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var S = _interopRequireWildcard(require("./styles"));
|
|
10
10
|
var _palette = require("../../../palette");
|
|
11
|
-
var _excluded = ["paddingLeft", "paddingRight", "hasError", "inFocus", "hasBorder", "className"
|
|
11
|
+
var _excluded = ["paddingLeft", "paddingRight", "hasError", "inFocus", "hasBorder", "className"];
|
|
12
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
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
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -27,9 +27,8 @@ var PureInput = exports.PureInput = function PureInput(_ref) {
|
|
|
27
27
|
_ref$hasBorder = _ref.hasBorder,
|
|
28
28
|
hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
|
|
29
29
|
className = _ref.className,
|
|
30
|
-
palette = _ref.palette,
|
|
31
30
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
32
|
-
var
|
|
31
|
+
var palette = (0, _palette.useComponentPalette)('pureInput');
|
|
33
32
|
return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
|
|
34
33
|
variant: "bodyMRegular",
|
|
35
34
|
element: "input",
|
|
@@ -38,6 +37,6 @@ var PureInput = exports.PureInput = function PureInput(_ref) {
|
|
|
38
37
|
$hasError: hasError,
|
|
39
38
|
$inFocus: inFocus,
|
|
40
39
|
$hasBorder: hasBorder,
|
|
41
|
-
$palette:
|
|
40
|
+
$palette: palette
|
|
42
41
|
}, rest));
|
|
43
42
|
};
|
|
@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = exports.Docs = void 0;
|
|
7
7
|
var _Skeleton = require("../components/common/Skeleton");
|
|
8
8
|
var _provider = require("./provider");
|
|
9
|
-
var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
|
|
10
9
|
var _Typography = require("../components/common/Typography");
|
|
11
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
10
|
var Example = function Example(_ref) {
|
|
13
11
|
var children = _ref.children;
|
|
14
12
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -26,22 +24,26 @@ var Docs = exports.Docs = {
|
|
|
26
24
|
render: function render() {
|
|
27
25
|
return /*#__PURE__*/React.createElement(_Typography.Typography, {
|
|
28
26
|
variant: "bodyL"
|
|
29
|
-
}, /*#__PURE__*/React.createElement(
|
|
27
|
+
}, /*#__PURE__*/React.createElement("h1", null, "\u0421\u0438\u0441\u0442\u0435\u043C\u0430 \u0446\u0432\u0435\u0442\u043E\u0432"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E"), /*#__PURE__*/React.createElement("p", null, "\u041C\u043E\u0436\u043D\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B \u0431\u0435\u0437 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0446\u0432\u0435\u0442\u043E\u0432, \u0442\u043E\u0433\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u044B \u0446\u0432\u0435\u0442\u0430 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, '<Skeleton />')), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0446\u0432\u0435\u0442\u043E\u0432 \u043D\u0430 \u0443\u0440\u043E\u0432\u043D\u0435 \u0432\u044B\u0437\u043E\u0432\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430"), /*#__PURE__*/React.createElement("p", null, "\u041C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u0446\u0432\u0435\u0442\u0430 \u043D\u0430 \u0443\u0440\u043E\u0432\u043D\u0435 \u0432\u044B\u0437\u043E\u0432\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430, \u0434\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E", ' ', /*#__PURE__*/React.createElement("code", null, "palette"), "."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<Skeleton palette={{ bg: '#c9c', flicker: '#5a5' }} />")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
|
|
30
28
|
palette: {
|
|
31
29
|
bg: '#c9c',
|
|
32
30
|
flicker: '#5a5'
|
|
33
31
|
}
|
|
34
|
-
})), /*#__PURE__*/React.createElement(
|
|
32
|
+
})), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "\u0415\u0441\u043B\u0438 \u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u043D\u0435\u0442 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 ", /*#__PURE__*/React.createElement("code", null, "palette"), ", \u0430 \u0432\u0430\u043C \u043E\u043D\u043E \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044F, \u0441\u043E\u0437\u0434\u0430\u0439\u0442\u0435", ' ', /*#__PURE__*/React.createElement("a", {
|
|
33
|
+
href: "https://github.com/InvoiceBox/invoicebox-ui/issues"
|
|
34
|
+
}, "issue"), ". \u0418\u043B\u0438 \u0434\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0441\u0430\u043C\u043E\u0441\u0442\u043E\u044F\u0442\u0435\u043B\u044C\u043D\u043E \u0438 \u043E\u0442\u043A\u0440\u043E\u0439\u0442\u0435 pull request, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u0440\u0438\u043C\u0435\u0440\u0430, \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442", ' ', /*#__PURE__*/React.createElement("code", null, "Skeleton"), "."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0446\u0432\u0435\u0442\u043E\u0432 \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u043E\u0433\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430"), /*#__PURE__*/React.createElement("p", null, "\u041C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u043E\u0433\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430. \u0414\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435", ' ', /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u0438 \u0435\u0433\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0443."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider skeleton={{ bg: '#39c', flicker: '#5cc' }}>\n", " <Skeleton />\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
35
35
|
skeleton: {
|
|
36
36
|
bg: '#39c',
|
|
37
37
|
flicker: '#5cc'
|
|
38
38
|
}
|
|
39
|
-
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(
|
|
39
|
+
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "\u0415\u0441\u043B\u0438 \u0443 ", /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u043D\u0435\u0442 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u0433\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0443, \u0430 \u0432\u0430\u043C \u043E\u043D\u043E \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044F, \u0441\u043E\u0437\u0434\u0430\u0439\u0442\u0435", ' ', /*#__PURE__*/React.createElement("a", {
|
|
40
|
+
href: "https://github.com/InvoiceBox/invoicebox-ui/issues"
|
|
41
|
+
}, "issue"), ". \u0418\u043B\u0438 \u0434\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0441\u0430\u043C\u043E\u0441\u0442\u043E\u044F\u0442\u0435\u043B\u044C\u043D\u043E \u0438 \u043E\u0442\u043A\u0440\u043E\u0439\u0442\u0435 pull request, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u0440\u0438\u043C\u0435\u0440\u0430, \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442", ' ', /*#__PURE__*/React.createElement("code", null, "Skeleton"), "."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0445 \u0446\u0432\u0435\u0442\u043E\u0432"), /*#__PURE__*/React.createElement("p", null, "\u0412\u0441\u0435 \u0446\u0432\u0435\u0442\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 \u0441\u043E\u0437\u0434\u0430\u044E\u0442\u0441\u044F \u0438\u0437 \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0445 \u0446\u0432\u0435\u0442\u043E\u0432. \u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u044F\u044F \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430, \u043C\u043E\u0436\u043D\u043E \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u0446\u0432\u0435\u0442\u043E\u0432\u0443\u044E \u043F\u0430\u043B\u0438\u0442\u0440\u0443 \u0432\u0441\u0435\u0445 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 \u0440\u0430\u0437\u043E\u043C. \u042D\u0442\u043E \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u043E\u043B\u0435\u0437\u043D\u043E \u0434\u043B\u044F \u0442\u0435\u043C\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F. \u0414\u043B\u044F \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0445 \u0446\u0432\u0435\u0442\u043E\u0432 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435", ' ', /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u0438 \u0435\u0433\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E ", /*#__PURE__*/React.createElement("code", null, "abstract"), "."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider abstract={{ neutralUsual: '#c93', neutralLight: '#cc5' }}>\n", " <Skeleton />\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
40
42
|
"abstract": {
|
|
41
43
|
neutralUsual: '#c93',
|
|
42
44
|
neutralLight: '#cc5'
|
|
43
45
|
}
|
|
44
|
-
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(
|
|
46
|
+
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442 \u0446\u0432\u0435\u0442\u043E\u0432"), /*#__PURE__*/React.createElement("p", null, "\u0421\u0430\u043C\u044B\u0439 \u0432\u044B\u0441\u043E\u043A\u0438\u0439 \u043F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442 \u0438\u043C\u0435\u044E\u0442 \u0446\u0432\u0435\u0442\u0430 \u043D\u0430 \u0443\u0440\u043E\u0432\u043D\u0435 \u0432\u044B\u0437\u043E\u0432\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430. \u0417\u0430\u0442\u0435\u043C \u0446\u0432\u0435\u0442\u0430 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E, \u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u043D\u044B\u0435 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 ", /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u0438 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u0433\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430. \u0417\u0430\u0442\u0435\u043C \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430, \u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u043D\u044B\u0435 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 ", /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u0438 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430", ' ', /*#__PURE__*/React.createElement("code", null, "abstract"), "."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider abstract={{ neutralUsual: 'red' }} skeleton={{ bg: 'green' }}>\n", " <Skeleton palette={{ bg: 'blue' }}/>\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
45
47
|
"abstract": {
|
|
46
48
|
neutralUsual: 'red'
|
|
47
49
|
},
|
|
@@ -52,30 +54,30 @@ var Docs = exports.Docs = {
|
|
|
52
54
|
palette: {
|
|
53
55
|
bg: 'blue'
|
|
54
56
|
}
|
|
55
|
-
}))), /*#__PURE__*/React.createElement(
|
|
57
|
+
}))), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider abstract={{ neutralUsual: 'red' }} skeleton={{ bg: 'green' }}>\n", " <Skeleton />\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
56
58
|
"abstract": {
|
|
57
59
|
neutralUsual: 'red'
|
|
58
60
|
},
|
|
59
61
|
skeleton: {
|
|
60
62
|
bg: 'green'
|
|
61
63
|
}
|
|
62
|
-
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(
|
|
64
|
+
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider abstract={{ neutralUsual: 'red' }}>\n", " <Skeleton />\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
63
65
|
"abstract": {
|
|
64
66
|
neutralUsual: 'red'
|
|
65
67
|
}
|
|
66
|
-
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(
|
|
68
|
+
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0438 \u043F\u043E\u043B\u043D\u043E\u0435 \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0446\u0432\u0435\u0442\u043E\u0432"), /*#__PURE__*/React.createElement("p", null, "\u041D\u0430 \u043B\u044E\u0431\u043E\u043C \u0443\u0440\u043E\u0432\u043D\u0435 \u043C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u043B\u044E\u0431\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0446\u0432\u0435\u0442\u043E\u0432."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<Skeleton palette={{ bg: 'pink' }}/>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
|
|
67
69
|
palette: {
|
|
68
70
|
bg: 'pink'
|
|
69
71
|
}
|
|
70
|
-
})), /*#__PURE__*/React.createElement(
|
|
72
|
+
})), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<Skeleton palette={{ flicker: 'brown' }}/>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
|
|
71
73
|
palette: {
|
|
72
74
|
flicker: 'brown'
|
|
73
75
|
}
|
|
74
|
-
})), /*#__PURE__*/React.createElement(
|
|
76
|
+
})), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<Skeleton palette={{ bg: 'pink', flicker: 'brown' }}/>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
|
|
75
77
|
palette: {
|
|
76
78
|
bg: 'pink',
|
|
77
79
|
flicker: 'brown'
|
|
78
80
|
}
|
|
79
|
-
})));
|
|
81
|
+
}))));
|
|
80
82
|
}
|
|
81
83
|
};
|
|
@@ -1,20 +1,10 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { TSkeletonPalette } from '../components/common/Skeleton/palette';
|
|
3
3
|
import { TAbstractPalette } from './types';
|
|
4
|
-
import { TInvoiceboxSpinnerPalette } from '../components/common/InvoiceboxSpinner/palette';
|
|
5
|
-
import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/palette';
|
|
6
|
-
import { TArrowPalette } from '../components/common/Arrow/palette';
|
|
7
|
-
import { TInputLabelPalette } from '../components/form/InputLabel/palette';
|
|
8
|
-
import { TPureInputPalette } from '../components/form/PureInput/palette';
|
|
9
4
|
type TProps = {
|
|
10
5
|
children: ReactNode;
|
|
11
6
|
abstract?: Partial<TAbstractPalette>;
|
|
12
7
|
skeleton?: Partial<TSkeletonPalette>;
|
|
13
|
-
invoiceboxSpinner?: Partial<TInvoiceboxSpinnerPalette>;
|
|
14
|
-
secondaryButton?: Partial<TSecondaryButtonPalette>;
|
|
15
|
-
arrow?: Partial<TArrowPalette>;
|
|
16
|
-
inputLabel?: Partial<TInputLabelPalette>;
|
|
17
|
-
pureInput?: Partial<TPureInputPalette>;
|
|
18
8
|
};
|
|
19
9
|
export declare const PaletteProvider: FC<TProps>;
|
|
20
10
|
export {};
|
package/dist/palette/provider.js
CHANGED
|
@@ -30,41 +30,21 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
30
30
|
var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
|
|
31
31
|
var children = _ref.children,
|
|
32
32
|
_abstract = _ref["abstract"],
|
|
33
|
-
skeleton = _ref.skeleton
|
|
34
|
-
invoiceboxSpinner = _ref.invoiceboxSpinner,
|
|
35
|
-
secondaryButton = _ref.secondaryButton,
|
|
36
|
-
arrow = _ref.arrow,
|
|
37
|
-
inputLabel = _ref.inputLabel,
|
|
38
|
-
pureInput = _ref.pureInput;
|
|
33
|
+
skeleton = _ref.skeleton;
|
|
39
34
|
var mergedAbstractPalette = (0, _react.useMemo)(function () {
|
|
40
35
|
return _objectSpread(_objectSpread({}, _constants.defaultAbstractPalette), _abstract);
|
|
41
36
|
}, [_abstract]);
|
|
42
37
|
var mergedSkeletonPalette = (0, _react.useMemo)(function () {
|
|
43
38
|
return _objectSpread(_objectSpread({}, (0, _palette.generateSkeletonPalette)(mergedAbstractPalette)), skeleton);
|
|
44
39
|
}, [mergedAbstractPalette, skeleton]);
|
|
45
|
-
var mergedInvoiceboxSpinnerPalette = (0, _react.useMemo)(function () {
|
|
46
|
-
return _objectSpread(_objectSpread({}, (0, _palette2.generateInvoiceboxSpinnerPalette)(mergedAbstractPalette)), invoiceboxSpinner);
|
|
47
|
-
}, [mergedAbstractPalette, invoiceboxSpinner]);
|
|
48
|
-
var mergedSecondaryButtonPalette = (0, _react.useMemo)(function () {
|
|
49
|
-
return _objectSpread(_objectSpread({}, (0, _palette3.generateSecondaryButtonPalette)(mergedAbstractPalette)), secondaryButton);
|
|
50
|
-
}, [mergedAbstractPalette, secondaryButton]);
|
|
51
|
-
var mergedArrowPalette = (0, _react.useMemo)(function () {
|
|
52
|
-
return _objectSpread(_objectSpread({}, (0, _palette4.generateArrowPalette)(mergedAbstractPalette)), arrow);
|
|
53
|
-
}, [mergedAbstractPalette, arrow]);
|
|
54
|
-
var mergedInputLabelPalette = (0, _react.useMemo)(function () {
|
|
55
|
-
return _objectSpread(_objectSpread({}, (0, _palette5.generateInputLabelPalette)(mergedAbstractPalette)), inputLabel);
|
|
56
|
-
}, [mergedAbstractPalette, inputLabel]);
|
|
57
|
-
var mergedPureInputPalette = (0, _react.useMemo)(function () {
|
|
58
|
-
return _objectSpread(_objectSpread({}, (0, _palette6.generatePureInputPalette)(mergedAbstractPalette)), pureInput);
|
|
59
|
-
}, [mergedAbstractPalette, pureInput]);
|
|
60
40
|
var value = (0, _react.useMemo)(function () {
|
|
61
41
|
return {
|
|
62
42
|
skeleton: mergedSkeletonPalette,
|
|
63
|
-
invoiceboxSpinner:
|
|
64
|
-
secondaryButton:
|
|
65
|
-
arrow:
|
|
66
|
-
inputLabel:
|
|
67
|
-
pureInput:
|
|
43
|
+
invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(mergedAbstractPalette),
|
|
44
|
+
secondaryButton: (0, _palette3.generateSecondaryButtonPalette)(mergedAbstractPalette),
|
|
45
|
+
arrow: (0, _palette4.generateArrowPalette)(mergedAbstractPalette),
|
|
46
|
+
inputLabel: (0, _palette5.generateInputLabelPalette)(mergedAbstractPalette),
|
|
47
|
+
pureInput: (0, _palette6.generatePureInputPalette)(mergedAbstractPalette),
|
|
68
48
|
dropdown: (0, _palette7.generateDropdownPalette)(mergedAbstractPalette),
|
|
69
49
|
scrollbar: (0, _palette8.generateScrollbarPalette)(mergedAbstractPalette),
|
|
70
50
|
select: (0, _palette9.generateSelectPalette)(mergedAbstractPalette),
|
|
@@ -72,7 +52,7 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
|
|
|
72
52
|
warningIcon: (0, _palette11.generateWarningIconPalette)(mergedAbstractPalette),
|
|
73
53
|
divider: (0, _palette12.generateDividerPalette)(mergedAbstractPalette)
|
|
74
54
|
};
|
|
75
|
-
}, [mergedSkeletonPalette,
|
|
55
|
+
}, [mergedSkeletonPalette, mergedAbstractPalette]);
|
|
76
56
|
return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {
|
|
77
57
|
value: value
|
|
78
58
|
}, children);
|