@scbt-ecom/ui 0.0.27 → 0.0.30

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>,
+    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

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

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

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

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

@@ -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,80 @@
+'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

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

@@ -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(
+          'outline-0 bg-color-transparent flex items-center justify-between gap-5 w-full cursor-pointer py-5 px-6 border border-transparent border-solid rounded-sm focus:border-primary-default group',
+          classes?.trigger
+        )}
+        {...props}
+      >
+        <div className={cn('desk-body-medium-l text-color-dark', classes?.inner)}>{children}</div>
+        <Icon
+          name='arrows/arrowCircle'
+          className={cn('group-data-[state=open]:rotate-180 transition-all text-icon-blue-grey-800 size-8', 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

package/lib/shared/ui/button/Button.tsx

@@ -0,0 +1,111 @@
+import { type ComponentProps, forwardRef, type ReactElement } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Loader } from '../Loader'
+import { setButtonLoaderIntent } from './model/helpers'
+import { cn } from '$/shared/utils'
+
+const buttonConfig = cva(
+  'relative flex items-center justify-center gap-4 cursor-pointer rounded-sm w-[216px] outline-offset-4 outline-transparent outline-2 desk-body-regular-l transition duration-12 active:scale-[0.97] disabled:pointer-events-none',
+  {
+    variants: {
+      intent: {
+        primary:
+          'bg-color-primary-default text-color-white outline-offset-[3px]  hover:bg-color-primary-hover  active:bg-color-primary-hover  focus:bg-color-primary-default focus:outline-primary-focus  disabled:bg-color-primary-disabled',
+        secondary:
+          'bg-transparent text-color-primary-default border border-solid border-primary-default hover:bg-color-primary-tr-hover active:bg-color-primary-tr-pressed active:border-primary-hover  focus:outline-primary-focus  focus:bg-color-primary-tr-focus disabled:bg-color-blue-grey-200 disabled:text-color-primary-disabled disabled:border-transparent',
+        ghost:
+          'bg-transparent text-color-primary-default hover:bg-color-primary-tr-hover hover:text-color-primary-hover focus:bg-color-primary-tr-focus focus:outline-primary-focus active:bg-color-primary-tr-pressed active:text-color-primary-hover disabled:text-color-primary-disabled disabled:bg-transparent',
+        red: 'bg-color-secondary-default text-color-white outline-offset-[3px] hover:bg-color-secondary-hover disabled:bg-color-secondary-disabled active:bg-color-secondary-hover focus:bg-color-secondary-default focus:outline-primary-focus'
+      },
+      size: {
+        sm: 'h-10',
+        md: 'h-12',
+        lg: 'h-14'
+      },
+      textFormat: {
+        capitalize: 'capitalize',
+        uppercase: 'uppercase',
+        lowercase: 'lowercase',
+        initial: 'initial'
+      },
+      isLoading: {
+        true: '',
+        false: ''
+      }
+    },
+    compoundVariants: [
+      {
+        intent: 'primary',
+        isLoading: true,
+        class: '!bg-color-primary-default'
+      },
+      {
+        intent: 'secondary',
+        isLoading: true,
+        class: '!bg-color-transparent  !border-primary-hover'
+      },
+      {
+        intent: 'ghost',
+        isLoading: true,
+        class: '!bg-color-blue-grey-200'
+      },
+      {
+        intent: 'red',
+        isLoading: true,
+        class: '!bg-color-secondary-default'
+      }
+    ],
+    defaultVariants: {
+      intent: 'primary',
+      size: 'md',
+      textFormat: 'initial'
+    }
+  }
+)
+
+type TButtonConfig = VariantProps<typeof buttonConfig>
+export type TButtonIntents = 'primary' | 'secondary' | 'ghost' | 'red'
+export interface IButtonProps extends ComponentProps<'button'>, TButtonConfig {
+  iconLeft?: ReactElement
+  iconRight?: ReactElement
+  isLoading?: boolean
+}
+
+export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+  (
+    {
+      intent,
+      size,
+      className,
+      children,
+      type = 'button',
+      iconLeft,
+      iconRight,
+      disabled = false,
+      isLoading = false,
+      textFormat,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled || isLoading}
+        className={cn(buttonConfig({ intent, size, textFormat, isLoading }), className)}
+        {...props}
+      >
+        {isLoading ? (
+          <Loader size='sm' intent={setButtonLoaderIntent(intent!)} />
+        ) : (
+          <>
+            {iconLeft && <span className='size-5 flex items-center justify-center'>{iconLeft}</span>}
+            {children}
+            {iconRight && <span className='size-5 flex items-center justify-center'>{iconRight}</span>}
+          </>
+        )}
+      </button>
+    )
+  }
+)

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

@@ -0,0 +1 @@
+export { Button, type IButtonProps } from './Button'

package/lib/shared/ui/button/model/helpers.ts

@@ -0,0 +1,16 @@
+import type { TButtonIntents } from '../Button'
+
+export const setButtonLoaderIntent = (intent: TButtonIntents) => {
+  switch (intent) {
+    case 'ghost':
+    case 'secondary':
+      return 'secondary'
+
+    case 'primary':
+    case 'red':
+      return 'primary'
+
+    default:
+      return intent
+  }
+}