Make args and argTypes available in meta.json

[madebyherzblut]

Is your feature request related to a problem? Please describe.

I find the Controls add-on very useful and am now exploring the possibility to generate snapshots for all available arg combinations (e.g., Button component with three variants + disabled).

This is an example of my current Button story:

import type { Story, StoryDefault } from "@ladle/react";
import { Button, ButtonProps } from "../index";

export default {
  title: "Core / Button",
} satisfies StoryDefault;

export const Index: Story<{
  disabled: boolean;
  minimal: boolean;
  variant: ButtonProps["variant"];
}> = (props) => <Button {...props}>Button</Button>;

Index.args = {
  variant: undefined,
  disabled: false,
  minimal: false,
};

Index.argTypes = {
  variant: {
    options: ["default", "primary", "danger"],
    control: { type: "inline-radio" },
  }
};

Describe the solution you'd like

Ideally, the args and argTypes of each story would be available in meta.json. This would allow me to create snapshots for every combination automatically by passing the control via query parameters (e.g., ?arg-variant=primary&arg-disabled=true).

{
  "about": {
    "homepage": "https://www.ladle.dev",
    "github": "https://github.com/tajo/ladle",
    "version": 1
  },
  "stories": {
    "core--button--index": {
      "name": "Index",
      "levels": ["Core", "Button"],
      "locStart": 8,
      "locEnd": 12,
      "filePath": "src/button/__stories__/index.stories.tsx",
      "meta": {},
      "args": {
        "variant": null,
        "disabled": false,
        "minimal": false
      },
      "argTypes": {
        "variant": {
          "options": ["default", "primary", "danger"],
          "control": { "type": "inline-radio" }
        }
      }
    }
  }
}

Describe alternatives you've considered

• Duplicate the available arg information and make it available via the meta object
• Add all necessary variants/combinations to each story
• Add stories for all relevant variants/combinations

[tajo]

Good question, I would like to use something like this too. The issue is that args / argTypes are not statically analyzable and they need to be executed (if we want to stay Storybook compatible). So you can't just simply export them through meta.json. There was a similar discussion about this here: #127 (comment)

I see two solutions:

• propose a new (different) format for controls that will be strictly static
• add some argStatic mode that would attempt to statically analyze args/argTypes and throw an error if not possible Your example would work just fine:

Index.argTypes = {
  variant: {
    options: ["default", "primary", "danger"],
    control: { type: "inline-radio" },
  }
};

however, this would fail

const variant = {
  options: ["default", "primary", "danger"],
  control: { type: "inline-radio" },
}
Index.argTypes = { variant };

Does it make sense?

[madebyherzblut]

Thanks for the link @tajo–I always assumed args/argTypes are statically analyzable as well and it would be easy to export them. Are there any use cases where those are not strictly static?

Personally, I think the CSF compatibility of Ladle is a great feature and it is worth the wait until a mutual standard has been set.

[tajo]

Are there any use cases where those are not strictly static?

They could be static, it's all simple arrays/objects but it's not been enforced in Storybook ecosystem (same with story titles, which Ladle actually strictly enforces and diverges from Storybook on that since it's critical for code-splitting and other features). Typically, devs assign args into a variable so they can spread it out over multiple stories.

[tajo]

Closing, since this is not technically feasible. Anyway, we might have some better & analyzable controls API in the future.