@prsm/mono-components 0.1.0

package/stories/DataTable.story.vue

@@ -0,0 +1,185 @@
+<script setup>
+import { ref, reactive } from "vue"
+import { logEvent } from "histoire/client"
+import DataTable from "../src/components/DataTable.vue"
+import Badge from "../src/components/Badge.vue"
+import Dropdown from "../src/components/Dropdown.vue"
+
+function makeUsers(count) {
+  const names = ["Alice Chen", "Bob Smith", "Carol Wu", "Dave Kim", "Eve Park", "Frank Lee", "Grace Liu", "Hank Zhao", "Iris Wang", "Jack Yang", "Kate Tan", "Leo Ng", "Mia Choi", "Nate Lin", "Olga Sun"]
+  const roles = ["admin", "editor", "viewer"]
+  const statuses = ["active", "inactive", "pending"]
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: names[i % names.length],
+    email: `${names[i % names.length].toLowerCase().replace(" ", ".")}@example.com`,
+    role: roles[i % roles.length],
+    status: statuses[i % statuses.length],
+    active: i % 3 !== 2,
+    score: Math.floor(Math.random() * 100)
+  }))
+}
+
+const users = reactive(makeUsers(47))
+const loading = ref(false)
+const lastEdit = ref(null)
+const lastAction = ref(null)
+
+const columns = [
+  { key: "id", label: "#", width: "50px", sortable: true },
+  { key: "name", label: "Name", sortable: true, editable: true },
+  { key: "email", label: "Email", sortable: true },
+  { key: "role", label: "Role", type: "enum", options: ["admin", "editor", "viewer"], editable: true },
+  { key: "status", label: "Status", sortable: true },
+  { key: "active", label: "Active", type: "boolean", editable: true, width: "70px" },
+  { key: "score", label: "Score", type: "number", sortable: true, editable: true, width: "80px" }
+]
+
+const badgeColumns = [
+  { key: "id", label: "#", width: "50px", sortable: true },
+  { key: "name", label: "Name", sortable: true },
+  { key: "email", label: "Email", sortable: true },
+  { key: "status", label: "Status", sortable: true },
+  { key: "score", label: "Score", sortable: true, width: "80px" }
+]
+
+const actionColumns = [
+  { key: "id", label: "#", width: "50px" },
+  { key: "name", label: "Name", sortable: true },
+  { key: "email", label: "Email", sortable: true },
+  { key: "status", label: "Status", sortable: true },
+  { key: "actions", label: "", width: "40px" }
+]
+
+const rowActions = [
+  { value: "edit", label: "Edit", icon: "material-symbols:edit-outline" },
+  { value: "duplicate", label: "Duplicate", icon: "material-symbols:content-copy" },
+  { value: "delete", label: "Delete", icon: "material-symbols:delete-outline" }
+]
+
+function handleRowUpdate({ key, column, value }) {
+  const row = users.find(r => r.id === key)
+  if (row) row[column] = value
+  lastEdit.value = { key, column, value }
+  logEvent("update:row", { key, column, value })
+}
+
+function handleAction(option, row) {
+  lastAction.value = { action: option.value, row: row.name, id: row.id }
+  logEvent("action", { action: option.value, row: row.name, id: row.id })
+}
+
+function simulateLoading() {
+  loading.value = true
+  setTimeout(() => { loading.value = false }, 2000)
+}
+</script>
+
+<template>
+  <Story title="DataTable">
+    <Variant title="Full Featured">
+      <div class="max-w-4xl">
+        <DataTable
+          :columns="columns"
+          :rows="users"
+          :page-size="10"
+          filterable
+          striped
+          @update:row="handleRowUpdate"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">
+          <template v-if="lastEdit">
+            last edit: row {{ lastEdit.key }} . {{ lastEdit.column }} = {{ lastEdit.value }}
+          </template>
+          <template v-else>click an underlined cell to edit, click anywhere in a boolean cell to toggle</template>
+        </div>
+      </template>
+    </Variant>
+    <Variant title="Row Actions (Dropdown)">
+      <div class="max-w-3xl">
+        <DataTable
+          :columns="actionColumns"
+          :rows="users"
+          :page-size="8"
+          filterable
+        >
+          <template #cell-status="{ value }">
+            <Badge :variant="value === 'active' ? 'success' : value === 'pending' ? 'warning' : 'neutral'">
+              {{ value }}
+            </Badge>
+          </template>
+          <template #cell-actions="{ row }">
+            <Dropdown
+              inline
+              icon="material-symbols:more-horiz"
+              :options="rowActions"
+              @select="opt => handleAction(opt, row)"
+            />
+          </template>
+        </DataTable>
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">
+          <template v-if="lastAction">
+            {{ lastAction.action }} on {{ lastAction.row }} (#{{ lastAction.id }})
+          </template>
+          <template v-else>click the ... icon to see row actions</template>
+        </div>
+      </template>
+    </Variant>
+    <Variant title="Custom Cell Slot (Badge)">
+      <div class="max-w-3xl">
+        <DataTable
+          :columns="badgeColumns"
+          :rows="users"
+          :page-size="8"
+        >
+          <template #cell-status="{ value }">
+            <Badge :variant="value === 'active' ? 'success' : value === 'pending' ? 'warning' : 'neutral'">
+              {{ value }}
+            </Badge>
+          </template>
+        </DataTable>
+      </div>
+    </Variant>
+    <Variant title="Loading">
+      <div class="max-w-3xl flex flex-col gap-2">
+        <button
+          class="self-start px-2 py-1 text-base bg-2 border border-line rounded-sm font-mono cursor-pointer hover:bg-3"
+          @click="simulateLoading"
+        >
+          simulate loading
+        </button>
+        <DataTable
+          :columns="badgeColumns"
+          :rows="loading ? [] : users"
+          :loading="loading"
+          :page-size="5"
+        />
+      </div>
+    </Variant>
+    <Variant title="Empty State">
+      <div class="max-w-3xl">
+        <DataTable
+          :columns="badgeColumns"
+          :rows="[]"
+          :page-size="5"
+        />
+      </div>
+    </Variant>
+    <Variant title="Compact (5 per page)">
+      <div class="max-w-3xl">
+        <DataTable
+          :columns="columns"
+          :rows="users"
+          :page-size="5"
+          filterable
+          filter-placeholder="find user..."
+          @update:row="handleRowUpdate"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/Dropdown.story.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from "vue"
+import Dropdown from "../src/components/Dropdown.vue"
+
+const selected = ref("grid")
+</script>
+
+<template>
+  <Story title="Dropdown">
+    <Variant title="With Icon and Label">
+      <Dropdown
+        v-model="selected"
+        icon="material-symbols:view-module"
+        label="View"
+        header="Layout"
+        :options="[
+          { value: 'grid', label: 'Grid', icon: 'material-symbols:grid-view' },
+          { value: 'list', label: 'List', icon: 'material-symbols:view-list' },
+          { value: 'board', label: 'Board', icon: 'material-symbols:view-kanban' }
+        ]"
+      />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">value: {{ selected }}</div>
+      </template>
+    </Variant>
+    <Variant title="With Meta">
+      <Dropdown
+        v-model="selected"
+        label="Sort"
+        :options="[
+          { value: 'name', label: 'Name', meta: 'A-Z' },
+          { value: 'date', label: 'Date', meta: 'newest' },
+          { value: 'size', label: 'Size', meta: 'largest' }
+        ]"
+      />
+    </Variant>
+    <Variant title="With Action">
+      <Dropdown
+        v-model="selected"
+        label="File"
+        :options="[
+          { value: 'save', label: 'Save' },
+          { value: 'export', label: 'Export' },
+          { value: 'delete', label: 'Delete', action: () => alert('delete!') }
+        ]"
+      />
+    </Variant>
+  </Story>
+</template>

