@via-profit/ui-kit 0.1.0-rc.2 → 0.1.0-rc.21

package/Image/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Img = styled_1.default.img `
+  object-fit: cover;
+  object-position: center center;
+  filter: ${({ theme }) => (theme.isDark ? 'brightness(0.86)' : 'none')};
+`;
+const Image = (props, ref) => {
+    const { src, thumb } = props, otherProps = __rest(props, ["src", "thumb"]);
+    const srcRef = react_1.default.useRef(null);
+    const [currentSrc, setSrc] = react_1.default.useState(typeof thumb === 'string' ? thumb : src);
+    const isMountedRef = react_1.default.useRef(true);
+    react_1.default.useEffect(() => {
+        isMountedRef.current = true;
+        if (typeof thumb === 'string' && srcRef.current !== thumb) {
+            srcRef.current = thumb;
+            const imageElement = new window.Image();
+            imageElement.onload = () => {
+                if (isMountedRef.current) {
+                    setSrc(src);
+                }
+            };
+            imageElement.src = src;
+        }
+    }, [src, thumb]);
+    react_1.default.useEffect(() => () => void (isMountedRef.current = false), []);
+    return react_1.default.createElement(Img, Object.assign({ src: currentSrc }, otherProps, { ref: ref }));
+};
+exports.default = react_1.default.forwardRef(Image);

package/MaskedField/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Mask, FormatParsedPayload, ParseInput } from './useMasked';
+import { TextFieldProps } from '../TextField';
+export type GetMask = (input: string) => Mask;
+export interface Payload {
+    readonly text: string;
+    readonly caret: number;
+    readonly isValid: boolean;
+}
+export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
+    /**
+     * Field value
+     */
+    readonly value: string | null;
+    /**
+     * An array of RegExp or a function that returns an array of RegExp
+     */
+    readonly mask: Mask | GetMask;
+    /**
+     * Function will be called when field value was changed
+     */
+    readonly onChange: (payload: FormatParsedPayload) => void;
+    /**
+     * If you are not using a simple mask, you can provide a function to analyze the input value
+     */
+    readonly parseInput?: ParseInput;
+    /**
+     * You can transform the output value before using it
+     */
+    readonly transform?: (value: string) => string;
+}
+declare const _default: React.ForwardRefExoticComponent<MaskedFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/MaskedField/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const useMasked_1 = require("./useMasked");
+const TextField_1 = __importDefault(require("../TextField"));
+const MaskedField = (props, ref) => {
+    const { value: propValue, mask, parseInput, onChange, transform } = props, nativeProps = __rest(props, ["value", "mask", "parseInput", "onChange", "transform"]);
+    const textInputRef = react_1.default.useRef(null);
+    const decoratorsErrorDisplayed = react_1.default.useRef(false);
+    const masked = (0, useMasked_1.useMasked)();
+    const parseInputFn = parseInput || masked.parseInput;
+    const getMask = react_1.default.useCallback((input) => {
+        const currentMask = typeof mask === 'function' ? mask(input) : mask;
+        if (!decoratorsErrorDisplayed.current &&
+            currentMask.find(elem => typeof elem === 'string' &&
+                typeof parseInput === 'undefined' &&
+                elem.match(/[0-9a-zа-яё]/i))) {
+            decoratorsErrorDisplayed.current = true;
+            console.warn(`[MaskedField component] You use symbols as decorators, which should be replaced with RegExp or provide the «parseInput» function instead`);
+        }
+        return currentMask;
+    }, [mask, parseInput]);
+    const [inputValue, setInputValue] = react_1.default.useState(() => {
+        var _a;
+        const mask = getMask(propValue || '');
+        const parsed = parseInputFn(propValue || '', mask, ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
+        const { text } = masked.formatParsedInput(parsed.text, mask, parsed.caret);
+        return text;
+    });
+    const handleOnChange = react_1.default.useCallback(event => {
+        var _a;
+        const mask = getMask(event.currentTarget.value);
+        const parsed = parseInputFn(event.currentTarget.value, mask, ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
+        const { caret, isValid, text } = masked.formatParsedInput(parsed.text, mask, parsed.caret);
+        const transformedText = transform ? transform(text) : text;
+        setInputValue(transformedText);
+        onChange({
+            caret,
+            isValid,
+            text: transformedText,
+        });
+        setTimeout(() => {
+            var _a;
+            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(caret, caret);
+        }, 15);
+    }, [getMask, masked, transform, onChange, parseInputFn]);
+    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref }, nativeProps, { inputRef: textInputRef, type: "text", value: inputValue, onChange: handleOnChange })));
+};
+exports.default = react_1.default.forwardRef(MaskedField);

package/MaskedField/templates.d.ts

