@scbt-ecom/ui 0.4.0 → 0.4.2

package/.env

@@ -0,0 +1,3 @@
+STORYBOOK_DADATA_API=https://urt-web-app1:4032/v1/cache/dadata
+STORYBOOK_DADATA_CONSTANTS_API=https://urt-web-app1:4009/constants
+

package/.github/workflows/publish.yml

@@ -0,0 +1,61 @@
+name: publish-to-github-pages
+on:
+  push:
+    branches:
+      - master
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions: 
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
+        uses: ./.github/workflows/setup-node
+
+      - name: Lint Code
+        run: npm run lint
+
+      - name: Setup Pages ⚙️
+        uses: actions/configure-pages@v4
+
+      - name: Build 🏗️
+        run: npm run build-storybook
+
+      - name: Upload artifact 📡
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./storybook-static
+
+      - name: Publish with Semantic Release 🚀
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release
+
+  deploy:
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Publish to GitHub Pages 🚀
+        id: deployment
+        uses: actions/deploy-pages@v4

package/.github/workflows/setup-node/action.yml

@@ -0,0 +1,22 @@
+name: setup-node
+description: 'Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧'
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node.js ⚙️
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        registry-url: 'https://registry.npmjs.org'
+
+    - name: Cache dependencies ⚡
+      id: cache_dependencies
+      uses: actions/cache@v4
+      with:
+        path: node_modules
+        key: node-modules-${{ hashFiles('package-lock.json') }}
+
+    - name: Install dependencies 🔧
+      shell: bash
+      if: steps.cache_dependencies.outputs.cache-hit != 'true'
+      run: npm install --package-lock=false

package/.husky/pre-commit

@@ -0,0 +1 @@
+npm run pre-deploy

package/.prettierignore

@@ -0,0 +1 @@
+.github

package/.prettierrc

@@ -0,0 +1,20 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": true,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "vueIndentScriptAndStyle": false,
+  "printWidth": 130,
+  "tabWidth": 2,
+  "rangeStart": 0,
+  "endOfLine": "auto",
+  "semi": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/.releaserc

@@ -0,0 +1,18 @@
+{
+  "repositoryUrl": "https://github.com/scbt-ecom/ui.git",
+  "branches": [
+    "master"
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm",
+    [
+      "@semantic-release/github",
+      {
+        "successComment": false,
+        "failCommentCondition": false
+      }
+    ]
+  ]
+}

package/.storybook/main.ts

@@ -0,0 +1,44 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import { mergeConfig } from 'vite'
+import { resolve } from 'path'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)'],
+
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-coverage',
+    '@storybook/addon-console',
+    '@storybook/addon-viewport'
+  ],
+  core: {
+    builder: '@storybook/builder-vite'
+  },
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      strictMode: true
+    }
+  },
+  // staticDirs: ['../public'],
+  docs: {
+    autodocs: 'tag'
+  },
+  viteFinal: (config) =>
+    mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, '../src'),
+          $: resolve(__dirname, '../lib')
+        }
+      }
+    }),
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
+}
+export default config

package/.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import { RootProvider } from '../src/app/providers'
+import '../lib/shared/style.css'
+import { STORYBOOK_VIEWPORTS } from '../src/configs/storybook.config'
+import type { Preview } from '@storybook/react'
+import { withConsole } from '@storybook/addon-console'
+import React from 'react'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+const preview: Preview = {
+  decorators: [
+    (storyFn, context) => withConsole()(storyFn)(context),
+    (Story) => (
+      <RootProvider>
+        <Story />
+      </RootProvider>
+    )
+  ],
+
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      viewports: {
+        ...STORYBOOK_VIEWPORTS,
+        ...INITIAL_VIEWPORTS
+      },
+      defaultViewport: 'fullscreen'
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview

package/chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:66c34a954348b4abf6f5110d",
+  "zip": true
+}

package/eslint.config.mjs

