@prsm/mono-components 0.1.0

package/stories/Modal.story.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref } from "vue"
+import Modal from "../src/components/Modal.vue"
+import Button from "../src/components/Button.vue"
+import Input from "../src/components/Input.vue"
+
+const basic = ref(false)
+const form = ref(false)
+const scrollable = ref(false)
+const persistent = ref(false)
+const nameVal = ref("")
+const emailVal = ref("")
+</script>
+
+<template>
+  <Story title="Modal">
+    <Variant title="Basic">
+      <Button @click="basic = true">Open Modal</Button>
+      <Modal v-model:open="basic">
+        <div class="p-4 flex flex-col gap-3 min-w-[300px]">
+          <span class="text-lg text-fg-0">Confirm action</span>
+          <span class="text-base text-fg-2">Are you sure you want to proceed?</span>
+          <div class="flex justify-end gap-2 mt-2">
+            <Button variant="outline" @click="basic = false">Cancel</Button>
+            <Button variant="primary" @click="basic = false">Confirm</Button>
+          </div>
+        </div>
+      </Modal>
+    </Variant>
+    <Variant title="Form">
+      <Button @click="form = true">Edit Profile</Button>
+      <Modal v-model:open="form">
+        <div class="p-4 flex flex-col gap-3 min-w-[360px]">
+          <span class="text-lg text-fg-0">Edit profile</span>
+          <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
+              <label class="text-base text-fg-2">Name</label>
+              <Input v-model="nameVal" placeholder="Your name..." autofocus />
+            </div>
+            <div class="flex flex-col gap-1">
+              <label class="text-base text-fg-2">Email</label>
+              <Input v-model="emailVal" placeholder="you@example.com" />
+            </div>
+          </div>
+          <div class="flex justify-end gap-2 mt-2">
+            <Button variant="outline" @click="form = false">Cancel</Button>
+            <Button variant="primary" @click="form = false">Save</Button>
+          </div>
+        </div>
+      </Modal>
+    </Variant>
+    <Variant title="Scrollable Content">
+      <Button @click="scrollable = true">Long Content</Button>
+      <Modal v-model:open="scrollable">
+        <template #header>
+          <div class="p-4 min-w-[360px]">
+            <span class="text-lg text-fg-0">Terms of service</span>
+          </div>
+        </template>
+        <div class="p-4 flex flex-col gap-2 text-base text-fg-1 min-w-[360px]">
+          <p v-for="i in 20" :key="i">
+            Paragraph {{ i }} - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <template #footer>
+          <div class="p-4 flex justify-end gap-2">
+            <Button variant="primary" @click="scrollable = false">Accept</Button>
+          </div>
+        </template>
+      </Modal>
+    </Variant>
+    <Variant title="Persistent (no backdrop close)">
+      <Button @click="persistent = true">Persistent Modal</Button>
+      <Modal v-model:open="persistent" :close-on-backdrop="false" :close-on-escape="false">
+        <div class="p-4 flex flex-col gap-3 min-w-[300px]">
+          <span class="text-lg text-fg-0">Required action</span>
+          <span class="text-base text-fg-2">You must explicitly close this modal.</span>
+          <div class="flex justify-end gap-2 mt-2">
+            <Button variant="primary" @click="persistent = false">Got it</Button>
+          </div>
+        </div>
+      </Modal>
+    </Variant>
+  </Story>
+</template>

