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

package/bottom-bar/bottom-bar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BottomBarProps, BottomBarSize } from './types';
+import { BottomBarProps, type BottomBarSize } from './types';
 export declare const BOTTOM_BAR_HEIGHT: Record<BottomBarSize, number>;
 export declare const BOTTOM_BAR_DEFAULTS: {
     readonly size: "m";

package/bottom-bar/index.d.ts

@@ -1,2 +1,2 @@
+export type { BottomBarSize, BottomBarProps } from './types';
 export { BottomBar, BOTTOM_BAR_DEFAULTS, BOTTOM_BAR_HEIGHT } from './bottom-bar';
-export { BottomBarSize, BottomBarProps } from './types';

package/breakpoints.scss

@@ -10,7 +10,12 @@ $map: (
   xl: 1920px,
 ) !default;
 
-@mixin up($breakpoint) {
+/**
+ * ВАЖНО: здесь должны быть только утилиты позволяющие применить стили ">=" либо "<" начала диапазона (breakpoint range).
+ * Не должно возникать ситуаций в которых нужно применить стили "<=" или ">" начала диапазона.
+ */
+
+@mixin greaterThanOrEqual($breakpoint) {
   @if map-has-key($map, $breakpoint) {
     @media (min-width: map-get($map, $breakpoint)) {
       @content;
@@ -20,7 +25,7 @@ $map: (
   }
 }
 
-@mixin down($breakpoint) {
+@mixin lessThan($breakpoint) {
   @if map-has-key($map, $breakpoint) {
     @media (max-width: (map-get($map, $breakpoint) - 1px)) {
       @content;
@@ -29,3 +34,29 @@ $map: (
     @warn 'No such breakpoint `#{$breakpoint}`. Available values: #{map-keys($map)}.';
   }
 }
+
+@mixin gte($args...) {
+  @include greaterThanOrEqual($args...) {
+    @content;
+  }
+}
+
+@mixin lt($args...) {
+  @include lessThan($args...) {
+    @content;
+  }
+}
+
+/** @deprecated */
+@mixin up($args...) {
+  @include greaterThanOrEqual($args...) {
+    @content;
+  }
+}
+
+/** @deprecated */
+@mixin down($args...) {
+  @include lessThan($args...) {
+    @content;
+  }
+}

package/colors/index.d.ts

@@ -10,7 +10,7 @@ declare const collection: {
     readonly 'basic-gray8': "#ebebeb";
     readonly 'basic-gray4': "#f5f5f5";
     readonly 'basic-gray2': "#fafafa";
-    readonly 'basic-white': "#ffffff";
+    readonly 'basic-white': "#fff";
     readonly 'additional-deep-red': "#d50000";
     readonly 'additional-red': "#fb3a2f";
     readonly 'additional-light-red': "#feebea";

package/colors/index.js

@@ -1,4 +1,5 @@
 "use strict";
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.COLORS = void 0;
 const collection = {
@@ -14,7 +15,7 @@ const collection = {
     'basic-gray8': '#ebebeb',
     'basic-gray4': '#f5f5f5',
     'basic-gray2': '#fafafa',
-    'basic-white': '#ffffff',
+    'basic-white': '#fff',
     // additional
     'additional-deep-red': '#d50000',
     'additional-red': '#fb3a2f',

package/colors.scss

@@ -1,3 +1,5 @@
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
+
 // basic
 $basic-blue: #1f84db;
 $basic-gray87: #212121;

package/dropdown/utils.js

@@ -12,6 +12,8 @@ function dropdownFloatingConfig() {
         whileElementsMounted: react_1.autoUpdate,
         placement: 'bottom-start',
         middleware: [
+            // @todo в будущем с дизайнерами можем решить использовать autoPlacement
+            // но есть сложности: https://github.com/floating-ui/floating-ui/discussions/2155
             (0, react_1.flip)({
                 padding: 16,
             }),

package/dropdown-item/index.d.ts

@@ -31,4 +31,4 @@ export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElem
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function DropdownItem({ size, children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, 'data-testid': testId, ...restProps }: DropdownItemProps): JSX.Element;
+export declare function DropdownItem({ size, children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId, ...restProps }: DropdownItemProps): JSX.Element;

package/dropdown-item/index.js

@@ -25,14 +25,15 @@ const cx = bind_1.default.bind(dropdown_item_module_scss_1.default);
  * @return Элемент.
  */
 function DropdownItem(_a) {
-    var { size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, 'data-testid': testId = 'dropdown-item' } = _a, restProps = __rest(_a, ["size", "children", "className", "selected", "disabled", "noHover", "checked", "startContent", "startIcon", "endContent", "endIcon", "comment", 'data-testid']);
+    var { size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId = 'dropdown-item' } = _a, restProps = __rest(_a, ["size", "children", "className", "selected", "disabled", "noHover", "checked", "startContent", "startIcon", "endContent", "endIcon", "comment", "dangerouslySetInnerHTML", 'data-testid']);
     const start = StartIcon ? react_1.default.createElement(StartIcon, { className: cx('icon') }) : startContent;
     const end = EndIcon ? react_1.default.createElement(EndIcon, { className: cx('icon') }) : endContent;
-    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), "data-testid": testId }),
+    const hasChildren = [start, children, end].some(item => typeof item !== 'undefined');
+    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), dangerouslySetInnerHTML: dangerouslySetInnerHTML, "data-testid": testId }), hasChildren ? (react_1.default.createElement(react_1.default.Fragment, null,
         start && react_1.default.createElement("div", { className: cx('col', 'col-start') }, start),
         react_1.default.createElement("div", { className: cx('col', 'col-center') },
             react_1.default.createElement("div", { className: cx('row-main') }, children),
             size === 'xl' && comment && react_1.default.createElement("div", { className: cx('row-comment') }, comment)),
-        end && react_1.default.createElement("div", { className: cx('col', 'col-end') }, end)));
+        end && react_1.default.createElement("div", { className: cx('col', 'col-end') }, end))) : undefined));
 }
 exports.DropdownItem = DropdownItem;

package/expandable/index.d.ts

@@ -22,6 +22,7 @@ export interface ExpandableGroupProps {
     style?: CSSProperties;
     /** Нужно ли выводить список развернутым. */
     expanded?: boolean;
+    /** Ширина открывающего элемента. */
     openerWidth?: number;
 }
 export interface GroupItemProps {

package/hint/hint-view.module.scss

@@ -28,4 +28,5 @@
   left: var(--hint-arrow-left);
   right: var(--hint-arrow-right);
   bottom: var(--hint-arrow-bottom);
+  z-index: -1; // чтобы был скрыт при отсутствии позиционирования
 }

package/hooks/index.js

@@ -64,7 +64,9 @@ function useOutsideClick(elementRef, callback) {
                 }
             }
             isOutsideClick && ((_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, event));
-        });
+        }, 
+        // ВАЖНО: чтобы изменение DOM не приводило к ложному срабатыванию
+        { capture: true });
         return off;
     }, []);
 }

