From 9bd7317796a3b52ea89ae6a6aa8471a977beb43e Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 19 Jan 2023 15:31:40 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(doc)=20sort=20docs=20in=20the=20St?=
 =?UTF-8?q?orybook's=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  9 ---------
 packages/react/.storybook/preview.js  | 24 ++++++++++++++++++++++++
 2 files changed, 24 insertions(+), 9 deletions(-)
 delete mode 100644 packages/react/.storybook/preview.cjs
 create mode 100644 packages/react/.storybook/preview.js

diff --git a/packages/react/.storybook/preview.cjs b/packages/react/.storybook/preview.cjs
deleted file mode 100644
index 48afd56..0000000
--- a/packages/react/.storybook/preview.cjs
+++ /dev/null
@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
\ No newline at end of file
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
new file mode 100644
index 0000000..3b8bb42
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file