@kvell-group/ui 1.19.5 → 1.19.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.19.5",
+  "version": "1.19.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kvell-group/ui.git"

package/src/components/Alert/Alert.module.css

@@ -0,0 +1,28 @@
+.root {
+  padding: rem(16px);
+  box-shadow:
+    0px 3px 10px -2px rgba(20, 21, 26, 0.02),
+    0px 10px 16px -3px rgba(20, 21, 26, 0.05);
+
+  &[data-variant='warning'] {
+    --alert-bg: var(--color-background-surface-warning-subtle);
+    --alert-bd: rem(1px) solid var(--color-border-action-normal);
+    --alert-color: var(--color-icon-status-warning);
+  }
+}
+
+.wrapper {
+  align-items: flex-start;
+}
+
+.icon {
+  margin-inline-end: rem(12px);
+}
+
+.message {
+  font-weight: 500;
+  font-size: var(--mantine-font-size-body-s);
+  line-height: var(--mantine-line-height-body-s);
+  letter-spacing: var(--mantine-spacing-body-s);
+  color: var(--color-text-base-primary);
+}

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { KvellUiProvider } from '@/components/KvellUiProvider'
+
+import { theme } from '@/theme'
+import { Alert } from '@/components/Alert'
+import { AlertVariants, WARNING_ALERT_VARIANT } from '@/components/Alert/constants'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Alert',
+  argTypes: { variant: AlertVariants },
+  component: Alert,
+  decorators: (Story) => (
+    <KvellUiProvider theme={theme}>
+      <Story />
+    </KvellUiProvider>
+  ),
+} satisfies Meta<typeof Alert>
+
+type Story = StoryObj<typeof meta>
+
+// ----------------------------------------------------------------------
+
+export const ComponentAlert: Story = {
+  args: {
+    variant: WARNING_ALERT_VARIANT,
+    children: 'Проверьте данные карты перед оплатой',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: AlertVariants,
+    },
+  },
+}
+
+export const WarningAlert: Story = {
+  args: {
+    variant: WARNING_ALERT_VARIANT,
+    children: 'Оплата будет доступна после подтверждения банком',
+  },
+}
+
+export const CustomIconAlert: Story = {
+  args: {
+    icon: null,
+    children: 'Алерт без иконки',
+  },
+}
+
+export const WarningAlertWithoutIcon: Story = {
+  args: {
+    variant: WARNING_ALERT_VARIANT,
+    icon: null,
+    children: 'Алерт с вариантом warning, но без иконки (icon явно передан как null)',
+  },
+}
+
+export const DefaultAlert: Story = {
+  args: {
+    children: 'Алерт без variant и без icon — прозрачный фон, без иконки',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react'
+import { Alert as MantineAlert } from '@mantine/core'
+import type { AlertProps as MantineAlertProps } from '@mantine/core'
+import { RiErrorWarningFill } from '@remixicon/react'
+import classNames from './Alert.module.css'
+import { WARNING_ALERT_VARIANT } from './constants'
+import type { ExtendedAlertVariant } from './types'
+
+// ----------------------------------------------------------------------
+
+export type AlertProps = Omit<MantineAlertProps, 'variant'> & { variant?: ExtendedAlertVariant }
+
+const variantIcons: Partial<Record<ExtendedAlertVariant & string, React.ReactNode>> = {
+  [WARNING_ALERT_VARIANT]: <RiErrorWarningFill size={20} />,
+}
+
+// ----------------------------------------------------------------------
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const { variant, icon, ...others } = props
+
+  const resolvedIcon = icon === undefined ? (variant ? variantIcons[variant] : null) : icon
+
+  return (
+    <MantineAlert
+      ref={ref}
+      variant={variant ?? 'transparent'}
+      icon={resolvedIcon}
+      {...others}
+      classNames={classNames}
+    />
+  )
+})

package/src/components/Alert/constants.ts

@@ -0,0 +1,3 @@
+export const WARNING_ALERT_VARIANT = 'warning' as const
+
+export const AlertVariants = [WARNING_ALERT_VARIANT]

package/src/components/Alert/index.ts

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

package/src/components/Alert/types.ts

@@ -0,0 +1,8 @@
+import { AlertVariants } from './constants'
+import type { AlertProps as MantineAlertProps } from '@mantine/core'
+
+// ----------------------------------------------------------------------
+
+type AlertVariantsType = typeof AlertVariants
+
+export type ExtendedAlertVariant = MantineAlertProps['variant'] | AlertVariantsType[number]

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

