Add modal component

.storybook/decorators.tsx

@@ -1,6 +1,7 @@
 import type {Decorator} from '@storybook/react';
 import {Formik} from 'formik';
 
+import {ModalContext} from '@/components/Modal';
 import {BuilderContext} from '@/context';
 import {
   CONFIDENTIALITY_LEVELS,
@@ -17,7 +18,18 @@ import {
 } from '@/tests/sharedUtils';
 
 export const ModalDecorator: Decorator = (Story, {parameters}) => {
-  if (parameters?.modal?.noModal) return <Story />;
+  if (parameters?.modal?.noModal)
+    return (
+      <ModalContext.Provider
+        value={{
+          // only for storybook integration, do not use this in real apps!
+          parentSelector: () => document.getElementById('storybook-root')!,
+          ariaHideApp: false,
+        }}
+      >
+        <Story />
+      </ModalContext.Provider>
+    );
   return (
     <div
       className="formio-dialog formio-dialog-theme-default component-settings"
@@ -41,7 +53,6 @@ export const ModalDecorator: Decorator = (Story, {parameters}) => {
 export const BuilderContextDecorator: Decorator = (Story, context) => {
   if (!context.parameters?.builder?.enableContext) return <Story />;
   const supportedLanguageCodes = context.parameters.builder?.supportedLanguageCodes || ['nl', 'en'];
-  const translationsStore = context.parameters.builder?.translationsStore || null;
   const theme = context.parameters.builder?.theme || 'light';
   const defaultComponentTree =
     context.parameters.builder?.defaultComponentTree || DEFAULT_COMPONENT_TREE;
@@ -64,7 +75,6 @@ export const BuilderContextDecorator: Decorator = (Story, context) => {
         supportedLanguageCodes: supportedLanguageCodes,
         richTextColors: DEFAULT_COLORS,
         theme,
-        componentTranslationsRef: {current: translationsStore},
         getFormComponents: () => context?.args?.componentTree || defaultComponentTree,
         getValidatorPlugins: async () => {
           await sleep(context.parameters?.builder?.validatorPluginsDelay || 0);

package.json

@@ -84,6 +84,7 @@
     "@types/lodash": "^4.17.0",
     "@types/proj4leaflet": "^1.0.10",
     "@types/react": "^18.2.45",
+    "@types/react-modal": "^3.16.3",
     "@types/react-signature-canvas": "^1.0.5",
     "@types/sanitize-html": "^2.9.0",
     "@types/signature_pad": "^2.3.6",
@@ -96,8 +97,8 @@
     "formiojs": "~4.13.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "monaco-editor": "^0.48.0",
     "lodash": "^4.17.21",
+    "monaco-editor": "^0.48.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.7",
     "prop-types": "^15.8.1",
@@ -126,6 +127,7 @@
     "lodash": "^4.17.21",
     "react-intl": "^6.3.2",
     "react-leaflet": "^4.2.1",
+    "react-modal": "^3.16.1",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.6",
     "react-tabs": "^4.2.1",

src/components/Modal.mdx

@@ -0,0 +1,28 @@
+import {ArgTypes, Canvas, Meta} from '@storybook/blocks';
+
+import * as ModalStories from './Modal.stories';
+
+<Meta of={ModalStories} />
+
+# Modals
+
+Modals are built with the `react-modal` library, which helps enforce the accessible behaviours.
+
+Pass the content of the modal as children:
+
+```tsx
+<Modal isOpen closeModal={() => setClosed()}>
+  <h1>Modal title</h1>
+  <p>Modal body</p>
+</Modal>
+```
+
+## Props
+
+<ArgTypes />
+
+## Context
+
+For Storybook purposes, we use the `ModalContext` React context so that the nodes are injected in
+the correct location. The context is considered private API and it is not necessary to make use of
+the modal component.

src/components/Modal.stories.ts

@@ -0,0 +1,22 @@
+import {Meta, StoryObj} from '@storybook/react';
+import {fn} from '@storybook/test';
+
+import Modal from './Modal';
+
+export default {
+  title: 'Generic/Modal',
+  component: Modal,
+  parameters: {
+    modal: {noModal: true},
+  },
+  args: {
+    isOpen: true,
+    closeModal: fn(),
+    className: 'additional-classnames',
+    children: 'Modal content',
+  },
+} satisfies Meta<typeof Modal>;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {};

src/components/Modal.tsx

@@ -0,0 +1,72 @@
+import clsx from 'clsx';
+import {createContext, useContext} from 'react';
+import {FormattedMessage} from 'react-intl';
+import ReactModal from 'react-modal';
+
+export interface ModalContextType {
+  parentSelector?: () => HTMLElement;
+  ariaHideApp?: boolean;
+}
+
+export const ModalContext = createContext<ModalContextType>({});
+ModalContext.displayName = 'ModalContext';
+
+export interface ModalProps {
+  /**
+   * Modal open/close state, typically the state from `useState` in your component.
+   */
+  isOpen: boolean;
+  /**
+   * Callback to invoke when closing of the modal is requested.
+   *
+   * Example modal close requests:
+   * - Clicking the close button
+   * - Hitting `ESC` on the keyboard
+   * - Clicking outside of the modal
+   */
+  closeModal: () => void;
+  /**
+   * Additional class name(s) to pass to the modal root DOM node. Optional.
+   */
+  className?: string;
+  /**
+   * Modal content.
+   */
+  children?: React.ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({isOpen, closeModal, className, children}: ModalProps) => {
+  const {parentSelector, ariaHideApp} = useContext(ModalContext);
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={closeModal}
+      parentSelector={parentSelector}
+      ariaHideApp={ariaHideApp}
+      portalClassName={
+        isOpen ? clsx('formio-dialog', 'formio-dialog-theme-default', className) : undefined
+      }
+      overlayClassName="formio-dialog-overlay"
+      className="formio-dialog-content"
+      overlayElement={(props, contentElement) => (
+        <>
+          <div {...props}></div>
+          {contentElement}
+        </>
+      )}
+    >
+      <button
+        type="button"
+        className="formio-dialog-close float-right btn btn-secondary btn-sm"
+        onClick={closeModal}
+      >
+        <span className="sr-only">
+          <FormattedMessage description="Modal close button label" defaultMessage="Close" />
+        </span>
+      </button>
+      {children}
+    </ReactModal>
+  );
+};
+
+export default Modal;