CollapsableItem component

src/components/CollapsableItem.tsx

@@ -0,0 +1,168 @@
+import React, { FC, ReactNode } from 'react';
+import styled, { css } from 'styled-components';
+import { backgroundColor, gray4, gray7, radiusM } from '@taskany/colors';
+
+export const collapseOffset = 20;
+
+const dotSize = 8;
+const halfDotSize = dotSize / 2;
+const doubleDotSize = dotSize * 2;
+
+const dot = css`
+    width: ${dotSize}px;
+    height: ${dotSize}px;
+    border-radius: ${radiusM};
+    background: ${gray7};
+`;
+
+const StyledCollapsableHeader = styled.div<{
+    isRoot?: boolean;
+    hasNestedCollapsableItems?: boolean;
+    isOpen: boolean;
+    hasContent: boolean;
+}>`
+    ${({ isOpen, hasNestedCollapsableItems, isRoot, hasContent }) =>
+        !isRoot &&
+        hasContent &&
+        css`
+            &::before {
+                content: '';
+                ${dot};
+
+                position: absolute;
+                top: 16px;
+                left: ${hasNestedCollapsableItems && isOpen
+                    ? `calc(-${doubleDotSize}px - ${collapseOffset}px)`
+                    : `calc(-${doubleDotSize}px)`};
+                z-index: 1;
+            }
+        `};
+`;
+
+const StyledHeaderContent = styled.div<{ highlighted: boolean; hasNestedCollapsableItems?: boolean; isOpen: boolean }>`
+    position: relative;
+
+    border-radius: ${radiusM};
+    ${({ highlighted }) =>
+        highlighted &&
+        `
+        background: ${gray4};
+    `}
+
+    ${({ hasNestedCollapsableItems, isOpen }) =>
+        hasNestedCollapsableItems &&
+        isOpen &&
+        css`
+            &::after {
+                content: '';
+                ${dot};
+
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                left: calc(-2 * ${dotSize}px);
+            }
+        `};
+`;
+
+const StyledCollapsableContainer = styled.div<{
+    hasNestedCollapsableItems?: boolean;
+    isOpen: boolean;
+    hasContent: boolean;
+    isRoot?: boolean;
+}>`
+    position: relative;
+
+    ${({ isRoot, isOpen, hasNestedCollapsableItems }) =>
+        !isRoot &&
+        isOpen &&
+        hasNestedCollapsableItems && {
+            marginLeft: `${collapseOffset}px`,
+        }};
+
+    ${({ hasNestedCollapsableItems }) =>
+        hasNestedCollapsableItems &&
+        css`
+            &::before {
+                content: '';
+                position: absolute;
+                width: 1px;
+                height: calc(100% - ${doubleDotSize}px - ${doubleDotSize}px - ${dotSize}px - 2px);
+                background-color: ${gray7};
+                left: calc(-${doubleDotSize}px + ${halfDotSize}px);
+                top: calc(${doubleDotSize}px + ${halfDotSize}px);
+            }
+        `};
+
+    ${({ hasNestedCollapsableItems, isOpen, isRoot, hasContent }) =>
+        !isRoot && hasContent
+            ? css`
+                  &:last-child::after {
+                      content: '';
+                      position: absolute;
+
+                      width: 1px;
+                      height: 100%;
+                      background: ${backgroundColor};
+
+                      top: ${doubleDotSize}px;
+                      left: ${`calc(-${halfDotSize}px - ${dotSize}px - ${
+                          (isOpen && hasNestedCollapsableItems ? 1 : 0) * collapseOffset
+                      }px)`};
+                  }
+              `
+            : !isRoot &&
+              css`
+                  &:last-child::after {
+                      content: '';
+                      position: absolute;
+                      ${dot};
+
+                      top: ${doubleDotSize}px;
+                      left: calc(-2 * ${dotSize}px);
+                  }
+              `};
+`;
+
+export const CollapsableContentItem: FC<{
+    children?: ReactNode;
+    className?: string;
+}> = ({ children, className }) => <div className={className}>{children}</div>;
+
+export const CollapsableItem: FC<{
+    children?: ReactNode;
+    header: ReactNode;
+    isRoot?: boolean;
+    isOpen: boolean;
+    hasNestedCollapsableItems?: boolean;
+    onClick?: () => void;
+}> = ({ children, header, isOpen, isRoot, hasNestedCollapsableItems, onClick }) => {
+    const hasContent = Boolean(children);
+
+    return (
+        <StyledCollapsableContainer
+            isOpen={isOpen}
+            hasNestedCollapsableItems={hasNestedCollapsableItems}
+            isRoot={isRoot}
+            hasContent={hasContent}
+        >
+            <StyledCollapsableHeader
+                isOpen={isOpen}
+                hasNestedCollapsableItems={hasNestedCollapsableItems}
+                isRoot={isRoot}
+                hasContent={hasContent}
+                onClick={onClick}
+            >
+                <StyledHeaderContent
+                    isOpen={isOpen}
+                    hasNestedCollapsableItems={hasNestedCollapsableItems}
+                    highlighted={!!onClick && !isOpen}
+                >
+                    {header}
+                </StyledHeaderContent>
+            </StyledCollapsableHeader>
+
+            {isOpen && children}
+        </StyledCollapsableContainer>
+    );
+};

