@kvell-group/ui 1.14.2 → 1.15.1

package/src/components/Inputs/Input.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+import { Input as InputComponent } from '@/components/Inputs/Input'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Inputs/Input',
+  component: InputComponent,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <div style={{ maxWidth: '465px' }}>
+        <Story />
+      </div>
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof InputComponent>
+
+type Story = StoryObj<typeof InputComponent>
+
+// ----------------------------------------------------------------------
+
+export const Input: Story = {
+  args: {
+    placeholder: 'IVAN IVANOV',
+    label: 'Имя на карте',
+  },
+}
+
+export const InputError: Story = {
+  args: {
+    placeholder: 'IVAN IVANOV',
+    label: 'Имя на карте',
+    error: 'Неправильный формат имени',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Inputs/Input.tsx

@@ -0,0 +1,20 @@
+import { TextInput } from '@mantine/core'
+import classNames from './Input.module.css'
+import textClassNames from '../../styles/typography.module.css'
+import clsx from 'clsx'
+import { CAPTION_L_REGULAR_FONT_VARIANT } from '../../constants/font-variants'
+
+// ----------------------------------------------------------------------
+
+const { input, error, ...restClassNames } = classNames
+
+const captionLRegular = textClassNames[CAPTION_L_REGULAR_FONT_VARIANT]
+
+const inputClassNames = clsx(input, captionLRegular)
+const errorClassNames = clsx(error, captionLRegular)
+
+// ----------------------------------------------------------------------
+
+export const Input = TextInput.withProps({
+  classNames: { ...restClassNames, input: inputClassNames, error: errorClassNames },
+})

package/src/components/Inputs/MaskedInput/MaskedInput.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+import { MaskedInput as MaskedInputComponent } from '@/components/Inputs/MaskedInput'
+import CalendarSVG from '@/assets/calendar.svg'
+import { CARD_EXPIRY_DATE_MASK, PHONE_MASK } from '@/constants/masks'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Inputs/MaskedInput',
+  component: MaskedInputComponent,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <div style={{ maxWidth: '304px' }}>
+        <Story />
+      </div>
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof MaskedInputComponent>
+
+type Story = StoryObj<typeof MaskedInputComponent>
+
+// ----------------------------------------------------------------------
+
+export const MaskedInput: Story = {
+  args: {
+    mask: PHONE_MASK,
+    value: '77777777777',
+    label: 'Номер телефона',
+  },
+}
+
+export const MaskedInputExpiryDate: Story = {
+  args: {
+    leftSection: <CalendarSVG />,
+    mask: CARD_EXPIRY_DATE_MASK,
+    value: '1225',
+    label: 'Срок действия',
+  },
+}
+
+export const MaskedInputExpiryDateError: Story = {
+  args: {
+    leftSection: <CalendarSVG />,
+    mask: CARD_EXPIRY_DATE_MASK,
+    value: '0120',
+    label: 'Срок действия',
+    error: 'Срок действия карты истёк',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Inputs/MaskedInput/MaskedInput.tsx

@@ -0,0 +1,16 @@
+import { IMaskInput } from 'react-imask'
+import { Input } from '../Input'
+import { forwardRef } from 'react'
+import type { MaskedInputProps } from '../types'
+
+// ----------------------------------------------------------------------
+
+export const MaskedInput = forwardRef<HTMLInputElement, MaskedInputProps>((props, ref) => {
+  return (
+    <Input
+      ref={ref}
+      component={IMaskInput}
+      {...props}
+    />
+  )
+})

package/src/components/Inputs/MaskedInput/index.ts

@@ -0,0 +1 @@
+export { MaskedInput } from './MaskedInput'

package/src/components/Inputs/PasswordInput/PasswordInput.module.css

@@ -0,0 +1,3 @@
+.section[data-position='right'] {
+  margin-right: 0;
+}

package/src/components/Inputs/PasswordInput/PasswordInput.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+import { PasswordInput as PasswordInputComponent } from '@/components/Inputs/PasswordInput/PasswordInput'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Inputs/PasswordInput',
+  component: PasswordInputComponent,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <div style={{ maxWidth: '465px' }}>
+        <Story />
+      </div>
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof PasswordInputComponent>
+
+type Story = StoryObj<typeof PasswordInputComponent>
+
+// ----------------------------------------------------------------------
+
+export const PasswordInput: Story = {
+  args: {
+    label: 'Введите пароль',
+  },
+}
+
+export const PasswordInputError: Story = {
+  args: {
+    label: 'Введите пароль',
+    error: 'Неверный пароль',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Inputs/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,26 @@
+import { PasswordInput as PasswordInputBase } from '@mantine/core'
+import classNames from '../Input.module.css'
+import sectionClassNames from './PasswordInput.module.css'
+import textClassNames from '../../../styles/typography.module.css'
+import clsx from 'clsx'
+import { CAPTION_L_REGULAR_FONT_VARIANT } from '../../../constants/font-variants'
+
+// ----------------------------------------------------------------------
+
+const { input, error, ...restClassNames } = classNames
+
+const captionLRegular = textClassNames[CAPTION_L_REGULAR_FONT_VARIANT]
+
+const inputClassNames = clsx(input, captionLRegular)
+const errorClassNames = clsx(error, captionLRegular)
+
+// ----------------------------------------------------------------------
+
+export const PasswordInput = PasswordInputBase.withProps({
+  classNames: {
+    ...restClassNames,
+    input: inputClassNames,
+    error: errorClassNames,
+    section: sectionClassNames.section,
+  },
+})

package/src/components/Inputs/PasswordInput/index.ts

@@ -0,0 +1 @@
+export { PasswordInput } from './PasswordInput'

package/src/components/Inputs/index.ts

@@ -0,0 +1 @@
+export { Input } from './Input'

package/src/components/Inputs/types.ts

@@ -0,0 +1,6 @@
+import type { TextInputProps } from '@mantine/core'
+import type { IMaskInputProps } from 'react-imask'
+
+// ----------------------------------------------------------------------
+
+export type MaskedInputProps = IMaskInputProps<HTMLInputElement> & TextInputProps

package/src/components/Loader/Loader.module.css

@@ -0,0 +1,46 @@
+.container {
+  position: relative;
+  display: inline-block;
+
+  &[data-size='auto'] {
+    width: 100%;
+    height: 100%;
+  }
+
+  &[data-size='sm'] {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  &[data-size='md'] {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  &[data-size='lg'] {
+    width: 4rem;
+    height: 4rem;
+  }
+}
+
+.part {
+  position: absolute;
+  left: 45%;
+  top: 36%;
+  width: 8%;
+  height: 26%;
+  background: var(--mantine-color-typography-secondary-0);
+  opacity: 0;
+  border-radius: 3rem;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
+}

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+import { Loader } from '@/components/Loader'
+import { LoaderSizes } from '@/components/Loader/constants'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Loader',
+  component: Loader,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <div style={{ width: '120px', height: '120px', backgroundColor: 'whitesmoke' }}>
+        <Story />
+      </div>
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof Loader>
+
+type Story = StoryObj<typeof meta>
+
+// ----------------------------------------------------------------------
+
+export const ComponentLoader: Story = {
+  argTypes: {
+    size: {
+      control: 'select',
+      options: LoaderSizes,
+    },
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,36 @@
+import { LoaderSizes } from './constants'
+import classnames from './Loader.module.css'
+
+// ----------------------------------------------------------------------
+
+type LoaderSizesTypes = typeof LoaderSizes
+
+// ----------------------------------------------------------------------
+
+const calculateStyle = (i: number): React.CSSProperties => ({
+  transform: `rotate(${(i * 360) / 8}deg) translate(0, -130%)`,
+  animationDelay: `${-(8 - i) * 0.125}s`,
+})
+
+// ----------------------------------------------------------------------
+
+type LoaderProps = {
+  size?: LoaderSizesTypes[number]
+}
+
+export const Loader = ({ size = 'auto' }: LoaderProps) => (
+  <div
+    className={classnames.container}
+    data-size={size}
+  >
+    {Array(8)
+      .fill(0)
+      .map((_, index) => (
+        <div
+          className={classnames.part}
+          key={index}
+          style={calculateStyle(index)}
+        />
+      ))}
+  </div>
+)

package/src/components/Loader/constants.ts

@@ -0,0 +1,8 @@
+export const LOADER_SIZE_AUTO = 'auto'
+export const LOADER_SIZE_SM = 'sm'
+export const LOADER_SIZE_MD = 'md'
+export const LOADER_SIZE_LG = 'lg'
+
+// ----------------------------------------------------------------------
+
+export const LoaderSizes = [LOADER_SIZE_AUTO, LOADER_SIZE_SM, LOADER_SIZE_MD, LOADER_SIZE_LG]

package/src/components/Loader/index.ts

@@ -0,0 +1 @@
+export { Loader } from './Loader'

package/src/components/MainProvider/MantineProvider.tsx

@@ -0,0 +1,15 @@
+import { MantineProvider as MantineProviderCore } from '@mantine/core'
+import type { MantineProviderProps } from '@mantine/core'
+
+// ----------------------------------------------------------------------
+
+export function MantineProvider({ children, theme, ...restProps }: MantineProviderProps) {
+  return (
+    <MantineProviderCore
+      theme={theme}
+      {...restProps}
+    >
+      {children}
+    </MantineProviderCore>
+  )
+}

package/src/components/MainProvider/index.ts

@@ -0,0 +1 @@
+export { MantineProvider } from './MantineProvider'

package/src/components/Modal/Modal.module.css

@@ -0,0 +1,43 @@
+.root {
+  box-shadow: var(--mantine-shadows-lg);
+  width: 100%;
+}
+
+.content {
+  border-radius: var(--mantine-radius-xl);
+  border: 1px solid var(--mantine-color-border-action-normal-0);
+  white-space: pre-wrap;
+  padding: 0.5rem;
+
+  @media (max-width: $mantine-breakpoint-xs) {
+    width: 100%;
+    border-radius: var(--mantine-radius-xl) var(--mantine-radius-xl) 0 0;
+  }
+}
+
+.header {
+  padding-bottom: 0.25rem;
+}
+
+.inner {
+  @media (max-width: $mantine-breakpoint-xs) {
+    align-items: end;
+    padding: 0;
+    width: 100%;
+  }
+}
+
+button.close {
+  position: absolute;
+  right: 0.25rem;
+  top: 0.4rem;
+  display: flex;
+  background-color: var(--mantine-color-background-button-tertiary-0);
+  border-radius: 50%;
+  --cb-size: 1.5rem;
+
+  & > svg {
+    color: var(--mantine-color-icon-base-secondary-0);
+    scale: 0.75;
+  }
+}

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+import { Text } from '@/components/Text'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+import { Modal } from '@/components/Modal'
+import { Button } from '@/components/Button'
+
+import { useDisclosure } from '@mantine/hooks'
+import { Flex } from '@mantine/core'
+
+// ----------------------------------------------------------------------
+
+const ModalWrapper = () => {
+  const [opened, { open, close }] = useDisclosure(true)
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={'Невозможно сменить \nспособ оплаты'}
+      >
+        <Text
+          variant='caption-l-regular'
+          c='text-base-secondary.0'
+          mb='1.5rem'
+          display='block'
+        >
+          Чтобы оплатить другим способом, необходимо <br />
+          вернуться на сайт и повторить платёж
+        </Text>
+        <Flex gap='sm'>
+          <Button
+            variant='secondary'
+            size='xs'
+            fullWidth
+          >
+            Вернуться на сайт
+          </Button>
+          <Button
+            variant='primary'
+            size='xs'
+            fullWidth
+          >
+            Остаться
+          </Button>
+        </Flex>
+      </Modal>
+
+      <Button
+        variant='default'
+        onClick={open}
+      >
+        Открыть модальное окно
+      </Button>
+    </>
+  )
+}
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Modal',
+  component: ModalWrapper,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <Story />
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof ModalWrapper>
+
+type Story = StoryObj<typeof meta>
+
+// ----------------------------------------------------------------------
+
+export const ComponentCardInput: Story = {}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,10 @@
+import { Modal as ModalBase } from '@mantine/core'
+import classNames from './Modal.module.css'
+import textClassNames from '../../styles/typography.module.css'
+import { BODY_M_MEDIUM_FONT_VARIANT } from '../../constants/font-variants'
+
+// ----------------------------------------------------------------------
+
+export const Modal = ModalBase.withProps({
+  classNames: { ...classNames, title: textClassNames[BODY_M_MEDIUM_FONT_VARIANT] },
+})

package/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal'

package/src/components/Switch/Switch.module.css

@@ -0,0 +1,28 @@
+.track {
+  --switch-height: 1rem;
+  --switch-width: rem(28px);
+  --switch-color: var(--mantine-color-background-toggle-active-0);
+
+  input:not(:checked) + & {
+    background-color: var(--mantine-color-background-toggle-default-0);
+  }
+}
+
+.description {
+  margin-top: -1px;
+  --label-offset-start: 1rem;
+  color: var(--mantine-color-primary);
+}
+
+.error {
+  color: var(--mantine-color-text-status-destructive-0);
+  padding-left: 0.25rem;
+  margin-top: 0;
+
+  &::before {
+    content: url('../../assets/error.svg');
+    position: relative;
+    top: 3px;
+    left: -0.25rem;
+  }
+}

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+import { Switch } from '@/components/Switch'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Switch',
+  component: Switch,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <Story />
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof Switch>
+
+type Story = StoryObj<typeof Switch>
+
+// ----------------------------------------------------------------------
+
+export const ComponentSwitch: Story = {
+  args: {
+    description: 'Сохранить карту в KVELL.Pay',
+  },
+  argTypes: {
+    checked: { control: 'boolean' },
+    error: {
+      control: 'text',
+    },
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,19 @@
+import { Switch as SwitchBase } from '@mantine/core'
+import classes from './Switch.module.css'
+import textClassNames from '../../styles/typography.module.css'
+import clsx from 'clsx'
+import { CAPTION_L_MEDIUM_FONT_VARIANT } from '../../constants/font-variants'
+
+// ----------------------------------------------------------------------
+
+const descriptionClassName = clsx(
+  classes.description,
+  textClassNames[CAPTION_L_MEDIUM_FONT_VARIANT]
+)
+
+// ----------------------------------------------------------------------
+
+export const Switch = SwitchBase.withProps({
+  classNames: { ...classes, description: descriptionClassName },
+  size: 'xs',
+})

package/src/components/Switch/index.tsx

@@ -0,0 +1 @@
+export { Switch } from './Switch'

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+import { Text } from '@/components/Text/Text'
+import { FontVariants } from '@/constants/font-variants'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Text',
+  component: Text,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <Story />
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof Text>
+
+type Story = StoryObj<typeof meta>
+
+// ----------------------------------------------------------------------
+
+export const ComponentText: Story = {
+  args: {
+    children: 'Компонент типографии',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: FontVariants,
+    },
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta