@prsm/mono-components 0.1.0

package/stories/RangeSlider.story.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { ref } from "vue"
+import { logEvent } from "histoire/client"
+import RangeSlider from "../src/components/RangeSlider.vue"
+
+const opacity = ref(50)
+const volume = ref(75)
+const temperature = ref(0.7)
+const rotation = ref(0)
+
+function handleUpdate(name, value) {
+  logEvent("update:modelValue", { name, value })
+}
+</script>
+
+<template>
+  <Story title="RangeSlider">
+    <Variant title="Basic">
+      <div class="flex flex-col gap-3 w-[300px]">
+        <RangeSlider
+          v-model="opacity"
+          :min="0"
+          :max="100"
+          label="Opacity"
+          @update:model-value="v => handleUpdate('opacity', v)"
+        />
+        <RangeSlider
+          v-model="volume"
+          :min="0"
+          :max="100"
+          label="Volume"
+          @update:model-value="v => handleUpdate('volume', v)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">
+          opacity: {{ opacity }}, volume: {{ volume }}
+        </div>
+      </template>
+    </Variant>
+    <Variant title="Float Precision">
+      <div class="w-[300px]">
+        <RangeSlider
+          v-model="temperature"
+          :min="0"
+          :max="2"
+          :step="0.01"
+          label="Temperature"
+          @update:model-value="v => handleUpdate('temperature', v)"
+        />
+      </div>
+    </Variant>
+    <Variant title="Negative Range">
+      <div class="w-[300px]">
+        <RangeSlider
+          v-model="rotation"
+          :min="-180"
+          :max="180"
+          label="Rotation"
+          @update:model-value="v => handleUpdate('rotation', v)"
+        />
+      </div>
+    </Variant>
+    <Variant title="No Label">
+      <div class="w-[300px]">
+        <RangeSlider
+          v-model="opacity"
+          :min="0"
+          :max="100"
+          @update:model-value="v => handleUpdate('opacity', v)"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/ScrollBox.story.vue

@@ -0,0 +1,54 @@
+<script setup>
+import ScrollBox from "../src/components/ScrollBox.vue"
+</script>
+
+<template>
+  <Story title="ScrollBox">
+    <Variant title="Vertical">
+      <ScrollBox style="height: 200px" class="p-3 bg-1 border border-line rounded-sm">
+        <p class="text-base text-fg-1 mb-3">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Sed vulputate odio
+          ut enim. Magnis dis parturient montes nascetur ridiculus mus. Ultricies
+          mi eget mauris pharetra et. Massa sapien faucibus et molestie ac feugiat
+          sed lectus. Tempus imperdiet nulla malesuada pellentesque elit. Sit amet
+          aliquam id diam. Aliquam ultrices sagittis orci a. Urna nec tincidunt
+          praesent semper feugiat nibh sed pulvinar. Sit amet mauris commodo quis
+          imperdiet. Aliquet enim facilisis gravida neque convallis a cras semper.
+        </p>
+        <p class="text-base text-fg-1 mb-3">
+          Vitae nunc sed velit dignissim sodales ut eu. Pretium quam vulputate
+          dignissim suspendisse in est. Duis ut diam quam nulla porttitor massa id
+          neque aliquam. Volutpat ac tincidunt vitae semper quis lectus nulla at.
+          Ac tincidunt vitae semper quis lectus nulla at. Quis hendrerit dolor
+          magna egest est. Feugiat in ante metus dictum at tempor commodo
+          ullamcorper a. Quis auctor elit sed vulputate mi sit.
+        </p>
+        <p class="text-base text-fg-1">
+          Egestas dui id ornare arcu odio ut sem nulla. Potenti nullam ac tortor
+          vitae purus faucibus ornare suspendisse sed. Sagittis id consectetur
+          purus ut faucibus pulvinar elementum integer. Amet venenatis urna cursus
+          eget nunc scelerisque viverra mauris. Morbi tempus iaculis urna id
+          volutpat lacus laoreet non.
+        </p>
+      </ScrollBox>
+    </Variant>
+    <Variant title="Horizontal">
+      <ScrollBox horizontal style="height: 100px; width: 300px" class="p-3 bg-1 border border-line rounded-sm">
+        <div style="width: 800px">
+          <p class="text-base text-fg-1 whitespace-nowrap">
+            This content is wider than the container and scrolls horizontally.
+            Keep going to the right to see more content that overflows the scroll box.
+          </p>
+        </div>
+      </ScrollBox>
+    </Variant>
+    <Variant title="Max Height List">
+      <ScrollBox style="max-height: 150px" class="bg-1 border border-line rounded-sm">
+        <div v-for="i in 20" :key="i" class="px-3 py-1 text-base text-fg-1 border-b border-line-subtle">
+          Item {{ i }}
+        </div>
+      </ScrollBox>
+    </Variant>
+  </Story>
+</template>

