CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--builder-webpack4

Webpack 4-based builder for Storybook that provides framework-agnostic build engine for preview iframe compilation and bundling.

91

1.01x
Overview
Eval results
Files

rubric.jsonevals/scenario-10/

{
  "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-webpack4

tile.json