Refactor preview to panel preview

package.json

@@ -152,7 +152,7 @@
       "/node_modules/(?!uuid)/"
     ],
     "setupFilesAfterEnv": [
-      "<rootDir>/src/tests/setupTests.js"
+      "<rootDir>/src/tests/setupTests.ts"
     ],
     "testEnvironment": "jsdom"
   }

src/components/ComponentEditForm.tsx

@@ -71,7 +71,7 @@ const ComponentEditForm: React.FC<ComponentEditFormProps> = ({
 
   const registryEntry = getRegistryEntry(component);
   const {edit: EditForm, editSchema: zodSchema} = registryEntry;
-  const hasPreview = registryEntry.preview !== null;
+  const hasPreview = registryEntry.preview.panel !== null;
 
   let initialValues = cloneDeep(component);
   if (isNew) {

src/components/ComponentPreview.tsx

@@ -85,8 +85,11 @@ const GenericComponentPreview: React.FC<GenericComponentPreviewProps> = ({
 }) => {
   const {key} = component;
   const entry = getRegistryEntry(component);
-  const {preview: PreviewComponent, defaultValue = ''} = entry;
-  if (PreviewComponent === null) {
+  const {
+    preview: {panel: PanelPreviewComponent},
+    defaultValue = '',
+  } = entry;
+  if (PanelPreviewComponent === null) {
     return null;
   }
   const isMultiple = hasOwnProperty(component, 'multiple') ? component.multiple : false;
@@ -106,7 +109,7 @@ const GenericComponentPreview: React.FC<GenericComponentPreviewProps> = ({
       component={component}
       initialValues={initialValues}
     >
-      <PreviewComponent component={component} />
+      <PanelPreviewComponent component={component} />
     </ComponentPreviewWrapper>
   );
 };

src/components/ModeToggle.tsx

@@ -49,7 +49,10 @@ function ModeToggle<T extends string>({
   return (
     <div className={clsx('btn-group', 'btn-group-toggle', className)}>
       {modes.map(({value, label}) => (
-        <label className={clsx('btn', 'btn-sm', btnClassName, {active: value === currentMode})}>
+        <label
+          key={value}
+          className={clsx('btn', 'btn-sm', btnClassName, {active: value === currentMode})}
+        >
           <input
             type="radio"
             name={name}

src/registry/addressNL/index.ts

@@ -9,7 +9,9 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {
+    panel: Preview,
+  },
   defaultValue: {
     postcode: '',
     houseNumber: '',

src/registry/bsn/index.ts

@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<BsnComponentSchema>;

src/registry/checkbox/index.ts

@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: false, // formik field value
   comparisonValue: ComparisonValueInput,
 } satisfies RegistryEntry<CheckboxComponentSchema>;

src/registry/columns/index.ts

@@ -4,11 +4,14 @@ import {RegistryEntry} from '@/registry/types';
 
 import EditForm from './edit';
 import validationSchema from './edit-validation';
-import Preview from './preview';
+import PanelPreview from './panel-preview';
+import './previews.scss';
 
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {
+    panel: PanelPreview,
+  },
   defaultValue: undefined, // a column component does not hold a value itself
 } satisfies RegistryEntry<ColumnsComponentSchema>;

src/registry/columns/panel-preview.tsx

@@ -0,0 +1,80 @@
+import {ColumnsComponentSchema} from '@open-formulieren/types';
+import clsx from 'clsx';
+import {useState} from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import ModeToggle from '@/components/ModeToggle';
+
+import {ComponentPreviewProps} from '../types';
+
+type ViewportMode = 'desktop' | 'mobile';
+
+/**
+ * Show a formio columns component preview.
+ */
+const Preview: React.FC<ComponentPreviewProps<ColumnsComponentSchema>> = ({component}) => {
+  const [viewportMode, setViewportMode] = useState<ViewportMode>('desktop');
+
+  const {columns} = component;
+  const isMobile = viewportMode === 'mobile';
+  return (
+    <>
+      <div className="d-flex justify-content-end align-items-center">
+        <ModeToggle<ViewportMode>
+          name="previewViewport"
+          currentMode={viewportMode}
+          btnClassName="btn-light"
+          onToggle={setViewportMode}
+          modes={[
+            {
+              value: 'desktop',
+              label: (
+                <FormattedMessage
+                  description="Columns 'desktop' preview viewport"
+                  defaultMessage="Default"
+                />
+              ),
+            },
+            {
+              value: 'mobile',
+              label: (
+                <FormattedMessage
+                  description="Columns 'mobile' preview viewport"
+                  defaultMessage="Mobile"
+                />
+              ),
+            },
+          ]}
+        />
+      </div>
+
+      <div
+        className={clsx('offb-columns-panel-preview', {
+          'offb-columns-panel-preview--mobile': isMobile,
+        })}
+      >
+        {columns.map((column, index) => (
+          <div
+            key={`column-${index}`}
+            className="offb-columns-panel-preview__column"
+            style={
+              {
+                '--_col-preview-span': `${isMobile ? column.sizeMobile : column.size}`,
+              } as React.CSSProperties
+            }
+          >
+            <FormattedMessage
+              description="Column preview column description"
+              defaultMessage="Column {number}"
+              values={{
+                number: index + 1,
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default Preview;

src/registry/columns/preview.scss → src/registry/columns/previews.scss

@@ -1,4 +1,4 @@
-.offb-columns-preview {
+.offb-columns-panel-preview {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   column-gap: 10px;

src/registry/content/index.ts

@@ -7,6 +7,8 @@ import validationSchema from './edit-validation';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: null,
+  preview: {
+    panel: null,
+  },
   defaultValue: undefined, // a content component does not hold a value itself
 } satisfies RegistryEntry<ContentComponentSchema>;

src/registry/cosignV1/index.ts

@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   // component does not have a submission value but acts as a marker
   defaultValue: undefined,
 } satisfies RegistryEntry<CosignV1ComponentSchema>;

src/registry/cosignV2/index.ts

@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<CosignV2ComponentSchema>;

src/registry/currency/index.ts

@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: undefined, // formik field value
   comparisonValue: ComparisonValueInput,
 } satisfies RegistryEntry<CurrencyComponentSchema>;

src/registry/date/index.ts

@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<DateComponentSchema>;

src/registry/datetime/index.ts

@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<DateTimeComponentSchema>;

src/registry/editgrid/index.ts

@@ -4,11 +4,13 @@ import {RegistryEntry} from '@/registry/types';
 
 import EditForm from './edit';
 import validationSchema from './edit-validation';
-import Preview from './preview';
+import PanelPreview from './panel-preview';
 
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {
+    panel: PanelPreview,
+  },
   defaultValue: [],
 } satisfies RegistryEntry<EditGridComponentSchema>;

src/registry/email/index.ts

@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<EmailComponentSchema>;

src/registry/fieldset/index.ts

@@ -4,11 +4,13 @@ import {RegistryEntry} from '@/registry/types';
 
 import EditForm from './edit';
 import validationSchema from './edit-validation';
-import Preview from './preview';
+import PanelPreview from './panel-preview';
 
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {
+    panel: PanelPreview,
+  },
   defaultValue: undefined, // a fieldset component does not hold a value itself
 } satisfies RegistryEntry<FieldsetComponentSchema>;

src/registry/file/index.ts

@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: [],
 } satisfies RegistryEntry<FileComponentSchema>;

src/registry/iban/index.ts

@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<IbanComponentSchema>;

src/registry/licenseplate/index.ts

@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<LicensePlateComponentSchema>;

src/registry/map/index.ts

@@ -11,6 +11,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: undefined,
 } satisfies RegistryEntry<MapComponentSchema>;