@digigov/form 2.0.0-0edebf87 → 2.0.0-2177f152

package/src/inputs/inputsScenarios.ts

@@ -0,0 +1,496 @@
+import el from '@digigov/form/locales/el';
+
+export const INPUTS_FIELDS = [
+  {
+    key: 'date-example',
+    type: 'date',
+    required: true,
+    label: {
+      primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  },
+  {
+    key: 'otp',
+    type: 'otp',
+    maxLength: 6,
+    label: {
+      primary: 'Συμπληρώστε τον κωδικό επιβεβαίωσης',
+    },
+    required: true,
+  },
+  {
+    key: 'checkbox',
+    type: 'choice:multiple',
+    required: true,
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'autocomplete_multiple',
+    required: true,
+    type: 'choice:multiple',
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      component: 'AutoComplete',
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'radio',
+    type: 'choice:single',
+    required: true,
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'select',
+    type: 'choice:single',
+    required: true,
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      component: 'Select',
+      options: [
+        {
+          label: { primary: '' },
+          value: '',
+        },
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'autocomplete_single',
+    required: true,
+    type: 'choice:single',
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      component: 'AutoComplete',
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
+    },
+  },
+  {
+    key: 'image',
+    type: 'image',
+    required: true,
+    label: {
+      primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+    },
+  },
+  {
+    key: 'file',
+    type: 'file',
+    label: {
+      primary: 'Ανεβάστε το αρχείο της απόδειξης',
+    },
+    required: true,
+  },
+];
+
+export const scenarios = [
+  {
+    title: 'success fill for inputs',
+    describe: 'inputs scenario',
+    fields: INPUTS_FIELDS,
+    fill: [
+      {
+        fieldKey: 'date-example',
+        value: {
+          day: '22',
+          month: '11',
+          year: '2020',
+        },
+      },
+      {
+        fieldKey: 'otp',
+        value: {
+          '0': '4',
+          '1': '4',
+          '2': '4',
+          '3': '4',
+          '4': '4',
+          '5': '4',
+        },
+      },
+      {
+        fieldKey: 'checkbox',
+        value: ['fever', 'fatigue'],
+      },
+      {
+        fieldKey: 'autocomplete_multiple',
+        value: ['fever', 'fatigue'],
+      },
+      {
+        fieldKey: 'radio',
+        value: 'fever',
+      },
+      {
+        fieldKey: 'select',
+        value: 'fatigue',
+      },
+      {
+        fieldKey: 'autocomplete_single',
+        value: 'fatigue',
+      },
+      {
+        fieldKey: 'image',
+        value: {
+          fileName: 'green_image.png',
+          width: 500,
+          height: 500,
+          size: 3,
+        },
+      },
+      {
+        fieldKey: 'file',
+        value: {
+          fileName: 'file.txt',
+          size: 200,
+        },
+      },
+    ],
+    expect: [
+      {
+        type: 'success',
+        fieldKey: 'date-example',
+        text: el.form.error.date.invalid,
+      },
+      {
+        type: 'success',
+        fieldKey: 'otp',
+        args: {
+          maxLength: 6,
+        },
+        text: el.form.error.otp.less_than,
+      },
+      {
+        type: 'success',
+        fieldKey: 'checkbox',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'autocomplete_multiple',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'radio',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'select',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'autocomplete_single',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'image',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'file',
+        text: el.form.error.required,
+      },
+    ],
+  },
+  {
+    title: 'empty fill for inputs',
+    describe: 'inputs scenario',
+    fields: INPUTS_FIELDS,
+    fill: [],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'date-example',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'otp',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'checkbox',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'autocomplete_multiple',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'radio',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'select',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'autocomplete_single',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'image',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'file',
+        text: el.form.error.required,
+      },
+    ],
+  },
+  {
+    title: 'incorrect types for DateInput and OtpInput',
+    describe: 'inputs scenario',
+    fields: [
+      {
+        key: 'date-example',
+        type: 'date',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary: 'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'otp',
+        type: 'otp',
+        maxLength: 6,
+        label: {
+          primary: 'Συμπληρώστε τον κωδικό επιβεβαίωσης',
+        },
+        required: true,
+      },
+    ],
+    fill: [
+      {
+        fieldKey: 'date-example',
+        value: {
+          day: 'a2',
+          month: '11',
+          year: '2020',
+        },
+      },
+      {
+        fieldKey: 'otp',
+        value: {
+          '0': 'a',
+          '1': '4',
+          '2': '4',
+          '3': '4',
+          '4': '4',
+          '5': '4',
+        },
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'date-example',
+        text: el.form.error.date.invalid,
+      },
+      {
+        type: 'error',
+        fieldKey: 'otp',
+        args: {
+          maxLength: 6,
+        },
+        text: el.form.error.otp.less_than,
+      },
+    ],
+  },
+  {
+    title: 'wrong sizes for ImageInput and FileInput',
+    describe: 'inputs scenario',
+    fields: [
+      {
+        key: 'image',
+        type: 'image',
+        required: true,
+        label: {
+          primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+        },
+        extra: {
+          limit: {
+            maxSize: 300,
+          },
+        },
+      },
+      {
+        key: 'file',
+        type: 'file',
+        required: true,
+        label: {
+          primary: 'Ανεβάστε το αρχείο της απόδειξης',
+        },
+        extra: {
+          limit: {
+            maxSize: 300,
+          },
+        },
+      },
+    ],
+    fill: [
+      {
+        fieldKey: 'image',
+        value: {
+          fileName: 'green_image.png',
+          size: 300,
+        },
+      },
+      {
+        fieldKey: 'file',
+        value: {
+          fileName: 'file.txt',
+          size: 200,
+        },
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'image',
+        args: {
+          maxSizeToMb: 0.0003,
+        },
+        text: el.form.error.file_size,
+      },
+      {
+        type: 'error',
+        fieldKey: 'file',
+        args: {
+          maxSizeToMb: 0.0003,
+        },
+        text: el.form.error.file_size,
+      },
+    ],
+  },
+  {
+    title: 'wrong dimensions for ImageInput',
+    describe: 'inputs scenario',
+    fields: [
+      {
+        key: 'image',
+        type: 'image',
+        required: true,
+        label: {
+          primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+        },
+        extra: {
+          limit: {
+            maxHeight: 400,
+            maxWidth: 400,
+            minHeight: 100,
+            minWidth: 100,
+          },
+        },
+      },
+    ],
+    fill: [
+      {
+        fieldKey: 'image',
+        value: {
+          fileName: 'green_image.png',
+          width: 500,
+          height: 500,
+        },
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'image',
+        args: {
+          minWidth: 100,
+          minHeight: 100,
+          maxWidth: 400,
+          maxHeight: 400,
+        },
+        text: el.form.error.image.image_dimension_size,
+      },
+    ],
+  },
+];
+
+export default scenarios;

