Tree

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { TreeListItem } from '@mildang/design-system/TreeListItem';
import MoreHorizIcon from '@mildang/icons/react/more-horiz';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const initialItems: TreeItems<ItemData> = [
  {
    id: 'unit-1',
    data: { title: 'Unit 1', type: 'unit' },
    collapsed: false,
    children: [
      {
        id: 'activity-1',
        data: { title: 'Activity 1', type: 'activity' },
        collapsed: false,
        children: [
          { id: 'step-1', data: { title: 'Step 1', type: 'step' }, children: [] },
          { id: 'step-2', data: { title: 'Step 2', type: 'step' }, children: [] },
        ],
      },
      { id: 'activity-2', data: { title: 'Activity 2', type: 'activity' }, children: [] },
    ],
  },
  {
    id: 'unit-2',
    data: { title: 'Unit 2', type: 'unit' },
    collapsed: true,
    children: [
      {
        id: 'activity-3',
        data: { title: 'Activity 3', type: 'activity' },
        children: [{ id: 'step-3', data: { title: 'Step 3', type: 'step' }, children: [] }],
      },
      { id: 'activity-4', data: { title: 'Activity 4', type: 'activity' }, children: [] },
    ],
  },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({}) } as ComponentProps<typeof Tree>;

const TreeDefaultExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<ItemData>>(initialItems);

    return (
      <div style={{ width: '400px' }}>
        <Tree
          items={items}
          onChange={setItems}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          renderItem={({ item }) => (
            <TreeListItem.Root data-testid={item.id}>
              <TreeListItem.TitleArea title={item.data?.title ?? String(item.id)} />
              <TreeListItem.ActionArea>
                <TreeListItem.ShowOnHover>
                  <TreeListItem.IconButton>
                    <MoreHorizIcon />
                  </TreeListItem.IconButton>
                </TreeListItem.ShowOnHover>
              </TreeListItem.ActionArea>
            </TreeListItem.Root>
          )}
        />
      </div>
    );
  };

export default function TreeDefaultExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeDefaultExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { TreeListItem } from '@mildang/design-system/TreeListItem';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const flatListItems: TreeItems<ItemData> = [
  { id: 'item-1', data: { title: 'Item 1' } },
  { id: 'item-2', data: { title: 'Item 2' } },
  { id: 'item-3', data: { title: 'Item 3' } },
  { id: 'item-4', data: { title: 'Item 4' } },
  { id: 'item-5', data: { title: 'Item 5' } },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({
    disableDepthChange: true,
  }) } as ComponentProps<typeof Tree>;

const TreeFlatListExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<ItemData>>(flatListItems);

    return (
      <div style={{ width: '400px' }}>
        <Tree
          items={items}
          onChange={setItems}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          renderItem={({ item }) => (
            <TreeListItem.Root data-testid={item.id}>
              <TreeListItem.TitleArea title={item.data?.title ?? String(item.id)} />
            </TreeListItem.Root>
          )}
        />
      </div>
    );
  };

export default function TreeFlatListExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeFlatListExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { TreeListItem } from '@mildang/design-system/TreeListItem';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const initialItems: TreeItems<ItemData> = [
  {
    id: 'unit-1',
    data: { title: 'Unit 1', type: 'unit' },
    collapsed: false,
    children: [
      {
        id: 'activity-1',
        data: { title: 'Activity 1', type: 'activity' },
        collapsed: false,
        children: [
          { id: 'step-1', data: { title: 'Step 1', type: 'step' }, children: [] },
          { id: 'step-2', data: { title: 'Step 2', type: 'step' }, children: [] },
        ],
      },
      { id: 'activity-2', data: { title: 'Activity 2', type: 'activity' }, children: [] },
    ],
  },
  {
    id: 'unit-2',
    data: { title: 'Unit 2', type: 'unit' },
    collapsed: true,
    children: [
      {
        id: 'activity-3',
        data: { title: 'Activity 3', type: 'activity' },
        children: [{ id: 'step-3', data: { title: 'Step 3', type: 'step' }, children: [] }],
      },
      { id: 'activity-4', data: { title: 'Activity 4', type: 'activity' }, children: [] },
    ],
  },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({
    sortable: false,
  }) } as ComponentProps<typeof Tree>;

const TreeNonSortableExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<ItemData>>(initialItems);

    return (
      <div style={{ width: '400px' }}>
        <Tree
          items={items}
          onChange={setItems}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          renderItem={({ item }) => (
            <TreeListItem.Root data-testid={item.id}>
              <TreeListItem.TitleArea title={item.data?.title ?? String(item.id)} />
            </TreeListItem.Root>
          )}
        />
      </div>
    );
  };

export default function TreeNonSortableExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeNonSortableExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { useTreeSelection } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { TreeListItem } from '@mildang/design-system/TreeListItem';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const initialItems: TreeItems<ItemData> = [
  {
    id: 'unit-1',
    data: { title: 'Unit 1', type: 'unit' },
    collapsed: false,
    children: [
      {
        id: 'activity-1',
        data: { title: 'Activity 1', type: 'activity' },
        collapsed: false,
        children: [
          { id: 'step-1', data: { title: 'Step 1', type: 'step' }, children: [] },
          { id: 'step-2', data: { title: 'Step 2', type: 'step' }, children: [] },
        ],
      },
      { id: 'activity-2', data: { title: 'Activity 2', type: 'activity' }, children: [] },
    ],
  },
  {
    id: 'unit-2',
    data: { title: 'Unit 2', type: 'unit' },
    collapsed: true,
    children: [
      {
        id: 'activity-3',
        data: { title: 'Activity 3', type: 'activity' },
        children: [{ id: 'step-3', data: { title: 'Step 3', type: 'step' }, children: [] }],
      },
      { id: 'activity-4', data: { title: 'Activity 4', type: 'activity' }, children: [] },
    ],
  },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({}) } as ComponentProps<typeof Tree>;

const TreeWithCheckboxExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<ItemData>>(initialItems);
    const { selectedIds, selectedItems, getSelectionState, handleSelectedChange } = useTreeSelection({
      items,
    });

    return (
      <div style={{ width: '400px' }}>
        <Tree
          items={items}
          onChange={setItems}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          renderItem={({ item }) => {
            const { checked, indeterminate } = getSelectionState(item);

            return (
              <TreeListItem.Root
                data-testid={item.id}
                selected={checked}
                indeterminate={indeterminate}
                onSelectedChange={(isChecked) => handleSelectedChange(item, isChecked)}
              >
                <TreeListItem.Checkbox />
                <TreeListItem.TitleArea title={item.data?.title ?? String(item.id)} />
              </TreeListItem.Root>
            );
          }}
        />
        <div style={{ marginTop: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
          <strong>Selected IDs</strong>
          <p style={{ fontSize: '12px' }}>{JSON.stringify(Array.from(selectedIds), null, 2)}</p>
        </div>
        <div style={{ marginTop: '8px', padding: '12px', background: '#e8f5e9', borderRadius: '4px' }}>
          <strong>Selected Items</strong>
          <p style={{ fontSize: '12px' }}>
            {JSON.stringify(
              selectedItems.map((item) => ({ id: item.id, title: item.data?.title })),
              null,
              2,
            )}
          </p>
        </div>
      </div>
    );
  };

export default function TreeWithCheckboxExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeWithCheckboxExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems, type CanDropArgs } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { TreeListItem } from '@mildang/design-system/TreeListItem';
import FolderFillIcon from '@mildang/icons/react/folder-fill';
import { css } from '@mildang/styled-system/css';
import AssignmentIcon from '@mildang/icons/react/assignment';

interface FolderFileData {
  title: string;
  type: 'folder' | 'file';
}

