pixijs / storybook

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add default "render" on projectAnnotations level

neatbyte-vnobis opened this issue · comments

Example in this repo uses next story format:

import { action } from '@storybook/addon-actions';

import { BunnyDemo } from './BunnyDemo';

export default {
    title: 'Demos-Basic',
    args: {
        bunnySize: 5,
        bunnySpacing: 40,
        someInjectedObject: {
            onBunnyClick: action('onBunnyClick'),
        },
    },
};

export const Default = (args) => new BunnyDemo(args);

Here each story SHOULD be a function that creates a Pixi Container/DisplayElement.

But Storybook also supports two more formats:

  1. Have render method in default export of the story (it is working).
import { action } from '@storybook/addon-actions';

import { BunnyDemo } from './BunnyDemo';

export default {
    title: 'Demos-Basic',
    args: {
        bunnySize: 1,
        bunnySpacing: 40,
        someInjectedObject: {
            onBunnyClick: action('onBunnyClick'),
        },
    },
    render: (args: any) => new BunnyDemo(args),
};

export const Default = {
    args: {}
};
  1. Have component property in default export of the story (it is NOT working).
import { action } from '@storybook/addon-actions';

import { BunnyDemo } from './BunnyDemo';

export default {
    title: 'Demos-Basic',
    args: {
        bunnySize: 1,
        bunnySpacing: 40,
        someInjectedObject: {
            onBunnyClick: action('onBunnyClick'),
        },
    },
    component: BunnyDemo,
};

export const Default = {
    args: {}
};

But it can be fixed if next code will be added to .storybook/preview.ts:

export const render = (args, context) => {
  if (!context.component) {
    throw new Error("Default preview() can be used only when story default return has a 'component' property.")
  }

  return new context.component(args);
};

Maybe it worth to add default project level render setting?
It can expect to get a component that implements Pixi.Container.