Story Props Documentation Are Potentially Misleading

[kpapa05]

According to the documentation:

This would lead someone to believe they could do something like this:

const controls = {
  Color: Color3.fromRGB(0, 0, 255),
  Text: "Hello World!",
};

const story = {
  react: React,
  reactRoblox: ReactRoblox,
  controls: controls,
  story: (props: InferProps<typeof controls>) => {
    const component = (
      <frame
        AnchorPoint={new Vector2(0.5, 0.5)}
        BackgroundTransparency={1}
        Position={UDim2.fromScale(0.5, 0.5)}
        Size={UDim2.fromScale(0.5, 0.5)}
      >
        <Button Color={props.Color} Text={props.Text} />
      </frame>
    );
    return component;
  },
};

When in fact, they need to do this:

const controls = {
  Color: Color3.fromRGB(0, 0, 255),
  Text: "Hello World!",
};

const story = {
  react: React,
  reactRoblox: ReactRoblox,
  controls: controls,
  story: (props: { controls: InferProps<typeof controls> }) => {
    const component = (
      <frame
        AnchorPoint={new Vector2(0.5, 0.5)}
        BackgroundTransparency={1}
        Position={UDim2.fromScale(0.5, 0.5)}
        Size={UDim2.fromScale(0.5, 0.5)}
      >
        <Button Color={props.controls.Color} Text={props.controls.Text} />
      </frame>
    );
    return component;
  },
};

When encountering this, I personally found my way searching around the OSS server before stumbling on a completely unrelated answer which happened to have the solution. If we add some more clarity to the documentation, it would be beneficial.

[PepeElToro41]

yeah maybe it can be specified that the controls are inside props.controls.

However, if Im not missing something, InferProps infers the props argument, InferControls would infer the controls value, which is what you are trying to do there.

in any case, because the props are typed, typescript should autocomplete the keys inside, which you'd see that it has a controls key