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

package/src/app/components/tree/StoryListItem.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import type { Story } from '../../types'
+import { Icon } from '@iconify/vue'
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useScrollOnActive } from '../../util/scroll'
+import BaseListItemLink from '../base/BaseListItemLink.vue'
+
+const props = withDefaults(defineProps<{
+  story: Story
+  depth?: number
+}>(), {
+  depth: 0,
+})
+
+const filePadding = computed(() => {
+  return `${props.depth * 12}px`
+})
+
+const route = useRoute()
+const isActive = computed(() => route.params.storyId === props.story.id)
+const el = ref<HTMLDivElement>()
+useScrollOnActive(isActive, el)
+</script>
+
+<template>
+  <div
+    ref="el"
+    data-test-id="story-list-item"
+    class="histoire-story-list-item"
+  >
+    <BaseListItemLink
+      v-slot="{ active }"
+      :to="{
+        name: 'story',
+        params: {
+          storyId: story.id,
+        },
+      }"
+      class="htw-pl-0.5 htw-pr-2 htw-py-2 md:htw-py-1.5 htw-mx-1 htw-rounded-sm"
+    >
+      <span class="bind-tree-margin htw-flex htw-items-center htw-gap-2 htw-pl-4 htw-min-w-0">
+        <Icon
+          :icon="story.icon ?? 'carbon:cube'"
+          class="htw-w-5 htw-h-5 sm:htw-w-4 sm:htw-h-4 htw-flex-none"
+          :class="{
+            'htw-text-primary-500': !active && !story.iconColor,
+            'bind-icon-color': !active && story.iconColor,
+          }"
+        />
+        <span class="htw-truncate">{{ story.title }}</span>
+      </span>
+
+      <span
+        v-if="!story.docsOnly"
+        class="htw-opacity-40 htw-text-sm"
+      >
+        {{ story.variants.length }}
+      </span>
+    </BaseListItemLink>
+  </div>
+</template>
+
+<style scoped>
+.bind-tree-margin {
+  margin-left: v-bind(filePadding);
+}
+
+.bind-icon-color {
+  color: v-bind('story.iconColor');
+}
+</style>

package/src/app/index.ts

@@ -0,0 +1,33 @@
+import FloatingVue from 'floating-vue'
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import App from './App.vue'
+import { setupPluginApi } from './plugin.js'
+import { router } from './router'
+import 'virtual:$histoire-theme'
+
+export async function mountMainApp() {
+  const app = createApp(App)
+  app.use(createPinia())
+  app.use(FloatingVue, {
+    overflowPadding: 4,
+    arrowPadding: 8,
+    themes: {
+      tooltip: {
+        distance: 8,
+      },
+      dropdown: {
+        computeTransformOrigin: true,
+        distance: 8,
+      },
+    },
+  })
+  app.use(router)
+  app.mount('#app')
+
+  if (import.meta.hot) {
+    import.meta.hot.send('histoire:mount', {})
+
+    /* #__PURE__ */ setupPluginApi()
+  }
+}

package/src/app/plugin.ts

@@ -0,0 +1,59 @@
+import { router } from './router.js'
+
+export function setupPluginApi() {
+  if (!import.meta.hot) return
+
+  const listeners: Record<string, Set<(result: any) => unknown>> = {}
+
+  import.meta.hot.on('histoire:dev-event-result', ({ event, result }) => {
+    const set = listeners[event]
+    if (set) {
+      for (const listener of set) {
+        listener(result)
+      }
+    }
+  })
+
+  function addDevEventListener(event: string, listener: (result: any) => unknown) {
+    let set = listeners[event]
+    if (!set) {
+      set = new Set()
+      listeners[event] = set
+    }
+    set.add(listener)
+    return () => {
+      set.delete(listener)
+    }
+  }
+
+  // function removeDevEventListener (event: string, listener: (result: any) => unknown) {
+  //   const set = listeners[event]
+  //   if (set) {
+  //     set.delete(listener)
+  //   }
+  // }
+
+  window.__HST_PLUGIN_API__ = {
+    sendEvent: (event: string, payload?: any) => {
+      return new Promise((resolve) => {
+        import.meta.hot.send(`histoire:dev-event`, {
+          event,
+          payload,
+        })
+        if (event.startsWith('on')) {
+          resolve(undefined)
+        }
+        else {
+          const off = addDevEventListener(event, (result: any) => {
+            off()
+            resolve(result)
+          })
+        }
+      })
+    },
+
+    openStory: (storyId: string) => {
+      router.push({ name: 'story', params: { storyId } })
+    },
+  }
+}

