@scbt-ecom/ui 0.4.0 → 0.4.2

package/src/stories/primitives/formControl/InputCurrencyControl.stories.tsx

@@ -0,0 +1,73 @@
+import { useFormContext } from 'react-hook-form'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { InputCurrencyControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/InputCurrencyControl',
+  component: InputCurrencyControl,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <InputCurrencyControl {...args} {...methods} />
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof InputCurrencyControl>
+
+export default meta
+type Story = StoryObj<typeof InputCurrencyControl>
+
+export const Rubles: Story = {
+  args: {
+    name: 'currency',
+    label: 'Выберите валюту',
+    size: 'md',
+    defaultCurrency: 'rubles'
+  }
+}
+
+export const Dollars: Story = {
+  args: {
+    name: 'currency',
+    label: 'Выберите валюту',
+    size: 'md',
+    defaultCurrency: 'dollars'
+  }
+}
+
+export const Euro: Story = {
+  args: {
+    name: 'currency',
+    label: 'Выберите валюту',
+    size: 'md',
+    defaultCurrency: 'euro'
+  }
+}
+
+export const Dirhams: Story = {
+  args: {
+    name: 'currency',
+    label: 'Выберите валюту',
+    size: 'md',
+    defaultCurrency: 'dirhams'
+  }
+}
+
+export const Yuan: Story = {
+  args: {
+    name: 'currency',
+    label: 'Выберите валюту',
+    size: 'md',
+    defaultCurrency: 'yuan'
+  }
+}

package/src/stories/primitives/formControl/InputSliderControl.stories.tsx

@@ -0,0 +1,62 @@
+import { useFormContext } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { Icon, InputSliderControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/InputSliderControl',
+  component: InputSliderControl,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <InputSliderControl {...args} {...methods} />
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof InputSliderControl>
+
+export default meta
+type Story = StoryObj<typeof InputSliderControl>
+
+export const Base: Story = {
+  args: {
+    name: 'term',
+    label: 'Сумма кредита',
+    size: 'md',
+    min: 30_000,
+    max: 5_000_000,
+    variant: 'credit'
+  }
+}
+
+export const WithYears: Story = {
+  args: {
+    name: 'term',
+    label: 'Срок кредита',
+    size: 'md',
+    min: 1,
+    max: 12,
+    variant: 'years'
+  }
+}
+
+export const WithIconSlider: Story = {
+  args: {
+    name: 'term',
+    label: 'Город',
+    icon: <Icon name='general/edit' className='size-[19px] text-icon-blue-grey-600 focus:text-icon-blue-grey-800' />,
+    size: 'md',
+    min: 1,
+    max: 12,
+    variant: 'years'
+  }
+}

package/src/stories/primitives/formControl/RadioContol.stories.tsx

@@ -0,0 +1,61 @@
+import { useFormContext } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { MOCK_RADIO_GROUP, mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { RadioControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/RadioControl',
+  component: RadioControl,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <RadioControl {...args} {...methods} />
+  }
+} satisfies Meta<typeof RadioControl>
+
+export default meta
+type Story = StoryObj<typeof RadioControl>
+
+export const Base: Story = {
+  args: {
+    name: 'sex',
+    radioItemsGroup: MOCK_RADIO_GROUP
+  }
+}
+
+export const WithGroupName: Story = {
+  args: {
+    name: 'sex',
+    groupName: 'Выбери пол:',
+    radioItemsGroup: MOCK_RADIO_GROUP
+  }
+}
+
+export const WithHelperText: Story = {
+  args: {
+    name: 'sex',
+    helperText: 'Укажите свой пол, как в паспорте ',
+    radioItemsGroup: MOCK_RADIO_GROUP
+  }
+}
+
+export const WithHorizontalOrientation: Story = {
+  args: {
+    name: 'sex',
+    groupName: 'Выберите пол',
+    helperText: 'Укажите свой пол, как в паспорте ',
+    orientation: 'horizontal',
+    radioItemsGroup: MOCK_RADIO_GROUP
+  }
+}

package/src/stories/primitives/formControl/SwitchControl.stories.tsx

@@ -0,0 +1,51 @@
+import { useFormContext } from 'react-hook-form'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { SwitchControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/SwitchControl',
+  component: SwitchControl,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <SwitchControl {...args} {...methods} />
+  }
+} satisfies Meta<typeof SwitchControl>
+
+export default meta
+type Story = StoryObj<typeof SwitchControl>
+
+export const Base: Story = {
+  args: {
+    name: 'percent',
+    label: 'Увеличенный процент'
+  }
+}
+
+export const Disabled: Story = {
+  args: {
+    name: 'percent',
+    label: 'Увеличенный процент',
+    disabled: true
+  }
+}
+
+export const WithHelperText: Story = {
+  args: {
+    name: 'percent',
+    label: 'Увеличенный процент',
+    helperText: 'На первые 30 дней'
+  }
+}

package/src/stories/primitives/formControl/TextareaControl.stories.tsx

@@ -0,0 +1,55 @@
+import { useFormContext } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { TextareaControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/TextareaControl',
+  component: TextareaControl,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <TextareaControl {...args} {...methods} />
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof TextareaControl>
+
+export default meta
+type Story = StoryObj<typeof TextareaControl>
+
+export const Base: Story = {
+  args: {
+    name: 'description',
+    label: 'Описание к блоку',
+    size: 'md'
+  }
+}
+
+export const WithPlaceholder: Story = {
+  args: {
+    name: 'description',
+    label: 'Описание к блоку',
+    size: 'md',
+    placeholder: 'Введите описание'
+  }
+}
+
+export const Disabled: Story = {
+  args: {
+    name: 'description',
+    label: 'Описание к блоку',
+    size: 'md',
+    placeholder: 'Введите описание',
+    disabled: true
+  }
+}

package/src/stories/primitives/formControl/inputControlMask.stories.tsx

@@ -0,0 +1,67 @@
+import { useFormContext } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { Icon, InputControlMask } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/InputControlMask',
+  component: InputControlMask,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <InputControlMask {...args} {...methods} />
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof InputControlMask>
+
+export default meta
+type Story = StoryObj<typeof InputControlMask>
+
+export const Base: Story = {
+  args: {
+    name: 'phone',
+    label: 'Номер телефона',
+    size: 'md',
+    format: '# (###) ###-##-##'
+  }
+}
+
+export const WithIcon: Story = {
+  args: {
+    name: 'phone',
+    label: 'Номер телефона',
+    format: '# (###) ###-##-##',
+    size: 'md',
+    icon: <Icon name='general/check' className='text-icon-positive-default' />
+  }
+}
+
+export const WithBadge: Story = {
+  args: {
+    name: 'phone',
+    label: 'Номер телефона',
+    format: '# (###) ###-##-##',
+    size: 'md',
+    badge: '+25%'
+  }
+}
+
+export const WithHelperText: Story = {
+  args: {
+    name: 'phone',
+    label: 'Номер телефона',
+    size: 'md',
+    format: '# (###) ###-##-##',
+    helperText: 'Введите номер телефона'
+  }
+}

package/src/stories/widgets/Advantages.stories.tsx

@@ -0,0 +1,42 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Advantages, type IAdvantage } from '$/widgets/Advantages'
+
+const meta = {
+  title: 'WIDGETS/Advantages',
+  component: Advantages,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <div className='flex min-h-screen min-w-full items-center justify-center bg-color-blue-grey-300 px-6'>
+        <Story />
+      </div>
+    )
+  ]
+} satisfies Meta<typeof Advantages>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const mockThreeCards: IAdvantage[] = [
+  { title: 'До 5 млн ₽', description: 'сумма кредита' },
+  { title: 'До 5 лет', description: 'срок кредита' },
+  { title: 'От 5 минут', description: 'быстрое одобрение' }
+]
+
+const mockFourCards: IAdvantage[] = [...mockThreeCards, { title: 'От 15 минут', description: 'сумма одобрение' }]
+
+export const ThreeCards: Story = {
+  args: {
+    advantagesList: mockThreeCards
+  }
+}
+
+export const FourCards: Story = {
+  args: {
+    advantagesList: mockFourCards
+  }
+}

