@ohos-ports/histoire-app 1.0.0-beta.0

package/src/app/components/search/SearchPane.vue

@@ -0,0 +1,319 @@
+<script lang="ts" setup>
+import type { ClientCommand } from '@histoire/shared'
+import type { SearchResult, SearchResultType, Story, Variant } from '../../types'
+import type { SearchData } from './types'
+import { Icon } from '@iconify/vue'
+import { useDebounce, useFocus } from '@vueuse/core'
+import Fuse from 'fuse.js'
+import { registeredCommands } from 'virtual:$histoire-commands'
+import { computed, ref, watch } from 'vue'
+import { useCommandStore } from '../../stores/command.js'
+import { useStoryStore } from '../../stores/story'
+import { builtinCommands, getCommandContext } from '../../util/commands.js'
+import { useSelection } from '../../util/select.js'
+import BaseEmpty from '../base/BaseEmpty.vue'
+import { onUpdate, searchData } from './search-title-data'
+import SearchItem from './SearchItem.vue'
+
+const DocSearchData = () => import('./search-docs-data')
+
+const props = defineProps({
+  shown: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  close: () => true,
+})
+
+function close() {
+  emit('close')
+}
+
+// Autofocus
+
+const input = ref<HTMLInputElement>()
+const { focused } = useFocus(input, {
+  initialValue: true,
+})
+
+watch(() => props.shown, (value) => {
+  if (value) {
+    requestAnimationFrame(() => {
+      focused.value = true
+      input.value.select()
+    })
+  }
+})
+
+// Index
+
+const searchInputText = ref('')
+const rateLimitedSearch = useDebounce(searchInputText, 50)
+
+const storyStore = useStoryStore()
+
+let titleSearchIndex: Fuse<{ id: number, text: string }>
+let titleIdMap: SearchData['idMap']
+
+function createIndex() {
+  return new Fuse<{ id: number, text: string }>([], {
+    keys: ['text'],
+  })
+}
+
+async function loadSearchIndex(data: SearchData) {
+  titleSearchIndex = createIndex()
+
+  for (const document of data.index) {
+    titleSearchIndex.add(document)
+  }
+
+  titleIdMap = data.idMap
+}
+
+loadSearchIndex(searchData)
+// Handle HMR
+onUpdate((searchData) => {
+  loadSearchIndex(searchData)
+})
+
+let docSearchIndex: Fuse<{ id: number, text: string }>
+let docIdMap: SearchData['idMap']
+
+async function loadDocSearchIndex() {
+  async function load(data: SearchData) {
+    docSearchIndex = createIndex()
+
+    for (const document of data.index) {
+      docSearchIndex.add(document)
+    }
+
+    docIdMap = data.idMap
+
+    if (rateLimitedSearch.value) {
+      await searchOnDocField(rateLimitedSearch.value)
+    }
+  }
+
+  const searchDataModule = await DocSearchData()
+
+  await load(searchDataModule.searchData)
+  // Handle HMR
+  searchDataModule.onUpdate((searchData) => {
+    load(searchData)
+  })
+}
+
+loadDocSearchIndex()
+
+// Search
+
+const titleResults = ref<SearchResult[]>([])
+
+watch(rateLimitedSearch, async (value) => {
+  const list: SearchResult[] = []
+  const result = titleSearchIndex.search(value)
+  let rank = 0
+
+  for (const document of result) {
+    const idMapData = titleIdMap[document.item.id]
+    if (!idMapData) continue
+    switch (idMapData.kind) {
+      case 'story': {
+        list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank))
+        rank++
+        break
+      }
+      case 'variant': {
+        const [storyId] = idMapData.id.split(':')
+        const story = storyStore.getStoryById(storyId)
+        const variant = storyStore.getVariantById(idMapData.id)
+        list.push(variantResultFactory(story, variant, rank))
+        rank++
+        break
+      }
+    }
+  }
+
+  titleResults.value = list
+})
+
+const docsResults = ref<SearchResult[]>([])
+
+async function searchOnDocField(query: string) {
+  if (docSearchIndex) {
+    const list: SearchResult[] = []
+    const result = docSearchIndex.search(query)
+    let rank = 0
+
+    for (const document of result) {
+      const idMapData = docIdMap[document.item.id]
+      if (!idMapData) continue
+      switch (idMapData.kind) {
+        case 'story': {
+          list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, 'docs'))
+          rank++
+          break
+        }
+      }
+    }
+
+    docsResults.value = list
+  }
+}
+
+watch(rateLimitedSearch, searchOnDocField)
+
+function storyResultFactory(story: Story, rank: number, type: SearchResultType = 'title'): SearchResult {
+  return {
+    kind: 'story',
+    rank,
+    id: `story:${story.id}`,
+    title: story.title,
+    route: {
+      name: 'story',
+      params: {
+        storyId: story.id,
+      },
+      query: {
+        ...type === 'docs'
+          ? { tab: 'docs' }
+          : {},
+      },
+    },
+    path: story.file.path.slice(0, -1),
+    icon: story.icon,
+    iconColor: story.iconColor,
+  }
+}
+
+function variantResultFactory(story: Story, variant: Variant, rank: number, type: SearchResultType = 'title'): SearchResult {
+  return {
+    kind: 'variant',
+    rank,
+    id: `variant:${story.id}:${variant.id}`,
+    title: variant.title,
+    route: {
+      name: 'story',
+      params: {
+        storyId: story.id,
+      },
+      query: {
+        variantId: variant.id,
+        ...type === 'docs'
+          ? { tab: 'docs' }
+          : {},
+      },
+    },
+    path: [...story.file.path ?? [], story.title],
+    icon: variant.icon,
+    iconColor: variant.iconColor,
+  }
+}
+
+// Commands
+
+const allCommands = [
+  ...builtinCommands,
+  ...registeredCommands,
+]
+
+const commandResults = computed(() => {
+  if (__HISTOIRE_DEV__) {
+    const commandCtx = getCommandContext()
+    const searchText = searchInputText.value.toLowerCase()
+    return allCommands
+      .filter(command => !command.showIf || command.showIf(commandCtx))
+      .filter(command => command.label.toLowerCase().includes(searchText) || command.searchText?.toLowerCase().includes(searchText))
+      .map(command => commandResultFactory(command, 0))
+  }
+  return []
+})
+
+const commandStore = useCommandStore()
+
+function commandResultFactory(command: ClientCommand, rank: number): SearchResult {
+  return {
+    kind: 'command',
+    rank,
+    id: `_command:${command.id}`,
+    title: command.label,
+    icon: command.icon ?? 'carbon:chevron-right',
+    onActivate: () => {
+      commandStore.activateCommand(command)
+    },
+  }
+}
+
+// Results
+
+const results = computed(() => {
+  const list = [
+    ...commandResults.value,
+    ...titleResults.value,
+  ]
+  const seen = {}
+  for (const r of titleResults.value) {
+    seen[r.id] = true
+  }
+  for (const r of docsResults.value) {
+    if (!seen[r.id]) {
+      list.push(r)
+    }
+  }
+  return list
+})
+
+// Selection
+
+const {
+  selectedIndex,
+  selectNext,
+  selectPrevious,
+} = useSelection(results)
+</script>
+
+<template>
+  <div
+    class="histoire-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500"
+    @click="focused = true"
+  >
+    <Icon
+      icon="carbon:search"
+      class="flex-none htw-w-4 htw-h-4"
+    />
+
+    <input
+      ref="input"
+      v-model="searchInputText"
+      placeholder="Search for stories, variants..."
+      class="htw-bg-transparent htw-w-full htw-flex-1 htw-pl-0 htw-pr-6 htw-py-4 htw-outline-none"
+      @keydown.down.prevent="selectNext()"
+      @keydown.up.prevent="selectPrevious()"
+      @keydown.escape="close()"
+    >
+  </div>
+
+  <BaseEmpty
+    v-if="rateLimitedSearch && !results.length"
+    class="no-animation"
+  >
+    No results
+  </BaseEmpty>
+
+  <div
+    v-else-if="results.length"
+    class="htw-max-h-[400px] htw-overflow-y-auto htw-rounded-b-lg"
+  >
+    <SearchItem
+      v-for="(result, index) of results"
+      :key="result.id"
+      :result="result"
+      :selected="index === selectedIndex"
+      @close="close()"
+    />
+  </div>
+</template>

