@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.0

package/nav-bar/index.d.ts

@@ -1,46 +0,0 @@
-import React from 'react';
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    text?: string;
-    icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
-    stub?: boolean;
-    shift?: 'left' | 'right';
-    'data-testid'?: string;
-}
-export interface NavBarProps {
-    /** Заголовок. */
-    title?: string;
-    /** Подзаголовок. */
-    subtitle?: string;
-    /** Класс. */
-    className?: string;
-    /** Нужно ли выводить полоску снизу. */
-    bottomBordered?: boolean;
-    /** Свойства кнопок. */
-    buttons?: {
-        start?: ButtonProps;
-        startSecondary?: ButtonProps;
-        end?: ButtonProps;
-        endSecondary?: ButtonProps;
-    };
-}
-/**
- * Высота компонента в пикселях.
- */
-export declare const NAV_BAR_HEIGHT = 56;
-/**
- * Компонент панели навигации.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const NavBar: ({ title, subtitle, className, bottomBordered, buttons: { start, startSecondary, end, endSecondary }, }: NavBarProps) => JSX.Element;
-/**
- * Компонент кнопки (с текстом или иконки).
- * @param props Свойства.
- * @param props.text Текст.
- * @param props.icon Функция возвращающая React-элемент svg-иконки (имеет приоритет над "text").
- * @param props.stub Является ли кнопка заглушкой (будет скрыта через aria, не будет содержать иконки).
- * @param props.shift Определяет как сместить иконку внутри кнопки.
- * @return Элемент.
- */
-export declare const NavButton: React.FC<ButtonProps>;
-export {};

package/nav-bar/index.js

