Update deps (#1986)

Author: kylemh

.eslintrc.js

@@ -2,6 +2,7 @@
  * @type {import("eslint").Linter.Config}
  */
 module.exports = {
+  ignorePatterns: ['next-env.d.ts'],
   extends: [
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:react/recommended',
@@ -167,7 +168,7 @@ module.exports = {
         'vitest/consistent-test-it': ['error', { fn: 'it', withinDescribe: 'it' }],
         'vitest/expect-expect': [
           'error',
-          { assertFunctionNames: ['expect', 'createShallowSnapshotTest', 'createSnapshotTest'] },
+          { assertFunctionNames: ['expect', 'createSnapshotTest'] },
         ],
         'vitest/prefer-lowercase-title': ['error', { ignore: ['describe'] }],
         'vitest/no-test-prefixes': 'error',

.nvmrc

@@ -1 +1 @@
-22
+24

.storybook/OCTheme.js

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create';
+import { create } from 'storybook/theming/create';
 
 export default create({
   base: 'dark',

.storybook/main.ts

@@ -1,4 +1,4 @@
-const svgoConfig = require('../common/config/svgo');
+import svgoConfig from '../common/config/svgo';
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
@@ -7,14 +7,11 @@ const config: StorybookConfig = {
     '../components/**/__stories__/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   staticDirs: ['../public'],
-  addons: [
-    '@storybook/addon-essentials',
-    {
-      name: '@storybook/addon-styling',
-      /** @see https://storybook.js.org/recipes/tailwindcss#:~:text=then%20leave%20the%20options%20object%20empty. */
-      options: {},
-    },
-  ],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
   webpackFinal: async config => {
     // Find the Storybook Webpack rule relevant to SVG files.
     // @ts-expect-error => 'config.module' is possibly 'undefined'.ts(18048)
@@ -48,13 +45,6 @@ const config: StorybookConfig = {
 
     return config;
   },
-  framework: {
-    name: '@storybook/nextjs',
-    options: {},
-  },
-  docs: {
-    autodocs: true,
-  },
 };
 
 export default config;

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from 'storybook/manager-api';
 import OCTheme from './OCTheme';
 
 addons.setConfig({

.storybook/preview.js

@@ -1,5 +1,5 @@
 import 'common/styles/globals.css';
-import * as viewports from '@storybook/addon-viewport';
+import { MINIMAL_VIEWPORTS, INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 export const decorators = [
   Story => (
@@ -9,13 +9,14 @@ export const decorators = [
   ),
 ];
 
+export const tags = ['autodocs'];
+
 const preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     viewport: {
       viewports: {
-        ...viewports.MINIMAL_VIEWPORTS,
-        ...viewports.INITIAL_VIEWPORTS,
+        ...MINIMAL_VIEWPORTS,
+        ...INITIAL_VIEWPORTS,
       },
     },
   },

components/Accordion/__stories__/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
 import Accordion from '../Accordion';
 
 type AccordionStoryType = StoryObj<typeof Accordion>;

components/Accordion/__tests__/Accordion.test.tsx

@@ -1,18 +1,23 @@
 import { fireEvent, render } from '@testing-library/react';
-import { composeStory } from '@storybook/react';
 import {
   ACCORDION_CONTENT,
   ACCORDION_TOGGLE_BUTTON,
   SCREEN_READER_ONLY,
 } from 'common/constants/testIDs';
 import { toggleMessages } from '../../ScreenReaderOnly/ScreenReaderOnly';
-import meta, { Default } from '../__stories__/Accordion.stories';
+import Accordion from '../Accordion';
 
-const AccordionStory = composeStory(Default, meta);
+const defaultProps = {
+  accessibilityId: '1',
+  content: {
+    headingChildren: <h5>Can be JSX</h5>,
+    bodyChildren: <p>Can also be JSX</p>,
+  },
+};
 
 describe('Accordion', () => {
   it('should render invisible text that turns visible on toggle click', async () => {
-    const component = render(<AccordionStory />);
+    const component = render(<Accordion {...defaultProps} />);
     const Content = component.queryByTestId(ACCORDION_CONTENT);
 
     expect(Content?.classList.contains('hidden')).toBe(true);
@@ -25,7 +30,7 @@ describe('Accordion', () => {
 
 describe('Accordion Accessibility', () => {
   it('should display the correct screenReader text for toggle button', async () => {
-    const component = render(<AccordionStory />);
+    const component = render(<Accordion {...defaultProps} />);
     const Button = component.queryByTestId(SCREEN_READER_ONLY)!;
 
     expect(Button.textContent).toBe(toggleMessages.open);

components/Alert/__stories__/Alert.stories.tsx

@@ -1,11 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { fn } from 'storybook/test';
 import Alert from '../Alert';
 
 type AlertStoryType = StoryObj<typeof Alert>;
 
 const meta: Meta<typeof Alert> = {
   title: 'Alert',
   component: Alert,
+  args: {
+    onClose: fn(),
+  },
 };
 
 export default meta;

components/Alert/__tests__/Alert.test.tsx

@@ -1,22 +1,21 @@
 import { fireEvent, render } from '@testing-library/react';
-import { composeStory } from '@storybook/react';
 import createSnapshotTest from 'test-utils/createSnapshotTest';
 import { ALERT_CLOSE_BUTTON } from 'common/constants/testIDs';
-import meta, { ErrorAlert, SuccessAlert, WarningAlert } from '../__stories__/Alert.stories';
-
-const ErrorAlertStory = composeStory(ErrorAlert, meta);
-const SuccessAlertStory = composeStory(SuccessAlert, meta);
-const WarningAlertStory = composeStory(WarningAlert, meta);
+import Alert from '../Alert';
 
 describe('Alert', () => {
   it('should render error alert with required props', () => {
-    createSnapshotTest(<ErrorAlertStory />);
+    createSnapshotTest(<Alert type="error">Error Alert JSX or Text</Alert>);
   });
 
   it('should call close handler when close alert button clicked', () => {
     const onCloseMock = vi.fn();
 
-    const { queryByTestId } = render(<SuccessAlertStory onClose={onCloseMock} />);
+    const { queryByTestId } = render(
+      <Alert type="success" onClose={onCloseMock}>
+        Success Alert JSX or Text
+      </Alert>,
+    );
 
     expect(onCloseMock).toHaveBeenCalledTimes(0);
 
@@ -26,7 +25,7 @@ describe('Alert', () => {
   });
 
   it('should NOT render button if close handler not provided', () => {
-    const { queryByTestId } = render(<WarningAlertStory />);
+    const { queryByTestId } = render(<Alert type="warning">Warning Alert JSX or Text</Alert>);
 
     expect(queryByTestId(ALERT_CLOSE_BUTTON)).toBeNull();
   });