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-2/

{
  "context": "This criteria evaluates how well the engineer uses Storybook's Args System to create a dynamic, interactive component story with proper argument configuration, control generation, and meta setup.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Meta export configuration",
      "description": "Story file includes a proper default export with Meta configuration that includes the component reference and title. Must use 'export default' with 'component' property set.",
      "max_score": 15
    },
    {
      "name": "Args definition",
      "description": "Defines args at either the meta level or story level to specify default values for button properties (label, variant, size, disabled). Uses 'args' property in meta or story configuration.",
      "max_score": 20
    },
    {
      "name": "ArgTypes configuration",
      "description": "Uses 'argTypes' to configure control types for interactive UI generation. Should specify control types like 'text', 'select', 'boolean', or 'radio' for appropriate properties with options for select/radio controls.",
      "max_score": 25
    },
    {
      "name": "Action handler setup",
      "description": "Integrates action logging for the onClick handler using the action() function from @storybook/addon-actions. The action should be properly configured in args or argTypes.",
      "max_score": 15
    },
    {
      "name": "Story exports",
      "description": "Exports at least one named story using Component Story Format (CSF). Story should be a named export that demonstrates the button with specific args or uses the default args from meta.",
      "max_score": 15
    },
    {
      "name": "Control type accuracy",
      "description": "Uses appropriate control types for each argument: text/string controls for label, select/radio for variant and size enums, boolean for disabled state. Control options properly define the available choices for select controls.",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-storybook--builder-webpack4

tile.json