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

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

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { Story, Variant } from '../../types'
+import { isMobile } from '../../util/responsive'
+import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
+import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
+import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
+import ToolbarResponsiveSize from '../toolbar/ToolbarResponsiveSize.vue'
+import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
+import ToolbarTitle from '../toolbar/ToolbarTitle.vue'
+import StoryVariantSinglePreviewNative from './StoryVariantSinglePreviewNative.vue'
+import StoryVariantSinglePreviewRemote from './StoryVariantSinglePreviewRemote.vue'
+
+defineProps<{
+  variant: Variant
+  story: Story
+}>()
+</script>
+
+<template>
+  <div
+    class="histoire-story-variant-single-view htw-h-full htw-flex htw-flex-col"
+    data-test-id="story-variant-single-view"
+  >
+    <!-- Toolbar -->
+    <div
+      v-if="!isMobile"
+      class="htw-flex-none htw-flex htw-items-center htw-h-8 -htw-mt-1"
+    >
+      <ToolbarTitle
+        :variant="variant"
+      />
+      <ToolbarResponsiveSize
+        v-if="!variant.responsiveDisabled"
+      />
+      <ToolbarBackground />
+      <ToolbarTextDirection />
+      <ToolbarNewTab
+        :variant="variant"
+        :story="story"
+      />
+
+      <DevOnlyToolbarOpenInEditor
+        v-if="__HISTOIRE_DEV__"
+        :file="story.file?.filePath"
+        tooltip="Edit story in editor"
+      />
+    </div>
+
+    <!-- Preview -->
+    <StoryVariantSinglePreviewNative
+      v-if="story.layout?.iframe === false"
+      :story="story"
+      :variant="variant"
+    />
+    <StoryVariantSinglePreviewRemote
+      v-else
+      :story="story"
+      :variant="variant"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStoryStore } from '../../stores/story'
+
+import { isMobile } from '../../util/responsive'
+import BaseEmpty from '../base/BaseEmpty.vue'
+import BaseSplitPane from '../base/BaseSplitPane.vue'
+import StoryDocs from '../panel/StoryDocs.vue'
+import StorySidePanel from '../panel/StorySidePanel.vue'
+import StoryViewer from './StoryViewer.vue'
+
+const storyStore = useStoryStore()
+
+const router = useRouter()
+const route = useRoute()
+
+// Restore variant selection
+
+watch(() => storyStore.currentVariant, (value) => {
+  if (value) {
+    storyStore.currentStory.lastSelectedVariant = value
+  }
+}, {
+  immediate: true,
+})
+
+watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
+  if (!storyStore.currentVariant) {
+    if (storyStore.currentStory?.lastSelectedVariant) {
+      setVariant(storyStore.currentStory.lastSelectedVariant.id)
+      return
+    }
+
+    if (storyStore.currentStory?.variants.length === 1) {
+      setVariant(storyStore.currentStory.variants[0].id)
+    }
+  }
+}, {
+  immediate: true,
+})
+
+function setVariant(variantId: string) {
+  router.replace({
+    ...route,
+    query: {
+      ...route.query,
+      variantId,
+    },
+  })
+}
+
+// Docs auto-scroll to top
+
+const docsOnlyScroller = ref<HTMLElement>(null)
+
+function scrollDocsToTop() {
+  docsOnlyScroller.value?.scrollTo(0, 0)
+}
+</script>
+
+<template>
+  <BaseEmpty
+    v-if="!storyStore.currentStory"
+    class="histoire-story-view histoire-no-story"
+  >
+    <Icon
+      icon="carbon:software-resource-resource"
+      class="htw-w-16 htw-h-16 htw-opacity-50"
+    />
+  </BaseEmpty>
+
+  <div
+    v-else
+    class="histoire-story-view histoire-with-story htw-h-full"
+  >
+    <div
+      v-if="storyStore.currentStory.docsOnly"
+      ref="docsOnlyScroller"
+      class="htw-h-full htw-overflow-auto"
+    >
+      <StoryDocs
+        :story="storyStore.currentStory"
+        standalone
+        class="md:htw-p-12 htw-w-full md:htw-max-w-[600px] lg:htw-max-w-[800px] xl:htw-max-w-[900px]"
+        @scroll-top="scrollDocsToTop()"
+      />
+    </div>
+    <template v-else-if="isMobile">
+      <StoryViewer />
+    </template>
+    <BaseSplitPane
+      v-else
+      save-id="story-main"
+      :min="30"
+      :max="95"
+      :default-split="75"
+      class="htw-h-full"
+    >
+      <template #first>
+        <StoryViewer />
+      </template>
+
+      <template #last>
+        <StorySidePanel />
+      </template>
+    </BaseSplitPane>
+  </div>
+</template>

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

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { useStoryStore } from '../../stores/story'
+import MobileOverlay from '../app/MobileOverlay.vue'
+import StoryVariantGrid from './StoryVariantGrid.vue'
+import StoryVariantListItem from './StoryVariantListItem.vue'
+import StoryVariantSingle from './StoryVariantSingle.vue'
+
+const storyStore = useStoryStore()
+
+const variant = computed(() => storyStore.currentVariant)
+
+const isMenuOpened = ref(false)
+
+function closeMenu() {
+  isMenuOpened.value = false
+}
+
+watch(variant, () => {
+  isMenuOpened.value = false
+})
+</script>
+
+<template>
+  <div class="histoire-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750">
+    <StoryVariantGrid
+      v-if="storyStore.currentStory.layout.type === 'grid'"
+    />
+    <StoryVariantSingle
+      v-else-if="storyStore.currentStory.layout.type === 'single'"
+      @open-variant-menu="isMenuOpened = true"
+    />
+  </div>
+
+  <MobileOverlay
+    title="Select a variant"
+    :opened="isMenuOpened"
+    @close="closeMenu"
+  >
+    <StoryVariantListItem
+      v-for="(v, index) of storyStore.currentStory.variants"
+      :key="index"
+      :variant="v"
+    />
+  </MobileOverlay>
+</template>
+
+<style scoped>
+.bind-icon-color {
+  color: v-bind('variant?.iconColor');
+}
+</style>

