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

{
  "context": "This criteria evaluates how well the engineer uses @storybook/theming package to create custom themes with branding, colors, and typography, supporting both light and dark variants.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Theme creation import",
      "description": "Uses the create() function from @storybook/theming package to create theme objects",
      "max_score": 20
    },
    {
      "name": "Branding properties",
      "description": "Correctly sets brandTitle, brandUrl, and brandImage properties in the theme object for company branding",
      "max_score": 15
    },
    {
      "name": "Color customization",
      "description": "Correctly sets colorPrimary and colorSecondary properties in the theme object with the specified hex color values",
      "max_score": 15
    },
    {
      "name": "Typography configuration",
      "description": "Correctly sets fontBase and fontCode properties in the theme object with the specified font families",
      "max_score": 15
    },
    {
      "name": "Light theme variant",
      "description": "Creates a light theme using create() with base: 'light' and correctly sets appBg to '#FFFFFF' and textColor to '#1A1A1A'",
      "max_score": 15
    },
    {
      "name": "Dark theme variant",
      "description": "Creates a dark theme using create() with base: 'dark' and correctly sets appBg to '#1A1A1A' and textColor to '#F5F5F5'",
      "max_score": 15
    },
    {
      "name": "Theme object structure",
      "description": "Returns properly structured theme objects that can be used in Storybook's parameters.theme configuration",
      "max_score": 5
    }
  ]
}

Install with Tessl CLI

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

tile.json