feat(sdds-cs): update docs for combobox and autocomplite

salute-developers · Oct 31, 2024 · aaccd3d · aaccd3d
1 parent 0808d55
commit aaccd3d
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 28 deletions.
diff --git a/packages/sdds-cs/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/sdds-cs/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -1,7 +1,7 @@
 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 { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 import { IconPlasma } from '@salutejs/plasma-icons';
 
 import { Autocomplete } from './Autocomplete';
@@ -73,24 +73,13 @@ const meta: Meta<StoryProps> = {
     decorators: [InSpacingDecorator],
     component: Autocomplete,
     argTypes: {
+        ...disableProps(['size', 'labelPlacement']),
         view: {
             options: views,
             control: {
                 type: 'select',
             },
         },
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        labelPlacement: {
-            options: labelPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-        },
     },
     args: {
         view: 'default',

diff --git a/packages/sdds-cs/src/components/Combobox/Combobox.stories.tsx b/packages/sdds-cs/src/components/Combobox/Combobox.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 import { IconDone } from '@salutejs/plasma-icons';
 
 import { Combobox } from './Combobox';
@@ -11,8 +11,6 @@ type StorySelectProps = ComponentProps<typeof Combobox> & {
 };
 
 const view = ['default', 'negative'];
-const size = ['s'];
-const labelPlacement = ['outer'];
 const chip = ['default', 'secondary', 'accent'];
 const variant = ['normal', 'tight'];
 
@@ -21,24 +19,13 @@ const meta: Meta<StorySelectProps> = {
     decorators: [InSpacingDecorator],
     component: Combobox,
     argTypes: {
-        size: {
-            options: size,
-            control: {
-                type: 'select',
-            },
-        },
+        ...disableProps(['size', 'labelPlacement']),
         view: {
             options: view,
             control: {
                 type: 'select',
             },
         },
-        labelPlacement: {
-            options: labelPlacement,
-            control: {
-                type: 'select',
-            },
-        },
         chipView: {
             options: chip,
             control: {

diff --git a/website/sdds-cs-docs/docs/components/Autocomplete.mdx b/website/sdds-cs-docs/docs/components/Autocomplete.mdx
@@ -106,6 +106,73 @@ type SuggestionItem = {
         }
         ```
     </TabItem>
+    <TabItem value="negative" label="Negative">
+        ```tsx live
+        import React from 'react';
+        import { Autocomplete } from '@salutejs/sdds-cs';
+
+        export function App() {
+            const mockData = [
+                { 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: 'Лилия Макарова' },
+            ];
+
+            return (
+                <div style={{ display: 'block', height:"400px" }}>
+                    <Autocomplete view="negative" suggestions={mockData} listMaxHeight="250px" label="Label" placeholder="Placeholder" leftHelper="Введите имя Алексей" />
+                </div>
+            );
+        }
+        ```
+    </TabItem>
     <TabItem value="controlled" label="Controlled">
         ```tsx live
         import React from 'react';

diff --git a/website/sdds-cs-docs/docs/components/Combobox.mdx b/website/sdds-cs-docs/docs/components/Combobox.mdx
@@ -143,6 +143,53 @@ type Items = Array<{
         }
         ```
     </TabItem>
+    <TabItem value="negative" label="Negative">
+        ```tsx live
+        import React from 'react';
+        import { Combobox } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [value, setValue] = useState('');
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
+                    <div style={{ width: "300px" }}>
+                        <Combobox
+                            items={items}
+                            value={value}
+                            onChange={setValue}
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                            view="negative"
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
     <TabItem value="predefined" label="Predefined">
         Есть возможность задать значения по дефолту (главное, чтобы они находились в `items`). Также можно управлять состоянием снаружи селекта.