package/src/app/router.ts

@@ -0,0 +1,29 @@
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { histoireConfig } from './util/config'
+
+export const base = import.meta.env.BASE_URL as string
+
+function createRouterHistory() {
+  switch (histoireConfig.routerMode) {
+    case 'hash': return createWebHashHistory(base)
+    case 'history':
+    default:
+      return createWebHistory(base)
+  }
+}
+
+export const router = createRouter({
+  history: createRouterHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: () => import('./components/HomeView.vue'),
+    },
+    {
+      path: '/story/:storyId',
+      name: 'story',
+      component: () => import('./components/story/StoryView.vue'),
+    },
+  ],
+})

package/src/app/sandbox.ts

@@ -0,0 +1,101 @@
+import type { StoryFile } from './types'
+import { applyState } from '@histoire/shared'
+import { createPinia } from 'pinia'
+import { files } from 'virtual:$histoire-stories'
+import { computed, createApp, h, onMounted, ref, watch } from 'vue'
+import { parseQuery } from 'vue-router'
+import GenericMountStory from './components/story/GenericMountStory.vue'
+import GenericRenderStory from './components/story/GenericRenderStory.vue'
+import { setupPluginApi } from './plugin.js'
+import { histoireConfig } from './util/config.js'
+import { PREVIEW_SETTINGS_SYNC, SANDBOX_READY, STATE_SYNC } from './util/const.js'
+import { isDark } from './util/dark.js'
+import { mapFile } from './util/mapping'
+import { applyPreviewSettings } from './util/preview-settings.js'
+import { toRawDeep } from './util/state.js'
+
+const query = parseQuery(window.location.search)
+const file = ref<StoryFile>(mapFile(files.find(f => f.id === query.storyId)))
+
+const app = createApp({
+  name: 'SandboxApp',
+
+  setup() {
+    const story = computed(() => file.value.story)
+    const variant = computed(() => story.value?.variants.find(v => v.id === query.variantId))
+
+    let synced = false
+    let mounted = false
+
+    window.addEventListener('message', (event) => {
+      // console.log('[sandbox] received message', event.data)
+      if (event.data?.type === STATE_SYNC) {
+        if (!mounted) return
+        synced = true
+        applyState(variant.value.state, event.data.state)
+      }
+      else if (event.data?.type === PREVIEW_SETTINGS_SYNC) {
+        applyPreviewSettings(event.data.settings)
+      }
+    })
+
+    watch(() => variant.value.state, (value) => {
+      if (synced && mounted) {
+        synced = false
+        return
+      }
+      window.parent?.postMessage({
+        type: STATE_SYNC,
+        state: toRawDeep(value, true),
+      })
+    }, {
+      deep: true,
+    })
+
+    onMounted(() => {
+      mounted = true
+    })
+
+    return {
+      story,
+      variant,
+    }
+  },
+
+  render() {
+    return [
+      h('div', { class: 'htw-sandbox-hidden' }, [
+        h(GenericMountStory, {
+          key: file.value.story.id,
+          story: file.value.story,
+        }),
+      ]),
+      this.story && this.variant
+        ? h(GenericRenderStory, { story: this.story, variant: this.variant, onReady: () => {
+            window.parent?.postMessage({
+              type: SANDBOX_READY,
+            })
+          } })
+        : null,
+    ]
+  },
+})
+app.use(createPinia())
+app.mount('#app')
+
+watch(isDark, (value) => {
+  if (value) {
+    document.documentElement.classList.add(histoireConfig.sandboxDarkClass) // @TODO remove
+    document.documentElement.classList.add(histoireConfig.theme.darkClass)
+  }
+  else {
+    document.documentElement.classList.remove(histoireConfig.sandboxDarkClass) // @TODO remove
+    document.documentElement.classList.remove(histoireConfig.theme.darkClass)
+  }
+}, {
+  immediate: true,
+})
+
+if (import.meta.hot) {
+  /* #__PURE__ */ setupPluginApi()
+}

package/src/app/stores/command.ts

