Consider refactoring storybook to use knobs

[guastallaigor]

This is a suggestion. Right now storybook isn't using knobs. That means a lot of the templates and components imports are duplicated and it's necessary more code to generate all the props combinations for one component story.

For example the container storybook:

containerStory.add('Normal', () => ({
  components: { NesContainer },
  template: '<NesContainer><p>I am error</p></NesContainer>'
}))

containerStory.add('Dark', () => ({
  components: { NesContainer },
  template: '<NesContainer dark><p>WHAT A HORRIBLE NIGHT TO HAVE A CURSE.</p></NesContainer>'
}))

containerStory.add('Rounded', () => ({
  components: { NesContainer },
  template: '<NesContainer rounded><p>I am error.</p></NesContainer>'
}))

containerStory.add('Dark And Rounded', () => ({
  components: { NesContainer },
  template: '<NesContainer dark rounded><p>WHAT A HORRIBLE NIGHT TO HAVE A CURSE.</p></NesContainer>'
}))

containerStory.add('With Title', () => ({
  components: { NesContainer },
  template: `<NesContainer title="Zelda II"><p>I am error.</p></NesContainer>`
}))

containerStory.add('Dark With Title', () => ({
  components: { NesContainer },
  template: `<NesContainer title="Castlevania II: Simon's Quest" dark><p>WHAT A HORRIBLE NIGHT TO HAVE A CURSE.</p></NesContainer>`
}))

containerStory.add('Centered With Title', () => ({
  components: { NesContainer },
  template: `<NesContainer title="Zelda II" center><p>I am error.</p></NesContainer>`
}))

containerStory.add('Centered Dark With Title', () => ({
  components: { NesContainer },
  template: `<NesContainer title="Castlevania II: Simon's Quest" dark center><p>WHAT A HORRIBLE NIGHT TO HAVE A CURSE.</p></NesContainer>`
}))

containerStory.add('Rounded And Dark With Title', () => ({
  components: { NesContainer },
  template: `<NesContainer title="Castlevania II: Simon's Quest" dark rounded><p>WHAT A HORRIBLE NIGHT TO HAVE A CURSE.</p></NesContainer>`
}))

containerStory.add('Centered And Rounded And Dark With Title', () => ({
  components: { NesContainer },
  template: `<NesContainer title="Castlevania II: Simon's Quest" dark rounded center><p>WHAT A HORRIBLE NIGHT TO HAVE A CURSE.</p></NesContainer>`
}))

We have 10 additions (and is-right prop is missing), when we could have only one container, and a lot of 3 boolean knobs and one radio in the same screen, that would generate all the same amount of possibilities, like NES.css storybook:

NES.css storybook

The con here is that this means a good amount of refactoring and just for that might not be worth it, but maybe (if approved of course), someone else could do it, because I would like to create the other missing components/props instead of doing this right now.

[fernyettheplant]

Hey there!

I actually tried to set up knobs at the beginning of this but without any success :( The knobs were there but no re-rendering happened. Maybe was just me not knowing some things ¯_(ツ)_/¯

I'll try again to set it up but if you come up with a solution, i will be very grateful 🙏

[guastallaigor]

I know a way to add it as props inside the story, example: ...

return {
    components: { X },
    methods: { action: action('Card Clicked!') },
    props: {
      itemUniqueKey: {
        type: String,
        default: text('Item unique key', 'title')
      },
      titleAttr: {
        type: String,
        default: text('Title attribute', 'title')
      },
      titleCentered: {
        type: Boolean,
        default: boolean('Title centered', false)
      },
...

This way the knobs show up and it's reactive. Not sure if it's ideal tho but it works :smile: