feat: Add auto state controls (fix #191)

[hugoattal]

Fix #191

Description

Add placeholder with default value when auto-detected props are undefined

Add auto state controls when there are no template#controls and initState exists.

Additional context

Displaying default values like the issue suggests is not a good solution IMO, as if the same state value is used for two props, the values would be unlinked.

I think generating automatic controls for the state should solve the issue mentioned. Wdyt?

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for histoire-examples-svelte3 ready!

Name	Link
🔨 Latest commit	391a3d8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-svelte3/deploys/65bf9664c0401900072d315a
😎 Deploy Preview	https://deploy-preview-673--histoire-examples-svelte3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for histoire-examples-vue3 ready!

Name	Link
🔨 Latest commit	391a3d8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-vue3/deploys/65bf966458ff670008c40e05
😎 Deploy Preview	https://deploy-preview-673--histoire-examples-vue3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for histoire-controls ready!

Name	Link
🔨 Latest commit	391a3d8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-controls/deploys/65bf9664f3beeb00071086cc
😎 Deploy Preview	https://deploy-preview-673--histoire-controls.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for histoire-site ready!

Name	Link
🔨 Latest commit	391a3d8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-site/deploys/65bf9664e677d20008c174ad
😎 Deploy Preview	https://deploy-preview-673--histoire-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alexzhang1030]

When will this version land in npmjs?

[hugoattal]

@alexzhang1030 It's already available. Keep in mind that the auto state should be displayed only if no custom controls are provided.

Here is an example: https://github.com/histoire-dev/histoire/blob/main/examples%2Fvue3%2Fsrc%2Fcomponents%2FAutoStateProps.story.vue

[alexzhang1030]

Thank you, it's released now, but I saw the version in npm is still 0.17.9, it looks like it has not been published yet.