feat: add Open Formulieren to Storybook

packages/storybook/package.json

@@ -29,6 +29,7 @@
     "@gemeente-rotterdam/icon": "workspace:*",
     "@gemeente-rotterdam/web-components-react": "workspace:*",
     "@gemeente-rotterdam/web-components-stencil": "workspace:*",
+    "@open-formulieren/sdk": "2.2.0-alpha.0",
     "@storybook/addon-a11y": "8.1.6",
     "@storybook/addon-actions": "8.1.6",
     "@storybook/addon-designs": "8.0.2",
@@ -43,13 +44,16 @@
     "@storybook/react-vite": "8.1.6",
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "8.1.6",
+    "@types/lodash.merge": "4.6.9",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@utrecht/component-library-react": "3.1.0",
     "@utrecht/components": "4.0.0",
     "http-server": "14.1.1",
+    "lodash.merge": "4.6.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-formio": "4.3.0",
     "rimraf": "5.0.7",
     "storybook": "8.1.6",
     "typescript": "5.4.5",

packages/storybook/src/StoryUtil.tsx

@@ -0,0 +1,77 @@
+import { OFLibrary, OpenFormsModule } from '@open-formulieren/sdk';
+import merge from 'lodash.merge';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { Form, Formio, Templates } from 'react-formio';
+import '@open-formulieren/sdk/styles.css';
+
+export type FormConfiguration = { type: string; components: { type: string; key: string; label: string }[] };
+
+const useOpenFormsConfiguration = () => {
+  const [isConfigured, setIsConfigured] = useState(Templates.current === OFLibrary);
+
+  useEffect(() => {
+    if (!isConfigured && Templates.current !== OFLibrary) {
+      Formio.use(OpenFormsModule);
+      Templates.current = OFLibrary;
+      setIsConfigured(true);
+    }
+  }, [isConfigured]);
+
+  return isConfigured;
+};
+
+const RenderFormioForm = ({ form }: PropsWithChildren<{ form: FormConfiguration }>) => {
+  const isConfigured = useOpenFormsConfiguration();
+
+  if (!isConfigured) {
+    return null;
+  }
+  return (
+    <Form
+      form={form}
+      submission={{}}
+      options={{
+        noAlerts: true,
+        language: 'nl',
+        baseUrl: '',
+        evalContext: {
+          ofPrefix: 'openforms-',
+          requiredFieldsWithAsterisk: false,
+        },
+        ofContext: {
+          submissionUuid: '426c8d33-6dcb-4578-8208-f17071a4aebe',
+        },
+      }}
+    />
+  );
+};
+
+type SingleFormioComponentProps = {
+  type: string;
+  key: string;
+  label: string;
+  extraComponentProperties?: { [index: string]: any };
+};
+
+type MultipleFormioComponentsProps = {
+  components: {
+    type: string;
+    key: string;
+    label: string;
+    [index: string]: any;
+  }[];
+};
+
+export const SingleFormioComponent = ({
+  type,
+  key,
+  label,
+  extraComponentProperties = {},
+}: SingleFormioComponentProps) => {
+  const component = merge({ type, key, label }, extraComponentProperties);
+  return <RenderFormioForm form={{ type: 'form', components: [component] }} />;
+};
+
+export const MultipleFormioComponents = ({ components }: MultipleFormioComponentsProps) => {
+  return <RenderFormioForm form={{ type: 'form', components: components }} />;
+};

packages/storybook/src/openforms-bsn.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SingleFormioComponent } from './StoryUtil';
+
+const meta = {
+  id: 'open-forms-bsn',
+  title: 'Open Formulieren/BSNField',
+  component: SingleFormioComponent,
+  args: {
+    key: '',
+    type: 'bsn',
+    label: '',
+  },
+} satisfies Meta<typeof SingleFormioComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    key: 'bsn',
+    label: 'Burgerservicenummer (BSN)',
+  },
+};
+export const Disabled: Story = {
+  args: {
+    key: 'bsn',
+    label: 'Burgerservicenummer (BSN)',
+    extraComponentProperties: {
+      disabled: true,
+    },
+  },
+};