package/stories/GhostInput.story.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { ref } from "vue"
+import GhostInput from "../src/components/GhostInput.vue"
+
+const title = ref("Untitled Project")
+const description = ref("")
+</script>
+
+<template>
+  <Story title="GhostInput">
+    <Variant title="Large (Title)">
+      <GhostInput v-model="title" size="lg" placeholder="Untitled..." />
+    </Variant>
+    <Variant title="Base (Description)">
+      <GhostInput v-model="description" placeholder="Add a description..." />
+    </Variant>
+    <Variant title="Stacked">
+      <div class="flex flex-col gap-1">
+        <GhostInput v-model="title" size="lg" placeholder="Untitled..." />
+        <GhostInput v-model="description" placeholder="Add a description..." />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/Input.story.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { ref } from "vue"
+import Input from "../src/components/Input.vue"
+
+const value = ref("")
+</script>
+
+<template>
+  <Story title="Input">
+    <Variant title="Default">
+      <Input v-model="value" placeholder="type something..." />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">value: "{{ value }}"</div>
+      </template>
+    </Variant>
+    <Variant title="With Value">
+      <Input model-value="hello world" />
+    </Variant>
+    <Variant title="Password">
+      <Input type="password" placeholder="password..." />
+    </Variant>
+  </Story>
+</template>

