@salutejs/sdds-serv 0.314.0-canary.2020.15831403447.0 → 0.314.0-canary.2021.15776478579.0

package/emotion/es/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { IconDisclosureRight } from '@salutejs/plasma-icons';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import { Button } from '../Button/Button';
+
+import { Tooltip } from '.';
+import type { TooltipProps } from '.';
+
+const placements: Array<string> = [
+    'top',
+    'top-start',
+    'top-end',
+
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+
+    'left',
+    'left-start',
+    'left-end',
+
+    'right',
+    'right-start',
+    'right-end',
+
+    'auto',
+];
+
+const disabledProps = [
+    'target',
+    'children',
+    'text',
+    'opened',
+    'isOpen',
+    'isVisible',
+    'offset',
+    'frame',
+    'view',
+    'zIndex',
+    'minWidth',
+    'maxWidth',
+    'contentLeft',
+    'onDismiss',
+];
+const meta: Meta<TooltipProps> = {
+    title: 'Overlay/Tooltip',
+    decorators: [InSpacingDecorator],
+    component: Tooltip,
+};
+
+export default meta;
+
+const StyledGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-gap: 1rem 3.5rem;
+    padding: 3.5rem;
+`;
+
+const StoryDefault = (props: Pick<TooltipProps, 'hasArrow' | 'size' | 'usePortal'>) => {
+    return (
+        <StyledGrid>
+            <Tooltip
+                target={<Tooltip target={<Button>Btn</Button>} placement="left" opened text="left" {...props} />}
+                placement="top-start"
+                opened
+                text="top-start"
+                view="default"
+                {...props}
+            />
+            <Tooltip target={<Button>Btn</Button>} placement="top" opened text="top" {...props} />
+            <Tooltip
+                target={<Tooltip target={<Button>Btn</Button>} placement="right" opened text="right" {...props} />}
+                placement="top-end"
+                opened
+                text="top-end"
+                {...props}
+            />
+            <Tooltip target={<Button>Btn</Button>} placement="bottom-start" opened text="bottom-start" {...props} />
+            <Tooltip target={<Button>Btn</Button>} placement="bottom" opened text="bottom" {...props} />
+            <Tooltip target={<Button>Btn</Button>} placement="bottom-end" opened text="bottom-end" {...props} />
+        </StyledGrid>
+    );
+};
+
+export const Default: StoryObj<TooltipProps> = {
+    argTypes: {
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps([...disabledProps, 'placement']),
+    },
+    args: {
+        maxWidth: 10,
+        minWidth: 3,
+        hasArrow: true,
+        usePortal: false,
+        animated: true,
+        size: 'm',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StyledRow = styled.div`
+    display: flex;
+    width: 150vw;
+    height: 150vh;
+    padding: 10rem;
+`;
+
+const StoryLive = (args: TooltipProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <>
+            <StyledRow>
+                <Tooltip
+                    target={<Button onClick={() => setIsOpen(!isOpen)}>Show tooltip</Button>}
+                    contentLeft={<IconDisclosureRight size="xs" />}
+                    {...args}
+                    id="example-tooltip-firstname"
+                    text="Tooltip text"
+                    opened={isOpen}
+                />
+            </StyledRow>
+        </>
+    );
+};
+
+export const Live: StoryObj<TooltipProps> = {
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+            mapping: placements,
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(disabledProps),
+    },
+    args: {
+        placement: 'bottom',
+        maxWidth: 10,
+        minWidth: 3,
+        hasArrow: true,
+        usePortal: false,
+        animated: true,
+        size: 'm',
+    },
+    render: (args) => <StoryLive {...args} />,
+};

package/emotion/es/components/Tooltip/index.js

@@ -1 +1 @@
-export { Tooltip } from './Tooltip';
+export { Tooltip } from './Tooltip';

package/emotion/es/components/Tree/Tree.config.js

@@ -1,171 +1,20 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-secondary-hover);\n                ",
-        ": var(--text-secondary-active);\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-secondary);\n                ",
-        ": var(--surface-transparent-secondary-hover);\n                ",
-        ": var(--surface-transparent-secondary-active);\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-accent);\n                ",
-        ": 0.4;\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-secondary);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 3.5rem;\n                ",
-        ": 1rem;\n                ",
-        ": 0.375rem;\n                ",
-        ": 2rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0 0.5rem 0 0;\n                ",
-        ": 0 0.5rem 0 0;\n                ",
-        ": 0 0 0 0.5rem;\n                ",
-        ": 1.5rem;\n                ",
-        ": 0 0.5rem 0 0;\n                ",
-        ": 1.5rem;\n                ",
-        ": 1.25rem;\n                ",
-        ": 0.375rem;\n\n                ",
-        ": var(--plasma-typo-body-l-font-family);\n                ",
-        ": var(--plasma-typo-body-l-font-size);\n                ",
-        ": var(--plasma-typo-body-l-font-style);\n                ",
-        ": var(--plasma-typo-body-l-font-weight);\n                ",
-        ": var(--plasma-typo-body-l-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-l-line-height);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 3rem;\n                ",
-        ": 0.875rem;\n                ",
-        ": 0.375rem;\n                ",
-        ": 2rem;\n                ",
-        ": 0.625rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0 0.5rem 0 0;\n                ",
-        ": 0 0.5rem 0 0;\n                ",
-        ": 0 0 0 0.5rem;\n                ",
-        ": 1.5rem;\n                ",
-        ": 0 0.5rem 0 0;\n                ",
-        ": 1.5rem;\n                ",
-        ": 1.25rem;\n                ",
-        ": 0.375rem;\n\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 2.5rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 1.875rem;\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0 0.375rem 0 0;\n                ",
-        ": 0 0.375rem 0 0;\n                ",
-        ": 0 0 0 0.375rem;\n                ",
-        ": 1.5rem;\n                ",
-        ": 0 0.25rem 0 0;\n                ",
-        ": 1.5rem;\n                ",
-        ": 1.25rem;\n                ",
-        ": 0.375rem;\n\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 2rem;\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.125rem;\n                ",
-        ": 1.25rem;\n                ",
-        ": 0.375rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0 0.25rem 0 0;\n                ",
-        ": 0 0.25rem 0 0;\n                ",
-        ": 0 0 0 0.25rem;\n                ",
-        ": 1rem;\n                ",
-        ": 0 0.25rem 0 0;\n                ",
-        ": 1rem;\n                ",
-        ": 0.875rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": var(--plasma-typo-body-xs-font-family);\n                ",
-        ": var(--plasma-typo-body-xs-font-size);\n                ",
-        ": var(--plasma-typo-body-xs-font-style);\n                ",
-        ": var(--plasma-typo-body-xs-font-weight);\n                ",
-        ": var(--plasma-typo-body-xs-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-xs-line-height);\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
-    defaults: {
-        view: 'default',
-        size: 'm'
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-active);\n                ", ": var(--text-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--surface-transparent-secondary-hover);\n                ", ": var(--surface-transparent-secondary-active);\n                ", ": var(--text-secondary);\n                ", ": var(--text-accent);\n                ", ": 0.4;\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary);\n            "])), tokens.iconFolderColor, tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive, tokens.color, tokens.colorSelected, tokens.itemBackgroundColor, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.checkboxBorderColor, tokens.checkboxBackgroundColor, tokens.itemDisabledOpacity, tokens.itemDisabledBorderColor, tokens.itemDisabledColor)
     },
-    variations: {
-        view: {
-            default: css(_templateObject(), tokens.iconFolderColor, tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive, tokens.color, tokens.colorSelected, tokens.itemBackgroundColor, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.checkboxBorderColor, tokens.checkboxBackgroundColor, tokens.itemDisabledOpacity, tokens.itemDisabledBorderColor, tokens.itemDisabledColor)
-        },
-        size: {
-            l: css(_templateObject1(), tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
-            m: css(_templateObject2(), tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
-            s: css(_templateObject3(), tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
-            xs: css(_templateObject4(), tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight)
-        }
+    size: {
+      l: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 3.5rem;\n                ", ": 1rem;\n                ", ": 0.375rem;\n                ", ": 2rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n                ", ": 0 0.5rem 0 0;\n                ", ": 0 0.5rem 0 0;\n                ", ": 0 0 0 0.5rem;\n                ", ": 1.5rem;\n                ", ": 0 0.5rem 0 0;\n                ", ": 1.5rem;\n                ", ": 1.25rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n            "])), tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
+      m: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 3rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 2rem;\n                ", ": 0.625rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n                ", ": 0 0.5rem 0 0;\n                ", ": 0 0.5rem 0 0;\n                ", ": 0 0 0 0.5rem;\n                ", ": 1.5rem;\n                ", ": 0 0.5rem 0 0;\n                ", ": 1.5rem;\n                ", ": 1.25rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
+      s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.5rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 1.875rem;\n                ", ": 0.5rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n                ", ": 0 0.375rem 0 0;\n                ", ": 0 0.375rem 0 0;\n                ", ": 0 0 0 0.375rem;\n                ", ": 1.5rem;\n                ", ": 0 0.25rem 0 0;\n                ", ": 1.5rem;\n                ", ": 1.25rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n            "])), tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
+      xs: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n                ", ": 1.25rem;\n                ", ": 0.375rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n                ", ": 0 0.25rem 0 0;\n                ", ": 0 0.25rem 0 0;\n                ", ": 0 0 0 0.25rem;\n                ", ": 1rem;\n                ", ": 0 0.25rem 0 0;\n                ", ": 1rem;\n                ", ": 0.875rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n            "])), tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight)
     }
-};
+  }
+};

package/emotion/es/components/Tree/Tree.js

@@ -1,4 +1,4 @@
 import { treeConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config } from './Tree.config';
-var mergedConfig = mergeConfig(treeConfig, config);
-export var Tree = component(mergedConfig);
+var mergedConfig = /*#__PURE__*/mergeConfig(treeConfig, config);
+export var Tree = /*#__PURE__*/component(mergedConfig);

package/emotion/es/components/Tree/Tree.stories.tsx

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { IconBlankTxtOutline, IconLock, IconTrash } from '@salutejs/plasma-icons';
+
+import { Tree } from './Tree';
+
+type StoryTreeProps = ComponentProps<typeof Tree>;
+
+const size = ['xs', 's', 'm', 'l'];
+const arrowPlacements = ['left', 'right'];
+
+const meta: Meta<StoryTreeProps> = {
+    title: 'Data Entry/Tree',
+    decorators: [InSpacingDecorator],
+    component: Tree,
+    argTypes: {
+        size: {
+            control: 'select',
+            options: size,
+        },
+        checkable: {
+            control: 'boolean',
+        },
+        multiple: {
+            control: 'boolean',
+        },
+        arrowPlacement: {
+            options: arrowPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        defaultExpandAll: {
+            control: 'boolean',
+        },
+        fullWidthItemSelection: {
+            control: 'boolean',
+        },
+        height: {
+            control: 'number',
+        },
+        hasIcon: {
+            control: 'boolean',
+        },
+    },
+    args: {
+        size: 'm',
+        fullWidthItemSelection: false,
+        checkable: false,
+        multiple: false,
+        arrowPlacement: 'left',
+        defaultExpandAll: true,
+        height: undefined,
+        hasIcon: true,
+    },
+    parameters: {
+        controls: {
+            include: [
+                'size',
+                'fullWidthItemSelection',
+                'checkable',
+                'multiple',
+                'arrowPlacement',
+                'defaultExpandAll',
+                'height',
+                'hasIcon',
+            ],
+        },
+    },
+};
+
+export default meta;
+
+const StoryDefault = (args: StoryTreeProps) => {
+    const treeData: any[] = [
+        {
+            title: 'Основной каталог',
+            key: '0-0',
+            contentRight: <IconTrash size={args.size === 'xs' ? 'xs' : 's'} color="var(--text-secondary)" />,
+            children: [
+                {
+                    title: 'Документы',
+                    key: '0-0-0',
+                    children: [
+                        {
+                            title: 'Отчёты',
+                            key: '0-0-0-0',
+                            contentRight: (
+                                <IconLock size={args.size === 'xs' ? 'xs' : 's'} color="var(--text-secondary)" />
+                            ),
+                            disabled: true,
+                        },
+                        {
+                            title: 'Проекты',
+                            key: '0-0-0-1',
+                            children: [
+                                {
+                                    title: 'Проект Альфа',
+                                    key: '0-0-0-0-0',
+                                    icon: (
+                                        <IconBlankTxtOutline size={args.size === 'xs' ? 'xs' : 's'} color="inherit" />
+                                    ),
+                                },
+                                {
+                                    title: 'Проект Бета',
+                                    key: '0-0-0-0-1',
+                                    icon: (
+                                        <IconBlankTxtOutline size={args.size === 'xs' ? 'xs' : 's'} color="inherit" />
+                                    ),
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    title: 'Медиа',
+                    key: '0-0-1',
+                    children: [
+                        {
+                            title: 'Фотографии',
+                            key: '0-0-1-0',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            title: 'Корзина',
+            key: '0-1',
+            children: [
+                {
+                    title: 'Удалённые файлы',
+                    key: '0-1-0',
+                },
+            ],
+        },
+    ];
+
+    return <Tree {...args} items={treeData} />;
+};
+
+export const Default: StoryObj<StoryTreeProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};

package/emotion/es/components/Tree/index.js

@@ -1 +1 @@
-export { Tree } from './Tree';
+export { Tree } from './Tree';