package/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { openInEditor } from '../../util/open-in-editor.js'
+
+defineProps<{
+  file: string
+  tooltip: string
+}>()
+</script>
+
+<template>
+  <a
+    v-tooltip="tooltip"
+    target="_blank"
+    class="histoire-toolbar-open-in-editor htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 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="openInEditor(file)"
+  >
+    <Icon
+      icon="carbon:script-reference"
+      class="htw-w-4 htw-h-4"
+    />
+  </a>
+</template>

package/src/app/components/toolbar/ToolbarBackground.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { histoireConfig } from '../../util/config'
+import { getContrastColor } from '../../util/preview-settings'
+import BaseCheckbox from '../base/BaseCheckbox.vue'
+
+const settings = usePreviewSettingsStore().currentSettings
+
+const contrastColor = computed(() => getContrastColor(settings))
+</script>
+
+<template>
+  <VDropdown
+    v-if="histoireConfig.backgroundPresets.length"
+    placement="bottom-end"
+    :skidding="6"
+    class="histoire-toolbar-background htw-h-full htw-flex-none"
+    data-test-id="toolbar-background"
+  >
+    <div
+      v-tooltip="'Background color'"
+      class="htw-cursor-pointer hover:htw-text-primary-500 htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group"
+    >
+      <div
+        class="bind-preview-bg htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/50 dark:htw-border-white/50 htw-flex htw-items-center htw-justify-center htw-text-xs"
+      >
+        <span v-if="contrastColor">a</span>
+      </div>
+      <Icon
+        icon="carbon:caret-down"
+        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+      />
+    </div>
+
+    <template #popper="{ hide }">
+      <div
+        class="htw-flex htw-flex-col htw-items-stretch"
+        data-test-id="background-popper"
+      >
+        <BaseCheckbox v-model="settings.checkerboard">
+          Checkerboard
+        </BaseCheckbox>
+
+        <button
+          v-for="(option, index) in histoireConfig.backgroundPresets"
+          :key="index"
+          class="htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-items-baseline htw-gap-4"
+          :class="[
+            settings.backgroundColor === option.color
+              ? 'htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black'
+              : 'htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700',
+          ]"
+          @click="settings.backgroundColor = option.color;hide()"
+        >
+          <span class="htw-mr-auto">{{ option.label }}</span>
+          <template v-if="option.color !== '$checkerboard'">
+            <span class="htw-ml-auto htw-opacity-70">{{ option.color }}</span>
+            <div
+              class="htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/20 dark:htw-border-white/20 htw-flex htw-items-center htw-justify-center htw-text-xs"
+              :style="{
+                backgroundColor: option.color,
+                color: option.contrastColor,
+              }"
+            >
+              <span v-if="option.contrastColor">a</span>
+            </div>
+          </template>
+        </button>
+      </div>
+    </template>
+  </VDropdown>
+</template>
+
+<style scoped>
+.bind-preview-bg {
+  background-color: v-bind('settings.backgroundColor');
+  color: v-bind('contrastColor');
+}
+</style>

package/src/app/components/toolbar/ToolbarNewTab.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { Story, Variant } from '../../types'
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { getSandboxUrl } from '../../util/sandbox'
+
+const props = defineProps<{
+  variant: Variant
+  story: Story
+}>()
+
+const sandboxUrl = computed(() => {
+  return getSandboxUrl(props.story, props.variant)
+})
+</script>
+
+<template>
+  <a
+    v-tooltip="'Open variant in new tab'"
+    :href="sandboxUrl"
+    target="_blank"
+    class="histoire-toolbar-new-tab htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 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"
+  >
+    <Icon
+      icon="carbon:launch"
+      class="htw-w-4 htw-h-4"
+    />
+  </a>
+</template>

package/src/app/components/toolbar/ToolbarResponsiveSize.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { histoireConfig } from '../../util/config'
+import BaseCheckbox from '../base/BaseCheckbox.vue'
+
+const settings = usePreviewSettingsStore().currentSettings
+</script>
+
+<template>
+  <!-- Responsive size -->
+  <VDropdown
+    placement="bottom-end"
+    :skidding="6"
+    :disabled="!histoireConfig.responsivePresets?.length"
+    class="histoire-toolbar-responsive-size htw-h-full htw-flex-none"
+  >
+    <div
+      v-tooltip="'Responsive sizes'"
+      class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group"
+      :class="{
+        'htw-cursor-pointer hover:htw-text-primary-500': histoireConfig.responsivePresets?.length,
+      }"
+    >
+      <Icon
+        icon="carbon:devices"
+        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+      />
+      <Icon
+        icon="carbon:caret-down"
+        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+      />
+    </div>
+
+    <template #popper="{ hide }">
+      <div class="htw-flex htw-flex-col htw-items-stretch">
+        <BaseCheckbox v-model="settings.rotate">
+          Rotate
+        </BaseCheckbox>
+
+        <div class="htw-flex htw-items-center htw-gap-2 htw-px-4 htw-py-3">
+          <input
+            v-model.number="settings.responsiveWidth"
+            v-tooltip="'Responsive width (px)'"
+            type="number"
+            class="htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0"
+            step="16"
+            placeholder="Auto"
+          >
+          <span class="htw-opacity-50">×</span>
+          <input
+            v-model.number="settings.responsiveHeight"
+            v-tooltip="'Responsive height (px)'"
+            type="number"
+            class="htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0"
+            step="16"
+            placeholder="Auto"
+          >
+        </div>
+
+        <button
+          v-for="(preset, index) in histoireConfig.responsivePresets"
+          :key="index"
+          class="htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4"
+          :class="[
+            settings.responsiveWidth === preset.width && settings.responsiveHeight === preset.height
+              ? 'htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black'
+              : 'htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700',
+          ]"
+          @click="settings.responsiveWidth = preset.width;settings.responsiveHeight = preset.height;hide()"
+        >
+          {{ preset.label }}
+          <span class="htw-ml-auto htw-opacity-70 htw-flex htw-gap-1">
+            <span v-if="preset.width">{{ preset.width }}<span v-if="!preset.height">px</span></span>
+            <span v-if="preset.width && preset.height">x</span>
+            <span v-if="preset.height">{{ preset.height }}<span v-if="!preset.width">px</span></span>
+          </span>
+        </button>
+      </div>
+    </template>
+  </VDropdown>
+</template>

