[#3688] Add storybook story

Author: Viicos

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsForm.js

@@ -3,12 +3,12 @@ import React from 'react';
 
 import Field from 'components/admin/forms/Field';
 
-import ObjectsApiOptionsFormField from './ObjectsApiOptionsFormField';
+import ObjectsApiOptionsFormFields from './ObjectsApiOptionsFormFields';
 
 const ObjectsApiOptionsForm = ({index, name, label, schema, formData, onChange}) => {
   return (
     <Field name={name} label={label}>
-      <ObjectsApiOptionsFormField
+      <ObjectsApiOptionsFormFields
         index={index}
         name={name}
         schema={schema}
@@ -19,7 +19,7 @@ const ObjectsApiOptionsForm = ({index, name, label, schema, formData, onChange})
   );
 };
 
-ObjectsApiOptionsFormField.propTypes = {
+ObjectsApiOptionsForm.propTypes = {
   index: PropTypes.number,
   name: PropTypes.string,
   label: PropTypes.node,

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormField.js src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.js

@@ -24,7 +24,7 @@ const Wrapper = ({children}) => (
   </form>
 );
 
-const ObjectsApiFormFields = ({index, name, schema, formData, onChange}) => {
+const ObjectsApiOptionsFormFields = ({index, name, schema, formData, onChange}) => {
   const intl = useIntl();
   const validationErrors = useContext(ValidationErrorContext);
 
@@ -357,4 +357,4 @@ const ObjectsApiFormFields = ({index, name, schema, formData, onChange}) => {
   );
 };
 
-export default ObjectsApiFormFields;
+export default ObjectsApiOptionsFormFields;

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.mdx

@@ -0,0 +1,21 @@
+import {ArgTypes, Canvas, Meta} from '@storybook/addon-docs';
+
+import ObjectsApiOptionsFormFields from './ObjectsApiOptionsFormFields';
+import * as ObjectsApiOptionsFormFieldsStories from './ObjectsApiOptionsFormFields.stories';
+
+<Meta of={ObjectsApiOptionsFormFieldsStories} />
+
+# Objects API Registration
+
+Here we can set up the registration backend for Objects APIs. The Objecttype and corresponding
+versions are fetched from the API.
+
+<Canvas of={ObjectsApiOptionsFormFieldsStories.Default} />
+
+## Props
+
+<ArgTypes of={ObjectsApiOptionsFormFields} />
+
+**Warning**: this component requires the following contexts:
+
+- `ValidationErrorContext`, for validation errors

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js

@@ -0,0 +1,57 @@
+import {useArgs} from '@storybook/client-api';
+
+import {FormDecorator} from 'components/admin/form_design/story-decorators';
+import Field from 'components/admin/forms/Field';
+import Fieldset from 'components/admin/forms/Fieldset';
+import FormRow from 'components/admin/forms/FormRow';
+
+import ObjectsApiOptionsFormFields from './ObjectsApiOptionsFormFields';
+import {mockObjecttypeVersionsGet, mockObjecttypesGet} from './mocks';
+
+const render = ({index, label, name}) => {
+  const [{formData}, updateArgs] = useArgs();
+  const onChange = newValues => {
+    updateArgs({formData: newValues});
+  };
+
+  return (
+    <Fieldset>
+      <FormRow>
+        <Field name={name} label={label}>
+          <ObjectsApiOptionsFormFields
+            index={index}
+            name={name}
+            formData={formData}
+            onChange={onChange}
+          />
+        </Field>
+      </FormRow>
+    </Fieldset>
+  );
+};
+
+export default {
+  title: 'Form design/Registration/Objects API',
+  decorators: [FormDecorator],
+  render,
+  args: {
+    formData: {},
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        mockObjecttypesGet([
+          {
+            url: 'https://objecttypen.nl/api/v1/objecttypes/2c77babf-a967-4057-9969-0200320d23f1',
+            uuid: '2c77babf-a967-4057-9969-0200320d23f1',
+            name: 'Tree',
+            namePlural: 'Trees',
+          },
+        ]),
+        mockObjecttypeVersionsGet('2c77babf-a967-4057-9969-0200320d23f1', [{version: 1}]),
+      ],
+    },
+  },
+};
+
+export const Default = {};

src/openforms/js/components/admin/form_design/registrations/objectsapi/mocks.js

@@ -0,0 +1,16 @@
+import {rest} from 'msw';
+
+export const BASE_URL = process.env.SB_BASE_URL || '';
+
+export const mockObjecttypesGet = objecttypes =>
+  rest.get(`${BASE_URL}/api/v2/registration/plugins/objects-api/object-types`, (req, res, ctx) => {
+    return res(ctx.json(objecttypes));
+  });
+
+export const mockObjecttypeVersionsGet = (objecttypeUuid, versions) =>
+  rest.get(
+    `${BASE_URL}/api/v2/registration/plugins/objects-api/object-types/${objecttypeUuid}/versions`,
+    (req, res, ctx) => {
+      return res(ctx.json(versions));
+    }
+  );

src/openforms/js/components/admin/form_design/registrations/objectsapi/utils.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const getFieldErrors = (name, index, errors, field) => {
+  const errorMessages = [];
+
+  for (const [errorName, errorReason] of errors) {
+    if (errorName.startsWith(name)) {
+      const errorNameBits = errorName.split('.');
+      if (errorNameBits[2] === String(index) && errorNameBits[errorNameBits.length - 1] === field) {
+        errorMessages.push(errorReason);
+      }
+    }
+  }
+
+  return errorMessages.length > 0 ? errorMessages : null;
+};
+
+const getErrorMarkup = errorMessages => {
+  return (
+    <ul className="error-detail bs-callout bs-callout-info">
+      {errorMessages.map((msg, index) => (
+        <li key={index} className="text-danger">
+          {msg}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export {getErrorMarkup, getFieldErrors};