feat: lazy compilation

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) {

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,