@@ -0,0 +1,193 @@
+import eslintReact from 'eslint-plugin-react'
+import simpleImportSort from 'eslint-plugin-simple-import-sort'
+import jsxA11Y from 'eslint-plugin-jsx-a11y'
+import unusedImports from 'eslint-plugin-unused-imports'
+import promise from 'eslint-plugin-promise'
+import prettier from 'eslint-plugin-prettier'
+import globals from 'globals'
+import tsParser from '@typescript-eslint/parser'
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import eslintReactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import importPlugin from 'eslint-plugin-import'
+import storybook from 'eslint-plugin-storybook'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...storybook.configs['flat/recommended'],
+  {
+    ignores: [
+      'node_modules',
+      '**/dist',
+      '**/eslint.config.mjs',
+      '**/vite.config.ts',
+      '**/vitest.config.mjs',
+      '**/tailwind.config.ts',
+      '**/postcss.config.mjs',
+      '**/storybook-static',
+      'lib/hybrid.ts',
+      '.storybook'
+    ]
+  },
+  {
+    plugins: {
+      react: eslintReact,
+      'react-refresh': reactRefresh,
+      'react-hooks': eslintReactHooks,
+      'react-refresh': reactRefresh,
+      'unused-imports': unusedImports,
+      'simple-import-sort': simpleImportSort,
+      import: importPlugin,
+      '@typescript-eslint': tseslint.plugin,
+      prettier: prettier,
+      promise: promise,
+      'jsx-a11y': jsxA11Y
+    },
+    files: ['**/*.{ts,tsx,js,jsx,mjs,cjs}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2022
+      },
+      parserOptions: {
+        project: ['./tsconfig.json', './tsconfig.node.json']
+      },
+      parser: tsParser,
+      ecmaVersion: 2022,
+      sourceType: 'module'
+    },
+    settings: {
+      'jsx-a11y': {
+        polymorphicPropName: 'component'
+      },
+      react: {
+        version: 'detect'
+      }
+    },
+    rules: {
+      ...eslintReactHooks.configs.recommended.rules,
+      ...eslintReact.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/display-name': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      'promise/prefer-await-to-then': 'error',
+      'react/self-closing-comp': 'off',
+      'react/jsx-closing-tag-location': 'off',
+      'import/prefer-default-export': 'off',
+      'react/function-component-definition': 'off',
+      'arrow-body-style': 'off',
+      'react/destructuring-assignment': 'off',
+      'operator-linebreak': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'react/jsx-curly-newline': 'off',
+      'jsx-a11y/control-has-associated-label': 'off',
+      'import/no-extraneous-dependencies': 'off',
+      'react/require-default-props': 'off',
+      'react/jsx-props-no-spreading': 'off',
+      'react/button-has-type': 'off',
+      '@typescript-eslint/semi': 'off',
+      'linebreak-style': 'off',
+      'function-paren-newline': 'off',
+      'object-curly-newline': 'off',
+      'prefer-arrow-callback': 'off',
+      'no-case-declarations': 'off',
+      '@typescript-eslint/comma-dangle': 'off',
+      'import/no-default-export': 'error',
+      'max-len': 'off',
+      'jsx-quotes': [2, 'prefer-single'],
+      'import/extensions': 'off',
+      'consistent-return': 'off',
+      'react/jsx-no-useless-fragment': 'off',
+      'implicit-arrow-linebreak': 'off',
+      'react/jsx-one-expression-per-line': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      '@typescript-eslint/indent': 'off',
+      'react/jsx-curly-brace-presence': [
+        'error',
+        {
+          props: 'never',
+          children: 'never'
+        }
+      ],
+      'no-console': [
+        'error',
+        {
+          allow: ['warn', 'error']
+        }
+      ],
+      '@typescript-eslint/consistent-type-exports': [
+        'error',
+        {
+          fixMixedExportsWithInlineTypeSpecifier: true
+        }
+      ],
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          prefer: 'type-imports',
+          disallowTypeAnnotations: false,
+          fixStyle: 'inline-type-imports'
+        }
+      ],
+      'unused-imports/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_'
+        }
+      ],
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [['^react', '^', '^\u0000', '^@/app', '^@/widgets', '^$/shared', '^../', '^./']]
+        }
+      ],
+      'react-refresh/only-export-components': [
+        'warn',
+        {
+          allowConstantExport: true
+        }
+      ],
+      'prettier/prettier': [
+        'error',
+        {
+          endOfLine: 'auto',
+          usePrettierrc: true
+        }
+      ],
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'typeLike',
+          format: ['PascalCase']
+        }
+      ],
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: '$/hybrid',
+              message: 'Импорт из $/hybrid запрещен.'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    files: ['**/*.stories.@(ts|tsx)'],
+    rules: {
+      'import/no-default-export': 'off',
+      'react-hooks/rules-of-hooks': 'off'
+    }
+  }
+)

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI-KIT</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/lib/client.ts

