SELF-482: Upgrade Storybook

.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [
     '@storybook/addon-links',
@@ -15,7 +15,5 @@ module.exports = {
     options: {}
   },
 
-  docs: {
-    autodocs: true
-  }
+  docs: {}
 };

.storybook/preview.js

@@ -32,3 +32,4 @@ export const parameters = {
   },
   layout: 'centered'
 };
+export const tags = ['autodocs'];

package.json

@@ -47,14 +47,13 @@
     "vue-router": "^4.0.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@storybook/addon-a11y": "^7.6.12",
-    "@storybook/addon-actions": "^7.6.12",
-    "@storybook/addon-docs": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/vue3": "^7.6.12",
-    "@storybook/vue3-vite": "^7.6.12",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-docs": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/vue3": "^8.2.9",
+    "@storybook/vue3-vite": "^8.2.9",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/user-event": "^14.0.4",
     "@testing-library/vue": "^6.5.1",
@@ -63,7 +62,6 @@
     "@vitest/coverage-c8": "^0.23.4",
     "@vue/test-utils": "^2.0.0-rc.19",
     "autoprefixer": "^10.4.5",
-    "babel-loader": "^9.1.3",
     "eslint": "^8.57.0",
     "eslint-config-lob": "^5.2.0",
     "eslint-config-prettier": "^8.8.0",
@@ -74,11 +72,9 @@
     "prettier": "^3.0.0",
     "prettier-eslint": "^15.0.1",
     "prettier-stylelint": "^0.4.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "sass": "^1.53.0",
     "sass-loader": "^11.1.1",
-    "storybook": "^7.6.12",
+    "storybook": "^8.2.9",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "tailwind-plugin-lob": "^1.0.9",
@@ -88,7 +84,7 @@
     "vite-plugin-dts": "^4.1.0",
     "vitest": "^0.23.4",
     "vue-eslint-parser": "^9.4.2",
-    "vue-tsc": "^2.0.13"
+    "vue-tsc": "^2.1.6"
   },
   "peerDependencies": {
     "vue-i18n": "^9.0.0"

src/components/Accordion/Accordion.mdx

@@ -1,6 +1,9 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
+import * as AccordionStories from './Accordion.stories';
 import { Primary } from './Accordion.stories';
 
+<Meta of={AccordionStories} />
+
 # Accordion
 
 Accordions are vertically collapsing components used for displaying or hiding large chunks of content

src/components/AdvancedSearchBar/AdvancedSearchBar.mdx

@@ -1,6 +1,9 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
+import * as AdvancedSearchBarStories from './AdvancedSearchBar.stories';
 import { Primary } from './AdvancedSearchBar.stories';
 
+<Meta of={AdvancedSearchBarStories} />
+
 # AdvancedSearchBar
 
 This Advanced Search Bar component is designed to render an input for the user to enter their search term and then return multi tabled search from Recipients, Campaigns and Templates.

src/components/Alert/Alert.mdx

@@ -1,6 +1,9 @@
-import { Canvas, ArgTypes } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, Meta } from '@storybook/addon-docs';
+import * as AlertStories from './Alert.stories';
 import { Primary } from './Alert.stories';
 
+<Meta of={AlertStories} />
+
 # Alert
 
 Alerts are a flexible component used to display highlighted content prominently.

src/components/Badge/Badge.mdx

@@ -1,7 +1,10 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
+import * as BadgeStories from './Badge.stories';
 import { AllBadges } from './Badge.stories';
 import { BadgeVariant } from './constants';
 
+<Meta of={BadgeStories} />
+
 # Badge
 
 <Canvas of={AllBadges} />

src/components/Breadcrumb/Breadcrumb.mdx

@@ -1,6 +1,9 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
+import * as BreadcrumbStories from './Breadcrumb.stories';
 import { Primary } from './Breadcrumb.stories';
 
+<Meta of={BreadcrumbStories} />
+
 # Breadcrumb
 
 A breadcrumb component renders a list of links to go back up the navigation hierarchy from where the user currently is back to the home page.

src/components/Button/Button.mdx

@@ -1,6 +1,9 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
+import * as ButtonStories from './Button.stories';
 import { Primary } from './Button.stories';
 
+<Meta of={ButtonStories} />
+
 # Button
 
 Buttons are styled semantic buttons that will handle all of the appropriate button states.

src/components/Calendar/Calendar.mdx

@@ -1,6 +1,9 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
+import * as CalendarStories from './Calendar.stories';
 import { Primary } from './Calendar.stories';
 
+<Meta of={CalendarStories} />
+
 # Calendar
 
 Calendar is a stylized, accessible component for seeing a calendar and choosing a date.

src/components/Card/Card.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './Card.stories';
+import * as CardStories from './Card.stories';
+
+<Meta of={CardStories} />
 
 # Card
 

src/components/Checkbox/Checkbox.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Single } from './Checkbox.stories';
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} />
 
 # Checkbox
 

src/components/Chip/Chip.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { AllChips } from './Chip.stories';
+import * as ChipStories from './Chip.stories';
+
+<Meta of={ChipStories} />
 
 # Chip
 

src/components/DataTable/DataTable.mdx

@@ -1,5 +1,8 @@
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta } from '@storybook/addon-docs';
 import { Primary } from './DataTable.stories';
