npm - @gxp-dev/mod-ui - Versions diffs - 2.0.0 → 2.0.3 - Mend

@gxp-dev/mod-ui 2.0.0 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (811) hide show

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

@@ -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 CHANGED Viewed

@@ -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)
   })
 })

package/src/components/compositions/elements/editor/CodeEditor.vue CHANGED Viewed

@@ -1,16 +1,30 @@
 <script setup lang="ts">
-/**
- * Props-driven code editor composition. Monospace `<textarea>` with a
- * "syntax highlighting coming soon" hint. Composes `FieldFrame` chrome
- * (label + helpText + errors).
- *
- * Self-contained — usable directly in any Vue app:
- *
- *   <CodeEditor v-model="source" language="typescript" />
- */
-import { Code2 } from "lucide-vue-next"
-import { Badge } from "@/components/ui/badge"
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { useDark } from "@vueuse/core"
+import { basicSetup, EditorView } from "codemirror"
+import { Compartment, EditorState } from "@codemirror/state"
+import { oneDark } from "@codemirror/theme-one-dark"
+import { javascript } from "@codemirror/lang-javascript"
+import { html } from "@codemirror/lang-html"
+import { css } from "@codemirror/lang-css"
+import { json } from "@codemirror/lang-json"
+import { python } from "@codemirror/lang-python"
+import { sql } from "@codemirror/lang-sql"
+import { php } from "@codemirror/lang-php"
+import {
+  AlignLeft,
+  ChevronDown,
+  FileCode2,
+} from "lucide-vue-next"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
 import { FieldFrame } from "@/components/ui/field-frame"
+import { cn } from "@/lib/utils"
 export interface CodeEditorProps {
   modelValue?: string | null
@@ -24,20 +38,202 @@ export interface CodeEditorProps {
   disabled?: boolean
   helpText?: string
   errors?: string[]
+  /** Language for syntax highlighting. Defaults to "javascript". */
   language?: string
-  rows?: number
+  /** Fixed height for the editor area. If unset, min/max-height applies. */
+  height?: string
+  minHeight?: string
+  maxHeight?: string
 }
-withDefaults(defineProps<CodeEditorProps>(), {
+const props = withDefaults(defineProps<CodeEditorProps>(), {
   errors: () => [],
-  rows: 12,
+  language: "javascript",
+  minHeight: "12rem",
+  maxHeight: "40rem",
 })
-const model = defineModel<string | null>("modelValue")
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+}>()
-function onInput(event: Event): void {
-  const target = event.target as HTMLTextAreaElement | null
-  model.value = target?.value ?? ""
+// ---------------------------------------------------------------------------
+// Language registry
+// ---------------------------------------------------------------------------
+interface LangOption {
+  label: string
+  value: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ext: () => any
+}
+const LANGUAGES: LangOption[] = [
+  { label: "JavaScript", value: "javascript", ext: () => javascript() },
+  { label: "TypeScript", value: "typescript", ext: () => javascript({ typescript: true }) },
+  { label: "JSX", value: "jsx", ext: () => javascript({ jsx: true }) },
+  { label: "TSX", value: "tsx", ext: () => javascript({ jsx: true, typescript: true }) },
+  { label: "HTML", value: "html", ext: () => html() },
+  { label: "CSS", value: "css", ext: () => css() },
+  { label: "JSON", value: "json", ext: () => json() },
+  { label: "Python", value: "python", ext: () => python() },
+  { label: "SQL", value: "sql", ext: () => sql() },
+  { label: "PHP", value: "php", ext: () => php() },
+]
+function getLangExtension(lang: string) {
+  return LANGUAGES.find((l) => l.value === lang)?.ext() ?? javascript()
+}
+// ---------------------------------------------------------------------------
+// State
+// ---------------------------------------------------------------------------
+const editorEl = ref<HTMLElement | null>(null)
+let view: EditorView | null = null
+const isDark = useDark()
+const isInert = computed(() => Boolean(props.disabled || props.readonly))
+const hasErrors = computed(() => props.errors.length > 0)
+const activeLanguage = ref(props.language ?? "javascript")
+// CodeMirror Compartments allow hot-swapping extensions
+const langCompartment = new Compartment()
+const themeCompartment = new Compartment()
+const editableCompartment = new Compartment()
+const readonlyCompartment = new Compartment()
+// Prevent re-emitting when we programmatically set content
+let suppressEmit = false
+function buildTheme() {
+  return isDark.value ? oneDark : []
+}
+// ---------------------------------------------------------------------------
+// Mount / unmount
+// ---------------------------------------------------------------------------
+onMounted(() => {
+  if (!editorEl.value) return
+  const startDoc = props.modelValue ?? ""
+  const state = EditorState.create({
+    doc: startDoc,
+    extensions: [
+      basicSetup,
+      langCompartment.of(getLangExtension(activeLanguage.value)),
+      themeCompartment.of(buildTheme()),
+      editableCompartment.of(EditorView.editable.of(!isInert.value)),
+      readonlyCompartment.of(EditorState.readOnly.of(isInert.value)),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged && !suppressEmit) {
+          emit("update:modelValue", update.state.doc.toString())
+        }
+      }),
+      EditorView.theme({
+        "&": { fontSize: "0.8125rem" },
+        ".cm-scroller": {
+          fontFamily: "'ui-monospace', 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace",
+          overflow: "auto",
+          ...(props.height
+            ? { height: props.height }
+            : { minHeight: props.minHeight ?? "12rem", maxHeight: props.maxHeight ?? "40rem" }),
+        } as unknown as Record<string, string>,
+        ".cm-focused": { outline: "none" },
+      }),
+    ],
+  })
+  view = new EditorView({ state, parent: editorEl.value })
+})
+onBeforeUnmount(() => {
+  view?.destroy()
+  view = null
+})
+// ---------------------------------------------------------------------------
+// Reactivity
+// ---------------------------------------------------------------------------
+// External modelValue → editor
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!view) return
+    const current = view.state.doc.toString()
+    const next = value ?? ""
+    if (current === next) return
+    suppressEmit = true
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: next },
+    })
+    suppressEmit = false
+  },
+)
+// Dark mode toggle
+watch(isDark, () => {
+  view?.dispatch({ effects: themeCompartment.reconfigure(buildTheme()) })
+})
+// disabled/readonly
+watch(isInert, (v) => {
+  view?.dispatch({
+    effects: [
+      editableCompartment.reconfigure(EditorView.editable.of(!v)),
+      readonlyCompartment.reconfigure(EditorState.readOnly.of(v)),
+    ],
+  })
+})
+// Language change (programmatic)
+watch(activeLanguage, (lang) => {
+  view?.dispatch({ effects: langCompartment.reconfigure(getLangExtension(lang)) })
+})
+// language prop → activeLanguage (consumer controls)
+watch(
+  () => props.language,
+  (lang) => {
+    if (lang && lang !== activeLanguage.value) {
+      activeLanguage.value = lang
+    }
+  },
+)
+// ---------------------------------------------------------------------------
+// Actions
+// ---------------------------------------------------------------------------
+const activeLangLabel = computed(
+  () => LANGUAGES.find((l) => l.value === activeLanguage.value)?.label ?? activeLanguage.value,
+)
+const canFormatJson = computed(() => activeLanguage.value === "json")
+function setLanguage(lang: string): void {
+  activeLanguage.value = lang
+}
+function formatJson(): void {
+  if (!view) return
+  try {
+    const raw = view.state.doc.toString()
+    const formatted = JSON.stringify(JSON.parse(raw), null, 2)
+    if (formatted === raw) return
+    suppressEmit = true
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: formatted },
+    })
+    suppressEmit = false
+    emit("update:modelValue", formatted)
+  } catch {
+    // Invalid JSON — ignore
+  }
 }
 </script>
