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

package/src/app/components/command/PromptSelect.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { SelectPrompt, SelectPromptOption } from '@histoire/shared'
+import { Icon } from '@iconify/vue'
+import { computed, ref, watchEffect } from 'vue'
+import { useSelection } from '../../util/select.js'
+import BaseKeyboardShortcut from '../base/BaseKeyboardShortcut.vue'
+
+const props = defineProps<{
+  modelValue?: string
+  prompt: SelectPrompt
+  answers: Record<string, any>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'next'): void
+}>()
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+    emit('next')
+  },
+})
+
+const input = ref<HTMLInputElement>()
+
+function focus() {
+  input.value?.focus()
+  input.value?.select()
+}
+
+defineExpose({
+  focus,
+})
+
+const search = ref('')
+
+const options = ref<SelectPromptOption[]>([])
+
+let requestId = 0
+watchEffect(async () => {
+  if (typeof props.prompt.options === 'function') {
+    const rId = ++requestId
+    const result = await props.prompt.options(search.value, props.answers)
+    if (rId === requestId) {
+      options.value = result
+    }
+  }
+  else {
+    options.value = props.prompt.options
+  }
+})
+
+const formattedOptions = computed(() => {
+  return options.value.map((option) => {
+    if (typeof option === 'string') {
+      return {
+        value: option,
+        label: option,
+      }
+    }
+    else {
+      return option
+    }
+  })
+})
+
+// Keyboard navigation
+
+const {
+  selectedIndex,
+  selectNext,
+  selectPrevious,
+} = useSelection(formattedOptions)
+
+function selectIndex(index: number) {
+  const result = formattedOptions.value[index].value
+  if (result) {
+    model.value = result
+  }
+}
+</script>
+
+<template>
+  <div class="histoire-prompt-select htw-relative htw-group">
+    <input
+      v-model="model"
+      :required="prompt.required"
+      tabindex="-1"
+      class="htw-absolute htw-inset-0 htw-opacity-0 htw-pointer-events-none"
+    >
+    <label class="htw-flex htw-flex-col htw-gap-2 htw-p-2">
+      <span class="htw-px-2 htw-flex">
+        <span>{{ prompt.label }}</span>
+        <span
+          v-if="prompt.required"
+          class="htw-opacity-70"
+        >*</span>
+
+        <span class="htw-opacity-40 htw-text-sm htw-ml-auto htw-invisible group-focus-within:htw-visible">
+          Press <BaseKeyboardShortcut shortcut="Space" /> to select
+        </span>
+      </span>
+      <input
+        ref="input"
+        v-model="search"
+        class="htw-bg-transparent htw-w-full htw-p-2 htw-border htw-border-gray-500/50 focus:htw-border-primary-500/50 htw-rounded htw-outline-none"
+        @keydown.down.prevent="selectNext()"
+        @keydown.up.prevent="selectPrevious()"
+        @keydown.space.prevent="selectIndex(selectedIndex)"
+      >
+    </label>
+
+    <div class="htw-overflow-auto max-h-[300px] htw-mb-2">
+      <button
+        v-for="(option, index) of formattedOptions"
+        :key="option.value"
+        type="button"
+        tabindex="-1"
+        :class="[
+          model === option.value
+            ? 'htw-bg-primary-500/20'
+            : index === selectedIndex
+              ? 'htw-bg-primary-500/10'
+              : 'htw-bg-transparent',
+        ]"
+        class="htw-w-full htw-text-left htw-px-4 htw-py-2 hover:htw-bg-primary-500/10 htw-flex htw-items-center"
+        @click="model = option.value"
+      >
+        <span class="htw-flex-1">{{ option.label }}</span>
+
+        <Icon
+          v-if="model === option.value"
+          icon="carbon:checkmark"
+          class="htw-w-4 htw-h-4 htw-text-primary-500"
+        />
+      </button>
+    </div>
+  </div>
+</template>

package/src/app/components/command/PromptText.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { TextPrompt } from '@histoire/shared'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue?: string
+  prompt: TextPrompt
+  answers: Record<string, any>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const model = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+const input = ref<HTMLInputElement>()
+
+function focus() {
+  input.value?.focus()
+  input.value?.select()
+}
+
+defineExpose({
+  focus,
+})
+
+// Default value
+
+const defaultValue = computed(() => {
+  if (typeof props.prompt.defaultValue === 'function') {
+    return props.prompt.defaultValue(props.answers)
+  }
+  else {
+    return props.prompt.defaultValue
+  }
+})
+
+watch(defaultValue, (value) => {
+  model.value = value
+})
+</script>
+
+<template>
+  <div class="histoire-prompt-text">
+    <label class="htw-flex htw-flex-col htw-gap-2 htw-p-2">
+      <span class="htw-px-2">
+        <span>{{ prompt.label }}</span>
+        <span
+          v-if="prompt.required"
+          class="htw-opacity-70"
+        >*</span>
+      </span>
+      <input
+        ref="input"
+        v-model="model"
+        class="htw-bg-transparent htw-w-full htw-p-2 htw-border htw-border-gray-500/50 focus:htw-border-primary-500/50 htw-rounded htw-outline-none"
+        :required="prompt.required"
+      >
+    </label>
+  </div>
+</template>