+import * as DataTableStories from './DataTable.stories';
+
+<Meta of={DataTableStories} />
 
 # DataTable
 

src/components/DateInput/DateInput.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './DateInput.stories';
+import * as DateInputStories from './DateInput.stories';
+
+<Meta of={DateInputStories} />
 
 # DateInput
 

src/components/Datepicker/Datepicker.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './Datepicker.stories';
+import * as DatepickerStories from './Datepicker.stories';
+
+<Meta of={DatepickerStories} />
 
 # Datepicker
 

src/components/Dropdown/Dropdown.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { WithObjectOptions } from './Dropdown.stories';
+import * as DropdownStories from './Dropdown.stories';
+
+<Meta of={DropdownStories} />
 
 # Dropdown
 

src/components/Dropzone/Dropzone.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './Dropzone.stories';
+import * as DropzoneStories from './Dropzone.stories';
+
+<Meta of={DropzoneStories} />
 
 # Dropzone
 

src/components/FileUpload/FileUpload.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './FileUpload.stories';
+import * as FileUploadStories from './FileUpload.stories';
+
+<Meta of={FileUploadStories} />
 
 # File Upload 'Button'
 

src/components/FilterContent/FilterContent.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './FilterContent.stories';
+import * as FilterContentStories from './FilterContent.stories';
+
+<Meta of={FilterContentStories} />
 
 # FilterContent
 

src/components/FloatingActionButton/FloatingActionButton.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './FloatingActionButton.stories';
+import * as FloatingActionButtonStories from './FloatingActionButton.stories';
+
+<Meta of={FloatingActionButtonStories} />
 
 # FloatingActionButton
 

src/components/Grid/Grid.mdx

@@ -1,5 +1,8 @@
-import { ArgTypes, Canvas, PRIMARY_STORY } from '@storybook/addon-docs';
+import { ArgTypes, Canvas, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './Grid.stories';
+import * as GridStories from './Grid.stories';
+
+<Meta of={GridStories} />
 
 # Grid
 

src/components/Icon/Icon.mdx

@@ -1,5 +1,8 @@
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta } from '@storybook/addon-docs';
 import { Primary } from './Icon.stories';
+import * as IconStories from './Icon.stories';
+
+<Meta of={IconStories} />
 
 # Icon
 

src/components/IconButton/IconButton.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { AllIconButtons, Primary } from './IconButton.stories';
+import * as IconButtonStories from './IconButton.stories';
+
+<Meta of={IconButtonStories} />
 
 # IconButton
 

src/components/ImageFileUpload/ImageFileUpload.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Default, FileSizeError } from './ImageFileUpload.stories';
+import * as ImageFileUploadStories from './ImageFileUpload.stories';
+
+<Meta of={ImageFileUploadStories} />
 
 # Image File Upload
 

src/components/KeyValueInput/KeyValueInput.mdx

@@ -1,5 +1,8 @@
-import { ArgTypes, Canvas, PRIMARY_STORY } from '@storybook/addon-docs';
+import { ArgTypes, Canvas, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './KeyValueInput.stories';
+import * as KeyValueInputStories from './KeyValueInput.stories';
+
+<Meta of={KeyValueInputStories} />
 
 # KeyValueInput
 

src/components/Label/Label.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './Label.stories';
+import * as LabelStories from './Label.stories';
+
+<Meta of={LabelStories} />
 
 # Lob Label
 

src/components/LegacyModal/LegacyModal.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './LegacyModal.stories';
+import * as LegacyModalStories from './LegacyModal.stories';
+
+<Meta of={LegacyModalStories} />
 
 # Modal
 

src/components/Link/Link.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { DefaultLink } from './Link.stories';
+import * as LinkStories from './Link.stories';
+
+<Meta of={LinkStories} />
 
 # Link
 

src/components/LoadingIndicator/LoadingIndicator.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './LoadingIndicator.stories';
+import * as LoadingIndicatorStories from './LoadingIndicator.stories';
+
+<Meta of={LoadingIndicatorStories} />
 
 # LoadingIndicator
 

src/components/MainNavigation/MainNavigation.mdx

@@ -1,9 +1,12 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import {
   FullNavigation,
   Item,
   ItemWithChildItems
 } from './MainNavigation.stories';
+import * as MainNavigationStories from './MainNavigation.stories';
+
+<Meta of={MainNavigationStories} />
 
 # MainNavigation
 

src/components/MegaButton/MegaButton.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { MegaText, WithImage, SmallText } from './MegaButton.stories';
+import * as MegaButtonStories from './MegaButton.stories';
+
+<Meta of={MegaButtonStories} />
 
 # MegaButton
 

src/components/Menu/Menu.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './Menu.stories';
+import * as MenuStories from './Menu.stories';
+
+<Meta of={MenuStories} />
 
 # Menu
 

src/components/Modal/Modal.mdx

@@ -1,5 +1,8 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas, ArgTypes, PRIMARY_STORY, Meta } from '@storybook/addon-docs';
 import { Primary } from './Modal.stories';
+import * as ModalStories from './Modal.stories';
+
+<Meta of={ModalStories} />
 
 # Modal