@formixru/b2b-ui 1.0.0

package/CONTRIBUTING.md

@@ -0,0 +1,61 @@
+# b2b-ui
+
+## Системные требования
+
+- Node.js и Yarn (https://gitea.optiweb.ru/wiki/wiki/wiki/Установка-Node.js-и-Yarn)
+- [Java](https://www.java.com/download/) версии 8 или выше (только для разработки и CI)
+
+Так же возможна работа через [Dev Containers](https://gitea.optiweb.ru/wiki/wiki/wiki/Работа-с-проектом-через-Dev-Containers).
+
+## Команды
+
+Сборка проекта в development-режиме и запуск сервера для разработки на порту по-умолчанию (3000):
+
+`yarn dev`
+
+Сборка проекта в development-режиме и запуск сервера для разработки на определённом порту:
+
+`yarn dev --port 8000`
+
+Сборка проекта в production-режиме:
+
+`yarn build`
+
+Запуск проверки кода (в том числе его форматирования):
+
+`yarn lint`
+
+## Git Hooks
+
+### commit-msg
+
+Хук проверяет commit message на соответствие следующему формату:
+
+```
+#<Номер задачи> <Краткое описание изменений>
+```
+
+Особенности:
+
+- Если у номера задачи нет символа `#`, он будет добавлен автоматически
+- Cообщения, начинающиеся с `Merge/Revert`, не проверяются
+
+### pre-commit
+
+Хук запускает проверку кода (в том числе его форматирования) с исправлением, если это возможно, найденных ошибок. Если автоматически исправить все найденные ошибки невозможно, создание коммита будет отменено.
+
+## Обновление зависимостей
+
+```shell
+yarn set version stable
+
+yarn install
+
+yarn dlx storybook@latest upgrade
+
+yarn upgrade-interactive
+
+yarn update-browserslist-db
+
+yarn dlx @yarnpkg/sdks
+```

package/README.md

@@ -0,0 +1,30 @@
+# b2b-ui
+
+[Storybook](http://www.master.b2b-ui.dev.optiweb.ru/)
+
+## Подключение компонентов
+
+### JS/SCSS
+
+```js
+import { init } from '@formixru/b2b-ui/components/input';
+
+// Если Vue-компонент
+import ExampleInput from '@formixru/b2b-ui/components/example-input/vue';
+```
+
+```scss
+@use 'pkg:@formixru/b2b-ui/components/input/scss';
+```
+
+При подключении Vue-компонента подключать SCSS не нужно - он подключается автоматически.
+
+## Подключение хелперов
+
+```js
+import { cssVar } from '@formixru/b2b-ui/helpers/css-var';
+```
+
+## Разработка
+
+[CONTRIBUTING.md](./CONTRIBUTING.md)

package/package.json

@@ -0,0 +1,110 @@
+{
+    "name": "@formixru/b2b-ui",
+    "version": "1.0.0",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://gitea.optiweb.ru/formix/b2b-ui.git"
+    },
+    "license": "MIT",
+    "browserslist": [
+        "defaults",
+        "not OperaMini all"
+    ],
+    "packageManager": "yarn@4.6.0",
+    "scripts": {
+        "_postinstall": "husky",
+        "prepack": "yarn pinst --disable",
+        "postpack": "yarn pinst --enable",
+        "lint:eslint": "yarn eslint --max-warnings 10 \"**/*.{js,vue}\"",
+        "lint:stylelint": "yarn stylelint --max-warnings 10 \"**/*.scss\"",
+        "lint:prettier": "yarn prettier --check .",
+        "lint": "yarn lint:eslint && yarn lint:stylelint && yarn lint:prettier",
+        "dev": "storybook dev -p 3000",
+        "build": "storybook build -o www"
+    },
+    "devDependencies": {
+        "@advdominion/get-scrollbar-width": "^2.0.0",
+        "@advdominion/is": "^1.0.1",
+        "@advdominion/lightningcss-loader": "^1.0.0",
+        "@advdominion/pluralize": "^1.0.1",
+        "@advdominion/tooltip": "^1.0.0",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.18.0",
+        "@floating-ui/dom": "^1.6.13",
+        "@popperjs/core": "^2.11.8",
+        "@prettier/plugin-php": "^0.22.4",
+        "@storybook/addon-designs": "^8.0.4",
+        "@storybook/addon-essentials": "^8.5.1",
+        "@storybook/addon-links": "^8.5.1",
+        "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
+        "@storybook/blocks": "^8.5.1",
+        "@storybook/vue3": "^8.5.1",
+        "@storybook/vue3-webpack5": "^8.5.1",
+        "browserslist": "^4.24.4",
+        "color": "^4.2.3",
+        "css-loader": "^7.1.2",
+        "dayjs": "^1.11.13",
+        "eslint": "^9.18.0",
+        "eslint-config-prettier": "^10.0.1",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
+        "eslint-plugin-unicorn": "^56.0.1",
+        "eslint-plugin-vue": "^9.32.0",
+        "globals": "^15.14.0",
+        "husky": "^9.1.7",
+        "imask": "^7.6.1",
+        "lightningcss": "^1.29.1",
+        "lint-staged": "^15.4.1",
+        "lodash-es": "^4.17.21",
+        "mime": "^4.0.6",
+        "msw": "^2.7.0",
+        "msw-storybook-addon": "^2.0.4",
+        "nouislider": "^15.8.1",
+        "pinst": "^3.0.0",
+        "prettier": "^3.4.2",
+        "reset-css": "^5.0.2",
+        "sass-embedded": "^1.83.4",
+        "sass-loader": "^16.0.4",
+        "storybook": "^8.5.1",
+        "storybook-dark-mode": "^4.0.2",
+        "style-loader": "^4.0.0",
+        "stylelint": "^16.13.2",
+        "stylelint-config-standard-scss": "^14.0.0",
+        "stylelint-config-standard-vue": "^1.0.0",
+        "stylelint-order": "^6.0.4",
+        "swiper": "^11.2.1",
+        "update-browserslist-db": "^1.1.2",
+        "v-calendar": "3.0.1",
+        "vue": "^3.5.13",
+        "webpack": "^5.97.1",
+        "yargs": "^17.7.2"
+    },
+    "msw": {
+        "workerDirectory": [
+            ".storybook/static"
+        ]
+    },
+    "peerDependencies": {
+        "@advdominion/get-scrollbar-width": "^2.0.0",
+        "@advdominion/is": "^1.0.0",
+        "@advdominion/pluralize": "^1.0.0",
+        "@advdominion/tooltip": "^1.0.0",
+        "color": "^4.0.0",
+        "dayjs": "^1.0.0",
+        "imask": "^7.0.0",
+        "lodash-es": "^4.0.0",
+        "mime": "^4.0.0",
+        "nouislider": "^15.0.0",
+        "reset-css": "^5.0.0",
+        "v-calendar": "^3.0.0",
+        "vue": "^3.0.0"
+    },
+    "exports": {
+        "./components/*/scss": "./src/components/*/index.scss",
+        "./components/*/vue": "./src/components/*/index.vue",
+        "./components/*": "./src/components/*/index.js",
+        "./helpers/*": "./src/helpers/*.js",
+        "./base": "./src/base.scss",
+        "./variables": "./src/variables.scss"
+    }
+}

package/src/base.scss

@@ -0,0 +1,89 @@
+@use 'variables' as *;
+@use 'pkg:reset-css';
+
+/*  stylelint-disable comment-empty-line-before, custom-property-empty-line-before */
+:root {
+    --duration-micro-s: 100ms;
+    --duration-micro-m: 175ms;
+    --duration-micro-l: 250ms;
+
+    --duration-leave-s: 200ms;
+    --duration-leave-m: 250ms;
+    --duration-leave-l: 300ms;
+
+    --duration-enter-s: 250ms;
+    --duration-enter-m: 300ms;
+    --duration-enter-l: 350ms;
+
+    --duration-effect-s: 350ms;
+    --duration-effect-m: 500ms;
+    --duration-effect-l: 650ms;
+
+    --easing-linear: cubic-bezier(0, 0, 1, 1);
+    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --easing-deceleration: cubic-bezier(0, 0, 0.2, 1);
+    --easing-acceleration: cubic-bezier(0.4, 0, 1, 1);
+
+    @each $key, $value in $breakpoints {
+        --breakpoint-#{$key}: #{$value};
+    }
+}
+/*  stylelint-enalbe comment-empty-line-before, custom-property-empty-line-before */
+
+* {
+    box-sizing: border-box;
+
+    &::before,
+    &::after {
+        box-sizing: border-box;
+    }
+
+    &:focus {
+        outline: none;
+    }
+}
+
+[hidden] {
+    display: none !important;
+}
+
+[v-cloak] {
+    display: none !important;
+}
+
+html {
+    font-size: $font-size; // Базовый размер шрифта устанавливается на корневом элементе страницы (для ед. измерения rem)
+    text-size-adjust: 100%; // Отключение увеличения размера шрифта при изменении ориентации устройства в iOS
+}
+
+/* stylelint-disable property-disallowed-list */
+button {
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+    padding: 0;
+    text-align: inherit;
+}
+/* stylelint-enable */
+
+img.lazyload:not([src]) {
+    visibility: hidden;
+}
+
+b,
+strong {
+    font-weight: bold;
+}
+
+i,
+em {
+    font-style: italic;
+}
+
+body {
+    background-color: $bg-color-primary;
+    color: $font-color-primary;
+    font-family: $font-family;
+}

package/src/components/action-list/index.scss

@@ -0,0 +1,38 @@
+@use '../../variables' as *;
+
+$b: '.action-list';
+
+#{$b} {
+    &__item {
+    }
+
+    &__link {
+        align-items: center;
+        color: $action-list-link-color;
+        display: flex;
+        padding: 4px * 2 4px * 4;
+        width: 100%;
+
+        #{$b}__item:first-child:not(:last-child) & {
+            padding-top: 4px * 4;
+        }
+
+        #{$b}__item:last-child:not(:first-child) & {
+            padding-bottom: 4px * 4;
+        }
+
+        &_separator {
+            border-top: $action-list-link-separator-width solid $action-list-link-separator-color;
+            margin-top: 4px;
+            padding-top: 4px * 3;
+        }
+    }
+
+    &__icon {
+        fill: currentcolor;
+        flex-shrink: 0;
+        height: 4px * 6;
+        margin-right: 4px * 2;
+        width: 4px * 6;
+    }
+}