package/stories/MultiCombobox.story.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { ref } from "vue"
+import { logEvent } from "histoire/client"
+import MultiCombobox from "../src/components/MultiCombobox.vue"
+
+const fruits = ref(["apple", "banana"])
+const fruitOptions = [
+  "apple", "banana", "cherry", "date", "elderberry",
+  "fig", "grape", "honeydew", "kiwi", "lemon",
+  "mango", "nectarine", "orange", "papaya", "quince"
+]
+
+const roles = ref(["admin"])
+const roleOptions = [
+  { value: "admin", label: "Admin" },
+  { value: "editor", label: "Editor" },
+  { value: "viewer", label: "Viewer" },
+  { value: "billing", label: "Billing" },
+  { value: "support", label: "Support" }
+]
+
+const tags = ref([])
+const tagOptions = [
+  "bug", "feature", "enhancement", "documentation",
+  "help wanted", "good first issue", "priority: high",
+  "priority: medium", "priority: low", "wontfix"
+]
+
+function handleUpdate(name, value) {
+  logEvent("update:modelValue", { name, value })
+}
+</script>
+
+<template>
+  <Story title="MultiCombobox">
+    <Variant title="Basic">
+      <div class="w-[300px]">
+        <MultiCombobox
+          v-model="fruits"
+          :options="fruitOptions"
+          placeholder="pick fruits..."
+          @update:model-value="v => handleUpdate('fruits', v)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ fruits.join(', ') }}</div>
+      </template>
+    </Variant>
+    <Variant title="Object Options">
+      <div class="w-[300px]">
+        <MultiCombobox
+          v-model="roles"
+          :options="roleOptions"
+          placeholder="assign roles..."
+          @update:model-value="v => handleUpdate('roles', v)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ roles.join(', ') }}</div>
+      </template>
+    </Variant>
+    <Variant title="Empty">
+      <div class="w-[300px]">
+        <MultiCombobox
+          v-model="tags"
+          :options="tagOptions"
+          placeholder="add labels..."
+          @update:model-value="v => handleUpdate('tags', v)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ tags.length ? tags.join(', ') : 'none' }}</div>
+      </template>
+    </Variant>
+  </Story>
+</template>