@@ -0,0 +1,11 @@
+export declare const kpp: (string | RegExp)[];
+export declare const snils: (string | RegExp)[];
+/**
+ * 13 symbols
+ */
+export declare const ogrn: (string | RegExp)[];
+/**
+ * 15 symbols
+ */
+export declare const ogrnip: (string | RegExp)[];
+export declare const vin: (string | RegExp)[];

package/MaskedField/templates.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vin = exports.ogrnip = exports.ogrn = exports.snils = exports.kpp = void 0;
+exports.kpp = [/\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/];
+exports.snils = [
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+];
+/**
+ * 13 symbols
+ */
+exports.ogrn = [
+    /[1-9]/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
+/**
+ * 15 symbols
+ */
+exports.ogrnip = [
+    /[1-9]/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
+exports.vin = [
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    '-',
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    '-',
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[0-9]/i,
+    /[0-9]/i,
+    /[0-9]/i,
+    /[0-9]/i,
+];

package/MaskedField/useMasked.d.ts

@@ -0,0 +1,18 @@
+export type Mask = (RegExp | string)[];
+export interface ParseInputPayload {
+    readonly text: string;
+    readonly caret: number;
+}
+export interface FormatParsedPayload {
+    readonly text: string;
+    readonly caret: number;
+    readonly isValid: boolean;
+}
+export type ParseInput = (value: string, mask: Mask, caret?: number) => ParseInputPayload;
+export type FormatParsed = (parsedValue: string, mask: Mask, caret: number) => FormatParsedPayload;
+export declare const useMasked: () => {
+    formatParsedInput: FormatParsed;
+    parseAndFormat: (inputValue: string, mask: Mask, caret?: number) => FormatParsedPayload;
+    parseInput: ParseInput;
+};
+export default useMasked;

package/MaskedField/useMasked.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMasked = void 0;
+const react_1 = __importDefault(require("react"));
+const useMasked = () => {
+    const parseInput = react_1.default.useCallback((value, mask, caret) => {
+        const data = {
+            text: '',
+            caret: 0,
+        };
+        value
+            .replace(/\s/, '')
+            .split('')
+            .forEach((character, charIndex) => {
+            const isMatch = mask.some(pattern => {
+                if (typeof pattern === 'string') {
+                    // return false;
+                    return character === pattern && character;
+                }
+                if (pattern instanceof RegExp) {
+                    return new RegExp(pattern).test(character);
+                }
+                return false;
+            });
+            if (isMatch) {
+                data.text = `${data.text}${character}`;
+                if (charIndex < (caret || 0)) {
+                    data.caret += 1;
+                }
+            }
+        });
+        const result = Object.assign({}, data);
+        return result;
+    }, []);
+    const formatParsedInput = react_1.default.useCallback((parsedValue, mask, caret) => {
+        const data = {
+            text: '',
+            caret,
+            isValid: false,
+            charIndex: 0,
+        };
+        if (parsedValue === '') {
+            return data;
+        }
+        for (let patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+            if (data.charIndex >= parsedValue.length) {
+                break;
+            }
+            const char = parsedValue[data.charIndex];
+            const pattern = mask[patternIndex];
+            // If char is correct (matched with Regexp pattern)
+            // then accept char into text
+            // and increment the charIndex and caret
+            if (pattern instanceof RegExp && new RegExp(pattern).test(char)) {
+                data.text = `${data.text}${char}`;
+                data.charIndex += 1;
+                data.caret += 1;
+            }
+            // If char is correct (equal with pattern string)
+            // then accept char into text
+            // and increment the charIndex and caret
+            if (typeof pattern === 'string' && pattern === char) {
+                data.text = `${data.text}${char}`;
+                data.charIndex += 1;
+                data.caret += 1;
+            }
+            // If pattern is a string and char is not correct
+            // (not equal with pattern string)
+            // then accept pattern string into text and increment caret
+            if (typeof pattern === 'string' && pattern !== char) {
+                data.text = `${data.text}${pattern}`;
+                data.caret += 1;
+            }
+        }
+        const result = {
+            text: data.text,
+            caret: data.caret,
+            isValid: data.text.length >= mask.length,
+        };
+        return result;
+    }, []);
+    const parseAndFormat = react_1.default.useCallback((inputValue, mask, caret) => {
+        const parsed = parseInput(inputValue, mask, caret);
+        return formatParsedInput(parsed.text, mask, parsed.caret);
+    }, [formatParsedInput, parseInput]);
+    return {
+        formatParsedInput,
+        parseAndFormat,
+        parseInput,
+    };
+};
+exports.useMasked = useMasked;
+exports.default = exports.useMasked;

package/Menu/MenuItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly style: React.CSSProperties;
+    readonly index: number;
+    readonly setRowHeight: (index: number, height: number) => void;
+    readonly selected: boolean;
+    readonly hovered: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Menu/MenuItem.js

@@ -0,0 +1,47 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const MenuItemInner_1 = __importDefault(require("./MenuItemInner"));
+const MenuItem = (props, ref) => {
+    const { style, setRowHeight, index, children, selected, hovered } = props, nativeProps = __rest(props, ["style", "setRowHeight", "index", "children", "selected", "hovered"]);
+    const itemRef = react_1.default.useRef(null);
+    const heightRef = react_1.default.useRef(0);
+    /**
+     * Update list of sizes if height changed
+     */
+    react_1.default.useEffect(() => {
+        if (itemRef.current) {
+            const height = itemRef.current.getBoundingClientRect().height;
+            if (heightRef.current !== height) {
+                heightRef.current = height;
+                setRowHeight(index, height);
+            }
+        }
+    }, [setRowHeight, index]);
+    return (react_1.default.createElement("div", { style: style },
+        react_1.default.createElement("div", Object.assign({}, nativeProps, { ref: el => {
+                itemRef.current = el;
+                if (ref && typeof ref === 'object') {
+                    ref.current = el;
+                }
+                if (ref && typeof ref === 'function') {
+                    ref(el);
+                }
+            } }),
+            react_1.default.createElement(MenuItemInner_1.default, { selected: selected, hovered: hovered }, children))));
+};
+exports.default = react_1.default.forwardRef(MenuItem);

package/Menu/MenuItemInner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface MenuItemInnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly selected: boolean;
+    readonly hovered: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<MenuItemInnerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Menu/MenuItemInner.js

@@ -0,0 +1,48 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const InnerContainer = styled_1.default.div `
+  cursor: pointer;
+  user-select: none;
+  padding: 0.4em 0.8em;
+  transition: all 240ms ease-out;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
+  background-color: ${({ theme, selected, hovered }) => {
+    if (selected && hovered) {
+        return theme.color.accentPrimary.darken(0.1).toString();
+    }
+    if (selected) {
+        return theme.color.accentPrimary.toString();
+    }
+    if (hovered) {
+        return theme.color.surface.darken(40).toString();
+    }
+    return 'inherit';
+}};
+  color: ${({ theme, selected }) => {
+    if (selected) {
+        return theme.color.accentPrimaryContrast.toString();
+    }
+    return 'inherit';
+}};
+`;
+const MenuItemInner = (props, ref) => {
+    const { children, selected, hovered } = props, nativeProps = __rest(props, ["children", "selected", "hovered"]);
+    return (react_1.default.createElement(InnerContainer, Object.assign({}, nativeProps, { selected: selected, hovered: hovered, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(MenuItemInner);

package/Menu/MenuWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface MenuWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly isOpen: boolean;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    };
+}
+declare const _default: React.ForwardRefExoticComponent<MenuWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Menu/MenuWrapper.js

@@ -0,0 +1,76 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledMenuWrapper = styled_1.default.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  display: flex;
+  flex-direction: column;
+  transition: visibility 120ms ease-out, opacity 120ms ease-out;
+  opacity: ${props => (props.$isOpen ? 1 : 0)};
+  visibility: ${props => (props.$isOpen ? 'visible' : 'hidden')};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  box-shadow: 0 4px 24px ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+  &:focus {
+    outline: none;
+  }
+  & ::-webkit-scrollbar {
+    width: 0.6rem;
+    height: 0.6rem;
+  }
+
+  & ::-webkit-scrollbar-corner {
+    background: none;
+  }
+
+  & ::-webkit-scrollbar-track {
+    background: ${({ theme }) => theme.isDark
+    ? theme.color.backgroundPrimary.darken(10).toString()
+    : theme.color.backgroundPrimary.darken(5).toString()};
+  }
+
+  & ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.isDark
+    ? theme.color.backgroundSecondary.lighten(30).toString()
+    : theme.color.backgroundSecondary.darken(30).toString()};
+    border-radius: 0.3rem;
+  }
+
+  & ::-webkit-scrollbar-thumb:horizontal:hover,
+  & ::-webkit-scrollbar-thumb:vertical:hover {
+    background: ${({ theme }) => theme.color.accentPrimary.toString()};
+  }
+`;
+const MenuWrapperInner = styled_1.default.div `
+  padding: 0.4em;
+  box-sizing: content-box;
+  min-width: ${({ dimensions }) => dimensions.width}px;
+  min-height: ${({ dimensions }) => dimensions.height}px;
+`;
+const MenuWrapper = (props, ref) => {
+    const { isOpen, dimensions, children } = props, nativeProps = __rest(props, ["isOpen", "dimensions", "children"]);
+    const [isOpenState, setOpenState] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        setOpenState(isOpen);
+    }, [isOpen]);
+    return (react_1.default.createElement(StyledMenuWrapper, Object.assign({}, nativeProps, { ref: ref, "$isOpen": isOpenState }),
+        react_1.default.createElement(MenuWrapperInner, { dimensions: dimensions }, children)));
+};
+exports.default = react_1.default.forwardRef(MenuWrapper);