javascript - Wrapping a story using decorator in storybook 5.2 - typescriptangular - Stack Overflow

admin管理员组

文章数量:1404578

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

EG

.add('Test', () => ({
  ponent: TestComponent,
  template: `
    <div class="wrapper">
      <test-ponent></test-ponent>...

In 5.2 the remended way to write stories has changed and describes how to use decorators to achieve the same oute . 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 / ponents

In Vue projects you have to use the special ponent <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 = () => ({
  ponent: TestComponent,
  template: `Expecting just this text`
});

Oute: See the text 'Expecting just this text'

2. Using <TestComponent>

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

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

3. Using <test-ponent>

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

Oute: 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 = () => ({
  ponent: TestComponent,
  addDecorator: moduleMetadata({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  }),
  template: `[tried both templates from 2 & 3]`
});

Oute: Same errors appeared again

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

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

EG

.add('Test', () => ({
  ponent: TestComponent,
  template: `
    <div class="wrapper">
      <test-ponent></test-ponent>...

In 5.2 the remended way to write stories has changed and describes how to use decorators to achieve the same oute https://storybook.js/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 / ponents

In Vue projects you have to use the special ponent <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 = () => ({
  ponent: TestComponent,
  template: `Expecting just this text`
});

Oute: See the text 'Expecting just this text'

2. Using <TestComponent>

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

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

3. Using <test-ponent>

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

Oute: 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 = () => ({
  ponent: TestComponent,
  addDecorator: moduleMetadata({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  }),
  template: `[tried both templates from 2 & 3]`
});

Oute: Same errors appeared again

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

• javascript
• angular
• typescript
• storybook

Share Improve this question Follow edited Mar 5, 2020 at 10:20 fidev asked Mar 4, 2020 at 13:01 fidevfidev 1,25233 gold badges2424 silver badges5353 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 ponent.

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

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

storiesOf API

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

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

CSF

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

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

export const Test = () => ({
  ponent: TestComponent,
  template: `<div class="text">test text<app-test></app-test></div>`
});

本文标签： javascriptWrapping a story using decorator in storybook 52typescriptangularStack Overflow