package/stories/NavTree.story.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { ref } from "vue"
+import { logEvent } from "histoire/client"
+import NavTree from "../src/components/NavTree.vue"
+import ScrollBox from "../src/components/ScrollBox.vue"
+import Badge from "../src/components/Badge.vue"
+
+const active = ref("overview")
+
+const sidebarItems = [
+  {
+    key: "general",
+    label: "General",
+    children: [
+      { key: "overview", label: "Overview", icon: "material-symbols:dashboard-outline" },
+      { key: "settings", label: "Settings", icon: "material-symbols:settings-outline" },
+      { key: "members", label: "Members", icon: "material-symbols:group-outline", badge: 5 }
+    ]
+  },
+  {
+    key: "content",
+    label: "Content",
+    children: [
+      { key: "pages", label: "Pages", icon: "material-symbols:description-outline" },
+      { key: "media", label: "Media", icon: "material-symbols:image-outline" },
+      { key: "create-page", label: "New page", icon: "material-symbols:add" }
+    ]
+  },
+  {
+    key: "system",
+    label: "System",
+    children: [
+      { key: "logs", label: "Logs", icon: "material-symbols:receipt-long-outline" },
+      { key: "api-keys", label: "API keys", icon: "material-symbols:key-outline" }
+    ]
+  }
+]
+
+const projectItems = [
+  {
+    key: "projects",
+    label: "Projects",
+    children: [
+      { key: "proj-1", label: "mono-components" },
+      { key: "proj-2", label: "axiom" },
+      { key: "proj-3", label: "prose-preact" },
+      { key: "create-project", label: "New project", icon: "material-symbols:add" }
+    ]
+  },
+  {
+    key: "recent",
+    label: "Recent",
+    children: [
+      { key: "proj-1", label: "mono-components" },
+      { key: "proj-3", label: "prose-preact" }
+    ]
+  }
+]
+
+const projectActive = ref("proj-1")
+
+const nestedItems = [
+  {
+    key: "org",
+    label: "Acme Corp",
+    children: [
+      {
+        key: "engineering",
+        label: "Engineering",
+        children: [
+          {
+            key: "frontend",
+            label: "Frontend",
+            children: [
+              { key: "react-app", label: "react-app" },
+              { key: "vue-app", label: "vue-app" },
+              { key: "design-system", label: "design-system" }
+            ]
+          },
+          {
+            key: "backend",
+            label: "Backend",
+            children: [
+              { key: "api-gateway", label: "api-gateway" },
+              { key: "auth-service", label: "auth-service" },
+              { key: "worker", label: "worker" }
+            ]
+          },
+          { key: "infra", label: "Infrastructure" }
+        ]
+      },
+      {
+        key: "design",
+        label: "Design",
+        children: [
+          { key: "brand", label: "Brand guidelines" },
+          { key: "figma", label: "Figma files" }
+        ]
+      },
+      { key: "org-settings", label: "Settings", icon: "material-symbols:settings-outline" }
+    ]
+  }
+]
+
+const nestedActive = ref("vue-app")
+
+const flatItems = [
+  { key: "inbox", label: "Inbox", icon: "material-symbols:inbox", badge: 12 },
+  { key: "drafts", label: "Drafts", icon: "material-symbols:edit-outline", badge: 3 },
+  { key: "sent", label: "Sent", icon: "material-symbols:send" },
+  { key: "archive", label: "Archive", icon: "material-symbols:archive-outline" },
+  { key: "trash", label: "Trash", icon: "material-symbols:delete-outline" }
+]
+
+const mailActive = ref("inbox")
+
+function handleSelect(key) {
+  logEvent("select", { key })
+}
+</script>
+
+<template>
+  <Story title="NavTree">
+    <Variant title="Sidebar Navigation">
+      <div class="w-56 h-80 bg-1 border border-line rounded-sm overflow-hidden">
+        <NavTree
+          v-model="active"
+          :items="sidebarItems"
+          :default-expanded="['general', 'content']"
+          @select="handleSelect"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">active: {{ active }}</div>
+      </template>
+    </Variant>
+    <Variant title="Project List">
+      <div class="w-56 h-64 bg-1 border border-line rounded-sm overflow-hidden">
+        <NavTree
+          v-model="projectActive"
+          :items="projectItems"
+          :default-expanded="true"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+    <Variant title="Deeply Nested">
+      <ScrollBox class="h-[256px] bg-1 border border-line rounded-sm">
+        <NavTree
+          v-model="nestedActive"
+          :items="nestedItems"
+          :default-expanded="['org', 'engineering', 'frontend', 'backend', 'design']"
+          @select="handleSelect"
+        />
+      </ScrollBox>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">active: {{ nestedActive }}</div>
+      </template>
+    </Variant>
+    <Variant title="Flat (no groups)">
+      <div class="w-48 h-64 bg-1 border border-line rounded-sm overflow-hidden">
+        <NavTree
+          v-model="mailActive"
+          :items="flatItems"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+    <Variant title="With Trailing Slot">
+      <div class="w-56 h-80 bg-1 border border-line rounded-sm overflow-hidden">
+        <NavTree
+          v-model="active"
+          :items="sidebarItems"
+          :default-expanded="['general', 'content']"
+          @select="handleSelect"
+        >
+          <template #trailing-members="{ node }">
+            <Badge variant="warning">{{ node.badge }}</Badge>
+          </template>
+        </NavTree>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/NumberInput.story.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { ref } from "vue"
+import NumberInput from "../src/components/NumberInput.vue"
+
+const integer = ref(50)
+const decimal = ref(0.5)
+const constrained = ref(5)
+</script>
+
+<template>
+  <Story title="NumberInput">
+    <Variant title="Default">
+      <NumberInput v-model="integer" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">value: {{ integer }}</div>
+      </template>
+    </Variant>
+    <Variant title="Decimal (step 0.1)">
+      <NumberInput v-model="decimal" :step="0.1" :precision="2" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">value: {{ decimal }}</div>
+      </template>
+    </Variant>
+    <Variant title="Constrained (0-10)">
+      <NumberInput v-model="constrained" :min="0" :max="10" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">value: {{ constrained }}</div>
+      </template>
+    </Variant>
+  </Story>
+</template>

