@digigov/form 0.10.6 → 0.10.7

package/src/MultiplicityField/__stories__/Default.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    type: 'array',
+    multiplicity: true,
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      border: true,
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      of: {
+        type: 'object',
+        label: {
+          primary: 'Στοιχεία συνυπογράφοντα',
+          secondary: 'Δείτε και αλλάξτε τα στοιχεία του συνυπογράφοντα',
+        },
+        extra: {
+          fields: [
+            {
+              key: 'afm',
+              type: 'afm',
+              required: true,
+              label: { primary: 'ΑΦΜ' },
+            },
+            {
+              key: 'firstName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Επώνυμο',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'phonenumber',
+    type: 'phone_number',
+    required: true,
+    label: {
+      primary: 'Σταθερό τηλέφωνο',
+      secondary: 'Συμπληρώστε τον αριθμό τηλεφώνου σας',
+    },
+  },
+] as FieldSpec[];
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field name="string" {...fields[0]} />
+    <Field name="multiplicity" {...fields[1]} />
+    <Field name="phonenumber" {...fields[2]} />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);

package/src/MultiplicityField/__stories__/PreviewDisplay.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import Layout, { Content, Main } from '@digigov/ui/layouts/Basic/';
+import SummaryList, {
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+} from '@digigov/ui/core/SummaryList';
+import {
+  Header,
+  HeaderSection,
+  HeaderContent,
+  HeaderTitle,
+  Caption,
+  Title,
+  Paragraph,
+  Card,
+  CardHeading,
+  CardText,
+  List,
+  ListItem,
+} from '@digigov/ui';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+
+const fields = [
+  {
+    name: 'Όνομα',
+    value: 'ΜΑΡΙΟΣ',
+  },
+  {
+    name: 'Επώνυμο',
+    value: 'ΜΕΝΕΞΕΣ',
+  },
+  {
+    name: 'Όνομα Πατέρα',
+    value: 'ΝΙΚΟΣ',
+  },
+  {
+    name: 'Όνομα Μητέρα',
+    value: 'ΜΑΡΙΑ',
+  },
+  {
+    name: 'Α.Φ.Μ',
+    value: '12030454',
+  },
+  {
+    name: 'Τηλέφωνο',
+    value: '6984386756',
+  },
+  {
+    name: 'Ημερομηνία Γέννησης',
+    value: '22/03/78',
+  },
+  {
+    name: 'Α.Δ.Τ',
+    value: 'Ψ456789',
+  },
+  {
+    name: 'Τύπος A.Δ.Τ',
+    value: 'ΚΑΡΤΑ',
+  },
+];
+
+export const PreviewDisplay = () => (
+  <Layout>
+    <Header>
+      <HeaderSection>
+        <HeaderContent>
+          <GovGRLogo href="#" />
+          <HeaderTitle>Πρότυπο-Αναφοράς</HeaderTitle>
+        </HeaderContent>
+      </HeaderSection>
+    </Header>
+    <Content>
+      <Main>
+        <Caption>Ψηφιακή βεβαίωση ιδιωτικού συμφωνητικού</Caption>
+        <Title>Προεπισκόπηση</Title>
+        <Paragraph>
+          <Paragraph>
+            Παρακάτω εμφανίζονται οι συνυπογράφοντες του ιδιωτικού συμφωνητικού
+          </Paragraph>
+        </Paragraph>
+        <Card variant="border" borderColor="dark">
+          <CardHeading>Συνυπογράφοντας 1</CardHeading>
+          <CardText>
+            <SummaryList>
+              {fields &&
+                fields.map((field, index) => {
+                  return (
+                    <SummaryListItem key={index}>
+                      <SummaryListItemKey>{field.name}</SummaryListItemKey>
+                      <SummaryListItemValue>{field.value}</SummaryListItemValue>
+                    </SummaryListItem>
+                  );
+                })}
+            </SummaryList>
+          </CardText>
+        </Card>
+        <Card variant="border" borderColor="dark">
+          <CardHeading>Συνυπογράφοντας 2</CardHeading>
+          <CardText>
+            <SummaryList>
+              {fields &&
+                fields.map((field, index) => {
+                  return (
+                    <SummaryListItem key={index}>
+                      <SummaryListItemKey>{field.name}</SummaryListItemKey>
+                      <SummaryListItemValue>{field.value}</SummaryListItemValue>
+                    </SummaryListItem>
+                  );
+                })}
+            </SummaryList>
+          </CardText>
+        </Card>
+        <Card variant="border" borderColor="dark">
+          <CardHeading>Συνυπογράφοντας 3</CardHeading>
+          <CardText>
+            <SummaryList>
+              <SummaryListItem>
+                <SummaryListItemKey>Όνομα</SummaryListItemKey>
+                <SummaryListItemValue>Μάριος</SummaryListItemValue>
+              </SummaryListItem>
+            </SummaryList>
+          </CardText>
+        </Card>
+        <Title size="md">Στοιχεία Δήλωσης</Title>
+        <SummaryList>
+          <SummaryListItem>
+            <SummaryListItemKey>Όνομα</SummaryListItemKey>
+            <SummaryListItemValue>ΜΑΡΙΟΣ</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Επώνυμο</SummaryListItemKey>
+            <SummaryListItemValue>ΜΕΝΕΞΕΣ</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ημερομηνία Γέννησης</SummaryListItemKey>
+            <SummaryListItemValue>15/12/1988</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Σχολεία</SummaryListItemKey>
+            <SummaryListItemValue>
+              <List marginBottom={0} marginTop={0} listStyle="bullet">
+                <ListItem>2o ΗΜΕΡΗΣΙΟ ΓΕΝΙΚΟ ΛΥΚΕΙΟ ΞΑΝΘΗΣ</ListItem>
+                <ListItem>2o ΗΜΕΡΗΣΙΟ ΓΕΝΙΚΟ ΛΥΚΕΙΟ ΞΑΝΘΗΣ</ListItem>
+                <ListItem>2o ΗΜΕΡΗΣΙΟ ΓΕΝΙΚΟ ΛΥΚΕΙΟ ΞΑΝΘΗΣ</ListItem>
+                <ListItem>15o ΗΜΕΡΗΣΙΟ ΓΕΝΙΚΟ ΓΥΜΝΑΣΙΟ ΑΘΗΝΩΝ</ListItem>
+              </List>
+            </SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Όνομα</SummaryListItemKey>
+            <SummaryListItemValue>Μάριος</SummaryListItemValue>
+          </SummaryListItem>
+        </SummaryList>
+      </Main>
+    </Content>
+    <GovGRFooter></GovGRFooter>
+  </Layout>
+);

package/src/MultiplicityField/__stories__/WithExactLength.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    type: 'array',
+    multiplicity: true,
+    label: {
+      primary: 'Εξαρτώμενα μέλη',
+      secondary:
+        'Τα εξαρτώμενα μέλη είναι φυσικά πρόσωπα που υπάγονται στη φορολογική σας δήλωση',
+    },
+    extra: {
+      label: {
+        object: {
+          title: 'Εξαρτώμενο μέλος',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση μέλους',
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε εξαρτώμενα μέλη;',
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      length: 2,
+      of: {
+        type: 'object',
+        label: {
+          primary: 'Στοιχεία εξαρτώμενου μέλους',
+          secondary:
+            'Συμπληρώστε τα στοιχεία παρακάτω και μετά πατήστε το κουμπί «Προσθήκη»',
+        },
+        extra: {
+          fields: [
+            {
+              key: 'firstName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Επώνυμο',
+              },
+            },
+            {
+              key: 'bod',
+              required: true,
+              type: 'date',
+              label: {
+                primary: 'Ημερομηνία γέννησης',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'phonenumber',
+    type: 'phone_number',
+    required: true,
+    label: {
+      primary: 'Σταθερό τηλέφωνο',
+      secondary: 'Συμπληρώστε τον αριθμό τηλεφώνου σας',
+    },
+  },
+] as FieldSpec[];
+
+export const WithExactLength = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field name="string" {...fields[0]} />
+    <Field name="multiplicity" {...fields[1]} />
+    <Field name="phonenumber" {...fields[2]} />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);

package/src/MultiplicityField/__stories__/WithMaxLength.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    type: 'array',
+    multiplicity: true,
+    label: {
+      primary: 'Εξαρτώμενα μέλη',
+      secondary:
+        'Τα εξαρτώμενα μέλη είναι φυσικά πρόσωπα που υπάγονται στη φορολογική σας δήλωση',
+    },
+    extra: {
+      label: {
+        object: {
+          title: 'Εξαρτώμενο μέλος',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση μέλους',
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε εξαρτώμενα μέλη;',
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      max: 2,
+      of: {
+        type: 'object',
+        label: {
+          primary: 'Στοιχεία εξαρτώμενου μέλους',
+          secondary:
+            'Συμπληρώστε τα στοιχεία παρακάτω και μετά πατήστε το κουμπί «Προσθήκη»',
+        },
+        extra: {
+          fields: [
+            {
+              key: 'firstName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Επώνυμο',
+              },
+            },
+            {
+              key: 'bod',
+              required: true,
+              type: 'date',
+              label: {
+                primary: 'Ημερομηνία γέννησης',
+              },
+              extra: {
+                max: 'now',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'phonenumber',
+    type: 'phone_number',
+    required: true,
+    label: {
+      primary: 'Σταθερό τηλέφωνο',
+      secondary: 'Συμπληρώστε τον αριθμό τηλεφώνου σας',
+    },
+  },
+] as FieldSpec[];
+
+export const WithMaxLength = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field name="string" {...fields[0]} />
+    <Field name="multiplicity" {...fields[1]} />
+    <Field name="phonenumber" {...fields[2]} />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);

package/src/MultiplicityField/__stories__/WithMinAndMaxLength.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    type: 'array',
+    multiplicity: true,
+    label: {
+      primary: 'Εξαρτώμενα μέλη',
+      secondary:
+        'Τα εξαρτώμενα μέλη είναι φυσικά πρόσωπα που υπάγονται στη φορολογική σας δήλωση',
+    },
+    extra: {
+      label: {
+        object: {
+          title: 'Εξαρτώμενο μέλος',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση μέλους',
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε εξαρτώμενα μέλη;',
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      min: 2,
+      max: 3,
+      of: {
+        type: 'object',
+        label: {
+          primary: 'Στοιχεία εξαρτώμενου μέλους',
+          secondary:
+            'Συμπληρώστε τα στοιχεία παρακάτω και μετά πατήστε το κουμπί «Προσθήκη»',
+        },
+        extra: {
+          fields: [
+            {
+              key: 'firstName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Επώνυμο',
+              },
+            },
+            {
+              key: 'bod',
+              required: true,
+              type: 'date',
+              label: {
+                primary: 'Ημερομηνία γέννησης',
+              },
+              extra: {
+                max: 'now',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'phonenumber',
+    type: 'phone_number',
+    required: true,
+    label: {
+      primary: 'Σταθερό τηλέφωνο',
+      secondary: 'Συμπληρώστε τον αριθμό τηλεφώνου σας',
+    },
+  },
+] as FieldSpec[];
+
+export const WithMinAndMaxLength = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field name="string" {...fields[0]} />
+    <Field name="multiplicity" {...fields[1]} />
+    <Field name="phonenumber" {...fields[2]} />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);

package/src/MultiplicityField/__stories__/WithMinLength.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    type: 'array',
+    multiplicity: true,
+    label: {
+      primary: 'Εξαρτώμενα μέλη',
+      secondary:
+        'Τα εξαρτώμενα μέλη είναι φυσικά πρόσωπα που υπάγονται στη φορολογική σας δήλωση',
+    },
+    extra: {
+      label: {
+        object: {
+          title: 'Εξαρτώμενο μέλος',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση μέλους',
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε εξαρτώμενα μέλη;',
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      min: 3,
+      of: {
+        type: 'object',
+        label: {
+          primary: 'Στοιχεία εξαρτώμενου μέλους',
+          secondary:
+            'Συμπληρώστε τα στοιχεία παρακάτω και μετά πατήστε το κουμπί «Προσθήκη»',
+        },
+        extra: {
+          fields: [
+            {
+              key: 'firstName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Επώνυμο',
+              },
+            },
+            {
+              key: 'bod',
+              required: true,
+              type: 'date',
+              label: {
+                primary: 'Ημερομηνία γέννησης',
+              },
+              extra: {
+                max: 'now',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'phonenumber',
+    type: 'phone_number',
+    required: true,
+    label: {
+      primary: 'Σταθερό τηλέφωνο',
+      secondary: 'Συμπληρώστε τον αριθμό τηλεφώνου σας',
+    },
+  },
+] as FieldSpec[];
+
+export const WithMinLength = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field name="string" {...fields[0]} />
+    <Field name="multiplicity" {...fields[1]} />
+    <Field name="phonenumber" {...fields[2]} />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);