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

package/src/app/components/panel/StorySourceCode.vue

@@ -0,0 +1,248 @@
+<script lang="ts" setup>
+import type { Highlighter } from 'shiki'
+import type { Story, Variant } from '../../types'
+import { HstCopyIcon } from '@histoire/controls'
+import { unindent } from '@histoire/shared'
+import { Icon } from '@iconify/vue'
+import { createHighlighter } from 'shiki'
+import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client'
+import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
+import { isDark } from '../../util/dark'
+import BaseEmpty from '../base/BaseEmpty.vue'
+
+const props = defineProps<{
+  story: Story
+  variant: Variant
+}>()
+
+const generateSourceCodeFn = ref(null)
+
+watchEffect(async () => {
+  const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId]
+  if (clientPlugin) {
+    const pluginModule = await clientPlugin()
+    generateSourceCodeFn.value = markRaw(pluginModule.generateSourceCode)
+  }
+})
+
+const highlighter = shallowRef<Highlighter>()
+
+const dynamicSourceCode = ref('')
+const error = ref<string>(null)
+
+watch(() => [props.variant, generateSourceCodeFn.value], async () => {
+  if (!generateSourceCodeFn.value) return
+  error.value = null
+  dynamicSourceCode.value = ''
+  try {
+    if (props.variant.source) {
+      dynamicSourceCode.value = props.variant.source
+    }
+    else if (props.variant.slots?.().source) {
+      const source = props.variant.slots?.().source()[0].children
+      if (source) {
+        dynamicSourceCode.value = await unindent(source)
+      }
+    }
+    else {
+      dynamicSourceCode.value = await generateSourceCodeFn.value(props.variant)
+    }
+  }
+  catch (e) {
+    console.error(e)
+    error.value = e.message
+  }
+
+  // Auto-switch
+  if (!dynamicSourceCode.value) {
+    displayedSource.value = 'static'
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+
+// Static file source
+
+const staticSourceCode = ref('')
+watch(() => [props.story, props.story?.file?.source], async () => {
+  staticSourceCode.value = ''
+  const sourceLoader = props.story.file?.source
+  if (sourceLoader) {
+    staticSourceCode.value = (await sourceLoader()).default
+  }
+}, {
+  immediate: true,
+})
+
+const displayedSource = ref<'dynamic' | 'static'>('dynamic')
+
+const displayedSourceCode = computed(() => {
+  if (displayedSource.value === 'dynamic') {
+    return dynamicSourceCode.value
+  }
+  return staticSourceCode.value
+})
+
+// HTML render
+
+onMounted(async () => {
+  highlighter.value = await createHighlighter({
+    langs: [
+      'html',
+      'jsx',
+    ],
+    themes: [
+      'github-light',
+      'github-dark',
+    ],
+  })
+})
+
+const sourceHtml = computed(() => displayedSourceCode.value
+  ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
+    lang: 'html',
+    theme: isDark.value ? 'github-dark' : 'github-light',
+  })
+  : '')
+
+// Scrolling
+
+let lastScroll = 0
+
+// Reset
+watch(() => props.variant, () => {
+  lastScroll = 0
+})
+
+const scroller = ref<HTMLElement>()
+
+function onScroll(event) {
+  if (sourceHtml.value) {
+    lastScroll = event.target.scrollTop
+  }
+}
+
+watch(sourceHtml, async () => {
+  await nextTick()
+  if (scroller.value) {
+    scroller.value.scrollTop = lastScroll
+  }
+})
+</script>
+
+<template>
+  <div
+    class="histoire-story-source-code htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col"
+  >
+    <!-- Toolbar -->
+    <div
+      v-if="!error"
+      class="htw-h-10 htw-flex-none htw-border-b htw-border-solid htw-border-gray-500/5 htw-px-4 htw-flex htw-items-center htw-gap-2"
+    >
+      <div class="htw-text-gray-900 dark:htw-text-gray-100">
+        Source
+      </div>
+      <div class="htw-flex-1" />
+
+      <!-- Display source modes -->
+      <div class="htw-flex htw-flex-none htw-gap-px htw-h-full htw-py-2">
+        <button
+          v-tooltip="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
+          class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-l htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden"
+          :class="[
+            displayedSource !== 'dynamic' ? 'htw-max-w-6 htw-opacity-70' : 'htw-max-w-[82px] htw-text-primary-600 dark:htw-text-primary-400',
+            dynamicSourceCode ? 'htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50' : 'htw-opacity-50',
+          ]"
+          @click="dynamicSourceCode && (displayedSource = 'dynamic')"
+        >
+          <Icon
+            icon="carbon:flash"
+            class="htw-w-4 htw-h-4 htw-flex-none"
+          />
+          <span
+            class="transition-opacity duration-300"
+            :class="{
+              'opacity-0': displayedSource !== 'dynamic',
+            }"
+          >
+            Dynamic
+          </span>
+        </button>
+        <button
+          v-tooltip="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
+          class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-r htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden"
+          :class="[
+            displayedSource !== 'static' ? 'htw-max-w-6 htw-opacity-70' : 'htw-max-w-[63px] htw-text-primary-600 dark:htw-text-primary-400',
+            staticSourceCode ? 'htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50' : 'htw-opacity-50',
+          ]"
+          @click="staticSourceCode && (displayedSource = 'static')"
+        >
+          <Icon
+            icon="carbon:document"
+            class="htw-w-4 htw-h-4 htw-flex-none"
+          />
+          <span
+            class="transition-opacity duration-300"
+            :class="{
+              'opacity-0': displayedSource !== 'static',
+            }"
+          >
+            Static
+          </span>
+        </button>
+      </div>
+
+      <HstCopyIcon
+        :content="displayedSourceCode"
+        class="htw-flex-none"
+      />
+    </div>
+
+    <div
+      v-if="error"
+      class="htw-text-red-500 htw-h-full htw-p-2 htw-overflow-auto htw-font-mono htw-text-sm"
+    >
+      Error: {{ error }}
+    </div>
+
+    <BaseEmpty v-else-if="!displayedSourceCode">
+      <Icon
+        icon="carbon:code-hide"
+        class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+      />
+      <span>Not available</span>
+    </BaseEmpty>
+
+    <textarea
+      v-else-if="!sourceHtml"
+      ref="scroller"
+      class="__histoire-code-placeholder htw-w-full htw-h-full htw-p-4 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0"
+      :value="displayedSourceCode"
+      readonly
+      data-test-id="story-source-code"
+      @scroll="onScroll"
+    />
+    <!-- eslint-disable vue/no-v-html -->
+    <div
+      v-else
+      ref="scroller"
+      class="htw-w-full htw-h-full htw-overflow-auto"
+      data-test-id="story-source-code"
+      @scroll="onScroll"
+    >
+      <div
+        class="__histoire-code htw-p-4 htw-w-fit"
+        v-html="sourceHtml"
+      />
+    </div>
+    <!-- eslint-enable vue/no-v-html -->
+  </div>
+</template>
+
+<style scoped>
+.__histoire-code-placeholder {
+  color: inherit;
+  font-size: inherit;
+}
+</style>

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

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { SearchResult } from '../../types'
+import { ref, toRefs } from 'vue'
+import { useRouter } from 'vue-router'
+import { onKeyboardShortcut } from '../../util/keyboard'
+import { useScrollOnActive } from '../../util/scroll'
+import BaseListItem from '../base/BaseListItem.vue'
+import BaseListItemLink from '../base/BaseListItemLink.vue'
+import SearchItemContent from './SearchItemContent.vue'
+
+const props = defineProps({
+  result: {
+    type: Object as PropType<SearchResult>,
+    required: true,
+  },
+
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  close: () => true,
+})
+
+const el = ref<HTMLDivElement>()
+
+const { selected } = toRefs(props)
+useScrollOnActive(selected, el)
+
+const router = useRouter()
+
+onKeyboardShortcut(['enter'], () => {
+  if (!props.selected) return
+  action()
+})
+
+function action(fromClick = false) {
+  if ('route' in props.result && !fromClick) {
+    router.push(props.result.route)
+  }
+  if ('onActivate' in props.result) {
+    props.result.onActivate()
+  }
+  emit('close')
+}
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="histoire-search-item"
+    data-test-id="search-item"
+    :data-selected="selected ? '' : undefined"
+  >
+    <BaseListItemLink
+      v-if="'route' in result"
+      :to="result.route"
+      :is-active="selected"
+      class="htw-px-6 htw-py-4 htw-gap-4"
+      @navigate="action(true)"
+    >
+      <SearchItemContent
+        :result="result"
+        :selected="selected"
+      />
+    </BaseListItemLink>
+
+    <BaseListItem
+      v-if="'onActivate' in result"
+      :is-active="selected"
+      class="htw-px-6 htw-py-4 htw-gap-4"
+      @navigate="action(true)"
+    >
+      <SearchItemContent
+        :result="result"
+        :selected="selected"
+      />
+    </BaseListItem>
+  </div>
+</template>
+
+<style scoped>
+.bind-icon-color {
+  color: v-bind('result.iconColor');
+}
+</style>

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

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { SearchResult } from '../../types.js'
+import { Icon } from '@iconify/vue'
+import BaseIcon from '../base/BaseIcon.vue'
+
+defineProps<{
+  result: SearchResult
+  selected: boolean
+}>()
+
+const defaultIcons = {
+  story: 'carbon:cube',
+  variant: 'carbon:cube',
+}
+
+const kindLabels = {
+  story: 'Story',
+  variant: 'Variant',
+  command: 'Command',
+}
+</script>
+
+<template>
+  <BaseIcon
+    :icon="result.icon ?? defaultIcons[result.kind]"
+    class="htw-w-4 htw-h-4"
+    :class="[
+      !selected ? [
+        result.iconColor
+          ? 'bind-icon-color'
+          : {
+            'htw-text-primary-500': result.kind === 'story',
+            'htw-text-gray-500': result.kind === 'variant',
+          },
+      ] : [],
+      {
+        'colorize-black': selected,
+      },
+    ]"
+  />
+  <div class="htw-flex-1">
+    <div class="htw-flex">
+      {{ result.title }}
+      <span class="htw-ml-auto htw-opacity-40">
+        {{ kindLabels[result.kind] }}
+      </span>
+    </div>
+
+    <div
+      v-if="result.path?.length"
+      class="htw-flex htw-items-center htw-gap-0.5 htw-opacity-60"
+    >
+      <div
+        v-for="(p, index) of result.path"
+        :key="index"
+        class="htw-flex htw-items-center htw-gap-0.5"
+      >
+        <Icon
+          v-if="index > 0"
+          icon="carbon:chevron-right"
+          class="htw-w-4 htw-h-4 htw-mt-0.5 htw-opacity-50"
+        />
+        <span>{{ p }}</span>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+</script>
+
+<template>
+  <div
+    class="histoire-search-loading htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500 htw-h-[51px] htw-opacity-30"
+  >
+    <Icon
+      icon="carbon:search"
+      class="flex-none htw-w-4 htw-h-4"
+    />
+
+    Loading...
+  </div>
+</template>

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

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue'
+import SearchLoading from './SearchLoading.vue'
+
+const SearchPane = defineAsyncComponent({
+  loader: () => import('./SearchPane.vue'),
+  loadingComponent: SearchLoading,
+  delay: 0,
+})
+
+defineProps({
+  shown: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  close: () => true,
+})
+
+function close() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div
+    v-show="shown"
+    class="histoire-search-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
+    data-test-id="search-modal"
+  >
+    <div
+      class="htw-absolute htw-inset-0"
+      @click="close()"
+    />
+    <div class="htw-bg-white dark:htw-bg-gray-900 md:htw-mt-16 md:htw-mx-auto htw-w-screen htw-max-w-[512px] htw-shadow-xl htw-border htw-border-gray-200 dark:htw-border-gray-750 htw-rounded-lg htw-relative htw-divide-y htw-divide-gray-200 dark:htw-divide-gray-850">
+      <SearchPane
+        :shown="shown"
+        @close="close()"
+      />
+    </div>
+  </div>
+</template>