@scbt-ecom/ui 0.0.27 → 0.0.30

package/lib/widgets/pageHeader/PageHeader.tsx

@@ -0,0 +1,54 @@
+import { brandLogos, Button, PhoneView, ResponsiveContainer, type TBrandLogoVariant } from '$/shared/ui'
+
+export interface ICommonHeaderProps {
+  logoPath?: string
+  logoType?: TBrandLogoVariant
+}
+interface IHeaderWithPhone extends ICommonHeaderProps {
+  variant: 'withPhone'
+  phone: string
+  phoneText: string
+}
+interface IHeaderWithButton extends ICommonHeaderProps {
+  variant: 'withButton'
+}
+
+export type TPageHeaderProps = IHeaderWithButton | IHeaderWithPhone
+
+const renderContentVariant = (props: TPageHeaderProps) => {
+  switch (props.variant) {
+    case 'withButton':
+      return (
+        <Button intent='secondary' size='sm'>
+          Оформить заявку
+        </Button>
+      )
+    case 'withPhone':
+      const { phone, phoneText } = props as IHeaderWithPhone
+      return <PhoneView phone={phone} text={phoneText} />
+    default:
+      return null
+  }
+}
+
+export const PageHeader = (props: TPageHeaderProps) => {
+  const { logoPath = '/', logoType = 'main' } = props
+
+  return (
+    <header className='bg-color-blue-grey-200 flex items-center justify-center h-[72px] '>
+      <ResponsiveContainer>
+        <div className='flex items-center justify-between gap-5 '>
+          <a
+            href={logoPath}
+            target='_blank'
+            rel='noreferrer'
+            className='[&_svg]:w-[192px] [&_svg]:h-[32px] flex items-center justify-center'
+          >
+            {brandLogos[logoType]}
+          </a>
+          {renderContentVariant(props)}
+        </div>
+      </ResponsiveContainer>
+    </header>
+  )
+}

package/{dist/widgets/pageHeader/index.d.ts → lib/widgets/pageHeader/index.ts}

@@ -1 +1 @@
-export { PageHeader, type TPageHeaderProps } from './PageHeader';
+export { PageHeader, type TPageHeaderProps } from './PageHeader'

package/package.json

@@ -1,21 +1,19 @@
 {
   "name": "@scbt-ecom/ui",
-  "version": "0.0.27",
+  "version": "0.0.30",
   "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/ui.es.js",
-      "require": "./dist/ui.umd.cjs",
-      "types": "./dist/index.d.ts"
+    "./client": {
+      "import": "./dist/esm/client.js",
+      "require": "./dist/cjs/client.js",
+      "types": "./dist/types/client.d.ts"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./server": {
+      "import": "./dist/esm/server.js",
+      "require": "./dist/cjs/server.js",
+      "types": "./dist/types/server.d.ts"
+    }
   },
-  "main": "./dist/ui.umd.cjs",
-  "module": "./dist/ui.es.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {}
+  }
+}
+
+export default config

package/src/App.tsx

@@ -0,0 +1,9 @@
+export const App = () => {
+  return (
+    <div className='flex justify-center items-center min-h-screen'>
+      <h2 className='text-color-tetriary desk-title-bold-s'>
+        use <span className='text-color-primary-default desk-title-bold-s'> npm run start </span> for run storybook
+      </h2>
+    </div>
+  )
+}

package/src/app/providers/RootProvider.tsx

@@ -0,0 +1,11 @@
+import type { IProviderProps } from './model/types'
+import { ToasterProvider } from './ui'
+
+export const RootProvider = ({ children }: IProviderProps) => {
+  return (
+    <>
+      <ToasterProvider />
+      {children}
+    </>
+  )
+}

package/src/app/providers/index.ts

@@ -0,0 +1 @@
+export * from './RootProvider'

package/src/app/providers/model/types.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export interface IProviderProps {
+  children: ReactNode
+}

package/src/app/providers/ui/ToasterProvider.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import toast, { Toaster, useToasterStore } from 'react-hot-toast'
+
+export const ToasterProvider = () => {
+  const { toasts } = useToasterStore()
+  const TOAST_LIMIT = 5
+
+  useEffect(() => {
+    toasts
+      .filter((t) => t.visible)
+      .filter((_, i) => i >= TOAST_LIMIT)
+      .forEach((t) => toast.dismiss(t.id))
+  }, [toasts])
+
+  return (
+    <Toaster
+      position='top-right'
+      toastOptions={{
+        duration: 5000
+      }}
+    />
+  )
+}

