CollapsableItem component

src/components/TreeView/TreeView.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import type { Meta, StoryObj } from '@storybook/react';
+import { backgroundColor, gapM, gapS, gray9 } from '@taskany/colors';
+
+import { TreeView, TreeViewNode, TreeViewElement } from './TreeView';
+
+const meta: Meta<typeof TreeView> = {
+    title: 'TreeView',
+    component: TreeView,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const StyledCardExample = styled.div`
+    padding: ${gapS} ${gapM};
+
+    background-color: ${gray9};
+`;
+
+export const Default: Story = {
+    render: () => {
+        return (
+            <div style={{ backgroundColor, padding: '100px' }}>
+                <TreeView>
+                    <TreeViewNode title="Project 1">
+                        <TreeViewElement>Goal 1.1</TreeViewElement>
+                        <TreeViewElement>Goal 1.2</TreeViewElement>
+                        <TreeViewNode title={<StyledCardExample>Project 1.2</StyledCardExample>}>
+                            <TreeViewElement>Goal 1.1.1</TreeViewElement>
+                            <TreeViewElement>Goal 1.2.1</TreeViewElement>
+                            <TreeViewNode title="Project 1.2.1">
+                                <TreeViewElement>Goal 1.2.1.1</TreeViewElement>
+                            </TreeViewNode>
+                        </TreeViewNode>
+                    </TreeViewNode>
+                    <TreeViewNode title="Project 2" visible>
+                        <TreeViewElement>Goal 2.1</TreeViewElement>
+                        <TreeViewElement>Goal 2.2</TreeViewElement>
+                    </TreeViewNode>
+                </TreeView>
+            </div>
+        );
+    },
+};

src/components/TreeView/TreeView.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { gapS, gray7 } from '@taskany/colors';
+import { IconRightSmallOutline } from '@taskany/icons';
+
+import { nullable } from '../../utils';
+
+type ValidChild = React.ReactElement<typeof TreeViewNode | typeof TreeViewElement>;
+
+interface TreeViewNodeProps {
+    title: React.ReactNode;
+    children?: ValidChild[] | ValidChild;
+    visible?: boolean;
+    interactive?: boolean;
+    className?: string;
+
+    onShow?: () => void;
+    onHide?: () => void;
+}
+
+const StyledIconRightSmallOutline = styled(IconRightSmallOutline)<{ visible?: boolean }>`
+    display: block;
+
+    transition: transform 100ms ease-in-out;
+
+    ${({ visible }) =>
+        visible &&
+        `
+        transform: rotate(90deg);
+    `}
+`;
+
+const StyledTreeViewNodeTitleContent = styled.div``;
+
+const StyledTreeViewNodeTitle = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const StyledTreeViewNodeContent = styled.div`
+    box-sizing: border-box;
+
+    border-left: 1px solid ${gray7};
+
+    margin-left: ${gapS};
+`;
+
+const StyledTreeViewNode = styled.div``;
+
+export const TreeViewElement = styled.div`
+    padding-left: ${gapS};
+`;
+
+export const TreeViewNode: React.FC<TreeViewNodeProps> = ({
+    title,
+    children,
+    visible: defaultVisible,
+    interactive,
+    className,
+    onShow,
+    onHide,
+}) => {
+    const [visible, setVisible] = useState(defaultVisible);
+
+    const onClick = useCallback(() => {
+        if (!visible && children) {
+            setVisible(true);
+            onShow?.();
+        } else {
+            setVisible(false);
+            onHide?.();
+        }
+    }, [visible, children, setVisible, onHide, onShow]);
+
+    return (
+        <StyledTreeViewNode className={className}>
+            <StyledTreeViewNodeTitle onClick={interactive ? onClick : undefined}>
+                <StyledIconRightSmallOutline size="s" visible={visible} onClick={interactive ? undefined : onClick} />
+                <StyledTreeViewNodeTitleContent>{title}</StyledTreeViewNodeTitleContent>
+            </StyledTreeViewNodeTitle>
+
+            {nullable(visible && children, () => (
+                <StyledTreeViewNodeContent>{children}</StyledTreeViewNodeContent>
+            ))}
+        </StyledTreeViewNode>
+    );
+};
+
+export const TreeView = styled.div``;

src/components/index.tsx

@@ -60,3 +60,4 @@ export * from './Radio/Radio';
 export * from './GlobalSearch';
 export * from './Keyboard/Keyboard';
 export * from './Tip/Tip';
+export * from './TreeView/TreeView';