OPHJOD-1010: Update storybook to 8.4.2

.storybook/main.ts

@@ -9,23 +9,33 @@ const config: StorybookConfig = {
       titlePrefix: 'Components',
     },
   ],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     '@storybook/addon-themes',
     '@storybook/addon-designs',
+    '@storybook/addon-mdx-gfm',
+    '@chromatic-com/storybook',
   ],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
+
   core: {
     disableTelemetry: true,
   },
+
   docs: {
     defaultName: 'Documentation',
   },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 export default config;

.storybook/preview.ts

@@ -58,6 +58,7 @@ const preview: Preview = {
       },
     },
   },
+
   decorators: [
     withThemeByClassName<ReactRenderer>({
       themes: {
@@ -67,6 +68,8 @@ const preview: Preview = {
       defaultTheme: 'light',
     }),
   ],
+
+  tags: ['autodocs'],
 };
 
 export default preview;

lib/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
 import type { Placement } from '@floating-ui/react';
 import React from 'react';
+import { TooltipContext } from './TooltipContext';
 import { useTooltip } from './utils';
 
 export interface TooltipOptions {
@@ -13,10 +14,6 @@ export interface TooltipProps extends TooltipOptions {
   children?: React.ReactNode;
 }
 
-type ContextType = ReturnType<typeof useTooltip> | null;
-
-export const TooltipContext = React.createContext<ContextType>(null);
-
 /** Tooltips show contextual help or information about specific components when a user hovers or focuses on them. */
 export function Tooltip({ children, ...options }: TooltipProps) {
   const tooltip = useTooltip(options);

lib/components/Tooltip/TooltipContext.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { useTooltip } from './utils';
+
+// Separate file for TooltipContext to avoid ESLint "Fast refresh" error
+type ContextType = ReturnType<typeof useTooltip> | null;
+export const TooltipContext = React.createContext<ContextType>(null);

lib/components/Tooltip/utils.ts

@@ -12,7 +12,8 @@ import {
   useRole,
 } from '@floating-ui/react';
 import React from 'react';
-import { TooltipContext, TooltipOptions } from './Tooltip';
+import { TooltipOptions } from './Tooltip';
+import { TooltipContext } from './TooltipContext';
 
 export const ARROW_HEIGHT = 12;
 export const GAP = 0;