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

package/src/app/components/story/StoryVariantGrid.vue

@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import { useResizeObserver } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStoryStore } from '../../stores/story'
+import { isMobile } from '../../util/responsive'
+import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
+import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
+import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
+import StoryVariantGridItem from './StoryVariantGridItem.vue'
+
+const storyStore = useStoryStore()
+
+const gridTemplateWidth = computed(() => {
+  if (storyStore.currentStory.layout.type !== 'grid') {
+    return
+  }
+
+  const layoutWidth = storyStore.currentStory.layout.width
+
+  if (!layoutWidth) {
+    return '200px'
+  }
+
+  if (typeof layoutWidth === 'number') {
+    return `${layoutWidth}px`
+  }
+
+  return layoutWidth
+})
+
+const margin = 16
+const gap = 16
+
+const itemWidth = ref(16)
+const maxItemHeight = ref(0)
+const maxCount = ref(10)
+const countPerRow = ref(0)
+const visibleRows = ref(0)
+
+const el = ref<HTMLDivElement>(null)
+
+useResizeObserver(el, () => {
+  updateMaxCount()
+  updateSize()
+})
+
+function updateMaxCount() {
+  if (!maxItemHeight.value) return
+
+  const width = el.value!.clientWidth - margin * 2
+  const height = el.value!.clientHeight
+  const scrollTop = el.value!.scrollTop
+
+  // width = (countPerRow - 1) * gap + countPerRow * itemWidth.value
+
+  // W = (C - 1) * G + C * I
+  // W = C * G - G + C * I
+  // W + G = C * G + C * I
+  // W + G = C * (G + I)
+  // (W + G) / (G + I) = C
+
+  countPerRow.value = Math.floor((width + gap) / (itemWidth.value + gap))
+  visibleRows.value = Math.ceil((height + scrollTop + gap) / (maxItemHeight.value + gap))
+  const newMaxCount = countPerRow.value * visibleRows.value
+  if (maxCount.value < newMaxCount) {
+    maxCount.value = newMaxCount
+  }
+
+  if (storyStore.currentVariant) {
+    const index = storyStore.currentStory.variants.indexOf(storyStore.currentVariant)
+    if (index + 1 > maxCount.value) {
+      maxCount.value = index + 1
+    }
+  }
+}
+
+function onItemResize(w: number, h: number) {
+  itemWidth.value = w
+  if (maxItemHeight.value < h) {
+    maxItemHeight.value = h
+    updateMaxCount()
+  }
+}
+
+watch(() => storyStore.currentVariant, () => {
+  maxItemHeight.value = 0 // Reset max height
+  updateMaxCount()
+})
+
+// Grid size
+
+const gridEl = ref<HTMLDivElement>(null)
+const gridColumnWidth = ref(1)
+const viewWidth = ref(1)
+
+function updateSize() {
+  if (!el.value) return
+  viewWidth.value = el.value.clientWidth
+
+  if (!gridEl.value) return
+
+  if (gridTemplateWidth.value.endsWith('%')) {
+    gridColumnWidth.value = viewWidth.value * Number.parseInt(gridTemplateWidth.value) / 100 - gap
+  }
+  else {
+    gridColumnWidth.value = Number.parseInt(gridTemplateWidth.value)
+  }
+}
+
+onMounted(() => {
+  updateSize()
+})
+
+useResizeObserver(gridEl, () => {
+  updateSize()
+})
+
+const columnCount = computed(() => Math.min(storyStore.currentStory.variants.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap))))
+</script>
+
+<template>
+  <div class="histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
+    <!-- Toolbar -->
+    <div
+      v-if="!isMobile"
+      class="htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1"
+    >
+      <ToolbarBackground />
+      <ToolbarTextDirection />
+
+      <DevOnlyToolbarOpenInEditor
+        v-if="__HISTOIRE_DEV__"
+        :file="storyStore.currentStory.file?.filePath"
+        tooltip="Edit story in editor"
+      />
+    </div>
+
+    <div
+      ref="el"
+      class="htw-overflow-y-auto htw-flex htw-flex-1"
+      @scroll="updateMaxCount()"
+    >
+      <div class="htw-flex htw-w-0 htw-flex-1 htw-mx-4">
+        <div
+          class="htw-m-auto"
+          :style="{
+            minHeight: `${(storyStore.currentStory.variants.length / countPerRow) * (maxItemHeight + gap) - gap}px`,
+          }"
+        >
+          <div
+            ref="gridEl"
+            class="htw-grid htw-gap-4 htw-my-4"
+            :style="{
+              gridTemplateColumns: `repeat(${columnCount}, ${gridColumnWidth}px)`,
+            }"
+          >
+            <StoryVariantGridItem
+              v-for="(variant, index) of storyStore.currentStory.variants.slice(0, maxCount)"
+              :key="index"
+              :variant="variant"
+              :story="storyStore.currentStory"
+              @resize="onItemResize"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/app/components/story/StoryVariantGridItem.vue

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { Story, Variant } from '../../types'
+import { HstCopyIcon } from '@histoire/controls'
+import { Icon } from '@iconify/vue'
+import { useResizeObserver } from '@vueuse/core'
+import { computed, ref, toRefs } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { histoireConfig } from '../../util/config'
+import { isDark } from '../../util/dark'
+import { getSourceCode } from '../../util/docs'
+import { getContrastColor } from '../../util/preview-settings'
+import { useScrollOnActive } from '../../util/scroll'
+import { useCurrentVariantRoute } from '../../util/variant'
+import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
+import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
+import GenericRenderStory from './GenericRenderStory.vue'
+
+const props = defineProps({
+  variant: {
+    type: Object as PropType<Variant>,
+    required: true,
+  },
+
+  story: {
+    type: Object as PropType<Story>,
+    required: true,
+  },
+})
+
+const emit = defineEmits({
+  resize: (_width: number, _height: number) => true,
+})
+
+const { variant } = toRefs(props)
+const { isActive, targetRoute } = useCurrentVariantRoute(variant)
+
+Object.assign(props.variant, {
+  previewReady: false,
+})
+function onReady() {
+  Object.assign(props.variant, {
+    previewReady: true,
+  })
+}
+
+const router = useRouter()
+
+function selectVariant() {
+  router.push(targetRoute.value)
+}
+
+const el = ref<HTMLDivElement>()
+
+const { autoScroll } = useScrollOnActive(isActive, el)
+
+useResizeObserver(el, () => {
+  if (props.variant.previewReady) {
+    emit('resize', el.value!.clientWidth, el.value!.clientHeight)
+    if (isActive.value) {
+      autoScroll()
+    }
+  }
+})
+
+const settings = usePreviewSettingsStore().currentSettings
+
+const contrastColor = computed(() => getContrastColor(settings))
+const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor)
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="histoire-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
+  >
+    <!-- Header -->
+    <div class="htw-flex-none htw-flex htw-items-center">
+      <RouterLink
+        v-tooltip="variant.title"
+        :to="targetRoute"
+        class="htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer htw-flex htw-items-center htw-gap-1 htw-flex-shrink"
+        :class="{
+          'hover:htw-bg-gray-200 htw-text-gray-500 dark:hover:htw-bg-gray-800': !isActive,
+          'htw-bg-primary-200 hover:htw-bg-primary-300 htw-text-primary-800 dark:htw-bg-primary-700 dark:hover:htw-bg-primary-800 dark:htw-text-primary-200': isActive,
+        }"
+      >
+        <Icon
+          :icon="variant.icon ?? 'carbon:cube'"
+          class="htw-w-4 htw-h-4 htw-opacity-50"
+          :class="{
+            'htw-text-gray-500': !isActive && !variant.iconColor,
+            'bind-icon-color': !isActive && variant.iconColor,
+          }"
+        />
+        <span class="htw-truncate htw-flex-1">{{ variant.title }}</span>
+      </RouterLink>
+
+      <!-- Toolbar -->
+      <div class="htw-flex-none htw-ml-auto htw-hidden group-hover:htw-flex htw-items-center">
+        <HstCopyIcon
+          :content="() => getSourceCode(story, variant)"
+        />
+        <ToolbarNewTab
+          :variant="variant"
+          :story="story"
+        />
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div
+      class="htw-border htw-bg-white dark:htw-bg-gray-700 htw-rounded htw-flex-1 htw-p-4 htw-relative"
+      :class="{
+        'htw-border-gray-100 dark:htw-border-gray-800': !isActive,
+        'htw-border-primary-200 dark:htw-border-primary-900': isActive,
+      }"
+      data-test-id="sandbox-render"
+      @click.stop="selectVariant()"
+      @keyup="selectVariant()"
+    >
+      <div
+        class="htw-absolute htw-inset-0 htw-rounded bind-preview-bg"
+        data-test-id="responsive-preview-bg"
+      />
+
+      <CheckerboardPattern
+        v-if="settings.checkerboard"
+        class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
+      />
+
+      <div
+        class="htw-relative htw-h-full"
+        :style="{
+          '--histoire-contrast-color': contrastColor,
+          'color': autoApplyContrastColor ? contrastColor : undefined,
+        }"
+      >
+        <GenericRenderStory
+          :key="`${story.id}-${variant.id}`"
+          :variant="variant"
+          :story="story"
+          :dir="settings.textDirection"
+          :class="{
+            [histoireConfig.theme.darkClass]: isDark,
+          }"
+          @ready="onReady"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bind-icon-color {
+  color: v-bind('variant.iconColor');
+}
+
+.bind-preview-bg {
+  background-color: v-bind('settings.backgroundColor');
+}
+</style>

