Storybook 7 (#6150)

* Storybook 7

Author: snowystinger

.chromatic-fc/.parcelrc

@@ -0,0 +1,11 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "transformers": {
+    "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}

.chromatic-fc/custom-addons/chromatic/index.js

@@ -1,5 +1,5 @@
 import {expressThemes, locales, scales, themes} from '../../constants';
-import {makeDecorator} from '@storybook/addons';
+import {makeDecorator} from '@storybook/preview-api';
 import {Provider, View} from '@adobe/react-spectrum';
 import React, {useEffect} from 'react';
 import './disableAnimations.css';

.chromatic-fc/main.js

@@ -1,9 +1,10 @@
 
 module.exports = {
-  core: {
-    builder: "storybook-builder-parcel",
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
   },
-  stories: ['../packages/**/chromatic/**/*.chromatic-fc.{js,jsx,ts,tsx}'],
+  stories: ['../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}'],
   addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
     '@storybook/addon-a11y'

.chromatic-fc/manager.js

@@ -1,6 +1,8 @@
-import addons from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 
 addons.setConfig({
-  showRoots: false,
-  enableShortcuts: false
+  enableShortcuts: false,
+  sidebar: {
+    showRoots: false,
+  }
 });

.chromatic-fc/preview.js

@@ -12,10 +12,11 @@ configureActions({
 
 export const parameters = {
   options: {
-    storySort: (a, b) =>
-      a[1].kind === b[1].kind
+    storySort: (a, b) => {
+      return a.title === b.title
         ? 0
-        : a[1].id.localeCompare(b[1].id, undefined, {numeric: true})
+        : a.id.localeCompare(b.id, undefined, { numeric: true });
+    }
   },
   a11y: {},
   layout: 'fullscreen',

.chromatic/.parcelrc

@@ -0,0 +1,11 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "transformers": {
+    "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}

.chromatic/custom-addons/chromatic/index.js

@@ -1,5 +1,5 @@
 import {expressThemes, locales, scales, themes} from '../../constants';
-import {makeDecorator} from '@storybook/addons';
+import {makeDecorator} from '@storybook/preview-api';
 import {Provider, View} from '@adobe/react-spectrum';
 import React, {useEffect} from 'react';
 import './disableAnimations.css';

.chromatic/main.js

@@ -1,9 +1,10 @@
 
 module.exports = {
-  core: {
-    builder: "storybook-builder-parcel",
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
   },
-  stories: ['../packages/**/chromatic/**/*.chromatic.{js,jsx,ts,tsx}'],
+  stories: ['../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
     '@storybook/addon-a11y'

.chromatic/manager.js

@@ -1,6 +1,8 @@
-import addons from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 
 addons.setConfig({
-  showRoots: false,
-  enableShortcuts: false
+  enableShortcuts: false,
+  sidebar: {
+    showRoots: false,
+  }
 });

.chromatic/preview.js

@@ -12,7 +12,11 @@ configureActions({
 
 export const parameters = {
   options: {
-    storySort: (a, b) => a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+    storySort: (a, b) => {
+      return a.title === b.title
+        ? 0
+        : a.id.localeCompare(b.id, undefined, { numeric: true });
+    }
   },
   a11y: {},
   layout: 'fullscreen'