@gxp-dev/mod-ui 2.0.0 → 2.0.1

package/src/components/compositions/elements/display/ChartDisplay.stories.ts

@@ -1,6 +1,7 @@
 import type { ChartData } from "chart.js"
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ChartDisplay from "./ChartDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const lineData: ChartData<"line"> = {
   labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
@@ -61,7 +62,7 @@ const radarData: ChartData<"radar"> = {
 }
 
 const meta = {
-  title: "Compositions/Elements/Display/ChartDisplay",
+  title: "Elements/Display/ChartDisplay",
   component: ChartDisplay,
   tags: ["autodocs"],
   args: {
@@ -69,6 +70,7 @@ const meta = {
     data: lineData as ChartData,
     height: 320,
   },
+  parameters: componentDoc("ChartDisplay", { barrel: "display" }),
   decorators: [
     () => ({ template: '<div class="max-w-2xl p-4"><story /></div>' }),
   ],

package/src/components/compositions/elements/display/HtmlDisplay.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import HtmlDisplay from "./HtmlDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/HtmlDisplay",
+  title: "Elements/Display/HtmlDisplay",
   component: HtmlDisplay,
   tags: ["autodocs"],
   args: {
     value: "<p>This is <strong>raw HTML</strong>.</p>",
   },
+  parameters: componentDoc("HtmlDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-prose p-4"><story /></div>',

package/src/components/compositions/elements/display/IconDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import IconDisplay from "./IconDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/IconDisplay",
+  title: "Elements/Display/IconDisplay",
   component: IconDisplay,
   tags: ["autodocs"],
   args: { iconName: "Check", size: 20 },
+  parameters: componentDoc("IconDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="p-4"><story /></div>',

package/src/components/compositions/elements/display/IframeDisplay.stories.ts

@@ -1,14 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import IframeDisplay from "./IframeDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/IframeDisplay",
+  title: "Elements/Display/IframeDisplay",
   component: IframeDisplay,
   tags: ["autodocs"],
   args: {
     src: "https://example.com",
     title: "Example.com",
   },
+  parameters: componentDoc("IframeDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-3xl p-4"><story /></div>',

package/src/components/compositions/elements/display/ImageDisplay.stories.ts

@@ -1,14 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ImageDisplay from "./ImageDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/ImageDisplay",
+  title: "Elements/Display/ImageDisplay",
   component: ImageDisplay,
   tags: ["autodocs"],
   args: {
     src: "https://picsum.photos/seed/gxp/600/400",
     alt: "Random landscape",
   },
+  parameters: componentDoc("ImageDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-md p-4"><story /></div>',

package/src/components/compositions/elements/display/MarkdownDisplay.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import MarkdownDisplay from "./MarkdownDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/MarkdownDisplay",
+  title: "Elements/Display/MarkdownDisplay",
   component: MarkdownDisplay,
   tags: ["autodocs"],
   args: {
     value: "# Hello\n\nThis is **markdown**.",
   },
+  parameters: componentDoc("MarkdownDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-prose p-4"><story /></div>',

package/src/components/compositions/elements/display/ProgressBarDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ProgressBarDisplay from "./ProgressBarDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/ProgressBarDisplay",
+  title: "Elements/Display/ProgressBarDisplay",
   component: ProgressBarDisplay,
   tags: ["autodocs"],
   args: { progress: 50, label: "Setup progress" },
+  parameters: componentDoc("ProgressBarDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-md p-4"><story /></div>',

package/src/components/compositions/elements/display/QrCodeDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import QrCodeDisplay from "./QrCodeDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/QrCodeDisplay",
+  title: "Elements/Display/QrCodeDisplay",
   component: QrCodeDisplay,
   tags: ["autodocs"],
   args: { value: "https://example.com" },
+  parameters: componentDoc("QrCodeDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="p-4"><story /></div>',

package/src/components/compositions/elements/display/ReactiveCanvasDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ReactiveCanvasDisplay from "./ReactiveCanvasDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/ReactiveCanvasDisplay",
+  title: "Elements/Display/ReactiveCanvasDisplay",
   component: ReactiveCanvasDisplay,
   tags: ["autodocs"],
   args: { label: "Live preview" },
+  parameters: componentDoc("ReactiveCanvasDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-xl p-4"><story /></div>',

package/src/components/compositions/elements/display/SpriteDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import SpriteDisplay from "./SpriteDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/SpriteDisplay",
+  title: "Elements/Display/SpriteDisplay",
   component: SpriteDisplay,
   tags: ["autodocs"],
   args: { label: "Confetti" },
+  parameters: componentDoc("SpriteDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-xl p-4"><story /></div>',

package/src/components/compositions/elements/display/TypeDisplay.stories.ts

@@ -1,14 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import TypeDisplay from "./TypeDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/TypeDisplay",
+  title: "Elements/Display/TypeDisplay",
   component: TypeDisplay,
   tags: ["autodocs"],
   args: {
     value: "The quick brown fox jumps over the lazy dog.",
     contentType: "paragraph",
   },
+  parameters: componentDoc("TypeDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-prose p-4"><story /></div>',

package/src/components/compositions/elements/display/VideoPlayerDisplay.stories.ts

@@ -1,16 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import VideoPlayerDisplay from "./VideoPlayerDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const SAMPLE_MP4 =
   "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
 
 const meta = {
-  title: "Compositions/Elements/Display/VideoPlayerDisplay",
+  title: "Elements/Display/VideoPlayerDisplay",
   component: VideoPlayerDisplay,
   tags: ["autodocs"],
   args: {
     src: SAMPLE_MP4,
   },
+  parameters: componentDoc("VideoPlayerDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-2xl p-4"><story /></div>',

package/src/components/compositions/elements/editor/CodeEditor.stories.ts

@@ -2,12 +2,19 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import CodeEditor from "./CodeEditor.vue"
 
 const meta = {
-  title: "Compositions/Elements/Editor/CodeEditor",
+  title: "Elements/Editor/CodeEditor",
   component: CodeEditor,
   tags: ["autodocs"],
   args: {
     label: "Source",
-    placeholder: "// type your code here",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "```ts\nimport { CodeEditor } from \"@gxp-dev/mod-ui/editor\"\n```\n\nFull-featured code editor powered by CodeMirror 6. Supports syntax highlighting for JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, SQL, and PHP. Auto-switches to dark theme in dark mode. Includes a language picker and JSON formatter.",
+      },
+    },
   },
 } satisfies Meta<typeof CodeEditor>
 
@@ -15,25 +22,94 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: { label: "Source" },
+  args: { label: "JavaScript" },
 }
 
-export const WithLanguage: Story = {
-  args: { label: "TypeScript", language: "typescript" },
+export const TypeScript: Story = {
+  args: {
+    label: "TypeScript",
+    language: "typescript",
+    modelValue: `interface User {\n  id: number\n  name: string\n  email: string\n}\n\nfunction greet(user: User): string {\n  return \`Hello, \${user.name}!\`\n}`,
+  },
 }
 
-export const WithValue: Story = {
-  args: { label: "Source", modelValue: "const x = 1\nconsole.log(x)" },
+export const JSON: Story = {
+  args: {
+    label: "Config",
+    language: "json",
+    modelValue: `{"name":"my-app","version":"1.0.0","dependencies":{"vue":"^3.5.0"}}`,
+    helpText: "Use the Format button to pretty-print JSON.",
+  },
 }
 
-export const Disabled: Story = {
-  args: { label: "Disabled", disabled: true, modelValue: "// read-only" },
+export const HTML: Story = {
+  args: {
+    label: "Template",
+    language: "html",
+    modelValue: `<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <title>My Page</title>\n  </head>\n  <body>\n    <h1>Hello World</h1>\n  </body>\n</html>`,
+  },
 }
 
-export const Required: Story = {
-  args: { label: "Required", required: true },
+export const CSS: Story = {
+  args: {
+    label: "Styles",
+    language: "css",
+    modelValue: `:root {\n  --primary: oklch(65% 0.2 260);\n  --radius: 0.5rem;\n}\n\n.btn {\n  border-radius: var(--radius);\n  background: var(--primary);\n  color: white;\n}`,
+  },
+}
+
+export const Python: Story = {
+  args: {
+    label: "Script",
+    language: "python",
+    modelValue: `def fibonacci(n: int) -> list[int]:\n    a, b = 0, 1\n    result = []\n    while a < n:\n        result.append(a)\n        a, b = b, a + b\n    return result\n\nprint(fibonacci(100))`,
+  },
+}
+
+export const SQL: Story = {
+  args: {
+    label: "Query",
+    language: "sql",
+    modelValue: `SELECT\n  u.id,\n  u.name,\n  COUNT(o.id) AS order_count\nFROM users u\nLEFT JOIN orders o ON o.user_id = u.id\nWHERE u.created_at > NOW() - INTERVAL '30 days'\nGROUP BY u.id, u.name\nORDER BY order_count DESC\nLIMIT 20;`,
+  },
+}
+
+export const TallEditor: Story = {
+  args: {
+    label: "Large file",
+    language: "typescript",
+    minHeight: "28rem",
+    modelValue: `// A longer file to demonstrate the scrollable editor\nimport { ref, computed } from "vue"\n\nexport function useCounter(initial = 0) {\n  const count = ref(initial)\n  const doubled = computed(() => count.value * 2)\n  function increment() { count.value++ }\n  function decrement() { count.value-- }\n  function reset() { count.value = initial }\n  return { count, doubled, increment, decrement, reset }\n}`,
+  },
+}
+
+export const Readonly: Story = {
+  args: {
+    label: "Generated code (read-only)",
+    language: "typescript",
+    readonly: true,
+    modelValue: `// Auto-generated — do not edit\nexport const VERSION = "2.0.0"`,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled",
+    disabled: true,
+    language: "javascript",
+    modelValue: `// This field is disabled`,
+  },
 }
 
 export const WithErrors: Story = {
-  args: { label: "Source", errors: ["Invalid syntax."] },
+  args: {
+    label: "Config",
+    language: "json",
+    errors: ["Invalid JSON syntax"],
+    modelValue: `{broken json`,
+  },
+}
+
+export const Required: Story = {
+  args: { label: "Script", required: true, language: "python" },
 }

package/src/components/compositions/elements/editor/CodeEditor.test.ts

@@ -1,59 +1,90 @@
-import { describe, expect, it } from "vitest"
-import { mount } from "@vue/test-utils"
+import { beforeEach, describe, expect, it } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+import { createPinia, setActivePinia } from "pinia"
 import CodeEditor from "./CodeEditor.vue"
 
+async function mountEditor(
+  props: Partial<InstanceType<typeof CodeEditor>["$props"]> = {},
+) {
+  const wrapper = mount(CodeEditor, { props, attachTo: document.body })
+  await flushPromises()
+  return wrapper
+}
+
 describe("CodeEditor (props-based composition)", () => {
-  it("mounts and renders a textarea", () => {
-    const wrapper = mount(CodeEditor, { props: { label: "Field label" } })
-    expect(wrapper.find("textarea").exists()).toBe(true)
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it("mounts and renders the editor and toolbar", async () => {
+    const wrapper = await mountEditor({ label: "Field label" })
+    expect(wrapper.find("[data-testid='code-editor']").exists()).toBe(true)
+    expect(wrapper.find("[data-testid='code-editor-content']").exists()).toBe(true)
     expect(wrapper.text()).toContain("Field label")
   })
 
-  it("renders the language badge when provided", () => {
-    const wrapper = mount(CodeEditor, {
-      props: { label: "Code", language: "typescript" },
-    })
-    expect(wrapper.text()).toContain("typescript")
+  it("shows the active language in the toolbar", async () => {
+    const wrapper = await mountEditor({ language: "typescript" })
+    expect(wrapper.text()).toContain("TypeScript")
+  })
+
+  it("defaults to JavaScript language", async () => {
+    const wrapper = await mountEditor()
+    expect(wrapper.text()).toContain("JavaScript")
+  })
+
+  it("renders the label via FieldFrame", async () => {
+    const wrapper = await mountEditor({ label: "Source code" })
+    expect(wrapper.text()).toContain("Source code")
+  })
+
+  it("hides the label when hideLabel is true", async () => {
+    const wrapper = await mountEditor({ label: "Should hide", hideLabel: true })
+    expect(wrapper.find("[data-testid='field-frame-label']").exists()).toBe(false)
+  })
+
+  it("renders errors from props", async () => {
+    const wrapper = await mountEditor({ errors: ["Invalid syntax"] })
+    expect(wrapper.text()).toContain("Invalid syntax")
+    expect(wrapper.find("[data-testid='field-frame-errors']").exists()).toBe(true)
+  })
+
+  it("applies destructive border when errors are present", async () => {
+    const wrapper = await mountEditor({ errors: ["Bad"] })
+    expect(wrapper.html()).toContain("border-destructive")
+  })
+
+  it("renders help text", async () => {
+    const wrapper = await mountEditor({ helpText: "Write JavaScript here" })
+    expect(wrapper.text()).toContain("Write JavaScript here")
   })
 
-  it("hides the label when hideLabel is true", () => {
-    const wrapper = mount(CodeEditor, {
-      props: { label: "Should hide", hideLabel: true },
-    })
-    expect(wrapper.find("[data-testid='field-frame-label']").exists()).toBe(
-      false,
-    )
+  it("shows the Format button only for JSON language", async () => {
+    const jsonWrapper = await mountEditor({ language: "json" })
+    expect(jsonWrapper.find("[data-testid='code-editor-format']").exists()).toBe(true)
+
+    const jsWrapper = await mountEditor({ language: "javascript" })
+    expect(jsWrapper.find("[data-testid='code-editor-format']").exists()).toBe(false)
   })
 
-  it("forwards modelValue to the textarea", () => {
-    const wrapper = mount(CodeEditor, {
-      props: { modelValue: "console.log('hi')" },
-    })
-    expect(
-      (wrapper.find("textarea").element as HTMLTextAreaElement).value,
-    ).toBe("console.log('hi')")
+  it("disables the toolbar when readonly is set", async () => {
+    const wrapper = await mountEditor({ readonly: true })
+    expect(wrapper.html()).toContain("pointer-events-none")
   })
 
-  it("emits update:modelValue when the user types", async () => {
-    const wrapper = mount(CodeEditor)
-    await wrapper.find("textarea").setValue("const x = 1")
-    const emitted = wrapper.emitted("update:modelValue")
-    expect(emitted).toBeTruthy()
-    expect(emitted![emitted!.length - 1]).toEqual(["const x = 1"])
+  it("disables the toolbar when disabled is set", async () => {
+    const wrapper = await mountEditor({ disabled: true })
+    expect(wrapper.html()).toContain("pointer-events-none")
   })
 
-  it("renders errors and flips border to destructive", () => {
-    const wrapper = mount(CodeEditor, {
-      props: { errors: ["Invalid"] },
-    })
-    expect(wrapper.find("[data-testid='field-frame-errors']").exists()).toBe(
-      true,
-    )
-    expect(wrapper.find("textarea").classes()).toContain("border-destructive")
+  it("renders the language selector trigger", async () => {
+    const wrapper = await mountEditor({ language: "python" })
+    expect(wrapper.find("[data-testid='code-editor-lang-trigger']").exists()).toBe(true)
+    expect(wrapper.find("[data-testid='code-editor-lang-trigger']").text()).toContain("Python")
   })
 
-  it("works without any props at all", () => {
-    const wrapper = mount(CodeEditor)
-    expect(wrapper.find("textarea").exists()).toBe(true)
+  it("works without any props at all", async () => {
+    const wrapper = await mountEditor()
+    expect(wrapper.find("[data-testid='code-editor']").exists()).toBe(true)
   })
 })