Merge pull request #1239 from curvefi/chore/storybook.9.1.1

chore: update storybook to 9.1.1

Author: 0xAlunara

eslint.config.mjs

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import js from '@eslint/js'
@@ -11,15 +14,12 @@ const compat = new FlatCompat({
   allConfig: js.configs.all,
 })
 
-const config = [
-  ...compat.extends('custom'),
-  {
-    settings: {
-      next: {
-        rootDir: ['apps/*/', 'packages/ui/*/'],
-      },
+const config = [...compat.extends('custom'), {
+  settings: {
+    next: {
+      rootDir: ['apps/*/', 'packages/ui/*/'],
     },
   },
-]
+}, ...storybook.configs["flat/recommended"]]
 
 export default config

packages/curve-ui-kit/.storybook/main.ts

@@ -14,11 +14,10 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|mts|ts|tsx)'],
   staticDirs: ['../public'],
   addons: [
-    getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@chromatic-com/storybook'),
-    getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-docs'),
   ],
 
   framework: {

packages/curve-ui-kit/.storybook/preview.tsx

@@ -1,8 +1,8 @@
 import { CssBaseline, ThemeProvider } from '@mui/material'
 import Box from '@mui/material/Box'
 import { withThemeFromJSXProvider } from '@storybook/addon-themes'
-import { DocsContainer } from '@storybook/blocks'
-import type { Decorator, Preview, ReactRenderer } from '@storybook/react'
+import { DocsContainer } from '@storybook/addon-docs/blocks'
+import type { Decorator, Preview, ReactRenderer } from '@storybook/nextjs'
 import { chadTheme, darkTheme, lightTheme } from '../src/themes'
 import { minecraft, monaSans } from '../src/themes/fonts'
 

packages/curve-ui-kit/package.json

@@ -45,21 +45,17 @@
   "devDependencies": {
     "@babel/core": "^7.27.1",
     "@babel/runtime": "^7.27.1",
-    "@chromatic-com/storybook": "^3.2.6",
-    "@storybook/addon-a11y": "8.6.14",
-    "@storybook/addon-docs": "8.6.14",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-interactions": "8.6.14",
-    "@storybook/addon-themes": "8.6.14",
-    "@storybook/blocks": "8.6.14",
-    "@storybook/nextjs": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/test": "8.6.14",
+    "@chromatic-com/storybook": "^4.1.0",
+    "@storybook/addon-a11y": "9.1.1",
+    "@storybook/addon-docs": "9.1.1",
+    "@storybook/addon-themes": "9.1.1",
+    "@storybook/nextjs": "9.1.1",
     "@types/react": "*",
     "@types/react-dom": "*",
     "eslint": "*",
     "eslint-config-custom": "*",
-    "storybook": "8.6.14",
+    "eslint-plugin-storybook": "9.1.1",
+    "storybook": "9.1.1",
     "tsconfig": "*",
     "type-fest": "4.41.0",
     "typescript": "*",

packages/curve-ui-kit/src/features/connect-wallet/lib/notify.ts

@@ -1,4 +1,4 @@
-import { v4 as uuid } from 'uuid'
+import { random } from 'lodash'
 
 type NotificationType = 'pending' | 'success' | 'error' | 'hint'
 
@@ -15,7 +15,7 @@ const removeMessageKey = 'walletNotificationDismiss' as const
 
 export const notify = (message: string, type: NotificationType, autoDismiss?: number): { dismiss: () => void } => {
   const detail = {
-    id: uuid(),
+    id: random(0, 1e16).toString(),
     type,
     message,
     ...(typeof autoDismiss !== 'undefined' && { autoDismiss }),

packages/curve-ui-kit/src/features/manage-soft-liquidation/ManageSoftLiquidation.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
+import { fn } from 'storybook/test'
 import { ethAddress } from 'viem'
-import type { Meta, StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/nextjs'
 import type { Address } from '@ui-kit/utils'
 import type { TokenOption } from '../select-token'
 import { ManageSoftLiquidation, type Props, type ImproveHealthProps, type ClosePositionProps } from './'

packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
+import { action } from 'storybook/actions'
+import { fn } from 'storybook/test'
 import { ethAddress } from 'viem'
 import { Button, Stack, Typography } from '@mui/material'
-import { action } from '@storybook/addon-actions'
-import type { Meta, StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/nextjs'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import type { TokenOption } from './types'
 import { TokenSelector } from './'

packages/curve-ui-kit/src/features/slippage-settings/SlippageSettings.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/nextjs'
 import Icon from '@ui/Icon'
 import IconButton from '@ui/IconButton/IconButton'
 import { formatNumber } from '@ui/utils'

packages/curve-ui-kit/src/pages/Introduction/Introduction.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 export const RightArrow = () => (
   <svg

packages/curve-ui-kit/src/shared/ui/stories/Accordion.stories.tsx

@@ -4,7 +4,7 @@ import Button from '@mui/material/Button'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
 import Typography from '@mui/material/Typography'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/nextjs'
 import { Accordion } from '../Accordion'
 import { WithSkeleton } from '../WithSkeleton'