const folderFileItems: TreeItems<FolderFileData> = [
  {
    id: 'folder-0',
    data: { title: 'Folder 0', type: 'folder' },
    collapsed: false,
    children: [
      {
        id: 'folder-1',
        data: { title: 'Folder 1', type: 'folder' },
        collapsed: false,
        children: [
          { id: 'file-1', data: { title: 'File 1', type: 'file' }, children: [] },
          { id: 'file-2', data: { title: 'File 2', type: 'file' }, children: [] },
        ],
      },
      {
        id: 'folder-2',
        data: { title: 'Folder 2', type: 'folder' },
        children: [],
      },
    ],
  },
  {
    id: 'folder-3',
    data: { title: 'Folder 3', type: 'folder' },
    collapsed: false,
    children: [{ id: 'file-3', data: { title: 'File 3', type: 'file' }, children: [] }],
  },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({}) } as ComponentProps<typeof Tree>;

const TreeDndCustomExampleExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<FolderFileData>>(folderFileItems);

    // file은 드래그 불가
    const canDrag = (item: { data?: FolderFileData }) => {
      return item.data?.type === 'folder';
    };

    // file이 자식으로 있는 folder 안으로는 드롭 불가
    const canDrop = ({ activeItem, projected, items }: CanDropArgs<FolderFileData>) => {
      if (projected.parentId === null) return true;
      const parent = items.find((item) => item.id === projected.parentId);
      if (!parent) return true;
      if (activeItem.parentId === projected.parentId) return true;

      const parentIndex = items.findIndex((item) => item.id === projected.parentId);
      const hasFileChildren = items
        .slice(parentIndex + 1)
        .some((child) => child.parentId === projected.parentId && child.data?.type === 'file');

      if (hasFileChildren) return false;
      return true;
    };

    return (
      <div style={{ width: '400px' }}>
        <div style={{ marginBottom: '10px', fontSize: '14px', color: '#666' }}>
          <p>
            <strong>canDrag:</strong> file은 드래그 불가
          </p>
          <p>
            <strong>canDrop:</strong> file이 자식으로 있는 folder 안으로는 드롭 불가
          </p>
        </div>
        <Tree
          items={items}
          onChange={setItems}
          canDrag={canDrag}
          canDrop={canDrop}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          renderItem={({ item }) => (
            <TreeListItem.Root data-testid={item.id}>
              <TreeListItem.Icon>
                {item.data?.type === 'folder' ? (
                  <FolderFillIcon className={css({ color: 'warning.icon.base' })} />
                ) : (
                  <AssignmentIcon />
                )}
              </TreeListItem.Icon>
              <TreeListItem.TitleArea title={String(item.id)} />
            </TreeListItem.Root>
          )}
        />
      </div>
    );
  };

export default function TreeDndCustomExampleExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeDndCustomExampleExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { TreeListItem } from '@mildang/design-system/TreeListItem';
import MoreHorizIcon from '@mildang/icons/react/more-horiz';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const initialItems: TreeItems<ItemData> = [
  {
    id: 'unit-1',
    data: { title: 'Unit 1', type: 'unit' },
    collapsed: false,
    children: [
      {
        id: 'activity-1',
        data: { title: 'Activity 1', type: 'activity' },
        collapsed: false,
        children: [
          { id: 'step-1', data: { title: 'Step 1', type: 'step' }, children: [] },
          { id: 'step-2', data: { title: 'Step 2', type: 'step' }, children: [] },
        ],
      },
      { id: 'activity-2', data: { title: 'Activity 2', type: 'activity' }, children: [] },
    ],
  },
  {
    id: 'unit-2',
    data: { title: 'Unit 2', type: 'unit' },
    collapsed: true,
    children: [
      {
        id: 'activity-3',
        data: { title: 'Activity 3', type: 'activity' },
        children: [{ id: 'step-3', data: { title: 'Step 3', type: 'step' }, children: [] }],
      },
      { id: 'activity-4', data: { title: 'Activity 4', type: 'activity' }, children: [] },
    ],
  },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({}) } as ComponentProps<typeof Tree>;

const TreeDragAccessibilityExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<ItemData>>(initialItems);

    return (
      <div style={{ width: '400px' }}>
        <Tree
          items={items}
          onChange={setItems}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          dragAccessibility={{
            announcements: {
              dragstart: ({ source }) =>
                source ? `현재 항목은 ${source.item?.data?.title ?? String(source.id)}입니다.` : undefined,
              dragover: ({ target }) =>
                target
                  ? `현재 ${target.item?.data?.title ?? String(target.id)} 위로 이동 중입니다.`
                  : undefined,
              dragend: ({ source, target, canceled }) => {
                if (!source) return undefined;
                const sourceLabel = source.item?.data?.title ?? String(source.id);
                if (canceled) return `${sourceLabel} 이동이 취소되었습니다.`;
                if (!target || source.id === target.id) return `${sourceLabel}을(를) 현재 위치에 놓았습니다.`;
                const targetLabel = target.item?.data?.title ?? String(target.id);
                return `${sourceLabel}이(가) ${targetLabel} 위에 놓였습니다.`;
              },
            },
          }}
          renderItem={({ item }) => (
            <TreeListItem.Root data-testid={item.id}>
              <TreeListItem.TitleArea title={item.data?.title ?? String(item.id)} />
              <TreeListItem.ActionArea>
                <TreeListItem.ShowOnHover>
                  <TreeListItem.IconButton>
                    <MoreHorizIcon />
                  </TreeListItem.IconButton>
                </TreeListItem.ShowOnHover>
              </TreeListItem.ActionArea>
            </TreeListItem.Root>
          )}
        />
      </div>
    );
  };

export default function TreeDragAccessibilityExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeDragAccessibilityExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { TreeListItem } from '@mildang/design-system/TreeListItem';
import MoreHorizIcon from '@mildang/icons/react/more-horiz';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const generateLargeTreeData = (
  unitCount: number,
  activitiesPerUnit: number,
  stepsPerActivity: number,
): TreeItems<ItemData> => {
  const items: TreeItems<ItemData> = [];

  for (let u = 1; u <= unitCount; u++) {
    const activities: TreeItems<ItemData> = [];

    for (let a = 1; a <= activitiesPerUnit; a++) {
      const steps: TreeItems<ItemData> = [];

      for (let s = 1; s <= stepsPerActivity; s++) {
        steps.push({
          id: `unit-${u}-activity-${a}-step-${s}`,
          data: { title: `Unit ${u} > Activity ${a} > Step ${s}`, type: 'step' },
          children: [],
        });
      }
      activities.push({
        id: `unit-${u}-activity-${a}`,
        data: { title: `Unit ${u} > Activity ${a}`, type: 'activity' },
        children: steps,
      });
    }
    items.push({
      id: `unit-${u}`,
      data: { title: `Unit ${u}`, type: 'unit' },
      children: activities,
    });
  }

  return items;
};

const STORY_DEFAULT_ARGS = { ...({}), ...({}) } as ComponentProps<typeof Tree>;

const TreeVirtualizedExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const largeTreeItems = generateLargeTreeData(20, 5, 5);
    const [items, setItems] = useState<TreeItems<ItemData>>(largeTreeItems);

    return (
      <div style={{ width: '500px' }}>
        <Tree
          items={items}
          onChange={setItems}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          virtualized={400}
          renderItem={({ item }) => (
            <TreeListItem.Root>
              <TreeListItem.TitleArea title={item.data?.title ?? String(item.id)} />
              <TreeListItem.ActionArea>
                <TreeListItem.ShowOnHover>
                  <TreeListItem.IconButton>
                    <MoreHorizIcon />
                  </TreeListItem.IconButton>
                </TreeListItem.ShowOnHover>
              </TreeListItem.ActionArea>
            </TreeListItem.Root>
          )}
        />
      </div>
    );
  };