package/src/app/components/toolbar/ToolbarTextDirection.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { usePreviewSettingsStore } from '../../stores/preview-settings'
+
+const settings = usePreviewSettingsStore().currentSettings
+</script>
+
+<template>
+  <a
+    v-tooltip="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
+    class="histoire-toolbar-text-direction htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 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="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
+  >
+    <Icon
+      :icon="settings.textDirection === 'ltr' ? 'fluent:text-paragraph-direction-right-16-regular' : 'fluent:text-paragraph-direction-left-16-regular'"
+      class="htw-w-4 htw-h-4"
+    />
+  </a>
+</template>

package/src/app/components/toolbar/ToolbarTitle.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { Variant } from '../../types'
+import { Icon } from '@iconify/vue'
+
+defineProps<{
+  variant: Variant
+}>()
+</script>
+
+<template>
+  <div class="histoire-toolbar-title htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0">
+    <Icon
+      :icon="variant.icon ?? 'carbon:cube'"
+      class="htw-w-4 htw-h-4 htw-opacity-50"
+      :class="[
+        variant.iconColor ? 'bind-icon-color' : 'htw-text-gray-500',
+      ]"
+    />
+    <span>{{ variant.title }}</span>
+  </div>
+</template>

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

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { Story, TreeGroup } from '../../types'
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { useFolderStore } from '../../stores/folder'
+import StoryListFolder from './StoryListFolder.vue'
+import StoryListItem from './StoryListItem.vue'
+
+const props = withDefaults(defineProps<{
+  path?: Array<string>
+  group: TreeGroup
+  stories: Story[]
+}>(), {
+  path: () => [],
+})
+
+const folderStore = useFolderStore()
+
+const folderPath = computed(() => [...props.path, props.group.title])
+const isFolderOpen = computed(() => folderStore.isFolderOpened(folderPath.value, true))
+
+function toggleOpen() {
+  folderStore.toggleFolder(folderPath.value, false)
+}
+</script>
+
+<template>
+  <div
+    data-test-id="story-group"
+    class="histoire-story-group htw-my-2 first:htw-mt-0 last:htw-mb-0 htw-group"
+  >
+    <template v-if="group.title">
+      <div class="htw-h-[1px] htw-bg-gray-500/10 htw-mx-6 htw-mb-2 group-first:htw-hidden" />
+      <div
+        role="button"
+        tabindex="0"
+        class="htw-px-0.5 htw-py-2 md:htw-py-1.5 htw-mx-1 htw-rounded-sm hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900 htw-cursor-pointer htw-select-none htw-flex htw-items-center htw-gap-2 htw-min-w-0 htw-opacity-50 hover:htw-opacity-100"
+        @click="toggleOpen"
+        @keyup.enter="toggleOpen"
+        @keyup.space="toggleOpen"
+      >
+        <Icon
+          :icon="isFolderOpen ? 'ri:subtract-line' : 'ri:add-line'"
+          class="htw-w-4 htw-h-4 htw-ml-4 htw-rounded-sm htw-border htw-border-gray-500/40"
+        />
+        <span class="htw-truncate">{{ group.title }}</span>
+      </div>
+    </template>
+
+    <!-- Children -->
+    <div
+      v-if="isFolderOpen"
+    >
+      <template
+        v-for="element of group.children"
+        :key="element.title"
+      >
+        <StoryListFolder
+          v-if="(element as TreeFolder).children"
+          :path="folderPath"
+          :folder="(element as TreeFolder)"
+          :stories="stories"
+          :depth="0"
+        />
+        <StoryListItem
+          v-else
+          :story="stories[(element as TreeLeaf).index]"
+          :depth="0"
+        />
+      </template>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { Story, Tree, TreeFolder, TreeGroup, TreeLeaf } from '../../types'
+import StoryGroup from './StoryGroup.vue'
+import StoryListFolder from './StoryListFolder.vue'
+import StoryListItem from './StoryListItem.vue'
+
+defineProps<{
+  tree: Tree
+  stories: Story[]
+}>()
+</script>
+
+<template>
+  <div class="histoire-story-list htw-overflow-y-auto">
+    <template
+      v-for="element of tree"
+      :key="element.title"
+    >
+      <StoryGroup
+        v-if="(element as TreeGroup).group"
+        :group="(element as TreeGroup)"
+        :stories="stories"
+      />
+      <StoryListFolder
+        v-else-if="(element as TreeFolder).children"
+        :folder="(element as TreeFolder)"
+        :stories="stories"
+      />
+      <StoryListItem
+        v-else
+        :story="stories[(element as TreeLeaf).index]"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { Story, TreeFolder, TreeLeaf } from '../../types'
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { useFolderStore } from '../../stores/folder'
+import StoryListItem from './StoryListItem.vue'
+
+const props = withDefaults(defineProps<{
+  path?: Array<string>
+  folder: TreeFolder
+  stories: Story[]
+  depth?: number
+}>(), {
+  depth: 0,
+  path: () => [],
+})
+
+const folderStore = useFolderStore()
+
+const folderPath = computed(() => [...props.path, props.folder.title])
+const isFolderOpen = computed(() => folderStore.isFolderOpened(folderPath.value))
+
+function toggleOpen() {
+  folderStore.toggleFolder(folderPath.value)
+}
+
+const folderPadding = computed(() => {
+  return `${props.depth * 12}px`
+})
+</script>
+
+<template>
+  <div
+    data-test-id="story-list-folder"
+    class="histoire-story-list-folder"
+  >
+    <div
+      role="button"
+      tabindex="0"
+      class="histoire-story-list-folder-button htw-px-0.5 htw-py-2 md:htw-py-1.5 htw-mx-1 htw-rounded-sm hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900 htw-cursor-pointer htw-select-none htw-flex"
+      @click="toggleOpen"
+      @keyup.enter="toggleOpen"
+      @keyup.space="toggleOpen"
+    >
+      <span class="bind-tree-padding htw-flex htw-items-center htw-gap-2 htw-min-w-0">
+        <span class="htw-flex htw-flex-none htw-items-center htw-opacity-30 [.histoire-story-list-folder-button:hover_&]:htw-opacity-100 htw-ml-4 htw-w-4 htw-h-4 htw-rounded-sm htw-border htw-border-gray-500/40">
+          <Icon
+            icon="carbon:caret-right"
+            class="htw-w-full htw-h-full htw-transition-transform htw-duration-150"
+            :class="{
+              'htw-rotate-90': isFolderOpen,
+            }"
+          />
+        </span>
+        <span class="htw-truncate">{{ folder.title }}</span>
+      </span>
+    </div>
+
+    <!-- Children -->
+    <div
+      v-if="isFolderOpen"
+    >
+      <template
+        v-for="element of folder.children"
+        :key="element.title"
+      >
+        <StoryListFolder
+          v-if="(element as TreeFolder).children"
+          :path="folderPath"
+          :folder="(element as TreeFolder)"
+          :stories="stories"
+          :depth="depth + 1"
+        />
+        <StoryListItem
+          v-else
+          :story="stories[(element as TreeLeaf).index]"
+          :depth="depth + 1"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bind-tree-padding {
+  padding-left: v-bind(folderPadding);
+}
+</style>