Issue/storybook fixes

.storybook/main.ts

@@ -1,4 +1,3 @@
-import { transform } from "@formatjs/ts-transformer";
 import type { StorybookConfig } from "@storybook/react-webpack5";
 import * as path from "path";
 
@@ -30,26 +29,6 @@ const config: StorybookConfig = {
       use: ["style-loader", "css-loader", "sass-loader"],
       include: path.resolve(__dirname, "../"),
     });
-    config.module.rules.push({
-      test: /\.tsx?$/,
-      use: [
-        {
-          loader: "ts-loader",
-          options: {
-            getCustomTransformers() {
-              return {
-                before: [
-                  transform({
-                    overrideIdFn: "[sha512:contenthash:base64:6]",
-                  }),
-                ],
-              };
-            },
-          },
-        },
-      ],
-      exclude: /node_modules/,
-    });
 
     // Add any other webpack config modifications here
 

package.json

@@ -61,15 +61,15 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-interactions": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/addon-themes": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-webpack5": "^7.6.14",
-    "@storybook/test": "^7.6.14",
+    "@storybook/addon-themes": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
     "@storybook/test-runner": "^0.16.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/react": "^18.0.0",
@@ -97,7 +97,7 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.69.7",
     "sass-loader": "^13.3.3",
-    "storybook": "^7.6.14",
+    "storybook": "^7.6.17",
     "ts-loader": "^9.5.1",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"

src/components/boolean/bool.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
-import React from "react";
+import * as React from "react";
 
 import { Body, H1, H2, H3, P } from "../typography";
 import { Bool } from "./bool";

src/components/boolean/bool.tsx

@@ -38,12 +38,14 @@ export const Bool: React.FC<BoolProps> = ({
   const _labelTrue =
     labelTrue ||
     intl.formatMessage({
+      id: "components.Bool.labelTrue",
       description: "components.Bool: The accessible label when value is truthy",
       defaultMessage: "ja",
     });
   const _labelFalse =
     labelFalse ||
     intl.formatMessage({
+      id: "components.Bool.labelFalse",
       description: "components.Bool: The accessible label when value is falsy",
       defaultMessage: "nee",
     });

src/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Page } from "../page";
 import { Breadcrumbs } from "./breadcrumbs";

src/components/button/button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Toolbar } from "../toolbar";
 import { Button, ButtonLink } from "./button";

src/components/card/card.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Page } from "../page";
 import { Body, P } from "../typography";

src/components/data/attributelist/attributelist.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Grid } from "../../layout";
 import { Column } from "../../layout/column";

src/components/data/paginator/paginator.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
-import React from "react";
+import * as React from "react";
 
 import { allModes } from "../../../../.storybook/modes";
 import { Page } from "../../page";

src/components/data/paginator/paginator.tsx