export default function TreeVirtualizedExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeVirtualizedExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { StandardTreeListItem } from '@mildang/design-system/TreeListItem';
import FolderFillIcon from '@mildang/icons/react/folder-fill';
import AssignmentIcon from '@mildang/icons/react/assignment';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const initialItems: TreeItems<ItemData> = [
  {
    id: 'unit-1',
    data: { title: 'Unit 1', type: 'unit' },
    collapsed: false,
    children: [
      {
        id: 'activity-1',
        data: { title: 'Activity 1', type: 'activity' },
        collapsed: false,
        children: [
          { id: 'step-1', data: { title: 'Step 1', type: 'step' }, children: [] },
          { id: 'step-2', data: { title: 'Step 2', type: 'step' }, children: [] },
        ],
      },
      { id: 'activity-2', data: { title: 'Activity 2', type: 'activity' }, children: [] },
    ],
  },
  {
    id: 'unit-2',
    data: { title: 'Unit 2', type: 'unit' },
    collapsed: true,
    children: [
      {
        id: 'activity-3',
        data: { title: 'Activity 3', type: 'activity' },
        children: [{ id: 'step-3', data: { title: 'Step 3', type: 'step' }, children: [] }],
      },
      { id: 'activity-4', data: { title: 'Activity 4', type: 'activity' }, children: [] },
    ],
  },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({
    hideExpand: true,
  }) } as ComponentProps<typeof Tree>;

const TreeHideExpandExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<ItemData>>(initialItems);

    return (
      <div style={{ width: '400px' }}>
        <Tree
          items={items}
          onChange={setItems}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          renderItem={({ item }) => (
            <StandardTreeListItem
              data-testid={item.id}
              icon={item.children && item.children.length > 0 ? <FolderFillIcon /> : <AssignmentIcon />}
              title={item.data?.title ?? String(item.id)}
            />
          )}
        />
      </div>
    );
  };

export default function TreeHideExpandExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeHideExpandExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { StandardTreeListItem } from '@mildang/design-system/TreeListItem';
import FolderFillIcon from '@mildang/icons/react/folder-fill';
import AssignmentIcon from '@mildang/icons/react/assignment';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const initialItems: TreeItems<ItemData> = [
  {
    id: 'unit-1',
    data: { title: 'Unit 1', type: 'unit' },
    collapsed: false,
    children: [
      {
        id: 'activity-1',
        data: { title: 'Activity 1', type: 'activity' },
        collapsed: false,
        children: [
          { id: 'step-1', data: { title: 'Step 1', type: 'step' }, children: [] },
          { id: 'step-2', data: { title: 'Step 2', type: 'step' }, children: [] },
        ],
      },
      { id: 'activity-2', data: { title: 'Activity 2', type: 'activity' }, children: [] },
    ],
  },
  {
    id: 'unit-2',
    data: { title: 'Unit 2', type: 'unit' },
    collapsed: true,
    children: [
      {
        id: 'activity-3',
        data: { title: 'Activity 3', type: 'activity' },
        children: [{ id: 'step-3', data: { title: 'Step 3', type: 'step' }, children: [] }],
      },
      { id: 'activity-4', data: { title: 'Activity 4', type: 'activity' }, children: [] },
    ],
  },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({
    expandByClick: true,
  }) } as ComponentProps<typeof Tree>;

const TreeExpandByClickExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<ItemData>>(initialItems);

    return (
      <div style={{ width: '400px' }}>
        <Tree
          items={items}
          onChange={setItems}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          renderItem={({ item }) => (
            <StandardTreeListItem
              data-testid={item.id}
              icon={item.children && item.children.length > 0 ? <FolderFillIcon /> : <AssignmentIcon />}
              title={item.data?.title ?? String(item.id)}
            />
          )}
        />
      </div>
    );
  };

