🏷️ [#445] Convert the Body component and stories to TS

Turns out we need the babel presets after all for the storybook processing :( I'm not sure why things work without in the renderer repo, but we'll figure it out at some point. This strongly types the Body component with its 'component' prop, allowing strings of intrinsic elements to be passed. Support for custom react components is dropped, as it doesn't appear to be used anywhere so this simplifies things a bit.
open-formulieren · Mar 3, 2025 · 43e5063 · 43e5063
1 parent 7ab6f23
commit 43e5063
Show file tree

Hide file tree

Showing 8 changed files with 328 additions and 82 deletions.
diff --git a/.storybook/decorators.js → .storybook/decorators.jsx b/.storybook/decorators.js → .storybook/decorators.jsx
diff --git a/.storybook/theme.js → .storybook/theme.jsx b/.storybook/theme.js → .storybook/theme.jsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -98,6 +98,8 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@codecov/vite-plugin": "^1.7.0",
     "@formatjs/cli": "^6.6.1",
     "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.315",
@@ -179,6 +181,10 @@
     "formiojs": "npm:@open-formulieren/formiojs@4.13.14"
   },
   "babel": {
+    "presets": [
+      ["@babel/preset-react", { "runtime": "automatic" }],
+      "@babel/preset-typescript"
+    ],
     "plugins": [
       [
         "formatjs",

diff --git a/src/components/Body.jsx b/src/components/Body.jsx
diff --git a/src/components/Body.mdx b/src/components/Body.mdx
@@ -1,4 +1,4 @@
-import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks';
+import {ArgTypes, Canvas, Meta} from '@storybook/blocks';
 
 import * as BodyStories from './Body.stories';
 

diff --git a/src/components/Body.stories.jsx → src/components/Body.stories.tsx b/src/components/Body.stories.jsx → src/components/Body.stories.tsx
@@ -1,8 +1,14 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
 import Body, {VARIANTS} from './Body';
 
 export default {
   title: 'Pure React components / Body',
   component: Body,
+  args: {
+    children: 'Body',
+    modifiers: [],
+  },
   argTypes: {
     children: {table: {disable: true}},
     component: {control: {disable: true}},
@@ -16,35 +22,27 @@ export default {
   parameters: {
     controls: {sort: 'requiredFirst'},
   },
-};
+} satisfies Meta<typeof Body>;
 
-const render = ({content = 'Body', modifiers = []}) => {
-  const isWysiwyg = modifiers.includes('wysiwyg');
-  const extra = isWysiwyg
-    ? {
-        dangerouslySetInnerHTML: {__html: content},
-        component: 'div',
-      }
-    : {};
-  return (
-    <Body modifiers={modifiers} {...extra}>
-      {isWysiwyg ? null : content}
-    </Body>
-  );
-};
+type Story = StoryObj<typeof Body>;
 
-export const Default = {
-  render,
+export const Default: Story = {
   args: {
-    content: 'Lorem ipsum...',
+    children: 'Lorem ipsum...',
     modifiers: [],
   },
 };
 
-export const WYSIWYG = {
-  render,
+export const WYSIWYG: Story = {
+  render: ({children, modifiers}) => (
+    <Body
+      modifiers={modifiers}
+      component="div"
+      dangerouslySetInnerHTML={{__html: children as string}}
+    />
+  ),
   args: {
-    content:
+    children:
       '<p>Lorem ipsum with a <a href="https://example.com" target="_blank" rel="noopener nofollower">clickable</a> link...<p>',
     modifiers: ['wysiwyg'],
   },

diff --git a/src/components/Body.tsx b/src/components/Body.tsx
@@ -0,0 +1,27 @@
+import {getBEMClassName} from 'utils';
+
+export const VARIANTS = ['big', 'muted', 'small', 'wysiwyg', 'inline'] as const;
+export type Variant = (typeof VARIANTS)[number];
+
+export type BodyProps<T extends React.ElementType = 'p'> = {
+  children?: React.ReactNode;
+  component?: T;
+  modifiers?: Variant[];
+} & React.ComponentPropsWithoutRef<T>;
+
+const Body = <T extends React.ElementType = 'p'>({
+  modifiers = [],
+  component,
+  children,
+  ...props
+}: BodyProps<T>) => {
+  const Component = component || 'p';
+  const className = getBEMClassName('body', modifiers);
+  return (
+    <Component className={className} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+export default Body;