pimelon-ui 0.1.0-alpha.9 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.0-alpha.9",
+  "version": "0.1.5",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -14,8 +14,9 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
   },
   "files": [
     "src",
@@ -60,24 +61,16 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.0.0-beta.61",
-    "@storybook/addon-interactions": "^7.0.0-beta.61",
-    "@storybook/addon-links": "^7.0.0-beta.61",
-    "@storybook/blocks": "^7.0.0-alpha.8",
-    "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/vue3": "^7.0.0-beta.61",
-    "@storybook/vue3-vite": "^7.0.0-beta.61",
+    "@histoire/plugin-vue": "^0.16.1",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
     "cross-fetch": "^3.1.5",
+    "histoire": "^0.16.2",
     "husky": "^8.0.3",
     "lint-staged": ">=10",
     "postcss": "^8.4.21",
     "prettier": "2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.0.0-beta.61",
     "tailwindcss": "^3.2.7",
     "typescript": "^5.0.2",
     "vite": "^4.1.0",

package/src/components/Autocomplete.story.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Autocomplete from './Autocomplete.vue'
+
+const value = ref('')
+const options = [
+  { label: 'John Doe', value: 'john-doe' },
+  { label: 'Jane Doe', value: 'jane-doe' },
+  { label: 'John Smith', value: 'john-smith' },
+  { label: 'Jane Smith', value: 'jane-smith' },
+  { label: 'John Wayne', value: 'john-wayne' },
+  { label: 'Jane Wayne', value: 'jane-wayne' },
+]
+</script>
+<template>
+  <Story :layout="{ width: 500, type: 'grid' }" autoPropsDisabled>
+    <div class="p-2">
+      <Autocomplete
+        :options="options"
+        v-model="value"
+        placeholder="Select person"
+      />
+    </div>
+  </Story>
+</template>

package/src/components/Autocomplete.vue

@@ -2,28 +2,33 @@
   <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
     <Popover class="w-full" v-model:show="showOptions">
       <template #target="{ open: openPopover, togglePopover }">
-        <div class="w-full">
-          <button
-            class="flex h-7 w-full items-center justify-between rounded bg-gray-100 py-1 pl-3 pr-2 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-gray-400"
-            :class="{ 'bg-gray-200': isComboboxOpen }"
-            @click="() => togglePopover()"
-          >
-            <span
-              class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
-              v-if="selectedValue"
+        <slot name="target" v-bind="{ open: openPopover, togglePopover }">
+          <div class="w-full">
+            <button
+              class="flex h-7 w-full items-center justify-between gap-2 rounded bg-gray-100 px-2 py-1 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-gray-400"
+              :class="{ 'bg-gray-200': isComboboxOpen }"
+              @click="() => togglePopover()"
             >
-              {{ displayValue(selectedValue) }}
-            </span>
-            <span class="text-base leading-5 text-gray-500" v-else>
-              {{ placeholder || '' }}
-            </span>
-            <FeatherIcon
-              name="chevron-down"
-              class="h-4 w-4 text-gray-500"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
+              <div class="flex items-center">
+                <slot name="prefix" />
+                <span
+                  class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+                  v-if="selectedValue"
+                >
+                  {{ displayValue(selectedValue) }}
+                </span>
+                <span class="text-base leading-5 text-gray-500" v-else>
+                  {{ placeholder || '' }}
+                </span>
+              </div>
+              <FeatherIcon
+                name="chevron-down"
+                class="h-4 w-4 text-gray-600"
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </slot>
       </template>
       <template #body="{ isOpen }">
         <div v-show="isOpen">
@@ -36,6 +41,7 @@
             >
               <div class="relative w-full">
                 <ComboboxInput
+                  ref="search"
                   class="form-input w-full"
                   type="text"
                   @change="
@@ -80,7 +86,10 @@
                     { 'bg-gray-100': active },
                   ]"
                 >
-                  <slot name="prefix" v-bind="{ active, selected, option }" />
+                  <slot
+                    name="item-prefix"
+                    v-bind="{ active, selected, option }"
+                  />
                   {{ option.label }}
                 </li>
               </ComboboxOption>