package/src/stories/widgets/Banner.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Banner, PageHeader } from '$/widgets'
+import {
+  mockBannerBase,
+  mockBannerBaseFullImage,
+  mockBannerBaseGradient,
+  mockBannerBaseGradientAdvantages,
+  mockBannerFullImageOnlyPrimaryButton,
+  mockBannerFullImageWithAdvantages,
+  mockBannerOnlyPrimaryButton,
+  mockWithAdvantages
+} from '$/widgets/banner/model/helpers'
+// test commit
+const meta = {
+  title: 'WIDGETS/Banner',
+  component: Banner,
+  tags: ['autodocs']
+} satisfies Meta<typeof Banner>
+
+export default meta
+
+type Story = StoryObj<typeof Banner>
+
+export const Base: Story = {
+  render: () => (
+    <>
+      <PageHeader variant='withButton' />
+      <Banner {...mockBannerBase} />
+    </>
+  )
+}
+
+export const OnlyPrimaryButton: Story = {
+  render: () => (
+    <>
+      <PageHeader variant='withButton' />
+      <Banner {...mockBannerOnlyPrimaryButton} />
+    </>
+  )
+}
+
+export const WithAdvantages: Story = {
+  render: () => (
+    <>
+      <PageHeader variant='withButton' />
+      <Banner {...mockWithAdvantages} />
+    </>
+  )
+}
+
+export const BaseFullImage: Story = {
+  render: () => (
+    <>
+      <PageHeader variant='withButton' />
+      <Banner {...mockBannerBaseFullImage} />
+    </>
+  )
+}
+
+export const FullImageOnlyPrimaryButton: Story = {
+  render: () => (
+    <>
+      <PageHeader variant='withButton' />
+      <Banner {...mockBannerFullImageOnlyPrimaryButton} />
+    </>
+  )
+}
+
+export const BaseFullImageWithAdvantages: Story = {
+  render: () => (
+    <>
+      <PageHeader variant='withButton' />
+      <Banner {...mockBannerFullImageWithAdvantages} />
+    </>
+  )
+}
+
+export const BaseGradient: Story = {
+  render: () => (
+    <>
+      <PageHeader variant='withButton' />
+      <Banner {...mockBannerBaseGradient} />
+    </>
+  )
+}
+
+export const BaseGradientWithAdvantages: Story = {
+  render: () => (
+    <>
+      <PageHeader variant='withButton' />
+      <Banner {...mockBannerBaseGradientAdvantages} />
+    </>
+  )
+}