package/src/app/components/misc/CheckerboardPattern.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg fill="none">
+    <pattern
+      id="checkerboard"
+      width="64"
+      height="64"
+      patternUnits="userSpaceOnUse"
+    >
+      <rect
+        x="0"
+        y="0"
+        width="32"
+        height="32"
+        fill="currentColor"
+      />
+      <rect
+        x="32"
+        y="32"
+        width="32"
+        height="32"
+        fill="currentColor"
+      />
+    </pattern>
+    <rect
+      x="0"
+      y="0"
+      width="100%"
+      height="100%"
+      fill="url(#checkerboard)"
+    />
+  </svg>
+</template>

package/src/app/components/misc/HatchedPattern.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="__histoire-hatched-pattern" />
+</template>
+
+<style scoped>
+.__histoire-hatched-pattern {
+  background: repeating-linear-gradient(135deg,
+  transparent 0px,
+  transparent 32px,
+  currentColor 32px,
+  currentColor 64px);
+}
+</style>

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

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { AutoPropComponentDefinition, PropDefinition } from '@histoire/shared'
+import type { Variant } from '../../types'
+import { HstCheckbox, HstJson, HstNumber, HstText } from '@histoire/controls'
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  variant: Variant
+  component: AutoPropComponentDefinition
+  definition: PropDefinition
+}>()
+
+const comp = computed(() => {
+  switch (props.definition.types?.[0]) {
+    case 'string':
+      return HstText
+    case 'number':
+      return HstNumber
+    case 'boolean':
+      return HstCheckbox
+    case 'object':
+    default:
+      return HstJson
+  }
+})
+
+const model = computed({
+  get: () => {
+    return props.variant.state._hPropState[props.component.index]?.[props.definition.name]
+  },
+  set: (value) => {
+    if (!props.variant.state._hPropState[props.component.index]) {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.variant.state._hPropState[props.component.index] = {}
+    }
+    // eslint-disable-next-line vue/no-mutating-props
+    props.variant.state._hPropState[props.component.index][props.definition.name] = value
+  },
+})
+
+function reset() {
+  if (props.variant.state._hPropState[props.component.index]) {
+    // eslint-disable-next-line vue/no-mutating-props
+    delete props.variant.state._hPropState[props.component.index][props.definition.name]
+  }
+}
+
+const canReset = computed(() => props.variant.state?._hPropState?.[props.component.index] && props.definition.name in props.variant.state._hPropState[props.component.index])
+</script>
+
+<template>
+  <component
+    :is="comp"
+    v-if="comp"
+    v-model="model"
+    :placeholder="model === undefined ? definition?.default : null"
+    class="histoire-controls-component-prop-item"
+    :title="`${definition.name}${canReset ? ' *' : ''}`"
+  >
+    <template #actions>
+      <Icon
+        v-tooltip="'Remove override'"
+        icon="carbon:erase"
+        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="[
+          canReset ? 'htw-opacity-50 hover:htw-opacity-100' : 'htw-opacity-25 htw-pointer-events-none',
+        ]"
+        @click.stop="reset()"
+      />
+    </template>
+  </component>
+</template>

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

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { AutoPropComponentDefinition } from '@histoire/shared'
+import type { Variant } from '../../types'
+import { Icon } from '@iconify/vue'
+import ControlsComponentPropItem from './ControlsComponentPropItem.vue'
+
+defineProps<{
+  variant: Variant
+  definition: AutoPropComponentDefinition
+}>()
+</script>
+
+<template>
+  <div class="histoire-controls-component-props">
+    <div class="htw-font-mono htw-p-2 htw-flex htw-items-center htw-gap-1">
+      <Icon
+        v-tooltip="'Auto-detected props'"
+        icon="carbon:flash"
+        class="htw-w-4 htw-h-4 htw-text-primary-500 htw-flex-none"
+      />
+      <div>
+        <span class="htw-opacity-30">&lt;</span>{{ definition.name }}<span class="htw-opacity-30">&gt;</span>
+      </div>
+    </div>
+
+    <ControlsComponentPropItem
+      v-for="prop of definition.props"
+      :key="prop.name"
+      :variant="variant"
+      :component="definition"
+      :definition="prop"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { Variant } from '@histoire/shared'
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import ControlsComponentStateItem from './ControlsComponentStateItem.vue'
+
+const props = defineProps<{
+  variant: Variant
+}>()
+
+const stateKeys = computed(() => Object.keys(props.variant.state || {})
+  .filter(key => !key.startsWith('_h')))
+</script>
+
+<template>
+  <div class="histoire-controls-component-init-state">
+    <div class="htw-p-2 htw-flex htw-items-center htw-gap-1">
+      <Icon
+        v-tooltip="'Auto-detected state'"
+        icon="carbon:data-vis-1"
+        class="htw-w-4 htw-h-4 htw-text-primary-500 htw-flex-none"
+      />
+      <div>
+        State
+      </div>
+    </div>
+    <ControlsComponentStateItem
+      v-for="key of stateKeys"
+      :key="key"
+      :item="key"
+      :variant="variant"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import type { Variant } from '../../types'
+import { HstCheckbox, HstJson, HstNumber, HstText } from '@histoire/controls'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  variant: Variant
+  item: string
+}>()
+
+const comp = computed(() => {
+  switch (typeof props.variant.state[props.item]) {
+    case 'string':
+      return HstText
+    case 'number':
+      return HstNumber
+    case 'boolean':
+      return HstCheckbox
+    case 'object':
+    default:
+      return HstJson
+  }
+})
+
+const model = computed({
+  get: () => {
+    return props.variant.state[props.item]
+  },
+  set: (value) => {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.variant.state[props.item] = value
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="comp"
+    v-if="comp"
+    v-model="model"
+    class="histoire-controls-component-prop-item"
+    :title="props.item"
+  />
+</template>

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

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { Story, Variant } from '../../types'
+import { computed, toRefs } from 'vue'
+import { useEventsStore } from '../../stores/events'
+import BaseOverflowMenu from '../base/BaseOverflowMenu.vue'
+import BaseOverflowTab from '../base/BaseOverflowTab.vue'
+import BaseTab from '../base/BaseTab.vue'
+import BaseTag from '../base/BaseTag.vue'
+import { useStoryDoc } from './StoryDocs.vue'
+
+const props = defineProps<{
+  story: Story
+  variant: Variant
+}>()
+
+const { story } = toRefs(props)
+
+const { renderedDoc } = useStoryDoc(story)
+
+const eventsStore = useEventsStore()
+const hasEvents = computed(() => eventsStore.events.length)
+</script>
+
+<template>
+  <BaseOverflowMenu class="histoire-pane-tabs htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750">
+    <BaseTab
+      :to="{ ...$route, query: { ...$route.query, tab: '' } }"
+      :matched="!$route.query.tab"
+    >
+      Controls
+    </BaseTab>
+    <BaseTab
+      :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
+      :matched="$route.query.tab === 'docs'"
+      :class="{
+        'htw-opacity-50': !renderedDoc,
+      }"
+    >
+      Docs
+    </BaseTab>
+    <BaseTab
+      :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
+      :matched="$route.query.tab === 'events'"
+      :class="{
+        'htw-opacity-50': !hasEvents,
+      }"
+    >
+      Events
+      <BaseTag v-if="eventsStore.unseen">
+        {{ eventsStore.unseen <= 99 ? eventsStore.unseen : "99+" }}
+      </BaseTag>
+    </BaseTab>
+
+    <template #overflow>
+      <BaseOverflowTab
+        :to="{ ...$route, query: { ...$route.query, tab: '' } }"
+        :matched="!$route.query.tab"
+      >
+        Controls
+      </BaseOverflowTab>
+      <BaseOverflowTab
+        :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
+        :matched="$route.query.tab === 'docs'"
+        :class="{
+          'opacity-50': !renderedDoc,
+        }"
+      >
+        Docs
+      </BaseOverflowTab>
+      <BaseOverflowTab
+        :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
+        :matched="$route.query.tab === 'events'"
+        :class="{
+          'htw-opacity-50': !hasEvents,
+        }"
+      >
+        Events
+        <BaseTag v-if="eventsStore.unseen">
+          {{ eventsStore.unseen <= 99 ? eventsStore.unseen : "99+" }}
+        </BaseTag>
+      </BaseOverflowTab>
+    </template>
+  </BaseOverflowMenu>
+</template>