package/src/app/components/story/StoryVariantListItem.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { Variant } from '../../types'
+import { Icon } from '@iconify/vue'
+import { ref, toRefs } from 'vue'
+import { useScrollOnActive } from '../../util/scroll'
+import { useCurrentVariantRoute } from '../../util/variant'
+import BaseListItemLink from '../base/BaseListItemLink.vue'
+
+const props = defineProps({
+  variant: {
+    type: Object as PropType<Variant>,
+    required: true,
+  },
+})
+
+const { variant } = toRefs(props)
+const { isActive, targetRoute } = useCurrentVariantRoute(variant)
+const el = ref<HTMLDivElement>()
+useScrollOnActive(isActive, el)
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="histoire-story-variant-list-item"
+    data-test-id="story-variant-list-item"
+  >
+    <BaseListItemLink
+      v-slot="{ active }"
+      :to="targetRoute"
+      :is-active="isActive"
+      class="htw-px-2 htw-py-2 md:htw-py-1.5 htw-m-1 htw-rounded-sm htw-flex htw-items-center htw-gap-2"
+    >
+      <Icon
+        :icon="variant.icon ?? 'carbon:cube'"
+        class="htw-w-5 htw-h-5 sm:htw-w-4 sm:htw-h-4 htw-flex-none"
+        :class="{
+          'htw-text-gray-500': !active && !variant.iconColor,
+          'bind-icon-color': !active && variant.iconColor,
+        }"
+      />
+      <span class="htw-truncate">{{ variant.title }}</span>
+    </BaseListItemLink>
+  </div>
+</template>
+
+<style scoped>
+.bind-icon-color {
+  color: v-bind('variant.iconColor');
+}
+</style>

