@scbt-ecom/ui 0.0.30 → 0.0.32

package/lib/shared/ui/Badge.tsx

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

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

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

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

@@ -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(
-        '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

@@ -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,62 +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 { 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>
-  )
-}

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>,
-    HTMLAttributes<HTMLDivElement> {
-  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 flex-col', classes?.wrapper)}>
-      <a href={`tel:${phone}`} className={cn('text-color-dark desk-body-medium-l', classes?.link)}>
-        {phone}
-      </a>
-      <p className={cn('text-color-tetriary desk-body-regular-l', classes?.text)}>{text}</p>
-    </div>
-  )
-}

package/lib/shared/ui/Portal.tsx

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react'
-import { createPortal } from 'react-dom'
-
-interface IPortalProps {
-  children: ReactNode
-  container?: HTMLElement
-}
-
-export const Portal = ({ children, container = document.body }: IPortalProps) => createPortal(children, container)

package/lib/shared/ui/ProgressBar.tsx

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

package/lib/shared/ui/ResponsiveContainer.tsx

@@ -1,11 +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 }: IResponsiveContainerProps) => {
-  return <div className={cn('w-full px-4 m-auto desktop:max-w-[1188px]', className)}>{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,80 +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
-}
-
-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
-  defaultActiveTabId?: string
-  classes?: Partial<ITabsClasses>
-}
-
-export const TabsSwitcher = ({ renderContent, defaultActiveTabId = '1', classes }: ITabsSwitcherProps) => {
-  return (
-    <TabPrimitive.Root 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(
-              'bg-color-blue-grey-100 outline outline-2 outline-offset-2 outline-transparent text-color-secondary py-2 px-4 desk-body-regular-l rounded-sm cursor-pointer hover:bg-color-blue-grey-200 hover:text-color-secondary data-[state="active"]:bg-color-primary-default data-[state="active"]:text-color-white transition-colors',
-              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 gap-5 flex-col', 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 text-color-dark overflow-hidden transition-all data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown bg-color-transparent',
-            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
-}