Merge pull request #235 from balena-io-modules/upgrade-storybook-9

myarmolinsky · web-flow · commit 3f2f3431919f · 2025-05-29T10:59:15.000-04:00
Upgrade `storybook` dependencies to v9.0.0
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -3,12 +3,11 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 const config: StorybookConfig = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 	addons: [
-		'@storybook/addon-links',
-		'@storybook/addon-essentials',
-		'@storybook/addon-onboarding',
-		'@storybook/addon-interactions',
-		'@storybook/addon-webpack5-compiler-swc',
-	],
+        '@storybook/addon-links',
+        '@storybook/addon-onboarding',
+        '@storybook/addon-webpack5-compiler-swc',
+        '@storybook/addon-docs'
+    ],
 	framework: {
 		name: '@storybook/react-webpack5',
 		options: {},
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api';
-import { create } from '@storybook/theming';
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
 import { color, typography } from '@balena/design-tokens';
 
 import '@balena/design-tokens/build/css/tokens.css';
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Preview } from '@storybook/react';
+import { Preview } from '@storybook/react-webpack5';
 import { AnalyticsContextProvider } from '../src/contexts/AnalyticsContext';
 import { ScopedCssBaseline, ThemeProvider } from '@mui/material';
 import { theme } from '../src/theme';
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "jest": "^29.7.0",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
+    "qs": "^6.14.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
@@ -55,17 +56,11 @@
   },
   "devDependencies": {
     "@balena/lint": "^9.3.0",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/addon-docs": "^9.0.0",
+    "@storybook/addon-links": "^9.0.0",
+    "@storybook/addon-onboarding": "^9.0.0",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-webpack5": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@storybook/react-webpack5": "^9.0.0",
     "@types/color": "^4.2.0",
     "@types/color-hash": "^2.0.0",
     "@types/lodash": "^4.17.14",
@@ -75,11 +70,11 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-helmet": "^6.1.6",
     "@types/zxcvbn": "^4.4.4",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.0.0",
     "husky": "^9.0.0",
     "lint-staged": "^15.0.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.0",
     "ts-loader": "^9.5.1",
     "webpack": "^5.88.2"
   },
@@ -139,5 +134,8 @@
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
     "publishedAt": "2025-05-22T15:32:26.822Z"
+  },
+  "overrides": {
+    "storybook": "$storybook"
   }
 }
diff --git a/src/components/AnimatedText/AnimatedText.stories.tsx b/src/components/AnimatedText/AnimatedText.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { AnimatedText } from '.';
 
 const meta = {
diff --git a/src/components/Announcement/Announcement.stories.tsx b/src/components/Announcement/Announcement.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Announcement } from '.';
 
 const meta = {
diff --git a/src/components/ButtonWithTracking/ButtonWithTracking.stories.tsx b/src/components/ButtonWithTracking/ButtonWithTracking.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ButtonWithTracking } from '.';
 
 const meta = {
diff --git a/src/components/Callout/Callout.stories.tsx b/src/components/Callout/Callout.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Callout } from '.';
 
 const meta = {
diff --git a/src/components/Chip/Chip.stories.tsx b/src/components/Chip/Chip.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Chip } from '.';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faWarning } from '@fortawesome/free-solid-svg-icons';
diff --git a/src/components/Code/Code.stories.tsx b/src/components/Code/Code.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Code } from '.';
 
 const meta = {
diff --git a/src/components/CollapsedList/CollapsedList.stories.tsx b/src/components/CollapsedList/CollapsedList.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CollapsedList } from '.';
 
 const meta = {
diff --git a/src/components/CollectionSummary/CollectionSummary.stories.tsx b/src/components/CollectionSummary/CollectionSummary.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CollectionSummary } from '.';
 
 const meta = {
diff --git a/src/components/CookiesBanner/CookiesBanner.stories.tsx b/src/components/CookiesBanner/CookiesBanner.stories.tsx
@@ -3,7 +3,7 @@ import { Button } from '@mui/material';
 import { removeFromLocalStorage } from '../../utils/storage';
 import type { CookiesBannerProps } from '.';
 import { CookiesBanner } from '.';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 const CookiesTemplateBanner = ({
 	show,
diff --git a/src/components/Copy/Copy.stories.tsx b/src/components/Copy/Copy.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Copy } from '.';
 
 const meta = {
diff --git a/src/components/CustomHelmet/CustomHelmet.stories.tsx b/src/components/CustomHelmet/CustomHelmet.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CustomHelmet } from '.';
 import { Typography } from '@mui/material';
 
diff --git a/src/components/DialogWithCloseButton/DialogWithCloseButton.stories.tsx b/src/components/DialogWithCloseButton/DialogWithCloseButton.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import type { DialogWithCloseButtonProps } from '.';
 import { DialogWithCloseButton } from '.';
 import { useState } from 'react';
diff --git a/src/components/DownloadImageDialog/DownloadImageDialog.stories.tsx b/src/components/DownloadImageDialog/DownloadImageDialog.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import type { DownloadImageDialogProps } from '.';
 import { DownloadImageDialog } from '.';
 import { useState } from 'react';
diff --git a/src/components/DropDownButton/DropDownButton.stories.tsx b/src/components/DropDownButton/DropDownButton.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { DropDownButton } from '.';
 
 const meta = {
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { RJSForm } from '.';
 import type { RJSFSchema } from '@rjsf/utils';
 
diff --git a/src/components/HighlightedName/HighlightedName.stories.tsx b/src/components/HighlightedName/HighlightedName.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { HighlightedName } from '.';
 
 const meta = {
diff --git a/src/components/HorizontalBarChart/HorizontalBarChart.stories.tsx b/src/components/HorizontalBarChart/HorizontalBarChart.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { HorizontalBarChart } from '.';
 
 const meta = {
diff --git a/src/components/IconButtonWithTracking/IconButtonWithTacking.stories.tsx b/src/components/IconButtonWithTracking/IconButtonWithTacking.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { IconButtonWithTracking } from '.';
 import { PersonAddOutlined } from '@mui/icons-material';
 
diff --git a/src/components/Img/Img.stories.tsx b/src/components/Img/Img.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Img } from '.';
 // @ts-expect-error Cannot find module '../../../public/images/logo.svg'.
 import logo from '../../../public/images/logo.svg';
diff --git a/src/components/LimitedRowImages/LimitedRowImages.stories.tsx b/src/components/LimitedRowImages/LimitedRowImages.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { LimitedRowImages } from '.';
 
 const meta = {
diff --git a/src/components/MUILinkWithTracking/MUILinkWithTracking.stories.tsx b/src/components/MUILinkWithTracking/MUILinkWithTracking.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { MUILinkWithTracking } from '.';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
diff --git a/src/components/Markdown/Markdown.stories.tsx b/src/components/Markdown/Markdown.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Markdown } from '.';
 
 const meta = {
diff --git a/src/components/OrderedListItem/OrderedListItem.stories.tsx b/src/components/OrderedListItem/OrderedListItem.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { OrderedListItem } from '.';
 import { Typography } from '@mui/material';
 
diff --git a/src/components/RJST/RJST.stories.tsx b/src/components/RJST/RJST.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import type { RJSTRawModel } from '.';
 import {
 	RJST,
diff --git a/src/components/RouterLinkWithTracking/RouterLinkWithTracking.stories.tsx b/src/components/RouterLinkWithTracking/RouterLinkWithTracking.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { RouterLinkWithTracking } from '.';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
diff --git a/src/components/SettingsCard/SettingsCard.stories.tsx b/src/components/SettingsCard/SettingsCard.stories.tsx
@@ -1,5 +1,5 @@
 import { Button, Chip, Link, Stack, Switch, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { SettingsCard, SettingsCardItem } from '.';
 import { Code } from '../Code';
 
diff --git a/src/components/SimpleConfirmationDialog/SimpleConfirmationDialog.stories.tsx b/src/components/SimpleConfirmationDialog/SimpleConfirmationDialog.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import type { SimpleConfirmationDialogProps } from '.';
 import { SimpleConfirmationDialog } from '.';
 import { Button } from '@mui/material';
diff --git a/src/components/Spinner/Spinner.stories.tsx b/src/components/Spinner/Spinner.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Spinner } from '.';
 import { Box } from '@mui/material';
 
diff --git a/src/components/SurroundingOverlay/SurroundingOverlay.stories.tsx b/src/components/SurroundingOverlay/SurroundingOverlay.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { SurroundingOverlay, type SurroundingOverlayProps } from '.';
 import { useEffect, useState } from 'react';
 import { Box, Button } from '@mui/material';
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Tabs } from '.';
 import { Box } from '@mui/material';
 
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Tag } from '.';
 
 const meta = {
diff --git a/src/components/TagManagementDialog/AddTagForm.tsx b/src/components/TagManagementDialog/AddTagForm.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as uuid from 'uuid';
 import type { ResourceTagInfo } from './models';
 import find from 'lodash/find';
 import startsWith from 'lodash/startsWith';
@@ -16,6 +15,7 @@ import {
 	type SimpleConfirmationDialogProps,
 	SimpleConfirmationDialog,
 } from '../SimpleConfirmationDialog';
+import { useRandomUUID } from '../../hooks/useRandomUUID';
 
 const RESERVED_NAMESPACES = ['io.resin.', 'io.balena.'];
 
@@ -75,7 +75,8 @@ export const AddTagForm = <T extends object>({
 
 	const tagKeyInput = React.useRef<HTMLInputElement>(null);
 	const valueInput = React.useRef<HTMLInputElement>(null);
-	const formUuid = `add-tag-form-${uuid.v1()}`;
+	const formId = useRandomUUID();
+	const formUuid = `add-tag-form-${formId}`;
 
 	const checkNewTagValidity = (key: string) => {
 		const failedRule = newTagValidationRules<T>(t, key, existingTags).find(
diff --git a/src/components/TagManagementDialog/TagManagementDialog.stories.tsx b/src/components/TagManagementDialog/TagManagementDialog.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 import { Button } from '@mui/material';
 import { TagManagementDialog, type TagManagementDialogProps } from '.';
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Box, Button, Typography } from '@mui/material';
 import { Tooltip } from '.';
 
diff --git a/src/components/Truncate/Truncate.stories.tsx b/src/components/Truncate/Truncate.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Truncate } from '.';
 import { Typography } from '@mui/material';
 
diff --git a/src/components/VirtualizedAutocomplete/VirtualizedAutocomplete.stories.tsx b/src/components/VirtualizedAutocomplete/VirtualizedAutocomplete.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import type { VirtualizedAutocompleteWithPaginationProps } from '.';
 import { VirtualizedAutocomplete } from '.';
 import type { AutocompleteRenderInputParams, ChipTypeMap } from '@mui/material';
diff --git a/src/docs/10_introduction/10_welcome.mdx b/src/docs/10_introduction/10_welcome.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Introduction / Welcome" />
 
diff --git a/src/docs/10_introduction/30_get-in-touch.mdx b/src/docs/10_introduction/30_get-in-touch.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Introduction / Get in touch" />
 
diff --git a/src/docs/10_introduction/40_contribute.mdx b/src/docs/10_introduction/40_contribute.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Introduction / Contribute" />
 
diff --git a/src/docs/20_foundations/00_explained.mdx b/src/docs/20_foundations/00_explained.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Foundations / Explained" />
 
diff --git a/src/docs/20_foundations/10_01_tokens-intro.mdx b/src/docs/20_foundations/10_01_tokens-intro.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import tokens from '@balena/design-tokens/build/json/tokens.json';
 import { formatTokenName, getCategoriesFromTokens, getVariableFromTokenName } from '../utils';
 
diff --git a/src/docs/20_foundations/10_02-all-tokens.mdx b/src/docs/20_foundations/10_02-all-tokens.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import tokens from '@balena/design-tokens/build/json/tokens.json';
 
diff --git a/src/docs/20_foundations/10_03-usage-in-MUI.mdx b/src/docs/20_foundations/10_03-usage-in-MUI.mdx
@@ -1,4 +1,4 @@
-import { Meta, Unstyled } from '@storybook/blocks';
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
 import { Box, ThemeProvider, Typography } from '@mui/material';
 import { theme } from '../../theme';
 
diff --git a/src/docs/20_foundations/20_colors.mdx b/src/docs/20_foundations/20_colors.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { ColorRow, ColorTable } from '../utils';
 
 <Meta title="Foundations / Colors" />
diff --git a/src/docs/20_foundations/30_typography.mdx b/src/docs/20_foundations/30_typography.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { TypeScaleItem } from '../utils';
 import { Box, ThemeProvider } from '@mui/material';
 import { theme } from '../../theme';
diff --git a/src/docs/30_mui_components/Alert.stories.tsx b/src/docs/30_mui_components/Alert.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Alert, AlertTitle } from '@mui/material';
 
 const meta = {
diff --git a/src/docs/30_mui_components/avatar.mdx b/src/docs/30_mui_components/avatar.mdx
@@ -1,4 +1,4 @@
-import { Meta, Unstyled } from '@storybook/blocks';
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
 import { theme } from '../../theme';
 import { Avatar, AvatarGroup, Box, Stack, ThemeProvider } from '@mui/material';
 
diff --git a/src/docs/30_mui_components/buttons.mdx b/src/docs/30_mui_components/buttons.mdx
@@ -1,4 +1,4 @@
-import { Meta, Unstyled } from '@storybook/blocks';
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
 import {
 	Box,
 	Button, Stack,
diff --git a/src/docs/30_mui_components/checkbox.mdx b/src/docs/30_mui_components/checkbox.mdx
diff --git a/src/docs/30_mui_components/chip.mdx b/src/docs/30_mui_components/chip.mdx
diff --git a/src/docs/30_mui_components/datagrid.mdx b/src/docs/30_mui_components/datagrid.mdx
diff --git a/src/docs/30_mui_components/menu.mdx b/src/docs/30_mui_components/menu.mdx
diff --git a/src/docs/30_mui_components/pagination.mdx b/src/docs/30_mui_components/pagination.mdx
diff --git a/src/docs/30_mui_components/progress.mdx b/src/docs/30_mui_components/progress.mdx
diff --git a/src/docs/30_mui_components/radio.mdx b/src/docs/30_mui_components/radio.mdx
diff --git a/src/docs/30_mui_components/switch.mdx b/src/docs/30_mui_components/switch.mdx
diff --git a/src/docs/30_mui_components/table.mdx b/src/docs/30_mui_components/table.mdx
diff --git a/src/docs/30_mui_components/textfield.mdx b/src/docs/30_mui_components/textfield.mdx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { Meta, StoryObj } from '@storybook/react';`
	`1`	`+import type { Meta, StoryObj } from '@storybook/react-webpack5';`
`2`	`2`	`import { AnimatedText } from '.';`
`3`	`3`
`4`	`4`	`const meta = {`