package/src/app/components/story/StoryVariantSingle.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { useStoryStore } from '../../stores/story'
+import { isMobile } from '../../util/responsive'
+import BaseSplitPane from '../base/BaseSplitPane.vue'
+import StoryVariantListItem from './StoryVariantListItem.vue'
+import StoryVariantSingleView from './StoryVariantSingleView.vue'
+
+defineEmits({
+  openVariantMenu: () => true,
+})
+
+const storyStore = useStoryStore()
+
+const hasSingleVariant = computed(() => (storyStore.currentStory?.variants.length === 1))
+
+const variant = computed(() => storyStore.currentVariant)
+</script>
+
+<template>
+  <div
+    v-if="hasSingleVariant && variant"
+    class="histoire-story-variant-single htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
+  >
+    <StoryVariantSingleView
+      :variant="variant"
+      :story="storyStore.currentStory"
+    />
+  </div>
+  <template v-else>
+    <div
+      v-if="isMobile"
+      class="htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800 htw-h-full htw-flex htw-flex-col"
+    >
+      <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 htw-flex-none"
+        @click="$emit('openVariantMenu')"
+      >
+        <template v-if="variant">
+          <Icon
+            :icon="variant.icon ?? 'carbon:cube'"
+            class="htw-w-5 htw-h-5 htw-flex-none"
+            :class="{
+              'htw-text-gray-500': !variant.iconColor,
+              'bind-icon-color': variant.iconColor,
+            }"
+          />
+          {{ variant.title }}
+        </template>
+        <template v-else>
+          Select a variant...
+        </template>
+
+        <Icon
+          icon="carbon:chevron-sort"
+          class="htw-w-5 htw-h-5 htw-shrink-0 htw-ml-auto"
+        />
+      </a>
+      <div
+        v-if="storyStore.currentVariant"
+        class="htw-p-2 htw-h-full"
+      >
+        <StoryVariantSingleView
+          :variant="storyStore.currentVariant"
+          :story="storyStore.currentStory"
+        />
+      </div>
+    </div>
+    <BaseSplitPane
+      v-else
+      save-id="story-single-main-split"
+      :min="5"
+      :max="40"
+      :default-split="17"
+    >
+      <template #first>
+        <div class="htw-h-full htw-overflow-y-auto">
+          <StoryVariantListItem
+            v-for="(v, index) of storyStore.currentStory.variants"
+            :key="index"
+            :variant="v"
+          />
+        </div>
+      </template>
+      <template #last>
+        <div
+          v-if="storyStore.currentVariant"
+          class="htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
+        >
+          <StoryVariantSingleView
+            :variant="storyStore.currentVariant"
+            :story="storyStore.currentStory"
+          />
+        </div>
+      </template>
+    </BaseSplitPane>
+  </template>
+</template>
+
+<style scoped>
+.bind-icon-color {
+  color: v-bind('variant?.iconColor');
+}
+</style>