@@ -51,26 +247,98 @@ function onInput(event: Event): void {
     :errors="errors"
     data-testid="code-editor"
   >
-    <div class="flex items-center gap-2 text-xs text-muted-foreground">
-      <Code2 class="h-3.5 w-3.5" />
-      <span>Plain code editor</span>
-      <Badge variant="outline" class="font-mono text-[10px]">
-        {{ language ?? "syntax highlighting coming soon" }}
-      </Badge>
-    </div>
-    <textarea
-      :id="id"
-      :name="name ?? undefined"
-      :placeholder="placeholder ?? '// type your code here'"
-      :readonly="readonly"
-      :disabled="disabled"
-      :required="required"
-      :rows="rows"
-      :value="model ?? ''"
+    <div
+      :class="cn(
+        'overflow-hidden rounded-md border border-input shadow-sm',
+        hasErrors ? 'border-destructive ring-1 ring-destructive' : '',
+        isInert ? 'opacity-60' : '',
+      )"
       :data-element-name="name ?? undefined"
-      class="font-mono text-sm rounded-md border border-input bg-background px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-      :class="errors.length ? 'border-destructive ring-destructive' : ''"
-      @input="onInput"
-    />
+    >
+      <!-- Toolbar -->
+      <div
+        class="flex items-center gap-1 border-b border-border/60 bg-muted/40 px-2 py-1"
+        :class="isInert ? 'pointer-events-none' : ''"
+      >
+        <FileCode2 class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <!-- Language selector -->
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              class="h-6 gap-1 px-2 text-xs font-medium text-muted-foreground hover:text-foreground"
+              data-testid="code-editor-lang-trigger"
+            >
+              {{ activeLangLabel }}
+              <ChevronDown class="h-3 w-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" class="w-40">
+            <DropdownMenuItem
+              v-for="lang in LANGUAGES"
+              :key="lang.value"
+              :class="activeLanguage === lang.value ? 'bg-muted font-medium' : ''"
+              @click="setLanguage(lang.value)"
+            >
+              {{ lang.label }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <!-- Format JSON button -->
+        <Button
+          v-if="canFormatJson"
+          type="button"
+          variant="ghost"
+          size="sm"
+          class="h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
+          title="Format JSON"
+          data-testid="code-editor-format"
+          @click="formatJson"
+        >
+          <AlignLeft class="h-3 w-3" />
+          Format
+        </Button>
+      </div>
+      <!-- CodeMirror mount point -->
+      <div
+        ref="editorEl"
+        class="code-editor-cm"
+        :data-testid="'code-editor-content'"
+      />
+    </div>
   </FieldFrame>
 </template>
+<style scoped>
+/* Scoped overrides — keep CodeMirror inside our border/radius container */
+:deep(.cm-editor) {
+  height: 100%;
+}
+:deep(.cm-editor.cm-focused) {
+  outline: none;
+}
+:deep(.cm-gutters) {
+  border-right-color: var(--border);
+  background-color: var(--muted);
+}
+:deep(.cm-activeLineGutter) {
+  background-color: color-mix(in oklch, var(--muted) 80%, var(--background));
+}
+:deep(.cm-selectionBackground),
+:deep(.cm-focused .cm-selectionBackground) {
+  background-color: color-mix(in oklch, var(--primary) 25%, transparent) !important;
+}
+:deep(.cm-cursor) {
+  border-left-color: var(--foreground);
+}
+</style>