package/hooks/keydown.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useKeydown = void 0;
 const react_1 = require("react");
 const identity_1 = require("./identity");
-const on_1 = __importDefault(require("../helpers/on"));
+const on_1 = require("../helpers/on");
 /**
  * Хук, добавляющий обработчик нажатия на клавишу.
  * @param targetKey Клавиша, для которой отслеживается нажатие.
@@ -14,7 +11,7 @@ const on_1 = __importDefault(require("../helpers/on"));
  */
 function useKeydown(targetKey, callback) {
     const ref = (0, identity_1.useIdentityRef)(callback);
-    (0, react_1.useEffect)(() => (0, on_1.default)(document, 'keydown', event => {
+    (0, react_1.useEffect)(() => (0, on_1.on)(document, 'keydown', event => {
         const handler = ref.current;
         (event.key === targetKey || event.code === targetKey) && (handler === null || handler === void 0 ? void 0 : handler(event));
     }), [targetKey]);

package/link/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Token } from '../colors';
-export type LinkColor = Extract<Token, 'basic-blue' | 'basic-gray87' | 'basic-gray38' | 'basic-white'>;
+export type LinkColor = Extract<Token, 'basic-blue' | 'basic-gray87' | 'basic-gray38' | 'basic-white' | 'additional-red' | 'additional-teal'>;
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /** Цвет (название токена). */
     color?: LinkColor;

package/link/link-util.scss

@@ -0,0 +1,37 @@
+@use '../colors';
+
+@mixin color($key) {
+  @if $key == 'basic-blue' {
+    color: colors.$basic-blue;
+    &:hover {
+      color: colors.$additional-deep-blue;
+    }
+  } @else if $key == 'basic-gray87' {
+    color: colors.$basic-gray87;
+    &:hover {
+      color: colors.$basic-gray54;
+    }
+  } @else if $key == 'basic-gray38' {
+    color: colors.$basic-gray38;
+    &:hover {
+      color: colors.$basic-gray54;
+    }
+  } @else if $key == 'basic-white' {
+    color: colors.$basic-white;
+    &:hover {
+      color: colors.$basic-gray4;
+    }
+  } @else if $key == 'additional-red' {
+    color: colors.$additional-red;
+    &:hover {
+      color: colors.$additional-deep-red;
+    }
+  } @else if $key == 'additional-teal' {
+    color: colors.$additional-teal;
+    &:hover {
+      color: colors.$additional-green;
+    }
+  } @else {
+    @warn '[link-color] No such color `#{$key}`.';
+  }
+}

package/link/link.module.scss

@@ -1,4 +1,5 @@
 @use '../colors';
+@use './link-util';
 
 .link,
 .link:link,
@@ -25,29 +26,25 @@
 }
 
 .link:not(.disabled).basic-blue {
-  color: colors.$basic-blue;
-  &:hover {
-    color: colors.$additional-deep-blue;
-  }
+  @include link-util.color('basic-blue');
 }
 
 .link:not(.disabled).basic-gray87 {
-  color: colors.$basic-gray87;
-  &:hover {
-    color: colors.$basic-gray54;
-  }
+  @include link-util.color('basic-gray87');
 }
 
 .link:not(.disabled).basic-gray38 {
-  color: colors.$basic-gray38;
-  &:hover {
-    color: colors.$basic-gray54;
-  }
+  @include link-util.color('basic-gray38');
 }
 
 .link:not(.disabled).basic-white {
-  color: colors.$basic-white;
-  &:hover {
-    color: colors.$basic-gray4;
-  }
+  @include link-util.color('basic-white');
+}
+
+.link:not(.disabled).additional-red {
+  @include link-util.color('additional-red');
+}
+
+.link:not(.disabled).additional-teal {
+  @include link-util.color('additional-teal');
 }

package/modal/modal.module.scss

@@ -14,7 +14,7 @@ $modal-max-height: 696px;
 
 @mixin fullscreen-modal {
   width: 100%;
-  height: calc(100 * var(--vh, 1vh));
+  height: 100%;
   max-height: 100%;
 }
 

package/modal-overlay/modal-overlay.module.scss

@@ -5,9 +5,12 @@
   position: fixed;
   top: 0;
   left: 0;
+
+  // ВАЖНО: высота/ширина в процентах тк при использовании 100vw/100vh размер ломается если у body указан min-width
+  height: 100%;
+  width: 100%;
+
   display: flex;
-  width: 100vw;
-  height: calc(var(--vh, 1vh) * 100);
   background: modal-overlay-util.$overlay-color;
   overflow: auto;
   @include utils.hidden-scrollbars;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "45.0.0-alpha.0",
+  "version": "45.0.0-alpha.2",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",

package/readme.md

@@ -4,7 +4,7 @@
 
 ## Использование
 
-Установка
+### Установка
 
 ```bash
 # npm
@@ -14,10 +14,11 @@ npm i -S @sima-land/ui-nucleons
 yarn add @sima-land/ui-nucleons
 ```
 
-### Настройка сборки и запуска тестов
+### Настройка среды
 
 Компоненты библиотеки используют:
 
+- импорты изображений (jpg, png..) как url/src
 - импорты стилей
 - импорты стилей как css-модулей (каждый такой файл промаркирован в виде `%filename%.module.scss`)
 - импорты svg-файлов как react-компоненты
@@ -27,13 +28,13 @@ yarn add @sima-land/ui-nucleons
 - добавить необходимые пакеты `@svgr/*`
 - сконфигурировать обработку svg, css, scss файлов
 
-##### Добавление пакетов `@svgr/*`:
+##### Зависимости
 
 ```bash
-npm install --save-dev @svgr/core @svgr/plugin-svgo @svgr/webpack
+npm install --save-dev @svgr/core @svgr/plugin-jsx @svgr/plugin-svgo @svgr/webpack
 ```
 
-##### Конфигурация webpack
+##### Конфигурация
 
 ```js
 // webpack.config.js
@@ -42,7 +43,7 @@ const svgrOptions = require('../../svgr.config'); // опции SVGR (скопи
 module.exports = {
   module: {
     rules: [
-      // обработка svg
+      // svg
       {
         test: /\.svg$/,
         use: [
@@ -53,23 +54,17 @@ module.exports = {
         ],
       },
 
-      // обработка обычных стилей
+      // стилей
       {
         test: /\.(css|scss)$/,
-        exclude: /\.module\.(css|scss)$/,
-        use: ['css-loader', 'sass-loader'],
-      },
-
-      // обработка css-модулей
-      {
-        test: /\.module\.(css|scss)$/,
         use: [
+          // ...здесь style-loader, mini-css-extract-plugin или что-то другое
           {
             loader: 'css-loader',
             options: {
               modules: {
-                localIdentName: '[name]__[local]__[hash:hex:3]',
-                localIdentHashPrefix: 'some-service',
+                auto: /\.module\.(css|scss)$/,
+                localIdentName: '[name]__[local]--[hash:hex:3]',
               },
             },
           },
@@ -83,21 +78,24 @@ module.exports = {
 
 #### Для работы с Jest необходимо (как вариант):
 
+- добавить необходимые пакеты `@svgr/*`
+- сконфигурировать обработку svg, css, scss файлов
+
 ##### Добавить обработку SVG
 
 - добавить файл "трансформера" вида:
 
 ```js
-const swc = require('@swc/core');
+const babel = require('@babel/core');
+const babelConfig = require('../../babel.config');
 const svgr = require('@svgr/core');
 const svgrConfig = require('../../svgr.config');
 
 module.exports = {
   process(sourceText, sourcePath) {
     const code = svgr.transform.sync(sourceText, svgrConfig, { filePath: sourcePath });
-    const result = swc.transformSync(code);
 
-    return result;
+    return babel.transformSync(code, { filename: sourcePath, ...babelConfig });
   },
 };
 ```
@@ -111,19 +109,19 @@ module.exports = {
 ```js
 module.exports = {
   transform: {
-    // svg заменяем на React-компоненты
-    '\\.svg$': '<rootDir>/jest/transforms/svg.js',
+    // svg как react-компоненты
+    '\\.svg$': '<rootDir>/.jest/transforms/svg.js',
 
-    // генерируем css-модули
-    '\\.module\\.(css|scss)$': 'jest-css-modules-transform',
+    // обычный css
+    '(?<!(\\.module))\\.(css|scss)$': './transformer/empty.js',
 
-    // ...
-  },
-  moduleNameMapper: {
-    // обычные стили делаем просто пустыми модулями
-    '(?<!(.+\\.module))(\\.css|\\.scss)$': '<rootDir>/jest/mocks/style.js',
+    // css-модули
+    '\\.module\\.(css|scss)$': 'jest-css-modules-transform',
   },
-
+  transformIgnorePatterns: [
+    // в пакете содержится css-модули, поэтому игнорируем только скрипты
+    '/node_modules/.+js$',
+  ],
   // ...
 };
 ```

package/select/parts/block.js

@@ -65,6 +65,6 @@ function SelectFieldBlock(props) {
                 var _a, _b, _c;
                 (_a = binding.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(binding, event);
                 (_c = (_b = props.blockProps) === null || _b === void 0 ? void 0 : _b.onMouseDown) === null || _c === void 0 ? void 0 : _c.call(_b, event);
-            }, role: 'combobox', tabIndex: binding.disabled ? undefined : 0, className: (0, classnames_1.default)(block_module_scss_1.default.block, (_a = props.blockProps) === null || _a === void 0 ? void 0 : _a.className) }), focused: focused || binding.opened, labelAsPlaceholder: !binding.value, main: binding.value })));
+            }, role: 'combobox', tabIndex: binding.disabled ? undefined : 0, className: (0, classnames_1.default)(block_module_scss_1.default.block, (_a = props.blockProps) === null || _a === void 0 ? void 0 : _a.className) }), focused: focused || binding.opened, labelAsPlaceholder: !binding.value, main: binding.value, mainProps: { className: block_module_scss_1.default.main } })));
 }
 exports.SelectFieldBlock = SelectFieldBlock;

package/select/parts/block.module.scss

@@ -1,3 +1,7 @@
 .block {
   cursor: pointer;
 }
+
+.main {
+  overflow: hidden;
+}

package/switcher-row/index.js

@@ -17,7 +17,7 @@ const cx = bind_1.default.bind(switcher_row_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-function SwitcherRow({ children, className, style, textAlign, fieldPosition = 'start', 'data-testid': testId = 'switcher-row', }) {
+function SwitcherRow({ children, className, style, textAlign = 'left', fieldPosition = 'start', 'data-testid': testId = 'switcher-row', }) {
     var _a;
     const { toggle, checkbox, radio, label, comment } = (0, define_slots_1.defineSlots)(children, {
         toggle: toggle_1.Toggle,
@@ -30,7 +30,8 @@ function SwitcherRow({ children, className, style, textAlign, fieldPosition = 's
     const failed = input === null || input === void 0 ? void 0 : input.props.failed;
     const disabled = input === null || input === void 0 ? void 0 : input.props.disabled;
     const fieldId = input === null || input === void 0 ? void 0 : input.props.id;
-    const fieldColumn = input && react_1.default.createElement("div", { className: cx('col', 'field-col') }, input);
+    // @todo в Safari position: relative ломает vertical-align
+    const fieldColumn = input && (react_1.default.createElement("div", { className: cx('col', 'field-col', { 'toggle-col': toggle }) }, input));
     return (react_1.default.createElement("div", { className: cx('root', `text-align-${textAlign}`, { failed, disabled }, className), style: style, "data-testid": testId },
         fieldPosition === 'start' && fieldColumn,
         react_1.default.createElement("label", { className: cx('col', 'main-col'), htmlFor: fieldId },

package/switcher-row/switcher-row.module.scss

@@ -21,6 +21,10 @@
 }
 
 .col + .col {
+  margin-left: 8px;
+}
+
+.toggle-col + .col {
   margin-left: 12px;
 }
 
@@ -29,7 +33,7 @@
 }
 
 .main-col {
-  flex-grow: 1;
+  // ВАЖНО: чтобы область нажатия ограничивалась текстом не задаем тут flex-grow: 1
   cursor: pointer;
 }
 

package/text-button/text-button.module.scss

@@ -1,5 +1,6 @@
 @use '../colors';
 @use '../utils';
+@use '../link/link-util';
 
 .root {
   @include utils.reset-button;
@@ -56,31 +57,27 @@
 }
 
 .root:not(.disabled).color-basic-blue {
-  color: colors.$basic-blue;
-  &:hover {
-    color: colors.$additional-deep-blue;
-  }
+  @include link-util.color('basic-blue');
 }
 
 .root:not(.disabled).color-basic-gray87 {
-  color: colors.$basic-gray87;
-  &:hover {
-    color: colors.$basic-gray54;
-  }
+  @include link-util.color('basic-gray87');
 }
 
 .root:not(.disabled).color-basic-gray38 {
-  color: colors.$basic-gray38;
-  &:hover {
-    color: colors.$basic-gray54;
-  }
+  @include link-util.color('basic-gray38');
 }
 
 .root:not(.disabled).color-basic-white {
-  color: colors.$basic-white;
-  &:hover {
-    color: colors.$basic-gray4;
-  }
+  @include link-util.color('basic-white');
+}
+
+.root:not(.disabled).color-additional-red {
+  @include link-util.color('additional-red');
+}
+
+.root:not(.disabled).color-additional-teal {
+  @include link-util.color('additional-teal');
 }
 
 // иконки

package/toggle/toggle.module.scss

@@ -6,11 +6,17 @@
   cursor: pointer;
   user-select: none;
   vertical-align: -2px;
-  overflow: hidden;
 }
 
 .input {
-  display: none;
+  position: absolute;
+  display: block;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
   &:not(:checked) + .switch {
     --toggle-slider-position: 2px;
   }