package/stories/SectionHeader.story.vue

@@ -0,0 +1,22 @@
+<script setup>
+import SectionHeader from "../src/components/SectionHeader.vue"
+import Button from "../src/components/Button.vue"
+</script>
+
+<template>
+  <Story title="SectionHeader">
+    <Variant title="Label Only">
+      <SectionHeader label="Assertions" />
+    </Variant>
+    <Variant title="With Description">
+      <SectionHeader label="Assertions" description="conditions that must pass for this test case to succeed" />
+    </Variant>
+    <Variant title="With Actions">
+      <SectionHeader label="Assertions" description="conditions that must pass for this test case to succeed">
+        <template #actions>
+          <Button>+ add assertion</Button>
+        </template>
+      </SectionHeader>
+    </Variant>
+  </Story>
+</template>

package/stories/Select.story.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from "vue"
+import Select from "../src/components/Select.vue"
+
+const simple = ref(null)
+const withObjects = ref("b")
+</script>
+
+<template>
+  <Story title="Select">
+    <Variant title="String Options">
+      <Select v-model="simple" :options="['apple', 'banana', 'cherry', 'dragonfruit']" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">value: {{ simple }}</div>
+      </template>
+    </Variant>
+    <Variant title="Object Options">
+      <Select
+        v-model="withObjects"
+        :options="[
+          { value: 'a', label: 'Option A' },
+          { value: 'b', label: 'Option B' },
+          { value: 'c', label: 'Option C' }
+        ]"
+      />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">value: {{ withObjects }}</div>
+      </template>
+    </Variant>
+    <Variant title="Custom Placeholder">
+      <Select v-model="simple" :options="['one', 'two', 'three']" placeholder="pick one..." />
+    </Variant>
+  </Story>
+</template>

package/stories/Switch.story.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from "vue"
+import Switch from "../src/components/Switch.vue"
+
+const on = ref(false)
+const features = ref({ darkMode: true, notifications: false, autoSave: true })
+</script>
+
+<template>
+  <Story title="Switch">
+    <Variant title="Default">
+      <Switch v-model="on" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">value: {{ on }}</div>
+      </template>
+    </Variant>
+    <Variant title="States">
+      <div class="flex items-center gap-4">
+        <Switch :model-value="false" />
+        <Switch :model-value="true" />
+        <Switch :model-value="false" disabled />
+        <Switch :model-value="true" disabled />
+      </div>
+    </Variant>
+    <Variant title="Settings List">
+      <div class="flex flex-col gap-2 max-w-xs">
+        <label class="flex items-center justify-between px-2 py-1 rounded-sm hover:bg-2 cursor-pointer">
+          <span class="text-base text-fg-0">Dark mode</span>
+          <Switch v-model="features.darkMode" />
+        </label>
+        <label class="flex items-center justify-between px-2 py-1 rounded-sm hover:bg-2 cursor-pointer">
+          <span class="text-base text-fg-0">Notifications</span>
+          <Switch v-model="features.notifications" />
+        </label>
+        <label class="flex items-center justify-between px-2 py-1 rounded-sm hover:bg-2 cursor-pointer">
+          <span class="text-base text-fg-0">Auto save</span>
+          <Switch v-model="features.autoSave" />
+        </label>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/Tabs.story.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from "vue"
+import Tabs from "../src/components/Tabs.vue"
+
+const active = ref("all")
+</script>
+
+<template>
+  <Story title="Tabs">
+    <Variant title="Basic">
+      <Tabs
+        v-model="active"
+        :tabs="[
+          { key: 'all', label: 'All' },
+          { key: 'active', label: 'Active' },
+          { key: 'archived', label: 'Archived' }
+        ]"
+      />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">active: {{ active }}</div>
+      </template>
+    </Variant>
+    <Variant title="With Icons and Counts">
+      <Tabs
+        v-model="active"
+        :tabs="[
+          { key: 'all', icon: 'material-symbols:list', label: 'All', count: 42 },
+          { key: 'active', icon: 'material-symbols:check-circle', label: 'Active', count: 12 },
+          { key: 'archived', icon: 'material-symbols:archive', label: 'Archived', count: 30 }
+        ]"
+      />
+    </Variant>
+  </Story>
+</template>

