How to create generic typescript function that binds arguments for storybook control

user_4831427 0
Viewed 2417

How to write a generic so that the Result takes on the argument of another type supplied to the generic?

This is my example code.

import { Story } from '@storybook/react/types-6-0';

type TKeyAny = {
  [key: string]: string; // | 'other args values here...';
};

// this fails
export const bindargs = <A extends TKeyAny, T extends Story<A>>(args: A, Template: T): T => {
  const Comp = Template.bind({});
  Comp.args = args;
  return Comp;
};

export default bindargs;

This would work but its not specific to the arguments being passed into it, which is why I'd like a generic:


// This works but I'd like this instead to be in a generic 
// export const bindargs = (args: TKeyAny, Template: Story<TKeyAny>): Story<TKeyAny> => {
//   const Comp = Template.bind({});
//   Comp.args = args;
//   return Comp;
// };
typescript-generics storybook typescript reactjs
2 Answers

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),
}
user_25431150

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",
});
user_66930670
Related