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

package/src/app/components/app/AppHeader.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { histoireConfig } from '../../util/config'
+import { isDark, toggleDark } from '../../util/dark'
+import { onKeyboardShortcut } from '../../util/keyboard'
+import { makeTooltip } from '../../util/tooltip'
+import AppLogo from './AppLogo.vue'
+
+defineEmits({
+  search: () => true,
+})
+
+const themeIcon = computed(() => {
+  return isDark.value ? 'carbon:moon' : 'carbon:sun'
+})
+
+onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
+  event.preventDefault()
+  toggleDark()
+})
+</script>
+
+<template>
+  <div
+    class="histoire-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
+  >
+    <div class="htw-py-3 sm:htw-py-4 htw-flex-1 htw-h-full htw-flex htw-items-center htw-pr-2">
+      <a
+        :href="histoireConfig.theme?.logoHref"
+        target="_blank"
+        class="htw-w-full htw-h-full htw-flex htw-items-center"
+      >
+        <AppLogo
+          class="htw-max-w-full htw-max-h-full"
+        />
+      </a>
+    </div>
+    <div class="htw-ml-auto htw-flex-none htw-flex">
+      <a
+        v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
+        class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
+        data-test-id="search-btn"
+        @click="$emit('search')"
+      >
+        <Icon
+          icon="carbon:search"
+          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
+        />
+      </a>
+
+      <a
+        v-if="!histoireConfig.theme.hideColorSchemeSwitch"
+        v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
+        class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
+        @click="toggleDark()"
+      >
+        <Icon
+          :icon="themeIcon"
+          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
+        />
+      </a>
+    </div>
+  </div>
+</template>

package/src/app/components/app/AppLogo.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import HistoireLogoDark from '../../assets/histoire-text-dark.svg'
+import HistoireLogoLight from '../../assets/histoire-text.svg'
+
+import { customLogos, histoireConfig } from '../../util/config'
+import { isDark } from '../../util/dark'
+
+const logoUrl = computed(() => {
+  if (isDark.value) {
+    return histoireConfig.theme.logo?.dark ? customLogos.dark : HistoireLogoDark
+  }
+  return histoireConfig.theme.logo?.light ? customLogos.light : HistoireLogoLight
+})
+
+const altText = computed(() => `${histoireConfig.theme.title} logo`)
+</script>
+
+<template>
+  <img
+    class="histoire-app-logo"
+    :src="logoUrl"
+    :alt="altText"
+  >
+</template>

package/src/app/components/app/Breadcrumb.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { Story, Tree } from '../../types'
+import { Icon } from '@iconify/vue'
+import { computed, ref, watch } from 'vue'
+import { useStoryStore } from '../../stores/story'
+import StoryList from '../tree/StoryList.vue'
+import MobileOverlay from './MobileOverlay.vue'
+
+defineProps<{
+  tree: Tree
+  stories: Story[]
+}>()
+
+const storyStore = useStoryStore()
+
+const story = computed(() => storyStore.currentStory)
+
+const folders = computed(() => {
+  return story.value.file.path.slice(0, -1)
+})
+
+const isMenuOpened = ref(false)
+
+function openMenu() {
+  isMenuOpened.value = true
+}
+
+function closeMenu() {
+  isMenuOpened.value = false
+}
+
+watch(story, () => {
+  isMenuOpened.value = false
+})
+</script>
+
+<template>
+  <div class="histoire-breadcrumb">
+    <a
+      class="htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center"
+      @click="openMenu"
+    >
+      <template v-if="story">
+        <template
+          v-for="(file, key) of folders"
+          :key="key"
+        >
+          <span>
+            {{ file }}
+          </span>
+          <span class="htw-opacity-40">
+            /
+          </span>
+        </template>
+        <span class="htw-flex htw-items-center htw-gap-2">
+          <Icon
+            :icon="story.icon ?? 'carbon:cube'"
+            class="htw-w-5 htw-h-5 htw-flex-none"
+            :class="{
+              'htw-text-primary-500': !story.iconColor,
+              'bind-icon-color': story.iconColor,
+            }"
+          />
+          {{ story.title }}
+          <span class="htw-opacity-40 htw-text-sm">
+            {{ story.variants.length }}
+          </span>
+        </span>
+      </template>
+      <template v-else>
+        Select a story...
+      </template>
+
+      <Icon
+        icon="carbon:chevron-sort"
+        class="htw-w-5 htw-h-5 htw-shrink-0 htw-ml-auto"
+      />
+    </a>
+  </div>
+
+  <MobileOverlay
+    title="Select a story"
+    :opened="isMenuOpened"
+    @close="closeMenu"
+  >
+    <StoryList
+      :tree="tree"
+      :stories="stories"
+      class="htw-flex-1 htw-overflow-y-scroll"
+    />
+  </MobileOverlay>
+</template>
+
+<style scoped>
+.bind-icon-color {
+  color: v-bind('story?.iconColor');
+}
+</style>

