Webpack 4-based builder for Storybook that provides framework-agnostic build engine for preview iframe compilation and bundling.
91
{
"context": "This criteria evaluates how effectively the engineer uses Storybook's Globals System to implement multi-language support. It focuses on proper usage of globalTypes for defining language options, initialGlobals for setting defaults, useGlobals() hook for accessing state in stories, and toolbar integration.",
"type": "weighted_checklist",
"checklist": [
{
"name": "globalTypes Configuration",
"description": "Uses globalTypes in preview configuration to define the language global with name, description, defaultValue, and toolbar configuration including icon and items array with language options (English, Spanish, French).",
"max_score": 30
},
{
"name": "initialGlobals Setup",
"description": "Uses initialGlobals in preview configuration to set the default language to English, ensuring the language state is initialized correctly when Storybook loads.",
"max_score": 15
},
{
"name": "useGlobals Hook",
"description": "Uses the useGlobals() hook from @storybook/preview-api or @storybook/react within story components or decorators to access the current language global value.",
"max_score": 25
},
{
"name": "Toolbar Integration",
"description": "Configures the toolbar property in globalTypes with appropriate settings (type: 'radio' or similar, icon, items with value/title pairs) to create a functional language selector in the Storybook toolbar.",
"max_score": 15
},
{
"name": "Global State Usage",
"description": "Correctly retrieves and uses the language global value from globals object (e.g., globals.language or similar) to conditionally render the appropriate translations in both greeting card and button stories.",
"max_score": 15
}
]
}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