@scbt-ecom/ui 0.0.27 → 0.0.30

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

@@ -0,0 +1,3 @@
+export * from './colors'
+export * from './others'
+export * from './typography'

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

@@ -0,0 +1,18 @@
+const allowedBorderRadius = {
+  none: '0',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  full: '9999px'
+}
+
+const allowedBackgroundDeg = {
+  30: '30deg',
+  45: '45deg',
+  80: '80deg',
+  90: '90deg',
+  110: '110deg',
+  180: '180deg'
+}
+
+export { allowedBorderRadius, allowedBackgroundDeg }

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

@@ -0,0 +1,88 @@
+const allowedFontSize = {
+  12: '12px',
+  14: '14px',
+  16: '16px',
+  18: '18px',
+  20: '20px',
+  24: '24px',
+  28: '28px',
+  32: '32px',
+  40: '40px'
+}
+
+const allowedLineHeight = {
+  16: '16px',
+  20: '20px',
+  22: '22px',
+  24: '24px',
+  30: '30px',
+  32: '32px',
+  40: '40px',
+  48: '48px'
+}
+
+const allowedTextStyles = {
+  /* # Headline */
+  '.mob-headline-bold-m': {
+    '@apply font-bold text-28 leading-32': ''
+  },
+  '.mob-headline-bold-s': {
+    '@apply font-bold text-24 leading-30': ''
+  },
+  /* # Title */
+  '.mob-title-bold-l': {
+    '@apply font-bold text-20 leading-24': ''
+  },
+  '.mob-title-bold-m': {
+    '@apply font-bold text-18 leading-22': ''
+  },
+  /* # Body */
+  '.mob-body-medium-l': {
+    '@apply font-medium text-16 leading-22': ''
+  },
+  '.mob-body-regular-l': {
+    '@apply font-normal text-16 leading-22': ''
+  },
+  '.mob-body-medium-m': {
+    '@apply font-medium text-14 leading-20': ''
+  },
+  '.mob-body-regular-m': {
+    '@apply font-normal text-14 leading-20': ''
+  },
+  '.mob-body-regular-s': {
+    '@apply font-normal text-12 leading-20': ''
+  },
+
+  /* -------- Desktop Typography -------- */
+  /* # Headline */
+  '.desk-headline-bold-l': {
+    '@apply font-bold text-40 leading-48': ''
+  },
+  '.desk-headline-bold-m': {
+    '@apply font-bold text-32 leading-40': ''
+  },
+
+  /* # Title */
+  '.desk-title-bold-l': {
+    '@apply font-bold text-24 leading-30': ''
+  },
+  '.desk-title-bold-s': {
+    '@apply font-bold text-18 leading-22': ''
+  },
+
+  /* # Body */
+  '.desk-body-medium-l': {
+    '@apply font-medium text-16 leading-22': ''
+  },
+  '.desk-body-regular-l': {
+    '@apply font-normal text-16 leading-22': ''
+  },
+  '.desk-body-regular-m': {
+    '@apply font-normal text-14 leading-20': ''
+  },
+  '.desk-body-regular-s': {
+    '@apply font-normal text-12 leading-16': ''
+  }
+}
+
+export { allowedLineHeight, allowedFontSize, allowedTextStyles }

package/lib/shared/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './designSystem'
+export * from './api'

package/lib/shared/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useBoolean } from './useBoolean'
+export { useClickOutside } from './useClickOutside'
+export { useControlledForm } from './useControlledForm'
+export { useDebounceValue, debounce, useDebounceCallback } from './useDebounce'

package/lib/shared/hooks/useBoolean.ts

@@ -0,0 +1,12 @@
+'use client'
+
+import * as React from 'react'
+
+type UseBooleanReturn = [value: boolean, action: (val?: boolean) => void]
+
+export const useBoolean = (initialValue = false): UseBooleanReturn => {
+  const [value, setValue] = React.useState(initialValue)
+  const action = (val?: boolean) => setValue((prevValue) => val ?? !prevValue)
+
+  return [value, action]
+}

package/lib/shared/hooks/useClickOutside.ts

@@ -0,0 +1,19 @@
+'use client'
+
+import * as React from 'react'
+
+export const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      callback()
+    }
+  }
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref, callback])
+}

package/lib/shared/hooks/useControlledForm.ts

@@ -0,0 +1,16 @@
+'use client'
+
+import { useForm, type UseFormProps } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { type TypeOf, type ZodTypeAny } from 'zod'
+
+interface UseControlledForm<T extends ZodTypeAny> extends UseFormProps<TypeOf<T>> {
+  schema: T
+}
+
+export const useControlledForm = <T extends ZodTypeAny>({ schema, ...formConfig }: UseControlledForm<T>) => {
+  return useForm({
+    ...formConfig,
+    resolver: zodResolver(schema)
+  })
+}

