Utility for automatically generating Storybook controls based on Chakra UI theme component definitions. Creates interactive controls for variant, size, and colorScheme properties directly in Storybook's controls panel.
Creates Storybook ArgTypes object based on a theme component's configuration, automatically detecting available variants, sizes, and color schemes.
/**
* Create Storybook controls based on a Chakra UI theme component.
* @param theme - Chakra UI theme object with colors and components
* @param componentName - Name of the component in theme.components
* @returns ArgTypes object for variant, size, and colorScheme controls, or undefined if component not found
*/
function getThemingArgTypes<
Theme extends {
colors: Record<string, any>;
components: Record<string, any>;
},
ComponentName extends KeyOf<Theme["components"]>
>(theme: Theme, componentName: ComponentName): ArgTypes<
Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>
> | undefined;Usage Examples:
import { getThemingArgTypes } from "@chakra-ui/storybook-addon";
import { theme } from "../theme";
// Basic usage in story config
export default {
title: "Components / Forms / Button",
argTypes: getThemingArgTypes(theme, "Button"),
} as Meta;
// Combined with additional argTypes
export default {
title: "Components / Forms / Input",
argTypes: {
...getThemingArgTypes(theme, "Input"),
placeholder: { control: "text" },
isDisabled: { control: "boolean" },
},
} as Meta;
// Type-safe component name
export default {
title: "Components / Data Display / Badge",
argTypes: getThemingArgTypes(theme, "Badge"), // ComponentName is type-checked
} as Meta;The function analyzes the theme component and generates controls for:
component.variants exists, creates enum control with available variant keyscomponent.sizes exists, creates enum control with available size keyscomponent.defaultProps.colorScheme exists, creates enum control with valid color scheme keys from theme.colorsEach control uses the component's defaultProps values as default selections.
Color Scheme Validation:
The function validates color schemes by checking that color objects contain all required scale keys (50, 100, 200, 300, 400, 500, 600, 700, 800, 900).
// Example theme.colors structure that passes validation
const theme = {
colors: {
blue: {
50: "#ebf8ff",
100: "#bee3f8",
// ... all keys 200-900
900: "#1a365d",
},
red: {
50: "#fed7d7",
// ... incomplete scale - will be filtered out
},
},
components: {
Button: {
variants: { solid: {}, outline: {} },
sizes: { sm: {}, md: {}, lg: {} },
defaultProps: {
variant: "solid",
size: "md",
colorScheme: "blue",
},
},
},
};
// This generates controls for:
// - variant: ["solid", "outline"] with default "solid"
// - size: ["sm", "md", "lg"] with default "md"
// - colorScheme: ["blue"] with default "blue" (red filtered out)type ThemingArgTypeKey = "variant" | "size" | "colorScheme";
type KeyOf<T> = [T] extends [never]
? never
: T extends object
? Extract<keyof T, string>
: never;