Add component slots support for autogenerated code examples - Vue Storybook

[DanDeLuca]

Is your feature request related to a problem? Please describe.

Since Storybook 8.0 component, default, named and dynamic slots for autogenerated code examples no longer render. Assuming that this was once a feature that has since been removed, it really doesn't make much sense.

For example, given the following component:

<script setup lang="ts">
  import ErrorCollection from "./NpErrorCollection.vue"
  import NpLabel from "@/components/form/NpLabel.vue"
  import type { NpFormFieldProps as Props } from "@/types/components/np-form"

  const props = defineProps<Props>()

  defineSlots<{
    /**
     * Default slot for the label content.
     * This is where the main label text should be placed.
     */
    default?(): any;
    /**
     * Slot for additional suffix content after the label.
     * This could include icons, additional text, etc.
     */
    suffix?(): any;
    /**
     * Slot for hint content below the label.
     * This is useful for providing additional information or instructions.
     */
    hint?(): any;
    /**
     * Slot for the input element.
     * This slot is used to render the form input field element or component.
     */
    input?(): any;
  }>()

  const hasErrors = () => !!props.errors.length

</script>

<template>
  <div :data-testid="testId ? `${testId}` : undefined">
    <NpLabel
      :test-id="testId ? `${testId}.label` : undefined"
      :for="$props.for"
      :is-disabled="isDisabled"
      :has-error="hasErrors()"
      :is-sr-only="isSrOnly"
    >
      <slot name="default" />
      <template
        v-if="$slots.suffix"
        #suffix
      >
        <slot name="suffix" />
      </template>
      <template
        v-if="$slots.hint"
        #hint
      >
        <slot name="hint" />
      </template>
    </NpLabel>

    <div
      v-if="$slots.input"
      :data-testid="testId ? `${testId}.input` : undefined"
      class="mt-2"
    >
      <slot name="input" />
    </div>

    <ErrorCollection
      v-if="hasErrors()"
      :test-id="testId ? `${testId}.errors` : undefined"
      :errors="errors"
      class="mt-2"
    />
  </div>
</template>

And the following story:

const meta = {
  title: "Components / Form / NpFormField",
  component: NpFormField,
  subcomponents: { NpInputText },
  parameters: {
    docs: {
      description: {
        component: `A simple field component using \`NpStandardLabel\` and \`NpErrorCollection\` 
        to be used with form inputs.`,
      },
    },
  },
  render: (args) => ({
    components: { NpFormField, NpInputText },
    setup () {
      return { args }
    },
    template: `
      <NpFormField v-bind="args">
        <template #default>Label text</template>
        <template #suffix>
          (Optional)
        </template>
        <template #hint>
          Description or hint
        </template>
        <template #input>
        <NpInputText
          id="input-id"
          testId="test-input-id"
          :hasError="args.errors.length > 0"
          :disabled="!!args.isDisabled"
        />
        </template>
      </NpFormField>`,
  }),
} satisfies Meta<typeof NpFormField>

export default meta
type Story = StoryObj<typeof meta>

export const WithLabelAndHintAndSuffixAndTextInput: Story = {
  args: {
    for: "input-id",
    errors: [] as string[],
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)

    // check label
    await expect(canvas.getByText("Label text")).toBeDefined()
    // check suffix
    await expect(canvas.getByText("(Optional)")).toBeDefined()
    // check hint
    await expect(canvas.getByText("Description or hint")).toBeDefined()

    // check interaction with input in slot
    const textInput = canvas.getByTestId("test-input-id")
    await expect(textInput).toBeVisible()
    await userEvent.type(textInput, "I am using interaction tests")
    await expect(textInput).toHaveValue("I am using interaction tests")
  },
}

The generated code example is:

<template>
  <NpFormField :errors="errors" for="input-id" />
</template>

Describe the solution you'd like

Code examples rendered default, named and dynamic slot content

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

No response