@@ -168,6 +177,13 @@ export default {
     query(q) {
       this.$emit('update:query', q)
     },
+    showOptions(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.$refs.search.el.focus()
+        })
+      }
+    },
   },
   methods: {
     filterOptions(options) {

package/src/components/Avatar.story.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import Avatar from './Avatar.vue'
+const state = reactive({
+  image: 'https://avatars.githubusercontent.com/u/499550?s=60&v=4',
+  label: 'EY',
+  size: 'md',
+})
+
+const shapes = ['circle', 'square']
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 300 }">
+    <Variant v-for="shape in shapes" :key="shape" :title="shape">
+      <Avatar :shape="shape" v-bind="state" />
+    </Variant>
+    <Variant v-for="shape in shapes" :key="shape" :title="shape">
+      <Avatar :shape="shape" v-bind="state" :image="null" />
+    </Variant>
+
+    <template #controls>
+      <HstText v-model="state.label" title="Label" />
+      <HstSelect v-model="state.size" :options="sizes" title="Size" />
+    </template>
+  </Story>
+</template>

package/src/components/Badge.story.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import Badge from './Badge.vue'
+const state = reactive({
+  theme: 'gray',
+  size: 'sm',
+  label: 'Badge',
+})
+const variants = ['solid', 'subtle', 'outline', 'ghost']
+const themes = ['gray', 'blue', 'green', 'orange', 'red']
+const sizes = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 300 }">
+    <Variant v-for="variant in variants" :key="variant" :title="variant">
+      <Badge :variant="variant" v-bind="state">{{ state.label }}</Badge>
+    </Variant>
+
+    <template #controls>
+      <HstText v-model="state.label" title="Content" />
+      <HstSelect v-model="state.theme" :options="themes" title="Theme" />
+      <HstSelect v-model="state.size" :options="sizes" title="Size" />
+    </template>
+  </Story>
+</template>

package/src/components/Button.story.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import Button from './Button.vue'
+const state = reactive({
+  theme: 'gray',
+  size: 'sm',
+  label: 'Button',
+  loading: false,
+  loadingText: null,
+  disabled: false,
+  link: null,
+})
+const variants = ['solid', 'subtle', 'outline', 'ghost']
+const themes = ['gray', 'blue', 'green', 'red']
+const sizes = ['sm', 'md', 'lg', 'xl', '2xl']
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 300 }">
+    <Variant v-for="variant in variants" :key="variant" :title="variant">
+      <Button :variant="variant" v-bind="state">{{ state.label }}</Button>
+    </Variant>
+
+    <template #controls>
+      <HstText v-model="state.label" title="Content" />
+      <HstCheckbox v-model="state.disabled" title="Disabled" />
+      <HstSelect v-model="state.theme" :options="themes" title="Theme" />
+      <HstSelect v-model="state.size" :options="sizes" title="Size" />
+    </template>
+  </Story>
+</template>

package/src/components/Checkbox.story.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import Checkbox from './Checkbox.vue'
+
+const state = reactive({
+  size: 'sm',
+  value: false,
+})
+
+const sizes = ['sm', 'md']
+</script>
+<template>
+  <Story :layout="{ width: 500, type: 'grid' }">
+    <div class="p-2">
+      <Checkbox v-bind="state" v-model="state.value" label="Enable feature" />
+    </div>
+
+    <template #controls>
+      <HstSelect v-model="state.size" :options="sizes" title="Size" />
+    </template>
+  </Story>
+</template>

package/src/components/Checkbox.vue

@@ -16,6 +16,7 @@
       :id="htmlId"
       :checked="Boolean(modelValue)"
       @change="(e) => $emit('update:modelValue', (e.target as HTMLInputElement).checked)"
+      v-bind="attrs"
     />
     <label class="block" :class="labelClasses" v-if="label" :for="htmlId">
       {{ label }}
