.add('Simple', () => {
    const name = text('name', 'John Doe');
    const age = number('age', 0);
    const phoneNumber = text('phoneNumber', '555-55-55');

    return {
      moduleMetadata: {
        entryComponents: [SimpleKnobsComponent],
        declarations: [SimpleKnobsComponent],
      },
      template: `
        <h1> This is a template </h1>
        <storybook-simple-knobs-component
          [age]="age"
          [phoneNumber]="phoneNumber"
          [name]="name"
        >
        </storybook-simple-knobs-component>
      `,
      props: {
        name,
        age,
        phoneNumber,
      },
    };
  })

    () => {
      const name = text('name', 'Dynamic knob');

      return {
        component: ServiceComponent,
        props: {
          name,
        },
      };
    },

  .add('Single', () => ({
    components: { Cover },

    data() {
      return {
        book: {
          title: text('Title', 'La Celda Sangrienta', 'props'),
          author: text('Author', 'James Goss', 'props'),
          cover: text(
            'Cover image',
            'https://www.audiowho.com/wp-content/uploads/2015/01/portada-blood.png',
            'props'
          ),
        },
      };
    },

    template:
      '<cover :title="book.title" :author="book.author" :cover="book.cover" />',
  }))

 () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: {
     text: text('text', 'Button with custom styles'),
     onClick: action('log'),
   },
   styles: [
     `
   storybook-button-component {
     background-color: red;
     padding: 25px;
   }
 `,
   ],
 }),

 () => ({
   component: DiComponent,
   props: {
     title: text('title', 'Component dependencies'),
   },
 }),

 () => ({
   component: NameComponent,
   props: {
     field: text('field', 'foobar'),
   },
 }),