Nightly Piano Man

    storybook-deeper-sort

    0.0.3 • Public • Published

    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 -D storybook-deeper-sort
    
    # yarn
    
    yarn add -D storybook-deeper-sort

    Commands

    test

    # run tests
    yarn test

    lint

    # run linting
    yarn lint

    Install

    npm i storybook-deeper-sort

    DownloadsWeekly Downloads

    232

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    6.76 kB

    Total Files

    6

    Last publish

    Collaborators

    • alex1302