@@ -0,0 +1,12 @@
+// Styles
+import './shared/style.css'
+// Components
+export * from './shared/ui/accordion'
+export * from './shared/ui/formControlElements'
+export * from './shared/ui/TabsSwitcher'
+export * from './shared/ui/modal'
+export * from './shared/ui/providers'
+export * from './shared/ui/popover'
+
+// Hooks
+export * from './shared/hooks'

package/lib/configs/index.ts

@@ -0,0 +1,2 @@
+export { tailwindConfigBase } from './tailwindConfigBase'
+export { resetPreset, extendsPreset } from './tailwindPresets'

package/lib/configs/tailwindConfigBase.ts

@@ -0,0 +1,110 @@
+import type { Config } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin'
+import tailwindAnimation from 'tailwindcss-animate'
+import {
+  allowedBackgroundColors,
+  allowedBackgroundDeg,
+  allowedBannersBackgroundColors,
+  allowedBorderRadius,
+  allowedFontSize,
+  allowedIconsColors,
+  allowedLineHeight,
+  allowedStrokeColors,
+  allowedTextColors,
+  allowedTextStyles
+} from '../shared/constants'
+
+export const tailwindConfigBase: Omit<Config, 'content'> = {
+  theme: {
+    screens: {
+      mobile: { max: '1187px' },
+      desktop: '1188px'
+    },
+    backgroundColor: {
+      color: allowedBackgroundColors,
+      banner: allowedBannersBackgroundColors,
+      icon: allowedIconsColors
+    },
+    textColor: {
+      icon: allowedIconsColors,
+      color: allowedTextColors
+    },
+
+    fill: allowedIconsColors,
+    stroke: allowedIconsColors,
+    borderColor: allowedStrokeColors,
+    outlineColor: allowedStrokeColors,
+    borderRadius: allowedBorderRadius,
+    fontFamily: { roboto: ['var(--ff-roboto)', 'sans-serif'] },
+    fontSize: allowedFontSize,
+    lineHeight: allowedLineHeight,
+    gradientColorStops: allowedBackgroundColors,
+    boxShadow: {
+      sm: '0 8px 20px 0 rgba(0, 0, 0, 0.08)',
+      md: '0 12px 20px 0 rgba(0, 33, 87, 0.10)',
+      lg: '0 16px 24px 0 rgba(0, 33, 87, 0.16)'
+    },
+    extend: {
+      bgGradientDeg: allowedBackgroundDeg,
+      width: {
+        'popper-content': 'var(--radix-popover-content-available-width)',
+        'popper-trigger': 'var(--radix-popover-trigger-width)',
+        'autocomplete-input': 'var(--input-width)',
+        'select-trigger': 'var(--button-width)'
+      },
+      transitionDuration: {
+        DEFAULT: '0.3s',
+        12: '0.12s',
+        15: '0.15s',
+        2: '2s'
+      },
+      transitionTimingFunction: {
+        DEFAULT: 'ease-in-out'
+      },
+      keyframes: {
+        slideDown: {
+          from: { height: '0px' },
+          to: { height: 'var(--radix-accordion-content-height)' }
+        },
+        slideUp: {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0px' }
+        },
+        'scale-in': {
+          from: { opacity: '0', scale: '0' },
+          to: { opacity: '1', scale: '1' }
+        },
+        'progress-loader': {
+          '100%': {
+            backgroundPosition: '100% 100%'
+          }
+        }
+      },
+      animation: {
+        slideDown: 'slideDown 0.3s cubic-bezier(0.87, 0, 0.13, 1)',
+        slideUp: 'slideUp 0.3s cubic-bezier(0.87, 0, 0.13, 1)',
+        'scale-in': 'scale-in 0.3s ease-in-out',
+        'progress-loader': 'progress-loader 250s linear infinite'
+      }
+    }
+  },
+  plugins: [
+    // eslint-disable-next-line global-require
+    tailwindAnimation,
+    plugin(({ addComponents }) => {
+      addComponents(allowedTextStyles)
+    }),
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'bg-deg-gradient': (angle) => ({
+            'background-image': `linear-gradient(${angle}, var(--tw-gradient-stops))`
+          })
+        },
+        {
+          values: Object.assign(theme('bgGradientDeg', {}), {})
+        }
+      )
+    })
+  ]
+}