package/src/app/components/app/HomeCounter.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: 'carbon:cube',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  count: {
+    type: Number,
+    default: 0,
+  },
+})
+</script>
+
+<template>
+  <div class="htw-p-2 htw-flex htw-items-center htw-gap-x-2">
+    <Icon
+      :icon="props.icon"
+      class="htw-text-2xl htw-text-gray-700 dark:htw-text-gray-300 htw-flex-none"
+    />
+    <div class="htw-flex htw-flex-col htw-leading-none">
+      <span
+        class="htw-text-primary-500 htw-min-w-[80px] htw-font-bold"
+      >
+        {{ count }}
+      </span>
+      <span
+        class="htw-text-sm htw-text-gray-900 dark:htw-text-gray-100"
+      >
+        {{ title }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/app/components/app/InitialLoading.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const progress = reactive({
+  loaded: 0,
+  total: 0,
+})
+
+const maxCols = window.innerWidth / 20
+
+if (import.meta.hot) {
+  import.meta.hot.on('histoire:stories-loading-progress', (data) => {
+    progress.loaded = data.loadedFileCount
+    progress.total = data.totalFileCount
+  })
+}
+</script>
+
+<template>
+  <div class="histoire-initial-loading htw-fixed htw-inset-0 htw-bg-white dark:htw-bg-gray-700 htw-flex htw-flex-col htw-gap-6 htw-items-center htw-justify-center">
+    <transition name="__histoire-fade">
+      <div
+        v-if="progress.total > 0"
+        class="htw-grid htw-gap-2"
+        :style="{
+          gridTemplateColumns: `repeat(${Math.min(Math.ceil(Math.sqrt(progress.total)), maxCols)}, minmax(0, 1fr))`,
+        }"
+      >
+        <div
+          v-for="n in progress.total"
+          :key="n"
+          class="htw-bg-primary-500/10 htw-rounded-full"
+        >
+          <div
+            class="htw-w-3 htw-h-3 htw-bg-primary-500 htw-rounded-full htw-duration-150 htw-ease-out"
+            :class="{
+              'htw-transition-transform htw-scale-0': n >= progress.loaded,
+            }"
+          />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>

package/src/app/components/app/MobileOverlay.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+
+defineProps<{
+  title: string
+  opened: boolean
+}>()
+
+const emit = defineEmits<{ (e: 'close'): void }>()
+</script>
+
+<template>
+  <transition name="__histoire-fade-bottom">
+    <div
+      v-if="opened"
+      class="histoire-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
+    >
+      <div class="htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between">
+        <span class="htw-text-gray-500">{{ title }}</span>
+        <a
+          class="htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer"
+          @click="emit('close')"
+        >
+          <Icon
+            icon="carbon:close"
+            class="htw-w-8 htw-h-8 htw-shrink-0"
+          />
+        </a>
+      </div>
+      <slot />
+    </div>
+  </transition>
+</template>

package/src/app/components/base/BaseButton.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+const props = defineProps<{
+  to?: any
+  href?: string
+  color?: string
+}>()
+
+const comp = computed(() => {
+  if (props.to) {
+    return RouterLink
+  }
+  if (props.href) {
+    return 'a'
+  }
+  return 'button'
+})
+</script>
+
+<template>
+  <component
+    :is="comp"
+    class="histoire-base-button htw-rounded htw-cursor-pointer"
+    :class="{
+      'htw-bg-primary-200 dark:htw-bg-primary-800 hover:htw-bg-primary-300 dark:hover:htw-bg-primary-700': color === 'primary' || !color,
+      'htw-bg-grey-100 dark:htw-bg-grey-900 hover:htw-bg-grey-200 dark:hover:htw-bg-grey-800': color === 'grey',
+    }"
+  >
+    <slot />
+  </component>
+</template>