package/stories/TagInput.story.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { ref } from "vue"
+import { logEvent } from "histoire/client"
+import TagInput from "../src/components/TagInput.vue"
+
+const colors = ref(["red", "blue", "green"])
+const empty = ref([])
+const sentiments = ref(["positive", "neutral", "negative"])
+
+function handleUpdate(name, value) {
+  logEvent("update:modelValue", { name, value })
+}
+</script>
+
+<template>
+  <Story title="TagInput">
+    <Variant title="With Tags">
+      <div class="w-[300px]">
+        <TagInput
+          v-model="colors"
+          placeholder="type and press enter..."
+          @update:model-value="v => handleUpdate('colors', v)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">tags: {{ colors.join(', ') }}</div>
+      </template>
+    </Variant>
+    <Variant title="Empty">
+      <div class="w-[300px]">
+        <TagInput
+          v-model="empty"
+          placeholder="add tags..."
+          @update:model-value="v => handleUpdate('empty', v)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">tags: {{ empty.length ? empty.join(', ') : 'none' }}</div>
+      </template>
+    </Variant>
+    <Variant title="Enum Options">
+      <div class="w-[300px]">
+        <TagInput
+          v-model="sentiments"
+          placeholder="type option, enter to add"
+          @update:model-value="v => handleUpdate('sentiments', v)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">options: {{ sentiments.join(', ') }}</div>
+      </template>
+    </Variant>
+  </Story>
+</template>

package/stories/Textarea.story.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from "vue"
+import Textarea from "../src/components/Textarea.vue"
+
+const basic = ref("")
+const prefilled = ref("This textarea has some initial content that was set before mount. It should auto-grow to fit this text without any scrollbar appearing.")
+const growing = ref("")
+</script>
+
+<template>
+  <Story title="Textarea">
+    <Variant title="Default">
+      <Textarea v-model="basic" placeholder="Placeholder" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">{{ basic.length }} chars</div>
+      </template>
+    </Variant>
+    <Variant title="Auto Grow (empty)">
+      <Textarea v-model="growing" auto-grow placeholder="Start typing, I grow..." />
+    </Variant>
+    <Variant title="Auto Grow (prefilled)">
+      <Textarea v-model="prefilled" auto-grow />
+    </Variant>
+    <Variant title="Fixed Rows">
+      <Textarea v-model="basic" :rows="6" placeholder="6 rows tall..." />
+    </Variant>
+  </Story>
+</template>

package/stories/Toast.story.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { toast } from "../src/composables/toast.js"
+import ToastContainer from "../src/components/ToastContainer.vue"
+import Button from "../src/components/Button.vue"
+</script>
+
+<template>
+  <Story title="Toast">
+    <Variant title="All Variants">
+      <ToastContainer />
+      <div class="flex flex-wrap gap-2">
+        <Button @click="toast('Something happened')">Neutral</Button>
+        <Button variant="primary" @click="toast.success('Changes saved')">Success</Button>
+        <Button @click="toast.warning('Careful with that')">Warning</Button>
+        <Button variant="danger" @click="toast.error('Something broke')">Error</Button>
+        <Button variant="outline" @click="toast.info('New version available')">Info</Button>
+      </div>
+    </Variant>
+    <Variant title="Long Duration">
+      <ToastContainer />
+      <Button @click="toast('This stays for 10 seconds', { duration: 10000 })">Long Toast</Button>
+    </Variant>
+    <Variant title="Persistent">
+      <ToastContainer />
+      <Button @click="toast.error('Connection lost. Click X to dismiss.', { duration: 0 })">Persistent</Button>
+    </Variant>
+  </Story>
+</template>