package/src/components/banner/index.scss

@@ -0,0 +1,30 @@
+@use '../../variables' as *;
+
+$b: '.banner';
+
+#{$b} {
+    border-radius: $banner-radius;
+    display: block;
+    overflow: hidden;
+
+    .content__header + .content__block > & {
+        margin-bottom: -4px * 3;
+    }
+
+    &__image {
+        display: block;
+        width: 100%;
+
+        &_mobile {
+            @media (--tablet-landscape-up) {
+                display: none;
+            }
+        }
+
+        &_desktop {
+            @media (--tablet-portrait-down) {
+                display: none;
+            }
+        }
+    }
+}

package/src/components/breadcrumbs/index.js

@@ -0,0 +1,8 @@
+export const init = ($b) => {
+    const $toggle = $b.querySelector('.breadcrumbs__mobile-toggle');
+
+    $toggle.addEventListener('click', () => {
+        $b.querySelector('.breadcrumbs__list').classList.add('breadcrumbs__list_active');
+        $toggle.remove();
+    });
+};

package/src/components/breadcrumbs/index.scss

@@ -0,0 +1,55 @@
+@use '../../variables' as *;
+
+$b: '.breadcrumbs';
+
+#{$b} {
+    color: $breadcrumbs-color;
+    display: flex;
+
+    @include font($breadcrumbs-font);
+
+    &__mobile-toggle {
+        margin-right: 4px * 2;
+
+        @media (--tablet-landscape-up) {
+            display: none;
+        }
+    }
+
+    &__icon {
+        display: block;
+        fill: $breadcrumbs-mobile-toggle-color;
+        height: 4px * 4;
+        width: 4px * 4;
+    }
+
+    &__list {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: -4px;
+
+        &_active {
+        }
+    }
+
+    &__item {
+        margin-bottom: 4px;
+
+        &:not(:last-child) {
+            @media (--tablet-portrait-down) {
+                display: none;
+
+                #{$b}__list_active & {
+                    display: block;
+                }
+            }
+
+            &::after {
+                color: $breadcrumbs-item-arrow-color;
+                content: '→';
+                margin-left: 6px;
+                margin-right: 6px;
+            }
+        }
+    }
+}

