CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--html-webpack5

Storybook framework integration for HTML applications using Webpack 5 as the build system.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Storybook HTML Webpack5

Storybook HTML Webpack5 is a framework integration that enables using Storybook with HTML applications using Webpack 5 as the build system. It provides TypeScript configuration types and utilities for seamlessly integrating HTML projects with Storybook's development environment.

Package Information

  • Package Name: @storybook/html-webpack5
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/html-webpack5

Core Imports

import type { StorybookConfig, FrameworkOptions } from "@storybook/html-webpack5";

For Node utilities:

import { defineMain } from "@storybook/html-webpack5/node";

CommonJS:

const { defineMain } = require("@storybook/html-webpack5/node");

Basic Usage

Configure Storybook framework in your main.ts or main.js file:

import type { StorybookConfig } from "@storybook/html-webpack5";

const config: StorybookConfig = {
  framework: {
    name: "@storybook/html-webpack5",
    options: {
      builder: {
        useSWC: true,
      },
    },
  },
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: ["@storybook/addon-essentials"],
};

export default config;

For Node configuration with type-safe main config definition:

import { defineMain } from "@storybook/html-webpack5/node";

export default defineMain({
  framework: "@storybook/html-webpack5",
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: ["@storybook/addon-essentials"],
});

Capabilities

Configuration Types

Core TypeScript interfaces for configuring Storybook with HTML and Webpack 5.

/**
 * Main configuration interface for Storybook in main.ts files
 */
interface StorybookConfig extends 
  Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework>,
  StorybookConfigWebpack,
  StorybookConfigFramework {
  framework: FrameworkName | {
    name: FrameworkName;
    options: FrameworkOptions;
  };
  core?: StorybookConfigBase['core'] & {
    builder?: BuilderName | {
      name: BuilderName;
      options: BuilderOptions;
    };
  };
  typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> & 
    StorybookConfigBase['typescript'];
}

/**
 * Configuration options for the framework
 */
interface FrameworkOptions {
  builder?: BuilderOptions;
}

/**
 * Framework identifier type
 */
type FrameworkName = CompatibleString<'@storybook/html-webpack5'>;

/**
 * Builder identifier type  
 */
type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

Node Configuration Utilities

Helper functions for defining Storybook configuration with enhanced type safety.

/**
 * Utility function to define Storybook main configuration with TypeScript support
 * @param config - Storybook configuration object
 * @returns The same configuration object with proper typing
 */
function defineMain(config: StorybookConfig): StorybookConfig;

Usage Example:

import { defineMain } from "@storybook/html-webpack5/node";

export default defineMain({
  framework: {
    name: "@storybook/html-webpack5",
    options: {
      builder: {
        useSWC: true,
        lazyCompilation: true,
      },
    },
  },
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-docs",
  ],
  typescript: {
    check: false,
    reactDocgen: "react-docgen-typescript",
  },
});

Types

Core Configuration Types

/**
 * Main Storybook configuration interface combining base, webpack, and framework configs
 */
interface StorybookConfig extends 
  Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework>,
  StorybookConfigWebpack,
  StorybookConfigFramework {}

/**
 * Framework-specific configuration options
 */
interface FrameworkOptions {
  /** Builder configuration options */
  builder?: BuilderOptions;
}

/**
 * Framework configuration for main.ts
 */
interface StorybookConfigFramework {
  framework: FrameworkName | {
    name: FrameworkName;
    options: FrameworkOptions;
  };
  core?: StorybookConfigBase['core'] & {
    builder?: BuilderName | {
      name: BuilderName;
      options: BuilderOptions;
    };
  };
  typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> & 
    StorybookConfigBase['typescript'];
}

Framework Identifiers

/**
 * Type-safe framework name identifier
 */
type FrameworkName = CompatibleString<'@storybook/html-webpack5'>;

/**
 * Type-safe builder name identifier
 */
type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

Utility Types

/**
 * String utility type for ensuring type compatibility
 */
type CompatibleString<T extends string> = T | (string & {});

Dependency Types

This package relies on types from the following Storybook packages:

// From @storybook/builder-webpack5
interface BuilderOptions {
  useSWC?: boolean;
  lazyCompilation?: boolean;
  fsCache?: boolean;
  [key: string]: any;
}

interface StorybookConfigWebpack {
  webpackFinal?: (config: any) => any | Promise<any>;
}

interface TypescriptOptionsBuilder {
  check?: boolean;
  skipBabel?: boolean;
  reactDocgen?: string | false;
}

// From @storybook/preset-html-webpack  
interface StorybookConfigBase {
  stories: string[];
  addons?: string[];
  core?: {
    builder?: string | { name: string; options?: any };
    renderer?: string;
    [key: string]: any;
  };
  typescript?: {
    check?: boolean;
    reactDocgen?: string | false;
    reactDocgenTypescriptOptions?: any;
  };
  [key: string]: any;
}

interface TypescriptOptionsReact {
  reactDocgen?: string | false;
  reactDocgenTypescriptOptions?: any;
}

// From storybook/internal/types
type PresetProperty<T extends string> = T extends 'addons' 
  ? string[] 
  : T extends 'core' 
    ? (config: any, options: any) => Promise<any>
    : any;

docs

index.md

tile.json