New
I18n with StorybookAutomate with Chromatic
Star74,141
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
storybook-deeper-sort
Powers up stories sort by providing more levels of control.
npm install storybook-deeper-sort
Last updated about 2 months ago
60
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,777 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI