@scbt-ecom/ui 0.0.27 → 0.0.30

package/.env

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

package/.eslintrc.cjs

@@ -0,0 +1,134 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+    'airbnb',
+    'airbnb-typescript',
+    'plugin:@typescript-eslint/recommended'
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'vitest.config.mjs', 'tailwind.config.ts', 'postcss.config.mjs', 'storybook-static'],
+  parser: '@typescript-eslint/parser',
+  overrides: [
+    {
+      env: {
+        node: true
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 'latest'
+      }
+    },
+    {
+      files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
+      rules: {
+        'import/no-default-export': 'off'
+      }
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    },
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname
+  },
+  plugins: [
+    'react-refresh',
+    '@typescript-eslint',
+    'react',
+    '@typescript-eslint/eslint-plugin',
+    'simple-import-sort',
+    'jsx-a11y',
+    'unused-imports',
+    'promise',
+    'prettier'
+  ],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'react/react-in-jsx-scope': 'off',
+    'react/display-name': 'off',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'promise/prefer-await-to-then': 'error',
+    'react/self-closing-comp': 'off',
+    'react/jsx-closing-tag-location': 'off',
+    'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
+    'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+    'import/prefer-default-export': 'off',
+    'react/function-component-definition': 'off',
+    'arrow-body-style': 'off',
+    'react/destructuring-assignment': 'off',
+    'operator-linebreak': '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',
+    'object-curly-newline': 'off',
+    'prefer-arrow-callback': 'off',
+    'no-case-declarations': 'off',
+    '@typescript-eslint/comma-dangle': 'off',
+    'max-len': 'off',
+    'jsx-quotes': [2, 'prefer-single'],
+    'import/extensions': 'off',
+    'consistent-return': 'off',
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+    'react/jsx-no-useless-fragment': 'off',
+    'import/no-default-export': 'error',
+    'implicit-arrow-linebreak': 'off',
+    'react/jsx-one-expression-per-line': 'off',
+    '@typescript-eslint/indent': 'off',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto'
+      }
+    ],
+    '@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-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        varsIgnorePattern: '^_',
+        args: 'after-used',
+        argsIgnorePattern: '^_'
+      }
+    ],
+
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [['^react', '^', '^\u0000', '^@/app', '^@/widgets', '^$/shared', '^../', '^./']]
+      }
+    ],
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'typeLike',
+        format: ['PascalCase']
+      }
+    ]
+  },
+  settings: {
+    'jsx-a11y': {
+      polymorphicPropName: 'component'
+    }
+  }
+}

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,22 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
+        uses: ./.github/workflows/setup-node
+        
+      - run: npm run build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.github/workflows/publish.yml

@@ -0,0 +1,49 @@
+name: publish-to-github-pages
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
+        uses: ./.github/workflows/setup-node
+
+      - 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
+
+  deploy:
+    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/.prettierrc

@@ -0,0 +1,19 @@
+{
+  "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
+}

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/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,80 @@
+export * from './shared/ui/button'
+export * from './shared/ui/accordion'
+// import './shared/style.css'
+// "exports": {
+//   ".": {
+//     "import": "./dist/ui.es.js",
+//     "require": "./dist/ui.umd.cjs",
+//     "types": "./dist/index.d.ts"
+//   },
+//   "./dist/style.css": "./dist/style.css"
+// },
+// "main": "./dist/ui.umd.cjs",
+// "module": "./dist/ui.es.js",
+// "types": "./dist/index.d.ts",
+// "files": [
+//   "dist"
+// ],
+// export * from './shared/constants'
+// export * from './shared/hooks'
+// export * from './shared/ui'
+// export * from './shared/utils'
+// export * from './shared/validation'
+// export * from './widgets'
+// export * from './configs'
+// # BASE
+// export { Section, type ISectionProps } from './shared/ui/Section'
+// export { ResponsiveContainer, type IResponsiveContainerProps } from './shared/ui/ResponsiveContainer'
+// export { Button, type IButtonProps } from './shared/ui/button'
+// export { ButtonIcon, type IButtonIconProps } from './shared/ui/ButtonIcon'
+// export { PhoneView } from './shared/ui/PhoneView'
+// export { Badge, type IBadgeProps } from './shared/ui/Badge'
+// export { Loader, type ILoaderProps } from './shared/ui/Loader'
+// export { Skeleton, type ISkeletonProps } from './shared/ui/Skeleton'
+// export { Table } from './shared/ui/table'
+
+// // # INTERACTIVE
+// export { Accordion, type IAccordionProps } from './shared/ui/accordion'
+// export { Hint, type IHintProps } from './shared/ui/Hint'
+// export { Popover } from './shared/ui/popover'
+// export { ProgressBar, type IProgressBarProps } from './shared/ui/ProgressBar'
+// export { TabsSwitcher, type ITabsSwitcherProps, type ITabRenderContent } from './shared/ui/TabsSwitcher'
+
+// // # TYPOGRAPHY
+// export { Heading, type IHeadingProps } from './shared/ui/Heading'
+
+// // # ICONS
+// export { Icon, type IconProps, type TAllowedIcons } from './shared/ui/icon'
+// export { brandLogos, type TBrandLogoVariant } from './shared/ui/brandLogos'
+
+// // # NAVIGATION
+// export { Breadcrumbs, type IBreadcrumbsProps } from './shared/ui/Breadcrumbs'
+// export { CustomLink, type ICustomLinkProps } from './shared/ui/CustomLink'
+
+// // # FILes
+// export { Document, type IDocumentProps } from './shared/ui/Document'
+
+// // # CONTROLLED FORM UI
+// export {
+//   FormControl,
+//   InputControl,
+//   type InputControlProps,
+//   InputControlMask,
+//   type InputControlMaskProps,
+//   DadataInputControl,
+//   type IDadataInputControlProps,
+//   CheckboxControl,
+//   type ICheckboxControlProps,
+//   RadioControl,
+//   type IRadioControlProps,
+//   type IRadioGroupOption,
+//   SwitchControl,
+//   type ISwitchControlProps,
+//   SelectControl,
+//   type ISelectControlProps,
+//   type ISelectOption,
+//   TextareaControl,
+//   type ITextareaControlProps,
+//   CalendarControl,
+//   type ICalendarControlProps
+// } from './shared/ui/formControlElements'

