Refining "args" type definition - Storybook 7

Readme.md

The current "args" configuration in Storybook for the Button component lacks strict type enforcement, leading to potential inconsistencies. This gist introduces a refined type definition, ensuring accurate prop validation and a more robust development experience.

Button.stories.tsx

import { Button } from "./Button";
import { Meta, StoryObj as _StoryObj } from "@storybook/react";
import React from "react";

const meta: Meta<typeof Button> = {
  title: "Button",
  args: {
    children: "Button",
  }
};

export default meta;

interface Story extends _StoryObj<typeof Button> {
  args: React.ComponentProps<typeof Button>;
}

export const Example: Story = {
  args: {
    ...meta.args,
    size: "small"
  }
};


export const Example2: Story = {
  args: { // Error here if required props is missing
    ...meta.args,
  }
};

Button.tsx

type ButtonProps = React.ComponentProps<"button"> & {
  size: "small" | "medium" | "large";
};

const sizeToPadding: Record<ButtonProps["size"], string> = {
  small: "0.5rem 1rem",
  medium: "0.75rem 1.5rem",
  large: "1rem 2rem"
};

export function Button({ size, style, ...rest }: ButtonProps) {
  return (
    <button
      {...rest}
      style={{
        ...style,
        padding: sizeToPadding[size]
      }}
    />
  );
}