package/lib/configs/tailwindPresets/extendsPreset.ts

@@ -0,0 +1,43 @@
+import type { Config } from 'tailwindcss'
+
+export const extendsPreset: Omit<Config, 'content'> = {
+  theme: {
+    extend: {
+      transitionDuration: {
+        DEFAULT: '0.3s',
+        12: '0.12s',
+        15: '0.15s',
+        2: '2s',
+        333: '333s'
+      },
+      transitionTimingFunction: {
+        DEFAULT: 'ease-in-out'
+      },
+      keyframes: {
+        slideDown: {
+          from: { height: '0px' },
+          to: { height: 'var(--radix-accordion-content-height)' }
+        },
+        slideUp: {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0px' }
+        },
+        'scale-in': {
+          from: { opacity: '0', scale: '0' },
+          to: { opacity: '1', scale: '1' }
+        },
+        'progress-loader': {
+          '100%': {
+            backgroundPosition: '100% 100%'
+          }
+        }
+      },
+      animation: {
+        slideDown: 'slideDown 0.3s cubic-bezier(0.87, 0, 0.13, 1)',
+        slideUp: 'slideUp 0.3s cubic-bezier(0.87, 0, 0.13, 1)',
+        'scale-in': 'scale-in 0.3s ease-in-out',
+        'progress-loader': 'progress-loader 250s linear infinite'
+      }
+    }
+  }
+}

package/lib/configs/tailwindPresets/index.ts

@@ -0,0 +1,2 @@
+export { extendsPreset } from './extendsPreset'
+export { resetPreset } from './resetPreset'

package/lib/configs/tailwindPresets/resetPreset.ts

@@ -0,0 +1,71 @@
+// Тут через алиасы не импортируй, иначе не будет работать
+import type { Config } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin'
+import tailwindAnimation from 'tailwindcss-animate'
+import {
+  allowedBackgroundColors,
+  allowedBackgroundDeg,
+  allowedBannersBackgroundColors,
+  allowedBorderRadius,
+  allowedFontSize,
+  allowedIconsColors,
+  allowedLineHeight,
+  allowedStrokeColors,
+  allowedTextColors,
+  allowedTextStyles,
+  allowedZIndex
+} from '../../shared/constants'
+
+export const resetPreset: Omit<Config, 'content'> = {
+  theme: {
+    screens: {
+      mobile: { max: '1187px' },
+      desktop: '1188px'
+    },
+    backgroundColor: {
+      color: allowedBackgroundColors,
+      banner: allowedBannersBackgroundColors,
+      icon: allowedIconsColors
+    },
+    textColor: {
+      icon: allowedIconsColors,
+      color: allowedTextColors
+    },
+    fill: allowedIconsColors,
+    stroke: allowedIconsColors,
+    borderColor: allowedStrokeColors,
+    outlineColor: allowedStrokeColors,
+    borderRadius: allowedBorderRadius,
+    fontFamily: { roboto: ['var(--ff-roboto)', 'sans-serif'] },
+    fontSize: allowedFontSize,
+    lineHeight: allowedLineHeight,
+    gradientColorStops: allowedBackgroundColors,
+    boxShadow: {
+      sm: '0 8px 20px 0 rgba(0, 0, 0, 0.08)',
+      md: '0 12px 20px 0 rgba(0, 33, 87, 0.10)',
+      lg: '0 16px 24px 0 rgba(0, 33, 87, 0.16)'
+    },
+    zIndex: allowedZIndex,
+    extend: {
+      bgGradientDeg: allowedBackgroundDeg
+    }
+  },
+  plugins: [
+    tailwindAnimation,
+    plugin(({ addComponents }) => {
+      addComponents(allowedTextStyles)
+    }),
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'bg-deg-gradient': (angle) => ({
+            'background-image': `linear-gradient(${angle}, var(--tw-gradient-stops))`
+          })
+        },
+        {
+          values: Object.assign(theme('bgGradientDeg', {}), {})
+        }
+      )
+    })
+  ]
+}