package/lib/shared/hooks/useDebounce.ts

@@ -0,0 +1,38 @@
+'use client'
+
+import * as React from 'react'
+
+export const debounce = <Params extends unknown[]>(
+  callback: (...args: Params) => void,
+  delay: number
+): ((...args: Params) => void) => {
+  let timer: ReturnType<typeof setTimeout>
+
+  return function (...args: Params) {
+    clearTimeout(timer)
+    timer = setTimeout(() => callback(...args), delay)
+  }
+}
+
+export const useDebounceCallback = <Params extends unknown[], Return>(callback: (...args: Params) => Return, delay: number) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debounced = React.useMemo(() => debounce(callback, delay), [delay])
+
+  return debounced
+}
+
+export const useDebounceValue = <Value>(value: Value, delay: number) => {
+  const previousValueRef = React.useRef(value)
+  const [debouncedValue, setDebounceValue] = React.useState(value)
+
+  const debouncedSetState = useDebounceCallback(setDebounceValue, delay)
+
+  React.useEffect(() => {
+    if (previousValueRef.current === value) return
+    debouncedSetState(value)
+    previousValueRef.current = value
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return debouncedValue
+}

package/lib/shared/style.css

@@ -0,0 +1,74 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+:root {
+  --ff-roboto: 'Roboto', sans-serif;
+}
+
+@layer components {
+  /* # Custom scroll */
+  .customScrollbar-y::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  .customScrollbar-y::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background: #d4dbe2;
+  }
+  .customScrollbar-y::-webkit-scrollbar-thumb {
+    background: #a9b6c5;
+    border-radius: 8px;
+  }
+  .scrollHidden::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .progressBar-apply {
+    background-image: repeating-linear-gradient(-33deg, #d4dbe2, #d4dbe2 5px, #f3f4f7 0, #f3f4f7 14px);
+    background-size: 2000% 2000%;
+  }
+
+  .skeleton-apply {
+    background: linear-gradient(80deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+    background-size: 200% 100%;
+    animation: 1.5s shine linear infinite;
+  }
+
+  .rdp-vhidden {
+    @apply hidden;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body,
+html {
+  font-family: var(--ff-roboto);
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+@keyframes shine {
+  to {
+    background-position-x: -200%;
+  }
+}

package/lib/shared/ui/Badge.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react'
+import { cn } from '$/shared/utils'
+
+export interface IBadgeProps {
+  children: ReactElement | string
+  className?: string
+}
+
+export const Badge = ({ children, className }: IBadgeProps) => {
+  return (
+    <span
+      className={cn(
+        'min-h-6 min-w-6 px-2 py-1 flex items-center justify-center rounded-full desk-body-regular-s bg-color-primary-default text-color-white text-nowrap',
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}

package/lib/shared/ui/Breadcrumbs.tsx

@@ -0,0 +1,57 @@
+import { cn } from '../utils'
+import { Icon } from './icon/Icon'
+
+export interface IBreadcrumbLink {
+  label: string
+  path: string
+  isDisabled?: boolean
+}
+interface IBreadcrumbLinkWithoutPath {
+  label: string
+  isDisabled?: boolean
+}
+
+export type TLinksList = [...IBreadcrumbLink[], IBreadcrumbLinkWithoutPath]
+
+export interface IBreadcrumbsProps {
+  linksList: TLinksList
+}
+
+export const Breadcrumbs = ({ linksList }: IBreadcrumbsProps) => {
+  return (
+    <div aria-label='Breadcrumb' className='max-w-[840px] flex items-center gap-2'>
+      {linksList.map((link) => (
+        <>
+          {'path' in link ? (
+            <div
+              className={cn(
+                'flex items-center gap-1 px-1 border-2 border-solid border-transparent rounded-sm focus-within:border-primary-focus',
+                { '!border-transparent pointer-events-none': link?.isDisabled }
+              )}
+            >
+              <a
+                href={link.path}
+                target='_blank'
+                rel='noreferrer'
+                className={cn(
+                  'desk-body-regular-m text-color-primary-default hover:text-color-primary-hover outline-none focus:text-color-primary-default',
+                  { '!text-color-disabled': link?.isDisabled }
+                )}
+              >
+                {link.label}
+              </a>
+              <Icon
+                name='arrows/arrowRight'
+                className={cn('text-icon-primary-default size-4', { '!text-icon-disabled': link?.isDisabled })}
+              />
+            </div>
+          ) : (
+            <div aria-current='page' className='text-color-blue-grey-600 desk-body-regular-m'>
+              {link.label}
+            </div>
+          )}
+        </>
+      ))}
+    </div>
+  )
+}

package/lib/shared/ui/ButtonIcon.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { type ComponentProps, forwardRef, type ReactElement } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '$/shared/utils'
+
+type TButtonClasses = {
+  button: string
+  icon: string
+}
+
+const buttonConfig = cva(
+  'group flex items-center justify-center cursor-pointer rounded-full outline-offset-[3px] outline-transparent outline-2 transition duration-12 active:scale-[0.97] disabled:pointer-events-none',
+  {
+    variants: {
+      intent: {
+        primary:
+          'text-icon-white bg-color-primary-default hover:bg-color-primary-hover active:bg-color-primary-hover focus:bg-color-primary-hover focus:outline-primary-focus disabled:bg-color-primary-disabled',
+        secondary:
+          'text-icon-primary-default bg-color-transparent border border-solid outline-offset-4 border-primary-default hover:bg-color-primary-tr-hover hover:text-icon-primary-default hover:border-primary-hover  active:bg-color-primary-tr-pressed active:border-primary-hover active:text-icon-primary-hover focus:bg-color-primary-tr-focus focus:outline-primary-focus disabled:bg-color-blue-grey-200 disabled:border-transparent disabled:text-icon-primary-disabled',
+        ghost:
+          'text-icon-primary-default bg-color-transparent hover:bg-color-primary-tr-hover focus:bg-color-primary-tr-focus focus:outline-primary-focus active:text-icon-primary-hover active:bg-color-primary-tr-pressed disabled:bg-color-transparent disabled:text-icon-primary-disabled'
+      },
+      size: {
+        sm: 'size-8',
+        md: 'size-10',
+        lg: 'size-12'
+      }
+    },
+    defaultVariants: {
+      intent: 'primary',
+      size: 'lg'
+    }
+  }
+)
+
+type TButtonProps = VariantProps<typeof buttonConfig>
+
+export interface IButtonIconProps extends ComponentProps<'button'>, TButtonProps {
+  children: ReactElement
+  classes?: Partial<TButtonClasses>
+}
+
+export const ButtonIcon = forwardRef<HTMLButtonElement, IButtonIconProps>(
+  ({ size, intent, children, classes, type = 'button', ...props }, ref) => {
+    return (
+      <button ref={ref} type={type} className={cn(buttonConfig({ intent, size }), classes?.button)} {...props}>
+        <span className={cn(classes?.icon)}>{children}</span>
+      </button>
+    )
+  }
+)

package/lib/shared/ui/CustomLink.tsx

@@ -0,0 +1,70 @@
+import { type ComponentProps } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../utils'
+import { Icon, type TAllowedIcons } from './icon/Icon'
+
+const customLinkConfig = cva(
+  'group desk-body-regular-l underline underline-offset-4 outline-none p-[2px] rounded-sm border border-solid border-transparent',
+  {
+    variants: {
+      intent: {
+        blue: 'text-color-primary-default hover:text-color-primary-hover focus:text-color-primary-default focus:border-primary-focus',
+        white: 'text-color-white hover:text-color-footer focus:text-color-white focus:border-primary-focus'
+      },
+      withIcon: {
+        true: 'flex items-center gap-1',
+        false: ''
+      },
+      disabled: {
+        true: '!text-color-primary-disabled pointer-events-none !border-transparent',
+        false: ''
+      }
+    },
+    defaultVariants: {
+      intent: 'blue',
+      withIcon: true,
+      disabled: false
+    }
+  }
+)
+
+const linkArrowConfig = cva('size-6', {
+  variants: {
+    intent: {
+      blue: 'text-icon-primary-default group-hover:text-icon-primary-hover group-focus:text-icon-primary-default ',
+      white: 'text-icon-white group-hover:text-icon-footer group-focus:text-icon-white'
+    },
+    disabled: {
+      true: '!text-icon-primary-disabled pointer-events-none',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    intent: 'blue',
+    disabled: false
+  }
+})
+
+type TCustomLinkConfig = VariantProps<typeof customLinkConfig>
+
+export interface ICustomLinkProps extends TCustomLinkConfig, ComponentProps<'a'> {
+  Component: 'a'
+  icon?: TAllowedIcons
+}
+
+export const CustomLink = ({
+  Component,
+  intent,
+  children,
+  withIcon,
+  disabled,
+  icon = 'arrows/arrowLink',
+  ...props
+}: ICustomLinkProps) => {
+  return (
+    <Component className={cn(customLinkConfig({ intent, withIcon, disabled }))} {...props}>
+      {children}
+      {withIcon && <Icon name={icon} className={cn(linkArrowConfig({ intent, disabled }))} />}
+    </Component>
+  )
+}

package/lib/shared/ui/Document.tsx

@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Icon, type TAllowedIcons } from './icon'
+import { cn } from '$/shared/utils'
+
+const iconConfig = cva('size-8 transition-colors', {
+  variants: {
+    intent: {
+      outline: 'text-icon-secondary-dark-default group-hover:text-icon-secondary-dark-hover',
+      filled: 'text-icon-primary-default group-hover:text-icon-primary-hover'
+    }
+  },
+  defaultVariants: {
+    intent: 'outline'
+  }
+})
+
+type TIconConfig = VariantProps<typeof iconConfig>
+
+const iconVariant: Record<NonNullable<TIconConfig['intent']>, TAllowedIcons> = {
+  filled: 'files/documentFilled',
+  outline: 'files/documentOutline'
+}
+
+export interface IDocumentProps extends TIconConfig {
+  text: string
+  size: number
+  sizeType: 'КБ' | 'МБ'
+  href: string
+}
+
+export const Document = ({ text, size, sizeType, href, intent = 'outline' }: IDocumentProps) => {
+  return (
+    <a
+      href={href}
+      target='_blank'
+      rel='noreferrer'
+      tabIndex={0}
+      className={cn(
+        'flex items-center gap-2 cursor-pointer group outline outline-2 outline-transparent transition-colors focus-within:outline-primary-focus rounded-sm p-1 max-w-[288px] desktop:max-w-[592px]'
+      )}
+    >
+      <Icon name={iconVariant[intent!]} className={cn(iconConfig({ intent }))} />
+      <div className={cn('flex flex-col flex-1')}>
+        <p className={cn('desk-body-medium-l text-color-dark ')}>{text}</p>
+        <div className={cn('desk-body-regular-m text-color-disabled')}>
+          {size} {sizeType}
+        </div>
+      </div>
+    </a>
+  )
+}

package/lib/shared/ui/Heading.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '$/shared/utils'
+
+const headingConfig = cva('', {
+  variants: {
+    as: {
+      h1: 'mob-headline-bold-m desktop:desk-headline-bold-l',
+      h2: 'mob-headline-bold-s desktop:desk-headline-bold-m',
+      h3: 'mob-title-bold-l  desktop:desk-title-bold-l',
+      h4: 'mob-title-bold-m desktop:desk-title-bold-s'
+      // # add h5 and h6 if need
+    }
+  },
+  defaultVariants: {
+    as: 'h2'
+  }
+})
+
+export interface IHeadingProps extends VariantProps<typeof headingConfig> {
+  children: ReactNode
+  className?: string
+  as?: 'h1' | 'h2' | 'h3' | 'h4'
+}
+
+export const Heading = ({ as = 'h2', children, className, ...props }: IHeadingProps) => {
+  const Element = as
+  return (
+    <Element className={cn(headingConfig({ as }), className)} {...props}>
+      {children}
+    </Element>
+  )
+}

package/lib/shared/ui/Hint.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import * as React from 'react'
+import type { TooltipContentProps } from '@radix-ui/react-tooltip'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '$/shared/utils'
+
+type TAdditionalClasses = {
+  content: string
+  arrow: string
+  trigger: string
+}
+
+export interface IHintContentProps extends TooltipContentProps {
+  delayDuration?: number
+  sideOffset?: number
+  align?: 'end' | 'center' | 'start'
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  defaultOpen?: boolean
+}
+
+export interface IHintProps extends IHintContentProps {
+  triggerElement: React.ReactElement
+  children: React.ReactElement | string
+  classes?: Partial<TAdditionalClasses>
+}
+
+export const Hint = ({
+  triggerElement,
+  children,
+  delayDuration = 250,
+  sideOffset = 6,
+  align = 'center',
+  side = 'top',
+  defaultOpen = false,
+  classes,
+  ...contentProps
+}: IHintProps) => {
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root defaultOpen={defaultOpen} delayDuration={delayDuration}>
+        <TooltipPrimitive.Trigger asChild className={cn('cursor-pointer', classes?.trigger)}>
+          {triggerElement}
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Content
+          onPointerDownOutside={(event) => event.preventDefault()}
+          className={cn(
+            'bg-color-white text-color-dark desk-body-regular-m w-48 p-4 rounded-sm origin-center shadow-sm animate-scale-in',
+            classes?.content
+          )}
+          sideOffset={sideOffset}
+          align={align}
+          side={side}
+          {...contentProps}
+        >
+          {children}
+          <TooltipPrimitive.Arrow width={12} height={6} className={cn('fill-white', classes?.arrow)} />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}