✅ [open-formulieren/open-forms#5033] Stories for ErrorBoundary

src/components/Errors/ErrorBoundary.stories.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+import {PermissionDenied, ServiceUnavailable, UnprocessableEntity} from 'errors';
+
+import ErrorBoundary from './ErrorBoundary';
+
+const render = ({useCard, errorType, errorCode}) => {
+  const error = new errorType('some error', 500, 'some error', errorCode);
+
+  return (
+    <ErrorBoundary useCard={useCard}>
+      {React.createElement(() => {
+        throw error;
+      })}
+    </ErrorBoundary>
+  );
+};
+
+export default {
+  title: 'Private API / ErrorBoundary',
+  component: ErrorBoundary,
+  argTypes: {
+    useCard: {control: {type: 'boolean'}},
+    errorType: {
+      table: {
+        options: [PermissionDenied, ServiceUnavailable, UnprocessableEntity],
+        control: {type: 'radio'},
+      },
+    },
+  },
+};
+
+export const GenericError = {
+  render,
+  args: {
+    useCard: true,
+    errorType: Error,
+    errorCode: 'generic',
+  },
+};
+
+// FIXME cant get this to work with routerprovider
+// export const PermissionDeniedError = {
+//   render,
+//   args: {
+//     useCard: true,
+//     errorType: PermissionDenied,
+//     // errorCode: "service_unavailable",
+//   },
+// };
+
+export const UnprocessableEntityErrorInactive = {
+  render,
+  args: {
+    useCard: true,
+    errorType: UnprocessableEntity,
+    errorCode: 'form-inactive',
+  },
+};
+
+export const UnprocessableEntityErrorGeneric = {
+  render,
+  args: {
+    useCard: true,
+    errorType: UnprocessableEntity,
+    errorCode: 'generic',
+  },
+};
+
+export const ServiceUnavailableErrorMaintenance = {
+  render,
+  args: {
+    useCard: true,
+    errorType: ServiceUnavailable,
+    errorCode: 'form-maintenance',
+  },
+};
+
+export const ServiceUnavailableErrorMaxSubmissions = {
+  render,
+  args: {
+    useCard: true,
+    errorType: ServiceUnavailable,
+    errorCode: 'form-maximum-submissions',
+  },
+};
+
+export const ServiceUnavailableError = {
+  render,
+  args: {
+    useCard: true,
+    errorType: ServiceUnavailable,
+    errorCode: 'service_unavailable',
+  },
+};
+
+export const ServiceUnavailableErrorGeneric = {
+  render,
+  args: {
+    useCard: true,
+    errorType: ServiceUnavailable,
+    errorCode: 'generic',
+  },
+};