package/stories/KeyValue.story.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { reactive } from "vue"
+import { logEvent } from "histoire/client"
+import KeyValue from "../src/components/KeyValue.vue"
+import Badge from "../src/components/Badge.vue"
+
+const user = reactive({
+  name: "Alice Chen",
+  email: "alice@example.com",
+  role: "admin",
+  active: true,
+  score: 92,
+  created: "2024-01-15",
+  lastLogin: "2025-05-10 14:32"
+})
+
+const userFields = [
+  { key: "name", label: "Name", editable: true },
+  { key: "email", label: "Email", editable: true },
+  { key: "role", label: "Role", type: "enum", options: ["admin", "editor", "viewer"], editable: true },
+  { key: "active", label: "Active", type: "boolean", editable: true },
+  { key: "score", label: "Score", type: "number", editable: true },
+  { key: "created", label: "Created" },
+  { key: "lastLogin", label: "Last login" }
+]
+
+const config = reactive({
+  host: "localhost",
+  port: 5432,
+  database: "app_production",
+  ssl: true,
+  poolSize: 20,
+  timeout: 30000
+})
+
+const configFields = [
+  { key: "host", label: "Host", editable: true },
+  { key: "port", label: "Port", type: "number", editable: true },
+  { key: "database", label: "Database", editable: true },
+  { key: "ssl", label: "SSL", type: "boolean", editable: true },
+  { key: "poolSize", label: "Pool size", type: "number", editable: true },
+  { key: "timeout", label: "Timeout (ms)", type: "number", editable: true }
+]
+
+const server = reactive({
+  status: "active",
+  uptime: "14d 6h 23m",
+  cpu: "23%",
+  memory: "1.2 GB / 4 GB",
+  requests: "12,847",
+  errors: "3"
+})
+
+const serverFields = [
+  { key: "status", label: "Status" },
+  { key: "uptime", label: "Uptime" },
+  { key: "cpu", label: "CPU" },
+  { key: "memory", label: "Memory" },
+  { key: "requests", label: "Requests" },
+  { key: "errors", label: "Errors" }
+]
+
+function handleUpdate(obj, { key, value }) {
+  obj[key] = value
+  logEvent("update", { key, value })
+}
+</script>
+
+<template>
+  <Story title="KeyValue">
+    <Variant title="Editable User Profile">
+      <div class="max-w-sm border border-line rounded-sm overflow-hidden">
+        <KeyValue
+          :fields="userFields"
+          :data="user"
+          @update="e => handleUpdate(user, e)"
+        />
+      </div>
+    </Variant>
+    <Variant title="Database Config">
+      <div class="max-w-sm border border-line rounded-sm overflow-hidden">
+        <KeyValue
+          :fields="configFields"
+          :data="config"
+          label-width="100px"
+          @update="e => handleUpdate(config, e)"
+        />
+      </div>
+    </Variant>
+    <Variant title="Read-only with Custom Slot">
+      <div class="max-w-sm border border-line rounded-sm overflow-hidden">
+        <KeyValue
+          :fields="serverFields"
+          :data="server"
+          label-width="80px"
+        >
+          <template #value-status="{ value }">
+            <Badge :variant="value === 'active' ? 'success' : 'error'">{{ value }}</Badge>
+          </template>
+        </KeyValue>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/LabeledTextarea.story.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { ref } from "vue"
+import LabeledTextarea from "../src/components/LabeledTextarea.vue"
+import LabeledTextareaGroup from "../src/components/LabeledTextareaGroup.vue"
+
+const system = ref("high-level instructions for the model...")
+const prompt = ref("Based on the retrieved context, extract:\n- summary: 2-3 sentence overview\n- entities: all named entities (people, places, organizations)\n- sentiment: overall sentiment (positive, neutral, or negative)\n\nBe thorough but concise.")
+const empty = ref("")
+</script>
+
+<template>
+  <Story title="LabeledTextarea">
+    <Variant title="Standalone">
+      <LabeledTextarea v-model="system" label="System Instructions" />
+    </Variant>
+    <Variant title="Standalone (placeholder)">
+      <LabeledTextarea v-model="empty" label="Notes" placeholder="Write something..." />
+    </Variant>
+    <Variant title="Grouped">
+      <LabeledTextareaGroup>
+        <LabeledTextarea v-model="system" label="System Instructions" auto-grow />
+        <LabeledTextarea v-model="prompt" label="Per-Iteration Prompt" auto-grow />
+      </LabeledTextareaGroup>
+    </Variant>
+    <Variant title="With Icons">
+      <LabeledTextarea v-model="system" label="System Instructions" icon="material-symbols:settings" />
+    </Variant>
+    <Variant title="Grouped with Icons">
+      <LabeledTextareaGroup>
+        <LabeledTextarea v-model="system" label="System Instructions" icon="material-symbols:settings" auto-grow />
+        <LabeledTextarea v-model="prompt" label="Per-Iteration Prompt" icon="material-symbols:repeat" auto-grow />
+      </LabeledTextareaGroup>
+    </Variant>
+    <Variant title="Grouped with Footer">
+      <LabeledTextareaGroup>
+        <LabeledTextarea v-model="system" label="System Instructions" icon="material-symbols:settings" auto-grow />
+        <LabeledTextarea v-model="prompt" label="Per-Iteration Prompt" icon="material-symbols:repeat" auto-grow />
+        <template #footer>
+          <span class="text-xs text-success">bindings valid</span>
+        </template>
+      </LabeledTextareaGroup>
+    </Variant>
+  </Story>
+</template>