@@ -23,7 +24,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { useId } from '../utils/useId'
 
 interface CheckboxProps {
@@ -40,6 +41,8 @@ const props = withDefaults(defineProps<CheckboxProps>(), {
   padding: false,
 })
 
+const attrs = useAttrs()
+
 const htmlId = props.id ?? useId()
 
 const labelClasses = computed(() => {

package/src/components/CommandPalette/CommandPalette.vue

@@ -0,0 +1,110 @@
+<template>
+  <template>
+    <Dialog
+      v-model="show"
+      :options="{ size: 'xl', position: 'top' }"
+      @after-leave="searchQuery = ''"
+    >
+      <template #body>
+        <div>
+          <Combobox nullable @update:model-value="select">
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 flex items-center pl-4.5">
+                <FeatherIcon name="search" class="h-4 w-4" />
+              </div>
+              <ComboboxInput
+                placeholder="Search"
+                class="w-full border-none bg-transparent py-3 pl-11.5 pr-4.5 text-base text-gray-800 placeholder-gray-500 focus:ring-0"
+                v-model="searchQuery"
+                autocomplete="off"
+              />
+            </div>
+            <ComboboxOptions
+              class="max-h-96 overflow-auto border-t border-gray-100"
+              static
+              :hold="true"
+            >
+              <div
+                class="mb-2 mt-4.5 first:mt-3"
+                v-for="(group, index) in groups"
+                :key="group.title"
+              >
+                <div
+                  class="mb-2.5 px-4.5 text-base text-gray-600"
+                  v-if="!group.hideTitle"
+                >
+                  {{ group.title }}
+                </div>
+                <ComboboxOption
+                  v-for="item in group.items"
+                  :key="item.name"
+                  v-slot="{ active }"
+                  :value="item"
+                  class="px-2.5"
+                  :disabled="item.disabled"
+                >
+                  <component
+                    :is="group.component"
+                    :item="item"
+                    :active="active"
+                  />
+                </ComboboxOption>
+              </div>
+            </ComboboxOptions>
+          </Combobox>
+        </div>
+      </template>
+    </Dialog>
+  </template>
+</template>
+
+<script setup>
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from '@headlessui/vue'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+
+const emit = defineEmits(['update:show', 'update:searchQuery', 'select'])
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  searchQuery: { type: String, default: '' },
+  groups: { type: Array, default: () => [] },
+})
+
+const show = computed({
+  get: () => props.show,
+  set: (value) => emit('update:show', value),
+})
+
+const searchQuery = computed({
+  get: () => props.searchQuery,
+  set: (value) => emit('update:searchQuery', value),
+})
+
+function select(item) {
+  emit('select', item)
+  show.value = false
+}
+
+function keydownWatcher(e) {
+  if (e.key === 'Escape' && show.value) {
+    show.value = false
+    e.preventDefault()
+  }
+
+  if (
+    e.key === 'k' &&
+    (e.ctrlKey || e.metaKey) &&
+    !e.target.classList.contains('ProseMirror')
+  ) {
+    show.value = true
+    e.preventDefault()
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', keydownWatcher))
+onBeforeUnmount(() => window.removeEventListener('keydown', keydownWatcher))
+</script>

package/src/components/CommandPalette/CommandPaletteItem.vue

@@ -0,0 +1,28 @@
+<script setup>
+defineProps({
+  item: { type: Object, required: true },
+  active: { type: Boolean, default: false },
+})
+</script>
+
+<template>
+  <div
+    class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-gray-800"
+    :class="{ 'bg-gray-200': active }"
+  >
+    <component
+      :is="item.icon"
+      v-if="item.icon"
+      class="mr-3 h-4 w-4 text-gray-700"
+    />
+    <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+      {{ item.title }}
+    </span>
+    <span
+      v-if="item.description"
+      class="ml-auto whitespace-nowrap pl-2 text-gray-600"
+    >
+      {{ item.description }}
+    </span>
+  </div>
+</template>

package/src/components/Dialog.story.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Dialog from './Dialog.vue'
+import Button from './Button.vue'
+
+const dialog1 = ref(false)
+const dialog2 = ref(false)
+</script>
+<template>
+  <Story :layout="{ width: 500, type: 'grid' }">
+    <Variant title="With options" autoPropsDisabled>
+      <Button @click="dialog1 = true">Show Dialog</Button>
+      <Dialog
+        :options="{
+          title: 'Confirm',
+          message: 'Are you sure you want to confirm this action?',
+          size: 'xl',
+          actions: [{ label: 'Confirm', variant: 'solid', onClick: () => {} }],
+        }"
+        v-model="dialog1"
+      />
+    </Variant>
+    <Variant title="With slots" autoPropsDisabled>
+      <Button @click="dialog2 = true">Show Dialog</Button>
+      <Dialog v-model="dialog2">
+        <template #body-title>
+          <h3>Custom Title</h3>
+        </template>
+        <template #body-content>
+          <p>Custom Body</p>
+        </template>
+        <template #actions>
+          <Button variant="solid">Confirm</Button>
+          <Button class="ml-2" @click="dialog2 = false">Close</Button>
+        </template>
+      </Dialog>
+    </Variant>
+  </Story>
+</template>

package/src/components/Dropdown.story.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import Dropdown from './Dropdown.vue'
+import FeatherIcon from './FeatherIcon.vue'
+import Button from './Button.vue'
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 300 }">
+    <Variant title="Basic">
+      <Dropdown
+        :options="[
+          {
+            label: 'Edit Title',
+            onClick: () => {},
+            icon: () => h(FeatherIcon, { name: 'edit-2' }),
+          },
+          {
+            label: 'Manage Members',
+            onClick: () => {},
+            icon: () => h(FeatherIcon, { name: 'users' }),
+          },
+          {
+            label: 'Delete this project',
+            onClick: () => {},
+            icon: () => h(FeatherIcon, { name: 'trash' }),
+          },
+        ]"
+      />
+    </Variant>
+
+    <Variant title="Button prop">
+      <Dropdown
+        :options="[
+          {
+            label: 'Edit Title',
+            onClick: () => {},
+          },
+          {
+            label: 'Manage Members',
+            onClick: () => {},
+          },
+          {
+            label: 'Delete this project',
+            onClick: () => {},
+          },
+        ]"
+        :button="{
+          label: 'Actions',
+        }"
+      />
+    </Variant>
+
+    <Variant title="Custom Button and Groups">
+      <Dropdown
+        :options="[
+          {
+            group: 'Manage',
+            items: [
+              {
+                label: 'Edit Title',
+                icon: () => h(FeatherIcon, { name: 'edit' }),
+              },
+              {
+                label: 'Manage Members',
+                icon: () => h(FeatherIcon, { name: 'users' }),
+              },
+            ],
+          },
+          {
+            group: 'Delete',
+            items: [
+              {
+                label: 'Delete users',
+                icon: () => h(FeatherIcon, { name: 'edit' }),
+              },
+              {
+                label: 'Delete this project',
+                icon: () => h(FeatherIcon, { name: 'trash' }),
+              },
+            ],
+          },
+        ]"
+      >
+        <Button>
+          <template #icon>
+            <FeatherIcon name="more-horizontal" class="h-4 w-4" />
+          </template>
+        </Button>
+      </Dropdown>
+    </Variant>
+
+    <template #controls>
+      <!-- <HstText v-model="state.label" title="Label" />
+      <HstSelect v-model="state.size" :options="sizes" title="Size" /> -->
+    </template>
+  </Story>
+</template>

