Knob with type select args

[tarmooo]

type: {
      type: 'select',
      args: [ ['flat', 'outline'],'flat']
    },

How to define knob with select type?

[tarmooo]

Right...got it working with actually adding function and putting knobs inside stories like mentioned in issue #1 For example a simple button would look like this - buttonContent is used as a slot inside custom-button:

import readme from './readme.md';

export default function (stories, knobs) {
  const mainEl = document.createElement('div');

  stories.add('Button', () => {
    const buttonContent = knobs.text('Text', 'button text is here');
    const type = knobs.select('Type', ['flat', 'outline'], 'flat');
    const color = knobs.select('Color', ['default', 'primary', 'secondary'], 'default');

    mainEl.innerHTML = `<custom-button type="${type}" color="${color}">${buttonContent}</custom-button>`;

    return mainEl;
  }, { notes: readme.replace(/\\\|/g, '` `') });
}

Probably it can be done with automagic stuff aswell, but it was easier to take this approach right now. Should it be investigated and make knobs.select automagical aswell, what do you think @DesignByOnyx ?

Also this way readme still has to be applied somewhat manually.

[Shackless]

You can just provide the knob config in your-component.story.tsx like this and automagic stuff will do the rest then:

import readme from './readme.md';

export default {
  notes: readme,
  knobs: {
    type: {
      type: "select",
      args: [ ['flat', 'outline'],'flat']
    },
    ...
  }
};

The problem is that automagic will not generate a knob for buttonContent because this is not a prop of your <custom-button>. I guess it's just a <slot /> in your component, right?

Currently, afaik, it's not possible to inject content into a <slot> using the configuration mechanism.

[tarmooo]

slot thing is clear BUT that select thing did not work as stated in op. did it work for you?

[Shackless]

Ahh okay sorry, then I got you wrong. I thought you were wondering why your text props don't show up as selects when not providing a config at all. That's because by prop definition, they are just strings - so automagic would render a text input instead of a select.

Well yeah, the select config is working for me. I'm using it in several places like I described. I have a button as well and here's the config I`m using for it:

import readme from "./readme.md";
import { COLOR_RED } from "../../constants/colors";
import { BUTTON_COLORS } from "./types/button-colors";
import { BUTTONSIZE_NORMAL, BUTTON_SIZES } from "./types/button-sizes";
import { BUTTONRANK_PRIMARY, BUTTON_RANKS } from "./types/button-ranks";

export default {
  notes: readme,
  knobs: {
    color: {
      type: "select",
      args: [[null, ...BUTTON_COLORS], COLOR_RED]
    },
    rank: {
      type: "select",
      args: [BUTTON_RANKS, BUTTONRANK_PRIMARY]
    },
    size: {
      type: "select",
      args: [BUTTON_SIZES, BUTTONSIZE_NORMAL]
    },
    text: {
      type: "text",
      args: ["Button"]
    },
    type: {
      type: "select",
      args: [["button", "submit", "reset"], "button"]
    }
  }
};

The constants are just strings.

[tarmooo]

What version of addon-knobs you are using? as mine says errors and i don't know what i'm doing wrong there import readme from './readme.md';

import readme from './readme.md';

export default {
  notes: readme,
  knobs: {
    type: {
      type: 'select',
      args: [['flat', 'outline'],'flat']
    }
  }
}

[Shackless]

These are all my storybook addons:

    "@storybook/addon-a11y": "^5.2.6",
    "@storybook/addon-actions": "^5.2.8",
    "@storybook/addon-info": "^5.2.6",
    "@storybook/addon-knobs": "^5.2.6",
    "@storybook/addon-notes": "^5.2.6",
    "@storybook/addon-options": "^5.2.6",
    "@storybook/addon-viewport": "^5.2.6",
....
    "storybook": "^5.1.11"

[tarmooo]

So, when i define prop and set default value there then this thing does not work. @Prop() type: "flat" | "outline" = "flat";

When i remove default value, then it works: @Prop() type: "flat" | "outline";

[tricki]

I just had the exact same problem. I traced it to these lines:

  if(prop.defaultValue) {
    try {
      args[1] = JSON.parse(prop.defaultValue)
    }
    catch(e) {
      args[1] = (typeof prop.defaultValue === 'string') ? prop.defaultValue : undefined;
    }
  }

This will always overwrite the second argument but in case of select (and others) it should be the third.

Not sure how best to handle that.. Do we need a map from knob to default value argument position?

[DesignByOnyx]

We can add another switch in there to handle different knob types. Since there is such a finite set of knobs, and most of them have the same argument positions, this should be easy to maintain. I will gladly merge a PR for this. I apologize I have been out of Stencil world for the past 6 months, making this project much more difficult to maintain. If anybody wants to have commit access, let me know.