@@ -128,6 +128,7 @@ export const Paginator: React.FC<PaginatorProps> = ({
     ? formatMessage(labelCurrentPageRange, context)
     : intl.formatMessage(
         {
+          id: "components.Paginator.labelCurrentPageRange",
           description:
             "components.Paginator: The current page range (accessible) label",
           defaultMessage:
@@ -140,6 +141,7 @@ export const Paginator: React.FC<PaginatorProps> = ({
     ? formatMessage(labelGoToPage, context)
     : intl.formatMessage(
         {
+          id: "components.Paginator.labelGoToPage",
           description:
             "components.Paginator: The go to page (accessible) label",
           defaultMessage: "naar pagina",
@@ -151,6 +153,7 @@ export const Paginator: React.FC<PaginatorProps> = ({
     ? formatMessage(labelPageSize, context)
     : intl.formatMessage(
         {
+          id: "components.Paginator.labelPageSize",
           description: "components.Paginator: The page size (accessible) label",
           defaultMessage: "aantal resultaten",
         },
@@ -161,6 +164,7 @@ export const Paginator: React.FC<PaginatorProps> = ({
     ? formatMessage(labelPagination, context)
     : intl.formatMessage(
         {
+          id: "components.Paginator.labelPagination",
           description:
             "components.Paginator: The pagination (accessible) label",
           defaultMessage: "paginering",
@@ -172,6 +176,7 @@ export const Paginator: React.FC<PaginatorProps> = ({
     ? formatMessage(labelPrevious, context)
     : intl.formatMessage(
         {
+          id: "components.Paginator.labelPrevious",
           description:
             "components.Paginator: The go to previous page (accessible) label",
           defaultMessage: "vorige",
@@ -183,6 +188,7 @@ export const Paginator: React.FC<PaginatorProps> = ({
     ? formatMessage(labelNext, context)
     : intl.formatMessage(
         {
+          id: "components.Paginator.labelNext",
           description:
             "components.Paginator: The go to next page (accessible) label",
           defaultMessage: "volgende",
@@ -194,6 +200,7 @@ export const Paginator: React.FC<PaginatorProps> = ({
     ? formatMessage(labelLoading, context)
     : intl.formatMessage(
         {
+          id: "components.Paginator.labelLoading",
           description: "components.Paginator: The loading (accessible) label",
           defaultMessage: "bezig met laden...",
         },

src/components/dropdown/dropdown.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
-import React from "react";
+import * as React from "react";
 
 import { Button, ButtonLink } from "../button";
 import { Outline } from "../icon";

src/components/form/form/form.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 import { Formik } from "formik";
-import React from "react";
+import * as React from "react";
 
 import { formatMessage } from "../../../lib/i18n/formatmessage";
 import { Form } from "./form";

src/components/form/form/form.tsx

@@ -113,6 +113,7 @@ export const Form: React.FC<FormProps> = ({
   const _labelSubmit = labelSubmit
     ? labelSubmit
     : intl.formatMessage({
+        id: "components.Form.labelSubmit",
         description: "components.Form: The submit form label",
         defaultMessage: "verzenden",
       });

src/components/form/input/input.stories.tsx

@@ -2,7 +2,7 @@ import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
 import { Formik } from "formik";
-import React from "react";
+import * as React from "react";
 
 import { Button } from "../../button";
 import { Page } from "../../page";

src/components/form/select/select.stories.tsx

@@ -2,7 +2,7 @@ import { action } from "@storybook/addon-actions";
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
 import { Formik } from "formik";
-import React from "react";
+import * as React from "react";
 
 import { Button } from "../../button";
 import { Page } from "../../page";

src/components/form/select/select.tsx

@@ -110,6 +110,7 @@ export const Select: React.FC<SelectProps> = ({
   const _labelClear = labelClear
     ? formatMessage(labelClear, i18nContext)
     : intl.formatMessage({
+        id: "components.Select.labelClear",
         description: "components.Select: The clear value (accessible) label",
         defaultMessage: "waarde wissen",
       });

src/components/icon/icon.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Button, ButtonLink } from "../button";
 import { Body, H1, H2, H3, P } from "../typography";

src/components/layout/column/column.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Container } from "../container";
 import { Grid } from "../grid";

src/components/layout/grid/grid.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Container } from "../container";
 import { Grid } from "./grid";

src/components/layout/layout.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Column } from "./column";
 import { Container } from "./container";

src/components/logo/logo.tsx

@@ -39,6 +39,7 @@ export const Logo: React.FC<LogoProps> = ({
     ? formatMessage(hrefLabel, context)
     : intl.formatMessage(
         {
+          id: "components.Logo.hrefLabel",
           description:
             "components.Logo: An aria-label describing the link action",
           defaultMessage: 'go to "{href}"',
@@ -49,6 +50,7 @@ export const Logo: React.FC<LogoProps> = ({
     ? formatMessage(label, context)
     : intl.formatMessage(
         {
+          id: "components.Logo.label",
           description:
             "components.Logo: The aria-label to set on the SVG element",
           defaultMessage: "Maykin logo",

src/components/navbar/navbar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
-import React from "react";
+import * as React from "react";
 
 import { allModes } from "../../../.storybook/modes";
 import { Button, ButtonLink } from "../button";

src/components/page/page.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Button, ButtonLink } from "../button";
 import { Card } from "../card";

src/components/tabs/tabs.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Card } from "../card";
 import { Page } from "../page";

src/components/toolbar/toolbar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Button, ButtonLink } from "../button";
 import { Outline } from "../icon";

src/components/tooltip/tooltip.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { Button } from "../button";
 import { Outline } from "../icon";

src/components/typography/99-typography.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { H1 } from "./h1";
 import { H2 } from "./h2";

src/components/typography/body/body.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { A } from "../a";
 import { H1 } from "../h1";

src/components/typography/ol/ol.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { A } from "../a";
 import { Li } from "../li";

src/components/typography/ul/ul.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import * as React from "react";
 
 import { A } from "../a";
 import { Li } from "../li";