From aba9c98a933887557363a5205cb893567c146aa3 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Sun, 17 Apr 2022 16:19:59 -0400
Subject: [PATCH] feat: lazy compilation

---
 packages/react/.storybook/main.js    |  9 ++++++++-
 packages/react/.storybook/preview.js | 17 +++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
index 89596099c693..69b6d4b3a11a 100644
--- a/packages/react/.storybook/main.js
+++ b/packages/react/.storybook/main.js
@@ -85,10 +85,17 @@ module.exports = {
     '@storybook/addon-a11y',
   ],
   core: {
-    builder: 'webpack5',
+    builder: {
+      name: 'webpack5',
+      options: {
+        lazyCompilation: true,
+        fsCache: true,
+      },
+    },
   },
   features: {
     previewCsfV3: true,
+    storyStoreV7: true,
   },
   stories,
   webpack(config) {
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
index cb51b307319b..241e4e63c926 100644
--- a/packages/react/.storybook/preview.js
+++ b/packages/react/.storybook/preview.js
@@ -12,7 +12,6 @@ import { white, g10, g90, g100 } from '@carbon/themes';
 import React from 'react';
 import { breakpoints } from '@carbon/layout';
 import { GlobalTheme } from '../src';
-import { addParameters } from '@storybook/react';
 
 export const globalTypes = {
   locale: {
@@ -131,20 +130,14 @@ export const parameters = {
       },
     },
   },
-};
-
-addParameters({
   options: {
     storySort: (storyA, storyB) => {
-      // By default, sort by the story "kind". The "kind" refers to the
-      // top-level title of the story, either through Component Story Format
-      // with the default export, or the `storiesOf('kind', module)` format
-      if (storyA[1].kind !== storyB[1].kind) {
-        return storyA[1].kind.localeCompare(storyB[1].kind);
+      if (storyA.title !== storyB.title) {
+        return storyA.title.localeCompare(storyB.title);
       }
 
-      const idA = storyA[0];
-      const idB = storyB[0];
+      const idA = storyA.id;
+      const idB = storyB.id;
 
       // To story the stories, we first build up a list of matches based on
       // keywords. Each keyword has a specific weight that will be used to
@@ -199,7 +192,7 @@ addParameters({
       return idA.localeCompare(idB);
     },
   },
-});
+};
 
 configureActions({
   depth: 3,