@@ -0,0 +1,26 @@
+import type { ClientCommand } from '@histoire/shared'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { executeCommand, getCommandContext } from '../util/commands.js'
+
+export const useCommandStore = defineStore('command', () => {
+  const selectedCommand = ref<ClientCommand | null>(null)
+  const showPromptsModal = ref(false)
+
+  function activateCommand(command: ClientCommand) {
+    selectedCommand.value = command
+    if (command.prompts?.length) {
+      showPromptsModal.value = true
+    }
+    else {
+      const params = command.getParams?.(getCommandContext()) ?? {}
+      executeCommand(command, params)
+    }
+  }
+
+  return {
+    selectedCommand,
+    showPromptsModal,
+    activateCommand,
+  }
+})

package/src/app/stores/events.ts

@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia'
+import { reactive, ref, watch } from 'vue'
+import { useStoryStore } from './story.js'
+
+export interface HstEvent {
+  name: string
+  argument: unknown
+}
+
+export const useEventsStore = defineStore('events', () => {
+  const storyStore = useStoryStore()
+
+  const events = reactive<Array<HstEvent>>([])
+  const unseen = ref(0)
+
+  function addEvent(event: HstEvent) {
+    events.push(event)
+    unseen.value++
+  }
+
+  function reset() {
+    events.length = 0
+    unseen.value = 0
+  }
+
+  watch(() => storyStore.currentVariant?.id, () => {
+    reset()
+  })
+
+  return {
+    addEvent,
+    reset,
+    events,
+    unseen,
+  }
+})

package/src/app/stores/folder.ts

@@ -0,0 +1,63 @@
+import { useStorage } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { watch } from 'vue'
+import { useStoryStore } from './story'
+
+export const useFolderStore = defineStore('folder', () => {
+  const openedFolders = useStorage<Map<string, boolean>>(
+    '_histoire-tree-state',
+    new Map(),
+  )
+
+  function getStringPath(path: Array<string>) {
+    return path.join('␜')
+  }
+
+  function toggleFolder(path: Array<string>, defaultToggleValue = true) {
+    const stringPath = getStringPath(path)
+
+    const currentValue = openedFolders.value.get(stringPath)
+
+    if (currentValue == null) {
+      setFolderOpen(stringPath, defaultToggleValue)
+    }
+    else if (currentValue) {
+      setFolderOpen(stringPath, false)
+    }
+    else {
+      setFolderOpen(stringPath, true)
+    }
+  }
+
+  function setFolderOpen(path: Array<string> | string, value: boolean) {
+    const stringPath = typeof path === 'string' ? path : getStringPath(path)
+    openedFolders.value.set(stringPath, value)
+  }
+
+  function isFolderOpened(path: Array<string>, defaultValue = false) {
+    const value = openedFolders.value.get(getStringPath(path))
+    if (value == null) {
+      return defaultValue
+    }
+    return value
+  }
+
+  function openFileFolders(path: Array<string>) {
+    for (let pathLength = 1; pathLength < path.length; pathLength++) {
+      setFolderOpen(path.slice(0, pathLength), true)
+    }
+  }
+
+  const storyStore = useStoryStore()
+
+  watch(() => storyStore.currentStory, (story) => {
+    if (story) {
+      openFileFolders(story.file.path)
+    }
+  })
+
+  return {
+    isFolderOpened,
+    toggleFolder,
+  }
+})

package/src/app/stores/preview-settings.ts

@@ -0,0 +1,18 @@
+import type { PreviewSettings } from '../types'
+import { useStorage } from '@vueuse/core'
+import { defineStore } from 'pinia'
+
+export const usePreviewSettingsStore = defineStore('preview-settings', () => {
+  const currentSettings = useStorage<PreviewSettings>('_histoire-sandbox-settings-v3', {
+    responsiveWidth: 720,
+    responsiveHeight: null,
+    rotate: false,
+    backgroundColor: 'transparent',
+    checkerboard: false,
+    textDirection: 'ltr',
+  })
+
+  return {
+    currentSettings,
+  }
+})

package/src/app/stores/story.ts

@@ -0,0 +1,47 @@
+import type { Story, Variant } from '../types'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { router } from '../router'
+
+export const useStoryStore = defineStore('story', () => {
+  const stories = ref<Story[]>([])
+  function setStories(value: Story[]) {
+    stories.value = value
+  }
+
+  const currentStory = computed(() => stories.value.find(s => s.id === router.currentRoute.value.params.storyId))
+
+  const currentVariant = computed(() => currentStory.value?.variants.find(v => v.id === router.currentRoute.value.query.variantId))
+
+  const maps = computed(() => {
+    const storyMap = new Map<string, Story>()
+    const variantMap = new Map<string, Variant>()
+    for (const story of stories.value) {
+      storyMap.set(story.id, story)
+      for (const variant of story.variants) {
+        variantMap.set(`${story.id}:${variant.id}`, variant)
+      }
+    }
+    return {
+      stories: storyMap,
+      variants: variantMap,
+    }
+  })
+
+  function getStoryById(id: string) {
+    return maps.value.stories.get(id)
+  }
+
+  function getVariantById(idWithStoryId: string) {
+    return maps.value.variants.get(idWithStoryId)
+  }
+
+  return {
+    stories,
+    setStories,
+    currentStory,
+    currentVariant,
+    getStoryById,
+    getVariantById,
+  }
+})

package/src/app/style/floating.pcss

@@ -0,0 +1,34 @@
+/* @TODO custom themes */
+
+.v-popper {
+  line-height: 0;
+}
+
+.v-popper--theme-dropdown {
+  .htw-dark & {
+    .v-popper__inner {
+      @apply htw-bg-gray-700 htw-border-gray-850 htw-text-gray-100;
+    }
+
+    .v-popper__arrow-inner {
+      @apply htw-border-gray-700;
+    }
+
+    .v-popper__arrow-outer {
+      @apply htw-border-gray-850;
+    }
+  }
+
+  &.v-popper__popper--show-from .v-popper__wrapper {
+    transform: scale(.75);
+  }
+
+  &.v-popper__popper--show-to .v-popper__wrapper {
+    transform: none;
+    transition: transform .15s cubic-bezier(0, 1, .5, 1);
+  }
+}
+
+.v-popper__popper:focus-visible {
+  outline: none;
+}

package/src/app/style/main.pcss

@@ -0,0 +1,100 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');
+@import 'floating-vue/dist/style.css';
+@import '@histoire/controls/dist/index.es.css';
+
+@import 'floating.pcss';
+@import 'transitions.pcss';
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+a,
+input,
+button {
+  color: inherit;
+}
+
+a {
+  text-decoration: inherit;
+}
+
+input, button {
+  font-family: inherit;
+}
+
+a,
+button {
+  user-select: none;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body,
+  pre {
+    margin: 0;
+  }
+
+  html,
+  body,
+  #app {
+    height: 100%;
+  }
+
+  html {
+    font-family: 'Noto Sans Display', system-ui, sans-serif;
+    font-size: 1rem;
+  }
+
+  body {
+    font-size: 1.125rem;
+  }
+
+  @media (min-width: 640px) {
+    body {
+      font-size: .875rem;
+    }
+  }
+
+  .__histoire-render-story:not(.__histoire-render-custom-controls) {
+    overflow: auto;
+    min-height: 100%;
+  }
+
+  .__histoire-code .shiki {
+    background: transparent !important;
+  }
+
+  .htw-prose {
+    h1, h2, h3, h4 {
+      &:not(:hover) {
+        .header-anchor[aria-hidden="true"] {
+          visibility: hidden;
+        }
+      }
+    }
+
+    hr {
+      margin: 1rem 0;
+    }
+  }
+
+  .__histoire-pane-shadow-from-right {
+    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
+    background-size: 24px;
+    background-repeat: no-repeat;
+    background-position: right;
+
+    .htw-dark & {
+      background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+    }
+  }
+}

package/src/app/style/sandbox.css

@@ -0,0 +1,24 @@
+@import '@histoire/controls/dist/index.es.css';
+
+html,
+body {
+  background: transparent !important;
+}
+
+body {
+  margin: 0;
+}
+
+html {
+  font-size: 1rem;
+  font-family: 'Noto Sans Display', system-ui, sans-serif;
+}
+
+.htw-sandbox-hidden {
+  display: none;
+}
+
+.__histoire-render-story:not(.__histoire-render-custom-controls) {
+  overflow: auto;
+  min-height: 100%;
+}

package/src/app/style/transitions.pcss

@@ -0,0 +1,51 @@
+.__histoire-scale-x {
+  &-enter-active,
+  &-leave-active {
+    transition: transform .15s, opacity .15s;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+}
+
+.__histoire-scale-y {
+  &-enter-active,
+  &-leave-active {
+    transition: transform .15s, opacity .15s;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+
+.__histoire-fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity .15s;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
+.__histoire-fade-bottom {
+  &-enter-active,
+  &-leave-active {
+    transition: transform .15s, opacity .15s;
+    transform: translateY(0px);
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(32px);
+    opacity: 0;
+  }
+}