@scbt-ecom/ui 0.4.0 → 0.4.2

package/lib/shared/ui/ButtonIcon.tsx

@@ -0,0 +1,50 @@
+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 Omit<ComponentProps<'button'>, 'className'>, 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,76 @@
+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  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: ''
+      },
+      size: {
+        sm: 'desk-body-regular-m',
+        md: 'desk-body-regular-l'
+      }
+    },
+    defaultVariants: {
+      intent: 'blue',
+      withIcon: true,
+      disabled: false,
+      size: 'sm'
+    }
+  }
+)
+
+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, Omit<ComponentProps<'a'>, 'className'> {
+  Component?: 'a'
+  icon?: TAllowedIcons
+}
+
+export const CustomLink = ({
+  Component = 'a',
+  intent,
+  children,
+  withIcon,
+  disabled,
+  size,
+  icon = 'arrows/arrowLink',
+  ...props
+}: ICustomLinkProps) => {
+  return (
+    <Component className={cn(customLinkConfig({ intent, withIcon, disabled, size }))} {...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(
+        'group flex max-w-[288px] cursor-pointer items-center gap-2 rounded-sm p-1 outline outline-2 outline-transparent transition-colors focus-within:outline-primary-focus desktop:max-w-[592px]'
+      )}
+    >
+      <Icon name={iconVariant[intent!]} className={cn(iconConfig({ intent }))} />
+      <div className={cn('flex flex-1 flex-col')}>
+        <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,72 @@
+'use client'
+
+import * as React from 'react'
+import type { TooltipContentProps } from '@radix-ui/react-tooltip'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { useClickOutside } from '../hooks'
+import { useDevice } from '../hooks/useMediaQuery'
+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) => {
+  const [open, setOpen] = React.useState(false)
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const { isMobile } = useDevice()
+
+  useClickOutside(contentRef, () => setOpen(false))
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root open={open} onOpenChange={setOpen} defaultOpen={defaultOpen} delayDuration={delayDuration}>
+        <div onClick={() => setOpen(isMobile ? true : false)}>
+          <TooltipPrimitive.Trigger asChild className={cn('cursor-pointer', classes?.trigger)}>
+            {triggerElement}
+          </TooltipPrimitive.Trigger>
+          <TooltipPrimitive.Content
+            onPointerDownOutside={(event) => event.preventDefault()}
+            className={cn(
+              'desk-body-regular-m w-48 origin-center animate-scale-in rounded-sm bg-color-white p-4 text-color-dark shadow-sm',
+              classes?.content
+            )}
+            sideOffset={sideOffset}
+            align={align}
+            side={side}
+            ref={contentRef}
+            {...contentProps}
+          >
+            {children}
+            <TooltipPrimitive.Arrow width={12} height={6} className={cn('fill-white', classes?.arrow)} />
+          </TooltipPrimitive.Content>
+        </div>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}

package/lib/shared/ui/Loader.tsx

@@ -0,0 +1,58 @@
+import type { HTMLAttributes, ReactElement } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '$/shared/utils'
+
+const wrapperConfig = cva('', {
+  variants: {
+    position: {
+      absolute: 'absolute',
+      static: 'static',
+      fixed: 'fixed'
+    }
+  },
+  defaultVariants: {
+    position: 'static'
+  }
+})
+
+const loaderConfig = cva('border-2 border-solid block animate-spin rounded-full', {
+  variants: {
+    intent: {
+      primary: 'border-white border-b-transparent',
+      secondary: 'border-primary-default border-b-transparent'
+    },
+    size: {
+      sm: 'size-5 border-2',
+      md: 'size-8 border-2',
+      lg: 'size-12 border-4'
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    intent: 'primary'
+  }
+})
+
+type ILoaderClasses = {
+  wrapper: string
+  loader: string
+  text: string
+}
+
+export interface ILoaderProps
+  extends VariantProps<typeof loaderConfig>,
+    VariantProps<typeof wrapperConfig>,
+    Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  intent?: 'primary' | 'secondary'
+  text?: ReactElement | string
+  classes?: Partial<ILoaderClasses>
+}
+
+export const Loader = ({ size = 'md', classes, intent = 'secondary', position = 'static', text, ...props }: ILoaderProps) => {
+  return (
+    <div className={cn(wrapperConfig({ position }), { 'flex flex-col items-center gap-2': text }, classes?.wrapper)}>
+      <span data-testid='loader' className={cn(loaderConfig({ size, intent }), classes?.loader)} {...props}></span>
+      {text && <p className={cn('desk-body-regular-l text-color-dark', classes?.text)}>{text}</p>}
+    </div>
+  )
+}

package/lib/shared/ui/PhoneView.tsx

@@ -0,0 +1,23 @@
+import { cn } from '../utils'
+
+interface IPhoneViewClasses {
+  wrapper: string
+  link: string
+  text: string
+}
+
+export interface IPhoneViewProps {
+  phone: string
+  text: string
+  classes?: Partial<IPhoneViewClasses>
+}
+export const PhoneView = ({ phone, text, classes }: IPhoneViewProps) => {
+  return (
+    <div className={cn('flex w-max flex-col', classes?.wrapper)}>
+      <a href={`tel:${phone}`} className={cn('desk-body-medium-l ml-auto text-color-dark', classes?.link)}>
+        {phone}
+      </a>
+      <p className={cn('desk-body-regular-l text-color-tetriary', classes?.text)}>{text}</p>
+    </div>
+  )
+}

package/lib/shared/ui/ProgressBar.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { cn } from '../utils'
+
+type IProgressBarClasses = {
+  wrapper: string
+  topContent: string
+  bottomContent: string
+  progressBar: string
+  progress: string
+  loader: string
+}
+
+export interface IProgressBarProps {
+  topContent?: React.ReactElement
+  bottomContent?: React.ReactElement
+  progress: number
+  maxPercent?: number
+  classes?: Partial<IProgressBarClasses>
+}
+
+export const ProgressBar = ({ topContent, bottomContent, progress, maxPercent = 100, classes }: IProgressBarProps) => {
+  return (
+    <div className={cn('flex flex-col', classes?.wrapper)}>
+      {topContent && <div className={cn('mb-2 flex justify-between gap-5', classes?.topContent)}>{topContent}</div>}
+
+      <div className={cn('relative h-2 w-[328xp] rounded-md bg-color-blue-grey-100 desktop:w-[524px]', classes?.progressBar)}>
+        <div
+          style={{ width: `${progress}%` }}
+          className={cn('relative z-10 h-2 rounded-md bg-color-positive transition-all', classes?.progress)}
+        ></div>
+        <span
+          style={{ maxWidth: `${maxPercent}%` }}
+          className={cn(
+            'progressBar-apply absolute top-1/2 z-1 h-full w-full -translate-y-1/2 animate-progress-loader rounded-md',
+            classes?.loader
+          )}
+        ></span>
+      </div>
+
+      {bottomContent && <div className={cn('mt-2 flex justify-between gap-5', classes?.bottomContent)}>{bottomContent}</div>}
+    </div>
+  )
+}

package/lib/shared/ui/ResponsiveContainer.tsx

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '$/shared/utils'
+
+export interface IResponsiveContainerProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+  className?: string
+}
+
+export const ResponsiveContainer = ({ children, className, ...props }: IResponsiveContainerProps) => {
+  return (
+    <div className={cn('m-auto w-full px-4 desktop:max-w-[1188px]', className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/lib/shared/ui/Section.tsx

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '$/shared/utils'
+
+export interface ISectionProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+  className?: string
+}
+
+export const Section = ({ children, className, ...props }: ISectionProps) => {
+  return (
+    <section className={cn('pb-16 desktop:pb-20', className)} {...props}>
+      {children}
+    </section>
+  )
+}

package/lib/shared/ui/Skeleton.tsx

@@ -0,0 +1,9 @@
+import { cn } from '../utils'
+
+export interface ISkeletonProps {
+  className?: string
+}
+
+export const Skeleton = ({ className }: ISkeletonProps) => {
+  return <div className={cn('skeleton-apply h-full w-full', className)}></div>
+}

package/lib/shared/ui/TabsSwitcher.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import * as React from 'react'
+import * as TabPrimitive from '@radix-ui/react-tabs'
+import { cn } from '../utils'
+import { Accordion } from './accordion'
+
+/**
+ * @param {string} id - для триггера и для контента должен совпадать
+ */
+
+interface ITabsClasses {
+  root: string
+  list: string
+  trigger: string
+  content: string
+  contentsWrapper: string
+}
+
+export interface ITabContent {
+  id: string
+  body: React.ReactElement | string
+  accordion?: {
+    title: string
+  }
+}
+
+interface ITabTrigger {
+  id: string
+  label: string
+}
+
+export interface ITabRenderContent {
+  triggers: ITabTrigger[]
+  contents: ITabContent[]
+}
+
+export interface ITabsSwitcherProps {
+  renderContent: ITabRenderContent
+  value: string
+  onChangeTab: (tab: string) => void
+  defaultActiveTabId?: string
+  classes?: Partial<ITabsClasses>
+}
+
+export const TabsSwitcher = ({ renderContent, defaultActiveTabId = '1', value, onChangeTab, classes }: ITabsSwitcherProps) => {
+  return (
+    <TabPrimitive.Root
+      value={value}
+      onValueChange={onChangeTab}
+      defaultValue={defaultActiveTabId}
+      className={cn('flex flex-col', classes?.root)}
+    >
+      <TabPrimitive.List aria-label='Manage your account' className={cn('flex items-center gap-4', classes?.list)}>
+        {renderContent?.triggers?.map(({ id, label }) => (
+          <TabPrimitive.Trigger
+            key={id}
+            value={id}
+            className={cn(
+              'desk-body-regular-l cursor-pointer rounded-sm bg-color-blue-grey-100 px-4 py-2 text-color-secondary outline outline-2 outline-offset-2 outline-transparent transition-colors hover:bg-color-blue-grey-200 hover:text-color-secondary data-[state="active"]:!bg-color-primary-default data-[state="active"]:!text-color-white',
+              classes?.trigger
+            )}
+          >
+            {label}
+          </TabPrimitive.Trigger>
+        ))}
+      </TabPrimitive.List>
+      <div className={cn('flex flex-col gap-4', classes?.contentsWrapper)}>
+        {renderContent?.contents?.map(({ id, body, accordion }) => {
+          if (accordion && accordion?.title) {
+            return (
+              <TabPrimitive.Content key={id} value={id} className={cn('py-8', classes?.content)}>
+                <Accordion label={accordion?.title}>{body}</Accordion>
+              </TabPrimitive.Content>
+            )
+          }
+
+          return (
+            <TabPrimitive.Content key={id} value={id} className={cn('py-8', classes?.content)}>
+              {body}
+            </TabPrimitive.Content>
+          )
+        })}
+      </div>
+    </TabPrimitive.Root>
+  )
+}

package/lib/shared/ui/accordion/Accordion.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import type { TAccordionHeaderClasses, TAccordionRootClasses } from './model/types'
+import { AccordionHeader } from './ui/AccordionHeader'
+import { cn } from '$/shared/utils'
+
+/**
+ * @param {string[]} defaultOpen - По умолчанию открытые аккордеоны необходимо указать тот же label явно руками.
+ * Пример defaultValue={['Заголовок аккордеона 1', 'Заголовок аккордеона 2']}
+ */
+export interface IAccordionProps {
+  children: React.ReactNode
+  label: string | React.ReactElement
+  classes?: Partial<TAccordionHeaderClasses> & Partial<TAccordionRootClasses>
+  defaultOpen?: string[]
+}
+
+export const Accordion = ({ children, label, classes, defaultOpen }: IAccordionProps) => {
+  return (
+    <AccordionPrimitive.Root className={cn('flex flex-col gap-5', classes?.accordion)} type='multiple' defaultValue={defaultOpen}>
+      <AccordionPrimitive.Item className={cn('w-full disabled:text-color-dark', classes?.item)} value={label.toString()}>
+        <AccordionHeader classes={classes}>{label}</AccordionHeader>
+        <AccordionPrimitive.Content
+          className={cn(
+            'desk-body-regular-l overflow-hidden bg-color-transparent text-color-dark transition-all data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown',
+            classes?.content
+          )}
+        >
+          <div className={cn('p-6', classes?.contentInner)}>{children}</div>
+        </AccordionPrimitive.Content>
+      </AccordionPrimitive.Item>
+    </AccordionPrimitive.Root>
+  )
+}

package/lib/shared/ui/accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion, type IAccordionProps } from './Accordion'

package/lib/shared/ui/accordion/model/types.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react'
+
+export type TAccordionHeaderClasses = {
+  trigger: string
+  icon: string
+  header: string
+  inner: string
+}
+
+export type TAccordionRootClasses = {
+  item: string
+  content: string
+  contentInner: string
+  accordion: string
+}
+
+export interface IAccordionItem {
+  label: string
+  content: React.ReactNode
+}

package/lib/shared/ui/accordion/ui/AccordionHeader.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import * as React from 'react'
+import { Header, Trigger } from '@radix-ui/react-accordion'
+import { Icon } from '../../icon/Icon'
+import type { TAccordionHeaderClasses } from '../model/types'
+import { cn } from '$/shared/utils'
+
+interface IAccordionHeaderProps {
+  children?: React.ReactElement | string
+  classes?: Partial<TAccordionHeaderClasses>
+}
+
+export const AccordionHeader = React.forwardRef<HTMLButtonElement, IAccordionHeaderProps>(
+  ({ children, classes, ...props }, forwardedRef) => (
+    <Header className={cn('rounded-sm bg-color-primary-light-default', classes?.header)}>
+      <Trigger
+        ref={forwardedRef}
+        className={cn(
+          'group flex w-full cursor-pointer items-center justify-between gap-5 rounded-sm border border-solid border-transparent bg-color-transparent px-6 py-5 outline-0 focus:border-primary-default',
+          classes?.trigger
+        )}
+        {...props}
+      >
+        <div className={cn('desk-body-medium-l text-color-dark', classes?.inner)}>{children}</div>
+        <Icon
+          name='arrows/arrowCircle'
+          className={cn('size-8 text-icon-blue-grey-800 transition-all group-data-[state=open]:rotate-180', classes?.icon)}
+        />
+      </Trigger>
+    </Header>
+  )
+)
+
+AccordionHeader.displayName = 'AccordionHeader'

package/lib/shared/ui/brandLogos.tsx

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react'
+import { Icon } from './icon/Icon'
+
+export type TBrandLogoVariant = 'main' | 'white' | 'gray' | 'black' | 'business' | 'insurance'
+type TBrandLogosVariants = Record<TBrandLogoVariant, ReactElement>
+
+export const brandLogos: TBrandLogosVariants = {
+  main: <Icon name='brandLogos/logoMain' />,
+  white: <Icon name='brandLogos/logoWhite' />,
+  gray: <Icon name='brandLogos/logoGray' />,
+  black: <Icon name='brandLogos/logoBlack' />,
+  business: <Icon name='brandLogos/logoBusiness' />,
+  insurance: <Icon name='brandLogos/logoInsurance' />
+} as const