package/src/app/providers/ui/index.ts

@@ -0,0 +1 @@
+export * from './ToasterProvider'

package/src/configs/setup.ts

@@ -0,0 +1,9 @@
+import * as matchers from '@testing-library/jest-dom/matchers'
+import { cleanup } from '@testing-library/react'
+import { afterEach, expect } from 'vitest'
+
+expect.extend(matchers)
+
+afterEach(() => {
+  cleanup()
+})

package/src/configs/storybook.config.ts

@@ -0,0 +1,23 @@
+export const STORYBOOK_VIEWPORTS = {
+  mobile: {
+    name: 'mobile',
+    styles: {
+      width: '360px',
+      height: '700px'
+    }
+  },
+  desktop: {
+    name: 'desktop',
+    styles: {
+      width: '1188px',
+      height: '700px'
+    }
+  },
+  fullscreen: {
+    name: 'fullscreen',
+    styles: {
+      width: '100%',
+      height: '100%'
+    }
+  }
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import '$/shared/style.css'
+import { App } from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/src/stories/primitives/Accordion.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Accordion } from '$/shared/ui'
+
+const meta = {
+  title: 'INTERACTIVE/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className='max-w-[800px] mt-8 m-auto'>
+        <Story />
+      </div>
+    )
+  ]
+} satisfies Meta<typeof Accordion>
+
+export default meta
+
+type Story = StoryObj<typeof Accordion>
+
+const mock_accordion_list = [
+  {
+    label: 'Заголовок аккордеон 1',
+    content: 'Контент аккордеона 1'
+  },
+  {
+    label: 'Заголовок аккордеон 2',
+    content: 'Контент аккордеона 2'
+  },
+  {
+    label: 'Заголовок аккордеон 3',
+    content: 'Контент аккордеона 3'
+  }
+]
+
+export const Base: Story = {
+  args: {
+    label: 'Заголовок аккордеон',
+    children: 'Контент аккордеона'
+  }
+}
+
+export const WithDefaultOpen: Story = {
+  args: {
+    defaultOpen: ['Заголовок аккордеон'],
+    label: 'Заголовок аккордеон',
+    children: 'Контент аккордеона'
+  }
+}
+
+export const MappedWithDefaultOpen: Story = {
+  render: (...args) => (
+    <div className='flex flex-col gap-6'>
+      {mock_accordion_list?.map(({ label, content }) => (
+        <Accordion
+          defaultOpen={['Заголовок аккордеон 1', 'Заголовок аккордеон 2']}
+          key={label.toString()}
+          label={label}
+          {...args}
+        >
+          {content}
+        </Accordion>
+      ))}
+    </div>
+  )
+}

package/src/stories/primitives/Badge.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Badge } from '$/shared/ui'
+
+const meta = {
+  title: 'Base/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Badge>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+  args: {
+    children: 'Text container'
+  }
+}
+
+export const MinWidth: Story = {
+  args: {
+    children: '2',
+    className: 'bg-color-primary-default'
+  }
+}

package/src/stories/primitives/Breadcrumbs.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Breadcrumbs } from '$/shared/ui'
+import type { TLinksList } from '$/shared/ui/Breadcrumbs'
+
+const meta = {
+  title: 'Navigation/Breadcrumbs',
+  component: Breadcrumbs,
+  parameters: {
+    layout: 'centered'
+  },
+
+  tags: ['autodocs']
+} satisfies Meta<typeof Breadcrumbs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const linksList: TLinksList = [
+  { label: 'Главная', path: 'https://sovcombank.ru/' },
+  { label: 'Займы', path: 'https://sovcombank.ru/apply/credit/zajm-online/' },
+  { label: 'Главная' }
+]
+
+export const Base: Story = {
+  args: {
+    linksList
+  }
+}

package/src/stories/primitives/Button/Button.stories.tsx

