Can't seem to get controls addon to work, could anyone help please?

[Flaviu989]

Hello I'm trying to replace the knobs addon with controls addon and I just can't seem to get it to work.

this is what my story looked like with knobs:

import { boolean, select } from '@storybook/addon-knobs';

import { MainButtonComponent } from './main-button.component';

enum Labels {
  NEXT = 'Next',
  SCAN = 'Scan',
  ARTICLE = 'Process item'
}

export default {
  title: 'MainButtonComponent'
}

export const primary = () => ({
  component: MainButtonComponent,
  props: {
    leftIcon: select('leftIcon',
                    ['', 'chevron_left', 'done'],
                      undefined),
    rightIcon: select('rightIcon', ['',  'chevron_right'],
                            'chevron_right'),
    isDisabled: boolean('isDisabled', false),
    hasRipple: boolean('hasRipple', true),
    text: select('text', Object.values(Labels), Labels.NEXT),
  }
})

and this is what it looks like now:

import { Meta, Story } from '@storybook/angular/types-6-0';

import { MainButtonComponent } from './main-button.component';

enum Labels {
  NEXT = 'Next',
  SCAN = 'Scan',
  ARTICLE = 'Process item'
}

export default {
  title: 'MainButtonComponent',
  component: MainButtonComponent,
  argTypes: {
    leftIcon: {
      options: ['', 'chevron_left', 'done'],
      control: { type: 'select' },
      defaultValue: undefined,
      name: 'leftIcon'
    },
    rightIcon: {
      options: ['', 'chevron_right'],
      control: { type: 'select' },
      defaultValue: 'chevron_right',
      name: 'rightIcon'
    },
    isDisabled: {
      control: { type: 'boolean' },
      defaultValue: false,
      name: 'isDisabled'
    },
    hasRipple: {
      control: { type: 'boolean' },
      defaultValue: true,
      name: 'hasRipple'
    },
    text: {
      options: Object.values(Labels),
      control: { type: 'select' },
      defaultValue: Labels.NEXT,
      name: 'text'
    }
  },
  moduleMetadata: {
    imports: [
      CoreModule,
      SharedModule,
    ]
  }
} as Meta;

export const Primary = () => ({
  props: {
    leftIcon: undefined,
    rightIcon: 'chevron_right',
    isDisabled: false,
    hasRipple: true,
    text: Labels.NEXT
  }
});

And I get a message that "This story is not configured to handle controls." and changing the controls doesn't change anything

Also if I remove props from const Primary it looks like this:

I know I've done something wrong but I can't seem to figure out what, could anyone help me out please?

[Flaviu989]

I've managed to make it run like this, but is there a way to make it more concise or simplify it?

export default {
  title: 'MainButtonComponent',
  component: MainButtonComponent,
  argTypes: {
    leftIcon: {
      options: ['', 'chevron_left', 'done'],
      control: { type: 'select' }
    },
    rightIcon: {
      options: ['', 'chevron_right'],
      control: { type: 'select' }
    },
    isDisabled: {
      control: { type: 'boolean' }
    },
    hasRipple: {
      control: { type: 'boolean' }
    },
    text: {
      options: Object.values(Labels),
      control: { type: 'select' }
    }
  },
} as Meta;

const Template: Story<MainButtonComponent> = (args: MainButtonComponent) => ({
  component: MainButtonComponent,
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
    leftIcon: undefined,
    rightIcon: 'chevron_right',
    isDisabled: false,
    hasRipple: true,
    text: Labels.NEXT
};