package/src/app/components/base/BaseCheckbox.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  'update:modelValue': (_newValue: boolean) => true,
+})
+
+function toggle() {
+  emit('update:modelValue', !props.modelValue)
+  animationEnabled.value = true
+}
+
+// SVG check
+
+const path = ref<SVGPathElement>()
+const dasharray = ref(0)
+const progress = computed(() => props.modelValue ? 1 : 0)
+const dashoffset = computed(() => (1 - progress.value) * dasharray.value)
+const animationEnabled = ref(false)
+
+watch(path, () => {
+  dasharray.value = path.value.getTotalLength?.() ?? 21.21
+})
+</script>
+
+<template>
+  <div
+    role="checkbox"
+    tabindex="0"
+    class="histoire-base-checkbox htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+    @click="toggle()"
+    @keydown.enter.prevent="toggle()"
+    @keydown.space.prevent="toggle()"
+  >
+    <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+      <div
+        class="htw-border group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out"
+        :class="[
+          modelValue
+            ? 'htw-border-primary-500 htw-border-8'
+            : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
+        ]"
+      />
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        class="htw-relative htw-z-10"
+      >
+        <path
+          ref="path"
+          d="m 4 12 l 5 5 l 10 -10"
+          fill="none"
+          class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out"
+          :class="[
+            animationEnabled ? 'htw-transition-all' : 'htw-transition-none',
+            {
+              'htw-delay-150': modelValue,
+            },
+          ]"
+          :stroke-dasharray="dasharray"
+          :stroke-dashoffset="dashoffset"
+        />
+      </svg>
+    </div>
+
+    <slot />
+  </div>
+</template>

package/src/app/components/base/BaseCopyIcon.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+export default {
+  name: 'HstCopyIcon',
+}
+</script>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { useClipboard } from '@vueuse/core'
+import { VTooltip as vTooltip } from 'floating-vue'
+
+const props = defineProps<{
+  content: string
+}>()
+
+const { copy, copied } = useClipboard()
+
+const action = () => copy(props.content)
+</script>
+
+<template>
+  <Icon
+    v-tooltip="{
+      content: 'Copied!',
+      triggers: [],
+      shown: copied,
+      distance: 12,
+      delay: 0,
+    }"
+    icon="carbon:copy-file"
+    class="histoire-base-copy-icon htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
+    @click="action()"
+  />
+</template>

package/src/app/components/base/BaseEmpty.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400  htw-text-lg">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.htw-base-empty:not(.no-animation) {
+  animation: htw-base-empty .15s .2s both;
+}
+
+@keyframes htw-base-empty {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+</style>

package/src/app/components/base/BaseIcon.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  icon: string
+}>()
+
+const isUrl = computed(() => props.icon.startsWith('http') || props.icon.startsWith('data:image')
+  || props.icon.startsWith('.') || props.icon.startsWith('/'))
+</script>
+
+<template>
+  <img
+    v-if="isUrl"
+    :src="icon"
+    :alt="icon"
+    class="histoire-base-icon"
+  >
+  <Icon
+    v-else
+    :icon="icon"
+    class="histoire-base-icon"
+  />
+</template>
+
+<style scoped>
+img.colorize-black {
+  filter: grayscale(100) brightness(0);
+}
+</style>

package/src/app/components/base/BaseKeyboardShortcut.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { formatKey } from '../../util/keyboard.js'
+
+const props = defineProps<{
+  shortcut: string
+}>()
+
+const formatted = computed(() => props.shortcut.split('+').map(k => formatKey(k.trim())).join(' '))
+</script>
+
+<template>
+  <span class="histoire-base-keyboard-shortcut htw-border htw-border-current htw-opacity-50 htw-px-1 htw-rounded-sm">
+    {{ formatted }}
+  </span>
+</template>

package/src/app/components/base/BaseListItem.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+defineProps<{
+  isActive?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'navigate'): void
+}>()
+
+function handleNavigate() {
+  emit('navigate')
+}
+</script>
+
+<template>
+  <a
+    class="istoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
+    :class="[
+      $attrs.class,
+      isActive
+        ? 'active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black'
+        : 'hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900',
+    ]"
+    @click="handleNavigate()"
+    @keyup.enter="handleNavigate()"
+    @keyup.space="handleNavigate()"
+  >
+    <slot />
+  </a>
+</template>

package/src/app/components/base/BaseListItemLink.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  inheritAttrs: false,
+
+  props: {
+    isActive: {
+      type: Boolean,
+      default: undefined,
+    },
+  },
+
+  emits: {
+    navigate: () => true,
+  },
+
+  setup(props, { emit }) {
+    function handleNavigate(event, navigate: (event) => unknown) {
+      emit('navigate')
+      navigate(event)
+    }
+
+    return {
+      handleNavigate,
+    }
+  },
+})
+</script>
+
+<template>
+  <RouterLink
+    v-slot="{ isActive: linkIsActive, href, navigate }"
+    class="histoire-base-list-item-link"
+    v-bind="$attrs"
+    custom
+  >
+    <a
+      :href="href"
+      class="htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
+      :class="[
+        $attrs.class,
+        (isActive != null ? isActive : linkIsActive)
+          ? 'active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black'
+          : 'hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900',
+      ]"
+      @click="handleNavigate($event, navigate)"
+      @keyup.enter="handleNavigate($event, navigate)"
+      @keyup.space="handleNavigate($event, navigate)"
+    >
+      <slot
+        :active="isActive != null ? isActive : linkIsActive"
+      />
+    </a>
+  </RouterLink>
+</template>