@@ -0,0 +1,3 @@
+.root .section {
+  --right-section-end: rem(3px);
+}

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

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { KvellUiProvider } from '@/components/KvellUiProvider'
+import { Text } from '@/components/Text'
+
+import { theme } from '@/theme'
+import { AutocompleteSelect as AutocompleteSelectComponent } from '@/components/Inputs/AutocompleteSelect'
+
+const data = ['React', 'Angular', 'Vue', 'Svelte', 'Solid', 'Ember']
+
+const options: { value: string; label: string }[] = [
+  { value: 'react', label: 'React' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'vue', label: 'Vue' },
+  { value: 'svelte', label: 'Svelte' },
+]
+
+const AutocompleteSelectWithLabelValueWrapper = () => {
+  const [label, setLabel] = useState('')
+  const [value, setValue] = useState<string | null>(null)
+
+  const handleChange = (nextLabel: string) => {
+    setLabel(nextLabel)
+    setValue(options.find((option) => option.label === nextLabel)?.value ?? null)
+  }
+
+  return (
+    <div style={{ maxWidth: '465px' }}>
+      <AutocompleteSelectComponent
+        label='Фреймворк'
+        placeholder='Выберите или введите значение'
+        data={options.map((option) => option.label)}
+        value={label}
+        onChange={handleChange}
+      />
+      <Text
+        variant='caption-l-regular'
+        mt='sm'
+        display='block'
+      >
+        Выбранное value: {value ?? '—'}
+      </Text>
+    </div>
+  )
+}
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Inputs/AutocompleteSelect',
+  component: AutocompleteSelectComponent,
+  decorators: (Story) => (
+    <KvellUiProvider theme={theme}>
+      <div style={{ maxWidth: '465px' }}>
+        <Story />
+      </div>
+    </KvellUiProvider>
+  ),
+} satisfies Meta<typeof AutocompleteSelectComponent>
+
+type Story = StoryObj<typeof AutocompleteSelectComponent>
+
+// ----------------------------------------------------------------------
+
+export const AutocompleteSelect: Story = {
+  args: {
+    placeholder: 'Выберите или введите значение',
+    label: 'Фреймворк',
+    data,
+  },
+}
+
+export const AutocompleteSelectError: Story = {
+  args: {
+    placeholder: 'Выберите или введите значение',
+    label: 'Фреймворк',
+    data,
+    error: 'Значение не найдено в списке',
+  },
+}
+
+export const AutocompleteSelectWithLabelValue: Story = {
+  render: () => <AutocompleteSelectWithLabelValueWrapper />,
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Inputs/AutocompleteSelect/AutocompleteSelect.tsx

@@ -0,0 +1,20 @@
+import { Autocomplete as MantineAutocomplete } from '@mantine/core'
+import clsx from 'clsx'
+import inputClassNames from '../Input/Input.module.css'
+import autocompleteSelectClassNames from './AutocompleteSelect.module.css'
+
+// ----------------------------------------------------------------------
+
+const classNames = {
+  ...inputClassNames,
+  root: clsx(autocompleteSelectClassNames.root, inputClassNames.root),
+  section: clsx(autocompleteSelectClassNames.section, inputClassNames.section),
+}
+
+// ----------------------------------------------------------------------
+
+export const AutocompleteSelect = MantineAutocomplete.withProps({
+  classNames,
+  inputWrapperOrder: ['label', 'input', 'error', 'description'],
+  comboboxProps: { floatingStrategy: 'fixed' },
+})

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

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

package/src/index.ts

@@ -14,6 +14,7 @@ export { CardExpireDateInput } from './components/Inputs/CardExpireDateInput'
 export { Checkbox } from './components/Inputs/Checkbox'
 export { Switch } from './components/Inputs/Switch'
 export { Select } from './components/Inputs/Select'
+export { AutocompleteSelect } from './components/Inputs/AutocompleteSelect'
 export { Textarea } from './components/Inputs/Textarea'
 export { DatesProvider } from './components/DatesProvider'
 export * from './components/Inputs/DatePickerInput'
@@ -21,6 +22,7 @@ export { PinInput } from './components/Inputs/PinInput'
 export * from './components/Notifications'
 
 //components
+export { Alert } from './components/Alert'
 export * from './components/Button'
 export { CardLogoByPan } from './components/CardLogoByPan'
 export { Loader } from './components/Loader'