package/src/installation.mdx

@@ -7,12 +7,9 @@ sidebar_label: Installation
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
-import LeadText from '@site/src/components/LeadText';
 
-<LeadText>
-  This page will help you install Digigov Form depending on the framework that
-  you use and the application architecture.
-</LeadText>
+This page will help you install Digigov Form depending on the framework that
+you use and the application architecture.
 
 We assume that your stack uses some of the following tools.
 

package/src/internal.ts

@@ -1,34 +1,5 @@
-export { default as Field } from '@digigov/form/Field';
-export * from '@digigov/form/Field';
-export { default as FieldArray } from '@digigov/form/FieldArray';
-export * from '@digigov/form/FieldArray';
-export { default as FieldConditional } from '@digigov/form/Field/FieldConditional';
-export * from '@digigov/form/Field/FieldConditional';
-export { default as Fieldset } from '@digigov/form/Fieldset';
-export * from '@digigov/form/Fieldset';
-export { default as FormBuilder } from '@digigov/form/FormBuilder';
-export * from '@digigov/form/FormBuilder';
-export { Step } from '@digigov/form/Questions/Step';
-export * from '@digigov/form/Questions/Step';
-export { default as Questions } from '@digigov/form/Questions';
-export * from '@digigov/form/Questions';
-export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
-export * from '@digigov/form/inputs/Checkboxes';
-export { default as DateInput } from '@digigov/form/inputs/DateInput';
-export * from '@digigov/form/inputs/DateInput';
-export { default as FileInput } from '@digigov/form/inputs/FileInput';
-export * from '@digigov/form/inputs/FileInput';
-export { default as Input } from '@digigov/form/inputs/Input';
-export * from '@digigov/form/inputs/Input';
-export { default as Label } from '@digigov/form/inputs/Label';
-export * from '@digigov/form/inputs/Label';
-export { default as Radio } from '@digigov/form/inputs/Radio';
-export * from '@digigov/form/inputs/Radio';
-export { default as Select } from '@digigov/form/inputs/Select';
+export { Field } from '@digigov/form/Field';
+export { Fieldset } from '@digigov/form/Fieldset';
 export * from '@digigov/form/FormContext';
-export * from '@digigov/form/inputs/Select';
-export * from '@digigov/form/inputs';
-export * from '@digigov/form/internal';
 export * from '@digigov/form/types';
-export * from '@digigov/form/utils';
 export * from '@digigov/form/validators';