package/src/components/ErrorMessage.story.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ErrorMessage from './ErrorMessage.vue'
+
+const message = ref('Invalid value')
+const error = new Error('There was an error')
+</script>
+<template>
+  <Story :layout="{ width: 500, type: 'grid' }" autoPropsDisabled>
+    <Variant title="String message">
+      <ErrorMessage :message="message" />
+    </Variant>
+
+    <Variant title="Error object">
+      <ErrorMessage :message="error" />
+
+      <template #source>
+        <textarea v-pre>
+          <ErrorMessage :message="Error('There was an error')" />
+        </textarea>
+      </template>
+    </Variant>
+
+    <Variant title="Falsy value">
+      <ErrorMessage message="" />
+    </Variant>
+  </Story>
+</template>

package/src/components/FileUploader.story.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import FileUploader from './FileUploader.vue'
+import Button from './Button.vue'
+
+const validateFileFunction = (fileObject) => {}
+const onSuccess = (file) => {}
+</script>
+<template>
+  <Story :layout="{ width: 500, type: 'grid' }" autoPropsDisabled>
+    <FileUploader
+      :fileTypes="['image/*']"
+      :validateFile="validateFileFunction"
+      @success="onSuccess"
+    >
+      <template
+        v-slot="{
+          file,
+          uploading,
+          progress,
+          uploaded,
+          message,
+          error,
+          total,
+          success,
+          openFileSelector,
+        }"
+      >
+        <Button @click="openFileSelector" :loading="uploading">
+          {{ uploading ? `Uploading ${progress}%` : 'Upload Image' }}
+        </Button>
+      </template>
+    </FileUploader>
+  </Story>
+</template>