Webpack 4-based builder for Storybook that provides framework-agnostic build engine for preview iframe compilation and bundling.
91
{
"context": "This criteria evaluates how well the engineer uses Storybook's Controls Addon to create interactive component stories. The focus is on proper usage of argTypes configuration, control type selection, and default args setup.",
"type": "weighted_checklist",
"checklist": [
{
"name": "ArgTypes Configuration",
"description": "The story file exports a default meta object that includes an 'argTypes' property properly configuring control types for component props. Each argType should specify an appropriate 'control' property with the correct type (text, number, boolean, select, multi-select, or range). ArgTypes may also include 'description' fields to document what each property does.",
"max_score": 25
},
{
"name": "Control Descriptions",
"description": "ArgTypes include helpful 'description' properties that explain what each control does, improving the documentation and usability of the component in Storybook.",
"max_score": 5
},
{
"name": "Control Type Selection",
"description": "Appropriate control types are used for each property: 'text' for title/description/imageUrl, 'number' for price, 'boolean' for inStock, 'select' with options for category, 'multi-select' or 'check' with options for tags, and 'range' with min/max for rating and discount.",
"max_score": 25
},
{
"name": "Range Constraints",
"description": "The 'range' control type is used for rating and discount properties with proper min/max constraints defined (rating: min 1, max 5; discount: min 0, max 100). This can be configured in the argTypes control property.",
"max_score": 15
},
{
"name": "Select Options",
"description": "The 'select' control for category includes the options array with all four required values: 'Electronics', 'Clothing', 'Books', 'Home & Garden'. The multi-select control for tags includes all five required options: 'New', 'Sale', 'Featured', 'Limited Edition', 'Best Seller'.",
"max_score": 15
},
{
"name": "Default Args",
"description": "The default meta export or individual stories include an 'args' property with sensible default values for all component properties, enabling immediate interaction with controls.",
"max_score": 10
},
{
"name": "Story Variations",
"description": "Multiple story exports are created that override args to demonstrate different states (e.g., out of stock, premium product). Each story should export a plain object or use the story function pattern with custom args.",
"max_score": 5
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-storybook--builder-webpack4evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10