✨ [#52] Implement selectboxes preview component

src/components/ComponentPreview.stories.tsx

@@ -1,6 +1,6 @@
 import {expect} from '@storybook/jest';
 import {Meta, StoryFn, StoryObj} from '@storybook/react';
-import {userEvent, within} from '@storybook/testing-library';
+import {fireEvent, userEvent, within} from '@storybook/testing-library';
 
 import ComponentPreview from './ComponentPreview';
 
@@ -615,3 +615,72 @@ export const File: Story = {
     await canvas.findByText('A preview of the file Formio component');
   },
 };
+
+export const SelectBoxes: Story = {
+  name: 'Selectboxes manual values',
+  render: Template,
+
+  args: {
+    component: {
+      type: 'selectboxes',
+      id: 'selectboxes',
+      key: 'selectboxesPreview',
+      label: 'Selectboxes preview',
+      description: 'A preview of the selectboxes Formio component',
+      openForms: {
+        dataSrc: 'manual',
+        translations: {},
+      },
+      values: [
+        {
+          value: 'option1',
+          label: 'Option 1',
+        },
+        {
+          value: 'option2',
+          label: 'Option 2',
+        },
+      ],
+    },
+  },
+
+  play: async ({canvasElement, args}) => {
+    const canvas = within(canvasElement);
+
+    // check that the user-controlled content is visible
+    await canvas.findByText('Selectboxes preview');
+    await canvas.findByText('A preview of the selectboxes Formio component');
+
+    // check that the input name is set correctly
+    const firstOptionInput = canvas.getByLabelText<HTMLInputElement>('Option 1');
+    // @ts-ignore
+    await expect(firstOptionInput.getAttribute('name').startsWith(args.component.key)).toBe(true);
+
+    // check the toggle state of a checkbox
+    await expect(firstOptionInput).not.toBeChecked();
+    // https://github.com/testing-library/user-event/issues/1149 applies to radio and
+    // checkbox inputs
+    fireEvent.click(canvas.getByText('Option 1'));
+    await expect(firstOptionInput).toBeChecked();
+  },
+};
+
+export const SelectBoxesVariable: Story = {
+  name: 'Selectboxes variable for values',
+  render: Template,
+
+  args: {
+    component: {
+      type: 'selectboxes',
+      id: 'selectboxes',
+      key: 'selectboxesPreview',
+      label: 'Selectboxes preview',
+      description: 'A preview of the selectboxes Formio component',
+      openForms: {
+        dataSrc: 'variable',
+        itemsExpression: {var: 'foo'},
+        translations: {},
+      },
+    },
+  },
+};

src/components/formio/checkbox.tsx

@@ -7,6 +7,33 @@ import Component from './component';
 import Description from './description';
 import Tooltip from './tooltip';
 
+export interface CheckboxInputProps {
+  name: string;
+  label?: React.ReactNode;
+  onChange?: FormikHandlers['handleChange'];
+}
+
+export const CheckboxInput: React.FC<CheckboxInputProps> = ({name, label, onChange}) => {
+  const {getFieldProps} = useFormikContext();
+  const {onChange: formikOnChange} = getFieldProps(name);
+  const {hasErrors} = useValidationErrors(name);
+  return (
+    <>
+      <Field
+        name={name}
+        as="input"
+        type="checkbox"
+        className={clsx('form-check-input', {'is-invalid': hasErrors})}
+        onChange={(e: React.ChangeEvent<any>) => {
+          formikOnChange(e);
+          onChange?.(e);
+        }}
+      />
+      <span>{label}</span>
+    </>
+  );
+};
+
 export interface CheckboxProps {
   name: string;
   label?: React.ReactNode;
@@ -23,32 +50,16 @@ const Checkbox: React.FC<CheckboxProps> = ({
   tooltip = '',
   description = '',
   onChange,
-}) => {
-  const {getFieldProps} = useFormikContext();
-  const {onChange: formikOnChange} = getFieldProps(name);
-  const {hasErrors} = useValidationErrors(name);
-  return (
-    <Component field={name} required={required} type="checkbox">
-      <div className="form-check checkbox">
-        <label className="form-check-label">
-          <Field
-            name={name}
-            as="input"
-            type="checkbox"
-            className={clsx('form-check-input', {'is-invalid': hasErrors})}
-            onChange={(e: React.ChangeEvent<any>) => {
-              formikOnChange(e);
-              onChange?.(e);
-            }}
-          />
-          <span>{label}</span>
-          {tooltip && ' '}
-          <Tooltip text={tooltip} />
-        </label>
-      </div>
-      {description && <Description text={description} />}
-    </Component>
-  );
-};
-
+}) => (
+  <Component field={name} required={required} type="checkbox">
+    <div className="form-check checkbox">
+      <label className="form-check-label">
+        <CheckboxInput name={name} label={label} onChange={onChange} />
+        {tooltip && ' '}
+        <Tooltip text={tooltip} />
+      </label>
+    </div>
+    {description && <Description text={description} />}
+  </Component>
+);
 export default Checkbox;

src/registry/index.tsx

@@ -11,6 +11,7 @@ import Licenseplate from './licenseplate';
 import NumberField from './number';
 import PhoneNumber from './phonenumber';
 import Postcode from './postcode';
+import Selectboxes from './selectboxes';
 import TextField from './textfield';
 import TimeField from './time';
 import {Registry, RegistryEntry} from './types';
@@ -39,6 +40,7 @@ const REGISTRY: Registry = {
   phoneNumber: PhoneNumber,
   postcode: Postcode,
   file: FileUpload,
+  selectboxes: Selectboxes,
   currency: Currency,
   // Special types:
   iban: Iban,

src/registry/selectboxes/index.ts

@@ -0,0 +1,10 @@
+// import EditForm from './edit';
+// import validationSchema from './edit-validation';
+import Preview from './preview';
+
+export default {
+  // edit: EditForm,
+  // editSchema: validationSchema,
+  preview: Preview,
+  // defaultValue: '',
+};

src/registry/selectboxes/preview.tsx

@@ -0,0 +1,63 @@
+import {SelectboxesComponentSchema} from '@open-formulieren/types';
+import {Option} from '@open-formulieren/types/lib/formio/common';
+import {useIntl} from 'react-intl';
+
+import {Component, Description} from '@/components/formio';
+import {CheckboxInput} from '@/components/formio/checkbox';
+
+import {ComponentPreviewProps} from '../types';
+
+// FIXME: this union does not seem to be properly inferred :(
+const checkIsManualOptions = (
+  component: SelectboxesComponentSchema
+): component is SelectboxesComponentSchema & {values: Option[]} => {
+  return component.openForms.dataSrc === 'manual';
+};
+
+/**
+ * Show a formio selectboxes component preview.
+ *
+ * NOTE: for the time being, this is rendered in the default Formio bootstrap style,
+ * however at some point this should use the components of
+ * @open-formulieren/formio-renderer instead for a more accurate preview.
+ */
+const Preview: React.FC<ComponentPreviewProps<SelectboxesComponentSchema>> = ({component}) => {
+  const intl = useIntl();
+  const {key, label, description, tooltip, validate} = component;
+  const {required = false} = validate || {};
+  const isManualOptions = checkIsManualOptions(component);
+  const options = isManualOptions
+    ? component.values
+    : [
+        {
+          value: 'itemsExpression',
+          label: intl.formatMessage(
+            {
+              description: 'Selectboxes dummy option for itemsExpression',
+              defaultMessage: 'Options from expression: <code>{expression}</code>',
+            },
+            {
+              expression: JSON.stringify(component.openForms.itemsExpression),
+              code: chunks => <code>{chunks}</code>,
+            }
+          ),
+        },
+      ];
+  return (
+    <Component type="selectboxes" field={key} label={label} tooltip={tooltip} required={required}>
+      <div className="form-radio radio">
+        {options.map(({value, label}, index) => (
+          <div key={`option-${value}-${index}`} className="form-check">
+            <label className="form-check-label">
+              <CheckboxInput name={`${key}.${value}`} label={label} />
+            </label>
+          </div>
+        ))}
+      </div>
+
+      {description && <Description text={description} />}
+    </Component>
+  );
+};
+
+export default Preview;