Improve Storybook UX (#662)

* Intuitively sort Storybook sidebar

* Reorder addon panel

This makes Controls the first panel in the addons so it opens
automatically (previously this was a11y). Since most people should
land on the Playground story for each component, defaulting to
Controls makes the most sense.

It then has Code, A11y, and Interactions. I removed the Actions addon
because we're not using it anywhere, it was just an empty panel in
the sidebar.

Ideally I'd like the Code addon to open when you open a Default,
feature, or example story, and the Controls to open when you open
a Playground story, but this doesn't seem to be possible with the SB
API.

apps/storybook/.storybook/main.js

@@ -3,12 +3,17 @@ import {dirname, join} from 'path'
 module.exports = {
   stories: ['../../../packages/react/src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
+    {
+      name: getAbsolutePath('@storybook/addon-essentials'),
+      options: {
+        actions: false,
+      },
+    },
+    getAbsolutePath('@storybook/addon-storysource'),
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('storybook-css-modules-preset'),
-    getAbsolutePath('@storybook/addon-storysource'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
   ],
   framework: {

apps/storybook/.storybook/preview.js

@@ -1,4 +1,4 @@
-import { ThemeProvider } from '../../../packages/react/src'
+import {ThemeProvider} from '../../../packages/react/src'
 import styles from './preview.module.css'
 import '../../../packages/react/src/css/stylesheets'
 import '../../../packages/react/src/css/utilities.css'
@@ -79,4 +79,22 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  options: {
+    storySort: (a, b) => {
+      const titleCompare = a.title.localeCompare(b.title)
+
+      // Sort top level alphabetically, with nested folders below nested stories
+      if (titleCompare !== 0) {
+        return titleCompare
+      }
+
+      // Put default story above playground in the component folder
+      if (a.name === 'Default') {
+        return -1
+      }
+
+      // Sort features and examples in the order they're written
+      return 0
+    },
+  },
 }