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

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "45.0.0-alpha.0",
+  "version": "45.0.0-alpha.1",
   "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

@@ -30,7 +30,7 @@ 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);
+    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;
 }
 

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');
 }
 
 // иконки