@gxp-dev/mod-ui 2.0.0

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

@@ -0,0 +1,185 @@
+import { describe, expect, it, vi } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+import GitCodeEditor from "./GitCodeEditor.vue"
+import type { GitCodeEditorLoadedFile } from "./GitCodeEditor.vue"
+
+function loadedFile(
+  content: string,
+  language?: string,
+): GitCodeEditorLoadedFile {
+  return { content, language }
+}
+
+describe("GitCodeEditor (props-based composition)", () => {
+  it("mounts without error", async () => {
+    const wrapper = mount(GitCodeEditor, { props: { label: "Editor" } })
+    await flushPromises()
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it("renders the default label", async () => {
+    const wrapper = mount(GitCodeEditor)
+    await flushPromises()
+    expect(wrapper.text()).toContain("Git Code Editor")
+  })
+
+  it("renders the repository chip when provided", async () => {
+    const wrapper = mount(GitCodeEditor, {
+      props: { repository: "gramercy/plugins" },
+    })
+    await flushPromises()
+    const chip = wrapper.find("[data-testid='git-code-editor-repository']")
+    expect(chip.exists()).toBe(true)
+    expect(chip.text()).toContain("gramercy/plugins")
+  })
+
+  it("calls onLoadBranches on mount", async () => {
+    const onLoadBranches = vi.fn().mockResolvedValue(["main", "develop"])
+    mount(GitCodeEditor, { props: { onLoadBranches } })
+    await flushPromises()
+    expect(onLoadBranches).toHaveBeenCalledTimes(1)
+  })
+
+  it("calls onLoadFile on mount when path and branch are set", async () => {
+    const onLoadFile = vi
+      .fn<
+        (p: string, b: string) => Promise<GitCodeEditorLoadedFile>
+      >()
+      .mockResolvedValue(loadedFile("hello"))
+    mount(GitCodeEditor, {
+      props: { path: "README.md", branch: "main", onLoadFile },
+    })
+    await flushPromises()
+    expect(onLoadFile).toHaveBeenCalledWith("README.md", "main")
+  })
+
+  it("populates modelValue from the loaded file", async () => {
+    const onLoadFile = vi
+      .fn<
+        (p: string, b: string) => Promise<GitCodeEditorLoadedFile>
+      >()
+      .mockResolvedValue(loadedFile("file body", "markdown"))
+    const wrapper = mount(GitCodeEditor, {
+      props: { path: "README.md", branch: "main", onLoadFile },
+    })
+    await flushPromises()
+    const ta = wrapper.find(
+      "[data-testid='git-code-editor-textarea']",
+    ).element as HTMLTextAreaElement
+    expect(ta.value).toBe("file body")
+    expect(wrapper.emitted("update:modelValue")?.flat()).toContain("file body")
+    expect(wrapper.text()).toContain("markdown")
+  })
+
+  it("re-loads when path changes", async () => {
+    const onLoadFile = vi
+      .fn<
+        (p: string, b: string) => Promise<GitCodeEditorLoadedFile>
+      >()
+      .mockResolvedValue(loadedFile("a"))
+    const wrapper = mount(GitCodeEditor, {
+      props: { path: "a.txt", branch: "main", onLoadFile },
+    })
+    await flushPromises()
+    expect(onLoadFile).toHaveBeenCalledTimes(1)
+    await wrapper.setProps({ path: "b.txt" })
+    await flushPromises()
+    expect(onLoadFile).toHaveBeenCalledWith("b.txt", "main")
+    expect(onLoadFile).toHaveBeenCalledTimes(2)
+  })
+
+  it("re-loads when branch changes", async () => {
+    const onLoadFile = vi
+      .fn<
+        (p: string, b: string) => Promise<GitCodeEditorLoadedFile>
+      >()
+      .mockResolvedValue(loadedFile("a"))
+    const wrapper = mount(GitCodeEditor, {
+      props: { path: "a.txt", branch: "main", onLoadFile },
+    })
+    await flushPromises()
+    expect(onLoadFile).toHaveBeenCalledTimes(1)
+    await wrapper.setProps({ branch: "develop" })
+    await flushPromises()
+    expect(onLoadFile).toHaveBeenCalledWith("a.txt", "develop")
+    expect(onLoadFile).toHaveBeenCalledTimes(2)
+  })
+
+  it("renders a loading indicator while the file is being loaded", async () => {
+    let resolve: (v: GitCodeEditorLoadedFile) => void = () => {}
+    const onLoadFile = vi.fn(
+      () =>
+        new Promise<GitCodeEditorLoadedFile>((r) => {
+          resolve = r
+        }),
+    )
+    const wrapper = mount(GitCodeEditor, {
+      props: { path: "a.txt", branch: "main", onLoadFile },
+    })
+    await flushPromises()
+    expect(wrapper.find("[data-testid='git-code-editor-loading']").exists()).toBe(
+      true,
+    )
+    resolve(loadedFile("hello"))
+    await flushPromises()
+    expect(wrapper.find("[data-testid='git-code-editor-loading']").exists()).toBe(
+      false,
+    )
+  })
+
+  it("shows a file-load error in the FieldFrame errors area", async () => {
+    const onLoadFile = vi
+      .fn<
+        (p: string, b: string) => Promise<GitCodeEditorLoadedFile>
+      >()
+      .mockRejectedValue(new Error("file gone"))
+    const wrapper = mount(GitCodeEditor, {
+      props: { path: "a.txt", branch: "main", onLoadFile },
+    })
+    await flushPromises()
+    expect(wrapper.text()).toContain("file gone")
+  })
+
+  it("hides the Save button when onSaveFile is not provided", async () => {
+    const wrapper = mount(GitCodeEditor, {
+      props: { path: "a.txt", branch: "main" },
+    })
+    await flushPromises()
+    expect(wrapper.find("[data-testid='git-code-editor-save']").exists()).toBe(
+      false,
+    )
+  })
+
+  it("calls onSaveFile when the Save button is clicked", async () => {
+    const onLoadFile = vi
+      .fn<
+        (p: string, b: string) => Promise<GitCodeEditorLoadedFile>
+      >()
+      .mockResolvedValue(loadedFile("hello"))
+    const onSaveFile = vi
+      .fn<(p: string, b: string, c: string) => Promise<void>>()
+      .mockResolvedValue(undefined)
+    const wrapper = mount(GitCodeEditor, {
+      props: { path: "a.txt", branch: "main", onLoadFile, onSaveFile },
+    })
+    await flushPromises()
+    const btn = wrapper.find("[data-testid='git-code-editor-save']")
+    expect(btn.exists()).toBe(true)
+    await btn.trigger("click")
+    await flushPromises()
+    expect(onSaveFile).toHaveBeenCalledWith("a.txt", "main", "hello")
+  })
+
+  it("emits update:modelValue when the textarea changes", async () => {
+    const wrapper = mount(GitCodeEditor, {
+      props: { branch: "main" },
+    })
+    await flushPromises()
+    const ta = wrapper.find("[data-testid='git-code-editor-textarea']")
+    ;(ta.element as HTMLTextAreaElement).value = "new contents"
+    await ta.trigger("input")
+    expect(wrapper.emitted("update:modelValue")?.flat()).toContain(
+      "new contents",
+    )
+  })
+})

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

@@ -0,0 +1,364 @@
+<script setup lang="ts">
+/**
+ * Props-driven git code editor composition. Wraps a textarea editor
+ * with a branch switcher, file-path input, and a save button. The
+ * composition makes no HTTP calls — the consumer supplies Promise-
+ * returning callbacks for loading branches, loading a file, and
+ * (optionally) saving it.
+ *
+ *   <GitCodeEditor
+ *     repository="gramercy/plugins"
+ *     v-model:branch="branch"
+ *     v-model:path="path"
+ *     v-model="content"
+ *     :on-load-branches="loadBranches"
+ *     :on-load-file="loadFile"
+ *     :on-save-file="saveFile"
+ *   />
+ */
+import { computed, onMounted, ref, watch } from "vue"
+import { GitBranch, Loader2, Save } from "lucide-vue-next"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { FieldFrame } from "@/components/ui/field-frame"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { cn } from "@/lib/utils"
+
+export interface GitCodeEditorLoadedFile {
+  content: string
+  language?: string
+}
+
+export interface GitCodeEditorProps {
+  /** Repository identifier (display only). */
+  repository?: string
+  /** Current branch (v-modelable). */
+  branch?: string
+  /** Current file path (v-modelable). */
+  path?: string
+  /** File content (v-modelable via modelValue). */
+  modelValue?: string
+  /** Lists the branches for the branch selector. */
+  onLoadBranches?: () => Promise<string[]>
+  /** REQUIRED loader for the current (path, branch). */
+  onLoadFile?: (
+    path: string,
+    branch: string,
+  ) => Promise<GitCodeEditorLoadedFile>
+  /** Optional save callback. When omitted, the save button is hidden. */
+  onSaveFile?: (path: string, branch: string, content: string) => Promise<void>
+  /** Syntax hint. Default plaintext; overridden by `onLoadFile`'s response. */
+  language?: string
+  readonly?: boolean
+  disabled?: boolean
+  required?: boolean
+  label?: string
+  hideLabel?: boolean
+  name?: string | null
+  id?: string
+  helpText?: string
+  errors?: string[]
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<GitCodeEditorProps>(), {
+  errors: () => [],
+  language: "plaintext",
+  label: "Git Code Editor",
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string]
+  "update:branch": [value: string]
+  "update:path": [value: string]
+  "update:language": [value: string]
+}>()
+
+const content = ref<string>(props.modelValue ?? "")
+const branchRef = ref<string>(props.branch ?? "")
+const pathRef = ref<string>(props.path ?? "")
+const languageRef = ref<string>(props.language ?? "plaintext")
+
+watch(
+  () => props.modelValue,
+  (next) => {
+    if (next !== undefined && next !== content.value) {
+      content.value = next
+    }
+  },
+)
+watch(
+  () => props.branch,
+  (next) => {
+    if (next !== undefined && next !== branchRef.value) {
+      branchRef.value = next
+    }
+  },
+)
+watch(
+  () => props.path,
+  (next) => {
+    if (next !== undefined && next !== pathRef.value) {
+      pathRef.value = next
+    }
+  },
+)
+watch(
+  () => props.language,
+  (next) => {
+    if (next !== undefined && next !== languageRef.value) {
+      languageRef.value = next
+    }
+  },
+)
+
+function updateContent(next: string | undefined): void {
+  const value = next ?? ""
+  content.value = value
+  emit("update:modelValue", value)
+}
+
+function updateBranch(next: string): void {
+  branchRef.value = next
+  emit("update:branch", next)
+}
+
+function updatePath(next: string | number | undefined): void {
+  const v = next === undefined ? "" : String(next)
+  pathRef.value = v
+  emit("update:path", v)
+}
+
+// --- branches loader -------------------------------------------------
+const branches = ref<string[]>([])
+const branchesLoading = ref<boolean>(false)
+const branchesError = ref<string | null>(null)
+
+async function loadBranches(): Promise<void> {
+  if (!props.onLoadBranches) {
+    return
+  }
+  branchesLoading.value = true
+  branchesError.value = null
+  try {
+    const next = await props.onLoadBranches()
+    branches.value = Array.isArray(next) ? next : []
+  } catch (err) {
+    branchesError.value = err instanceof Error ? err.message : String(err)
+    branches.value = []
+  } finally {
+    branchesLoading.value = false
+  }
+}
+
+// --- file loader -----------------------------------------------------
+const fileLoading = ref<boolean>(false)
+const fileError = ref<string | null>(null)
+let fileToken = 0
+
+async function loadFile(): Promise<void> {
+  if (!props.onLoadFile) {
+    return
+  }
+  if (!pathRef.value || !branchRef.value) {
+    return
+  }
+  const myToken = ++fileToken
+  fileLoading.value = true
+  fileError.value = null
+  try {
+    const result = await props.onLoadFile(pathRef.value, branchRef.value)
+    if (myToken !== fileToken) {
+      return
+    }
+    const next = result?.content ?? ""
+    content.value = next
+    emit("update:modelValue", next)
+    if (result?.language) {
+      languageRef.value = result.language
+      emit("update:language", result.language)
+    }
+  } catch (err) {
+    if (myToken !== fileToken) {
+      return
+    }
+    fileError.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    if (myToken === fileToken) {
+      fileLoading.value = false
+    }
+  }
+}
+
+watch([branchRef, pathRef], () => {
+  void loadFile()
+})
+
+// --- save ------------------------------------------------------------
+const saving = ref<boolean>(false)
+const saveError = ref<string | null>(null)
+
+async function save(): Promise<void> {
+  if (!props.onSaveFile) {
+    return
+  }
+  if (!pathRef.value || !branchRef.value) {
+    return
+  }
+  saving.value = true
+  saveError.value = null
+  try {
+    await props.onSaveFile(pathRef.value, branchRef.value, content.value)
+  } catch (err) {
+    saveError.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    saving.value = false
+  }
+}
+
+const branchOptions = computed<string[]>(() => {
+  const all = new Set(branches.value)
+  if (branchRef.value) {
+    all.add(branchRef.value)
+  }
+  return Array.from(all)
+})
+
+const allErrors = computed<string[]>(() => {
+  const out = [...(props.errors ?? [])]
+  if (fileError.value) {
+    out.push(fileError.value)
+  }
+  if (saveError.value) {
+    out.push(saveError.value)
+  }
+  return out
+})
+
+const showSave = computed<boolean>(() => Boolean(props.onSaveFile))
+
+onMounted(() => {
+  void loadBranches()
+  void loadFile()
+})
+
+defineExpose({ reload: loadFile, save })
+</script>
+
+<template>
+  <FieldFrame
+    :label="label"
+    :required="required"
+    :hide-label="hideLabel"
+    :for="id"
+    :help-text="helpText"
+    :errors="allErrors"
+    :class="cn(props.classList)"
+  >
+    <Card
+      :data-element-name="props.name ?? undefined"
+      data-testid="git-code-editor"
+    >
+      <CardHeader class="flex flex-col gap-2 border-b py-3">
+        <div class="flex flex-wrap items-center gap-2">
+          <div
+            v-if="props.repository"
+            class="flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground"
+            data-testid="git-code-editor-repository"
+          >
+            <GitBranch class="size-3.5" />
+            <span>{{ props.repository }}</span>
+          </div>
+
+          <div class="min-w-40" data-testid="git-code-editor-branch-wrapper">
+            <Select
+              :model-value="branchRef"
+              :disabled="disabled || readonly || branchesLoading"
+              @update:model-value="(v) => updateBranch(String(v ?? ''))"
+            >
+              <SelectTrigger
+                data-testid="git-code-editor-branch-trigger"
+                :aria-label="'Branch'"
+              >
+                <SelectValue placeholder="Select branch" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem
+                  v-for="b in branchOptions"
+                  :key="b"
+                  :value="b"
+                  :data-testid="`git-code-editor-branch-${b}`"
+                >
+                  {{ b }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Input
+            :model-value="pathRef"
+            placeholder="path/to/file"
+            class="flex-1 min-w-48"
+            :disabled="disabled || readonly"
+            data-testid="git-code-editor-path-input"
+            @update:model-value="updatePath"
+          />
+
+          <Button
+            v-if="showSave"
+            type="button"
+            variant="default"
+            size="sm"
+            :disabled="
+              saving || disabled || readonly || !pathRef || !branchRef
+            "
+            data-testid="git-code-editor-save"
+            @click="save"
+          >
+            <Loader2 v-if="saving" class="size-4 animate-spin" />
+            <Save v-else class="size-4" />
+            <span>{{ saving ? "Saving…" : "Save" }}</span>
+          </Button>
+        </div>
+        <p
+          v-if="languageRef"
+          class="text-[10px] uppercase tracking-wide text-muted-foreground"
+          data-testid="git-code-editor-language"
+        >
+          {{ languageRef }}
+        </p>
+      </CardHeader>
+      <CardContent class="p-0">
+        <div
+          v-if="fileLoading"
+          class="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground"
+          data-testid="git-code-editor-loading"
+        >
+          <Loader2 class="size-4 animate-spin" />
+          <span>Loading file…</span>
+        </div>
+        <Textarea
+          :id="id"
+          :model-value="content"
+          :readonly="readonly || fileLoading"
+          :disabled="disabled"
+          :required="required"
+          :rows="16"
+          spellcheck="false"
+          class="min-h-64 rounded-none border-0 font-mono text-xs focus-visible:ring-0 focus-visible:ring-offset-0"
+          :data-element-name="props.name ?? undefined"
+          data-testid="git-code-editor-textarea"
+          @update:model-value="updateContent"
+        />
+      </CardContent>
+    </Card>
+  </FieldFrame>
+</template>

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

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import PullRequestsList from "./PullRequestsList.vue"
+import type {
+  PullRequest,
+  PullRequestsListFilter,
+} from "./PullRequestsList.vue"
+
+const SAMPLE: PullRequest[] = [
+  {
+    id: "1",
+    number: 101,
+    title: "Add login form",
+    authorName: "Alice Adams",
+    authorAvatarUrl: "https://i.pravatar.cc/64?img=1",
+    status: "open",
+    branchName: "feat/login",
+    targetBranch: "main",
+    updatedAt: new Date(Date.now() - 1000 * 60 * 5).toISOString(),
+  },
+  {
+    id: "2",
+    number: 102,
+    title: "Fix dashboard crash on empty state",
+    authorName: "Bob Brown",
+    authorAvatarUrl: "https://i.pravatar.cc/64?img=2",
+    status: "merged",
+    branchName: "fix/dashboard",
+    targetBranch: "main",
+    updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
+  },
+  {
+    id: "3",
+    number: 103,
+    title: "WIP: New theme tokens",
+    authorName: "Carol Coyle",
+    status: "draft",
+    branchName: "theme/tokens",
+    targetBranch: "develop",
+    updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
+  },
+  {
+    id: "4",
+    number: 99,
+    title: "Drop legacy API endpoint",
+    authorName: "Dave Diaz",
+    status: "closed",
+    branchName: "chore/legacy-api",
+    targetBranch: "main",
+    updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString(),
+  },
+]
+
+function mockLoad(
+  delay = 200,
+): (filter?: PullRequestsListFilter) => Promise<PullRequest[]> {
+  return (filter) =>
+    new Promise((resolve) =>
+      setTimeout(() => {
+        let out = SAMPLE
+        if (filter?.status) {
+          out = out.filter((p) => p.status === filter.status)
+        }
+        if (filter?.query) {
+          const q = filter.query.toLowerCase()
+          out = out.filter((p) => p.title.toLowerCase().includes(q))
+        }
+        resolve(out)
+      }, delay),
+    )
+}
+
+const meta = {
+  title: "Compositions/Elements/Code/PullRequestsList",
+  component: PullRequestsList,
+  tags: ["autodocs"],
+  args: {
+    label: "Pull Requests",
+    onLoadPullRequests: mockLoad(),
+  },
+  decorators: [
+    () => ({
+      template: '<div class="w-[640px] p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof PullRequestsList>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    onLoadPullRequests: mockLoad(),
+  },
+}
+
+export const WithSelectedItem: Story = {
+  args: {
+    onLoadPullRequests: mockLoad(),
+    selectedId: "2",
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    onLoadPullRequests: () => new Promise(() => {}),
+  },
+}
+
+export const ErrorState: Story = {
+  args: {
+    onLoadPullRequests: () =>
+      Promise.reject(new globalThis.Error("Could not load pull requests")),
+  },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { PullRequestsList },
+    setup() {
+      return { load: mockLoad(150) }
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <PullRequestsList label="All PRs" :on-load-pull-requests="load" />
+        <PullRequestsList
+          label="Open only"
+          :on-load-pull-requests="load"
+          :default-filter="{ status: 'open' }"
+        />
+        <PullRequestsList
+          label="With selection"
+          :on-load-pull-requests="load"
+          selected-id="2"
+        />
+      </div>
+    `,
+  }),
+}