packages/storybook/src/openforms-checkbox.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SingleFormioComponent } from './StoryUtil';
+
+const meta = {
+  id: 'open-forms-checkbox',
+  title: 'Open Formulieren/Checkbox',
+  component: SingleFormioComponent,
+  args: {
+    key: '',
+    type: 'checkbox',
+    label: '',
+  },
+} satisfies Meta<typeof SingleFormioComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    key: 'checkbox',
+    label: 'Ik heb de voorwaarden gelezen en ga hiermee akkoord.',
+  },
+};
+
+export const Required: Story = {
+  args: {
+    key: 'checkbox',
+    label: 'Ik heb de voorwaarden gelezen en ga hiermee akkoord.',
+    extraComponentProperties: { validate: { required: true } },
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    key: 'checkbox',
+    label: 'Ik heb de voorwaarden gelezen en ga hiermee akkoord.',
+    extraComponentProperties: {
+      defaultValue: true,
+    },
+  },
+};
+export const Disabled: Story = {
+  args: {
+    key: 'checkbox',
+    label: 'Ik heb de voorwaarden gelezen en ga hiermee akkoord.',
+    extraComponentProperties: {
+      disabled: true,
+    },
+  },
+};

packages/storybook/src/openforms-columns.stories.tsx

@@ -0,0 +1,74 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SingleFormioComponent } from './StoryUtil';
+
+const meta = {
+  id: 'open-forms-columns',
+  title: 'Open Formulieren/Columns',
+  component: SingleFormioComponent,
+  args: {
+    key: '',
+    type: 'columns',
+    extraComponentProperties: {
+      columns: [
+        {
+          size: '',
+          sizeMobile: '',
+          components: [
+            {
+              key: '',
+              type: '',
+              label: '',
+            },
+          ],
+        },
+        {
+          size: '',
+          sizeMobile: '',
+          components: [
+            {
+              key: '',
+              type: '',
+              label: '',
+            },
+          ],
+        },
+      ],
+    },
+  },
+} satisfies Meta<typeof SingleFormioComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    key: 'cosign',
+    label: 'columns',
+    extraComponentProperties: {
+      columns: [
+        {
+          size: 3,
+          sizeMobile: 6,
+          components: [
+            {
+              key: 'postcode',
+              type: 'postcode',
+              label: 'Postcode',
+            },
+          ],
+        },
+        {
+          size: 3,
+          sizeMobile: 6,
+          components: [
+            {
+              key: 'number',
+              type: 'textfield',
+              label: 'Huisnummer',
+            },
+          ],
+        },
+      ],
+    },
+  },
+};

packages/storybook/src/openforms-content.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SingleFormioComponent } from './StoryUtil';
+
+const meta = {
+  id: 'open-forms-content',
+  title: 'Open Formulieren/Content',
+  component: SingleFormioComponent,
+  args: {
+    key: '',
+    type: 'content',
+  },
+} satisfies Meta<typeof SingleFormioComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    key: 'content',
+    extraComponentProperties: {
+      html: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Quisque a felis ante. Nunc dictum, <b>dui et scelerisque euismod</b>, ex dui sodales magna,
+    quis vehicula nulla justo sed urna. <i>Integer maximus tempus tellus</i> vel commodo.
+    Orci varius natoque penatibus et magnis <a href="#">dis parturient montes.</a></p>`,
+    },
+  },
+};

packages/storybook/src/openforms-cosign.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SingleFormioComponent } from './StoryUtil';
+
+const meta = {
+  id: 'open-forms-cosign',
+  title: 'Open Formulieren/Cosign',
+  component: SingleFormioComponent,
+  args: {
+    type: 'cosign',
+  },
+} satisfies Meta<typeof SingleFormioComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    key: 'cosign',
+    label: 'Co-signer email address',
+    extraComponentProperties: {
+      validateOn: 'blur',
+      authPlugin: 'digid',
+    },
+  },
+};
+export const Disabled: Story = {
+  args: {
+    key: 'cosign',
+    label: 'Co-signer email address',
+    extraComponentProperties: {
+      validateOn: 'blur',
+      authPlugin: 'digid',
+      disabled: true,
+    },
+  },
+};