Grafana UI: Bump to Storybook 8 (#87722)

* chore(storybook): run yarn dlx storybook@latest upgrade * chore(storybook): remove storybook/blocks patch * chore(yarn): clean up storybook dependencies * feat(storybook): migrate to v8 config via migration codemods * refactor(storybook): update stories to use v8 types via codemod * refactor(storybook): update stories to use preview-api instead of client-api * refactor(storybook): replace mdx usage of ArgsTable with PureArgsTable * refactor(storybook): migrate remaining mdx files to v8 storybook/blocks api * refactor(storybook): clean up mdx imports and blocks component names * chore(storybook): clean up typescript configuration * fix(frontend): align types/react versions across monorepo so grafana ui can be built * fix(storybook): pub back react-docgen-typescript and use ArgTypes so props tables work * chore(storybook): patch blocks package to expose Preview component * revert(storybook): revert changes related to using Canvas component in mdx files * Storybook upgrade: Fix icon typing (#87793) fix iconOptions typing * refactor(storybook): prefer as const over asserting types * revert(storybook): put back correct case in box.mdx --------- Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
2024-05-15 15:49:00 +02:00
parent 6127dfd322
commit 65b2834420
101 changed files with 1848 additions and 3042 deletions
@@ -7,9 +7,6 @@ enableTelemetry: false
 nodeLinker: node-modules

 packageExtensions:
-  '@storybook/core-common@7.4.5':
-    dependencies:
-      '@storybook/react-webpack5': 7.4.5
  'croact-css-styled@1.1.9':
    dependencies:
      croact: 1.0.4
@@ -125,7 +125,7 @@
    "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.4",
    "@types/pluralize": "^0.0.33",
    "@types/prismjs": "1.26.4",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-beautiful-dnd": "13.1.8",
    "@types/react-dom": "18.2.25",
    "@types/react-grid-layout": "1.3.5",
@@ -411,10 +411,10 @@
    "debug@npm:^0.7.4": "2.6.9",
    "slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch",
    "react-split-pane@0.1.92": "patch:react-split-pane@npm:0.1.92#.yarn/patches/react-split-pane-npm-0.1.92-93dbf51dff.patch",
-    "@storybook/blocks@7.4.5": "patch:@storybook/blocks@npm%3A7.4.5#./.yarn/patches/@storybook-blocks-npm-7.4.5-5a2374564a.patch",
    "history@4.10.1": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
    "history@^4.9.0": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
-    "redux": "^5.0.0"
+    "redux": "^5.0.0",
+    "@storybook/blocks@npm:8.0.10": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch"
  },
  "workspaces": {
    "packages": [
@@ -68,7 +68,7 @@
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
    "@types/papaparse": "5.3.14",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "@types/tinycolor2": "1.4.6",
    "esbuild": "0.20.2",
@@ -69,7 +69,7 @@
    "@types/jest": "^29.5.4",
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-virtualized-auto-sizer": "1.0.4",
    "@types/tinycolor2": "1.4.6",
    "babel-jest": "29.7.0",
@@ -46,7 +46,7 @@
    "@svgr/plugin-svgo": "^8.1.0",
    "@types/babel__core": "^7",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "esbuild": "0.20.2",
    "prettier": "3.2.5",
@@ -37,7 +37,7 @@
    "@testing-library/user-event": "14.5.2",
    "@types/jest": "^29.5.4",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/systemjs": "6.13.5",
    "@types/testing-library__jest-dom": "5.14.9",
    "jest": "^29.6.4",
@@ -95,7 +95,7 @@
    "@types/node": "20.12.11",
    "@types/pluralize": "^0.0.33",
    "@types/prismjs": "1.26.4",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-beautiful-dnd": "13.1.8",
    "@types/react-dom": "18.2.25",
    "@types/react-highlight-words": "0.16.7",
@@ -58,7 +58,7 @@
    "@types/history": "4.7.11",
    "@types/jest": "29.5.12",
    "@types/lodash": "4.17.1",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "@types/systemjs": "6.13.5",
    "esbuild": "0.20.2",
@@ -43,7 +43,7 @@
    "@types/jest": "^29.5.4",
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "@types/react-virtualized-auto-sizer": "1.0.4",
    "@types/systemjs": "6.13.5",
@@ -1,4 +1,4 @@
-import path from 'path';
+import path, { dirname, join } from 'path';
 import type { StorybookConfig } from '@storybook/react-webpack5';
 // avoid importing from @grafana/data to prevent node error: ERR_REQUIRE_ESM
 import { availableIconsIndex, IconName } from '../../grafana-data/src/types/icon';
@@ -33,7 +33,7 @@ const mainConfig: StorybookConfig = {
        backgrounds: false,
      },
    },
-    '@storybook/addon-a11y',
+    getAbsolutePath('@storybook/addon-a11y'),
    {
      name: '@storybook/preset-scss',
      options: {
@@ -47,27 +47,17 @@ const mainConfig: StorybookConfig = {
        },
      },
    },
-    '@storybook/addon-storysource',
-    'storybook-dark-mode',
-    {
-      // replace babel-loader in manager and preview with esbuild-loader
-      name: 'storybook-addon-turbo-build',
-      options: {
-        optimizationLevel: 3,
-        // Target must match storybook 7 manager otherwise minimised docs error in production
-        esbuildMinifyOptions: {
-          target: 'chrome100',
-          minify: true,
-        },
-      },
-    },
+    getAbsolutePath('@storybook/addon-storysource'),
+    getAbsolutePath('storybook-dark-mode'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
  ],
  core: {},
  docs: {
    autodocs: true,
  },
  framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/react-webpack5'),
    options: {
      fastRefresh: true,
      builder: {
@@ -130,3 +120,7 @@ const mainConfig: StorybookConfig = {
  },
 };
 module.exports = mainConfig;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
@@ -112,21 +112,22 @@
    "@babel/core": "7.24.5",
    "@grafana/tsconfig": "^1.3.0-rc1",
    "@rollup/plugin-node-resolve": "15.2.3",
-    "@storybook/addon-a11y": "7.4.5",
-    "@storybook/addon-actions": "7.4.5",
-    "@storybook/addon-docs": "7.4.5",
-    "@storybook/addon-essentials": "7.4.5",
-    "@storybook/addon-storysource": "7.4.5",
-    "@storybook/api": "7.4.5",
-    "@storybook/blocks": "7.4.5",
-    "@storybook/client-api": "7.4.5",
-    "@storybook/components": "7.4.5",
-    "@storybook/core-events": "7.4.5",
+    "@storybook/addon-a11y": "^8.0.10",
+    "@storybook/addon-actions": "^8.0.10",
+    "@storybook/addon-docs": "^8.0.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-mdx-gfm": "^8.0.10",
+    "@storybook/addon-storysource": "^8.0.10",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch",
+    "@storybook/components": "^8.0.10",
+    "@storybook/core-events": "^8.0.10",
    "@storybook/mdx2-csf": "1.1.0",
    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "7.4.5",
-    "@storybook/react-webpack5": "7.4.5",
-    "@storybook/theming": "7.4.5",
+    "@storybook/preview-api": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-webpack5": "^8.0.10",
+    "@storybook/theming": "^8.0.10",
    "@testing-library/dom": "10.0.0",
    "@testing-library/jest-dom": "6.4.2",
    "@testing-library/react": "15.0.2",
@@ -141,7 +142,7 @@
    "@types/mock-raf": "1.0.6",
    "@types/node": "20.12.11",
    "@types/prismjs": "1.26.4",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-beautiful-dnd": "13.1.8",
    "@types/react-color": "3.0.12",
    "@types/react-dom": "18.2.25",
@@ -177,9 +178,8 @@
    "rollup-plugin-node-externals": "^5.0.0",
    "rollup-plugin-svg-import": "1.6.0",
    "sass-loader": "14.2.1",
-    "storybook": "7.4.5",
-    "storybook-addon-turbo-build": "2.0.1",
-    "storybook-dark-mode": "3.0.1",
+    "storybook": "^8.0.10",
+    "storybook-dark-mode": "^4.0.1",
    "style-loader": "4.0.0",
    "typescript": "5.4.5",
    "webpack": "5.91.0"
@@ -1,4 +1,4 @@
-import { Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Preview, ArgTypes } from '@storybook/blocks';
 import { AutoSaveField } from './AutoSaveField';
 import { Basic } from './AutoSaveField.story.tsx';

@@ -267,7 +267,7 @@ _**What can be expected from the request?**_

 ## <a name="propstable"/>Props table

-<ArgsTable of={AutoSaveField} />
+<ArgTypes of={AutoSaveField} />

 ## <a name="related"/>Related

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React, { useState } from 'react';

 import { Checkbox } from '../Forms/Checkbox';
@@ -72,7 +72,7 @@ const themeOptions = [
  { value: 'system', label: 'System' },
 ];

-export const Basic: Story = (args) => {
+export const Basic: StoryFn = (args) => {
  const [inputValue, setInputValue] = useState('');
  return (
    <AutoSaveField onFinishChange={args.inputSuccessful ? getSuccess : getError} {...args}>
@@ -96,7 +96,7 @@ Basic.args = {
  inputSuccessful: false,
 };

-export const AllComponents: Story = (args) => {
+export const AllComponents: StoryFn = (args) => {
  const [selected, setSelected] = useState('');
  const [checkBoxTest, setCheckBoxTest] = useState(false);
  const [textAreaValue, setTextAreaValue] = useState('');
@@ -14,7 +14,13 @@ const meta: Meta<typeof Badge> = {
    docs: { page: mdx },
  },
  argTypes: {
-    icon: { options: iconOptions, control: { type: 'select' } },
+    icon: {
+      options: Object.keys(iconOptions),
+      control: {
+        type: 'select',
+        labels: iconOptions,
+      },
+    },
    color: { control: 'select' },
    text: { control: 'text' },
  },
@@ -34,7 +34,6 @@ const value = {
  numeric: value,
 };

-//...
 <BarGauge
  value={70}
  field={field.config}
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';

 import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
@@ -110,14 +110,14 @@ const AddBarGaugeStory = (storyProps: StoryProps) => {
  return <BarGauge {...props} />;
 };

-export const barGaugeVertical: Story<StoryProps> = AddBarGaugeStory.bind({});
+export const barGaugeVertical: StoryFn<StoryProps> = AddBarGaugeStory.bind({});
 barGaugeVertical.args = {
  height: 500,
  width: 100,
  orientation: VizOrientation.Vertical,
 };

-export const barGaugeHorizontal: Story<StoryProps> = AddBarGaugeStory.bind({});
+export const barGaugeHorizontal: StoryFn<StoryProps> = AddBarGaugeStory.bind({});
 barGaugeHorizontal.args = {
  height: 100,
  width: 500,
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';

 import { FieldSparkline, FieldType } from '@grafana/data';
@@ -57,7 +57,7 @@ interface StoryProps extends Partial<Props> {
  valueText: string;
 }

-export const ApplyNoValue: Story<StoryProps> = ({
+export const ApplyNoValue: StoryFn<StoryProps> = ({
  valueText,
  title,
  colorMode,
@@ -101,7 +101,7 @@ export const ApplyNoValue: Story<StoryProps> = ({
  );
 };

-export const Basic: Story<StoryProps> = ({
+export const Basic: StoryFn<StoryProps> = ({
  valueText,
  title,
  colorMode,
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';

 import { Button } from '../Button/Button';
@@ -25,7 +25,7 @@ interface StoryProps extends Partial<CallToActionCardProps> {
  buttonText: string;
 }

-export const Basic: Story<StoryProps> = (args) => {
+export const Basic: StoryFn<StoryProps> = (args) => {
  const ctaElements: { [key: string]: JSX.Element } = {
    custom: <h1>{args.H1Text}</h1>,
    button: (
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';

 import { Field } from '../Forms/Field';
@@ -25,7 +25,7 @@ interface StoryProps extends Partial<Props> {
  buttonText: string;
 }

-export const ClipboardButton: Story<StoryProps> = (args) => {
+export const ClipboardButton: StoryFn<StoryProps> = (args) => {
  const shareUrl = 'https://grafana.com/d/abcDEF-34t';

  return (
@@ -35,7 +35,7 @@ export const ClipboardButton: Story<StoryProps> = (args) => {
  );
 };

-export const AsInputFieldAddon: Story<StoryProps> = (args) => {
+export const AsInputFieldAddon: StoryFn<StoryProps> = (args) => {
  const shareUrl = 'https://grafana.com/d/abcDEF-34t';

  return (
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,4 +1,4 @@
-import { Meta, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Collapse } from './Collapse';

 # Collapse
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

 import { ConfirmButton } from '@grafana/ui';
@@ -48,7 +48,7 @@ interface StoryProps extends Partial<Props> {
  buttonText: string;
 }

-export const Basic: Story<StoryProps> = (args) => {
+export const Basic: StoryFn<StoryProps> = (args) => {
  return (
    <ConfirmButton
      closeOnConfirm={args.closeOnConfirm}
@@ -65,7 +65,7 @@ export const Basic: Story<StoryProps> = (args) => {
  );
 };

-export const WithCustomButton: Story<StoryProps> = (args) => {
+export const WithCustomButton: StoryFn<StoryProps> = (args) => {
  return (
    <ConfirmButton
      closeOnConfirm={args.closeOnConfirm}
@@ -84,7 +84,7 @@ export const WithCustomButton: Story<StoryProps> = (args) => {
  );
 };

-export const Delete: Story<StoryProps> = (args) => {
+export const Delete: StoryFn<StoryProps> = (args) => {
  return (
    <DeleteButton
      size={args.size}
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { ConfirmModal } from './ConfirmModal';

 <Meta title="MDX|ConfirmModal" component={ConfirmModal} />
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,4 +1,4 @@
-import { Story, Preview, ArgTypes } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/blocks';
 import { TimeRangeInput } from './TimeRangeInput';

 # TimeRangeInput
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,4 +1,4 @@
-import { Story, Preview, ArgTypes } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/blocks';
 import { FileDropzone } from './FileDropzone';

 # FileDropzone
@@ -1,4 +1,4 @@
-import { Story, Preview, ArgTypes } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/blocks';
 import { FileListItem } from './FileListItem';

 # FileListItem
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

 import { FileListItem as FileListItemComponent, FileListItemProps } from './FileListItem';
@@ -22,7 +22,7 @@ const meta: Meta = {
  },
 };

-export const FileListItem: Story<FileListItemProps> = (args) => {
+export const FileListItem: StoryFn<FileListItemProps> = (args) => {
  return <FileListItemComponent {...args} />;
 };

@@ -1,4 +1,4 @@
-import { Story, Preview, ArgTypes } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/blocks';
 import { FileUpload } from './FileUpload';

 # FileUpload
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Checkbox } from './Checkbox';

 <Meta title="MDX|Checkbox" component={Checkbox} />
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Field } from './Field';

 <Meta title="MDX|Field" component={Field} />
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { FieldValues } from 'react-hook-form';

@@ -29,7 +29,7 @@ const meta: Meta = {

 export default meta;

-export const Simple: Story = (args) => {
+export const Simple: StoryFn = (args) => {
  const defaultValues: FieldValues = {
    people: [{ firstName: 'Janis', lastName: 'Joplin' }],
  };
@@ -1,4 +1,4 @@
-import { Story, Preview, ArgTypes } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/blocks';
 import { FieldSet } from './FieldSet';

 # FieldSet
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 import { ValidateResult } from 'react-hook-form';

@@ -145,7 +145,7 @@ export const DefaultValues = () => {
  return <>{renderForm(defaultValues[0])}</>;
 };

-export const AsyncValidation: Story = ({ passAsyncValidation }) => {
+export const AsyncValidation: StoryFn = ({ passAsyncValidation }) => {
  return (
    <>
      <Form
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Label } from './Label';

 <Meta title="MDX|Label" component={Label} />
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { zip, fromPairs } from 'lodash';
 import React, { useState } from 'react';

@@ -25,7 +25,7 @@ const meta: Meta = {
  },
 };

-const Wrapper: Story = (args) => {
+const Wrapper: StoryFn = (args) => {
  const [value, setValue] = useState('');
  const validations = {
    [args.validationEvents]: [
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React, { useCallback } from 'react';

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Legend } from './Legend';

 <Meta title="MDX|Legend" component={Legend} />
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { RadioButtonGroup } from './RadioButtonGroup';

 <Meta title="MDX|RadioButtonGroup" component={RadioButtonGroup} />
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';

 import { RadioButtonGroup } from './RadioButtonGroup';
@@ -25,7 +25,7 @@ const meta: Meta = {
  },
 };

-export const RadioButtons: Story = (args) => {
+export const RadioButtons: StoryFn = (args) => {
  const [selected, setSelected] = useState('elastic');

  const options = [
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { RadioButtonList } from './RadioButtonList';

 <Meta title="MDX|RadioButtonList" component={RadioButtonList} />
@@ -1,4 +1,4 @@
-import { Meta, StoryFn, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';

 import { SelectableValue } from '@grafana/data';
@@ -93,7 +93,7 @@ export const WithDescriptions: StoryFn<typeof RadioButtonList> = ({ disabled, di
  </div>
 );

-export const ControlledComponent: Story<RadioButtonListProps<string>> = ({ disabled, disabledOptions }) => {
+export const ControlledComponent: StoryFn<RadioButtonListProps<string>> = ({ disabled, disabledOptions }) => {
  const [selected, setSelected] = useState<string>(defaultOptions[0].value!);

  return (
@@ -126,7 +126,7 @@ DisabledList.args = {
  disabled: true,
 };

-export const Dots: Story = () => {
+export const Dots: StoryFn = () => {
  const Wrapper = ({ title, children }: React.PropsWithChildren<{ title: string }>) => (
    <div style={{ marginBottom: 20 }}>
      <h5>{title}</h5>
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';

 import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
@@ -27,7 +27,7 @@ const story: Meta = {

 export default story;

-export const InlineToast: Story<InlineToastProps> = (args) => {
+export const InlineToast: StoryFn<InlineToastProps> = (args) => {
  const [el, setEl] = useState<null | HTMLInputElement>(null);

  return (
@@ -44,7 +44,7 @@ InlineToast.args = {
  suffixIcon: 'check',
 };

-export const WithAButton: Story<InlineToastProps> = () => {
+export const WithAButton: StoryFn<InlineToastProps> = () => {
  return (
    <ClipboardButton icon="copy" getText={() => 'hello world'}>
      Copy surprise
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { InlineToast } from './InlineToast';

 <Meta title="MDX|InlineToast" component={InlineToast} />
@@ -9,7 +9,7 @@ You can use it or regular text input. When used, AutoSizeInput resizes itself to

 ## Prefix and suffix

-To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the canvas!
+To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the Preview!

 ```jsx
 <AutoSizeInput prefix={<Icon name="search" />} />
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';

 import { Button, AutoSizeInput } from '@grafana/ui';
@@ -10,11 +10,11 @@ import { parseAccessory } from './storyUtils';

 const icons: { [key: string]: string | undefined } = { ...iconOptions };
 Object.keys(icons).forEach((key) => {
-  icons[key] = `icon-${icons[key]}`;
+  icons[`icon-${key}`] = icons[key];
 });

 const prefixSuffixOpts = {
-  Text: '$',
+  $: 'Text',
  ...icons,
 };

@@ -41,26 +41,28 @@ const meta: Meta = {
    prefixVisible: {
      control: {
        type: 'select',
-        options: prefixSuffixOpts,
+        labels: prefixSuffixOpts,
      },
+      options: Object.keys(prefixSuffixOpts),
    },
    suffixVisible: {
      control: {
        type: 'select',
-        options: prefixSuffixOpts,
+        labels: prefixSuffixOpts,
      },
+      options: Object.keys(prefixSuffixOpts),
    },
    type: {
      control: {
        type: 'select',
-        options: ['text', 'number', 'password'],
      },
+      options: ['text', 'number', 'password'],
    },
    minWidth: { control: { type: 'range', min: 10, max: 200, step: 10 } },
  },
 };

-export const Simple: Story = (args) => {
+export const Simple: StoryFn = (args) => {
  const addonAfter = <Button variant="secondary">Load</Button>;
  const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>AutoSizeInput</div>;
  const prefix = parseAccessory(args.prefixVisible);
@@ -9,7 +9,7 @@ Used for regular text input. For an array of data or tree-structured data, consi

 ## Prefix and suffix

-To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the canvas!
+To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the Preview!

 ```jsx
 <Input prefix={<Icon name="search" />} />
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React, { useState } from 'react';

 import { KeyValue } from '@grafana/data';
@@ -63,7 +63,7 @@ const meta: Meta = {
  },
 };

-export const Simple: Story = (args) => {
+export const Simple: StoryFn = (args) => {
  const addonAfter = <Button variant="secondary">Load</Button>;
  const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>Input</div>;
  const prefix = parseAccessory(args.prefixVisible);
@@ -91,7 +91,7 @@ Simple.args = {
  placeholder: 'Enter your name here...',
 };

-export const WithFieldValidation: Story = (args) => {
+export const WithFieldValidation: StoryFn = (args) => {
  const [value, setValue] = useState('');

  return (
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';

 import { Button, VerticalGroup, HorizontalGroup } from '@grafana/ui';
@@ -60,7 +60,7 @@ const meta: Meta = {

 export default meta;

-export const Horizontal: Story<LayoutProps> = (args) => {
+export const Horizontal: StoryFn<LayoutProps> = (args) => {
  return (
    <HorizontalGroup {...args}>
      <Button>Save</Button>
@@ -69,7 +69,7 @@ export const Horizontal: Story<LayoutProps> = (args) => {
  );
 };

-export const Vertical: Story<LayoutProps> = (args) => {
+export const Vertical: StoryFn<LayoutProps> = (args) => {
  return (
    <VerticalGroup {...args}>
      <Button>Save</Button>
@@ -1,4 +1,4 @@
-import { Meta, Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Preview, ArgTypes } from '@storybook/blocks';
 import { TextLink } from './TextLink';
 import { Basic } from './TextLink.story.tsx';

@@ -143,7 +143,7 @@ Both, **external** and **internal** links can show a specific icon using the `ic

 ## <a name="propstable"/>Props table

-<ArgsTable of={TextLink} />
+<ArgTypes of={TextLink} />

 ## <a name="related"/>Related

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';
 import tinycolor from 'tinycolor2';

@@ -69,7 +69,7 @@ const getItem = (inline = false) => {
  };
 };

-export const basic: Story = (args) => {
+export const basic: StoryFn = (args) => {
  const { rawRenderer, customRenderer } = getItem();
  return (
    <List
@@ -79,7 +79,7 @@ export const basic: Story = (args) => {
  );
 };

-export const inline: Story = (args) => {
+export const inline: StoryFn = (args) => {
  const { rawRenderer, customRenderer } = getItem(true);
  return (
    <InlineList
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Modal } from './Modal';
 import { ModalTabsHeader } from './ModalTabsHeader';

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { oneLineTrim } from 'common-tags';
 import React, { useState } from 'react';

@@ -46,7 +46,7 @@ const meta: Meta = {
  },
 };

-export const Basic: Story = ({ body, title, ...args }) => {
+export const Basic: StoryFn = ({ body, title, ...args }) => {
  return (
    <Modal title={title} {...args}>
      {body}
@@ -73,7 +73,7 @@ const tabs = [
  { label: '3rd child', value: 'third', active: false },
 ];

-export const WithTabs: Story = (args) => {
+export const WithTabs: StoryFn = (args) => {
  const [activeTab, setActiveTab] = useState('first');
  const modalHeader = (
    <ModalTabsHeader
@@ -103,7 +103,7 @@ WithTabs.args = {
  icon: 'cog',
 };

-export const UsingContentClassName: Story = ({ title, body, ...args }) => {
+export const UsingContentClassName: StoryFn = ({ title, body, ...args }) => {
  const override = {
    modalContent: css({
      backgroundColor: 'darkorange',
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Pagination } from './Pagination';

 <Meta title="MDX|Pagination" component={Pagination} />
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
+import { Meta, Preview } from '@storybook/blocks';
 import { PanelChrome } from './PanelChrome';

 import { action } from '@storybook/addon-actions';
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

@@ -1,6 +1,6 @@
 import { auto } from '@popperjs/core';
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';

 import { SelectableValue, toIconName } from '@grafana/data';
@@ -88,7 +88,7 @@ interface StoryProps extends Partial<SelectCommonProps<string>> {
  icon: string;
 }

-export const Basic: Story<StoryProps> = (args) => {
+export const Basic: StoryFn<StoryProps> = (args) => {
  const [value, setValue] = useState<SelectableValue<string>>();

  return (
@@ -106,7 +106,7 @@ export const Basic: Story<StoryProps> = (args) => {
  );
 };

-export const BasicVirtualizedList: Story<StoryProps> = (args) => {
+export const BasicVirtualizedList: StoryFn<StoryProps> = (args) => {
  const [value, setValue] = useState<SelectableValue<string>>();

  return (
@@ -128,7 +128,7 @@ export const BasicVirtualizedList: Story<StoryProps> = (args) => {
 /**
 * Uses plain values instead of SelectableValue<T>
 */
-export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
+export const BasicSelectPlainValue: StoryFn<StoryProps> = (args) => {
  const [value, setValue] = useState<string>();
  return (
    <>
@@ -149,7 +149,7 @@ export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
 /**
 * Uses plain values instead of SelectableValue<T>
 */
-export const SelectWithOptionDescriptions: Story = (args) => {
+export const SelectWithOptionDescriptions: StoryFn = (args) => {
  // TODO this is not working with new Select

  const [value, setValue] = useState<number>();
@@ -183,7 +183,7 @@ export const SelectWithOptionDescriptions: Story = (args) => {
 /**
 * Uses plain values instead of SelectableValue<T>
 */
-export const MultiPlainValue: Story = (args) => {
+export const MultiPlainValue: StoryFn = (args) => {
  const [value, setValue] = useState<string[]>();

  return (
@@ -201,7 +201,7 @@ export const MultiPlainValue: Story = (args) => {
  );
 };

-export const MultiSelectWithOptionGroups: Story = (args) => {
+export const MultiSelectWithOptionGroups: StoryFn = (args) => {
  const [value, setValue] = useState<string[]>();

  return (
@@ -223,7 +223,7 @@ export const MultiSelectWithOptionGroups: Story = (args) => {
  );
 };

-export const MultiSelectBasic: Story = (args) => {
+export const MultiSelectBasic: StoryFn = (args) => {
  const [value, setValue] = useState<Array<SelectableValue<string>>>([]);

  return (
@@ -249,7 +249,7 @@ MultiSelectBasic.args = {
  noMultiValueWrap: false,
 };

-export const MultiSelectAsync: Story = (args) => {
+export const MultiSelectAsync: StoryFn = (args) => {
  const [value, setValue] = useState<Array<SelectableValue<string>>>();

  return (
@@ -270,7 +270,7 @@ MultiSelectAsync.args = {
  allowCustomValue: false,
 };

-export const BasicSelectAsync: Story = (args) => {
+export const BasicSelectAsync: StoryFn = (args) => {
  const [value, setValue] = useState<SelectableValue<string>>();

  return (
@@ -288,7 +288,7 @@ export const BasicSelectAsync: Story = (args) => {
  );
 };

-export const AutoMenuPlacement: Story = (args) => {
+export const AutoMenuPlacement: StoryFn = (args) => {
  const [value, setValue] = useState<SelectableValue<string>>();

  return (
@@ -312,7 +312,7 @@ AutoMenuPlacement.args = {
  menuPlacement: auto,
 };

-export const WidthAuto: Story = (args) => {
+export const WidthAuto: StoryFn = (args) => {
  const [value, setValue] = useState<SelectableValue<string>>();

  return (
@@ -334,7 +334,7 @@ export const WidthAuto: Story = (args) => {
  );
 };

-export const CustomValueCreation: Story = (args) => {
+export const CustomValueCreation: StoryFn = (args) => {
  const [value, setValue] = useState<SelectableValue<string>>();
  const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]);
  const options = generateOptions();
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

 import { Spinner } from '@grafana/ui';
@@ -29,7 +29,7 @@ interface StoryProps extends Partial<Props> {
  withStyle: boolean;
 }

-export const Basic: Story<StoryProps> = (args) => {
+export const Basic: StoryFn<StoryProps> = (args) => {
  return (
    <div>
      <Spinner
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Switch } from './Switch';

 <Meta title="MDX|Switch" component={Switch} />
@@ -1,4 +1,4 @@
-import { ArgTypes, Preview } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/blocks';
 import { Table } from './Table';

 # Table
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';

 import { TabsBar, Tab, TabContent, Counter as TabCounter } from '@grafana/ui';
@@ -23,7 +23,7 @@ const tabs = [
  { label: '3rd child', key: 'third', active: false },
 ];

-export const Simple: Story = () => {
+export const Simple: StoryFn = () => {
  const [state, updateState] = useState(tabs);
  return (
    <DashboardStoryCanvas>
@@ -49,7 +49,7 @@ export const Simple: Story = () => {
  );
 };

-export const Counter: Story<CounterProps> = (args) => {
+export const Counter: StoryFn<CounterProps> = (args) => {
  return <TabCounter {...args} />;
 };

@@ -1,4 +1,4 @@
-import { Meta, Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Preview, ArgTypes } from '@storybook/blocks';
 import { Text } from './Text';
 import { TextLink } from '../Link/TextLink.tsx';
 import { Basic } from './Text.story.tsx';
@@ -147,4 +147,4 @@ The Text component can be truncated. However, the Text component element rendere

 ## <a name="propstable"/>Props table

-<ArgsTable of={Text} />
+<ArgTypes of={Text} />
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

 import { TextArea } from '@grafana/ui';
@@ -21,7 +21,7 @@ const meta: Meta = {
  },
 };

-export const Basic: Story = (args) => {
+export const Basic: StoryFn = (args) => {
  return (
    <div style={{ width: args.containerWidth }}>
      <TextArea invalid={args.invalid} placeholder={args.placeholder} cols={args.cols} disabled={args.disabled} />
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

 import { EmotionPerfTest } from './EmotionPerfTest';
@@ -16,11 +16,11 @@ const meta: Meta = {
  },
 };

-export const ThemeDemo: Story = () => {
+export const ThemeDemo: StoryFn = () => {
  return <NewThemeDemoComponent />;
 };

-export const PerfTest: Story = () => {
+export const PerfTest: StoryFn = () => {
  return <EmotionPerfTest />;
 };

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/blocks';
 import { UnitPicker } from './UnitPicker';

 # UnitPicker
@@ -1,10 +1,10 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

 import { UserIcon } from './UserIcon';
 import mdx from './UserIcon.mdx';

-const meta: ComponentMeta<typeof UserIcon> = {
+const meta: Meta<typeof UserIcon> = {
  title: 'General/UsersIndicator/UserIcon',
  component: UserIcon,
  argTypes: {},
@@ -28,7 +28,7 @@ const meta: ComponentMeta<typeof UserIcon> = {
  },
 };

-export const Basic: ComponentStory<typeof UserIcon> = (args) => {
+export const Basic: StoryFn<typeof UserIcon> = (args) => {
  const userView = {
    user: {
      name: 'John Smith',
@@ -1,10 +1,10 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';

 import { UsersIndicator } from './UsersIndicator';
 import mdx from './UsersIndicator.mdx';

-const meta: ComponentMeta<typeof UsersIndicator> = {
+const meta: Meta<typeof UsersIndicator> = {
  title: 'General/UsersIndicator',
  component: UsersIndicator,
  argTypes: { limit: { control: { type: 'number', min: 1 } } },
@@ -27,7 +27,7 @@ const meta: ComponentMeta<typeof UsersIndicator> = {
  },
 };

-export const Basic: ComponentStory<typeof UsersIndicator> = (args) => {
+export const Basic: StoryFn<typeof UsersIndicator> = (args) => {
  const users = [
    {
      name: 'John Doe',
@@ -50,7 +50,7 @@ Basic.args = {
  limit: 4,
 };

-export const WithManyUsers: ComponentStory<typeof UsersIndicator> = (args) => {
+export const WithManyUsers: StoryFn<typeof UsersIndicator> = (args) => {
  const users = [
    {
      name: 'John Doe',
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { ValuePicker } from './ValuePicker';

 <Meta title="MDX|Button" component={ValuePicker} />
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useEffect, useState } from 'react';

 import { VizLayout } from './VizLayout';
@@ -25,7 +25,7 @@ const createArray = (legendItems: number) => {
  return newArray;
 };

-export const BottomLegend: Story = ({ height, width, legendItems }) => {
+export const BottomLegend: StoryFn = ({ height, width, legendItems }) => {
  const [items, setItems] = useState(createArray(legendItems));
  useEffect(() => {
    setItems(createArray(legendItems));
@@ -55,7 +55,7 @@ BottomLegend.args = {
  legendItems: 2,
 };

-export const RightLegend: Story = ({ height, width, legendItems, legendWidth }) => {
+export const RightLegend: StoryFn = ({ height, width, legendItems, legendWidth }) => {
  const [items, setItems] = useState(createArray(legendItems));
  useEffect(() => {
    setItems(createArray(legendItems));
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import React, { FC, useEffect, useState } from 'react';

 import { DisplayValue, GrafanaTheme2 } from '@grafana/data';
@@ -73,7 +73,7 @@ const LegendStoryDemo: FC<LegendStoryDemoProps> = ({ displayMode, seriesCount, n
  );
 };

-export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
+export const WithNoValues: StoryFn = ({ containerWidth, seriesCount }) => {
  return (
    <div style={{ width: containerWidth }}>
      <LegendStoryDemo
@@ -98,7 +98,7 @@ export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
  );
 };

-export const WithValues: Story = ({ containerWidth, seriesCount }) => {
+export const WithValues: StoryFn = ({ containerWidth, seriesCount }) => {
  const stats: DisplayValue[] = [
    {
      title: 'Min',
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';

 import { GraphSeriesXY, FieldType, dateTime, FieldColorModeId } from '@grafana/data';
@@ -97,7 +97,7 @@ interface StoryProps extends GraphWithLegendProps {
  displayMode: string;
 }

-export const WithLegend: Story<StoryProps> = ({ rightAxisSeries, displayMode, legendDisplayMode, ...args }) => {
+export const WithLegend: StoryFn<StoryProps> = ({ rightAxisSeries, displayMode, legendDisplayMode, ...args }) => {
  const props: Partial<GraphWithLegendProps> = {
    series: series.map((s) => {
      if (
@@ -1,11 +1,11 @@
 import { getAvailableIcons } from '../../types';

-export const iconOptions = {
+export const iconOptions: Record<string, string | undefined> = {
  None: undefined,
  ...getAvailableIcons().reduce<Record<string, string>>((prev, c) => {
    return {
      ...prev,
-      [`Icon: ${c}`]: `${c}`,
+      [`${c}`]: `Icon: ${c}`,
    };
  }, {}),
 };
@@ -1 +1,4 @@
-export const SpacingTokenControl = { control: 'select', options: [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10] };
+export const SpacingTokenControl = {
+  control: 'select' as const,
+  options: [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10],
+};
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { DecoratorFn } from '@storybook/react';
+import { Args, Decorator } from '@storybook/react';
 import React from 'react';

 interface Props {
@@ -43,13 +43,9 @@ const StoryContainer = ({ width, height, showBoundaries, children }: React.Props
  );
 };

-export const withStoryContainer: DecoratorFn = (story, context) => {
+export const withStoryContainer: Decorator<Args> = (story, { args }) => {
  return (
-    <StoryContainer
-      width={context.args.containerWidth}
-      height={context.args.containerHeight}
-      showBoundaries={context.args.showBoundaries}
-    >
+    <StoryContainer width={args.containerWidth} height={args.containerHeight} showBoundaries={args.showBoundaries}>
      {story()}
    </StoryContainer>
  );
@@ -1,4 +1,4 @@
-import { DecoratorFn } from '@storybook/react';
+import { Decorator } from '@storybook/react';
 import React from 'react';
 import { useDarkMode } from 'storybook-dark-mode';

@@ -51,6 +51,6 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
 };

 export const withTheme =
-  (handleSassThemeChange: SassThemeChangeHandler): DecoratorFn =>
+  (handleSassThemeChange: SassThemeChangeHandler): Decorator =>
  // eslint-disable-next-line react/display-name
  (story) => <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';

 import { useDelayedSwitch } from './useDelayedSwitch';
@@ -7,7 +7,7 @@ export default {
  title: 'useDelayedSwitch',
 };

-export const Basic: Story = ({ value, delay, duration }) => {
+export const Basic: StoryFn = ({ value, delay, duration }) => {
  const valueDelayed = useDelayedSwitch(value, { delay, duration });
  return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
 };
@@ -34,7 +34,7 @@
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
    "@types/prismjs": "1.26.4",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "@types/testing-library__jest-dom": "5.14.9",
    "react-select-event": "5.5.1",
@@ -36,7 +36,7 @@
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
    "@types/prismjs": "1.26.4",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "@types/react-test-renderer": "18.3.0",
    "@types/testing-library__jest-dom": "5.14.9",
@@ -23,7 +23,7 @@
    "@types/jest": "29.5.12",
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/testing-library__jest-dom": "5.14.9",
    "ts-node": "10.9.2",
    "typescript": "5.4.5",
@@ -29,7 +29,7 @@
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
    "@types/prismjs": "1.26.4",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "@types/testing-library__jest-dom": "5.14.9",
    "css-loader": "7.1.1",
@@ -31,7 +31,7 @@
    "@types/jest": "29.5.12",
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "@types/testing-library__jest-dom": "5.14.9",
    "@types/uuid": "9.0.8",
@@ -32,7 +32,7 @@
    "@types/lodash": "4.17.1",
    "@types/logfmt": "^1.2.3",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "@types/react-window": "1.8.8",
    "@types/uuid": "9.0.8",
@@ -23,7 +23,7 @@
    "@types/jest": "29.5.12",
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/testing-library__jest-dom": "5.14.9",
    "ts-node": "10.9.2",
    "typescript": "5.4.5",
@@ -24,7 +24,7 @@
    "@testing-library/user-event": "14.5.2",
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "ts-node": "10.9.2",
    "typescript": "5.4.5",
@@ -48,7 +48,7 @@
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
    "@types/prismjs": "1.26.4",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "@types/semver": "7.5.8",
    "@types/uuid": "9.0.8",
@@ -26,7 +26,7 @@
    "@types/jest": "29.5.12",
    "@types/lodash": "4.17.1",
    "@types/node": "20.12.11",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.2",
    "@types/react-dom": "18.2.25",
    "ts-node": "10.9.2",
    "typescript": "5.4.5",
--- a/Show More
+++ b/Show More