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

package/src/app/types.ts

@@ -0,0 +1,72 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export type {
+  Story,
+  StoryFile,
+  StoryLayout,
+  Variant,
+} from '@histoire/shared'
+
+export interface TreeLeaf {
+  title: string
+  index: number
+}
+
+export interface TreeFolder {
+  title: string
+  children: (TreeFolder | TreeLeaf)[]
+}
+
+export interface TreeGroup {
+  group: true
+  id: string
+  title: string
+  children: (TreeFolder | TreeLeaf)[]
+}
+
+export type Tree = (TreeGroup | TreeFolder | TreeLeaf)[]
+
+export type SearchResultType = 'title' | 'docs'
+
+export interface SearchResultBase {
+  kind: 'story' | 'variant' | 'command'
+  rank: number
+  id: string
+  title: string
+  path?: string[]
+  icon?: string
+  iconColor?: string
+  type?: SearchResultType
+}
+
+export type SearchResult = SearchResultBase & ({
+  route: RouteLocationRaw
+} | {
+  onActivate: () => unknown
+})
+
+export interface PreviewSettings {
+  responsiveWidth: number
+  responsiveHeight: number
+  rotate: boolean
+  backgroundColor: string
+  checkerboard: boolean
+  textDirection: 'ltr' | 'rtl'
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    __HISTOIRE_DEV__: boolean
+  }
+}
+
+declare global {
+  const __HISTOIRE_DEV__: boolean
+
+  interface Window {
+    __HST_PLUGIN_API__: {
+      sendEvent: (event: string, payload: any) => Promise<any>
+      openStory: (storyId: string) => void
+    }
+  }
+}

package/src/app/util/commands.ts

@@ -0,0 +1,57 @@
+import type { ClientCommand, ClientCommandContext } from '@histoire/shared'
+import { router } from '../router.js'
+import { useStoryStore } from '../stores/story.js'
+import { openInEditor } from './open-in-editor.js'
+
+export const builtinCommands: ClientCommand[] = [
+  {
+    id: 'builtin:open-in-editor',
+    label: 'Open file in editor',
+    icon: 'carbon:script-reference',
+    showIf: ({ route }) => route.name === 'story' && !!useStoryStore().currentStory,
+    getParams: () => {
+      const story = useStoryStore().currentStory
+      let file: string
+      if (story.docsOnly) {
+        file = story.file?.docsFilePath ?? story.file?.filePath
+      }
+      else {
+        file = story.file?.filePath
+      }
+      return {
+        file,
+      }
+    },
+    clientAction: ({ file }) => {
+      openInEditor(file)
+    },
+  },
+  {
+    id: 'builtin:histoire-docs',
+    label: 'Open Histoire Documentation',
+    icon: 'carbon:help',
+    clientAction: () => {
+      window.open('https://histoire.dev/guide/getting-started.html', '_blank')
+    },
+  },
+]
+
+export function executeCommand(command: ClientCommand, params: Record<string, any>) {
+  if (import.meta.hot) {
+    import.meta.hot.send('histoire:dev-command', {
+      id: command.id,
+      params,
+    })
+
+    command.clientAction?.(params, getCommandContext())
+  }
+}
+
+export function getCommandContext(): ClientCommandContext {
+  const storyStore = useStoryStore()
+  return {
+    route: router.currentRoute.value,
+    currentStory: storyStore.currentStory,
+    currentVariant: storyStore.currentVariant,
+  }
+}

package/src/app/util/config.ts

@@ -0,0 +1,5 @@
+import type { HistoireConfig } from '@histoire/shared'
+import { config as configRaw, logos as logosRaw } from 'virtual:$histoire-config'
+
+export const histoireConfig: HistoireConfig = configRaw
+export const customLogos: HistoireConfig['theme']['logo'] = logosRaw

package/src/app/util/const.ts

