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..1977b6d86e --- /dev/null +++ b/src/components/TreeSelect/__stories__/TreeSelectDocs.md @@ -0,0 +1,61 @@ +# TreeList + +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. + +### 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, +} 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_TreeSelect as TreeSelect, +} 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}} /> + )} + /> + ); +}; +```