prantlf / storybook-multilevel-sort Goto Github PK

When running Storybook with storybook-multilevel-sort on a Safari v14 browser, the error at the bottom of this post is shown.

The issue is simple - Safari v14 doesn't have an object.hasOwn() method.

It's pretty easy to workaround by adding the following polyfill before loading storybook-multilevel-sort

('hasOwn' in Object) || (Object.hasOwn = Object.call.bind(Object.hasOwnProperty));

The solution is to use Object.hasOwnProperty() instead of Object.hasOwn() in the following code

I'd be happy to have the code authors make this change, or I could issue a pull request. The fix doesn't appear to cause any backward compatibility issues.

Here's the full text of the error in case someone lands on this issue from a search. Also attached a screen shot of how this looks on a Safari v14 browser.

Error sorting stories with sort parameter function storySort(story1, story2) {
      return Object(storybook_multilevel_sort__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])(order, story1, story2);
    }:

> Object.hasOwn is not a function. (In 'Object.hasOwn(obj, key)', 'Object.hasOwn' is undefined)

Are you using a V7-style sort function in V6 compatibility mode?

More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort

@prantlf Excellent package, thank you for this. It works well, I just had one question regarding to the "fallback sort":

Can be sorted according to this request:

1. Elements before Components
2. Default stories before the others
3. Otherwise alphabetically

Is it possible to configure the fallback sort to be the order of stories defined in the file, matching the Storybook default, instead of alphabetically?

Hi!

Thanks for the great plugin! 🙏

FYI, I'm seeing an error when when storybook is configured to use config.options.storyStoreV7:

Are you using a V6-style sort function in V7 mode?

When I remove the storyStoreV7 storybook builds fine.

const config = {
  framework: '@storybook/react',

  core: {
    builder: 'webpack5',
  },

  features: {
    /** Configures Storybook to load stories on demand, rather than during boot up */
    storyStoreV7: true,
  },
};

export default config;

> start-storybook -p 6006 --no-open

info @storybook/react v6.5.14
info
info => Loading presets
info => Serving static files from ././.storybook/assets at /
info => Loading custom manager config
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using default Webpack5 setup
info => Loading custom manager config
/my-project/node_modules/@storybook/store/dist/cjs/sortStories.js:52
    throw new Error((0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    Error sorting stories with sort parameter ", ":\n\n    > ", "\n    \n    Are you using a V6-style sort function in V7 mode?\n\n    More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort\n  "])), storySortParameter, err.message));
          ^

Error: Error sorting stories with sort parameter (story1, story2) => sort(order, story1, story2):

> sort is not defined

Are you using a V6-style sort function in V7 mode?

More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort
    at sortStoriesV7 (/my-project/node_modules/@storybook/store/dist/cjs/sortStories.js:52:11)
    at StoryIndexGenerator.sortStories (/my-project/node_modules/@storybook/core-server/dist/cjs/utils/StoryIndexGenerator.js:164:32)
    at StoryIndexGenerator.getIndex (/my-project/node_modules/@storybook/core-server/dist/cjs/utils/StoryIndexGenerator.js:178:18)
    at /my-project/node_modules/@storybook/core-server/dist/cjs/dev-server.js:117:24

Node.js v18.12.1
npm ERR! Lifecycle script `storybook` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @[email protected]
npm ERR!   at location: /my-project/apps/storybook

When autodocs uses the default value ('tags'), groups with stories that have tags: ['autodocs'] are sorted above other groups, ignoring the order specified in storyOrder.

To reproduce:
Make the following changes:
Header.stories.js:

Main.js

Expected result:
Articles
Elements
Components

Actual result:
Articles
Components
Elements

This saved so much time for me! 🚀

I was thinking that it would be nice for the wild selector to go to any level. Let's say I want Playground story first on any level.

Right now I have to do this:

'*': {
    playground: null,
    '*': {
      playground: null,
    },
  },

but once I introduce a new (deeper) level, this sorter won't work for it anymore

Hello, I'm using this library in a Storybook project. The library is imported as described in the README and it works as expected.

At the same time, there are Cypress tests running against the Storybook website. Since the storybook-multilevel-sort library is used Cypress tests are failing.

Cypress dashboard opens regularly, once a test is selected to be run, effect is that No tests found. Cypress could not detect tests in this file. and the output in the Cypress window is the following

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
    at EventEmitter.handler (/Users/xxxxxxxxx/Library/Caches/Cypress/9.5.3/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:69:27)
    at EventEmitter.emit (node:events:394:28)
    at ChildProcess.<anonymous> (/Users/xxxxxxxxx/Library/Caches/Cypress/9.5.3/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
    at ChildProcess.emit (node:events:394:28)
    at emit (node:internal/child_process:920:12)
    at processTicksAndRejections (node:internal/process/task_queues:84:21)

I was thinking to use babel in cypress plugin configuration, but this makes no sense since the code with the import lives in Storybook files and not in Cypress files or tests files.
It is not super clear what to try to babelify in the process, since Cypress tests are independent by Storybook, or maybe I'm not seeing something obvious?

Thanks for the support

Hey @prantlf !
I'm one of the Storybook maintainers. I focus primarily on documentation and community outreach. I'm opening up this issue and letting you know that the Storybook API for building addons is currently being updated to factor in the changes introduced by the upcoming 7.0 release. If you're interested in making the required changes to help the community from benefiting from using your addon, we've prepared an abridged guide for the required changes here, and if you have any questions or issues, please reach out to us in the #prerelease channel in our Discord Server.

Hope you have a great day!

Stay safe