@@ -1,76 +0,0 @@
-"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 });
-exports.NavButton = exports.NavBar = exports.NAV_BAR_HEIGHT = void 0;
-const react_1 = __importDefault(require("react"));
-const nav_bar_module_scss_1 = __importDefault(require("./nav-bar.module.scss"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const fp_1 = require("lodash/fp");
-const borders_1 = require("../styling/borders");
-const colors_1 = require("../colors");
-const cx = bind_1.default.bind(nav_bar_module_scss_1.default);
-const getIcon = (0, fp_1.prop)('icon');
-/**
- * Высота компонента в пикселях.
- */
-exports.NAV_BAR_HEIGHT = 56;
-/**
- * Компонент панели навигации.
- * @param props Свойства.
- * @return Элемент.
- */
-const NavBar = ({ title, subtitle, className, bottomBordered = false, buttons: { start, startSecondary, end, endSecondary } = {}, }) => {
-    const startButtons = [start, startSecondary];
-    const endButtons = [end, endSecondary];
-    const hasStartButtons = startButtons.some(Boolean);
-    const hasEndButtons = endButtons.some(Boolean);
-    const hasButtons = hasStartButtons || hasEndButtons;
-    const isStartIconGroup = hasStartButtons && startButtons.every(getIcon);
-    const isEndIconGroup = hasEndButtons && endButtons.every(getIcon);
-    return (react_1.default.createElement("div", { className: cx('nav-bar', className, bottomBordered && borders_1.InnerBorder.bottom), style: { height: `${exports.NAV_BAR_HEIGHT}px` } },
-        hasButtons && (react_1.default.createElement("div", { className: cx('button-groups') },
-            hasStartButtons && (react_1.default.createElement("div", { className: cx('group') },
-                start && react_1.default.createElement(exports.NavButton, Object.assign({ shift: isStartIconGroup ? 'right' : undefined }, start)),
-                startSecondary && (react_1.default.createElement(exports.NavButton, Object.assign({ shift: isStartIconGroup ? 'left' : undefined }, startSecondary))))),
-            hasEndButtons && (react_1.default.createElement("div", { className: cx('group') },
-                endSecondary && (react_1.default.createElement(exports.NavButton, Object.assign({ stub: true, shift: isEndIconGroup ? 'right' : undefined }, endSecondary))),
-                end && react_1.default.createElement(exports.NavButton, Object.assign({ stub: true, shift: isEndIconGroup ? 'left' : undefined }, end)))))),
-        react_1.default.createElement("div", { className: cx('main') },
-            Boolean(title) && react_1.default.createElement("div", { className: cx('title', 'truncate') }, title),
-            Boolean(subtitle) && react_1.default.createElement("div", { className: cx('subtitle', 'truncate') }, subtitle)),
-        hasButtons && (react_1.default.createElement("div", { className: cx('button-groups', 'end') },
-            hasEndButtons && (react_1.default.createElement("div", { className: cx('group') },
-                endSecondary && (react_1.default.createElement(exports.NavButton, Object.assign({ shift: isEndIconGroup ? 'right' : undefined }, endSecondary))),
-                end && react_1.default.createElement(exports.NavButton, Object.assign({ shift: isEndIconGroup ? 'left' : undefined }, end)))),
-            hasStartButtons && (react_1.default.createElement("div", { className: cx('group') },
-                start && (react_1.default.createElement(exports.NavButton, Object.assign({ stub: true, shift: isStartIconGroup ? 'right' : undefined }, start))),
-                startSecondary && (react_1.default.createElement(exports.NavButton, Object.assign({ stub: true, shift: isStartIconGroup ? 'left' : undefined }, startSecondary)))))))));
-};
-exports.NavBar = NavBar;
-/**
- * Компонент кнопки (с текстом или иконки).
- * @param props Свойства.
- * @param props.text Текст.
- * @param props.icon Функция возвращающая React-элемент svg-иконки (имеет приоритет над "text").
- * @param props.stub Является ли кнопка заглушкой (будет скрыта через aria, не будет содержать иконки).
- * @param props.shift Определяет как сместить иконку внутри кнопки.
- * @return Элемент.
- */
-const NavButton = (_a) => {
-    var { text, icon: Icon, stub = false, shift, className } = _a, buttonProps = __rest(_a, ["text", "icon", "stub", "shift", "className"]);
-    return (react_1.default.createElement("button", Object.assign({}, (!stub && buttonProps), { type: 'button', className: cx('button', Icon && 'icon', shift === 'left' && 'shift-left', shift === 'right' && 'shift-right', stub && 'stub', className), "aria-hidden": stub }), Icon && !stub ? (react_1.default.createElement(Icon, { fill: colors_1.COLORS.get('basic-gray87'), className: cx('svg'), "aria-hidden": 'true' })) : (text)));
-};
-exports.NavButton = NavButton;

package/nav-bar/nav-bar.module.scss

@@ -1,95 +0,0 @@
-@use '../colors';
-
-.nav-bar {
-  background: #fff;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  justify-content: center;
-  overflow: hidden;
-  text-align: center;
-  &:first-child {
-    padding: 0 16px;
-  }
-}
-
-.title {
-  color: colors.$basic-gray87;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-}
-
-.subtitle {
-  color: colors.$basic-gray38;
-  font-size: 12px;
-  line-height: 16px;
-  margin-top: -4px;
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.button-groups {
-  display: flex;
-  flex-direction: column;
-  &.end {
-    align-items: flex-end;
-    text-align: right;
-    .group {
-      justify-content: flex-end;
-    }
-  }
-  .group {
-    display: flex;
-    width: 100%;
-  }
-}
-
-.button {
-  background: transparent;
-  border: 0;
-  box-sizing: border-box;
-  color: colors.$basic-blue;
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: 600;
-  height: 56px;
-  line-height: 20px;
-  margin: 0;
-  outline: 0;
-  padding: 0 16px;
-  text-align: inherit;
-  width: 100%;
-  &.icon {
-    width: 56px;
-    &.shift-left {
-      padding-right: 16px;
-      padding-left: 12px;
-      width: 52px;
-    }
-    &.shift-right {
-      padding-right: 12px;
-      padding-left: 16px;
-      width: 52px;
-    }
-    .svg {
-      // чтобы выравнивались по центру по вертикали
-      display: block;
-    }
-  }
-  &.stub {
-    height: 0;
-    overflow: hidden;
-  }
-}

package/upload/area.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-export interface UploadAreaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'multiple'> {
-    /** Ограничение на количество файлов. */
-    countLimit?: number;
-    /** Есть ли ошибки валидации. */
-    failed?: boolean;
-    /** Роль файлов. */
-    fileRole?: string;
-    /** Форматы. */
-    formats?: string;
-    /** Ограничение на количество файлов. */
-    multiple?: boolean;
-    /** Сработает при выборе или перетаскивании файлов, получив список и событие. */
-    onSelect?: (list: File[], e: React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>) => void;
-    /** Ограничение на размер. */
-    sizeLimit?: string;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Компонент поля выбора файла.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const UploadArea: React.FC<UploadAreaProps>;

package/upload/area.js

@@ -1,65 +0,0 @@
-"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 });
-exports.UploadArea = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const area_module_scss_1 = __importDefault(require("./area.module.scss"));
-const upload_svg_1 = __importDefault(require("./upload.svg"));
-const colors_1 = require("../colors");
-const link_1 = require("../link");
-const utils_1 = require("./utils");
-const lodash_1 = require("lodash");
-const get_declination_1 = __importDefault(require("../helpers/get-declination"));
-const cx = bind_1.default.bind(area_module_scss_1.default);
-/**
- * Компонент поля выбора файла.
- * @param props Свойства.
- * @return Элемент.
- */
-const UploadArea = (_a) => {
-    var { onSelect, className, fileRole = 'файл', formats, sizeLimit = '2 Mb', multiple, countLimit = multiple ? undefined : 1, failed, 'data-testid': testId = 'upload-area' } = _a, restProps = __rest(_a, ["onSelect", "className", "fileRole", "formats", "sizeLimit", "multiple", "countLimit", "failed", 'data-testid']);
-    const secondaryInfo = (0, lodash_1.upperFirst)([
-        countLimit &&
-            countLimit > 0 &&
-            `${countLimit} ${(0, get_declination_1.default)(countLimit, ['файл', 'файла', 'файлов'])}`,
-        formats && `формат ${formats}`,
-        `до ${sizeLimit}`,
-    ]
-        .filter(Boolean)
-        .join(', '));
-    const prepareFiles = (0, utils_1.getFilesPreparer)({ multiple, countLimit });
-    const { active, bind } = (0, utils_1.useDragAndDrop)({
-        onDrop: e => onSelect === null || onSelect === void 0 ? void 0 : onSelect(prepareFiles(e.dataTransfer.files), e),
-    });
-    return (react_1.default.createElement("div", Object.assign({}, restProps, bind, { className: cx('root', { active }, className), "data-testid": testId }),
-        react_1.default.createElement(upload_svg_1.default, { fill: colors_1.COLORS.get('basic-gray24') }),
-        react_1.default.createElement("div", { className: cx('info-column') },
-            react_1.default.createElement("div", { className: cx('info', 'primary') },
-                "\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438",
-                ' ',
-                react_1.default.createElement("label", null,
-                    react_1.default.createElement("input", { type: 'file', multiple: multiple, className: cx('input'), onChange: e => {
-                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(prepareFiles(e.target.files), e);
-                            // очищаем поле чтобы можно было выбрать тот же файл повторно
-                            e.target.value = '';
-                        }, "data-testid": 'upload-area:input' }),
-                    react_1.default.createElement(link_1.Link, { pseudo: true, "data-testid": 'upload-area:anchor' },
-                        "\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 ",
-                        fileRole))),
-            react_1.default.createElement("div", { className: cx('info', 'secondary', { failed }) }, secondaryInfo))));
-};
-exports.UploadArea = UploadArea;

package/upload/area.module.scss

@@ -1,44 +0,0 @@
-@use '../colors';
-
-.root {
-  display: flex;
-  align-items: center;
-  border-radius: 8px;
-  border: 1px dashed colors.$basic-gray24;
-  height: 104px;
-  max-width: 100%;
-  overflow: hidden;
-  padding: 0 40px;
-  &.active {
-    border: 2px solid colors.$basic-blue;
-    padding: 0 39px;
-  }
-}
-
-.input {
-  display: none;
-}
-
-.info-column {
-  margin-left: 24px;
-  overflow: hidden;
-  .info {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &.primary {
-      font-size: 16px;
-      line-height: 24px;
-      color: colors.$basic-gray87;
-    }
-    &.secondary {
-      margin-top: 4px;
-      font-size: 14px;
-      line-height: 20px;
-      color: colors.$basic-gray38;
-      &.failed {
-        color: colors.$additional-deep-red;
-      }
-    }
-  }
-}

package/upload/utils.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-declare type DnDProps<T> = {
-    onDrop: React.DragEventHandler<T>;
-};
-declare type DnDResult<T> = {
-    active: boolean;
-    bind: {
-        onDragEnter: React.DragEventHandler<T>;
-        onDragOver: React.DragEventHandler<T>;
-        onDragLeave: React.DragEventHandler<T>;
-        onDrop: React.DragEventHandler<T>;
-    };
-};
-/**
- * Хук обработки drag-n-drop событий.
- * @param options Опции.
- * @return Данные.
- */
-export declare const useDragAndDrop: <T extends HTMLElement = HTMLElement>({ onDrop, }: DnDProps<T>) => DnDResult<T>;
-/**
- * Возвращает функцию обработки FileList по заданным ограничениям.
- * @param props Свойства.
- * @return Функция.
- */
-export declare const getFilesPreparer: ({ multiple, countLimit }: {
-    multiple?: boolean | undefined;
-    countLimit?: number | undefined;
-}) => (list: File[] | FileList) => File[];
-export {};

package/upload/utils.js

@@ -1,45 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFilesPreparer = exports.useDragAndDrop = void 0;
-const react_1 = require("react");
-const with_prevent_1 = __importDefault(require("../helpers/with-prevent"));
-/**
- * Хук обработки drag-n-drop событий.
- * @param options Опции.
- * @return Данные.
- */
-const useDragAndDrop = ({ onDrop, }) => {
-    const [active, setActive] = (0, react_1.useState)(false);
-    return {
-        active,
-        bind: {
-            onDragEnter: (0, with_prevent_1.default)(() => setActive(true)),
-            onDragOver: (0, with_prevent_1.default)(() => setActive(true)),
-            onDragLeave: (0, with_prevent_1.default)(e => {
-                // игнорируем переход по дочерним элементам
-                !e.currentTarget.contains(e.relatedTarget) && setActive(false);
-            }),
-            onDrop: (0, with_prevent_1.default)(e => {
-                setActive(false);
-                onDrop(e);
-            }),
-        },
-    };
-};
-exports.useDragAndDrop = useDragAndDrop;
-/**
- * Возвращает функцию обработки FileList по заданным ограничениям.
- * @param props Свойства.
- * @return Функция.
- */
-const getFilesPreparer = ({ multiple, countLimit }) => (list) => {
-    const files = [...list];
-    multiple
-        ? countLimit && Number.isFinite(countLimit) && files.splice(countLimit)
-        : files.splice(1);
-    return files;
-};
-exports.getFilesPreparer = getFilesPreparer;