package/lib/configs/index.ts

@@ -0,0 +1 @@
+export { tailwindConfigBase } from './tailwindConfigBase'

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/server.ts

@@ -0,0 +1,2 @@
+export * from './shared/ui/Badge'
+export * from './shared/ui/ResponsiveContainer'

package/lib/shared/constants/api.ts

@@ -0,0 +1,2 @@
+export const DADATA_BASE_CACHE_URL = import.meta.env.STORYBOOK_DADATA_API
+export const DADATA_BASE_CONSTANTS_URL = import.meta.env.STORYBOOK_DADATA_CONSTANTS_API

package/lib/shared/constants/designSystem/colors.ts

@@ -0,0 +1,117 @@
+const rootStyles = {
+  transparent: 'transparent',
+  current: 'currentColor',
+  inherit: 'inherit',
+  initial: 'initial'
+}
+
+const allowedBackgroundColors = {
+  'blue-grey-100': '#f3f4f7',
+  'blue-grey-200': '#eaedf1',
+  'blue-grey-300': '#d4dbe2',
+  'blue-grey-500': '#a9b6c5',
+  footer: '#40465a',
+  negative: '#f42500',
+  'negative-light': '#ffd2ca',
+  positive: '#76bc21',
+  'positive-light': '#e4f6ce',
+  'primary-default': '#003790',
+  'primary-focus': '#2477ff',
+  'primary-hover': '#042e73',
+  'primary-light-default': '#f0f4f9',
+  'primary-tr-focus': '#0037901f',
+  'primary-tr-hover': '#00379014',
+  'primary-tr-pressed': '#00379033',
+  'secondary-default': '#fc5055',
+  'secondary-hover': '#f12f34',
+  warning: '#f49f00',
+  'warning-light': '#ffeecc',
+  white: '#ffffff',
+  'primary-disabled': '#809bc7',
+  'secondary-disabled': '#FFB7BF',
+  ...rootStyles
+} as const
+
+const allowedTextColors = {
+  dark: '#292929',
+  disabled: '#a9b6c5',
+  footer: '#c3c3c3',
+  negative: '#f42500',
+  positive: '#76bc21',
+  'primary-default': '#003790',
+  'primary-hover': '#042e73',
+  secondary: '#40465a',
+  tetriary: '#5a6e85',
+  warning: '#f49f00',
+  white: '#ffffff',
+  'primary-disabled': '#809bc7',
+  'blue-grey-600': '#94a4b7',
+  ...rootStyles
+} as const
+
+const allowedBannersBackgroundColors = {
+  'barvcray-200': '#ebeef4',
+  'barvcray-300': '#dde1e8',
+  'greymint-200': '#deecee',
+  'lavender-100': '#f7f7ff',
+  'lavender-200': '#ecedfa',
+  'lavender-300': '#d0d3f1',
+  'lightblue-300': '#bed3ec',
+  'mint-200': '#e4f5ed',
+  'salmon-200': '#faecec',
+  'skyblue-100': '#f4f8fe',
+  'skyblue-200': '#e7f3ff',
+  'skyblue-300': '#d9edff',
+  ...rootStyles
+} as const
+
+const allowedIconsColors = {
+  'accent-default': '#2477ff',
+  'accent-hover': '#0053da',
+  'blue-grey-100': '#f3f4f7',
+  'blue-grey-600': '#94a4b7',
+  'blue-grey-700': '#69809a',
+  'blue-grey-800': '#5a6e85',
+  'dark-default': '#292929',
+  'dark-hover': '#535353',
+  disabled: '#a9b6c5',
+  'negative-default': '#f42500',
+  'negative-hover': '#c31e00',
+  'positive-default': '#76bc21',
+  'positive-hover': '#598d19',
+  'primary-default': '#003790',
+  'primary-hover': '#042e73',
+  'secondary-dark-default': '#f12f34',
+  'secondary-dark-hover': '#c40309',
+  'secondary-default': '#fc5055',
+  'secondary-hover': '#f12f34',
+  'warning-default': '#f49f00',
+  'warning-hover': '#d68b00',
+  white: '#ffffff',
+  'primary-disabled': '#809bc7',
+  footer: '#C3C3C3',
+  ...rootStyles
+} as const
+
+const allowedStrokeColors = {
+  'blue-grey-500': '#a9b6c5',
+  'blue-grey-700': '#69809a',
+  'blue-grey-800': '#5a6e85',
+  dark: '#292929',
+  negative: '#f42500',
+  positive: '#76bc21',
+  'primary-default': '#003790',
+  'primary-focus': '#2477ff',
+  'primary-hover': '#042e73',
+  'primary-light': '#f0f4f9',
+  'secondary-default': '#fc5055',
+  'secondary-hover': '#f12f34',
+  'warm-grey-200': '#e4e4e4',
+  'warm-grey-300': '#c3c3c3',
+  warning: '#f49f00',
+  white: '#ffffff',
+  'primary-disabled': '#809bc7',
+  ...rootStyles
+} as const
+
+export { allowedStrokeColors, allowedBannersBackgroundColors, allowedIconsColors, allowedTextColors, allowedBackgroundColors }