CODEWITHSUNDEEP
javascriptangulartypescriptstorybook
fidev
fidev

Reputation: 1252

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

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: `
    <div class="wrapper">
      <test-component></test-component>...

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 <story/> instead of the function parameter storyFn that is used in React projects

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

  1. 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'

  1. Using <TestComponent>
export const Test = () => ({ component: TestComponent,
  template: <div class="wrapper"><TestComponent></TestComponent></div>
});

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

  1. Using <test-component>
export const Test = () => ({
  component: TestComponent,
  template: `<div class="wrapper"><test-component></test-component></div>`
});

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.

Upvotes: 3

Views: 8915

Answers (1)

fidev
fidev

Reputation: 1252

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: `<div class="test">test text<app-test></app-test></div>`
  }));

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: `<div class="text">test text<app-test></app-test></div>`
});

Upvotes: 4

Related Questions