@scbt-ecom/ui 0.4.2 → 0.4.3

package/lib/shared/ui/CustomLink.tsx

@@ -1,76 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,72 +0,0 @@
-'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

@@ -1,58 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,87 +0,0 @@
-'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

@@ -1,36 +0,0 @@
-'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

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

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

@@ -1,20 +0,0 @@
-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

@@ -1,35 +0,0 @@
-'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

@@ -1,14 +0,0 @@
-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