Provide Story & Variant Lifecycle/Event Hook

[haleksandre]

Hi,

Would you be open to adding lifecycle events to the Story & Variant components with the current story & variant information that could be useful to use within our story component?

One of the possible use cases is to set the default props, slots or other variables' values within that hook. An example of this in Svelte would look like this.

Within yourVariant component you dispatch an event within the lifecycles onMount, onDestroy, etc.

(the following example assume an event called mount gets dispatched during the Variant onMount lifecycle hook)

<script>
  import MyButton from "./mybutton.svelte"

  export let Hst: Hst;
  const { Story, Variant, Checkbox, Text } = Hst;

  let content = "Button";
  let disabled: false;
</script>

<Story>
  <Variant 
    title="Default"
    on:mount={(event) => {
      // event.detaill <-- could contain variant information like its id, title, etc. which could be used within the story

      content = "Button";
      disabled = false;
    }}
  >
    <MyButton {disabled}>
      {content}
    </MyButton>

    <input bind:value={one} />
  </Variant>

  <Variant
    title="Disabled"
    on:mount={() => {
      content = "Disabled";
      disabled = true;
    }}
  >
    <MyButton {disabled}>
      {content}
    </MyButton>

    <input bind:value={one} />
  </Variant>

  <svelte:fragment slot="controls">
    Content: <input type="text" bind:value={content} />
    Disabled: <input type="checkbox" bind:checked={disabled} />
  </svelte:fragment>
</Story>