src/components/index.tsx

@@ -51,3 +51,4 @@ export * from './UserMenuItem';
 export * from './Table';
 export * from './UserGroup';
 export * from './Popup';
+export * from './CollapsableItem';

src/stories/CollapsableItem.stories.tsx

@@ -0,0 +1,133 @@
+import React, { ComponentPropsWithoutRef, useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import {
+    CollapsableItem,
+    CollapsableContentItem,
+    Text,
+    Table,
+    TableRow,
+    TableCell,
+    GoalIcon,
+    UserPic,
+    Dot,
+    Tag,
+    CircleProgressBar,
+} from '../components';
+
+const meta: Meta<typeof CollapsableItem> = {
+    title: 'CollapsableItem',
+    component: CollapsableItem,
+};
+
+export default meta;
+type Story = StoryFn<typeof meta>;
+
+type ItemProps = Omit<ComponentPropsWithoutRef<typeof CollapsableItem>, 'onClick' | 'isOpen'>;
+
+const Item = ({ header, ...restProps }: ItemProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleOpen = () => {
+        setTimeout(
+            () => {
+                setIsOpen((prev) => !prev);
+            },
+            Math.random() > 0.5 ? 300 : 0,
+        );
+    };
+
+    return (
+        <CollapsableItem
+            isOpen={isOpen}
+            header={<Text style={{ padding: 10 }}>{header}</Text>}
+            onClick={restProps.children ? () => handleOpen() : undefined}
+            {...restProps}
+        />
+    );
+};
+
+const data = Array.from({ length: 4 }, (_, i) => ({
+    title: `Title ${i + 1}`,
+    projectId: (Math.random() * 10).toString(16).slice(2, 8).padEnd(6, 'AB').toUpperCase(),
+    tags: Array.from({ length: Math.ceil(Math.random() * 5) }, (_, i) => `Tag ${i + 1}`),
+    progress: Math.round(Math.random() * 100),
+    children: Array.from({ length: 3 }, (_, i) => ({
+        title: `Title ${i + 1}`,
+        projectId: (Math.random() * 10).toString(16).slice(2, 8).padEnd(6, 'AB').toUpperCase(),
+        tags: Array.from({ length: Math.ceil(Math.random() * 5) }, (_, i) => `Tag ${i + 1}`),
+        progress: Math.round(Math.random() * 100),
+        children: Array.from({ length: 3 }, (_, i) => ({
+            title: `Title ${i + 1}`,
+            projectId: (Math.random() * 10).toString(16).slice(2, 8).padEnd(6, 'AB').toUpperCase(),
+            tags: Array.from({ length: Math.ceil(Math.random() * 5) }, (_, i) => `Tag ${i + 1}`),
+            progress: Math.round(Math.random() * 100),
+            children: undefined,
+        })),
+    })),
+}));
+
+export const Default: Story = () => {
+    return (
+        <Item header="Level A" hasNestedCollapsableItems isRoot>
+            <Item header="Level A-A" hasNestedCollapsableItems>
+                <Item header="Level A-A-A" hasNestedCollapsableItems>
+                    <Item header="Level A-A-A-A" />
+                    <Item header="Level A-A-A-B" hasNestedCollapsableItems>
+                        <Item header="Level A-A-A-B-A">
+                            <CollapsableContentItem>Hi</CollapsableContentItem>
+                            <CollapsableContentItem>Every</CollapsableContentItem>
+                            <CollapsableContentItem>One</CollapsableContentItem>
+                        </Item>
+                    </Item>
+                    <Item header="Level A-A-A-C" />
+                </Item>
+                <Item header="Level A-A-B" />
+                <Item header="Level A-A-C" />
+                <Item header="Level A-A-D" hasNestedCollapsableItems>
+                    <Item header="Level A-A-D-A" hasNestedCollapsableItems>
+                        <Item header="Level A-A-D-A-A">
+                            <Table width={600}>
+                                {data.map(({ title, projectId, tags, progress }) => (
+                                    <TableRow key={title} align="center" gap={10}>
+                                        <TableCell min>
+                                            <GoalIcon size="xxs" noWrap />
+                                        </TableCell>
+                                        <TableCell col={5}>
+                                            <Text size="s" weight="bold">
+                                                <Dot size="m" view="primary" />
+                                                {title}
+                                            </Text>
+                                        </TableCell>
+                                        <TableCell min>
+                                            <CircleProgressBar value={progress} size="s" />
+                                        </TableCell>
+                                        <TableCell width="6ch">
+                                            <Text size="s" weight="thin">
+                                                {projectId}
+                                            </Text>
+                                        </TableCell>
+                                        <TableCell justify="end">
+                                            {tags.map((t) => (
+                                                <Tag size="s" title={t} />
+                                            ))}
+                                        </TableCell>
+                                        <TableCell min justify="center">
+                                            <UserPic size={14} email="admin@taskany.org" />
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </Table>
+                        </Item>
+                    </Item>
+                </Item>
+            </Item>
+            <Item header="Level A-B" hasNestedCollapsableItems>
+                <Item header="Level A-B-A" />
+                <Item header="Level A-B-B" hasNestedCollapsableItems>
+                    <Item header="Level A-B-B-A" />
+                </Item>
+            </Item>
+        </Item>
+    );
+};