export default function TreeExpandByClickExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeExpandByClickExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { StandardTreeListItem } from '@mildang/design-system/TreeListItem';
import FolderFillIcon from '@mildang/icons/react/folder-fill';
import AssignmentIcon from '@mildang/icons/react/assignment';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const initialItems: TreeItems<ItemData> = [
  {
    id: 'unit-1',
    data: { title: 'Unit 1', type: 'unit' },
    collapsed: false,
    children: [
      {
        id: 'activity-1',
        data: { title: 'Activity 1', type: 'activity' },
        collapsed: false,
        children: [
          { id: 'step-1', data: { title: 'Step 1', type: 'step' }, children: [] },
          { id: 'step-2', data: { title: 'Step 2', type: 'step' }, children: [] },
        ],
      },
      { id: 'activity-2', data: { title: 'Activity 2', type: 'activity' }, children: [] },
    ],
  },
  {
    id: 'unit-2',
    data: { title: 'Unit 2', type: 'unit' },
    collapsed: true,
    children: [
      {
        id: 'activity-3',
        data: { title: 'Activity 3', type: 'activity' },
        children: [{ id: 'step-3', data: { title: 'Step 3', type: 'step' }, children: [] }],
      },
      { id: 'activity-4', data: { title: 'Activity 4', type: 'activity' }, children: [] },
    ],
  },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({
    showDepthPipe: true,
  }) } as ComponentProps<typeof Tree>;

const TreeShowDepthPipeExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<ItemData>>(initialItems);

    return (
      <div style={{ width: '400px' }}>
        <Tree
          items={items}
          onChange={setItems}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          renderItem={({ item }) => (
            <StandardTreeListItem
              data-testid={item.id}
              icon={item.children && item.children.length > 0 ? <FolderFillIcon /> : <AssignmentIcon />}
              title={item.data?.title ?? String(item.id)}
            />
          )}
        />
      </div>
    );
  };

export default function TreeShowDepthPipeExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeShowDepthPipeExampleRender(mergedProps);
}

import type { ComponentProps } from 'react';

import { useState } from 'react';
import { type TreeItems } from '@mildang/design-system/TreeListItem';
import { Tree } from '@mildang/design-system/TreeListItem';
import { StandardTreeListItem } from '@mildang/design-system/TreeListItem';
import FolderFillIcon from '@mildang/icons/react/folder-fill';
import AssignmentIcon from '@mildang/icons/react/assignment';

interface ItemData {
  title: string;
  type?: 'unit' | 'activity' | 'step';
}

const STORY_DEFAULT_ARGS = { ...({}), ...({
    sortable: false,
  }) } as ComponentProps<typeof Tree>;

const TreeLazyLoadingExampleRender = function Render(args: ComponentProps<typeof Tree>) {
    const [items, setItems] = useState<TreeItems<ItemData>>([
      {
        id: 'unit-lazy',
        data: { title: 'Lazy Unit', type: 'unit' },
        collapsed: true,
        hasChildren: true,
        isChildrenLoading: false,
        children: [],
      },
      {
        id: 'unit-loading',
        data: { title: 'Loading Unit', type: 'unit' },
        collapsed: false,
        hasChildren: true,
        isChildrenLoading: true,
        children: [],
      },
    ]);

    return (
      <div style={{ width: '400px' }}>
        <Tree
          items={items}
          onChange={(nextItems) => {
            setItems(nextItems);
            setTimeout(() => {
              setItems((prev) =>
                prev.map((item) =>
                  item.id === 'unit-lazy'
                    ? {
                        ...item,
                        isChildrenLoading: true,
                      }
                    : item,
                ),
              );
            }, 0);
          }}
          sortable={args.sortable}
          hideExpand={args.hideExpand}
          showDepthPipe={args.showDepthPipe}
          expandByClick={args.expandByClick}
          disableDepthChange={args.disableDepthChange}
          renderItem={({ item }) => (
            <StandardTreeListItem
              data-testid={item.id}
              icon={
                item.hasChildren ?? (item.children?.length ?? 0) > 0 ? <FolderFillIcon /> : <AssignmentIcon />
              }
              title={item.data?.title ?? String(item.id)}
            />
          )}
        />
      </div>
    );
  };

export default function TreeLazyLoadingExample(props: Partial<ComponentProps<typeof Tree>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tree>;
  return TreeLazyLoadingExampleRender(mergedProps);
}