update storybook

package.json

@@ -57,15 +57,16 @@
  "devDependencies": {
  "@babel/core": "^7.14.6",
  "@ladle/react": "^2.4.5",
- "@storybook/addon-a11y": "8.0.0-alpha.14",
+ "@storybook/addon-a11y": "8.0.0-beta.2",
  "@storybook/addon-coverage": "^0.0.9",
  "@storybook/addon-designs": "^7.0.5",
- "@storybook/addon-essentials": "8.0.0-alpha.14",
- "@storybook/addon-interactions": "8.0.0-alpha.14",
- "@storybook/blocks": "8.0.0-alpha.14",
- "@storybook/react": "8.0.0-alpha.14",
- "@storybook/react-vite": "8.0.0-alpha.14",
- "@storybook/test": "8.0.0-alpha.14",
+ "@storybook/addon-essentials": "8.0.0-beta.2",
+ "@storybook/addon-interactions": "8.0.0-beta.2",
+ "@storybook/addon-themes": "^7.6.15",
+ "@storybook/blocks": "8.0.0-beta.2",
+ "@storybook/react": "8.0.0-beta.2",
+ "@storybook/react-vite": "8.0.0-beta.2",
+ "@storybook/test": "8.0.0-beta.2",
  "@storybook/test-runner": "next",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^12.1.2",
@@ -106,7 +107,7 @@
  "prettier": "^2.5.0",
  "react-is": "^17.0.2",
  "react-test-renderer": "^17.0.2",
- "storybook": "8.0.0-alpha.14",
+ "storybook": "8.0.0-beta.2",
  "storybook-mobile-addon": "^2.0.2",
  "vite": "^4.0.0",
  "vite-plugin-svgr": "^2.2.2",

src/components/AnimatedIllustration/AnimatedIllustration.tsx

@@ -14,9 +14,20 @@ export const AnimatedIllustration = ({ animation }: AnimatedIllustrationProps) =
  const [animationData, setAnimationData] = useState()
 
  useEffect(() => {
+ // Flag to check if component is still mounted
+ let isMounted = true
+
  // Lazy load animations for better performance
- import(`../../assets/animations/${LottieAnimations[animation]}.json`).then(setAnimationData)
- }, [animation])
+ import(`../../assets/animations/${LottieAnimations[animation]}.json`).then((data) => {
+ // Only update state if component is still mounted
+ if (isMounted) setAnimationData(data)
+ })
+
+ // Cleanup function to set isMounted to false when component unmounts
+ return () => {
+ isMounted = false
+ }
+ }, [animation]) // Make sure to add animation as a dependency
 
  return (
  <span className="chromatic-ignore">

src/pages/RestaurantDetailPage/RestaurantDetailPage.test.tsx

@@ -4,7 +4,7 @@ import { composeStories } from '@storybook/react'
 
 import * as stories from './RestaurantDetailPage.stories'
 
-const { Success, Loading, Error, NotFound } = composeStories(stories)
+const { Success, Loading, Error, NotFound, WithModalOpen } = composeStories(stories)
 
 describe('RestaurantDetailPage', () => {
  test('Should add an item to cart', async () => {
@@ -30,6 +30,10 @@ describe('RestaurantDetailPage', () => {
  render(<NotFound />)
  await waitFor(() => expect(screen.getByText("We can't find this page")).toBeInTheDocument())
  })
+ test('Should execute story tests', async () => {
+ const { container } = render(<WithModalOpen />)
+ await WithModalOpen.play({ canvasElement: container })
+ })
 })
 
 // If we were to not use @storyboook/testing-react: