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

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

@@ -0,0 +1,199 @@
+<script lang="ts" setup>
+import type { Story, Variant } from '../../types'
+import { applyState, clone, omit } from '@histoire/shared'
+import { Icon } from '@iconify/vue'
+import { onClickOutside, useStorage, useTimeoutFn } from '@vueuse/core'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { toRawDeep } from '../../util/state'
+import BaseSelect from '../base/BaseSelect.vue'
+
+const DEFAULT_ID = 'default'
+
+const props = defineProps<{
+  story: Story
+  variant: Variant
+}>()
+
+const saveId = computed(() => `${props.story.id}:${props.variant.id}`)
+
+const omitKeys = ['_hPropDefs']
+
+const defaultState = clone(omit(toRawDeep(props.variant.state), omitKeys))
+
+const selectedOption = useStorage<string>(
+  `_histoire-presets/${saveId.value}/selected`,
+  DEFAULT_ID,
+)
+
+const presetStates = useStorage<Map<string, { state: Record<string, unknown>, label: string }>>(
+  `_histoire-presets/${saveId.value}/states`,
+  new Map(),
+)
+
+const presetsOptions = computed(() => {
+  const options = { [DEFAULT_ID]: 'Initial state' }
+  presetStates.value.forEach((value, key) => {
+    options[key] = value.label
+  })
+  return options
+})
+
+function resetState() {
+  selectedOption.value = DEFAULT_ID
+  applyState(props.variant.state, clone(defaultState))
+}
+
+function applyPreset(id) {
+  if (id === DEFAULT_ID) {
+    resetState()
+  }
+  else if (presetStates.value.has(id)) {
+    applyState(props.variant.state, clone(toRawDeep(presetStates.value.get(id).state)))
+  }
+}
+
+onMounted(() => {
+  if (selectedOption.value !== DEFAULT_ID) {
+    applyPreset(selectedOption.value)
+  }
+})
+
+const input = ref<HTMLInputElement>()
+const select = ref<HTMLInputElement>()
+const canEdit = computed(() => selectedOption.value !== DEFAULT_ID)
+const isEditing = ref(false)
+
+async function createPreset() {
+  const id = (new Date()).getTime().toString()
+
+  presetStates.value.set(id, { state: clone(omit(toRawDeep(props.variant.state), omitKeys)), label: 'New preset' })
+  selectedOption.value = id
+  isEditing.value = true
+  await nextTick()
+  input.value.select()
+}
+
+const savedNotif = ref(false)
+const savedTimeout = useTimeoutFn(() => {
+  savedNotif.value = false
+}, 1000)
+
+async function savePreset() {
+  if (!canEdit.value) return
+
+  const preset = presetStates.value.get(selectedOption.value)
+  preset.state = clone(omit(toRawDeep(props.variant.state), omitKeys))
+  savedNotif.value = true
+  savedTimeout.start()
+}
+
+function deletePreset(id) {
+  // @TODO custom confirm modal UI
+  // eslint-disable-next-line no-alert
+  if (!confirm('Are you sure you want to delete this preset?')) {
+    return
+  }
+
+  if (selectedOption.value === id) {
+    resetState()
+  }
+  presetStates.value.delete(id)
+}
+
+async function startEditing() {
+  if (!canEdit.value) {
+    return
+  }
+
+  isEditing.value = true
+  await nextTick()
+  input.value.select()
+}
+
+function stopEditing() {
+  isEditing.value = false
+}
+
+onClickOutside(select, stopEditing)
+</script>
+
+<template>
+  <div class="histoire-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center">
+    <div
+      ref="select"
+      class="htw-flex-1 htw-min-w-0"
+    >
+      <BaseSelect
+        v-model="selectedOption"
+        :options="presetsOptions"
+        @dblclick="startEditing()"
+        @keydown.enter="stopEditing()"
+        @keydown.escape="stopEditing()"
+        @select="id => applyPreset(id)"
+      >
+        <template #default="{ label }">
+          <input
+            v-if="isEditing"
+            ref="input"
+            v-model="presetStates.get(selectedOption).label"
+            type="text"
+            class="htw-text-inherit htw-bg-transparent htw-w-full htw-h-full htw-outline-none"
+            @click.stop.prevent
+          >
+
+          <div
+            v-else
+            class="htw-flex htw-items-center htw-gap-2"
+          >
+            <span class="htw-flex-1 htw-truncate">
+              {{ label }}
+            </span>
+            <Icon
+              v-if="canEdit"
+              v-tooltip="'Rename this preset'"
+              icon="carbon:edit"
+              class="htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+              @click.stop="startEditing()"
+            />
+          </div>
+        </template>
+
+        <template #option="{ label, value }">
+          <div class="htw-flex htw-gap-2 htw-items-center">
+            <span
+              class="htw-flex-1 htw-truncate"
+            >{{ label }}</span>
+            <Icon
+              v-if="value !== DEFAULT_ID"
+              v-tooltip="'Delete this preset'"
+              icon="carbon:trash-can"
+              class="htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+              @click.stop="deletePreset(value)"
+            />
+          </div>
+        </template>
+      </BaseSelect>
+    </div>
+    <Icon
+      v-tooltip="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null"
+      :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
+      class="htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+      :class="[
+        canEdit ? 'htw-opacity-50 hover:htw-opacity-100' : 'htw-opacity-25 htw-pointer-events-none',
+      ]"
+      @click="savePreset()"
+    />
+    <Icon
+      v-tooltip="'Create new preset'"
+      icon="carbon:add-alt"
+      class="htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+      @click="createPreset()"
+    />
+    <Icon
+      v-tooltip="'Reset to initial state'"
+      icon="carbon:reset"
+      class="htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+      @click="resetState()"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { Story, Variant } from '../../types'
+import { Icon } from '@iconify/vue'
+import { computed, ref, watch } from 'vue'
+import BaseEmpty from '../base/BaseEmpty.vue'
+import GenericRenderStory from '../story/GenericRenderStory.vue'
+import ControlsComponentProps from './ControlsComponentProps.vue'
+import ControlsComponentState from './ControlsComponentState.vue'
+import StatePresets from './StatePresets.vue'
+
+const props = defineProps({
+  variant: {
+    type: Object as PropType<Variant>,
+    required: true,
+  },
+
+  story: {
+    type: Object as PropType<Story>,
+    required: true,
+  },
+})
+
+// Wait for controls render before applying presets
+const ready = ref(false)
+
+watch(() => props.variant, () => {
+  ready.value = false
+})
+
+const hasCustomControls = computed(() => props.variant.slots().controls || props.story.slots().controls)
+
+const hasInitState = computed(() => Object
+  .entries(props.variant.state || {})
+  .filter(([key]) => !key.startsWith('_h'))
+  .length > 0)
+</script>
+
+<template>
+  <div
+    data-test-id="story-controls"
+    class="histoire-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
+  >
+    <!-- Toolbar -->
+    <div
+      class="htw-h-9 htw-flex-none htw-px-2 htw-flex htw-items-center"
+    >
+      <StatePresets
+        v-if="ready || !hasCustomControls"
+        :story="story"
+        :variant="variant"
+      />
+    </div>
+
+    <!-- Custom controls -->
+    <GenericRenderStory
+      v-if="hasCustomControls"
+      :key="`${story.id}-${variant.id}`"
+      slot-name="controls"
+      :variant="variant"
+      :story="story"
+      class="__histoire-render-custom-controls htw-flex-none"
+      @ready="ready = true"
+    />
+
+    <!-- Init state -->
+    <div
+      v-else-if="hasInitState"
+    >
+      <ControlsComponentState
+        class="htw-flex-none htw-my-2"
+        :variant="variant"
+      />
+    </div>
+
+    <BaseEmpty v-else-if="!variant.state?._hPropDefs?.length">
+      <Icon
+        icon="carbon:audio-console"
+        class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+      />
+      <span>No controls available for this story</span>
+    </BaseEmpty>
+
+    <!-- Auto props -->
+    <div
+      v-if="variant.state?._hPropDefs?.length"
+    >
+      <ControlsComponentProps
+        v-for="(def, index) of variant.state._hPropDefs"
+        :key="index"
+        :variant="variant"
+        :definition="def"
+        class="htw-flex-none htw-my-2"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,202 @@
+<script lang="ts">
+import type { PropType, Ref } from 'vue'
+import type { Story } from '../../types'
+import { Icon } from '@iconify/vue'
+import { markdownFiles } from 'virtual:$histoire-markdown-files'
+import { computed, nextTick, ref, toRefs, watch, watchEffect } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { histoireConfig } from '../../util/config.js'
+import BaseEmpty from '../base/BaseEmpty.vue'
+import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
+
+export function useStoryDoc(story: Ref<Story>) {
+  const renderedDoc = ref('')
+
+  watchEffect(async () => {
+    // Markdown file
+    const mdKey = story.value.file.filePath.replace(/\.(\w*)$/, '.md')
+    if (markdownFiles[mdKey]) {
+      const md = await markdownFiles[mdKey]()
+      renderedDoc.value = md.html
+      return
+    }
+
+    // Custom blocks (Vue)
+    // @TODO extract
+    let comp = story.value.file?.component
+    if (comp) {
+      if (comp.__asyncResolved) {
+        comp = comp.__asyncResolved
+      }
+      else if (comp.__asyncLoader) {
+        comp = await comp.__asyncLoader()
+      }
+      else if (typeof comp === 'function') {
+        try {
+          comp = await comp()
+        }
+        catch (e) {
+          // Noop
+          // Could be a class that requires `new com()`
+        }
+      }
+      if (comp?.default) {
+        comp = comp.default
+      }
+      renderedDoc.value = comp.doc
+    }
+  })
+
+  return {
+    renderedDoc,
+  }
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps({
+  story: {
+    type: Object as PropType<Story>,
+    required: true,
+  },
+
+  standalone: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'scrollTop'): void
+}>()
+
+const { story } = toRefs(props)
+
+const { renderedDoc } = useStoryDoc(story)
+
+// Markdown links to other stories
+const router = useRouter()
+
+// we are just using URL to parse the pathname and hash - the base doesn't
+// matter and is only passed to support same-host hrefs.
+const fakeHost = `http://a.com`
+
+function onClick(e: MouseEvent) {
+  const link = (e.target as Element).closest('a')
+  if (
+    link
+    && link.getAttribute('data-route')
+    && !e.ctrlKey
+    && !e.shiftKey
+    && !e.altKey
+    && !e.metaKey
+    && link.target !== `_blank`
+  ) {
+    e.preventDefault()
+    const url = new URL(link.href, fakeHost)
+    const targetHref = url.pathname + url.search + url.hash
+    router.push(targetHref)
+  }
+}
+
+// Handle URL anchor
+
+function getHash() {
+  const hash = location.hash
+  if (histoireConfig.routerMode === 'hash') {
+    const index = hash.indexOf('#', 1)
+    if (index !== -1) {
+      return hash.slice(index)
+    }
+    else {
+      return undefined
+    }
+  }
+  return hash
+}
+
+async function scrollToAnchor() {
+  await nextTick()
+  const hash = getHash()
+  if (hash) {
+    const anchor = document.querySelector(decodeURIComponent(hash))
+    if (anchor) {
+      anchor.scrollIntoView()
+      return
+    }
+  }
+  emit('scrollTop')
+}
+
+watch(renderedDoc, () => {
+  scrollToAnchor()
+}, {
+  immediate: true,
+})
+
+// Fix anchor links with router mode 'hash'
+
+const renderedEl = ref<HTMLElement>()
+const route = useRoute()
+
+async function patchAnchorLinks() {
+  await nextTick()
+  if (histoireConfig.routerMode === 'hash' && renderedEl.value) {
+    const links = renderedEl.value.querySelectorAll('a.header-anchor')
+    for (const link of links) {
+      const href = link.getAttribute('href')
+      if (href) {
+        link.setAttribute('href', `#${route.path + href}`)
+      }
+    }
+  }
+}
+
+watch(renderedDoc, () => {
+  patchAnchorLinks()
+}, {
+  immediate: true,
+})
+
+// Open in editor
+
+const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standalone && story.value.file?.filePath))
+</script>
+
+<template>
+  <div
+    class="histoire-story-docs"
+    @click.capture="onClick"
+  >
+    <div
+      v-if="__HISTOIRE_DEV__ && renderedDoc && filePath"
+      class="htw-flex htw-items-center htw-gap-2 htw-p-2"
+      :class="{
+        'htw-pt-4': !standalone,
+      }"
+    >
+      <DevOnlyToolbarOpenInEditor
+        v-if="filePath"
+        :file="filePath"
+        tooltip="Edit docs in editor"
+      />
+    </div>
+
+    <BaseEmpty
+      v-if="!renderedDoc"
+    >
+      <Icon
+        icon="carbon:document-unknown"
+        class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+      />
+      No documentation available
+    </BaseEmpty>
+    <div
+      v-else
+      ref="renderedEl"
+      class="htw-prose dark:htw-prose-invert htw-p-4 htw-max-w-none"
+      data-test-id="story-docs"
+      v-html="renderedDoc"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { HstEvent } from '../../stores/events'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  event: HstEvent
+}>()
+
+const formattedArgument = computed(() => {
+  switch (typeof props.event.argument) {
+    case 'string':
+      return `"${props.event.argument}"`
+    case 'object':
+      return `{ ${Object.keys(props.event.argument).map(key => `${key}: ${props.event.argument[key]}`).join(', ')} }`
+    default:
+      return props.event.argument
+  }
+})
+</script>
+
+<template>
+  <VDropdown
+    class="histoire-story-event htw-group"
+    placement="right"
+    data-test-id="event-item"
+  >
+    <template #default="{ shown }">
+      <div
+        class="group-hover:htw-bg-primary-100 dark:group-hover:htw-bg-primary-700 htw-cursor-pointer htw-py-2 htw-px-4 htw-flex htw-items-baseline htw-gap-1 htw-leading-normal"
+        :class="[
+          shown ? 'htw-bg-primary-50 dark:htw-bg-primary-600' : 'group-odd:htw-bg-gray-100/50 dark:group-odd:htw-bg-gray-750/40',
+        ]"
+      >
+        <span
+          :class="{
+            'htw-text-primary-500': shown,
+          }"
+        >
+          {{ event.name }}
+        </span>
+        <span
+          v-if="event.argument"
+          class="htw-text-xs htw-opacity-50 htw-truncate"
+        >{{ formattedArgument }}</span>
+      </div>
+    </template>
+
+    <template #popper>
+      <div class="htw-overflow-auto htw-max-w-[400px] htw-max-h-[400px]">
+        <pre class="htw-p-4">{{ event.argument }}</pre>
+      </div>
+    </template>
+  </VDropdown>
+</template>

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

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useEventsStore } from '../../stores/events'
+import BaseEmpty from '../base/BaseEmpty.vue'
+import StoryEvent from './StoryEvent.vue'
+
+const eventsStore = useEventsStore()
+
+const hasEvents = computed(() => eventsStore.events.length)
+
+onMounted(resetUnseen)
+watch(() => eventsStore.unseen, resetUnseen)
+
+async function resetUnseen() {
+  if (eventsStore.unseen > 0) {
+    eventsStore.unseen = 0
+  }
+  await nextTick()
+  eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight })
+}
+
+const eventsElement = ref<HTMLDivElement>()
+</script>
+
+<template>
+  <div
+    ref="eventsElement"
+    class="histoire-story-events"
+  >
+    <BaseEmpty
+      v-if="!hasEvents"
+    >
+      <Icon
+        icon="carbon:event-schedule"
+        class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+      />
+      No event fired
+    </BaseEmpty>
+    <div v-else>
+      <StoryEvent
+        v-for="(event, key) of eventsStore.events"
+        :key="key"
+        :event="event"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStoryStore } from '../../stores/story'
+
+import BaseEmpty from '../base/BaseEmpty.vue'
+import BaseSplitPane from '../base/BaseSplitPane.vue'
+import PaneTabs from './PaneTabs.vue'
+import StoryControls from './StoryControls.vue'
+import StoryDocs from './StoryDocs.vue'
+import StoryEvents from './StoryEvents.vue'
+import StorySourceCode from './StorySourceCode.vue'
+
+const storyStore = useStoryStore()
+
+const route = useRoute()
+
+const panelContentComponent = computed(() => {
+  switch (route.query.tab) {
+    case 'docs':
+      return StoryDocs
+    case 'events':
+      return StoryEvents
+    default:
+      return StoryControls
+  }
+})
+</script>
+
+<template>
+  <BaseEmpty
+    v-if="!storyStore.currentVariant"
+    class="histoire-story-side-panel histoire-selection"
+  >
+    <span>Select a variant</span>
+  </BaseEmpty>
+
+  <BaseEmpty
+    v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
+    class="histoire-story-side-panel histoire-loading"
+  >
+    <span>Loading...</span>
+  </BaseEmpty>
+
+  <BaseSplitPane
+    v-else
+    save-id="story-sidepane"
+    orientation="portrait"
+    class="histoire-story-side-panel histoire-loaded htw-h-full"
+    data-test-id="story-side-panel"
+  >
+    <template #first>
+      <div class="htw-flex htw-flex-col htw-h-full">
+        <PaneTabs
+          :story="storyStore.currentStory"
+          :variant="storyStore.currentVariant"
+        />
+
+        <component
+          :is="panelContentComponent"
+          :story="storyStore.currentStory"
+          :variant="storyStore.currentVariant"
+          class="htw-h-full htw-overflow-auto"
+        />
+      </div>
+    </template>
+
+    <template #last>
+      <StorySourceCode
+        :story="storyStore.currentStory"
+        :variant="storyStore.currentVariant"
+        class="htw-h-full"
+      />
+    </template>
+  </BaseSplitPane>
+</template>