package/src/app/components/search/search-docs-data.ts

@@ -0,0 +1,9 @@
+import type { SearchData } from './types.js'
+import { onUpdate as _onUpdate, searchData as _searchData } from 'virtual:$histoire-search-docs-data'
+import { markRaw } from 'vue'
+
+export const searchData: SearchData = markRaw(_searchData)
+
+export function onUpdate(cb: (data: SearchData) => unknown) {
+  _onUpdate(cb)
+}

package/src/app/components/search/search-title-data.ts

@@ -0,0 +1,9 @@
+import type { SearchData } from './types.js'
+import { onUpdate as _onUpdate, searchData as _searchData } from 'virtual:$histoire-search-title-data'
+import { markRaw } from 'vue'
+
+export const searchData: SearchData = markRaw(_searchData)
+
+export function onUpdate(cb: (data: SearchData) => unknown) {
+  _onUpdate(cb)
+}

package/src/app/components/search/types.ts

@@ -0,0 +1,4 @@
+export interface SearchData {
+  index: Array<{ id: number, text: string }>
+  idMap: Record<number, { id: string, kind: string }>
+}

package/src/app/components/story/GenericMountStory.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import type { Story } from '../../types'
+import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client'
+import { markRaw, ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  story: Story
+}>()
+
+const mountComponent = ref(null)
+
+watchEffect(async () => {
+  const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId]
+  if (clientPlugin) {
+    const pluginModule = await clientPlugin()
+    mountComponent.value = markRaw(pluginModule.MountStory)
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="mountComponent"
+    v-if="mountComponent"
+    class="histoire-generic-mount-story"
+    :story="story"
+    v-bind="$attrs"
+  />
+</template>

package/src/app/components/story/GenericRenderStory.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import type { Story } from '../../types'
+import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client'
+import { markRaw, ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  story: Story
+}>()
+
+const mountComponent = ref(null)
+
+watchEffect(async () => {
+  const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId]
+  if (clientPlugin) {
+    try {
+      const pluginModule = await clientPlugin()
+      mountComponent.value = markRaw(pluginModule.RenderStory)
+    }
+    catch (e) {
+      console.error(e)
+      throw e
+    }
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="mountComponent"
+    v-if="mountComponent"
+    class="histoire-generic-render-story __histoire-render-story"
+    :story="story"
+    v-bind="$attrs"
+  />
+</template>

package/src/app/components/story/StoryResponsivePreview.vue

@@ -0,0 +1,216 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import type { Variant } from '../../types'
+import { Icon } from '@iconify/vue'
+import { useEventListener } from '@vueuse/core'
+import { VTooltip as vTooltip } from 'floating-vue'
+import { computed, onUnmounted, ref } from 'vue'
+import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
+import HatchedPattern from '../misc/HatchedPattern.vue'
+
+const props = defineProps<{
+  variant: Variant
+}>()
+
+const settings = usePreviewSettingsStore().currentSettings
+
+// Resize
+
+const resizing = ref(false)
+
+const onUnmountedCleanupFns: (() => unknown)[] = []
+onUnmounted(() => {
+  onUnmountedCleanupFns.forEach(fn => fn())
+})
+
+function addWindowListener(event: string, listener: (event: any) => unknown) {
+  window.addEventListener(event, listener)
+  const removeListener = () => window.removeEventListener(event, listener)
+  onUnmountedCleanupFns.push(removeListener)
+  return () => {
+    removeListener()
+    onUnmountedCleanupFns.splice(onUnmountedCleanupFns.indexOf(removeListener), 1)
+  }
+}
+
+function useDragger(el: Ref<HTMLDivElement>, value: Ref<number>, min: number, max: number, axis: 'x' | 'y') {
+  function onMouseDown(event: MouseEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    const start = axis === 'x' ? event.clientX : event.clientY
+    const startValue = value.value ?? (axis === 'x' ? previewWrapper.value.clientWidth - 67 : previewWrapper.value.clientHeight - 70)
+    resizing.value = true
+
+    const removeListeners = [
+      addWindowListener('mousemove', onMouseMove),
+      addWindowListener('mouseup', onMouseUp),
+    ]
+
+    function onMouseMove(event: MouseEvent) {
+      const snapTarget = (axis === 'x' ? previewWrapper.value.clientWidth : previewWrapper.value.clientHeight)
+      const delta = (axis === 'x' ? event.clientX : event.clientY) - start
+      value.value = Math.max(min, Math.min(max, startValue + delta))
+
+      if (Math.abs(value.value - (snapTarget - 67)) < 16) {
+        value.value = null
+      }
+    }
+
+    function onMouseUp() {
+      removeListeners.forEach(fn => fn())
+      resizing.value = false
+    }
+  }
+  useEventListener(el, 'mousedown', onMouseDown)
+
+  function onTouchStart(event: TouchEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    const start = axis === 'x' ? event.touches[0].clientX : event.touches[0].clientY
+    const startValue = value.value
+    resizing.value = true
+
+    const removeListeners = [
+      addWindowListener('touchmove', onTouchMove),
+      addWindowListener('touchend', onTouchEnd),
+      addWindowListener('touchcancel', onTouchEnd),
+    ]
+
+    function onTouchMove(event: TouchEvent) {
+      const delta = (axis === 'x' ? event.touches[0].clientX : event.touches[0].clientY) - start
+      value.value = Math.max(min, Math.min(max, startValue + delta))
+    }
+
+    function onTouchEnd() {
+      removeListeners.forEach(fn => fn())
+      resizing.value = false
+    }
+  }
+  useEventListener(el, 'touchstart', onTouchStart)
+}
+
+const responsiveWidth = computed({
+  get: () => settings[settings.rotate ? 'responsiveHeight' : 'responsiveWidth'],
+  set: (value) => { settings[settings.rotate ? 'responsiveHeight' : 'responsiveWidth'] = value },
+})
+const responsiveHeight = computed({
+  get: () => settings[settings.rotate ? 'responsiveWidth' : 'responsiveHeight'],
+  set: (value) => { settings[settings.rotate ? 'responsiveWidth' : 'responsiveHeight'] = value },
+})
+
+const horizontalDragger = ref<HTMLDivElement>()
+const verticalDragger = ref<HTMLDivElement>()
+const cornerDragger = ref<HTMLDivElement>()
+const previewWrapper = ref<HTMLDivElement>()
+
+useDragger(horizontalDragger, responsiveWidth, 32, 20000, 'x')
+useDragger(verticalDragger, responsiveHeight, 32, 20000, 'y')
+useDragger(cornerDragger, responsiveWidth, 32, 20000, 'x')
+useDragger(cornerDragger, responsiveHeight, 32, 20000, 'y')
+
+// Handle rotate
+
+const finalWidth = computed(() => settings.rotate ? settings.responsiveHeight : settings.responsiveWidth)
+const finalHeight = computed(() => settings.rotate ? settings.responsiveWidth : settings.responsiveHeight)
+
+// Disabled responsive
+
+const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
+
+const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${responsiveHeight.value ?? 'Auto'}`)
+</script>
+
+<template>
+  <div class="histoire-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden">
+    <div
+      v-if="isResponsiveEnabled"
+      class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden"
+    >
+      <HatchedPattern
+        class="htw-w-full htw-h-full htw-text-black/[1%] dark:htw-text-white/[1%]"
+      />
+    </div>
+
+    <div
+      ref="previewWrapper"
+      class="htw-h-full htw-overflow-auto htw-relative"
+    >
+      <div
+        class="htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700 htw-rounded-lg htw-relative"
+        :class="isResponsiveEnabled ? {
+          'htw-w-fit': !!finalWidth,
+          'htw-h-fit': !!finalHeight,
+          'htw-h-full': !finalHeight,
+        } : 'htw-h-full'"
+      >
+        <div
+          class="bind-preview-bg htw-rounded-lg htw-h-full"
+          data-test-id="responsive-preview-bg"
+        >
+          <CheckerboardPattern
+            v-if="settings.checkerboard"
+            class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
+          />
+          <div class="htw-p-8 htw-h-full htw-relative">
+            <div class="htw-w-full htw-h-full htw-relative">
+              <div class="htw-absolute htw-inset-0" />
+
+              <slot
+                :is-responsive-enabled="isResponsiveEnabled"
+                :final-width="finalWidth"
+                :final-height="finalHeight"
+                :resizing="resizing"
+              />
+            </div>
+
+            <!-- Markers -->
+            <div class="htw-absolute htw-top-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" />
+            <div class="htw-absolute htw-top-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" />
+            <div class="htw-absolute htw-bottom-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" />
+            <div class="htw-absolute htw-bottom-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" />
+            <div class="htw-absolute htw-left-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" />
+            <div class="htw-absolute htw-left-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" />
+            <div class="htw-absolute htw-right-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" />
+            <div class="htw-absolute htw-right-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" />
+          </div>
+
+          <!-- Resize Dragger -->
+          <template v-if="isResponsiveEnabled">
+            <div
+              ref="horizontalDragger"
+              v-tooltip.right="sizeTooltip"
+              class="htw-absolute htw-w-4 htw-top-0 htw-bottom-4 htw-right-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ew-resize htw-group hover:htw-text-primary-500"
+            >
+              <Icon
+                icon="mdi:drag-vertical-variant"
+                class="htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+              />
+            </div>
+            <div
+              ref="verticalDragger"
+              v-tooltip.bottom="sizeTooltip"
+              class="htw-absolute htw-h-4 htw-left-0 htw-right-4 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ns-resize htw-group hover:htw-text-primary-500"
+            >
+              <Icon
+                icon="mdi:drag-horizontal-variant"
+                class="htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+              />
+            </div>
+            <div
+              ref="cornerDragger"
+              v-tooltip.bottom="sizeTooltip"
+              class="htw-absolute htw-w-4 htw-h-4 htw-right-0 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-nwse-resize htw-group hover:htw-text-primary-500"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bind-preview-bg {
+  background-color: v-bind('settings.backgroundColor');
+}
+</style>