chore(deps): update storybook monorepo to ^7.6.8 (#4389)

* chore(deps): update storybook monorepo to ^7.6.8 * docs: fix decorator types --------- Co-authored-by: Self-hosted Renovate Bot <135776+cultureamp-renovate[bot]@users.noreply.github.com> Co-authored-by: Cassandra Tam <[email protected]>
cultureamp · Jan 15, 2024 · dd8b37f · dd8b37f
1 parent 001d085
commit dd8b37f
Show file tree

Hide file tree

Showing 8 changed files with 570 additions and 861 deletions.
diff --git a/.changeset/happy-schools-fly.md b/.changeset/happy-schools-fly.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/package.json b/package.json
@@ -39,13 +39,13 @@
   "dependencies": {
     "@kaizen/hosted-assets": "*",
     "@kaizen/tailwind": "*",
-    "@storybook/addons": "^7.5.3",
-    "@storybook/api": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/components": "^7.5.3",
-    "@storybook/core-events": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/theming": "^7.5.3",
+    "@storybook/addons": "^7.6.8",
+    "@storybook/api": "^7.6.8",
+    "@storybook/blocks": "^7.6.8",
+    "@storybook/components": "^7.6.8",
+    "@storybook/core-events": "^7.6.8",
+    "@storybook/react": "^7.6.8",
+    "@storybook/theming": "^7.6.8",
     "classnames": "^2.5.1",
     "identity-obj-proxy": "^3.0.0",
     "lodash.isempty": "^4.4.0",
@@ -67,13 +67,13 @@
     "@babel/preset-typescript": "^7.23.3",
     "@changesets/cli": "^2.27.1",
     "@cultureamp/changelog-github": "^0.1.0",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-a11y": "^7.6.8",
+    "@storybook/addon-essentials": "^7.6.8",
+    "@storybook/addon-interactions": "^7.6.8",
+    "@storybook/addon-links": "^7.6.8",
     "@storybook/jest": "^0.2.3",
-    "@storybook/node-logger": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/node-logger": "^7.6.8",
+    "@storybook/react-webpack5": "^7.6.8",
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
     "@tanstack/react-query": "^5.17.10",
@@ -130,7 +130,7 @@
     "react-test-renderer": "^18.2.0",
     "rimraf": "^5.0.5",
     "sass-loader": "^13.3.3",
-    "storybook": "^7.5.3",
+    "storybook": "^7.6.8",
     "storybook-addon-pseudo-states": "^2.1.2",
     "style-loader": "^3.3.4",
     "stylelint": "^15.11.0",

diff --git a/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx b/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx
@@ -12,19 +12,15 @@ import isChromatic from "chromatic"
 import { InlineNotification } from "~components/Notification"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"
-import {
-  FilterMultiSelect,
-  getSelectedOptionLabels,
-  FilterMultiSelectProps,
-} from ".."
+import { FilterMultiSelect, getSelectedOptionLabels } from ".."
 import { mockItems } from "./MockData"
 import styles from "./FilterMultiSelect.stories.scss"
 
 const IS_CHROMATIC = isChromatic()
 
 const client = new QueryClient()
 
-const withQueryProvider: Decorator<FilterMultiSelectProps> = Story => (
+const withQueryProvider: Decorator = Story => (
   <QueryClientProvider client={client}>
     <Story />
   </QueryClientProvider>

diff --git a/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx b/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx
@@ -1,38 +1,12 @@
 import React, { useState } from "react"
-import { Decorator, Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { Text } from "~components/Text"
-import { ConfirmationModal, ConfirmationModalProps } from "../index"
+import { chromaticModalSettings } from "../../_docs/controls"
+import { ConfirmationModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-// Add additional height to the stories when running in Chromatic only.
-// Modals have fixed position and would be cropped from snapshot tests.
-// Setting height to 100vh ensures we capture as much content of the
-// modal, as it's height responds to the content within it.
-const HeightDecorator: Decorator<ConfirmationModalProps> = Story => {
-  if (IS_CHROMATIC) {
-    return (
-      <div style={{ minHeight: "100vh" }}>
-        <Story />
-      </div>
-    )
-  }
-
-  return <Story />
-}
-
-const chromaticModalSettings = {
-  parameters: {
-    chromatic: {
-      disable: false,
-      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
-      pauseAnimationAtEnd: true,
-    },
-  },
-  decorators: [HeightDecorator],
-}
-
 const ConfirmationModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)

diff --git a/packages/components/src/Modal/ContextModal/_docs/ContextModal.stories.tsx b/packages/components/src/Modal/ContextModal/_docs/ContextModal.stories.tsx
@@ -1,40 +1,14 @@
 import React, { useState } from "react"
-import { Decorator, Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { AddImage } from "~components/Illustration"
 import { ModalAccessibleDescription } from "~components/Modal/GenericModal/subcomponents/ModalAccessibleDescription"
 import { Text } from "~components/Text"
-import { ContextModal, ContextModalProps } from "../index"
+import { chromaticModalSettings } from "../../_docs/controls"
+import { ContextModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-// Add additional height to the stories when running in Chromatic only.
-// Modals have fixed position and would be cropped from snapshot tests.
-// Setting height to 100vh ensures we capture as much content of the
-// modal, as it's height responds to the content within it.
-const HeightDecorator: Decorator<ContextModalProps> = Story => {
-  if (IS_CHROMATIC) {
-    return (
-      <div style={{ minHeight: "100vh" }}>
-        <Story />
-      </div>
-    )
-  }
-
-  return <Story />
-}
-
-const chromaticModalSettings = {
-  parameters: {
-    chromatic: {
-      disable: false,
-      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
-      pauseAnimationAtEnd: true,
-    },
-  },
-  decorators: [HeightDecorator],
-}
-
 const ContextModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)

diff --git a/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx b/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx
@@ -1,40 +1,14 @@
 import React, { useState } from "react"
-import { Decorator, Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { ModalAccessibleDescription } from "~components/Modal"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"
-import { InputEditModal, InputEditModalProps } from "../index"
+import { chromaticModalSettings } from "../../_docs/controls"
+import { InputEditModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-// Add additional height to the stories when running in Chromatic only.
-// Modals have fixed position and would be cropped from snapshot tests.
-// Setting height to 100vh ensures we capture as much content of the
-// modal, as it's height responds to the content within it.
-const HeightDecorator: Decorator<InputEditModalProps> = Story => {
-  if (IS_CHROMATIC) {
-    return (
-      <div style={{ minHeight: "100vh" }}>
-        <Story />
-      </div>
-    )
-  }
-
-  return <Story />
-}
-
-const chromaticModalSettings = {
-  parameters: {
-    chromatic: {
-      disable: false,
-      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
-      pauseAnimationAtEnd: true,
-    },
-  },
-  decorators: [HeightDecorator],
-}
-
 const InputModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)

diff --git a/packages/components/src/Modal/_docs/controls.tsx b/packages/components/src/Modal/_docs/controls.tsx
@@ -0,0 +1,32 @@
+import React from "react"
+import { Decorator } from "@storybook/react"
+import isChromatic from "chromatic"
+
+const IS_CHROMATIC = isChromatic()
+
+// Add additional height to the stories when running in Chromatic only.
+// Modals have fixed position and would be cropped from snapshot tests.
+// Setting height to 100vh ensures we capture as much content of the
+// modal, as it's height responds to the content within it.
+const heightDecorator: Decorator = Story => {
+  if (IS_CHROMATIC) {
+    return (
+      <div style={{ minHeight: "100vh" }}>
+        <Story />
+      </div>
+    )
+  }
+
+  return <Story />
+}
+
+export const chromaticModalSettings = {
+  parameters: {
+    chromatic: {
+      disable: false,
+      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
+      pauseAnimationAtEnd: true,
+    },
+  },
+  decorators: [heightDecorator],
+}