refactor(storybook): update storybook and sb badge add-on to latest v…

…ersions (#863)

* fix(sb): update packages and fix main file

* refactor(storybook): upgrade storybook to the latest version and fix add-ons bug

.storybook/main.js

@@ -1,3 +1,4 @@
+import { dirname, join } from "path";
 const { plugins } = require("axe-core");
 
 module.exports = {
@@ -11,19 +12,19 @@ module.exports = {
   },
 
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-a11y",
-    "@storybook/react",
-    "storybook-addon-pseudo-states",
-    "@geometricpanda/storybook-addon-badges",
-    "@storybook/addon-webpack5-compiler-swc",
-    "@chromatic-com/storybook",
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/react"),
+    getAbsolutePath("storybook-addon-pseudo-states"),
+    getAbsolutePath("@geometricpanda/storybook-addon-badges"),
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    getAbsolutePath("@chromatic-com/storybook"),
   ],
 
   framework: {
-    name: "@storybook/react-webpack5",
+    name: getAbsolutePath("@storybook/react-webpack5"),
     options: {
       builder: {
         useSWC: true,
@@ -57,4 +58,10 @@ module.exports = {
   typescript: {
     reactDocgen: "react-docgen",
   },
+
+  docs: {},
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/preview.js

@@ -38,6 +38,7 @@ const preview = {
       },
     },
   },
+
   parameters: {
     // Removes the change background button since it's controlled by the theme toggle
     backgrounds: { disable: true },
@@ -95,5 +96,7 @@ const preview = {
       },
     },
   },
+
+  tags: ["!autodocs"],
 };
 export default preview;

package.json

@@ -6,13 +6,13 @@
   "devDependencies": {
     "@chanzuckerberg/axe-storybook-testing": "^8.2.0",
     "@chanzuckerberg/story-utils": "^4.0.8",
-    "@chromatic-com/storybook": "^1",
+    "@chromatic-com/storybook": "^2.0.2",
     "@czi-sds/components": "workspace:^",
     "@czi-sds/data-viz": "workspace:^",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@geometricpanda/storybook-addon-badges": "^2.0.2",
+    "@geometricpanda/storybook-addon-badges": "^2.0.5",
     "@mui/base": "^5.0.0-beta.30",
     "@mui/icons-material": "^5.15.3",
     "@mui/lab": "^5.0.0-alpha.159",
@@ -22,21 +22,23 @@
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-a11y": "^8.3.4",
+    "@storybook/addon-actions": "^8.3.4",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-interactions": "^8.3.4",
+    "@storybook/addon-links": "^8.3.4",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/components": "^8.2.9",
-    "@storybook/core-events": "^8.2.9",
-    "@storybook/manager-api": "^8.2.9",
-    "@storybook/preview-api": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-webpack5": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/blocks": "^8.3.4",
+    "@storybook/components": "^8.3.4",
+    "@storybook/core-events": "^8.3.4",
+    "@storybook/manager-api": "^8.3.4",
+    "@storybook/preview-api": "^8.3.4",
+    "@storybook/react": "^8.3.4",
+    "@storybook/react-webpack5": "^8.3.4",
+    "@storybook/test": "^8.3.4",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.2.9",
+    "@storybook/theming": "^8.3.4",
+    "@storybook/types": "^8.3.4",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@swc/plugin-emotion": "^4.0.1",
@@ -81,7 +83,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.23.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "lerna": "^8.0.1",
@@ -103,7 +105,7 @@
     "sass": "^1.70.0",
     "sass-loader": "^14.1.0",
     "simplex-noise": "^4.0.1",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.4",
     "storybook-addon-pseudo-states": "^4.0.2",
     "style-dictionary": "^4.1.0",
     "style-loader": "^3.3.4",

packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,18 +2,18 @@
 
 exports[`<Accordion /> Default story renders snapshot 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1b3fwwo-MuiPaper-root-MuiAccordion-root"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1z99gw-MuiPaper-root-MuiAccordion-root"
 >
   <div
     aria-controls="undefined-header-panel-content"
     aria-expanded="false"
-    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-13li27m-MuiButtonBase-root-MuiAccordionSummary-root"
+    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-1q0jqld-MuiButtonBase-root-MuiAccordionSummary-root"
     id="undefined-header"
     role="button"
     tabindex="0"
   >
     <div
-      class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-o4b71y-MuiAccordionSummary-content"
+      class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-eqpfi5-MuiAccordionSummary-content"
     >
       Accordion Header
     </div>

packages/components/src/core/Autocomplete/__storybook__/stories/singleColumn.tsx

@@ -48,7 +48,7 @@ export const AutocompleteSingleColumnDemo = <
   return (
     <>
       <div style={AUTOCOMPLETE_WRAPPER_STYLES}>
-        <AutocompleteBase
+        <AutocompleteBase<T, Multiple, FreeSolo, DisableClearable>
           id="autocomplete-base-demo"
           disableCloseOnSelect={multiple}
           label={label}

packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap

@@ -86,7 +86,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
       </div>
     </div>
     <div
-      class="base-Popper-root css-v2msuu-MuiPopper-root"
+      class="MuiPopper-root css-v2msuu-MuiPopper-root"
       data-popper-escaped=""
       data-popper-placement="bottom-start"
       data-popper-reference-hidden=""
@@ -126,7 +126,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
           </p>
           <div
             aria-owns="autocomplete-demo-listbox"
-            class="MuiAutocomplete-root Mui-expanded MuiAutocomplete-hasPopupIcon css-1dvimkq-MuiAutocomplete-root"
+            class="MuiAutocomplete-root Mui-expanded MuiAutocomplete-hasPopupIcon css-1nl9kkd-MuiAutocomplete-root"
             label="Search by label"
           >
             <div
@@ -225,7 +225,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
             </div>
           </div>
           <div
-            class="base-Popper-root MuiAutocomplete-popper MuiAutocomplete-popperDisablePortal css-1rndd9j-MuiPopper-root-MuiAutocomplete-popper"
+            class="MuiPopper-root MuiAutocomplete-popper MuiAutocomplete-popperDisablePortal css-1gsu57t-MuiPopper-root-MuiAutocomplete-popper"
             data-popper-escaped=""
             data-popper-placement="bottom"
             data-popper-reference-hidden=""
@@ -541,7 +541,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
           </p>
           <div
             aria-owns="autocomplete-demo-listbox"
-            class="MuiAutocomplete-root Mui-expanded MuiAutocomplete-hasPopupIcon css-1dvimkq-MuiAutocomplete-root"
+            class="MuiAutocomplete-root Mui-expanded MuiAutocomplete-hasPopupIcon css-1nl9kkd-MuiAutocomplete-root"
             label="Search by label"
           >
             <div
@@ -640,7 +640,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
             </div>
           </div>
           <div
-            class="base-Popper-root MuiAutocomplete-popper MuiAutocomplete-popperDisablePortal css-1rndd9j-MuiPopper-root-MuiAutocomplete-popper"
+            class="MuiPopper-root MuiAutocomplete-popper MuiAutocomplete-popperDisablePortal css-1gsu57t-MuiPopper-root-MuiAutocomplete-popper"
             data-popper-escaped=""
             data-popper-placement="bottom"
             data-popper-reference-hidden=""
@@ -967,7 +967,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
   style="margin: 16px 0px 0px 24px; width: 274px;"
 >
   <div
-    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1os64xc-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-41z5h3-MuiAutocomplete-root"
     label="Search by label"
   >
     <div

packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<button /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-19e712f-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-19e712f-MuiButtonBase-root-MuiButton-root"
   icon="Cube"
   tabindex="0"
   text="Label"

packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,13 +2,13 @@
 
 exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-cv2bs4-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-cv2bs4-MuiButtonBase-root-MuiButton-root"
   icon="Download"
   tabindex="0"
   type="button"
 >
   <span
-    class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
+    class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
   >
     <div
       class="css-1ft6wgl"
@@ -28,7 +28,7 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
   </span>
   Label
   <span
-    class="MuiButton-endIcon MuiButton-iconSizeMedium css-9tj150-MuiButton-endIcon"
+    class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-9tj150-MuiButton-endIcon"
   >
     <div
       class="css-1ft6wgl"

packages/components/src/core/CellBasic/__tests__/__snapshots__/index.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`<CellBasic /> Default story renders snapshot 1`] = `
       style="display: block; max-width: 400px;"
     >
       <td
-        class=" css-11b4fo2"
+        class="css-11b4fo2"
         data-mui-internal-clone-element="true"
         data-testid="CellBasic"
         tabindex="0"

packages/components/src/core/CellComponent/__tests__/__snapshots__/index.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`<CellComponent /> Default story renders snapshot 1`] = `
           class="MuiSwitch-root MuiSwitch-sizeMedium css-ovovto-MuiSwitch-root"
         >
           <span
-            class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase"
+            class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-byenzh-MuiButtonBase-root-MuiSwitch-switchBase"
           >
             <input
               class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"

packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<CellHeader /> Default story renders snapshot 1`] = `
   <tbody>
     <tr>
       <th
-        class=" css-1szfosj"
+        class="css-1szfosj"
         data-mui-internal-clone-element="true"
         direction="desc"
         tabindex="0"

packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
 >
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1yszhd5-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1yszhd5-MuiButtonBase-root-MuiButton-root"
     label="Click Target"
     tabindex="0"
     type="button"

packages/components/src/core/ComplexFilter/index.tsx

@@ -217,15 +217,15 @@ const ComplexFilter = <
     FreeSolo
   > {
     return multiple
-      ? propValue ??
+      ? (propValue ??
           ([] as unknown as AutocompleteValue<
             T,
             Multiple,
             DisableClearable,
             FreeSolo
-          >)
-      : propValue ??
-          (null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
+          >))
+      : (propValue ??
+          (null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>));
   }
 };