@kaizen/components 0.0.0-canary-toast-removal-20240307233136 → 0.0.0-canary-kaio-moduleres-bundler-20240308005620

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-toast-removal-20240307233136",
+  "version": "0.0.0-canary-kaio-moduleres-bundler-20240308005620",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import {
   ArrowLeftIcon,
   ArrowRightIcon,

package/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryFn } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import { Button } from "~components/Button"
 import { ChevronRightIcon } from "~components/Icon"
 import {

package/src/Filter/Filter/_docs/Filter.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import { FilterButton } from "~components/Filter/FilterButton"
 import {
   StickerSheet,

package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { action } from "@storybook/addon-actions"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx

@@ -3,7 +3,7 @@ import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { action } from "@storybook/addon-actions"
 import { Meta } from "@storybook/react"
 import { within, userEvent } from "@storybook/test"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import { DateRange } from "~components/Calendar"
 import {
   StickerSheet,

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -8,7 +8,7 @@ import {
   useQueryClient,
   keepPreviousData,
 } from "@tanstack/react-query"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import { InlineNotification } from "~components/Notification"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"

package/src/Filter/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/KaizenProvider/KaizenProvider.tsx

@@ -1,6 +1,6 @@
-import React from "react"
-// import { ToastNotificationsList } from "~components/Notification"
-// import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
+import React, { useEffect, useState } from "react"
+import { ToastNotificationsList } from "~components/Notification"
+import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
 import { FontDefinitions } from "./subcomponents/FontDefinitions"
 import { OptionalIntlProvider } from "./subcomponents/OptionalIntlProvider"
 
@@ -12,30 +12,30 @@ export type KaizenProviderProps = {
 export const KaizenProvider = ({
   children,
   locale = "en",
-}: KaizenProviderProps): JSX.Element =>
-  // const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
-  // const [notificationsList, setNotificationsList] = useState<JSX.Element>()
+}: KaizenProviderProps): JSX.Element => {
+  const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
+  const [notificationsList, setNotificationsList] = useState<JSX.Element>()
 
-  // useEffect(() => {
-  //   // SSR does not have a document, which is required for ToastNotificationsList.
-  //   // Await document render before rendering the component.
-  //   if (document !== undefined) {
-  //     setNotificationsList(<ToastNotificationsList />)
-  //     setDocumentIsAvailable(true)
-  //   }
-  // }, [documentIsAvailable])
+  useEffect(() => {
+    // SSR does not have a document, which is required for ToastNotificationsList.
+    // Await document render before rendering the component.
+    if (document !== undefined) {
+      setNotificationsList(<ToastNotificationsList />)
+      setDocumentIsAvailable(true)
+    }
+  }, [documentIsAvailable])
 
-   (
+  return (
     <OptionalIntlProvider locale={locale}>
       <>
-        {/* <ToastNotificationProvider> */}
-          {/* {notificationsList} */}
+        <ToastNotificationProvider>
+          {notificationsList}
           {children}
-        {/* </ToastNotificationProvider> */}
+        </ToastNotificationProvider>
         <FontDefinitions />
       </>
     </OptionalIntlProvider>
   )
-
+}
 
 KaizenProvider.displayName = "KaizenProvider"

package/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import { Text } from "~components/Text"
 import { chromaticModalSettings } from "../../_docs/controls"
 import { ConfirmationModal } from "../index"

package/src/Modal/ContextModal/_docs/ContextModal.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import { AddImage } from "~components/Illustration"
 import { ModalAccessibleDescription } from "~components/Modal/GenericModal/subcomponents/ModalAccessibleDescription"
 import { Text } from "~components/Text"

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import { ModalAccessibleDescription } from "~components/Modal"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"

package/src/Modal/_docs/controls.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Decorator } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 
 const IS_CHROMATIC = isChromatic()
 

package/src/MultiSelect/_docs/MultiSelect.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import classnames from "classnames"
 import {
   StickerSheet,

package/src/__future__/Select/_docs/Select.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic"
+import isChromatic from "chromatic/isChromatic"
 import {
   StickerSheet,
   StickerSheetStory,