@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/elements/code/FileTree.test.ts

@@ -0,0 +1,188 @@
+import { describe, expect, it, vi } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+import FileTree from "./FileTree.vue"
+import type { TreeNode } from "./FileTree.vue"
+
+const ROOT_NODES: TreeNode[] = [
+  { path: "src", name: "src", kind: "directory" },
+  { path: "README.md", name: "README.md", kind: "file" },
+  { path: "package.json", name: "package.json", kind: "file" },
+]
+
+const SRC_CHILDREN: TreeNode[] = [
+  { path: "src/Button.vue", name: "Button.vue", kind: "file" },
+  { path: "src/Card.vue", name: "Card.vue", kind: "file" },
+  { path: "src/lib", name: "lib", kind: "directory" },
+]
+
+function makeLoader(): {
+  fn: ReturnType<typeof vi.fn>
+} {
+  const fn = vi.fn(async (path: string) => {
+    if (path === "" || path === "/") {
+      return ROOT_NODES
+    }
+    if (path === "src") {
+      return SRC_CHILDREN
+    }
+    return []
+  })
+  return { fn }
+}
+
+describe("FileTree (props-based composition)", () => {
+  it("calls onLoadTree on mount with the root path", async () => {
+    const { fn } = makeLoader()
+    mount(FileTree, { props: { onLoadTree: fn } })
+    await flushPromises()
+    expect(fn).toHaveBeenCalledWith("")
+  })
+
+  it("renders the default label", async () => {
+    const { fn } = makeLoader()
+    const wrapper = mount(FileTree, { props: { onLoadTree: fn } })
+    await flushPromises()
+    expect(wrapper.text()).toContain("File Tree")
+  })
+
+  it("uses a custom label when provided", async () => {
+    const { fn } = makeLoader()
+    const wrapper = mount(FileTree, {
+      props: { onLoadTree: fn, label: "Project files" },
+    })
+    await flushPromises()
+    expect(wrapper.text()).toContain("Project files")
+  })
+
+  it("renders skeletons while loading", async () => {
+    let resolve: (v: TreeNode[]) => void = () => {}
+    const onLoadTree = vi.fn(
+      () =>
+        new Promise<TreeNode[]>((r) => {
+          resolve = r
+        }),
+    )
+    const wrapper = mount(FileTree, { props: { onLoadTree } })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find("[data-testid='file-tree-loading']").exists()).toBe(
+      true,
+    )
+    resolve(ROOT_NODES)
+    await flushPromises()
+    expect(wrapper.find("[data-testid='file-tree-loading']").exists()).toBe(
+      false,
+    )
+  })
+
+  it("renders root nodes after the loader resolves", async () => {
+    const { fn } = makeLoader()
+    const wrapper = mount(FileTree, { props: { onLoadTree: fn } })
+    await flushPromises()
+    expect(wrapper.text()).toContain("src")
+    expect(wrapper.text()).toContain("README.md")
+    expect(wrapper.text()).toContain("package.json")
+  })
+
+  it("shows an error message when the loader rejects", async () => {
+    const onLoadTree = vi
+      .fn<(path: string) => Promise<TreeNode[]>>()
+      .mockRejectedValue(new Error("boom"))
+    const wrapper = mount(FileTree, { props: { onLoadTree } })
+    await flushPromises()
+    const err = wrapper.find("[data-testid='file-tree-error']")
+    expect(err.exists()).toBe(true)
+    expect(err.text()).toContain("boom")
+  })
+
+  it("calls onSelectPath and emits update:selectedPath when a file row is clicked", async () => {
+    const { fn } = makeLoader()
+    const onSelectPath = vi.fn()
+    const wrapper = mount(FileTree, {
+      props: { onLoadTree: fn, onSelectPath },
+    })
+    await flushPromises()
+    const fileRow = wrapper.find("[data-testid='file-tree-row-README.md']")
+    expect(fileRow.exists()).toBe(true)
+    await fileRow.trigger("click")
+    expect(onSelectPath).toHaveBeenCalledWith("README.md")
+    expect(wrapper.emitted("update:selectedPath")).toEqual([["README.md"]])
+  })
+
+  it("highlights the selected file via aria-selected", async () => {
+    const { fn } = makeLoader()
+    const wrapper = mount(FileTree, {
+      props: { onLoadTree: fn, selectedPath: "README.md" },
+    })
+    await flushPromises()
+    const fileRow = wrapper.find("[data-testid='file-tree-row-README.md']")
+    expect(fileRow.attributes("aria-selected")).toBe("true")
+  })
+
+  it("expanding a directory triggers a deeper load", async () => {
+    const { fn } = makeLoader()
+    const wrapper = mount(FileTree, { props: { onLoadTree: fn } })
+    await flushPromises()
+    // First call was for the root
+    expect(fn).toHaveBeenCalledTimes(1)
+    const dirRow = wrapper.find("[data-testid='file-tree-row-src']")
+    await dirRow.trigger("click")
+    await flushPromises()
+    expect(fn).toHaveBeenCalledWith("src")
+    expect(fn).toHaveBeenCalledTimes(2)
+    expect(wrapper.text()).toContain("Button.vue")
+    expect(wrapper.text()).toContain("Card.vue")
+  })
+
+  it("toggles a directory closed without re-loading", async () => {
+    const { fn } = makeLoader()
+    const wrapper = mount(FileTree, { props: { onLoadTree: fn } })
+    await flushPromises()
+    const dirRow = wrapper.find("[data-testid='file-tree-row-src']")
+    await dirRow.trigger("click")
+    await flushPromises()
+    expect(fn).toHaveBeenCalledTimes(2)
+    // Toggle closed
+    await dirRow.trigger("click")
+    await flushPromises()
+    expect(fn).toHaveBeenCalledTimes(2)
+    expect(wrapper.text()).not.toContain("Button.vue")
+  })
+
+  it("emits update:expandedPaths and calls onExpandedChange on expand", async () => {
+    const { fn } = makeLoader()
+    const onExpandedChange = vi.fn()
+    const wrapper = mount(FileTree, {
+      props: { onLoadTree: fn, onExpandedChange },
+    })
+    await flushPromises()
+    const dirRow = wrapper.find("[data-testid='file-tree-row-src']")
+    await dirRow.trigger("click")
+    await flushPromises()
+    expect(onExpandedChange).toHaveBeenCalledWith(["src"])
+    const emitted = wrapper.emitted("update:expandedPaths")
+    expect(emitted?.[emitted.length - 1]).toEqual([["src"]])
+  })
+
+  it("renders pre-loaded children without invoking the loader for that path", async () => {
+    const onLoadTree = vi.fn(async (path: string) => {
+      if (path === "") {
+        return [
+          {
+            path: "src",
+            name: "src",
+            kind: "directory",
+            children: [{ path: "src/x.vue", name: "x.vue", kind: "file" }],
+          },
+        ] as TreeNode[]
+      }
+      return [] as TreeNode[]
+    })
+    const wrapper = mount(FileTree, {
+      props: { onLoadTree, expandedPaths: ["src"] },
+    })
+    await flushPromises()
+    expect(wrapper.text()).toContain("x.vue")
+    // Loader called once for root only (pre-loaded children should not re-trigger).
+    expect(onLoadTree).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/compositions/elements/code/FileTree.vue

@@ -0,0 +1,372 @@
+<script setup lang="ts">
+/**
+ * Props-driven file tree composition. Renders a recursive list of files
+ * and folders sourced by a `onLoadTree` callback. The composition makes
+ * no HTTP calls itself — the consumer provides a Promise-returning
+ * loader for each node.
+ *
+ *   <FileTree
+ *     :on-load-tree="(path) => fetch(`/api/tree?path=${path}`).then(r => r.json())"
+ *     v-model:selected-path="selected"
+ *     v-model:expanded-paths="expanded"
+ *   />
+ */
+import { computed, h, onMounted, ref, watch, type PropType } from "vue"
+import {
+  ChevronDown,
+  ChevronRight,
+  File as FileIcon,
+  Folder,
+  FolderOpen,
+} from "lucide-vue-next"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { cn } from "@/lib/utils"
+
+export interface TreeNode {
+  /** Full path from the root, e.g. `src/components/Button.vue`. */
+  path: string
+  /** Display name (typically the trailing path segment). */
+  name: string
+  kind: "file" | "directory"
+  /** Pre-loaded children. When omitted for a directory, the loader is
+   *  invoked the first time the node is expanded. */
+  children?: TreeNode[]
+}
+
+export interface FileTreeProps {
+  /** Root path. Passed to `onLoadTree` on mount. */
+  path?: string
+  /** REQUIRED loader for children at a given path. */
+  onLoadTree: (path: string) => Promise<TreeNode[]>
+  /** Current selected file path (v-modelable as `selectedPath`). */
+  selectedPath?: string
+  /** Called when the user clicks a file. */
+  onSelectPath?: (path: string) => void
+  /** Controlled expanded directory paths (v-modelable as `expandedPaths`). */
+  expandedPaths?: string[]
+  /** Fired when the set of expanded paths changes. */
+  onExpandedChange?: (paths: string[]) => void
+  label?: string
+  name?: string | null
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<FileTreeProps>(), {
+  path: "",
+  label: "File Tree",
+})
+
+const emit = defineEmits<{
+  "update:selectedPath": [path: string]
+  "update:expandedPaths": [paths: string[]]
+}>()
+
+interface InternalNode {
+  path: string
+  name: string
+  kind: "file" | "directory"
+  loading: boolean
+  loaded: boolean
+  error: string | null
+  childNodes: InternalNode[]
+}
+
+function toInternal(node: TreeNode): InternalNode {
+  return {
+    path: node.path,
+    name: node.name,
+    kind: node.kind,
+    loading: false,
+    loaded: Array.isArray(node.children),
+    error: null,
+    childNodes: Array.isArray(node.children)
+      ? node.children.map(toInternal)
+      : [],
+  }
+}
+
+const rootNodes = ref<InternalNode[]>([])
+const rootLoading = ref<boolean>(false)
+const rootError = ref<string | null>(null)
+
+const localExpanded = ref<Set<string>>(
+  new Set<string>(props.expandedPaths ?? []),
+)
+
+const expandedPathsList = computed<string[]>(() =>
+  Array.from(localExpanded.value),
+)
+
+watch(
+  () => props.expandedPaths,
+  (next) => {
+    if (next === undefined) {
+      return
+    }
+    localExpanded.value = new Set(next)
+  },
+)
+
+function notifyExpanded(): void {
+  const list = expandedPathsList.value
+  emit("update:expandedPaths", list)
+  if (props.onExpandedChange) {
+    props.onExpandedChange(list)
+  }
+}
+
+async function loadRoot(): Promise<void> {
+  rootLoading.value = true
+  rootError.value = null
+  try {
+    const result = await props.onLoadTree(props.path ?? "")
+    rootNodes.value = Array.isArray(result) ? result.map(toInternal) : []
+  } catch (err) {
+    rootError.value = err instanceof Error ? err.message : String(err)
+    rootNodes.value = []
+  } finally {
+    rootLoading.value = false
+  }
+}
+
+async function loadChildren(node: InternalNode): Promise<void> {
+  if (node.kind !== "directory") {
+    return
+  }
+  if (node.loading || node.loaded) {
+    return
+  }
+  node.loading = true
+  node.error = null
+  try {
+    const result = await props.onLoadTree(node.path)
+    node.childNodes = Array.isArray(result) ? result.map(toInternal) : []
+    node.loaded = true
+  } catch (err) {
+    node.error = err instanceof Error ? err.message : String(err)
+    node.childNodes = []
+  } finally {
+    node.loading = false
+  }
+}
+
+function isExpanded(path: string): boolean {
+  return localExpanded.value.has(path)
+}
+
+async function toggleDirectory(node: InternalNode): Promise<void> {
+  const next = new Set(localExpanded.value)
+  if (next.has(node.path)) {
+    next.delete(node.path)
+  } else {
+    next.add(node.path)
+    if (!node.loaded) {
+      await loadChildren(node)
+    }
+  }
+  localExpanded.value = next
+  notifyExpanded()
+}
+
+function selectFile(node: InternalNode): void {
+  if (node.kind !== "file") {
+    return
+  }
+  emit("update:selectedPath", node.path)
+  if (props.onSelectPath) {
+    props.onSelectPath(node.path)
+  }
+}
+
+onMounted(() => {
+  void loadRoot()
+})
+
+watch(
+  () => props.path,
+  () => {
+    void loadRoot()
+  },
+)
+
+const FileTreeNode = {
+  name: "FileTreeNode",
+  props: {
+    node: {
+      type: Object as PropType<InternalNode>,
+      required: true as const,
+    },
+    depth: { type: Number, required: true as const },
+  },
+  setup(nodeProps: { node: InternalNode; depth: number }) {
+    return () => {
+      const node = nodeProps.node
+      const expanded = isExpanded(node.path)
+      const indent = { paddingLeft: `${nodeProps.depth * 16 + 8}px` }
+      const isFile = node.kind === "file"
+      const selected = isFile && props.selectedPath === node.path
+      const rowClass = [
+        "flex items-center gap-1.5 rounded-sm py-1 pr-2 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground",
+        selected ? "bg-accent text-accent-foreground font-medium" : "",
+      ].join(" ")
+
+      const row = h(
+        "div",
+        {
+          class: rowClass,
+          style: indent,
+          role: "treeitem",
+          "data-testid": `file-tree-row-${node.path}`,
+          "data-kind": node.kind,
+          "aria-expanded": isFile ? undefined : String(expanded),
+          "aria-selected": isFile ? String(selected) : undefined,
+          onClick: (e: Event) => {
+            e.stopPropagation()
+            if (isFile) {
+              selectFile(node)
+            } else {
+              void toggleDirectory(node)
+            }
+          },
+        },
+        [
+          isFile
+            ? h("span", { class: "inline-block w-4 shrink-0" })
+            : h(expanded ? ChevronDown : ChevronRight, {
+                class: "size-4 shrink-0 text-muted-foreground",
+                "data-testid": expanded
+                  ? `file-tree-chevron-down-${node.path}`
+                  : `file-tree-chevron-right-${node.path}`,
+              }),
+          isFile
+            ? h(FileIcon, {
+                class: "size-4 shrink-0 text-muted-foreground",
+              })
+            : h(expanded ? FolderOpen : Folder, {
+                class: "size-4 shrink-0 text-muted-foreground",
+              }),
+          h("span", { class: "truncate" }, node.name),
+        ],
+      )
+
+      const children: ReturnType<typeof h>[] = []
+      if (!isFile && expanded) {
+        const childIndent = {
+          paddingLeft: `${(nodeProps.depth + 1) * 16 + 8}px`,
+        }
+        if (node.loading) {
+          children.push(
+            h(
+              "li",
+              {
+                class: "py-1",
+                style: childIndent,
+                "data-testid": `file-tree-child-loading-${node.path}`,
+              },
+              [h(Skeleton, { class: "h-4 w-1/2" })],
+            ),
+          )
+        } else if (node.error) {
+          children.push(
+            h(
+              "li",
+              {
+                class: "py-1 text-sm text-destructive",
+                style: childIndent,
+                role: "alert",
+                "data-testid": `file-tree-child-error-${node.path}`,
+              },
+              node.error,
+            ),
+          )
+        } else if (node.childNodes.length === 0) {
+          children.push(
+            h(
+              "li",
+              {
+                class: "py-1 text-sm italic text-muted-foreground",
+                style: childIndent,
+                "data-testid": `file-tree-child-empty-${node.path}`,
+              },
+              "(empty)",
+            ),
+          )
+        } else {
+          for (const child of node.childNodes) {
+            children.push(
+              h(FileTreeNode, {
+                key: child.path,
+                node: child,
+                depth: nodeProps.depth + 1,
+              }),
+            )
+          }
+        }
+      }
+
+      return h(
+        "li",
+        { class: "flex list-none flex-col" },
+        [row, ...children],
+      )
+    }
+  },
+}
+
+defineExpose({ reload: loadRoot })
+</script>
+
+<template>
+  <Card
+    :class="cn(props.classList)"
+    :data-element-name="props.name ?? undefined"
+    data-testid="file-tree"
+  >
+    <CardHeader>
+      <CardTitle class="flex items-center gap-2 text-base">
+        <Folder class="size-5 text-muted-foreground" />
+        <span>{{ props.label }}</span>
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="px-2 pb-4">
+      <div
+        v-if="rootLoading"
+        data-testid="file-tree-loading"
+        class="flex flex-col gap-1.5 px-2"
+      >
+        <Skeleton class="h-5 w-3/4" />
+        <Skeleton class="h-5 w-2/3" />
+        <Skeleton class="h-5 w-1/2" />
+      </div>
+      <p
+        v-else-if="rootError"
+        class="px-2 text-sm text-destructive"
+        data-testid="file-tree-error"
+        role="alert"
+      >
+        {{ rootError }}
+      </p>
+      <p
+        v-else-if="rootNodes.length === 0"
+        class="px-2 text-sm text-muted-foreground"
+        data-testid="file-tree-empty"
+      >
+        No files.
+      </p>
+      <ul
+        v-else
+        class="flex flex-col"
+        role="tree"
+        data-testid="file-tree-list"
+      >
+        <FileTreeNode
+          v-for="node in rootNodes"
+          :key="node.path"
+          :node="node"
+          :depth="0"
+        />
+      </ul>
+    </CardContent>
+  </Card>
+</template>

package/src/components/compositions/elements/code/GitCodeEditor.stories.ts

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import GitCodeEditor from "./GitCodeEditor.vue"
+import type { GitCodeEditorLoadedFile } from "./GitCodeEditor.vue"
+
+const BRANCHES = ["main", "develop", "feat/new-card", "hotfix/login"]
+
+const SAMPLE: Record<string, string> = {
+  "README.md": "# Project\n\nHello world.\n",
+  "src/index.ts": "export const greet = (n: string) => `Hi ${n}`\n",
+  "package.json": `{\n  "name": "demo",\n  "version": "1.0.0"\n}\n`,
+}
+
+function mockLoadBranches(delay = 150): () => Promise<string[]> {
+  return () =>
+    new Promise((r) => setTimeout(() => r(BRANCHES), delay))
+}
+
+function mockLoadFile(
+  delay = 200,
+): (p: string, b: string) => Promise<GitCodeEditorLoadedFile> {
+  return (p) =>
+    new Promise((resolve) =>
+      setTimeout(() => {
+        const content = SAMPLE[p] ?? `// ${p}\n// (no sample content)\n`
+        const language = p.endsWith(".ts")
+          ? "typescript"
+          : p.endsWith(".md")
+            ? "markdown"
+            : p.endsWith(".json")
+              ? "json"
+              : "plaintext"
+        resolve({ content, language })
+      }, delay),
+    )
+}
+
+function mockSaveFile(
+  delay = 400,
+): (p: string, b: string, c: string) => Promise<void> {
+  return () => new Promise((r) => setTimeout(() => r(), delay))
+}
+
+const meta = {
+  title: "Compositions/Elements/Code/GitCodeEditor",
+  component: GitCodeEditor,
+  tags: ["autodocs"],
+  args: {
+    label: "Git Code Editor",
+    repository: "gramercy/demo",
+    branch: "main",
+    path: "README.md",
+    onLoadBranches: mockLoadBranches(),
+    onLoadFile: mockLoadFile(),
+  },
+  decorators: [
+    () => ({
+      template: '<div class="w-[640px] p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof GitCodeEditor>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: "README",
+    repository: "gramercy/demo",
+    branch: "main",
+    path: "README.md",
+    onLoadBranches: mockLoadBranches(),
+    onLoadFile: mockLoadFile(),
+  },
+}
+
+export const WithSave: Story = {
+  args: {
+    label: "Editable file",
+    repository: "gramercy/demo",
+    branch: "main",
+    path: "src/index.ts",
+    onLoadBranches: mockLoadBranches(),
+    onLoadFile: mockLoadFile(),
+    onSaveFile: mockSaveFile(),
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    label: "Loading",
+    repository: "gramercy/demo",
+    branch: "main",
+    path: "src/index.ts",
+    onLoadBranches: mockLoadBranches(2_000_000),
+    onLoadFile: () => new Promise(() => {}),
+  },
+}
+
+export const ErrorState: Story = {
+  args: {
+    label: "Editor",
+    repository: "gramercy/demo",
+    branch: "main",
+    path: "missing.md",
+    onLoadBranches: mockLoadBranches(),
+    onLoadFile: () =>
+      Promise.reject(new globalThis.Error("File not found in branch main")),
+  },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { GitCodeEditor },
+    setup() {
+      return {
+        onLoadBranches: mockLoadBranches(),
+        onLoadFile: mockLoadFile(),
+        onSaveFile: mockSaveFile(),
+      }
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <GitCodeEditor
+          label="README"
+          repository="gramercy/demo"
+          branch="main"
+          path="README.md"
+          :on-load-branches="onLoadBranches"
+          :on-load-file="onLoadFile"
+        />
+        <GitCodeEditor
+          label="Editable"
+          repository="gramercy/demo"
+          branch="develop"
+          path="src/index.ts"
+          :on-load-branches="onLoadBranches"
+          :on-load-file="onLoadFile"
+          :on-save-file="onSaveFile"
+        />
+      </div>
+    `,
+  }),
+}