pimelon-ui 0.1.0-alpha.9 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.0-alpha.9",
+  "version": "0.1.13",
   "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",
@@ -49,6 +50,7 @@
     "@tiptap/starter-kit": "^2.0.3",
     "@tiptap/suggestion": "^2.0.3",
     "@tiptap/vue-3": "^2.0.3",
+    "@vueuse/core": "^10.4.1",
     "feather-icons": "^4.28.0",
     "idb-keyval": "^6.2.0",
     "showdown": "^2.1.0",
@@ -60,24 +62,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/Badge.vue

@@ -9,7 +9,7 @@
     >
       <slot name="prefix"></slot>
     </div>
-    <slot>{{ props.label }}</slot>
+    <slot>{{ props.label?.toString() }}</slot>
     <div
       :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
       v-if="$slots.suffix"
@@ -22,11 +22,15 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+interface Label {
+  toString(): string
+}
+
 interface BadgeProps {
   theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'
   size?: 'sm' | 'md' | 'lg'
   variant?: 'solid' | 'subtle' | 'outline' | 'ghost'
-  label?: string
+  label?: Label | string | number
 }
 
 const props = withDefaults(defineProps<BadgeProps>(), {

package/src/components/Breadcrumbs.story.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { logEvent } from 'histoire/client'
+import Breadcrumbs from './Breadcrumbs.vue'
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant title="With route option">
+      <Breadcrumbs
+        :items="[
+          {
+            label: 'Home',
+            route: { name: 'Home' },
+          },
+          {
+            label: 'Views',
+            route: '/components',
+          },
+          {
+            label: 'List',
+            route: '/components/breadcrumbs',
+          },
+        ]"
+      />
+    </Variant>
+    <Variant title="With onClick option">
+      <Breadcrumbs
+        :items="[
+          {
+            label: 'Home',
+            onClick: () => logEvent('onClick', 'Home'),
+          },
+          {
+            label: 'Views',
+            onClick: () => logEvent('onClick', 'Home'),
+          },
+          {
+            label: 'Kanban',
+            onClick: () => logEvent('onClick', 'Home'),
+          },
+        ]"
+      />
+    </Variant>
+
+    <Variant title="With prefix slot">
+      <Breadcrumbs
+        :items="[
+          {
+            label: 'Home',
+            icon: '🏡',
+            route: { name: 'Home' },
+          },
+          {
+            label: 'Views',
+            icon: '🏞️',
+            route: '/components',
+          },
+          {
+            label: 'List',
+            icon: '📃',
+            route: '/components/breadcrumbs',
+          },
+        ]"
+      >
+        <template #prefix="{ item }">
+          <span class="mr-1">
+            {{ item.icon }}
+          </span>
+        </template>
+      </Breadcrumbs>
+    </Variant>
+  </Story>
+</template>

package/src/components/Breadcrumbs.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="flex min-w-0 items-center">
+    <template v-if="dropdownItems.length">
+      <Dropdown class="h-7" :options="dropdownItems">
+        <Button variant="ghost">
+          <template #icon>
+            <svg
+              class="w-4 text-gray-600"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="1" />
+              <circle cx="19" cy="12" r="1" />
+              <circle cx="5" cy="12" r="1" />
+            </svg>
+          </template>
+        </Button>
+      </Dropdown>
+      <span class="ml-1 mr-0.5 text-base text-gray-500" aria-hidden="true">
+        /
+      </span>
+    </template>
+    <div
+      class="flex min-w-0 items-center overflow-hidden text-ellipsis whitespace-nowrap"
+    >
+      <template v-for="(item, i) in crumbs" :key="item.label">
+        <component
+          :is="item.route ? 'router-link' : 'button'"
+          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400"
+          :class="[
+            i == crumbs.length - 1
+              ? 'text-gray-900'
+              : 'text-gray-600 hover:text-gray-700',
+          ]"
+          v-bind="item.route ? { to: item.route } : { onClick: item.onClick }"
+        >
+          <slot name="prefix" :item="item" />
+          <span>
+            {{ item.label }}
+          </span>
+        </component>
+        <span
+          v-if="i != crumbs.length - 1"
+          class="mx-0.5 text-base text-gray-500"
+          aria-hidden="true"
+        >
+          /
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { computed } from 'vue'
+import { RouterLinkProps, useRouter } from 'vue-router'
+import Dropdown from '../components/Dropdown.vue'
+import Button from '../components/Button.vue'
+
+interface BreadcrumbItem {
+  label: string
+  route?: RouterLinkProps['to']
+  onClick?: () => void
+  [key: string]: any
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[]
+}
+
+const props = defineProps<BreadcrumbsProps>()
+
+const router = useRouter()
+const { width } = useWindowSize()
+
+const items = computed(() => {
+  return (props.items || []).filter(Boolean)
+})
+
+const dropdownItems = computed(() => {
+  if (width.value > 640) return []
+
+  let allExceptLastTwo = items.value.slice(0, -2)
+  return allExceptLastTwo.map((item) => {
+    let onClick = item.onClick ? item.onClick : () => router.push(item.route)
+    return {
+      ...item,
+      icon: null,
+      label: item.label,
+      onClick,
+    }
+  })
+})
+
+const crumbs = computed(() => {
+  if (width.value > 640) return items.value
+
+  let lastTwo = items.value.slice(-2)
+  return lastTwo
+})
+</script>

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>