From 7eec19b0bae88a983f9f8de6f2d55a5ebce218bf Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Tue, 31 Dec 2024 15:49:48 +0100
Subject: [PATCH] refactor: fix typescript warnings

---
 .../src/css-utrecht-data-badge.stories.tsx    |  6 ++--
 .../src/css-utrecht-link.stories.tsx          | 31 ++++++++++---------
 packages/storybook/tsconfig.json              |  2 ++
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/storybook/src/css-utrecht-data-badge.stories.tsx b/packages/storybook/src/css-utrecht-data-badge.stories.tsx
index e429f62d..23875f88 100644
--- a/packages/storybook/src/css-utrecht-data-badge.stories.tsx
+++ b/packages/storybook/src/css-utrecht-data-badge.stories.tsx
@@ -1,9 +1,11 @@
 /* @license CC0-1.0 */
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
 import { DataBadge, Link } from '@utrecht/component-library-react/dist/css-module';
 import readme from './data-badge.md?raw';
 
+const LinkDecorator: Decorator = (Story) => <Link href="#">{Story()}</Link>;
+
 const meta = {
   id: 'css-utrecht-data-badge',
   args: {
@@ -59,7 +61,7 @@ export const BadgeAsLink: Story = {
   args: {
     children: 'sustainability',
   },
-  decorators: [(Story) => <Link href="#">{Story()}</Link>],
+  decorators: [LinkDecorator],
   parameters: {
     design: {
       type: 'figma',
diff --git a/packages/storybook/src/css-utrecht-link.stories.tsx b/packages/storybook/src/css-utrecht-link.stories.tsx
index e9387e49..cdb73e2b 100644
--- a/packages/storybook/src/css-utrecht-link.stories.tsx
+++ b/packages/storybook/src/css-utrecht-link.stories.tsx
@@ -1,9 +1,22 @@
 /* @license CC0-1.0 */
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
 import { Link, Paragraph } from '@utrecht/component-library-react/dist/css-module';
 import readme from './link.md?raw';
 
+const ParagraphContentDecorator: Decorator = (Story) => (
+  <Paragraph>
+    Een geveltuin aanleggen is leuk om te doen, de straat knapt ervan op en uw huis blijft in de zomer koeler. Meer
+    groen maakt de stad ook beter bestand tegen klimaatveranderingen en wateroverlast en is goed voor insecten en
+    vogels. {Story()} Ze zijn vooral geschikt in straten waar de huizen geen voortuin hebben. Eén enkele klimplant,
+    stokroos of zonnebloem maakt het straatbeeld al gezelliger, maar andere planten kunnen natuurlijk ook. U kiest zelf.
+  </Paragraph>
+);
+
+const LeadParagraphDecorator: Decorator = (Story) => <Paragraph appearance="lead">{Story()}</Paragraph>;
+
+const SmallParagraphDecorator: Decorator = (Story) => <Paragraph appearance="small">{Story()}</Paragraph>;
+
 const meta = {
   id: 'css-utrecht-link',
   args: {
@@ -53,17 +66,7 @@ export const LinkInParagraph: Story = {
     children: 'Een geveltuin is een strook planten tegen de gevel van een woning.',
     href: '#',
   },
-  decorators: [
-    (Story) => (
-      <Paragraph>
-        Een geveltuin aanleggen is leuk om te doen, de straat knapt ervan op en uw huis blijft in de zomer koeler. Meer
-        groen maakt de stad ook beter bestand tegen klimaatveranderingen en wateroverlast en is goed voor insecten en
-        vogels. {Story()} Ze zijn vooral geschikt in straten waar de huizen geen voortuin hebben. Eén enkele klimplant,
-        stokroos of zonnebloem maakt het straatbeeld al gezelliger, maar andere planten kunnen natuurlijk ook. U kiest
-        zelf.
-      </Paragraph>
-    ),
-  ],
+  decorators: [ParagraphContentDecorator],
 };
 
 export const LinkInLeadParagraph: Story = {
@@ -72,7 +75,7 @@ export const LinkInLeadParagraph: Story = {
     children: 'Een geveltuin aanleggen',
     href: '#',
   },
-  decorators: [(Story) => <Paragraph lead>{Story()}</Paragraph>],
+  decorators: [LeadParagraphDecorator],
 };
 
 export const LinkInSmallPrint: Story = {
@@ -81,5 +84,5 @@ export const LinkInSmallPrint: Story = {
     children: 'Een geveltuin aanleggen',
     href: '#',
   },
-  decorators: [(Story) => <Paragraph small>{Story()}</Paragraph>],
+  decorators: [SmallParagraphDecorator],
 };
diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json
index e462b1c1..d5c403f9 100644
--- a/packages/storybook/tsconfig.json
+++ b/packages/storybook/tsconfig.json
@@ -2,6 +2,8 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "allowSyntheticDefaultImports": true,
+    "module": "Preserve",
+    "moduleResolution": "bundler",
     "skipLibCheck": true
   },
   "extends": "../../tsconfig.json",