chore(deps): update storybook monorepo to v8 (#4592)

* chore(deps): update storybook monorepo to v8 * fix(InputEditModal): omit conflicting onSubmit type * docs: add required event handlers to args --------- Co-authored-by: Cassandra Tam <[email protected]>
cultureamp · Mar 27, 2024 · 783271e · 783271e
1 parent 2c5966e
commit 783271e
Show file tree

Hide file tree

Showing 18 changed files with 841 additions and 1,738 deletions.
diff --git a/.changeset/soft-cooks-grin.md b/.changeset/soft-cooks-grin.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Fix type for `onSubmit` in `InputEditModalProps`
diff --git a/package.json b/package.json
@@ -44,13 +44,6 @@
   "dependencies": {
     "@kaizen/design-tokens": "workspace:*",
     "@kaizen/tailwind": "workspace:*",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/api": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/components": "^7.6.17",
-    "@storybook/core-events": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/theming": "^7.6.17",
     "classnames": "^2.5.1",
     "identity-obj-proxy": "^3.0.0",
     "lodash.isempty": "^4.4.0",
@@ -63,16 +56,21 @@
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@cultureamp/changelog-github": "^0.1.0",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/node-logger": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
-    "@storybook/test": "^7.6.17",
+    "@storybook/addon-a11y": "^8.0.4",
+    "@storybook/addon-actions": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/components": "^8.0.4",
+    "@storybook/core-events": "^8.0.4",
+    "@storybook/manager-api": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-webpack5": "^8.0.4",
+    "@storybook/test": "^8.0.4",
     "@storybook/test-runner": "^0.17.0",
+    "@storybook/theming": "^8.0.4",
     "@tanstack/react-query": "^5.28.4",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
@@ -127,7 +125,7 @@
     "react-test-renderer": "^18.2.0",
     "rimraf": "^5.0.5",
     "sass-loader": "^14.1.1",
-    "storybook": "^7.6.17",
+    "storybook": "^8.0.4",
     "storybook-addon-pseudo-states": "^2.2.1",
     "style-loader": "^3.3.4",
     "stylelint": "^16.2.1",

diff --git a/packages/components/src/DateRangePicker/_docs/DateRangePicker.stories.tsx b/packages/components/src/DateRangePicker/_docs/DateRangePicker.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { DateRange } from "react-day-picker"
 import { DateRangePicker, formatDateRangeValue } from "../index"
 
@@ -8,6 +9,7 @@ const meta = {
   component: DateRangePicker,
   args: {
     labelText: "Label",
+    onChange: fn(),
   },
 } satisfies Meta<typeof DateRangePicker>
 

diff --git a/packages/components/src/Filter/Filter/_docs/Filter.stories.tsx b/packages/components/src/Filter/Filter/_docs/Filter.stories.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { action } from "@storybook/addon-actions"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { FilterButton, FilterButtonRemovable } from "~components/Filter"
 import { Filter, FilterContents } from "../index"
 
@@ -20,6 +21,7 @@ const meta = {
       <FilterButton label="Label" {...triggerProps} />
     ),
     isOpen: false,
+    setIsOpen: fn(),
   },
 } satisfies Meta<typeof Filter>
 

diff --git a/packages/components/src/Filter/FilterBar/_docs/FilterBar.stories.tsx b/packages/components/src/Filter/FilterBar/_docs/FilterBar.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import queryString from "query-string"
 import Highlight from "react-highlight"
 import {
@@ -30,6 +31,7 @@ const meta = {
   args: {
     filters: [], // Defined in stories
     values: {}, // Defined in stories
+    onValuesChange: fn(),
   },
 } satisfies Meta<typeof FilterBar>
 

diff --git a/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stories.tsx b/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import Highlight from "react-highlight"
 import { defaultMonthControls } from "~components/Calendar/_docs/controls/defaultMonthControls"
 import {
@@ -56,6 +57,8 @@ const meta = {
     ),
     isOpen: false,
     selectedDate: undefined,
+    setIsOpen: fn(),
+    onDateChange: fn(),
   },
 } satisfies Meta<typeof FilterDatePicker>
 

diff --git a/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx b/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import Highlight from "react-highlight"
 import { DateRange } from "~components/Calendar"
 import { defaultMonthControls } from "~components/Calendar/_docs/controls/defaultMonthControls"
@@ -75,6 +76,8 @@ const meta = {
     renderTrigger: (triggerButtonProps: FilterButtonProps): JSX.Element => (
       <FilterButton {...triggerButtonProps} />
     ),
+    setIsOpen: fn(),
+    onRangeChange: fn(),
   },
 } satisfies Meta<typeof FilterDateRangePicker>
 

diff --git a/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stories.tsx b/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { renderTriggerControls } from "~components/Filter/_docs/controls/renderTriggerControls"
 import { FilterButton } from "../../FilterButton"
 import { FilterSelect } from "../FilterSelect"
