feat(plasma-new-hope): part 24

salute-developers · Jul 16, 2024 · 7597668 · 7597668
1 parent 279c1ff
commit 7597668
Show file tree

Hide file tree

Showing 7 changed files with 971 additions and 0 deletions.
diff --git a/packages/sdds-dfa/api/sdds-dfa.api.md b/packages/sdds-dfa/api/sdds-dfa.api.md
@@ -18,6 +18,7 @@ import { BadgeProps } from '@salutejs/plasma-new-hope/styled-components';
 import { BaseboxProps } from '@salutejs/plasma-new-hope/styled-components';
 import { BaseCallbackChangeInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
 import { BaseCallbackKeyboardInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
+import { BaseProps } from '@salutejs/plasma-new-hope/types/components/Autocomplete/Autocomplete.types';
 import { bodyL } from '@salutejs/sdds-themes/tokens';
 import { bodyLBold } from '@salutejs/sdds-themes/tokens';
 import { bodyM } from '@salutejs/sdds-themes/tokens';
@@ -176,6 +177,7 @@ import { TextAreaPropsExtends } from '@salutejs/plasma-new-hope/types/components
 import { TextFieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/TextField/TextField.types';
 import { TextfieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
 import { TextFieldProps } from '@salutejs/plasma-new-hope/styled-components';
+import { TextFieldPropsBase } from '@salutejs/plasma-new-hope/types/components/TextField/TextField.types';
 import { textFieldTokens } from '@salutejs/plasma-new-hope/styled-components';
 import { textL } from '@salutejs/sdds-themes/tokens';
 import { textLBold } from '@salutejs/sdds-themes/tokens';
@@ -228,6 +230,32 @@ export { addFocus }
 
 export { addNotification }
 
+// @public (undocumented)
+export const Autocomplete: FunctionComponent<PropsType<    {
+view: {
+default: PolymorphicClassName;
+positive: PolymorphicClassName;
+warning: PolymorphicClassName;
+negative: PolymorphicClassName;
+};
+size: {
+l: PolymorphicClassName;
+m: PolymorphicClassName;
+s: PolymorphicClassName;
+xs: PolymorphicClassName;
+};
+labelPlacement: {
+inner: PolymorphicClassName;
+outer: PolymorphicClassName;
+};
+disabled: {
+true: PolymorphicClassName;
+};
+readOnly: {
+true: PolymorphicClassName;
+};
+}> & BaseProps & Omit<TextFieldPropsBase, "enumerationType" | "chips" | "onChangeChips"> & Omit<InputHTMLAttributes_2<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement>>;
+
 // @public (undocumented)
 export const Avatar: FunctionComponent<PropsType<    {
 view: {

diff --git a/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.config.ts
diff --git a/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -0,0 +1,133 @@
+import type { ComponentProps } from 'react';
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { IconPlasma } from '@salutejs/plasma-icons';
+
+import { Autocomplete } from './Autocomplete';
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default', 'positive', 'warning', 'negative'];
+const labelPlacements = ['outer', 'inner'];
+
+const suggestions = [
+    { label: 'Алексей Смирнов' },
+    { label: 'Екатерина Иванова' },
+    { label: 'Дмитрий Петров' },
+    { label: 'Ольга Васильева' },
+    { label: 'Сергей Сидоров' },
+    { label: 'Мария Кузнецова' },
+    { label: 'Андрей Попов' },
+    { label: 'Анна Николаева' },
+    { label: 'Иван Федоров' },
+    { label: 'Наталья Морозова' },
+    { label: 'Михаил Павлов' },
+    { label: 'Елена Романова' },
+    { label: 'Владимир Киселев' },
+    { label: 'Татьяна Захарова' },
+    { label: 'Николай Семенов' },
+    { label: 'Юлия Белова' },
+    { label: 'Александр Гусев' },
+    { label: 'Оксана Яковлева' },
+    { label: 'Игорь Егорова' },
+    { label: 'Вера Тихомирова' },
+    { label: 'Артем Григорьев' },
+    { label: 'Евгения Козлова' },
+    { label: 'Максим Лебедев' },
+    { label: 'Виктория Калашникова' },
+    { label: 'Константин Абрамов' },
+    { label: 'Светлана Новикова' },
+    { label: 'Юрий Волков' },
+    { label: 'Валентина Воробьева' },
+    { label: 'Павел Сергеев' },
+    { label: 'Людмила Виноградова' },
+    { label: 'Антон Соловьев' },
+    { label: 'Маргарита Цветкова' },
+    { label: 'Роман Трофимов' },
+    { label: 'Лариса Зайцева' },
+    { label: 'Евгений Никитин' },
+    { label: 'Галина Михайлова' },
+    { label: 'Владислав Антонов' },
+    { label: 'Дарья Филатова' },
+    { label: 'Олег Буров' },
+    { label: 'Инна Медведева' },
+    { label: 'Вячеслав Крылов' },
+    { label: 'Тамара Беляева' },
+    { label: 'Кирилл Марков' },
+    { label: 'Марина Пономарева' },
+    { label: 'Борис Захаров' },
+    { label: 'Жанна Савельева' },
+    { label: 'Федор Жуков' },
+    { label: 'Елизавета Логинова' },
+    { label: 'Виктор Рыбаков' },
+    { label: 'Лилия Макарова' },
+];
+
+type StoryProps = ComponentProps<typeof Autocomplete> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+
+const meta: Meta<StoryProps> = {
+    title: 'Controls/Autocomplete',
+    decorators: [InSpacingDecorator],
+    component: Autocomplete,
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        view: 'default',
+        size: 'l',
+        labelPlacement: 'outer',
+        disabled: false,
+        readOnly: false,
+        label: 'Label',
+        textBefore: '',
+        textAfter: '',
+        placeholder: 'Заполните поле',
+        leftHelper: 'Введите имя Алексей',
+        listWidth: '100%',
+        listMaxHeight: '200px',
+        threshold: 2,
+        enableContentLeft: true,
+        enableContentRight: true,
+    },
+};
+
+export default meta;
+
+const DefaultStory = (args: StoryProps) => {
+    const { enableContentLeft, enableContentRight } = args;
+
+    const iconSize = args.size === 'xs' ? 'xs' : 's';
+
+    return (
+        <Autocomplete
+            {...args}
+            suggestions={suggestions}
+            contentLeft={enableContentLeft ? <IconPlasma size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <IconPlasma size={iconSize} /> : undefined}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryProps> = {
+    render: (args) => <DefaultStory {...args} />,
+};
diff --git a/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.ts b/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.ts
@@ -0,0 +1,6 @@
+import { autocompleteConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Autocomplete.config';
+
+const mergedConfig = mergeConfig(autocompleteConfig, config);
+export const Autocomplete = component(mergedConfig);
diff --git a/packages/sdds-dfa/src/components/Autocomplete/index.ts b/packages/sdds-dfa/src/components/Autocomplete/index.ts
@@ -0,0 +1 @@
+export { Autocomplete } from './Autocomplete';
diff --git a/packages/sdds-dfa/src/index.ts b/packages/sdds-dfa/src/index.ts
@@ -44,6 +44,7 @@ export * from './components/Notification';
 export * from './components/ButtonBase';
 export * from './components/Skeleton';
 export * from './components/Accordion';
+export * from './components/Autocomplete';
 
 export * from './mixins';
 export * from './tokens';