feat: Add auto state controls (fix #191)

examples/vue3/cypress/e2e/stories-list.cy.js

@@ -4,7 +4,7 @@ describe('Stories list', () => {
   it('should display the stories', () => {
     cy.clearLocalStorage()
     cy.visit('/')
-    cy.get('[data-test-id="story-list-item"]').should('have.length', 32)
+    cy.get('[data-test-id="story-list-item"]').should('have.length', 33)
     cy.get('[data-test-id="story-list-item"]').contains('🐱 Meow')
     cy.get('[data-test-id="story-list-item"]').contains('BaseButton')
       .contains('3') // Variants count

examples/vue3/src/components/AutoStateProps.story.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import AutoStateProps from './AutoStateProps.vue'
+
+function initState () {
+  return {
+    name: 'Fry',
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="Auto State & Props"
+    :layout="{
+      type: 'grid',
+      width: 200,
+    }"
+  >
+    <Variant title="Naked">
+      <AutoStateProps />
+    </Variant>
+    <Variant
+      title="State"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <AutoStateProps :name="state.name" />
+      </template>
+    </Variant>
+  </Story>
+</template>

examples/vue3/src/components/AutoStateProps.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps({
+  name: {
+    type: String,
+    default: 'world',
+  },
+})
+</script>
+
+<template>
+  Hello {{ name }}!
+</template>

packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { Icon } from '@iconify/vue'
 import type { AutoPropComponentDefinition, PropDefinition } from '@histoire/shared'
 import { HstCheckbox, HstJson, HstNumber, HstText } from '@histoire/controls'
@@ -54,6 +54,7 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
     :is="comp"
     v-if="comp"
     v-model="model"
+    :placeholder="model === undefined ? definition?.default : null"
     class="histoire-controls-component-prop-item"
     :title="`${definition.name}${canReset ? ' *' : ''}`"
   >

packages/histoire-app/src/app/components/panel/ControlsComponentState.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
+import type { Variant } from '@histoire/shared'
+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>

packages/histoire-app/src/app/components/panel/ControlsComponentStateItem.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { HstCheckbox, HstJson, HstNumber, HstText } from '@histoire/controls'
+import type { Variant } from '../../types'
+
+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>

packages/histoire-app/src/app/components/panel/StoryControls.vue

@@ -6,6 +6,7 @@ import type { Story, Variant } from '../../types'
 import BaseEmpty from '../base/BaseEmpty.vue'
 import StatePresets from './StatePresets.vue'
 import ControlsComponentProps from './ControlsComponentProps.vue'
+import ControlsComponentState from './ControlsComponentState.vue'
 
 const props = defineProps({
   variant: {
@@ -27,6 +28,12 @@ watch(() => props.variant, () => {
 })
 
 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>
@@ -56,6 +63,16 @@ const hasCustomControls = computed(() => props.variant.slots().controls || props
       @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"