Webpack 4-based builder for Storybook that provides framework-agnostic build engine for preview iframe compilation and bundling.
91
{
"context": "This criteria evaluates the engineer's proficiency in using Storybook's Addon System to create a custom addon with panel registration, event tracking, and manager-preview communication. The focus is on proper usage of Storybook's addon APIs, including the Manager API, Preview API, and channel-based communication system.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Addon Registration",
"description": "Uses addons.register() from @storybook/manager-api to properly register the addon with a unique addon ID",
"max_score": 15
},
{
"name": "Panel Registration",
"description": "Uses addons.add() to register a panel with type PANEL, including proper panel configuration (title, render function)",
"max_score": 20
},
{
"name": "Channel Communication",
"description": "Uses addons.getChannel() to access the communication channel and properly listens to events using channel.on() for story rendering and args updates",
"max_score": 25
},
{
"name": "Event Handling",
"description": "Correctly listens to STORY_RENDERED and UPDATE_STORY_ARGS (or similar relevant events) to track story views and args changes",
"max_score": 20
},
{
"name": "Panel Component",
"description": "Implements a functional panel component that renders analytics data, using proper React component patterns if using React, or alternative rendering approach",
"max_score": 10
},
{
"name": "State Management",
"description": "Properly manages analytics state (story views, args updates) with appropriate data structures and updates the UI when data changes",
"max_score": 10
}
]
}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