package/src/app/components/story/StoryVariantSinglePreviewNative.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { Story, Variant } from '../../types'
+import { computed } from 'vue'
+import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { histoireConfig } from '../../util/config'
+import { isDark } from '../../util/dark'
+import { getContrastColor } from '../../util/preview-settings'
+import GenericRenderStory from './GenericRenderStory.vue'
+import StoryResponsivePreview from './StoryResponsivePreview.vue'
+
+const props = defineProps<{
+  story: Story
+  variant: Variant
+}>()
+
+Object.assign(props.variant, {
+  previewReady: false,
+})
+
+function onReady() {
+  Object.assign(props.variant, {
+    previewReady: true,
+  })
+}
+
+const settings = usePreviewSettingsStore().currentSettings
+
+const contrastColor = computed(() => getContrastColor(settings))
+const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor)
+</script>
+
+<template>
+  <StoryResponsivePreview
+    v-slot="{ isResponsiveEnabled, finalWidth, finalHeight }"
+    class="histoire-story-variant-single-preview-native"
+    :variant="variant"
+  >
+    <div
+      :style="[
+        isResponsiveEnabled ? {
+          width: finalWidth ? `${finalWidth}px` : '100%',
+          height: finalHeight ? `${finalHeight}px` : '100%',
+        } : { width: '100%', height: '100%' },
+        {
+          '--histoire-contrast-color': contrastColor,
+          'color': autoApplyContrastColor ? contrastColor : undefined,
+        },
+      ]"
+      class="htw-relative"
+      data-test-id="sandbox-render"
+    >
+      <GenericRenderStory
+        :key="`${story.id}-${variant.id}`"
+        :variant="variant"
+        :story="story"
+        class="htw-h-full"
+        :class="{
+          [histoireConfig.sandboxDarkClass]: isDark, // @TODO remove
+          [histoireConfig.theme.darkClass]: isDark,
+        }"
+        :dir="settings.textDirection"
+        @ready="onReady"
+      />
+    </div>
+  </StoryResponsivePreview>
+</template>

