✨ Implement the structure and webform fieldset preview

Both simply display their nested children.

src/registry/fieldset/index.ts

@@ -5,12 +5,16 @@ import {RegistryEntry} from '@/registry/types';
 import EditForm from './edit';
 import validationSchema from './edit-validation';
 import PanelPreview from './panel-preview';
+import StructureSubtreePreview from './structure-preview';
+import WebformPreview from './webform-preview';
 
 export default {
   edit: EditForm,
   editSchema: validationSchema,
   preview: {
     panel: PanelPreview,
+    structureSubtree: StructureSubtreePreview,
+    webform: WebformPreview,
   },
   defaultValue: undefined, // a fieldset component does not hold a value itself
 } satisfies RegistryEntry<FieldsetComponentSchema>;

src/registry/fieldset/structure-preview.tsx

@@ -0,0 +1,10 @@
+import type {FieldsetComponentSchema} from '@open-formulieren/types';
+
+import type {StructureSubtreeProps} from '@/registry/types';
+
+const StructureSubtreePreview: React.FC<StructureSubtreeProps<FieldsetComponentSchema>> = ({
+  component: {components},
+  renderSubtree,
+}) => <>{renderSubtree(components)}</>;
+
+export default StructureSubtreePreview;

src/registry/fieldset/webform-preview.tsx

@@ -0,0 +1,18 @@
+import type {FieldsetComponentSchema} from '@open-formulieren/types';
+
+import {FieldSet} from '@/components/formio';
+import type {WebformPreviewProps} from '@/registry/types';
+
+const WebformPreview: React.FC<WebformPreviewProps<FieldsetComponentSchema>> = ({
+  component,
+  renderSubtree,
+}) => {
+  const {label, hideHeader, tooltip, components} = component;
+  return (
+    <FieldSet label={hideHeader ? undefined : label} tooltip={tooltip}>
+      {renderSubtree(components)}
+    </FieldSet>
+  );
+};
+
+export default WebformPreview;