Implement file component

.storybook/decorators.tsx

@@ -1,11 +1,11 @@
 import type {StoryContext, StoryFn} from '@storybook/react';
 import {Formik} from 'formik';
-import React from 'react';
+
+import {BuilderContext, DocumentTypeOption} from '@/context';
 
 import {PrefillAttributeOption, PrefillPluginOption} from '../src/components/builder/prefill';
 import {RegistrationAttributeOption} from '../src/components/builder/registration/registration-attribute';
 import {ValidatorOption} from '../src/components/builder/validate/validator-select';
-import {BuilderContext} from '../src/context';
 
 export const ModalDecorator = (Story, {parameters}) => {
   if (parameters?.modal?.noModal) return <Story />;
@@ -68,6 +68,133 @@ const DEFAULT_PREFILL_ATTRIBUTES: {[key: string]: PrefillAttributeOption[]} = {
   ],
 };
 
+export const DEFAULT_FILE_TYPES = [
+  {
+    label: 'any filetype',
+    value: '*',
+  },
+  {
+    label: '.heic',
+    value: 'image/heic',
+  },
+  {
+    label: '.png',
+    value: 'image/png',
+  },
+  {
+    label: '.jpg',
+    value: 'image/jpeg',
+  },
+  {
+    label: '.pdf',
+    value: 'application/pdf',
+  },
+  {
+    label: '.xls',
+    value: 'application/vnd.ms-excel',
+  },
+  {
+    label: '.xlsx',
+    value: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  },
+  {
+    label: '.csv',
+    value: 'text/csv',
+  },
+  {
+    label: '.txt',
+    value: 'text/plain',
+  },
+  {
+    label: '.doc',
+    value: 'application/msword',
+  },
+  {
+    label: '.docx',
+    value: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  },
+  {
+    label: 'Open Office',
+    value:
+      'application/vnd.oasis.opendocument.*,application/vnd.stardivision.*,application/vnd.sun.xml.*',
+  },
+  {
+    label: '.zip',
+    value: 'application/zip',
+  },
+  {
+    label: '.rar',
+    value: 'application/vnd.rar',
+  },
+  {
+    label: '.tar',
+    value: 'application/x-tar',
+  },
+  {
+    label: '.msg',
+    value: 'application/vnd.ms-outlook',
+  },
+  {
+    label: '.dwg',
+    value:
+      'application/acad.dwg,application/autocad_dwg.dwg,application/dwg.dwg,application/x-acad.dwg,application/x-autocad.dwg,application/x-dwg.dwg,drawing/dwg.dwg,image/vnd.dwg,image/x-dwg.dwg',
+  },
+];
+
+export const DEFAULT_DOCUMENT_TYPES: DocumentTypeOption[] = [
+  {
+    backendLabel: '',
+    catalogus: {
+      domein: 'VTH',
+    },
+    informatieobjecttype: {
+      url: 'https://example.com/iotype/123',
+      omschrijving: 'Vergunning',
+    },
+  },
+  {
+    backendLabel: 'Open Zaak',
+    catalogus: {
+      domein: 'VTH',
+    },
+    informatieobjecttype: {
+      url: 'https://example.com/iotype/456',
+      omschrijving: 'Vergunning',
+    },
+  },
+  {
+    backendLabel: 'Open Zaak',
+    catalogus: {
+      domein: 'VTH',
+    },
+    informatieobjecttype: {
+      url: 'https://example.com/iotype/789',
+      omschrijving: 'Ontheffing',
+    },
+  },
+  {
+    backendLabel: 'Open Zaak',
+    catalogus: {
+      domein: 'SOC',
+    },
+    informatieobjecttype: {
+      url: 'https://example.com/iotype/abc',
+      omschrijving: 'Aanvraag',
+    },
+  },
+];
+
+export const CONFIDENTIALITY_LEVELS = [
+  {label: 'Openbaar', value: 'openbaar'},
+  {label: 'Beperkt openbaar', value: 'beperkt_openbaar'},
+  {label: 'Intern', value: 'intern'},
+  {label: 'Zaakvertrouwelijk', value: 'zaakvertrouwelijk'},
+  {label: 'Vertrouwelijk', value: 'vertrouwelijk'},
+  {label: 'Confidentieel', value: 'confidentieel'},
+  {label: 'Geheim', value: 'geheim'},
+  {label: 'Zeer geheim', value: 'zeer_geheim'},
+];
+
 function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
@@ -86,6 +213,9 @@ export const BuilderContextDecorator = (Story: StoryFn, context: StoryContext) =
     context.parameters.builder?.defaultPrefillPlugins || DEFAULT_PREFILL_PLUGINS;
   const defaultPrefillAttributes =
     context.parameters.builder?.defaultPrefillAttributes || DEFAULT_PREFILL_ATTRIBUTES;
+  const defaultFileTypes = context.parameters.builder?.defaultFileTypes || DEFAULT_FILE_TYPES;
+  const defaultdocumentTypes =
+    context.parameters.builder?.defaultdocumentTypes || DEFAULT_DOCUMENT_TYPES;
   return (
     <BuilderContext.Provider
       value={{
@@ -110,6 +240,12 @@ export const BuilderContextDecorator = (Story: StoryFn, context: StoryContext) =
           const container = context?.args?.prefillAttributes || defaultPrefillAttributes;
           return container?.[plugin] || [{id: '', label: 'no plugins found'}];
         },
+        getFileTypes: async () => {
+          return context?.args?.fileTypes || defaultFileTypes;
+        },
+        serverUploadLimit: '50MB',
+        getDocumentTypes: async () => context?.args?.documentTypes || defaultdocumentTypes,
+        getConfidentialityLevels: async () => CONFIDENTIALITY_LEVELS,
       }}
     >
       <Story />