ChatFileTree

Table & List

변경 파일 트리와 추가·삭제 라인 요약 표시.

Usage

코드 변경 결과를 폴더 구조와 함께 훑어볼 때 사용합니다. 파일별 diff 통계는 ChatDiffStat이 내부에서 담당하므로 직접 조합하지 마세요.

import

import { ChatFileTree } from '@mildang/design-system/unofficial/Chat';

API Reference

ChatFileTree Props

Prop

Type

Default

nodes

필수

readonly ChatFileTreeNode[]

지정 안 함

totalAdditions

필수

number

지정 안 함

totalDeletions

필수

number

지정 안 함

labels

Partial<ChatFileTreeLabels>

지정 안 함

visibleCount

number

nodes.length (전부)

같은 패밀리

@mildang/design-system/unofficial/Chat 에서 같이 내보내는 컴포넌트다.

ThreadList

사이드바에 스레드 목록을 보여주는 DS Sidebar 합성 목록.

예제

기본 사용

코드

// FileTreeDefault.example.tsx
import { ChatFileTree } from "@mildang/design-system/unofficial/Chat";
var NODES = [
  { path: "packages", name: "packages", depth: 0, kind: "folder" },
  { path: "p/ds", name: "design-system", depth: 1, kind: "folder" },
  { path: "p/ds/CodeDiff.tsx", name: "CodeDiff.tsx", depth: 2, kind: "file", additions: 98, status: "added" },
  {
    path: "p/ds/chatCodeSurface.ts",
    name: "chatCodeSurface.ts",
    depth: 2,
    kind: "file",
    additions: 132,
    status: "added"
  },
  {
    path: "p/ds/index.ts",
    name: "index.ts",
    depth: 2,
    kind: "file",
    additions: 3,
    deletions: 1,
    status: "modified"
  },
  { path: "apps", name: "apps", depth: 0, kind: "folder" },
  {
    path: "apps/legacy.tsx",
    name: "DiffViewer.legacy.tsx",
    depth: 1,
    kind: "file",
    deletions: 214,
    status: "deleted"
  },
  { path: "README.md", name: "README.md", depth: 0, kind: "file", additions: 6, deletions: 6 }
];
var DEFAULT_ARGS = { nodes: NODES, totalAdditions: 239, totalDeletions: 221 };
function FileTreeDefaultExample(props = {}) {
  return <ChatFileTree {...DEFAULT_ARGS} {...props} />;
}
export {
  FileTreeDefaultExample as default
};

상태 배지 없이

코드

// FileTreeWithoutStatus.example.tsx
import { ChatFileTree } from "@mildang/design-system/unofficial/Chat";
var NODES = [
  { path: "packages", name: "packages", depth: 0, kind: "folder" },
  { path: "p/ds", name: "design-system", depth: 1, kind: "folder" },
  { path: "p/ds/CodeDiff.tsx", name: "CodeDiff.tsx", depth: 2, kind: "file", additions: 98 },
  { path: "p/ds/chatCodeSurface.ts", name: "chatCodeSurface.ts", depth: 2, kind: "file", additions: 132 },
  { path: "p/ds/index.ts", name: "index.ts", depth: 2, kind: "file", additions: 3, deletions: 1 },
  { path: "apps", name: "apps", depth: 0, kind: "folder" },
  { path: "apps/legacy.tsx", name: "DiffViewer.legacy.tsx", depth: 1, kind: "file", deletions: 214 },
  { path: "README.md", name: "README.md", depth: 0, kind: "file", additions: 6, deletions: 6 }
];
var DEFAULT_ARGS = { nodes: NODES, totalAdditions: 239, totalDeletions: 221 };
function FileTreeWithoutStatusExample(props = {}) {
  return <ChatFileTree {...DEFAULT_ARGS} {...props} />;
}
export {
  FileTreeWithoutStatusExample as default
};

부분 표시

코드

// FileTreeDefault.example.tsx
import { ChatFileTree } from "@mildang/design-system/unofficial/Chat";
var NODES = [
  { path: "packages", name: "packages", depth: 0, kind: "folder" },
  { path: "p/ds", name: "design-system", depth: 1, kind: "folder" },
  { path: "p/ds/CodeDiff.tsx", name: "CodeDiff.tsx", depth: 2, kind: "file", additions: 98, status: "added" },
  {
    path: "p/ds/chatCodeSurface.ts",
    name: "chatCodeSurface.ts",
    depth: 2,
    kind: "file",
    additions: 132,
    status: "added"
  },
  {
    path: "p/ds/index.ts",
    name: "index.ts",
    depth: 2,
    kind: "file",
    additions: 3,
    deletions: 1,
    status: "modified"
  },
  { path: "apps", name: "apps", depth: 0, kind: "folder" },
  {
    path: "apps/legacy.tsx",
    name: "DiffViewer.legacy.tsx",
    depth: 1,
    kind: "file",
    deletions: 214,
    status: "deleted"
  },
  { path: "README.md", name: "README.md", depth: 0, kind: "file", additions: 6, deletions: 6 }
];
var DEFAULT_ARGS = { nodes: NODES, totalAdditions: 239, totalDeletions: 221 };
function FileTreeDefaultExample(props = {}) {
  return <ChatFileTree {...DEFAULT_ARGS} {...props} />;
}

// FileTreePartiallyRevealed.example.tsx
var DEFAULT_ARGS2 = { visibleCount: 4 };
function FileTreePartiallyRevealedExample(props = {}) {
  return <FileTreeDefaultExample {...DEFAULT_ARGS2} {...props} />;
}
export {
  FileTreePartiallyRevealedExample as default
};