upgrade TipTap and Storybook

.storybook/main.js

@@ -1,44 +1,33 @@
 const config = {
-  addons: [{
-    name: '@storybook/addon-docs',
-    options: {
-      jsxOptions: {
-        babelrc: true,
-        configFile: true
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-webpack5-compiler-babel',
+    {
+      name: "@storybook/addon-styling-webpack",
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve("style-loader"),
+              {
+                loader: require.resolve("css-loader"),
+                options: {},
+              },
+            ],
+          },
+        ],
       }
     }
-  }, '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-backgrounds', '@storybook/addon-controls', '@storybook/addon-links', '@storybook/addon-storysource', '@storybook/addon-webpack5-compiler-babel', ({
-    name: "@storybook/addon-styling-webpack",
-
-    options: {
-      rules: [{
-    test: /\.css$/,
-    sideEffects: true,
-    use: [
-        require.resolve("style-loader"),
-        {
-            loader: require.resolve("css-loader"),
-            options: {
-
-
-            },
-        },
-    ],
-  },],
-    }
-  })],
+  ],
   docs: {
     autodocs: true,
     defaultName: 'Docs',
   },
   stories: [
-    '../stories/Intro.stories.jsx',
-    '../src/**/*.stories.@(js|mdx)',
-    '../src/**/*.stories.@(ts|mdx)',
-    '../src/**/*.stories.js[x]',
-    '../src/**/*.stories.ts[x]',
-    '../stories/**/*.stories.js[x]',
-    '../stories/**/*.stories.ts[x]'
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../stories/**/*.stories.@(js|jsx)',
   ],
   framework: {
     name: '@storybook/react-webpack5',
@@ -47,6 +36,24 @@ const config = {
   typescript: {
     check: true,
   },
+  webpackFinal: async (config) => {
+    // Add MDX loader
+    config.module.rules.push({
+      test: /\.mdx?$/,
+      use: [
+        {
+          loader: require.resolve('@storybook/mdx2-csf/loader'),
+          options: {
+            mdxCompileOptions: {
+              remarkPlugins: [],
+              rehypePlugins: [],
+            },
+          },
+        },
+      ],
+    });
+    return config;
+  },
 };
 
 export default config;

.storybook/user-interviews-theme.js

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 import UILogo from '../public/ui-design-system-light.svg';
 
 export default create({

.storybook/webpack.config.js

@@ -13,7 +13,15 @@ module.exports = function({ config }) {
           }
         }
       },
-      'sass-loader'
+      {
+        loader: 'sass-loader',
+        options: {
+          sassOptions: {
+            quietDeps: true,
+            silenceDeprecations: ['import'],
+          },
+        },
+      }
     ],
     include: path.resolve(__dirname, '../')
   },

package.json

@@ -2,23 +2,26 @@
   "name": "@user-interviews/ui-design-system",
   "version": "6.1.0",
   "dependencies": {
-    "@tiptap/core": "^2.11.3",
-    "@tiptap/extension-bold": "^2.11.3",
-    "@tiptap/extension-bullet-list": "^2.11.3",
-    "@tiptap/extension-character-count": "^2.11.3",
-    "@tiptap/extension-document": "^2.11.3",
-    "@tiptap/extension-hard-break": "^2.11.3",
-    "@tiptap/extension-history": "^2.11.3",
-    "@tiptap/extension-italic": "^2.11.3",
-    "@tiptap/extension-link": "^2.11.3",
-    "@tiptap/extension-list-item": "^2.11.3",
-    "@tiptap/extension-ordered-list": "^2.11.3",
-    "@tiptap/extension-paragraph": "^2.11.3",
-    "@tiptap/extension-placeholder": "^2.11.3",
-    "@tiptap/extension-text": "^2.11.3",
-    "@tiptap/pm": "^2.11.3",
-    "@tiptap/react": "^2.11.3",
-    "@tiptap/suggestion": "^2.11.3",
+    "@storybook/blocks": "^8.6.14",
+    "@tiptap/core": "^3.0.9",
+    "@tiptap/extension-bold": "^3.0.9",
+    "@tiptap/extension-bullet-list": "^3.0.9",
+    "@tiptap/extension-character-count": "^3.0.9",
+    "@tiptap/extension-document": "^3.0.9",
+    "@tiptap/extension-hard-break": "^3.0.9",
+    "@tiptap/extension-history": "^3.0.9",
+    "@tiptap/extension-italic": "^3.0.9",
+    "@tiptap/extension-link": "^3.0.9",
+    "@tiptap/extension-list": "^3.0.9",
+    "@tiptap/extension-list-item": "^3.0.9",
+    "@tiptap/extension-ordered-list": "^3.0.9",
+    "@tiptap/extension-paragraph": "^3.0.9",
+    "@tiptap/extension-placeholder": "^3.0.9",
+    "@tiptap/extension-text": "^3.0.9",
+    "@tiptap/extensions": "^3.0.9",
+    "@tiptap/pm": "^3.0.9",
+    "@tiptap/react": "^3.0.9",
+    "@tiptap/suggestion": "^3.0.9",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "react-bootstrap": "^2.10.10",
@@ -100,19 +103,19 @@
     "@fortawesome/pro-regular-svg-icons": "^6.5.2",
     "@fortawesome/pro-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mdx-js/react": "^3.0.0",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-backgrounds": "^8.6.14",
-    "@storybook/addon-controls": "^8.6.14",
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/addon-jest": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-storysource": "^8.6.14",
-    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-a11y": "^9.1.1",
+    "@storybook/addon-backgrounds": "^9.0.8",
+    "@storybook/addon-controls": "^9.0.8",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-jest": "^9.1.1",
+    "@storybook/addon-links": "^9.1.1",
+    "@storybook/addon-styling-webpack": "^2.0.0",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
+    "@storybook/mdx2-csf": "^1.0.0",
+    "@storybook/react": "^9.1.1",
+    "@storybook/react-webpack5": "^9.1.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -157,8 +160,7 @@
     "react-tracking": "^9.3.2",
     "sass": "^1.89.2",
     "sass-loader": "^16.0.5",
-    "storybook": "^8.6.14",
-    "storybook-addon-designs": "6.3.1",
+    "storybook": "^9.1.1",
     "style-loader": "^4.0.0",
     "typescript": "^5.8.3",
     "webpack": "^5.100.2",

src/Alert/Alert.stories.tsx

@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import { action } from '@storybook/addon-actions';
 
 import { Alert, MessageTypes } from 'src/Alert';
 
@@ -75,72 +74,29 @@ export function Warning() {
   );
 }
 
