✨ Implement edit form form file component

src/components/ComponentConfiguration.stories.tsx

@@ -756,3 +756,33 @@ export const PhoneNumber: Story = {
     expect(args.onSubmit).toHaveBeenCalled();
   },
 };
+
+export const FileUpload: Story = {
+  render: Template,
+  name: 'type: file',
+
+  args: {
+    component: {
+      id: 'kiweljhr',
+      storage: 'url',
+      url: '',
+      type: 'file',
+      key: 'file',
+      label: 'A file upload',
+      file: {
+        name: '',
+        type: [],
+        allowedTypesLabels: [],
+      },
+      filePattern: '',
+    },
+
+    builderInfo: {
+      title: 'File upload',
+      icon: '',
+      group: 'file',
+      weight: 10,
+      schema: {},
+    },
+  },
+};

src/registry/file/edit-validation.ts

@@ -0,0 +1,7 @@
+import {IntlShape} from 'react-intl';
+
+import {buildCommonSchema} from '@/registry/validation';
+
+const schema = (intl: IntlShape) => buildCommonSchema(intl);
+
+export default schema;

src/registry/file/edit.tsx

@@ -0,0 +1,164 @@
+import {FileComponentSchema} from '@open-formulieren/types';
+import {useFormikContext} from 'formik';
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import {
+  BuilderTabs,
+  ClearOnHide,
+  Description,
+  Hidden,
+  IsSensitiveData,
+  Key,
+  Label,
+  Multiple,
+  PresentationConfig,
+  SimpleConditional,
+  Tooltip,
+  Translations,
+  Validate,
+  useDeriveComponentKey,
+} from '@/components/builder';
+import {LABELS} from '@/components/builder/messages';
+import {Checkbox, Tab, TabList, TabPanel, Tabs, TextField} from '@/components/formio';
+import {getErrorNames} from '@/utils/errors';
+
+import {EditFormDefinition} from '../types';
+
+/**
+ * Form to configure a Formio 'file' type component.
+ */
+const EditForm: EditFormDefinition<FileComponentSchema> = () => {
+  const intl = useIntl();
+  const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
+  const {errors} = useFormikContext<FileComponentSchema>();
+
+  const erroredFields = Object.keys(errors).length
+    ? getErrorNames<FileComponentSchema>(errors)
+    : [];
+  // TODO: pattern match instead of just string inclusion?
+  // TODO: move into more generically usuable utility when we implement other component
+  // types
+  const hasAnyError = (...fieldNames: string[]): boolean => {
+    if (!erroredFields.length) return false;
+    return fieldNames.some(name => erroredFields.includes(name));
+  };
+
+  Validate.useManageValidatorsTranslations<FileComponentSchema>(['required']);
+
+  return (
+    <Tabs>
+      <TabList>
+        <BuilderTabs.Basic
+          hasErrors={hasAnyError(
+            'label',
+            'key',
+            'description',
+            'tooltip',
+            'showInSummary',
+            'showInEmail',
+            'showInPDF',
+            'multiple',
+            'hidden',
+            'clearOnHide',
+            'isSensitiveData'
+          )}
+        />
+        <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
+        <BuilderTabs.Validation hasErrors={hasAnyError('validate')} />
+        <Tab hasErrors={hasAnyError('file')}>
+          <FormattedMessage
+            description="Component edit form tab title for 'File' tab"
+            defaultMessage="File"
+          />
+        </Tab>
+        <BuilderTabs.Registration hasErrors={hasAnyError('registration')} />
+        <BuilderTabs.Translations hasErrors={hasAnyError('openForms.translations')} />
+      </TabList>
+
+      {/* Basic tab */}
+      <TabPanel>
+        <Label />
+        <Key isManuallySetRef={isKeyManuallySetRef} generatedValue={generatedKey} />
+        <Description />
+        <Tooltip />
+        <PresentationConfig />
+        <Multiple<FileComponentSchema> />
+        <Hidden />
+        <ClearOnHide />
+        <IsSensitiveData />
+      </TabPanel>
+
+      {/* Advanced tab */}
+      <TabPanel>
+        <SimpleConditional />
+      </TabPanel>
+
+      {/* Validation tab */}
+      <TabPanel>
+        <Validate.Required />
+        <Validate.ValidationErrorTranslations />
+      </TabPanel>
+
+      {/* File tab */}
+      <TabPanel></TabPanel>
+
+      {/* Registration tab */}
+      <TabPanel>TODO</TabPanel>
+
+      {/* Translations */}
+      <TabPanel>
+        <Translations.ComponentTranslations<FileComponentSchema>
+          propertyLabels={{
+            label: intl.formatMessage(LABELS.label),
+            description: intl.formatMessage(LABELS.description),
+            tooltip: intl.formatMessage(LABELS.tooltip),
+          }}
+        />
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+EditForm.defaultValues = {
+  storage: 'url',
+  url: '',
+  // basic tab
+  label: '',
+  key: '',
+  description: '',
+  tooltip: '',
+  showInSummary: true,
+  showInEmail: false,
+  showInPDF: true,
+  multiple: false,
+  hidden: false,
+  clearOnHide: true,
+  isSensitiveData: true,
+  // Advanced tab
+  conditional: {
+    show: undefined,
+    when: '',
+    eq: '',
+  },
+  // Validation tab
+  validate: {
+    required: false,
+  },
+  translatedErrors: {},
+  // file tab
+  file: {
+    name: '',
+    type: [],
+    allowedTypesLabels: [],
+  },
+  filePattern: '',
+  // registration tab
+  registration: {
+    informatieobjecttype: '',
+    bronorganisatie: '',
+    docVertrouwelijkheidaanduiding: '',
+    titel: '',
+  },
+};
+
+export default EditForm;

src/registry/file/index.ts

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