package/stories/ToggleButtons.story.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { ref } from "vue"
+import { logEvent } from "histoire/client"
+import ToggleButtons from "../src/components/ToggleButtons.vue"
+
+const axes = ref(["x", "y"])
+const formats = ref(["bold"])
+const layers = ref([])
+
+function handleUpdate(name, value) {
+  logEvent("update:modelValue", { name, value })
+}
+</script>
+
+<template>
+  <Story title="ToggleButtons">
+    <Variant title="Axes (with label)">
+      <ToggleButtons
+        v-model="axes"
+        label="Axes"
+        :options="['X', 'Y', 'Z']"
+        @update:model-value="v => handleUpdate('axes', v)"
+      />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ axes.join(', ') || 'none' }}</div>
+      </template>
+    </Variant>
+    <Variant title="Text Formatting">
+      <ToggleButtons
+        v-model="formats"
+        :options="[
+          { value: 'bold', icon: 'material-symbols:format-bold' },
+          { value: 'italic', icon: 'material-symbols:format-italic' },
+          { value: 'underline', icon: 'material-symbols:format-underlined' },
+          { value: 'strike', icon: 'material-symbols:strikethrough-s' }
+        ]"
+        @update:model-value="v => handleUpdate('formats', v)"
+      />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ formats.join(', ') || 'none' }}</div>
+      </template>
+    </Variant>
+    <Variant title="Layers (none selected)">
+      <ToggleButtons
+        v-model="layers"
+        label="Layers"
+        :options="[
+          { value: 'bg', label: 'BG' },
+          { value: 'fg', label: 'FG' },
+          { value: 'ui', label: 'UI' },
+          { value: 'fx', label: 'FX' }
+        ]"
+        @update:model-value="v => handleUpdate('layers', v)"
+      />
+    </Variant>
+  </Story>
+</template>

package/stories/ToggleGroup.story.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from "vue"
+import ToggleGroup from "../src/components/ToggleGroup.vue"
+
+const view = ref("grid")
+const align = ref("left")
+</script>
+
+<template>
+  <Story title="ToggleGroup">
+    <Variant title="View Switcher">
+      <ToggleGroup
+        v-model="view"
+        :options="[
+          { value: 'grid', icon: 'material-symbols:grid-view' },
+          { value: 'list', icon: 'material-symbols:view-list' }
+        ]"
+      />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">view: {{ view }}</div>
+      </template>
+    </Variant>
+    <Variant title="Text Alignment">
+      <ToggleGroup
+        v-model="align"
+        :options="[
+          { value: 'left', icon: 'material-symbols:format-align-left' },
+          { value: 'center', icon: 'material-symbols:format-align-center' },
+          { value: 'right', icon: 'material-symbols:format-align-right' }
+        ]"
+      />
+    </Variant>
+  </Story>
+</template>