package/src/stories/widgets/Footer.stories.tsx

@@ -0,0 +1,36 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Footer } from '$/widgets'
+
+const meta = {
+  title: 'WIDGETS/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  decorators: [(Story) => <div className='flex min-h-screen min-w-full items-center justify-center'>{Story()}</div>]
+} satisfies Meta<typeof Footer>
+
+export default meta
+
+type Story = StoryObj<typeof Footer>
+
+export const Base: Story = {
+  args: {
+    withLigal: false,
+    withNavLinks: false,
+    withPhones: false,
+    withSiteMap: false
+  }
+}
+
+export const BaseWithLigal: Story = {
+  args: {
+    withNavLinks: false,
+    withPhones: false,
+    withSiteMap: false
+  }
+}
+
+export const Seo: Story = {
+  args: {
+    withLigal: false
+  }
+}

package/src/stories/widgets/PageHeader.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { PageHeader } from '$/widgets'
+
+const meta = {
+  title: 'WIDGETS/PageHeader',
+  component: PageHeader,
+  tags: ['autodocs']
+} satisfies Meta<typeof PageHeader>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const WithPhone: Story = {
+  args: {
+    variant: 'withPhone',
+    phone: '8 800 000-00-00',
+    phoneText: 'Бесплатно по России'
+  }
+}
+
+export const WithButton: Story = {
+  args: {
+    variant: 'withButton'
+  }
+}
+
+export const WithOtherLogo: Story = {
+  args: {
+    variant: 'withButton',
+    logoType: 'business'
+  }
+}

package/src/stories/widgets/Stepper.stories.tsx

@@ -0,0 +1,24 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Stepper } from '$/widgets'
+
+const meta = {
+  title: 'WIDGETS/Stepper',
+  component: Stepper,
+  tags: ['autodocs'],
+  decorators: [(Story) => <div className='flex min-h-screen min-w-full items-center justify-center'>{Story()}</div>]
+} satisfies Meta<typeof Stepper>
+
+export default meta
+
+type Story = StoryObj<typeof Stepper>
+
+export const Base: Story = {
+  args: {
+    heading: 'Как получить кредит',
+    stepsList: [
+      { title: 'Заполните онлайн-заявку', description: 'Это займет несколько минут' },
+      { title: 'Дождитесь одобрения', description: 'Рассмотрим заявку за 5 минут' },
+      { title: 'Заберите деньги', description: 'Или закажите бесплатную доставку' }
+    ]
+  }
+}

package/src/storybookHelpers/actions.tsx

@@ -0,0 +1,5 @@
+import { createElement } from 'react'
+
+export const setTextWithElementSB = (text: string, Element = 'button', className = '') => {
+  return createElement(Element, { className }, text)
+}

package/src/storybookHelpers/index.ts

@@ -0,0 +1,2 @@
+export * from './actions'
+export * from './reactHookForm'

package/src/storybookHelpers/reactHookForm/index.ts

@@ -0,0 +1,3 @@
+export { mockDefaultValues, mockSchema, mockFields, type TMockSchema } from './model/mocks'
+export * from './model/mockData'
+export { StorybookFieldsMapper, StorybookFormProvider } from './ui'

package/src/storybookHelpers/reactHookForm/model/mockData.ts

@@ -0,0 +1,19 @@
+import { type IRadioGroupOption } from '$/shared/ui'
+
+export const MOCK_RADIO_GROUP: IRadioGroupOption[] = [
+  { label: 'Мужской', value: 'male' },
+  { label: 'Женский', value: 'female' }
+]
+
+export const MOCK_SELECT_OPTIONS_REACT_SELECT = [
+  { label: 'Кредит наличными', value: 'cash-credit' },
+  { label: 'Автокредит', value: 'avto-credit' },
+  { label: 'Депозит', value: 'depozit' },
+  { label: 'Кредит на недвижимость', value: 'realty-credit' },
+  { label: 'Кредит на обучение', value: 'education-credit' },
+  { label: 'Кредит на бизнес', value: 'business-credit' },
+  { label: 'Кредит на автомобиль', value: 'car-credit' },
+  { label: 'Кредит на путешествие', value: 'travel-credit' },
+  { label: 'Кредит на покупку земли', value: 'land-credit' },
+  { label: 'Кредит на покупку квартиры', value: 'flat-credit' }
+]