Storybook Changelog Addon

A Storybook addon that displays changelog files as a tab in the Storybook UI. Inspired by storybook-addon-changelog-viewer but with enhanced parsing and styling.

Features

• 📝 Display changelog files in a dedicated Storybook tab
• 🎨 Beautiful, responsive UI with table of contents
• 📊 Summary statistics (versions, total changes)
• 🔍 Automatic parsing of standard changelog formats
• 🎯 Smooth scrolling navigation
• 🌙 Automatic light/dark theme support
• ✨ Support for all standard changelog types (Added, Changed, Fixed, etc.)

Installation

npm install storybook-addon-changelog --save-dev
# or
yarn add storybook-addon-changelog --dev

Setup

1. Add the addon to your .storybook/main.js:

module.exports = {
  addons: [
    // other addons...
    'storybook-addon-changelog',
  ],
};

2. Import your changelog file and add it to story parameters:

import changelog from './CHANGELOG.md';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    changelog: changelog,
  },
};

Usage Examples

Component-level changelog

// Button.stories.js
import changelog from './CHANGELOG.md';

export default {
  title: 'Components/Button',
  component: Button,
  parameters: {
    changelog: changelog,
  },
};

Global changelog

You can also set a global changelog in .storybook/preview.js:

// .storybook/preview.js
import changelog from '../CHANGELOG.md';

export const parameters = {
  changelog: changelog,
};

Story-specific changelog

Override the changelog for specific stories:

export const SpecialButton = {
  args: { variant: 'special' },
  parameters: {
    changelog: specialButtonChangelog,
  },
};

Changelog Format

The addon supports standard changelog formats. Here's an example:

# Component Changelog

## [2.1.0] - 2024-01-15

### Added
- New `variant` prop with support for primary, secondary, and danger styles
- Loading state with spinner animation
- Keyboard navigation improvements

### Changed
- Updated default padding for better visual balance
- Improved hover and focus states

### Fixed
- Fixed accessibility issues with screen readers
- Resolved button text overflow in small containers

## [2.0.0] - 2023-12-01

### Added
- TypeScript support with full type definitions
- New size variants: small, medium, large

### Changed
- **BREAKING**: Renamed `type` prop to `variant`
- Updated color palette to match design system

### Removed
- **BREAKING**: Removed deprecated `color` prop

### Fixed
- Fixed button not respecting disabled state in forms

Supported Change Types

The addon recognizes and styles these change types:

• ✨ Added - New features
• 🔄 Changed - Changes in existing functionality
• ⚠️ Deprecated - Soon-to-be removed features
• 🗑️ Removed - Removed features
• 🐛 Fixed - Bug fixes
• 🔒 Security - Security improvements

Development

To develop this addon:

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build the addon
npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT