P-Element Storybook Plugin

A Storybook framework plugin for p-elements, enabling seamless integration of p-element web components in Storybook.

Features

• 🧩 Component Support: Full support for p-element web components
• 📖 Auto Documentation: Automatic source code extraction for Docs tab
• 🎨 TypeScript: Complete TypeScript support with proper type definitions
• ⚡ Vite Integration: Optimized build configuration with Vite
• 🔄 Portable Stories: Support for portable stories across different environments

Installation

npm install --save-dev p-element-storybook-plugin

Configuration

Add the framework to your .storybook/main.ts:

import type { StorybookConfig } from '@storybook/html-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  framework: {
    name: 'p-element-storybook-plugin',
    options: {}
  },
  addons: [
    '@storybook/addon-docs'
  ]
};

export default config;

Usage

Writing Stories

import type { Meta, StoryObj } from 'p-element-storybook-plugin';
import './my-component'; // Import your p-element component

type Args = {
  name: string;
  disabled: boolean;
};

const meta: Meta<Args> = {
  title: 'Components/MyComponent',
  tags: ['autodocs'],
  argTypes: {
    name: { control: 'text' },
    disabled: { control: 'boolean' }
  },
  render: (args: Args) => <my-component name={args.name} disabled={args.disabled ? "disabled" : undefined}></my-component>,
};

export default meta;
type Story = StoryObj<Args>;

export const Default: Story = {
  args: {
    name: 'Hello World',
    disabled: false
  }
};

Component Types

The plugin supports multiple component types:

1. String Templates: Simple HTML strings with argument interpolation
2. HTML Elements: Direct HTMLElement instances
3. Function Components: Functions that return VNode

The plugin uses tsdown for building both ESM and CJS outputs with TypeScript declaration files.

Development

Building

npm run build

Watching for Changes

npm run watch