package/stories/Mention.story.vue

@@ -0,0 +1,166 @@
+<script setup>
+import { ref } from "vue"
+import Mention from "../src/components/Mention.vue"
+import { useMention } from "../src/composables/useMention.js"
+
+const text1 = ref("")
+const text2 = ref("")
+const text3 = ref("")
+const lastAction = ref(null)
+
+const users = [
+  { value: "alice", label: "Alice" },
+  { value: "bob", label: "Bob" },
+  { value: "carol", label: "Carol" },
+  { value: "dave", label: "Dave" },
+  { value: "eve", label: "Eve" },
+  { value: "frank", label: "Frank" },
+  { value: "grace", label: "Grace" },
+  { value: "heidi", label: "Heidi" },
+  { value: "ivan", label: "Ivan" },
+  { value: "judy", label: "Judy" },
+  { value: "karl", label: "Karl" },
+  { value: "liam", label: "Liam" },
+  { value: "mallory", label: "Mallory" },
+  { value: "nina", label: "Nina" },
+  { value: "oscar", label: "Oscar" },
+  { value: "peggy", label: "Peggy" },
+  { value: "quinn", label: "Quinn" },
+  { value: "rupert", label: "Rupert" },
+  { value: "sybil", label: "Sybil" },
+  { value: "trent", label: "Trent" }
+]
+
+const commands = [
+  { value: "help", label: "help" },
+  { value: "clear", label: "clear" },
+  { value: "export", label: "export" },
+  { value: "import", label: "import" },
+  { value: "settings", label: "settings" }
+]
+
+const actionCommands = [
+  { value: "bold", label: "bold", action: (item) => lastAction.value = item.label },
+  { value: "italic", label: "italic", action: (item) => lastAction.value = item.label },
+  { value: "code", label: "code", action: (item) => lastAction.value = item.label },
+  { value: "link", label: "link", action: (item) => lastAction.value = item.label },
+  { value: "image", label: "image", action: (item) => lastAction.value = item.label }
+]
+
+const mention1 = useMention([
+  { key: "@", items: users }
+])
+
+const mention2 = useMention([
+  {
+    key: "@",
+    onReveal: () => new Promise(r => setTimeout(() => r(users), 500))
+  },
+  { key: "/", items: commands }
+])
+
+const mention3 = useMention([
+  { key: "@", items: users },
+  { key: "/", action: true, items: actionCommands }
+])
+</script>
+
+<template>
+  <Story title="Mention">
+    <Variant title="Static @mentions">
+      <div class="w-[400px]">
+        <textarea
+          v-model="text1"
+          class="w-full h-24 px-2 py-1 bg-0 border border-line rounded-sm font-mono text-base text-fg-0 outline-none focus:border-accent resize-none"
+          placeholder="type @ to mention a user..."
+          v-on="mention1.handlers"
+        />
+        <Mention
+          :open="mention1.open.value"
+          :items="mention1.filtered.value"
+          :active-index="mention1.activeIndex.value"
+          :loading="mention1.loading.value"
+          :anchor="mention1.virtualAnchor.value"
+          @select="mention1.confirm($event)"
+          @hover="mention1.setActiveIndex($event)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">
+          <div>value: {{ text1 || '(empty)' }}</div>
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Multiple triggers (@ async + / static)">
+      <div class="w-[400px]">
+        <textarea
+          v-model="text2"
+          class="w-full h-24 px-2 py-1 bg-0 border border-line rounded-sm font-mono text-base text-fg-0 outline-none focus:border-accent resize-none"
+          placeholder="type @ for users (async), / for commands..."
+          v-on="mention2.handlers"
+        />
+        <Mention
+          :open="mention2.open.value"
+          :items="mention2.filtered.value"
+          :active-index="mention2.activeIndex.value"
+          :loading="mention2.loading.value"
+          :anchor="mention2.virtualAnchor.value"
+          @select="mention2.confirm($event)"
+          @hover="mention2.setActiveIndex($event)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">
+          <div>value: {{ text2 || '(empty)' }}</div>
+          <div>trigger: {{ mention2.activeTrigger.value?.key ?? 'none' }}</div>
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Action commands (/ strips text)">
+      <div class="w-[400px]">
+        <textarea
+          v-model="text3"
+          class="w-full h-24 px-2 py-1 bg-0 border border-line rounded-sm font-mono text-base text-fg-0 outline-none focus:border-accent resize-none"
+          placeholder="type @ to mention, / to run a command..."
+          v-on="mention3.handlers"
+        />
+        <Mention
+          :open="mention3.open.value"
+          :items="mention3.filtered.value"
+          :active-index="mention3.activeIndex.value"
+          :loading="mention3.loading.value"
+          :anchor="mention3.virtualAnchor.value"
+          @select="mention3.confirm($event)"
+          @hover="mention3.setActiveIndex($event)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">
+          <div>value: {{ text3 || '(empty)' }}</div>
+          <div>last action: {{ lastAction ?? 'none' }}</div>
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Input at bottom (flip test)">
+      <div class="w-[400px] flex flex-col justify-end" style="height: calc(100vh - 100px)">
+        <textarea
+          class="w-full h-24 px-2 py-1 bg-0 border border-line rounded-sm font-mono text-base text-fg-0 outline-none focus:border-accent resize-none"
+          placeholder="type @ here to see panel flip upward..."
+          v-on="mention1.handlers"
+        />
+        <Mention
+          :open="mention1.open.value"
+          :items="mention1.filtered.value"
+          :active-index="mention1.activeIndex.value"
+          :loading="mention1.loading.value"
+          :anchor="mention1.virtualAnchor.value"
+          @select="mention1.confirm($event)"
+          @hover="mention1.setActiveIndex($event)"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>