tessl/npm-chakra-ui--storybook-addon

The official Storybook addon for Chakra UI providing theming, color mode, and direction controls

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Theming ArgTypes

Name: tessl/npm-chakra-ui--storybook-addon
Author: tessl

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.

Capabilities

Generate Theming ArgTypes

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;

Behavior Details

The function analyzes the theme component and generates controls for:

Variant Control: If component.variants exists, creates enum control with available variant keys
Size Control: If component.sizes exists, creates enum control with available size keys
ColorScheme Control: If component.defaultProps.colorScheme exists, creates enum control with valid color scheme keys from theme.colors

Each 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)

Types

type ThemingArgTypeKey = "variant" | "size" | "colorScheme";

type KeyOf<T> = [T] extends [never]
  ? never
  : T extends object
  ? Extract<keyof T, string>
  : never;

Install with Tessl CLI

npx tessl i tessl/npm-chakra-ui--storybook-addon

docs

tessl/npm-chakra-ui--storybook-addon