Wrapping a story using decorator in storybook 5.2 - typescript / angular

Question

I'm coming from storybook pre 5.2 using storiesOf whereby if i wanted to wrap my component I would use template.

EG

.add('Test', () => ({
  component: TestComponent,
  template: `
    
      ...

In 5.2 the recommended way to write stories has changed and describes how to use decorators to achieve the same outcome https://storybook.js.org/docs/basics/writing-stories/#decorators. However I am using angular and struggling to find a solution as there are only react and vue examples. Both of which use specific functions / components

In Vue projects you have to use the special component instead of the function parameter storyFn that is used in React projects

Using template as in the older spec I have tried the following

As an initial test that template works

export const Test = () => ({
  component: TestComponent,
  template: `Expecting just this text`
});

Outcome: See the text 'Expecting just this text'

Using

export const Test = () => ({ component: TestComponent,
  template: 
});

Outcome: Blank screen with Template parse errors: 'CheckboxComponent' is not a known element: suggesting use of `schemas: [CUSTOM_ELEMENTS_SCHEMA]

Using

export const Test = () => ({
  component: TestComponent,
  template: ``
});

Outcome: Blank screen with Template parse errors: 'CheckboxComponent' is not a known element: suggesting use of schemas: [CUSTOM_ELEMENTS_SCHEMA]

For both 2 & 3 I tried adding

export const Test = () => ({
  component: TestComponent,
  addDecorator: moduleMetadata({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  }),
  template: `[tried both templates from 2 & 3]`
});

Outcome: Same errors appeared again

Could someone shed some light on how this would accomplished in typescript and where I am going wrong - thanks.

user_1294002 · Answer

Found the way to do it in 5.2 with the new story format. Fixed the Template parse errors by adding [CUSTOM_ELEMENTS_SCHEMA] and declaring the component.

I'm also using the docs addOn https://github.com/storybookjs/storybook/tree/master/addons/docs and added the capability for this.

I've included both storiesOf https://storybook.js.org/docs/formats/storiesof-api/ and the Component Story Format (CSF) https://storybook.js.org/docs/formats/component-story-format/ incase anyone else runs into difficulty.

storiesOf API

import { TestComponent } from './test.component';
import { storiesOf, moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

storiesOf('Elements|Test', module)
  .addParameters({ // only needed for docs add-on
    component: TestComponent, 
    componentSubtitle: 'Subtitle'
    // docs: { page: null } uncomment this to disabled docs
  })
  .addDecorator(
    moduleMetadata({
      imports: [CommonModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [TestComponent]
    })
  )
  .add('Test', () => ({
    component: TestComponent,
    template: `test text`
  }));

CSF

import { TestComponent } from './test.component';
import { moduleMetadata, } from '@storybook/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

export default {
  title: 'Elements|Test',
  component: TestComponent, // only needed for docs add-on
  parameters: { // only needed for docs add-on
    componentSubtitle: 'Subtitle.'
    // docs: { page: null } uncomment this to disabled docs
  },
  decorators: [
    moduleMetadata({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [TestComponent]
    })
  ]
};

export const Test = () => ({
  component: TestComponent,
  template: `test text`
});

Wrapping a story using decorator in storybook 5.2 - typescript / angular

1 Answers