@@ -29,6 +30,7 @@ const meta = {
     renderTrigger: (triggerProps): JSX.Element => (
       <FilterButton {...triggerProps} />
     ),
+    setIsOpen: fn(),
   },
   parameters: {
     actions: {

diff --git a/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx b/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx
@@ -1,12 +1,40 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
 import { Text } from "~components/Text"
 import { chromaticModalSettings } from "../../_docs/controls"
 import { ConfirmationModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
+const meta = {
+  title: "Components/Modals/Confirmation Modal",
+  component: ConfirmationModal,
+  args: {
+    isOpen: false,
+    title: "Confirmation modal title",
+    mood: "cautionary",
+    children: (
+      <Text variant="body">
+        Confirmation modals contain smaller pieces of content and can provide
+        additional information to aide the user.
+      </Text>
+    ),
+    onConfirm: fn(),
+    onDismiss: fn(),
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+} satisfies Meta<typeof ConfirmationModal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
 const ConfirmationModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
@@ -35,31 +63,6 @@ const ConfirmationModalTemplate: Story = {
   ...chromaticModalSettings,
 }
 
-const meta = {
-  title: "Components/Modals/Confirmation Modal",
-  component: ConfirmationModal,
-  args: {
-    isOpen: false,
-    title: "Confirmation modal title",
-    mood: "cautionary",
-    children: (
-      <Text variant="body">
-        Confirmation modals contain smaller pieces of content and can provide
-        additional information to aide the user.
-      </Text>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: false,
-    },
-  },
-} satisfies Meta<typeof ConfirmationModal>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
 export const Playground: Story = {
   ...ConfirmationModalTemplate,
   parameters: {

diff --git a/packages/components/src/Modal/ContextModal/_docs/ContextModal.stories.tsx b/packages/components/src/Modal/ContextModal/_docs/ContextModal.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
 import { AddImage } from "~components/Illustration"
 import { ModalAccessibleDescription } from "~components/Modal/GenericModal/subcomponents/ModalAccessibleDescription"
@@ -9,6 +10,26 @@ import { ContextModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
+const meta = {
+  title: "Components/Modals/Context Modal",
+  component: ContextModal,
+  args: {
+    isOpen: false,
+    title: "Context modal title",
+    children: undefined,
+    onDismiss: fn(),
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+} satisfies Meta<typeof ContextModal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
 const ContextModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
@@ -72,25 +93,6 @@ const ContextModalTemplate: Story = {
   },
 }
 
-const meta = {
-  title: "Components/Modals/Context Modal",
-  component: ContextModal,
-  args: {
-    isOpen: false,
-    title: "Context modal title",
-    children: undefined,
-  },
-  argTypes: {
-    children: {
-      control: false,
-    },
-  },
-} satisfies Meta<typeof ContextModal>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
 export const Playground: Story = {
   ...ContextModalTemplate,
   parameters: {

diff --git a/packages/components/src/Modal/InputEditModal/InputEditModal.tsx b/packages/components/src/Modal/InputEditModal/InputEditModal.tsx
@@ -30,7 +30,7 @@ export type InputEditModalProps = {
   automationId?: string
   children: React.ReactNode
   submitWorking?: { label: string; labelHidden?: boolean }
-} & HTMLAttributes<HTMLDivElement>
+} & Omit<HTMLAttributes<HTMLDivElement>, "onSubmit">
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal#Input-Edit-Modal Guidance} |

diff --git a/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx b/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
 import { ModalAccessibleDescription } from "~components/Modal"
 import { Text } from "~components/Text"
@@ -9,33 +10,6 @@ import { InputEditModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-const InputModalTemplate: Story = {
-  render: args => {
-    const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
-
-    const handleOpen = (): void => setIsOpen(true)
-    const handleClose = (): void => setIsOpen(false)
-
-    return (
-      <>
-        <button
-          type="button"
-          className="border border-gray-500"
-          onClick={handleOpen}
-        >
-          Open Modal
-        </button>
-        <InputEditModal
-          {...args}
-          isOpen={isOpen}
-          onSubmit={handleClose}
-          onDismiss={handleClose}
-        />
-      </>
-    )
-  },
-}
-
 const ExampleForm = (): JSX.Element => (
   <>
     <ModalAccessibleDescription>
@@ -58,6 +32,8 @@ const meta = {
     mood: "positive",
     children: <ExampleForm />,
     submitLabel: "Submit label",
+    onSubmit: fn(),
+    onDismiss: fn(),
   },
   argTypes: {
     children: {
@@ -70,6 +46,33 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const InputModalTemplate: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
+
+    const handleOpen = (): void => setIsOpen(true)
+    const handleClose = (): void => setIsOpen(false)
+
+    return (
+      <>
+        <button
+          type="button"
+          className="border border-gray-500"
+          onClick={handleOpen}
+        >
+          Open Modal
+        </button>
+        <InputEditModal
+          {...args}
+          isOpen={isOpen}
+          onSubmit={handleClose}
+          onDismiss={handleClose}
+        />
+      </>
+    )
+  },
+}
+
 export const Playground: Story = {
   ...InputModalTemplate,
   parameters: {

diff --git a/packages/components/src/MultiSelect/_docs/MultiSelect.stories.tsx b/packages/components/src/MultiSelect/_docs/MultiSelect.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { MultiSelect, MultiSelectProps } from "../index"
 
 const meta = {
@@ -41,6 +42,8 @@ const meta = {
         value: "toastie",
       },
     ],
+    onSelectedValuesChange: fn(),
+    onOpenChange: fn(),
   },
 } satisfies Meta<typeof MultiSelect>