initial commit

.eslintrc.js

+module.exports = require('@digigov/dev').eslintrc();

.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

+module.exports = require('@digigov/dev').prettierrc();

README.md

+# array-field
+
+> My kryptonian DigiGOV project.
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+
+# build for production and launch server
+$ yarn build
+$ yarn start
+
+```
+
+For detailed explanation on how things work, check out [DigiGOV toolkit docs](https://guide.digigov.dev.grnet.gr/toolkit).

next-env.d.ts

+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

+module.exports = require('@digigov/dev').nextrc();

package.json

+{
+  "name": "array-field",
+  "version": "0.1.0",
+  "description": "My kryptonian DigiGOV project.",
+  "author": "Dimitris Tsironis",
+  "private": true,
+  "scripts": {
+    "dev": "digigov dev",
+    "build": "digigov build",
+    "start": "digigov start",
+    "export": "digigov export"
+  },
+  "dependencies": {
+    "@digigov/ui": "latest",
+    "@digigov/nextjs": "latest",
+    "@material-ui/core": "^4.9.0",
+    "@material-ui/styles": "^4.9.0",
+    "@material-ui/icons": "^4.5.1",
+    "@material-ui/lab": "^4.0.0-alpha.40",
+    "clsx": "^1.1.0",
+    "i18next": "^19.1.0",
+    "next": "^9.2.1",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
+    "react-i18next": "^11.3.3"
+  },
+  "devDependencies": {
+    "@digigov/dev": "latest",
+    "typescript": "^3.7.5"
+  }
+}

src/locales/el.json

+{
+  "app": {
+    "name": "My Service",
+    "intro_text": "Welcome to My Service"
+  }
+}

src/pages/_app.js

+import initI18n from '@digigov/nextjs/i18n';
+
+import App from '@digigov/nextjs/App';
+initI18n({
+  el: {
+    translation: require('../locales/el'),
+  },
+});
+export default App;

src/pages/_document.js

+import Document from '@digigov/nextjs/Document';
+export default Document;

src/pages/directors.js

+import React, { useState } from 'react';
+import Head from 'next/head';
+import { useTranslation } from 'react-i18next';
+import BasicLayout, {
+  Top,
+  Content,
+  Main,
+  Side,
+  Bottom,
+} from '@digigov/ui/layouts/Basic';
+import FormBuilder, {
+  Fieldset,
+  FieldsetLabel,
+  Field,
+
+} from '@digigov/ui/form/Form';
+import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction} from '@digigov/ui/core/SummaryList'
+import Title from '@digigov/ui/typography/Title'
+import Button from '@digigov/ui/core/Button'
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import ServiceBadge from '@digigov/ui/core/ServiceBadge';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+import PageTitle, { PageTitleHeading } from '@digigov/ui/app/PageTitle';
+
+export const fields = [
+  {
+    key: 'full_name',
+    label: { primary: 'Full name'},
+    required: true,
+    type: 'string',
+  },
+  {
+    key: 'phone',
+    label: {
+      primary: 'Mobile phone',
+      secondary: 'A valid mobile number, eg. +306988848888',
+    },
+    required: true,
+    type: 'mobile_phone',
+  },
+  {
+    key: 'number',
+    label: { primary: 'AFM' },
+    required: true,
+    width: '100px',
+    type: 'int',
+  },
+];
+
+export const addMoreFields = [
+  {
+    key: 'addmore',
+    type: 'choice:single',
+    required: true,
+    extra: {
+      options: [
+        {
+          label: { primary: 'Yes' },
+          value: true,
+        },
+        {
+          label: { primary: 'No' },
+          value: false,
+        },
+      ],
+    },
+  },
+];
+
+const Directors = () => {
+  const { t } = useTranslation();
+  const [preview, setPreview] = useState(false);
+  const [directors, setDirectors] = useState([]);
+  return (
+    <BasicLayout>
+      <Head>
+        <title>{t('app.name')}</title>
+      </Head>
+      <Top>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>
+            {t('app.name')}
+            <ServiceBadge label="ALPHA" />
+          </HeaderTitle>
+        </Header>
+      </Top>
+      <Content>
+        <Main>
+          { preview ? <>
+              <Title size="xl">{`You have added ${directors.length} directors`}</Title>
+              <SummaryList>
+                { directors.map(director => (
+                <SummaryListItem>
+                  <SummaryListItemKey>Full Name</SummaryListItemKey>
+                  <SummaryListItemValue>{director.full_name}</SummaryListItemValue>
+                  <SummaryListItemAction>Change</SummaryListItemAction>
+                  <SummaryListItemAction>Delete</SummaryListItemAction>
+                </SummaryListItem>))}
+              </SummaryList>
+
+<FormBuilder
+  key="addmore"
+  fields={addMoreFields}
+  onSubmit={(data) => {
+    debugger
+  }}
+>
+  <Fieldset>
+    <FieldsetLabel>Do you want to add another director?</FieldsetLabel>
+    {fields.map((field) => (
+      <Field key={field.key} name={field.key} />
+    ))}
+  </Fieldset>
+  <Button type="submit">Submit</Button>
+    </FormBuilder>
+              </>:
+              <>
+          <Title size="xl">What are the details for the director you want to add?</Title>
+<FormBuilder
+  key="addmore"
+  fields={fields}
+  onSubmit={(data) => {
+    debugger;
+    setPreview(true)
+    setDirectors([...directors, data])
+  }}
+>
+  <Fieldset>
+    <FieldsetLabel>Director's details</FieldsetLabel>
+    {fields.map((field) => (
+      <Field key={field.key} name={field.key} />
+    ))}
+  </Fieldset>
+  <Button type="submit">Submit</Button>
+    </FormBuilder></>}
+        </Main>
+        <Side></Side>
+      </Content>
+      <Bottom>
+        <GovGRFooter />
+      </Bottom>
+    </BasicLayout>
+  );
+};
+
+export default Directors;

src/pages/index.js

+import React from 'react';
+import Head from 'next/head';
+import { useTranslation } from 'react-i18next';
+
+import BasicLayout, {
+  Top,
+  Content,
+  Main,
+  Side,
+  Bottom,
+} from '@digigov/ui/layouts/Basic';
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import ServiceBadge from '@digigov/ui/core/ServiceBadge';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+import PageTitle, { PageTitleHeading } from '@digigov/ui/app/PageTitle';
+
+const Home = () => {
+  const { t } = useTranslation();
+  return (
+    <BasicLayout>
+      <Head>
+        <title>{t('app.name')}</title>
+      </Head>
+      <Top>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>
+            {t('app.name')}
+            <ServiceBadge label="ALPHA" />
+          </HeaderTitle>
+        </Header>
+      </Top>
+      <Content>
+        <Main>
+          <PageTitle>
+            <PageTitleHeading>{t('app.name')}</PageTitleHeading>
+          </PageTitle>
+          <div>{t('app.intro_text')}</div>
+        </Main>
+        <Side></Side>
+      </Content>
+      <Bottom>
+        <GovGRFooter />
+      </Bottom>
+    </BasicLayout>
+  );
+};
+
+export default Home;

tsconfig.json

+{
+  "extends": "@digigov/dev/tsconfig.common",
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    ".next"
+  ],
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  }
+}