📝(doc) sort docs in the Storybook's sidebar

Previously the docs order was defined by the default behavior of
Storybook: discovery order. But, in our situation we want the
"Getting Started" part to appear above "Components", and "Doc"
above any other stories. So we needed to create a custom sort callback.
In order to make this storySort callback to be taken into account by Storybook
it was needed to rename the file to preview.js. Strange but .. meh.

packages/react/.storybook/preview.cjs

@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}

packages/react/.storybook/preview.js

@@ -0,0 +1,24 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: (a, b) => {
+      const roots = ['Getting Started', 'Components'];
+
+      const aParts = a.title.split('/');
+      const bParts = b.title.split('/');
+      if (aParts[0] !== bParts[0]) {
+        return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]);
+      }
+      if (aParts[1] !== bParts[1]) {
+        return aParts[1].localeCompare(bParts[1]);
+      }
+      return 0;
+    }
+  }
+}