Merge pull request #6858 from storybooks/tech/remove-sort-docs

REMOVE `sortStoriesByKind` from docs & implementation

MIGRATION.md

@@ -119,6 +119,29 @@ Please refer to the [current custom webpack documentation](https://github.com/st
 
 Storybook 5.0 includes sweeping UI changes as well as changes to the addon API and custom webpack configuration. We've tried to keep backwards compatibility in most cases, but there are some notable exceptions documented below.
 
+### sortStoriesByKind
+
+In Storybook 5.0 we changed a lot of UI related code, and 1 oversight caused the `sortStoriesByKind` options to stop working.
+We're working on providing a better way of sorting stories for now the feature has been removed. Stories appear in the order they are loaded.
+
+If you're using webpack's `require.context` to load stories, you can sort the execution of requires:
+
+```js
+var context = require.context('../stories', true, /\.stories\.js$/);
+var modules = context.keys();
+
+// sort them
+var sortedModules = modules.slice().sort((a, b) => {
+  // sort the stories based on filename/path
+  return a < b ? -1 : (a > b ? 1 : 0);
+});
+
+// execute them
+sortedModules.forEach((key) => {
+  context(key);
+});
+```
+
 ## Webpack config simplification
 
 The API for custom webpack configuration has been simplifed in 5.0, but it's a breaking change. Storybook's "full control mode" for webpack allows you to override the webpack config with a function that returns a configuration object.

addons/options/README.md

@@ -74,11 +74,6 @@ addParameters({
      * @type {Boolean}
      */
     addonPanelInRight: false,
-    /**
-     * sorts stories
-     * @type {Boolean}
-     */
-    sortStoriesByKind: false,
     /**
      * regex for finding the hierarchy separator
      * @example:

docs/src/pages/configurations/options-parameter/index.md

@@ -37,11 +37,6 @@ addParameters({
      * @type {('bottom'|'right')}
      */
     panelPosition: 'bottom',
-    /**
-     * sorts stories
-     * @type {Boolean}
-     */
-    sortStoriesByKind: false,
     /**
      * regex for finding the hierarchy separator
      * @example:

examples/cra-kitchen-sink/.storybook/config.js

@@ -9,7 +9,6 @@ addParameters({
     showAddonsPanel: true,
     showSearchBox: false,
     panelPosition: 'right',
-    sortStoriesByKind: false,
     hierarchySeparator: /\./,
     hierarchyRootSeparator: /\|/,
     enableShortcuts: true,

lib/api/src/modules/layout.ts

@@ -23,7 +23,6 @@ export interface UI {
   name?: string;
   url?: string;
   enableShortcuts: boolean;
-  sortStoriesByKind: boolean;
   sidebarAnimations: boolean;
 }
 
@@ -132,7 +131,6 @@ const checkDeprecatedLayoutOptions = (options: Options) => {
 const initial: SubState = {
   ui: {
     enableShortcuts: true,
-    sortStoriesByKind: false,
     sidebarAnimations: true,
   },
   layout: {

lib/api/src/tests/layout.test.js

@@ -16,7 +16,6 @@ describe('layout API', () => {
       currentState = {
         ui: {
           enableShortcuts: true,
-          sortStoriesByKind: false,
           sidebarAnimations: true,
         },
         layout: {