-const onDismiss = (id) => {
-  action('alert dismissed')(id);
-};
-
 export function WithDismiss() {
   return (
     <Alert
       id="6"
       message="Default message"
       removeBorderLeft={false}
       title="Default title"
-      type={MessageTypes.SUCCESS}
-      onDismiss={onDismiss}
+      type={MessageTypes.SUCCESS}  
+      onDismiss={() => {}}
     />
   );
 }
 
 export function WithCallToAction() {
   return (
-    <>
-      <p>Default CTA rendered by component</p>
-      <Alert
-        action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
-        id="8"
-        message="Success message"
-        removeBorderLeft={false}
-        title="Success title"
-        type={MessageTypes.SUCCESS}
-        onDismiss={onDismiss}
-      />
-      <Alert
-        action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
-        id="9"
-        message="Info message"
-        removeBorderLeft={false}
-        title="Info title"
-        type={MessageTypes.INFO}
-        onDismiss={onDismiss}
-      />
-      <Alert
-        action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
-        id="11"
-        message="Error message"
-        removeBorderLeft={false}
-        title="Error title"
-        type={MessageTypes.ERROR}
-        onDismiss={onDismiss}
-      />
-      <Alert
-        action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
-        id="12"
-        message="Warning message"
-        removeBorderLeft={false}
-        title="Warning title"
-        type={MessageTypes.WARNING}
-        onDismiss={onDismiss}
-      />
-      <Alert
-        action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
-        id="13"
-        message="Some context around new feature if needed"
-        removeBorderLeft={false}
-        title="New feature alert!"
-        type={MessageTypes.FEATURE}
-        onDismiss={onDismiss}
-      />
-    </>
+    <Alert
+      action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
+      id="7"
+      message="Alert with call to action"
+      removeBorderLeft={false}
+      title="CTA title"
+      type={MessageTypes.INFO}
+      onDismiss={() => {}}
+    />
   );
 }

src/Dropdown/Dropdown.mdx

@@ -1,5 +1,4 @@
 import { ArgTypes,  Canvas } from '@storybook/blocks';
-import { Figma } from "storybook-addon-designs/blocks"
 import Dropdown from './Dropdown';
 import * as ComponentStories from './Dropdown.stories';
 

src/Form/Form.stories.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
 
 import Button from '../Button';
 import Form from '.';
@@ -23,7 +22,6 @@ export default {
 
 const onSubmit = (event) => {
   event.preventDefault();
-  action('form submitted')(event);
 };
 
 function InputComponent(props) {

src/FormControlLabel/FormControlLabel.stories.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
 
 import FormControlLabel from '.';
 import CheckboxButton from '../CheckboxButton';
@@ -14,7 +13,6 @@ function FormControlLabelControlComponent(props) {
   const [value, setValue] = useState(false);
   const onChange = (e) => {
     setValue(e.target.checked);
-    action('Control onChange')(e);
   };
 
   return (

src/Modal/Modal.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import Button from '../Button';
 import Input from '../Input';
 import {
@@ -17,7 +16,7 @@ export default {
   },
 };
 
-const handleRequestClose = () => action('Close');
+const handleRequestClose = () => {};
 
 export function Default() {
   return (

src/Pill/Pill.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import {
  faClock, faGiftCard, faGlobe, faMicrophone, faUsers,
 } from '../font_awesome/solid';
@@ -17,9 +16,7 @@ export default {
   },
 };
 
-const handleClose = (id) => {
-  action('handle close')(id);
-};
+const handleClose = () => {};
 
 export function Default() {
   return (

src/RichTextEditor/RichTextEditor.tsx

@@ -234,7 +234,7 @@ const RichTextEditor = forwardRef((
         {
           !!characterLimit && (
             <p className="RichTextEditor__character-count">
-              {editor.storage.characterCount.characters()}/{characterLimit}
+              {(editor.storage as any).characterCount?.characters() || 0}/{characterLimit}
             </p>
           )
         }