aragon · cgero-eth · Jun 21, 2024 · Jun 19, 2024 · Jun 20, 2024 · Jun 20, 2024
diff --git a/.babelrc.json b/.babelrc.json
@@ -10,7 +10,12 @@
       }
     ],
     "@babel/preset-typescript",
-    "@babel/preset-react"
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
   "plugins": []
 }
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -3,16 +3,21 @@ import type { RuleSetRule } from 'webpack';
 
 const config: StorybookConfig = {
     stories: ['../docs/**/*.@(md|mdx)', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.@(md|mdx)'],
+
     addons: [
         '@storybook/addon-links',
         '@storybook/addon-essentials',
         { name: '@storybook/addon-styling', options: { postCss: true } },
         '@storybook/addon-designs',
+        '@storybook/addon-mdx-gfm',
+        '@storybook/addon-webpack5-compiler-babel',
     ],
+
     framework: {
         name: '@storybook/react-webpack5',
         options: {},
     },
+
     webpackFinal: (webpackConfig) => {
         // Remove any svg loader already set and use @svgr/webpack to load svgs on Storybook
         const svgWebpackRule = webpackConfig.module?.rules?.find((rule) => {

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -5,7 +5,6 @@ import './style.css';
 
 const preview: Preview = {
     parameters: {
-        actions: { argTypesRegex: '^on[A-Z].*' },
         controls: {
             matchers: {
                 color: /(background|color)$/i,
@@ -45,6 +44,7 @@ const preview: Preview = {
             ],
         },
     },
+
     decorators: [
         (Story) => (
             <OdsModulesProvider>
@@ -54,6 +54,8 @@ const preview: Preview = {
             </OdsModulesProvider>
         ),
     ],
+
+    tags: ['autodocs'],
 };
 
 export default preview;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   Update `yarn` version to `4.3.0`
 -   Update unit tests to use userEvent instead of fireEvent
 -   Move all form items under a `forms` folder
+-   Upgrade storybook to v8
 
 ## [1.0.33] - 2024-06-06
 

diff --git a/package.json b/package.json
@@ -88,13 +88,15 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-designs": "^7.0.9",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-designs": "^8.0.2",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
     "@storybook/storybook-deployer": "^2.8.16",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
@@ -133,7 +135,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^7.6.17",
+    "storybook": "^8.1.10",
     "tailwindcss": "^3.4.4",
     "ts-jest": "^29.1.5",
     "typescript": "^5.4.5",

diff --git a/src/core/components/accordion/accordionContainer/accordionContainer.stories.tsx b/src/core/components/accordion/accordionContainer/accordionContainer.stories.tsx
@@ -8,7 +8,6 @@ import { Accordion, type IAccordionContainerProps } from '..';
 const meta: Meta<typeof Accordion.Container> = {
     title: 'Core/Components/Accordion/Accordion.Container',
     component: Accordion.Container,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/alerts/alertCard/alertCard.stories.tsx b/src/core/components/alerts/alertCard/alertCard.stories.tsx
@@ -4,7 +4,6 @@ import { AlertCard } from './alertCard';
 const meta: Meta<typeof AlertCard> = {
     title: 'Core/Components/Alerts/AlertCard',
     component: AlertCard,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/alerts/alertInline/alertInline.stories.tsx b/src/core/components/alerts/alertInline/alertInline.stories.tsx
@@ -5,7 +5,6 @@ import { AlertInline } from './alertInline';
 const meta: Meta<typeof AlertInline> = {
     title: 'Core/Components/Alerts/AlertInline',
     component: AlertInline,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/avatars/avatar/avatar.stories.tsx b/src/core/components/avatars/avatar/avatar.stories.tsx
@@ -4,7 +4,6 @@ import { Avatar } from './avatar';
 const meta: Meta<typeof Avatar> = {
     title: 'Core/Components/Avatars/Avatar',
     component: Avatar,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/avatars/avatarBase/avatarBase.stories.tsx b/src/core/components/avatars/avatarBase/avatarBase.stories.tsx
@@ -4,7 +4,6 @@ import { AvatarBase } from './avatarBase';
 const meta: Meta<typeof AvatarBase> = {
     title: 'Core/Components/Avatars/AvatarBase',
     component: AvatarBase,
-    tags: ['autodocs'],
 };
 
 type Story = StoryObj<typeof AvatarBase>;

diff --git a/src/core/components/avatars/avatarIcon/avatarIcon.stories.tsx b/src/core/components/avatars/avatarIcon/avatarIcon.stories.tsx
@@ -6,7 +6,6 @@ import { AvatarIcon } from './avatarIcon';
 const meta: Meta<typeof AvatarIcon> = {
     title: 'Core/Components/Avatars/AvatarIcon',
     component: AvatarIcon,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/breadcrumbs/breadcrumbs.stories.tsx b/src/core/components/breadcrumbs/breadcrumbs.stories.tsx
@@ -4,7 +4,6 @@ import { Breadcrumbs } from './breadcrumbs';
 const meta: Meta<typeof Breadcrumbs> = {
     title: 'Core/Components/Breadcrumbs',
     component: Breadcrumbs,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/button/button.stories.tsx b/src/core/components/button/button.stories.tsx
@@ -5,7 +5,6 @@ import { Button } from './button';
 const meta: Meta<typeof Button> = {
     title: 'Core/Components/Button',
     component: Button,
-    tags: ['autodocs'],
     argTypes: {
         href: { control: 'text' },
     },

diff --git a/src/core/components/cards/card/card.stories.tsx b/src/core/components/cards/card/card.stories.tsx
@@ -4,7 +4,6 @@ import { Card } from './card';
 const meta: Meta<typeof Card> = {
     title: 'Core/Components/Cards/Card',
     component: Card,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/cards/cardCollapsible/cardCollapsible.stories.tsx b/src/core/components/cards/cardCollapsible/cardCollapsible.stories.tsx
@@ -7,7 +7,6 @@ import { CardCollapsible } from './cardCollapsible';
 const meta: Meta<typeof CardCollapsible> = {
     title: 'Core/Components/Cards/CardCollapsible',
     component: CardCollapsible,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/cards/cardEmptyState/cardEmptyState.stories.tsx b/src/core/components/cards/cardEmptyState/cardEmptyState.stories.tsx
@@ -5,7 +5,6 @@ import { CardEmptyState } from '.';
 const meta: Meta<typeof CardEmptyState> = {
     title: 'Core/Components/Cards/CardEmptyState',
     component: CardEmptyState,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/cards/cardSummary/cardSummary.stories.tsx b/src/core/components/cards/cardSummary/cardSummary.stories.tsx
@@ -5,7 +5,6 @@ import { CardSummary } from './cardSummary';
 const meta: Meta<typeof CardSummary> = {
     title: 'Core/Components/Cards/CardSummary',
     component: CardSummary,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/collapsible/collapsible.stories.tsx b/src/core/components/collapsible/collapsible.stories.tsx
@@ -8,7 +8,6 @@ import { Collapsible } from './collapsible';
 const meta: Meta<typeof Collapsible> = {
     title: 'Core/Components/Collapsible',
     component: Collapsible,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dataList/dataListContainer/dataListContainer.stories.tsx b/src/core/components/dataList/dataListContainer/dataListContainer.stories.tsx
@@ -4,7 +4,6 @@ import { DataList } from '..';
 const meta: Meta<typeof DataList.Container> = {
     title: 'Core/Components/DataList/DataList.Container',
     component: DataList.Container,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dataList/dataListFilter/dataListFilter.stories.tsx b/src/core/components/dataList/dataListFilter/dataListFilter.stories.tsx
@@ -4,7 +4,6 @@ import { DataList } from '../index';
 const meta: Meta<typeof DataList.Filter> = {
     title: 'Core/Components/DataList/DataList.Filter',
     component: DataList.Filter,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dataList/dataListItem/dataListItem.stories.tsx b/src/core/components/dataList/dataListItem/dataListItem.stories.tsx
@@ -4,7 +4,6 @@ import { DataList } from '../index';
 const meta: Meta<typeof DataList.Item> = {
     title: 'Core/Components/DataList/DataList.Item',
     component: DataList.Item,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dataList/dataListPagination/dataListPagination.stories.tsx b/src/core/components/dataList/dataListPagination/dataListPagination.stories.tsx
@@ -4,7 +4,6 @@ import { DataList } from '../index';
 const meta: Meta<typeof DataList.Pagination> = {
     title: 'Core/Components/DataList/DataList.Pagination',
     component: DataList.Pagination,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dataList/dataListRoot/dataListRoot.stories.tsx b/src/core/components/dataList/dataListRoot/dataListRoot.stories.tsx
@@ -9,7 +9,6 @@ import type { DataListState } from './dataListRoot';
 const meta: Meta<typeof DataList.Root> = {
     title: 'Core/Components/DataList/DataList.Root',
     component: DataList.Root,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/...ore/components/definitionList/definitionListContainer/definitionListContainer.stories.tsx b/...ore/components/definitionList/definitionListContainer/definitionListContainer.stories.tsx
@@ -4,7 +4,6 @@ import { DefinitionList, type IDefinitionListContainerProps } from '../index';
 const meta: Meta<typeof DefinitionList.Container> = {
     title: 'Core/Components/DefinitionList/DefinitionList.Container',
     component: DefinitionList.Container,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx b/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx
@@ -4,7 +4,6 @@ import { DefinitionList, type IDefinitionListItemProps } from '../index';
 const meta: Meta<typeof DefinitionList.Item> = {
     title: 'Core/Components/DefinitionList/DefinitionList.Item',
     component: DefinitionList.Item,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dialogs/dialog/dialogContent/dialogContent.stories.tsx b/src/core/components/dialogs/dialog/dialogContent/dialogContent.stories.tsx
@@ -7,7 +7,6 @@ import { type IDialogContentProps } from './dialogContent';
 const meta: Meta<typeof Dialog.Content> = {
     title: 'Core/Components/Dialogs/Dialog/Dialog.Content',
     component: Dialog.Content,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dialogs/dialog/dialogFooter/dialogFooter.stories.tsx b/src/core/components/dialogs/dialog/dialogFooter/dialogFooter.stories.tsx
@@ -7,7 +7,6 @@ import { IconType } from '../../../icon';
 const meta: Meta<typeof Dialog.Footer> = {
     title: 'Core/Components/Dialogs/Dialog/Dialog.Footer',
     component: Dialog.Footer,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dialogs/dialog/dialogHeader/dialogHeader.stories.tsx b/src/core/components/dialogs/dialog/dialogHeader/dialogHeader.stories.tsx
@@ -7,7 +7,6 @@ import { type IDialogHeaderProps } from './dialogHeader';
 const meta: Meta<typeof Dialog.Header> = {
     title: 'Core/Components/Dialogs/Dialog/Dialog.Header',
     component: Dialog.Header,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dialogs/dialog/dialogRoot/dialogRoot.stories.tsx b/src/core/components/dialogs/dialog/dialogRoot/dialogRoot.stories.tsx
@@ -6,7 +6,6 @@ import { Button } from '../../../button';
 const meta: Meta<typeof Dialog.Root> = {
     title: 'Core/Components/Dialogs/Dialog/Dialog.Root',
     component: Dialog.Root,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dialogs/dialogAlert/dialogAlertContent/dialogAlertContent.stories.tsx b/src/core/components/dialogs/dialogAlert/dialogAlertContent/dialogAlertContent.stories.tsx
@@ -6,7 +6,6 @@ import { Button } from '../../../button';
 const meta: Meta<typeof DialogAlert.Content> = {
     title: 'Core/Components/Dialogs/DialogAlert/DialogAlert.Content',
     component: DialogAlert.Content,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dialogs/dialogAlert/dialogAlertFooter/dialogAlertFooter.stories.tsx b/src/core/components/dialogs/dialogAlert/dialogAlertFooter/dialogAlertFooter.stories.tsx
@@ -7,7 +7,6 @@ import { IconType } from '../../../icon';
 const meta: Meta<typeof DialogAlert.Footer> = {
     title: 'Core/Components/Dialogs/DialogAlert/DialogAlert.Footer',
     component: DialogAlert.Footer,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dialogs/dialogAlert/dialogAlertHeader/dialogAlertHeader.stories.tsx b/src/core/components/dialogs/dialogAlert/dialogAlertHeader/dialogAlertHeader.stories.tsx
@@ -6,7 +6,6 @@ import { Button } from '../../../button';
 const meta: Meta<typeof DialogAlert.Header> = {
     title: 'Core/Components/Dialogs/DialogAlert/DialogAlert.Header',
     component: DialogAlert.Header,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.stories.tsx b/src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.stories.tsx
@@ -6,7 +6,6 @@ import { Button } from '../../../button';
 const meta: Meta<typeof DialogAlert.Root> = {
     title: 'Core/Components/Dialogs/DialogAlert/DialogAlert.Root',
     component: DialogAlert.Root,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/documentParser/documentParser.stories.tsx b/src/core/components/documentParser/documentParser.stories.tsx
@@ -7,7 +7,6 @@ import { DocumentParser } from './documentParser';
 const meta: Meta<typeof DocumentParser> = {
     title: 'Core/Components/DocumentParser',
     component: DocumentParser,
-    tags: ['autodocs'],
 };
 
 type Story = StoryObj<typeof DocumentParser>;

diff --git a/src/core/components/dropdown/dropdownContainer/dropdownContainer.stories.tsx b/src/core/components/dropdown/dropdownContainer/dropdownContainer.stories.tsx
@@ -5,7 +5,6 @@ import { Dropdown, type IDropdownContainerProps } from '../index';
 const meta: Meta<typeof Dropdown.Container> = {
     title: 'Core/Components/Dropdown/Dropdown.Container',
     component: Dropdown.Container,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/dropdown/dropdownItem/dropdownItem.stories.tsx b/src/core/components/dropdown/dropdownItem/dropdownItem.stories.tsx
@@ -4,7 +4,6 @@ import { Dropdown, type IDropdownItemProps } from '../index';
 const meta: Meta<typeof Dropdown.Item> = {
     title: 'Core/Components/Dropdown/Dropdown.Item',
     component: Dropdown.Item,
-    tags: ['autodocs'],
     argTypes: {
         disabled: { control: 'boolean' },
     },

diff --git a/src/core/components/forms/checkbox/checkbox.stories.tsx b/src/core/components/forms/checkbox/checkbox.stories.tsx
@@ -5,7 +5,6 @@ import { Checkbox, type CheckboxState, type ICheckboxProps } from './checkbox';
 const meta: Meta<typeof Checkbox> = {
     title: 'Core/Components/Checkbox/Checkbox',
     component: Checkbox,
-    tags: ['autodocs'],
     argTypes: {
         disabled: { type: 'boolean' },
     },

diff --git a/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx b/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
@@ -4,7 +4,6 @@ import { CheckboxCard } from './checkboxCard';
 const meta: Meta<typeof CheckboxCard> = {
     title: 'Core/Components/Checkbox/CheckboxCard',
     component: CheckboxCard,
-    tags: ['autodocs'],
     argTypes: {
         disabled: { control: 'boolean' },
     },

diff --git a/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx b/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
@@ -6,7 +6,6 @@ import { CheckboxGroup } from './checkboxGroup';
 const meta: Meta<typeof CheckboxGroup> = {
     title: 'Core/Components/Checkbox/CheckboxGroup',
     component: CheckboxGroup,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/forms/inputContainer/inputContainer.stories.tsx b/src/core/components/forms/inputContainer/inputContainer.stories.tsx
@@ -4,7 +4,6 @@ import { InputContainer } from './inputContainer';
 const meta: Meta<typeof InputContainer> = {
     title: 'Core/Components/Forms/InputContainer',
     component: InputContainer,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/forms/inputDate/inputDate.stories.tsx b/src/core/components/forms/inputDate/inputDate.stories.tsx
@@ -4,7 +4,6 @@ import { InputDate } from './inputDate';
 const meta: Meta<typeof InputDate> = {
     title: 'Core/Components/Forms/InputDate',
     component: InputDate,
-    tags: ['autodocs'],
     parameters: {
         design: {
             type: 'figma',

diff --git a/src/core/components/forms/inputFileAvatar/inputFileAvatar.stories.tsx b/src/core/components/forms/inputFileAvatar/inputFileAvatar.stories.tsx
@@ -4,7 +4,6 @@ import { InputFileAvatar } from './inputFileAvatar';
 const meta: Meta<typeof InputFileAvatar> = {
     title: 'Core/Components/Forms/InputFileAvatar',
     component: InputFileAvatar,
-    tags: ['autodocs'],
 
     parameters: {
         design: {