package/stories/Overview.story.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref } from "vue"
+import { Icon } from "@iconify/vue"
+import Button from "../src/components/Button.vue"
+import Input from "../src/components/Input.vue"
+import NumberInput from "../src/components/NumberInput.vue"
+import Select from "../src/components/Select.vue"
+import Dropdown from "../src/components/Dropdown.vue"
+import Checkbox from "../src/components/Checkbox.vue"
+import Badge from "../src/components/Badge.vue"
+import Tabs from "../src/components/Tabs.vue"
+import ToggleGroup from "../src/components/ToggleGroup.vue"
+import ToggleButtons from "../src/components/ToggleButtons.vue"
+import RangeSlider from "../src/components/RangeSlider.vue"
+import RadioGroup from "../src/components/RadioGroup.vue"
+
+const inputVal = ref("")
+const numberVal = ref(42)
+const selectVal = ref("a")
+const dropdownVal = ref("grid")
+const checkVal = ref(true)
+const tabVal = ref("all")
+const toggleVal = ref("grid")
+const radioVal = ref("a")
+const toggleBtns = ref(["x", "y"])
+const rangeVal = ref(50)
+</script>
+
+<template>
+  <Story title="Overview" icon="material-symbols:dashboard">
+    <Variant title="Height Consistency">
+      <p class="text-xs text-fg-3 mb-3">all control-height elements should align vertically</p>
+      <div class="flex items-center gap-2 flex-wrap">
+        <Button>Button</Button>
+        <Button variant="primary">Primary</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="icon"><Icon icon="material-symbols:settings" class="text-base" /></Button>
+        <Button variant="ghost">Ghost</Button>
+        <Input v-model="inputVal" placeholder="input..." style="width: 120px" />
+        <NumberInput v-model="numberVal" style="width: 100px" />
+        <Select v-model="selectVal" :options="[{ value: 'a', label: 'Select' }]" />
+        <Dropdown v-model="dropdownVal" label="Dropdown" :options="[{ value: 'grid', label: 'Grid' }]" />
+        <Checkbox v-model="checkVal" label="Checkbox" />
+        <Badge variant="info">Badge</Badge>
+        <ToggleGroup v-model="toggleVal" :options="[{ value: 'grid', icon: 'material-symbols:grid-view' }, { value: 'list', icon: 'material-symbols:view-list' }]" />
+        <ToggleButtons v-model="toggleBtns" :options="['X', 'Y', 'Z']" />
+        <RangeSlider v-model="rangeVal" :min="0" :max="100" style="width: 120px" />
+        <RadioGroup v-model="radioVal" :options="[{ value: 'a', label: 'Radio A' }, { value: 'b', label: 'Radio B' }]" direction="horizontal" />
+      </div>
+    </Variant>
+    <Variant title="Tabs Height">
+      <div class="flex items-center gap-2">
+        <Tabs
+          v-model="tabVal"
+          :tabs="[
+            { key: 'all', label: 'All', count: 10 },
+            { key: 'active', label: 'Active' }
+          ]"
+        />
+        <Button variant="outline">Action</Button>
+        <Input v-model="inputVal" placeholder="search..." style="width: 120px" />
+      </div>
+    </Variant>
+    <Variant title="Form Layout">
+      <div class="flex flex-col gap-2 max-w-xs">
+        <div class="flex items-center gap-2">
+          <label class="text-base text-fg-2 w-16 shrink-0">Name</label>
+          <Input v-model="inputVal" placeholder="enter name..." />
+        </div>
+        <div class="flex items-center gap-2">
+          <label class="text-base text-fg-2 w-16 shrink-0">Count</label>
+          <NumberInput v-model="numberVal" :min="0" :max="100" />
+        </div>
+        <div class="flex items-center gap-2">
+          <label class="text-base text-fg-2 w-16 shrink-0">Type</label>
+          <Select v-model="selectVal" :options="['a', 'b', 'c']" />
+        </div>
+        <div class="flex items-center gap-2">
+          <label class="text-base text-fg-2 w-16 shrink-0">Active</label>
+          <Checkbox v-model="checkVal" />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/PopConfirm.story.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { ref } from "vue"
+import PopConfirm from "../src/components/PopConfirm.vue"
+import Button from "../src/components/Button.vue"
+
+const lastAction = ref("none")
+</script>
+
+<template>
+  <Story title="PopConfirm">
+    <Variant title="Default">
+      <PopConfirm @confirm="lastAction = 'confirmed'" @cancel="lastAction = 'cancelled'">
+        <Button>Click here</Button>
+      </PopConfirm>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">last action: {{ lastAction }}</div>
+      </template>
+    </Variant>
+    <Variant title="Custom Message">
+      <PopConfirm
+        message="Delete this item?"
+        confirm-label="Delete"
+        cancel-label="Nope"
+        icon="material-symbols:delete-outline"
+        @confirm="lastAction = 'deleted'"
+        @cancel="lastAction = 'cancelled'"
+      >
+        <Button variant="danger">Delete</Button>
+      </PopConfirm>
+    </Variant>
+    <Variant title="Placement Top">
+      <div class="pt-24">
+        <PopConfirm placement="top-start" @confirm="lastAction = 'confirmed'">
+          <Button variant="outline">Confirm above</Button>
+        </PopConfirm>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/RadioCards.story.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from "vue"
+import { logEvent } from "histoire/client"
+import RadioCards from "../src/components/RadioCards.vue"
+
+const plan = ref("pro")
+const planOptions = [
+  { value: "free", label: "Free", description: "5 projects, 1 GB storage, community support" },
+  { value: "pro", label: "Pro", description: "Unlimited projects, 100 GB storage, priority support" },
+  { value: "enterprise", label: "Enterprise", description: "Custom limits, dedicated infrastructure, SLA guarantee" }
+]
+
+const deploy = ref("docker")
+const deployOptions = [
+  { value: "docker", label: "Docker", description: "Container-based deployment with full control over the runtime environment" },
+  { value: "nixpacks", label: "Nixpacks", description: "Auto-detected buildpacks, zero config for most frameworks" },
+  { value: "static", label: "Static", description: "Pre-built assets served via CDN, no server required" }
+]
+
+const priority = ref(null)
+const priorityOptions = [
+  { value: "low", label: "Low" },
+  { value: "medium", label: "Medium" },
+  { value: "high", label: "High" },
+  { value: "critical", label: "Critical" }
+]
+
+function handleUpdate(name, value) {
+  logEvent("update:modelValue", { name, value })
+}
+</script>
+
+<template>
+  <Story title="RadioCards">
+    <Variant title="Pricing Plans">
+      <div class="w-[320px]">
+        <RadioCards
+          v-model="plan"
+          :options="planOptions"
+          @update:model-value="v => handleUpdate('plan', v)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ plan }}</div>
+      </template>
+    </Variant>
+    <Variant title="Deploy Target">
+      <div class="w-[320px]">
+        <RadioCards
+          v-model="deploy"
+          :options="deployOptions"
+          @update:model-value="v => handleUpdate('deploy', v)"
+        />
+      </div>
+    </Variant>
+    <Variant title="No Descriptions">
+      <div class="w-[240px]">
+        <RadioCards
+          v-model="priority"
+          :options="priorityOptions"
+          @update:model-value="v => handleUpdate('priority', v)"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/RadioGroup.story.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from "vue"
+import RadioGroup from "../src/components/RadioGroup.vue"
+
+const selected = ref("a")
+const iconSelected = ref("grid")
+const dirSelected = ref("one")
+
+const basicOptions = [
+  { value: "a", label: "Option A" },
+  { value: "b", label: "Option B" },
+  { value: "c", label: "Option C" }
+]
+
+const iconOptions = [
+  { 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" }
+]
+
+const dirOptions = [
+  { value: "one", label: "First" },
+  { value: "two", label: "Second" },
+  { value: "three", label: "Third" }
+]
+</script>
+
+<template>
+  <Story title="RadioGroup">
+    <Variant title="Vertical (default)">
+      <RadioGroup v-model="selected" :options="basicOptions" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ selected }}</div>
+      </template>
+    </Variant>
+    <Variant title="Horizontal">
+      <RadioGroup v-model="dirSelected" :options="dirOptions" direction="horizontal" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ dirSelected }}</div>
+      </template>
+    </Variant>
+    <Variant title="With Icons">
+      <RadioGroup v-model="iconSelected" :options="iconOptions" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ iconSelected }}</div>
+      </template>
+    </Variant>
+    <Variant title="With Icons (Horizontal)">
+      <RadioGroup v-model="iconSelected" :options="iconOptions" direction="horizontal" />
+    </Variant>
+  </Story>
+</template>