score:1

i liked the idea of a helper function so i went playing around. it does cast to any inside the function but it doesn't matter for it's usage.

import react from "react";
import { meta, story } from "@storybook/react";
import { box, boxprops } from "./box";

type bindtemplate = <t extends story<any>>(template: t, args: t["args"]) => t;

const bindtemplate: bindtemplate = (template, args) => {
  const boundtemplate = (template as any).bind({});
  boundtemplate.args = args;
  return boundtemplate;
};

const config: meta = {
  title: "box",
  component: box,
};

export default config;

const template: story<boxprops> = (args) => <box {...args}>lol</box>;

export const primary = bindtemplate(template, {
  classname: "valid",
  someinvalidprops: "invalid",
});

score:3

we use generic like this in our storybook:

maybe you can do a similar thing

import react from 'react'
import { meta, story } from '@storybook/react/types-6-0'

import selectdropdown, { iselectdropdownprops, selectoption } from './selectdropdown'

export default {
  title: 'shared/components/selectdropdown',
  component: selectdropdown,
  argtypes: {
    options: {
      control: {
        type: 'object',
      },
    },
(...)
} as meta


const template = <t extends {}>(): story<iselectdropdownprops<t>> => args => (
  <div
    style={{
      width: '300px',
    }}
  >
    <selectdropdown<t> {...args} />
  </div>
)

export const normal = template<number>().bind({})
normal.args = {
  options: createoptions(5),
}

Related Query

More Query from same tag