package/src/components/button/index.scss

@@ -0,0 +1,223 @@
+@use 'sass:color';
+@use '../../variables' as *;
+
+@mixin button(
+    $radius: $button-radius,
+    $font: $button-font,
+    $height: $button-height,
+    $min-width: $button-min-width,
+    $padding: $button-padding,
+    $bg: $button-bg,
+    $color: $button-color,
+    $border-width: $button-border-width,
+    $border-color: $button-border-color,
+    $disabled-bg: $button-disabled-bg,
+    $disabled-color: $button-disabled-color,
+    $disabled-border-color: $button-disabled-border-color,
+    $active-bg: $button-active-bg,
+    $active-color: $button-active-color,
+    $active-border-color: $button-active-border-color
+) {
+    align-items: center;
+    background-color: $disabled-bg;
+    border-radius: $radius;
+    color: $disabled-color;
+    cursor: default;
+    display: inline-flex;
+    height: $height;
+    justify-content: center;
+    min-width: $min-width;
+    padding: $padding;
+    text-align: center;
+    text-decoration: none;
+    transition-duration: var(--duration-micro-s);
+    transition-property: background-color, border-color, color;
+    transition-timing-function: var(--easing-standard);
+    user-select: none;
+    white-space: nowrap;
+
+    @include font($font);
+
+    @if color.alpha($disabled-bg) == 1 or color.alpha($disabled-bg) == 0 {
+        border: $border-width solid $disabled-border-color;
+    } @else {
+        border: $border-width solid transparent;
+    }
+
+    &:enabled,
+    &:any-link {
+        background-color: $bg;
+        color: $color;
+        cursor: pointer;
+
+        @if color.alpha($bg) == 1 or color.alpha($bg) == 0 {
+            border: $border-width solid $border-color;
+        } @else {
+            border: $border-width solid transparent;
+        }
+
+        &:hover,
+        &:focus-visible {
+            background-color: $active-bg;
+            color: $active-color;
+
+            @if color.alpha($active-bg) == 1 or color.alpha($active-bg) == 0 {
+                border: $border-width solid $active-border-color;
+            } @else {
+                border: $border-width solid transparent;
+            }
+        }
+    }
+}
+
+@mixin only-icon($height: $button-height) {
+    min-width: auto;
+    padding-left: 0;
+    padding-right: 0;
+    width: $button-height;
+}
+
+@mixin icon(
+    $size: $button-icon-size,
+    $space-after: $button-icon-space-after,
+    $space-before: $button-icon-space-before
+) {
+    display: block; // Для случаев, когда иконка обёрнута в другой блок
+    fill: currentcolor;
+    flex-shrink: 0;
+    height: $size;
+    margin-right: $space-after;
+    width: $size;
+
+    &_after {
+        margin-left: $space-before;
+        margin-right: 0;
+    }
+}
+
+$b: '.button';
+
+#{$b} {
+    @include button;
+
+    &_alt {
+        background-color: $button-alt-disabled-bg;
+        border: $button-alt-border-width solid $button-alt-disabled-border-color;
+        color: $button-alt-disabled-color;
+
+        &:enabled,
+        &:any-link {
+            background-color: $button-alt-bg;
+            border-color: $button-alt-border-color;
+            color: $button-alt-color;
+
+            &:hover,
+            &:focus-visible {
+                background-color: $button-alt-active-bg;
+                border-color: $button-alt-active-border-color;
+                color: $button-alt-active-color;
+            }
+        }
+    }
+
+    &_ghost {
+        background-color: $button-ghost-disabled-bg;
+        border: $button-ghost-border-width solid $button-ghost-disabled-border-color;
+        color: $button-ghost-disabled-color;
+
+        &:enabled,
+        &:any-link {
+            background-color: $button-ghost-bg;
+            border-color: $button-ghost-border-color;
+            color: $button-ghost-color;
+
+            &:hover,
+            &:focus-visible {
+                background-color: $button-ghost-active-bg;
+                border-color: $button-ghost-active-border-color;
+                color: $button-ghost-active-color;
+            }
+        }
+    }
+
+    &_grey {
+        background-color: $button-grey-disabled-bg;
+        border: $button-grey-border-width solid $button-grey-disabled-border-color;
+        color: $button-grey-disabled-color;
+
+        &:enabled,
+        &:any-link {
+            background-color: $button-grey-bg;
+            border-color: $button-grey-border-color;
+            color: $button-grey-color;
+
+            &:hover,
+            &:focus-visible {
+                background-color: $button-grey-active-bg;
+                border-color: $button-grey-active-border-color;
+                color: $button-grey-active-color;
+            }
+        }
+    }
+
+    &_inverted {
+        background-color: $button-inverted-disabled-bg;
+        border: $button-inverted-border-width solid $button-inverted-disabled-border-color;
+        color: $button-inverted-disabled-color;
+
+        &:enabled,
+        &:any-link {
+            background-color: $button-inverted-bg;
+            border-color: $button-inverted-border-color;
+            color: $button-inverted-color;
+
+            &:hover,
+            &:focus-visible {
+                background-color: $button-inverted-active-bg;
+                border-color: $button-inverted-active-border-color;
+                color: $button-inverted-active-color;
+            }
+        }
+    }
+
+    &_fluid {
+        width: 100%;
+    }
+
+    &_wide {
+        min-width: $button-wide-min-width;
+
+        &#{$b}_small {
+            min-width: $button-small-wide-min-width;
+        }
+    }
+
+    &_narrow {
+        min-width: 4px * 18;
+        padding: 0 4px * 4;
+    }
+
+    &_small {
+        height: $button-small-height;
+        min-width: $button-small-min-width;
+        padding: $button-small-padding;
+
+        @include font($button-small-font);
+    }
+
+    &_square {
+        border-radius: $button-square-radius;
+    }
+
+    &_only-icon {
+        @include only-icon;
+    }
+
+    &__icon {
+        @include icon;
+
+        #{$b}_only-icon & {
+            margin-right: 0;
+        }
+    }
+}