From f06cfe0a4f3198cf91983ac1e8bd2f41fb07051d Mon Sep 17 00:00:00 2001 From: Alexandr Isaev Date: Tue, 6 Aug 2024 12:26:17 +0300 Subject: [PATCH 1/4] feat(TreeSelect): simple docs to start --- .../TreeSelect/__stories__/Docs.mdx | 7 +++ .../TreeSelect/__stories__/TreeSelectDocs.md | 63 +++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 src/components/TreeSelect/__stories__/Docs.mdx create mode 100644 src/components/TreeSelect/__stories__/TreeSelectDocs.md diff --git a/src/components/TreeSelect/__stories__/Docs.mdx b/src/components/TreeSelect/__stories__/Docs.mdx new file mode 100644 index 0000000000..b4a9f2dc19 --- /dev/null +++ b/src/components/TreeSelect/__stories__/Docs.mdx @@ -0,0 +1,7 @@ +import {Meta, Markdown} from '@storybook/addon-docs'; + +import TreeSelectDocs from './TreeSelectDocs.md?raw'; + + + +{TreeSelectDocs} diff --git a/src/components/TreeSelect/__stories__/TreeSelectDocs.md b/src/components/TreeSelect/__stories__/TreeSelectDocs.md new file mode 100644 index 0000000000..eb54185ecc --- /dev/null +++ b/src/components/TreeSelect/__stories__/TreeSelectDocs.md @@ -0,0 +1,63 @@ +# TreeList + +Rewritten component [Select]() without feature-specific logic using TreeList inside. + +`Storybook` provides complex examples how to use this components from this documentation. + +### Import: + +```tsx +import {unstable_TreeSelect as TreeSelect} from '@gravity-ui/uikit/unstable'; +``` + +### Basic example: + +```tsx +import { + type unstable_ListItemType as ListItemType, + unstable_TreeSelect as TreeSelect, + unstable_useList as useList, +} from '@gravity-ui/uikit/unstable'; + +const items: ListItemType[] = ['one', 'two', 'free', 'four', 'five']; + + ({title: item})} />; +``` + +### With full list item view override: + +```tsx +import {Text} from '@gravity-ui/uikit'; +import { + type unstable_ListItemType as ListItemType, + type unstable_ListItemView as ListItemView, + unstable_TreeList as TreeList, + unstable_useList as useList, +} from '@gravity-ui/uikit/unstable'; + +interface Entity { + id: string; + title: string; +} + +const items: ListItemType<>[] = [ + {title: 'one', id: '1'}, + {title: 'two', id: '2'}, + {title: 'free', id: '3'}, + {title: 'four', id: '4'}, + {title: 'five', id: '5'}, +]; + +const Component = () => { + return ( + id} + mapItemDataToContentProps={({title}) => ({title})} + renderItem={({data: {title}, props}) => ( + {title}} /> + )} + /> + ); +}; +``` From 2ddd24d731d32da6f4ea2d8248a9344d80b23fea Mon Sep 17 00:00:00 2001 From: Alexandr Isaev Date: Tue, 6 Aug 2024 14:32:58 +0300 Subject: [PATCH 2/4] fix: add missed link --- src/components/TreeSelect/__stories__/TreeSelectDocs.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/TreeSelect/__stories__/TreeSelectDocs.md b/src/components/TreeSelect/__stories__/TreeSelectDocs.md index eb54185ecc..2cbae4c1a6 100644 --- a/src/components/TreeSelect/__stories__/TreeSelectDocs.md +++ b/src/components/TreeSelect/__stories__/TreeSelectDocs.md @@ -1,6 +1,6 @@ # TreeList -Rewritten component [Select]() without feature-specific logic using TreeList inside. +Rewritten component [Select](https://preview.gravity-ui.com/uikit/?path=/docs/components-inputs-select--docs) without feature-specific logic using TreeList inside. `Storybook` provides complex examples how to use this components from this documentation. @@ -16,7 +16,6 @@ import {unstable_TreeSelect as TreeSelect} from '@gravity-ui/uikit/unstable'; import { type unstable_ListItemType as ListItemType, unstable_TreeSelect as TreeSelect, - unstable_useList as useList, } from '@gravity-ui/uikit/unstable'; const items: ListItemType[] = ['one', 'two', 'free', 'four', 'five']; @@ -32,7 +31,6 @@ import { type unstable_ListItemType as ListItemType, type unstable_ListItemView as ListItemView, unstable_TreeList as TreeList, - unstable_useList as useList, } from '@gravity-ui/uikit/unstable'; interface Entity { From d3f0d44f7a5affe52402115fa8984038ed261dbc Mon Sep 17 00:00:00 2001 From: Alexandr Isaev Date: Tue, 6 Aug 2024 14:34:35 +0300 Subject: [PATCH 3/4] fix: change component name --- src/components/TreeSelect/__stories__/TreeSelectDocs.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/TreeSelect/__stories__/TreeSelectDocs.md b/src/components/TreeSelect/__stories__/TreeSelectDocs.md index 2cbae4c1a6..8382e130f4 100644 --- a/src/components/TreeSelect/__stories__/TreeSelectDocs.md +++ b/src/components/TreeSelect/__stories__/TreeSelectDocs.md @@ -20,7 +20,7 @@ import { const items: ListItemType[] = ['one', 'two', 'free', 'four', 'five']; - ({title: item})} />; + ({title: item})} />; ``` ### With full list item view override: @@ -30,7 +30,7 @@ import {Text} from '@gravity-ui/uikit'; import { type unstable_ListItemType as ListItemType, type unstable_ListItemView as ListItemView, - unstable_TreeList as TreeList, + unstable_TreeSelect as TreeSelect, } from '@gravity-ui/uikit/unstable'; interface Entity { @@ -48,8 +48,8 @@ const items: ListItemType<>[] = [ const Component = () => { return ( - id} mapItemDataToContentProps={({title}) => ({title})} renderItem={({data: {title}, props}) => ( From 52b85a00361a533323d1cc92aeb8b00c0834cd77 Mon Sep 17 00:00:00 2001 From: Alexandr Isaev Date: Tue, 6 Aug 2024 14:40:16 +0300 Subject: [PATCH 4/4] fix: add missing type in generic --- src/components/TreeSelect/__stories__/TreeSelectDocs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TreeSelect/__stories__/TreeSelectDocs.md b/src/components/TreeSelect/__stories__/TreeSelectDocs.md index 8382e130f4..1977b6d86e 100644 --- a/src/components/TreeSelect/__stories__/TreeSelectDocs.md +++ b/src/components/TreeSelect/__stories__/TreeSelectDocs.md @@ -38,7 +38,7 @@ interface Entity { title: string; } -const items: ListItemType<>[] = [ +const items: ListItemType[] = [ {title: 'one', id: '1'}, {title: 'two', id: '2'}, {title: 'free', id: '3'},