package/src/app/components/story/StoryVariantSinglePreviewRemote.vue

@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import type { HstEvent } from '../../stores/events'
+import type { Story, Variant } from '../../types'
+import { applyState } from '@histoire/shared'
+import { useEventListener } from '@vueuse/core'
+import { computed, ref, toRaw, watch } from 'vue'
+import { useEventsStore } from '../../stores/events'
+import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { EVENT_SEND, PREVIEW_SETTINGS_SYNC, SANDBOX_READY, STATE_SYNC } from '../../util/const'
+import { getSandboxUrl } from '../../util/sandbox'
+import { toRawDeep } from '../../util/state'
+import StoryResponsivePreview from './StoryResponsivePreview.vue'
+
+const props = defineProps<{
+  story: Story
+  variant: Variant
+}>()
+
+const settings = usePreviewSettingsStore().currentSettings
+
+// Iframe
+
+const iframe = ref<HTMLIFrameElement>()
+
+function syncState() {
+  if (iframe.value && props.variant.previewReady) {
+    iframe.value.contentWindow.postMessage({
+      type: STATE_SYNC,
+      state: toRawDeep(props.variant.state, true),
+    })
+  }
+}
+
+let synced = false
+
+watch(() => props.variant.state, () => {
+  if (synced) {
+    synced = false
+    return
+  }
+  syncState()
+}, {
+  deep: true,
+  immediate: true,
+})
+
+Object.assign(props.variant, {
+  previewReady: false,
+})
+
+useEventListener(window, 'message', (event) => {
+  switch (event.data.type) {
+    case STATE_SYNC:
+      updateVariantState(event.data.state)
+      break
+    case EVENT_SEND:
+      logEvent(event.data.event)
+      break
+    case SANDBOX_READY:
+      setPreviewReady()
+      break
+  }
+})
+
+function updateVariantState(state: any) {
+  synced = true
+  applyState(props.variant.state, state)
+}
+
+function logEvent(event: HstEvent) {
+  const eventsStore = useEventsStore()
+  eventsStore.addEvent(event)
+}
+
+function setPreviewReady() {
+  Object.assign(props.variant, {
+    previewReady: true,
+  })
+}
+
+const sandboxUrl = computed(() => {
+  return getSandboxUrl(props.story, props.variant)
+})
+
+const isIframeLoaded = ref(false)
+
+watch(sandboxUrl, () => {
+  isIframeLoaded.value = false
+  Object.assign(props.variant, {
+    previewReady: false,
+  })
+})
+
+// Settings
+
+function syncSettings() {
+  if (iframe.value) {
+    iframe.value.contentWindow.postMessage({
+      type: PREVIEW_SETTINGS_SYNC,
+      settings: toRaw(settings),
+    })
+  }
+}
+
+watch(() => settings, () => {
+  syncSettings()
+}, {
+  deep: true,
+  immediate: true,
+})
+
+// Iframe load
+
+function onIframeLoad() {
+  isIframeLoaded.value = true
+  syncState()
+  syncSettings()
+}
+</script>
+
+<template>
+  <StoryResponsivePreview
+    v-slot="{ isResponsiveEnabled, finalWidth, finalHeight, resizing }"
+    class="histoire-story-variant-single-preview-remote"
+    :variant="variant"
+  >
+    <iframe
+      ref="iframe"
+      :src="sandboxUrl"
+      class="htw-w-full htw-h-full htw-relative"
+      :class="{
+        'htw-invisible': !isIframeLoaded,
+        'htw-pointer-events-none': resizing,
+      }"
+      :style="isResponsiveEnabled ? {
+        width: finalWidth ? `${finalWidth}px` : null,
+        height: finalHeight ? `${finalHeight}px` : null,
+      } : undefined"
+      data-test-id="preview-iframe"
+      @load="onIframeLoad()"
+    />
+  </StoryResponsivePreview>
+</template>