New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,392
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-deeper-sort
Powers up stories sort by providing more levels of control.
npm install storybook-deeper-sort
Last updated 6 months ago
110
Downloads per week
Readme View on GitHub

Codecov Coverage

Storybook Deeper Sort

Provides more flexibility and more levels of control to story sort.

Table of Contents

About

This package provides a function to sort stories with an API similar to the storybooks' order array but providing more than two levels of control.

Using the built-in order array, you can have 2 levels of control:

// .storybook/preview.js

export const parameters = {
  options: {
    storySort: {
      order: ["Intro", "Pages", ["Home", "Login", "Admin"], "Components"],
    },
  },
};

The code above would generate:

Intro/
├─ Welcome
Pages/
├─ Home
├─ Login
├─ Admin
Components/
├─ PackageA/
│  ├─ A
│  ├─ B
│  ├─ C
├─ PackageB/
│  ├─ A
│  ├─ B
│  ├─ C

But what if I want all packages under Components to have C as their first story? You can achieve that using deeperSort:

// .storybook/preview.js

import deeperSort from 'storybook-deeper-sort';

export const parameters = {
  options: {
    storySort: deeperSort(['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', ["*", ["C"]]]),
    },
  },
};

The code above would generate:

Intro/
├─ Welcome
Pages/
├─ Home
├─ Login
├─ Admin
Components/
├─ PackageA/
│  ├─ C
│  ├─ A
│  ├─ B
├─ PackageB/
│  ├─ C
│  ├─ A
│  ├─ B

Installation

# npm

npm i storybook-deeper-sort --save-dev

# yarn

yarn add -D storybook-deeper-sort
Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI