How to infer args from typescript types that use generics or utility types?

[jfarris587]

Summary

When using Storybook Docs and Typescript, do we have to manually add the args and options to the Story if the component is utilizing generics or utility types?

---

Below is main.ts

import type { StorybookConfig } from '@storybook/react-vite';

import { join, dirname } from "path";
import { createRequire } from "module";

const require = createRequire(import.meta.url);
/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getAbsolutePath(value: string): any {
    return dirname(require.resolve(join(value, "package.json")));
}

const config: StorybookConfig = {
  "stories": [
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-onboarding'),
    getAbsolutePath('@storybook/addon-interactions')
  ],
  "framework": {
    "name": getAbsolutePath('@storybook/react-vite'),
    "options": {}
  }
};
export default config;

Consider the story for a button:

import type { Meta, StoryObj } from '@storybook/react';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Primary: Story = {
  args: {
  },
};

Take the below example, Storybook automatically can infer the variant args and they are available as controls with radio options:

export type ButtonProps = {
  variant: "primary" | "secondary";
}

export function Button({}: ButtonProps) {
  return (
    <button>hi</button>
  );
}

Take the below example, using class-variance-authority, we have the VariantProps utility to infer "primary" | "secondary". However Storybook now no longer brings in any args automatically:

import { PropsWithChildren, ButtonHTMLAttributes } from 'react';
import { cva, VariantProps } from 'class-variance-authority';

export const buttonVariants = cva(
  "flex",
  {
    variants: {
      variant: {
        primary: 'bg-green-800',
        secondary: 'bg-green-200',
      },
    },
    defaultVariants: {
      variant: 'primary',
    },
  },
);


export type ButtonProps = VariantProps<typeof buttonVariants>

export function Button({}: ButtonProps) {
  return (
    <button>hi</button>
  );
}

Additional information

No response

Create a reproduction

No response

[jfarris587]

Admittedly, resolved this not too long after posting. Apparently, out of the box, this will not work with npx create storybook.

Add the following to main.ts and the types will pull in successfully

  "typescript": {
		"reactDocgen": "react-docgen-typescript",
	},