@@ -0,0 +1,4 @@
+export const STATE_SYNC = '__histoire:state-sync'
+export const SANDBOX_READY = '__histoire:sandbox-ready'
+export const EVENT_SEND = '__histoire:event'
+export const PREVIEW_SETTINGS_SYNC = '__histoire:preview-settings-sync'

package/src/app/util/dark.ts

@@ -0,0 +1,27 @@
+import { useDark, useToggle } from '@vueuse/core'
+import { watch } from 'vue'
+import { histoireConfig } from './config.js'
+
+export const isDark = useDark({
+  valueDark: 'htw-dark',
+  initialValue: histoireConfig.theme.defaultColorScheme,
+  storageKey: 'histoire-color-scheme',
+  storage: histoireConfig.theme.storeColorScheme ? localStorage : sessionStorage,
+})
+export const toggleDark = useToggle(isDark)
+
+function applyDarkToControls() {
+  window.__hst_controls_dark?.forEach((ref) => {
+    ref.value = isDark.value
+  })
+}
+
+watch(isDark, () => {
+  applyDarkToControls()
+}, {
+  immediate: true,
+})
+
+window.__hst_controls_dark_ready = () => {
+  applyDarkToControls()
+}

package/src/app/util/docs.ts

@@ -0,0 +1,27 @@
+import type { Story, Variant } from '../types'
+import { unindent } from '@histoire/shared'
+import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client'
+
+export async function getSourceCode(story: Story, variant: Variant) {
+  if (variant.source) {
+    return variant.source
+  }
+  else if (variant.slots?.().source) {
+    const source = variant.slots?.().source()[0].children
+    if (source) {
+      return unindent(source)
+    }
+  }
+  else {
+    const clientPlugin = clientSupportPlugins[story.file?.supportPluginId]
+    if (clientPlugin) {
+      const pluginModule = await clientPlugin()
+      return pluginModule.generateSourceCode(variant)
+    }
+  }
+
+  const sourceLoader = story.file?.source
+  if (sourceLoader) {
+    return (await sourceLoader()).default
+  }
+}

package/src/app/util/env.ts

@@ -0,0 +1 @@
+export const isMac = navigator.platform.toLowerCase().includes('mac')

package/src/app/util/events.ts

@@ -0,0 +1,31 @@
+import { EVENT_SEND } from './const'
+
+export async function logEvent(name: string, argument) {
+  console.log('[histoire] Event fired', { name, argument })
+  const event = {
+    name,
+    argument: JSON.parse(stringifyEvent(argument)), // Needed for HTMLEvent that can't be cloned
+  }
+  if (location.href.includes('__sandbox')) {
+    window.parent?.postMessage({
+      type: EVENT_SEND,
+      event,
+    })
+  }
+  else {
+    const { useEventsStore } = await import('../stores/events.js')
+    useEventsStore().addEvent(event)
+  }
+}
+
+function stringifyEvent(e) {
+  const obj = {}
+  for (const k in e) {
+    obj[k] = e[k]
+  }
+  return JSON.stringify(obj, (k, v) => {
+    if (v instanceof Node) return 'Node'
+    if (v instanceof Window) return 'Window'
+    return v
+  }, ' ')
+}

package/src/app/util/keyboard.ts

