Custom controls in StoryBook with Angular

user_2909634 0
Viewed 1211

I'm starting to use Storybook in an Angular component library.

It works fine for components with inputs like booleans or strings, it shows those inputs using controls.

But there are certain components where the input is an object.

For those components I'm able to provide an object, but users are able to edit a string with the JSON representation of the object instead of several inputs.

How do I do this in a user-friendly way so users can edit those properties in the control without using a JSON representation of the object?

angular-storybook storybook
1 Answers

If you're using Knobs, you can write them like this:

This sample here:

class sample{
  title: string;
  text: string;
  settings: {
    language: string;
    disabled: boolean;
  }
}

would turn into this:

    template: `
      <div style="max-width:80vw;margin:auto;">
        <app-custom-component
        [title]="this.titleKnob"
        [text]="this.textKnob"
        [settings]="this.settingsKnob"
        ></app-custom-component>
      </div>
   `,
    props: {
      titleKnob: text('Title',''),
      textKnob: text('Text area', ''),
      settingsKnob: {
        language: text('Default Language', 'en'),
        disabled: boolean('Disabled', false),
      }
    }
user_52433090
Related