@@ -0,0 +1,149 @@
+import toast from 'react-hot-toast'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button, Icon } from '$/shared/ui'
+
+const meta = {
+  title: 'BASE/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  }
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+  args: {
+    size: 'md',
+    children: 'Button',
+    intent: 'primary',
+    textFormat: 'initial',
+    isLoading: false,
+    onClick: () => toast.success('Clicked')
+  }
+}
+
+export const AllVariantsButtons: Story = {
+  render: () => (
+    <div className='flex flex-col gap-8'>
+      <div className='flex flex-col gap-3'>
+        <strong className='text-color-tetriary'># Primary</strong>
+        <div className='flex items-center gap-5'>
+          <Button intent='primary' size='lg'>
+            Button
+          </Button>
+          <Button intent='primary' size='md'>
+            Button
+          </Button>
+          <Button intent='primary' size='sm'>
+            Button
+          </Button>
+          <Button intent='primary' size='sm' disabled>
+            Button
+          </Button>
+          <Button intent='primary' size='sm' isLoading>
+            Button
+          </Button>
+        </div>
+      </div>
+
+      <div className='flex flex-col gap-3'>
+        <strong className='text-color-tetriary'># Secondary</strong>
+        <div className='flex items-center gap-5'>
+          <Button intent='secondary' size='lg'>
+            Button
+          </Button>
+          <Button intent='secondary' size='md'>
+            Button
+          </Button>
+          <Button intent='secondary' size='sm'>
+            Button
+          </Button>
+          <Button intent='secondary' size='sm' disabled>
+            Button
+          </Button>
+          <Button intent='secondary' size='sm' isLoading>
+            Button
+          </Button>
+        </div>
+      </div>
+
+      <div className='flex flex-col gap-3'>
+        <strong className='text-color-tetriary'># Ghost</strong>
+        <div className='flex items-center gap-5'>
+          <Button intent='ghost' size='lg'>
+            Button
+          </Button>
+          <Button intent='ghost' size='md'>
+            Button
+          </Button>
+          <Button intent='ghost' size='sm'>
+            Button
+          </Button>
+          <Button intent='ghost' size='sm' disabled>
+            Button
+          </Button>
+          <Button intent='ghost' size='sm' isLoading>
+            Button
+          </Button>
+        </div>
+      </div>
+
+      <div className='flex flex-col gap-3'>
+        <strong className='text-color-tetriary'># Red</strong>
+        <div className='flex items-center gap-5'>
+          <Button intent='red' size='lg'>
+            Button
+          </Button>
+          <Button intent='red' size='md'>
+            Button
+          </Button>
+          <Button intent='red' size='sm'>
+            Button
+          </Button>
+          <Button intent='red' size='sm' disabled>
+            Button
+          </Button>
+          <Button intent='red' size='sm' isLoading>
+            Button
+          </Button>
+        </div>
+      </div>
+
+      <div className='flex flex-col gap-3'>
+        <strong className='text-color-tetriary'># Text format</strong>
+        <div className='flex items-center gap-5'>
+          <Button intent='primary' size='lg' textFormat='capitalize'>
+            capitalize
+          </Button>
+          <Button intent='primary' size='md' textFormat='uppercase'>
+            uppercase
+          </Button>
+          <Button intent='primary' size='sm' textFormat='lowercase'>
+            lowercase
+          </Button>
+          <Button intent='primary' size='sm' textFormat='initial'>
+            initial
+          </Button>
+        </div>
+      </div>
+
+      <div className='flex flex-col gap-3'>
+        <strong className='text-color-tetriary'># With icons</strong>
+        <div className='flex items-center gap-5'>
+          <Button iconLeft={<Icon name='general/check' />} intent='primary' size='lg'>
+            Button
+          </Button>
+          <Button iconLeft={<Icon name='general/check' />} iconRight={<Icon name='general/check' />} intent='primary' size='md'>
+            Button
+          </Button>
+          <Button iconRight={<Icon name='general/check' />} intent='primary' size='sm'>
+            Button
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/stories/primitives/Button/Button.test.tsx

@@ -0,0 +1,150 @@
+// "pre-deploy": "npm run lint && npm run test -- --watch=false" for package json
+
+// import { render, screen } from '@testing-library/react'
+// import { describe, expect, it } from 'vitest'
+// import { Button } from '$/shared/ui'
+
+// describe('Тестирование Button', () => {
+//   const buttonTestid = 'test-button'
+
+//   it('Кнопка должна рендериться с правильным текстом', () => {
+//     const { asFragment } = render(<Button data-testid={buttonTestid}>Click me!</Button>)
+
+//     expect(asFragment()).toMatchSnapshot()
+
+//     const button = screen.getByTestId(buttonTestid)
+
+//     expect(button).toBeInTheDocument()
+//     expect(button).toHaveTextContent('Click me!')
+//   })
+
+//   it('Кнопка должна быть отключена, когда свойство disabled равно true', () => {
+//     const { asFragment } = render(
+//       <Button disabled data-testid={buttonTestid}>
+//         Click me!
+//       </Button>
+//     )
+
+//     expect(asFragment()).toMatchSnapshot()
+
+//     const button = screen.getByTestId(buttonTestid)
+
+//     expect(button).toBeInTheDocument()
+//     expect(button).toBeDisabled()
+//   })
+
+//   it('Кнопка должна быть включена, когда свойство disabled равно false', () => {
+//     const { asFragment } = render(
+//       <Button disabled={false} data-testid={buttonTestid}>
+//         Click me!
+//       </Button>
+//     )
+
+//     expect(asFragment()).toMatchSnapshot()
+
+//     const button = screen.getByTestId(buttonTestid)
+
+//     expect(button).toBeInTheDocument()
+//     expect(button).not.toBeDisabled()
+//   })
+
+//   it('Кнопка должна отображать иконку слева до текста, если она передана', () => {
+//     const icon = (
+//       <span role='img' aria-label='icon'>
+//         🌟
+//       </span>
+//     )
+
+//     const { asFragment } = render(
+//       <Button data-testid={buttonTestid} iconLeft={icon}>
+//         Click me!
+//       </Button>
+//     )
+
+//     expect(asFragment()).toMatchSnapshot()
+
+//     const button = screen.getByTestId(buttonTestid)
+//     const iconElement = screen.getByRole('img')
+//     const buttonText = screen.getByText('Click me!')
+
+//     expect(button).toBeInTheDocument()
+//     expect(button).toContainElement(iconElement)
+//     expect(button).toContainElement(buttonText)
+
+//     const buttonContent = button.textContent!
+//     expect(buttonContent.indexOf('🌟')).toBeLessThan(buttonContent.indexOf('Click me!'))
+//   })
+
+//   it('Кнопка должна отображать иконку справа после текста, если она передана', () => {
+//     const icon = (
+//       <span role='img' aria-label='icon'>
+//         🌟
+//       </span>
+//     )
+
+//     const { asFragment } = render(
+//       <Button data-testid={buttonTestid} iconRight={icon}>
+//         Click me!
+//       </Button>
+//     )
+
+//     expect(asFragment()).toMatchSnapshot()
+
+//     const button = screen.getByTestId(buttonTestid)
+//     const iconElement = screen.getByRole('img')
+//     const buttonText = screen.getByText('Click me!')
+
+//     expect(button).toBeInTheDocument()
+//     expect(button).toContainElement(iconElement)
+//     expect(button).toContainElement(buttonText)
+
+//     const buttonContent = button.textContent!
+//     expect(buttonContent.indexOf('Click me!')).toBeLessThan(buttonContent.indexOf('🌟'))
+//   })
+
+//   it('На кнопку добавляется новый класс, если передается className', () => {
+//     const { asFragment } = render(
+//       <Button data-testid={buttonTestid} className='testClassName'>
+//         Click me!
+//       </Button>
+//     )
+
+//     expect(asFragment()).toMatchSnapshot()
+
+//     const button = screen.getByTestId(buttonTestid)
+//     const buttonClassName = document.querySelector('.testClassName')
+
+//     expect(button).toBeInTheDocument()
+//     expect(buttonClassName).toBeInTheDocument()
+//   })
+
+//   it('Кнопка меняет тип, если передать type', () => {
+//     const { asFragment } = render(
+//       <Button data-testid={buttonTestid} type='reset'>
+//         Click me!
+//       </Button>
+//     )
+
+//     expect(asFragment()).toMatchSnapshot()
+
+//     const button = screen.getByTestId(buttonTestid)
+
+//     expect(button).toBeInTheDocument()
+//     expect(button.getAttribute('type')).toBe('reset')
+//   })
+
+//   it('Кнопка применяет нужные стили при передаче props textFormat', () => {
+//     const { asFragment } = render(
+//       <Button data-testid={buttonTestid} textFormat='uppercase'>
+//         Click me!
+//       </Button>
+//     )
+
+//     expect(asFragment()).toMatchSnapshot()
+
+//     const button = screen.getByTestId(buttonTestid)
+
+//     expect(button).toBeInTheDocument()
+//     expect(button).toHaveClass('uppercase')
+//   })
+// })