chore: upgrade Storybook 8 to 9

.storybook/main.js

@@ -6,17 +6,12 @@ module.exports = {
   ],
 
   addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-controls',
-    '@storybook/addon-actions',
-    'storybook-source-link',
     '@storybook/addon-webpack5-compiler-babel',
     '@chromatic-com/storybook',
-    '@storybook/addon-viewport',
     {
       name: '@storybook/addon-a11y',
       options: {
-        element: '#story-root',
+        context: '#story-root',
       },
     },
   ],

.storybook/manager.js

@@ -1,7 +1,43 @@
-import { addons } from '@storybook/manager-api';
-import { create } from '@storybook/theming/create';
+import React from 'react';
+import { addons, types, useParameter } from 'storybook/manager-api';
+import { IconButton } from 'storybook/internal/components';
+import { create } from 'storybook/theming/create';
 import pkg from '../package.json';
 
+const ADDON_ID = 'storybook/source-link';
+
+const SourceLinkTool = () => {
+  const sourceLink = useParameter('sourceLink', null);
+  const prefix = useParameter('sourceLinkPrefix', null);
+  const link = sourceLink ? (prefix ? `${prefix}${sourceLink}` : sourceLink) : null;
+
+  if (!link) return null;
+
+  return (
+    <IconButton title={`View source: ${link}`} onClick={() => window.open(link)}>
+      <svg viewBox="0 0 14 14" width="14" height="14" style={{ marginRight: 4 }}>
+        <path
+          d="M3.5 1.75a.25.25 0 0 1 .25-.25h6.5a.25.25 0 0 1 .25.25v8.5a.25.25 0 0 1-.25.25h-6.5a.25.25 0 0 1-.25-.25V1.75Z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path d="M5.75 4h2.5M5.75 6.5h2.5" stroke="currentColor" strokeWidth="1" />
+      </svg>
+      Source
+    </IconButton>
+  );
+};
+
+addons.register(ADDON_ID, () => {
+  addons.add(`${ADDON_ID}/tool`, {
+    type: types.TOOLEXTRA,
+    title: 'Source Link',
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: SourceLinkTool,
+  });
+});
+
 addons.setConfig({
   theme: create({
     base: 'dark',

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 24.11.0
+nodejs 24.13.1
 yarn 1.22.18

package.json

@@ -85,19 +85,13 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@chromatic-com/storybook": "^5.1.2",
+    "@chromatic-com/storybook": "^4.1.3",
     "@jest/types": "^30",
-    "@storybook/addon-a11y": "^8.6.18",
-    "@storybook/addon-actions": "^8.6.18",
-    "@storybook/addon-controls": "^8.6.18",
-    "@storybook/addon-essentials": "^8.6.18",
-    "@storybook/addon-links": "^8.6.18",
-    "@storybook/addon-viewport": "^8.6.18",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/manager-api": "^8.6.18",
-    "@storybook/react": "^8.6.18",
-    "@storybook/react-webpack5": "^8.6.18",
-    "@storybook/theming": "^8.6.18",
+    "@storybook/addon-a11y": "^9.1.20",
+    "@storybook/addon-links": "^9.1.20",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
+    "@storybook/react": "^9.1.20",
+    "@storybook/react-webpack5": "^9.1.20",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^11.2.6",
@@ -147,10 +141,9 @@
     "react-dom": "^16.14.0",
     "regenerator-runtime": "^0.13.7",
     "sinon": "^9.2.1",
-    "storybook": "^8.6.18",
-    "storybook-source-link": "^4.0.1",
+    "storybook": "^9.1.20",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.3",
+    "typescript": "^4.9.5",
     "uncontrollable": "^4.1.0"
   },
   "resolutions": {

src/components/Activity/Activity.stories.js

@@ -1,4 +1,4 @@
-import { action as sbAction } from '@storybook/addon-actions';
+import { action as sbAction } from 'storybook/actions';
 import React from 'react';
 import { colors } from '../../tooling/colors';
 import Activity from './Activity';

src/components/Address/AddressInput.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import Label from '../Label/Label';
 import AddressInput from './AddressInput';

src/components/Address/CountryInput.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import CountryInput from './CountryInput';
 

src/components/Address/InternationalAddressInput.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import uncontrollable from 'uncontrollable';
 import InternationalAddressInput from './InternationalAddressInput';

src/components/Address/StateInput.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import StateInput from './StateInput';
 

src/components/Alert/Alert.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import { colors } from '../../tooling/colors';
 import Alert from './Alert';

src/components/BlockPanel/BlockPanel.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import Button from '../Button/Button';
 import ButtonGroup from '../Button/ButtonGroup';

src/components/Button/Button.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import { buttonColors } from '../../tooling/colors';
 import DropdownItem from '../Dropdown/DropdownItem';

src/components/Calendar/Calendar.stories.tsx

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import Calendar from './Calendar';
 

src/components/Calendar/MonthCalendar.stories.tsx

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import MonthCalendar from './MonthCalendar';

src/components/Checkbox/CheckboxGroup.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React, { useState } from 'react';
 import CheckboxGroup from './CheckboxGroup';
 

src/components/Checkbox/CheckboxListInput.tsx

@@ -34,7 +34,7 @@ class CheckboxListInput extends React.Component<CheckboxListInputProps> {
           children,
           (choice) =>
             React.isValidElement(choice) &&
-            React.cloneElement(choice, {
+            React.cloneElement(choice as React.ReactElement<any>, {
               type: 'checkbox',
               selected: value,
               onChange: this.onChange,

src/components/Combobox/Combobox.tsx

@@ -80,7 +80,7 @@ function Combobox<T>({
 
   const grouped = !!(optionsProp[0] as OptionGroup<T>)?.options;
   const options: Option<T>[] = useMemo(() => {
-    if (optionsProp === [] || !optionsProp) {
+    if (!optionsProp || optionsProp.length === 0) {
       return [];
     }
 

src/components/Dropdown/Dropdown.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import { colors } from '../../tooling/colors';
 import Dropdown from './Dropdown';

src/components/ExpandableSection/ExpandableSection.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import Button from '../Button/Button';
 import ExpandableSection from './ExpandableSection';

src/components/FeedbackButton/FeedbackButton.stories.tsx

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { buttonColors } from '../../tooling/colors';

src/components/FilterList/FilterList.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import FilterList from './FilterList';
 

src/components/Form/Form.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import AddressInput from '../Address/AddressInput';
 import CountryInput from '../Address/CountryInput';

src/components/Form/FormRow.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React, { useState } from 'react';
 import FormChoice from './FormChoice';
 import FormRow from './FormRow';

src/components/Form/FormRow.tsx

@@ -90,7 +90,9 @@ function FormRow<T extends TypeProp>({
       inputCouldHaveChildren
         ? React.Children.map(
             children,
-            (child) => React.isValidElement(child) && React.cloneElement(child, { type })
+            (child) =>
+              React.isValidElement(child) &&
+              React.cloneElement(child as React.ReactElement<any>, { type })
           )
         : undefined,
     [inputCouldHaveChildren, children, type]

src/components/HasManyFields/HasManyFields.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import AddressInput from '../Address/AddressInput';
 import Input from '../Input/Input';

src/components/Input/CreditCardNumber.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import uncontrollable from 'uncontrollable';
 import CreditCardNumber from './CreditCardNumber';

src/components/Input/CurrencyInput.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import CurrencyInput from './CurrencyInput';
 

src/components/Input/DateInput.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import classNames from 'classnames';
 import React from 'react';
 import Calendar from '../Calendar/Calendar';

src/components/Input/MonthInput.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import FormRow from '../Form/FormRow';
 import Icon from '../Icon/Icon';

src/components/Input/TimeInput.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import FormRow from '../Form/FormRow';
 import TimeInput from './TimeInput';

src/components/LabelBadge/LabelBadge.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import LabelBadge from './LabelBadge';
 

src/components/List/List.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React, { useState, useEffect } from 'react';
 import Label from '../Label/Label';
 import List from './List';

src/components/List/ListGroup.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import { colors } from '../../tooling/colors';
 import ListGroup from './ListGroup';

src/components/List/SortableList.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React, { useState } from 'react';
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';

src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { states } from '../../tooling/comboboxData';

src/components/Nav/Nav.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import Nav from './Nav';
 import NavItem from './NavItem';

src/components/Note/Note.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React, { useState } from 'react';
 import EditableNote from './EditableNote';
 import EditableNoteMentions from './EditableNoteMentions';

src/components/Note/Notes.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import Note from './Note';
 import Notes from './Notes';

src/components/Pagination/Paginator.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import Paginator from './Paginator';
 

src/components/Popover/Popover.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React, { useState } from 'react';
 import Button from '../Button/Button';
 import Popover from './Popover';

src/components/Radio/RadioGroup.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React, { useState } from 'react';
 import RadioGroup from './RadioGroup';
 

src/components/Select/Select.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import COUNTRIES from '../Address/util/Countries';
 import Select from './Select';

src/components/Steps/Steps.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import React from 'react';
 import Steps from './Steps';
 

src/components/Table/SortableTable.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import fecha from 'fecha';
 import React from 'react';
 import SortableTable from './SortableTable';

src/components/Table/UncontrolledTable.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import fecha from 'fecha';
 import React from 'react';
 import Button from '../Button/Button';