@@ -0,0 +1,103 @@
+import type { Ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { isRef } from 'vue'
+import { isMac } from './env.js'
+
+export type KeyboardShortcut = string[]
+
+export type KeyboardHandler = (event: KeyboardEvent) => unknown
+
+export interface KeyboardShortcutOptions {
+  event?: 'keyup' | 'keydown' | 'keypress'
+}
+
+export function onKeyboardShortcut(shortcut: KeyboardShortcut | Ref<KeyboardShortcut>, handler: KeyboardHandler, options: KeyboardShortcutOptions = {}) {
+  useEventListener(options.event ?? 'keydown', (event) => {
+    if (isMatchingShortcut(isRef(shortcut) ? shortcut.value : shortcut)) {
+      handler(event)
+    }
+  })
+}
+
+const modifiers: { [i: string]: { key: string, pressed: boolean } } = {
+  ctrl: { key: 'Control', pressed: false },
+  alt: { key: 'Alt', pressed: false },
+  shift: { key: 'Shift', pressed: false },
+  meta: { key: 'Meta', pressed: false },
+}
+
+const pressedKeys = new Set<string>()
+
+window.addEventListener('keydown', (event) => {
+  for (const i in modifiers) {
+    const mod = modifiers[i]
+    if (mod.key === event.key) {
+      mod.pressed = true
+      return
+    }
+  }
+  pressedKeys.add(event.key.toLocaleLowerCase())
+})
+
+window.addEventListener('keyup', (event) => {
+  requestAnimationFrame(() => {
+    pressedKeys.clear()
+    for (const i in modifiers) {
+      const mod = modifiers[i]
+      if (mod.key === event.key) {
+        mod.pressed = false
+        break
+      }
+    }
+  })
+})
+
+window.addEventListener('blur', () => {
+  pressedKeys.clear()
+  for (const i in modifiers) {
+    const mod = modifiers[i]
+    mod.pressed = false
+  }
+})
+
+function isMatchingShortcut(shortcut: KeyboardShortcut): boolean {
+  for (const combination of shortcut) {
+    if (isMatchingCombination(combination.toLowerCase())) {
+      return true
+    }
+  }
+  return false
+}
+
+function isMatchingCombination(combination: string): boolean {
+  const splitted = combination.split('+').map(key => key.trim())
+  const targetKey = splitted.pop()
+  for (const mod in modifiers) {
+    const containsMod = splitted.includes(mod)
+    const isPressed = modifiers[mod].pressed
+    if (containsMod !== isPressed) {
+      return false
+    }
+  }
+  return pressedKeys.has(targetKey)
+}
+
+export function formatKey(key: string) {
+  key = key.toLowerCase()
+  if (key === 'ctrl') {
+    return isMac ? '^' : 'Ctrl'
+  }
+  if (key === 'alt') {
+    return isMac ? '⎇' : 'Alt'
+  }
+  if (key === 'shift') {
+    return '⇧'
+  }
+  if (key === 'meta') {
+    return '⌘'
+  }
+  if (key === 'enter') {
+    return '⏎'
+  }
+  return key.charAt(0).toUpperCase() + key.substring(1).toLowerCase()
+}

package/src/app/util/mapping.ts

@@ -0,0 +1,80 @@
+import type { StoryFile, Variant } from '../types'
+import { markRaw, reactive } from 'vue'
+
+const copiedFromExistingVariant = [
+  'state',
+  'slots',
+  'source',
+  'responsiveDisabled',
+  'autoPropsDisabled',
+  'setupApp',
+  'configReady',
+  'previewReady',
+]
+
+export function mapFile(file: StoryFile, existingFile?: StoryFile): StoryFile {
+  let result: StoryFile
+
+  if (existingFile) {
+    // Update
+    result = existingFile
+    for (const key in file) {
+      if (key === 'story') {
+        result.story = {
+          ...result.story,
+          ...file.story,
+          file: markRaw(result),
+          variants: file.story.variants.map(v => mapVariant(v, existingFile.story.variants.find(item => item.id === v.id))),
+        }
+      }
+      else if (key !== 'component') {
+        result[key] = file[key]
+      }
+    }
+  }
+  else {
+    // Create
+    result = {
+      ...file,
+      component: markRaw(file.component),
+      story: {
+        ...file.story,
+        title: file.story.title,
+        file: markRaw(file),
+        variants: file.story.variants.map(v => mapVariant(v)),
+        slots: () => ({}),
+      },
+    }
+  }
+
+  return result
+}
+
+export function mapVariant(variant: Variant, existingVariant?: Variant): Variant {
+  let result: Variant
+
+  if (existingVariant) {
+    // Update
+    result = existingVariant
+    for (const key in variant) {
+      if (!copiedFromExistingVariant.includes(key)) {
+        result[key] = variant[key]
+      }
+    }
+  }
+  else {
+    // Create
+    result = {
+      ...variant,
+      state: reactive({
+        _hPropState: {},
+        _hPropDefs: {},
+      }),
+      setupApp: null,
+      slots: () => ({}),
+      previewReady: false,
+    }
+  }
+
+  return result
+}

package/src/app/util/open-in-editor.ts

@@ -0,0 +1,3 @@
+export function openInEditor(file: string) {
+  return fetch(`${import.meta.env.BASE_URL}__open-in-editor?file=${encodeURIComponent(file)}`)
+}

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

@@ -0,0 +1,23 @@
+import type { PreviewSettings } from '../types'
+import { reactive } from 'vue'
+import { histoireConfig } from './config'
+
+export const receivedSettings = reactive<PreviewSettings>({} as PreviewSettings)
+
+export function applyPreviewSettings(settings: PreviewSettings) {
+  Object.assign(receivedSettings, settings)
+
+  // Text direction
+  document.documentElement.setAttribute('dir', settings.textDirection)
+
+  // Contrast color
+  const contrastColor = getContrastColor(settings)
+  document.documentElement.style.setProperty('--histoire-contrast-color', contrastColor)
+  if (histoireConfig.autoApplyContrastColor) {
+    document.documentElement.style.color = contrastColor
+  }
+}
+
+export function getContrastColor(setting: PreviewSettings) {
+  return histoireConfig.backgroundPresets.find(preset => preset.color === setting.backgroundColor)?.contrastColor ?? 'unset'
+}

package/src/app/util/responsive.ts

@@ -0,0 +1,3 @@
+import { useMediaQuery } from '@vueuse/core'
+
+export const isMobile = useMediaQuery('(max-width: 640px)')

package/src/app/util/sandbox.ts

@@ -0,0 +1,9 @@
+import type { Story, Variant } from '../types'
+import { base } from '../router'
+
+export function getSandboxUrl(story: Story, variant: Variant) {
+  const url = new URLSearchParams()
+  url.append('storyId', story.id)
+  url.append('variantId', variant.id)
+  return `${base}__sandbox.html?${url.toString()}`
+}

package/src/app/util/scroll.ts

@@ -0,0 +1,32 @@
+import type { Ref } from 'vue'
+import scrollIntoView from 'scroll-into-view-if-needed'
+import { onMounted, watch } from 'vue'
+
+export function useScrollOnActive(active: Ref<boolean>, el: Ref<HTMLElement>) {
+  watch(active, (value) => {
+    if (value) {
+      autoScroll()
+    }
+  })
+
+  function autoScroll() {
+    if (el.value) {
+      scrollIntoView(el.value, {
+        scrollMode: 'if-needed',
+        block: 'center',
+        inline: 'nearest',
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  onMounted(() => {
+    if (active.value) {
+      autoScroll()
+    }
+  })
+
+  return {
+    autoScroll,
+  }
+}

package/src/app/util/select.ts

@@ -0,0 +1,30 @@
+import type { Ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+
+export function useSelection(list: Ref<any[]>) {
+  const selectedIndex = ref(0)
+
+  watch(list, () => {
+    selectedIndex.value = 0
+  })
+
+  function selectNext() {
+    selectedIndex.value++
+    if (selectedIndex.value > list.value.length - 1) {
+      selectedIndex.value = 0
+    }
+  }
+
+  function selectPrevious() {
+    selectedIndex.value--
+    if (selectedIndex.value < 0) {
+      selectedIndex.value = list.value.length - 1
+    }
+  }
+
+  return {
+    selectedIndex: computed(() => selectedIndex.value),
+    selectNext,
+    selectPrevious,
+  }
+}

package/src/app/util/state.ts

@@ -0,0 +1,45 @@
+import { isRef, unref } from 'vue'
+
+const isObject = val => val !== null && typeof val === 'object'
+
+export function toRawDeep(val, clean = false, seen = new WeakMap()) {
+  const unwrappedValue = isRef(val) ? unref(val) : val
+
+  if (typeof unwrappedValue === 'symbol') {
+    return unwrappedValue.toString()
+  }
+
+  if (!isObject(unwrappedValue)) {
+    return unwrappedValue
+  }
+
+  if (seen.has(unwrappedValue)) {
+    return seen.get(unwrappedValue)
+  }
+
+  if (Array.isArray(unwrappedValue)) {
+    const result = []
+    seen.set(unwrappedValue, result)
+    let list = unwrappedValue.map(value => toRawDeep(value, clean, seen))
+    if (clean) {
+      list = list.filter(value => typeof value !== 'function')
+    }
+    result.push(...list)
+    return result
+  }
+  else {
+    const result = {}
+    seen.set(unwrappedValue, result)
+    toRawObject(unwrappedValue, result, clean, seen)
+    return result
+  }
+}
+
+function toRawObject(obj: Record<any, any>, target: Record<any, any>, clean = false, seen = new WeakMap()) {
+  Object.keys(obj).forEach((key) => {
+    if (clean && typeof obj[key] === 'function') {
+      return
+    }
+    target[key] = toRawDeep(obj[key], clean, seen)
+  })
+}

package/src/app/util/tooltip.ts

@@ -0,0 +1,13 @@
+import { isMac } from './env.js'
+import { formatKey } from './keyboard.js'
+
+export function makeTooltip(descriptionHtml: string, keyboardShortcut: (options: { isMac: boolean }) => string) {
+  return {
+    content: `<div>${descriptionHtml}</div><div class="htw-flex htw-items-center htw-gap-1 htw-mt-2 htw-text-sm">${genKeyboardShortcutHtml(keyboardShortcut({ isMac }))}</div>`,
+    html: true,
+  }
+}
+
+function genKeyboardShortcutHtml(shortcut: string) {
+  return `<span class="htw-border htw-border-gray-600 htw-px-1 htw-rounded-sm htw-text-gray-400">${shortcut.split('+').map(k => formatKey(k.trim())).join(' ')}</span>`
+}

package/src/app/util/variant.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue'
+import type { Variant } from '../types'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export function useCurrentVariantRoute(variant: Ref<Variant>) {
+  const route = useRoute()
+  const isActive = computed(() => route.query.variantId === variant.value.id)
+  const targetRoute = computed(() => ({
+    ...route,
+    query: {
+      ...route.query,
+      variantId: variant.value.id,
+    },
+  }))
+
+  return {
+    isActive,
+    targetRoute,
+  }
+}

package/src/bundle-index.js

@@ -0,0 +1 @@
+export * from './bundled/api.js'

package/src/bundle-main-dev.js

@@ -0,0 +1,4 @@
+import { mountMainApp } from './app/index'
+import './app/style/main.pcss'
+
+mountMainApp()

package/src/bundle-main.js

@@ -0,0 +1,5 @@
+import { mountMainApp } from './bundled/index.js'
+import './style.css'
+import './bundled/app.css'
+
+mountMainApp()

package/src/bundle-sandbox-dev.js

@@ -0,0 +1,2 @@
+import './app/style/sandbox.css'
+import './app/sandbox'

package/src/bundle-sandbox.js

@@ -0,0 +1,2 @@
+import './app/style/sandbox.css'
+import './bundled/sandbox.js'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './app/api.js'

package/src/shim.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+import type { Ref } from '@histoire/vendors/vue'
+
+global {
+  interface Window {
+    __hst_controls_dark: Ref<boolean>[]
+    __hst_controls_dark_ready: () => void
+  }
+}

package/src/virtual.d.ts

@@ -0,0 +1,7 @@
+declare module 'virtual:$histoire-commands' {
+  import type { ClientCommand } from '@histoire/shared'
+
+  export const registeredCommands: ClientCommand[]
+}
+
+declare module 'virtual:*';