package/stories/Tooltip.story.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { Icon } from "@iconify/vue"
+import Tooltip from "../src/components/Tooltip.vue"
+import Button from "../src/components/Button.vue"
+</script>
+
+<template>
+  <Story title="Tooltip">
+    <Variant title="Basic">
+      <div class="flex items-center gap-4 p-8">
+        <Tooltip text="Edit this item">
+          <Button variant="icon"><Icon icon="material-symbols:edit-outline" class="text-base" /></Button>
+        </Tooltip>
+        <Tooltip text="Delete permanently">
+          <Button variant="icon"><Icon icon="material-symbols:delete-outline" class="text-base" /></Button>
+        </Tooltip>
+        <Tooltip text="Copy to clipboard">
+          <Button variant="icon"><Icon icon="material-symbols:content-copy" class="text-base" /></Button>
+        </Tooltip>
+      </div>
+    </Variant>
+    <Variant title="Placements">
+      <div class="flex items-center justify-center gap-6 p-16">
+        <Tooltip text="Top (default)" placement="top">
+          <Button>Top</Button>
+        </Tooltip>
+        <Tooltip text="Bottom tooltip" placement="bottom">
+          <Button>Bottom</Button>
+        </Tooltip>
+        <Tooltip text="Left tooltip" placement="left">
+          <Button>Left</Button>
+        </Tooltip>
+        <Tooltip text="Right tooltip" placement="right">
+          <Button>Right</Button>
+        </Tooltip>
+      </div>
+    </Variant>
+    <Variant title="No Delay">
+      <div class="p-8">
+        <Tooltip text="Instant tooltip" :delay="0">
+          <Button>Hover me (no delay)</Button>
+        </Tooltip>
+      </div>
+    </Variant>
+    <Variant title="On Text">
+      <div class="p-8 flex items-center gap-1">
+        <span class="text-base text-fg-1">Hover the</span>
+        <Tooltip text="This is an explanation">
+          <span class="text-base text-accent cursor-default underline decoration-dotted underline-offset-2">underlined text</span>
+        </Tooltip>
+        <span class="text-base text-fg-1">for more info</span>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/Tree.story.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { ref } from "vue"
+import Tree from "../src/components/Tree.vue"
+
+const selected = ref(null)
+const filterSelected = ref(null)
+
+const fileTree = [
+  {
+    key: "src",
+    label: "src",
+    icon: "material-symbols:folder-outline",
+    children: [
+      {
+        key: "src/components",
+        label: "components",
+        icon: "material-symbols:folder-outline",
+        children: [
+          { key: "src/components/Button.vue", label: "Button.vue", icon: "material-symbols:description-outline" },
+          { key: "src/components/Input.vue", label: "Input.vue", icon: "material-symbols:description-outline" },
+          { key: "src/components/Select.vue", label: "Select.vue", icon: "material-symbols:description-outline" },
+          { key: "src/components/Modal.vue", label: "Modal.vue", icon: "material-symbols:description-outline" }
+        ]
+      },
+      {
+        key: "src/composables",
+        label: "composables",
+        icon: "material-symbols:folder-outline",
+        children: [
+          { key: "src/composables/useClickOutside.js", label: "useClickOutside.js", icon: "material-symbols:description-outline" },
+          { key: "src/composables/usePointerDrag.js", label: "usePointerDrag.js", icon: "material-symbols:description-outline" }
+        ]
+      },
+      { key: "src/index.js", label: "index.js", icon: "material-symbols:description-outline" },
+      { key: "src/style.css", label: "style.css", icon: "material-symbols:description-outline" }
+    ]
+  },
+  {
+    key: "stories",
+    label: "stories",
+    icon: "material-symbols:folder-outline",
+    children: [
+      { key: "stories/Button.story.vue", label: "Button.story.vue", icon: "material-symbols:description-outline" },
+      { key: "stories/Input.story.vue", label: "Input.story.vue", icon: "material-symbols:description-outline" },
+      { key: "stories/Overview.story.vue", label: "Overview.story.vue", icon: "material-symbols:description-outline" }
+    ]
+  },
+  { key: "package.json", label: "package.json", icon: "material-symbols:settings-outline" },
+  { key: "tailwind.config.js", label: "tailwind.config.js", icon: "material-symbols:settings-outline" },
+  { key: "README.md", label: "README.md", icon: "material-symbols:description-outline" }
+]
+</script>
+
+<template>
+  <Story title="Tree">
+    <Variant title="Basic">
+      <div class="w-64 h-80 border border-line rounded-sm overflow-hidden">
+        <Tree
+          v-model="selected"
+          :items="fileTree"
+          :default-expanded="['src', 'src/components']"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ selected ?? 'null' }}</div>
+      </template>
+    </Variant>
+    <Variant title="All Expanded">
+      <div class="w-64 h-80 border border-line rounded-sm overflow-hidden">
+        <Tree
+          v-model="selected"
+          :items="fileTree"
+          :default-expanded="true"
+        />
+      </div>
+    </Variant>
+    <Variant title="With Filter">
+      <div class="w-64 h-80 border border-line rounded-sm overflow-hidden">
+        <Tree
+          v-model="filterSelected"
+          :items="fileTree"
+          filterable
+          filter-placeholder="find file..."
+          :default-expanded="['src']"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ filterSelected ?? 'null' }}</div>
+      </template>
+    </Variant>
+    <Variant title="No Icons">
+      <div class="w-64 h-80 border border-line rounded-sm overflow-hidden">
+        <Tree
+          v-model="selected"
+          :items="[
+            { key: 'a', label: 'Animals', children: [
+              { key: 'a1', label: 'Cat' },
+              { key: 'a2', label: 'Dog' },
+              { key: 'a3', label: 'Fish', children: [
+                { key: 'a3a', label: 'Goldfish' },
+                { key: 'a3b', label: 'Salmon' }
+              ]}
+            ]},
+            { key: 'b', label: 'Plants', children: [
+              { key: 'b1', label: 'Oak' },
+              { key: 'b2', label: 'Pine' }
+            ]},
+            { key: 'c', label: 'Minerals' }
+          ]"
+          :default-expanded="['a']"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/tailwind.config.js

@@ -0,0 +1,9 @@
+import preset from "./tailwind.preset.js"
+
+export default {
+  presets: [preset],
+  content: [
+    "./src/**/*.{vue,js}",
+    "./stories/**/*.{vue,js}"
+  ]
+}