@digigov/form 2.0.0-daaf7bdf → 2.0.0-e7d30530

package/src/MultiplicityField/index.test.tsx

@@ -34,6 +34,10 @@ test('renders the All MultiplicityField variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/MultiplicityField/index.tsx

@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
 import { useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
-
-import FieldObject from '@digigov/form/FieldObject';
-import AddObjects from '@digigov/form/MultiplicityField/add-objects';
+import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { AddObjects } from '@digigov/form/MultiplicityField/add-objects';
 import {
   MultiplicityProps,
   StashedObject,
 } from '@digigov/form/MultiplicityField/types';
-import { Button } from '@digigov/react-core/Button';
-import { Card } from '@digigov/react-core/Card';
-import { CardAction } from '@digigov/react-core/CardAction';
-import { CardContent } from '@digigov/react-core/CardContent';
-import { CardHeading } from '@digigov/react-core/CardHeading';
-import { Heading } from '@digigov/react-core/Heading';
+import {
+  Card,
+  CardHeading,
+  CardContent,
+  CardAction,
+} from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+import { Heading } from '@digigov/ui/typography/Heading';
 
 // epeidh einai forwardRef to ref mas to dinei xwrista apo ta props
 export const Multiplicity: React.FC<MultiplicityProps> = ({
@@ -30,6 +31,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  resetField,
   Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -48,7 +50,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
     setStashedObjects(newStashedObjects);
   };
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
       error={
@@ -56,8 +58,10 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
           ? error
           : undefined
       }
+      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
+      register={register}
     >
       {stashedObjects.length > 0 ? (
         <div>
@@ -96,10 +100,11 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         getValues={getValues}
         unregister={unregister}
         trigger={trigger}
+        resetField={resetField}
         clearErrors={clearErrors}
         Field={Field}
       />
-    </FieldContainer>
+    </FieldBaseContainer>
   );
 };
 

package/src/MultiplicityField/types.ts

@@ -1,6 +1,5 @@
 import { ErrorOption, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/form/Field/types';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
+import { FieldSpec, ControlledFieldProps } from '@digigov/form/Field/types';
 
 export interface MultiplicityProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {
@@ -13,6 +12,7 @@ export interface MultiplicityProps
   setValue: UseFormReturn['setValue'];
   getValues: UseFormReturn['getValues'];
   unregister: UseFormReturn['unregister'];
+  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
   extra?: Record<string, any>;
   label?: FieldSpec['label'];

package/src/Questions/Questions.stories.js

@@ -1,7 +1,10 @@
 import Questions from '@digigov/form/Questions';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/Questions',
   component: Questions,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Questions',
 };
 export { Default } from '@digigov/form/Questions/__stories__/Default';

package/src/Questions/Questions.tsx

@@ -31,7 +31,7 @@ export const Questions: React.FC<QuestionsInterface> = ({
   useEffect(() => {
     if (forceStepName !== currentStep.name) {
       const forceStep = steps.find(({ name }) => name === forceStepName);
-      forceStep && setCurrentStep(forceStep);
+      if (forceStep) setCurrentStep(forceStep);
     }
   }, [forceStepName]);
   const localData =
@@ -42,16 +42,16 @@ export const Questions: React.FC<QuestionsInterface> = ({
   const submitStep = (stepName, stepData): void => {
     data[stepName] = stepData;
     if (localDraft) {
-      isBrowser &&
+      if (isBrowser)
         window.localStorage.setItem(`questions-${name}`, JSON.stringify(data));
     }
     if (onChange) {
-      onChange && onChange(data);
+      onChange(data);
     }
     setData(data);
     const nextStep = getNextStep(currentStep, steps, data);
     if (nextStep) {
-      onActiveStep && onActiveStep(nextStep);
+      if (onActiveStep) onActiveStep(nextStep);
       setCurrentStep(nextStep);
     } else {
       onSubmit(data);

package/src/Questions/Step/StepArrayReview.tsx

@@ -37,7 +37,7 @@ export const StepArrayReview: React.FC<StepArrayReviewInterface> = (props) => {
       </PageTitleContainer>
       <SummaryList>
         {props.array.map(
-          (item: { [x: string]: React.ReactNode }, idx: number) => (
+          (item: Record<string, React.ReactNode>, idx: number) => (
             <SummaryListItem key={idx}>
               <SummaryListItemKey>
                 {t(primaryField.label.primary)}

package/src/Questions/Step/StepTitle.tsx

@@ -1,12 +1,13 @@
 import React, { useContext } from 'react';
 import { StepContext } from '@digigov/form/Questions/Step/StepContext';
-import Heading, { HeadingProps } from '@digigov/react-core/Heading';
-import HeadingCaption from '@digigov/react-core/HeadingCaption';
-import PageTitleContainer, {
+import {
+  PageTitleContainer,
   PageTitleCaption,
 } from '@digigov/ui/app/PageTitleContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 import { BackLink } from '@digigov/ui/navigation/BackLink';
+import { Heading, HeadingProps } from '@digigov/ui/typography/Heading';
+import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
 
 export interface StepTitleInterface {
   title?: string;

package/src/Questions/__snapshots__/index.spec.tsx.snap

@@ -1,19 +1,23 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Questions 1`] = `
 <body>
   <div>
     <a
-      class="ds-back-link ds-print-hidden"
+      class="ds-print-hidden ds-back-link"
+      href=""
       tabindex="0"
     >
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--caret ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M18,22V2L6,12L18,22z"
         />
       </svg>
@@ -42,13 +46,13 @@ exports[`renders the Questions 1`] = `
       class="ds-form"
     >
       <div
-        class="ds-field xs:ds-grid__col-span-12"
+        class="ds-field ds-grid-item xs:ds-grid__col-span-12 sm:ds-grid__col-span-12 md:ds-grid__col-span-12 lg:ds-grid__col-span-12 xl:ds-grid__col-span-12"
       >
         <label
           class="ds-label"
         >
           <span
-            class="ds-heading-sm"
+            class="ds-label__title ds-label__title--sm"
           >
             name.field.primary
           </span>
@@ -60,13 +64,15 @@ exports[`renders the Questions 1`] = `
           <input
             aria-required="true"
             class="ds-input"
+            data-type="string"
+            id="name"
             name="name"
             type="text"
           />
         </label>
       </div>
       <button
-        class="ds-btn-primary ds-btn ds-print-hidden"
+        class="ds-print-hidden ds-btn ds-btn-primary"
         type="submit"
       >
         Συνέχεια

package/src/Questions/__stories__/Default.tsx

@@ -75,7 +75,7 @@ const steps = [
   },
 ];
 
-export function Default() {
+export function Default(_: any) {
   return (
     <BasicLayout>
       <Top>

package/src/Questions/{index.mdx → doc.mdx}

@@ -14,14 +14,12 @@ import {
   TableDataCell,
 } from '@digigov/react-core';
 
-import LeadText from '@site/src/components/LeadText';
+# Questions
 
-<LeadText>
-  Question pages are used to ask users meaningful questions needed by your
-  GOV.GR service, or even gather data about their persona or their application
-  status. Use step questions to make bigger forms less scary and easier to fill
-  out.
-</LeadText>
+Question pages are used to ask users meaningful questions needed by your
+GOV.GR service, or even gather data about their persona or their application
+status. Use step questions to make bigger forms less scary and easier to fill
+out.
 
 ## Introduction to Question pages
 
@@ -41,7 +39,7 @@ Even if users struggle through to the end of a form and answer honestly, if it
 more work than they expected, they’ll be annoyed about it. That's the exact
 opposite of our goals of making concise, easy-to-use services.
 
-```jsx live
+```jsx
 import React from 'react';
 import Questions, { Step, StepForm, StepTitle } from '@digigov/form/Questions';
 import { Field } from '@digigov/form';
@@ -49,7 +47,7 @@ import { Field } from '@digigov/form';
 const steps = [
   {
     name: 'residency',
-    title: 'Where do you live?',
+    title: 'Που μένετε;',
     fields: [
       {
         key: 'countries',
@@ -59,25 +57,25 @@ const steps = [
           options: [
             {
               label: {
-                primary: 'Greece',
+                primary: 'Ελλάδα',
               },
               value: 'greece',
             },
             {
               label: {
-                primary: 'Cyprus',
+                primary: 'Κύπρος',
               },
               value: 'cyprus',
             },
             {
               label: {
-                primary: 'European Union',
+                primary: 'Ευρωπαϊκή Ένωση',
               },
               value: 'eu',
             },
             {
               label: {
-                primary: 'United States of America',
+                primary: 'Ηνωμένες Πολιτείες της Αμερικής',
               },
               value: 'usa',
             },
@@ -88,12 +86,12 @@ const steps = [
   },
   {
     name: 'dob',
-    title: 'When is your birthday?',
+    title: 'Ποια είναι ημερομηνία γέννησής σας;',
     fields: [
       {
         key: 'dob',
         label: {
-          primary: 'Birthday',
+          primary: 'Ημερομηνία γέννησης',
         },
         type: 'date',
         required: true,
@@ -159,7 +157,7 @@ its subsequent subcomponents that you customise as needed, like the step title,
 description or form. You can also add components that are not form-specific,
 adding paragraphs or other custom components.
 
-```jsx
+```jsx pure
 <Questions name="example" steps={steps} onSubmit={(data) => doSomething(data)}>
   {/* more steps could be rendered here ... */}
   <Step name="age">
@@ -184,10 +182,10 @@ object. The most basic properties are the following:
 - `fields` - an array that describes each input field that will be rendered in
   the `StepForm`. Each fields implements the `FieldSpec` interface as a JSON object.
 
-```json title="step-name.json"
+```json pure title="step-name.json"
 {
   "name": "name",
-  "title": "What is your name?",
+  "title": "Ποιο είναι το όνομά σας;",
   "fields": [
     {
       "key": "name",
@@ -209,11 +207,11 @@ basic branching between each step. The `nextStep` property will need to be a
 function that will take the form state as an argument and will return the key of
 the next `step`.
 
-```json title="next-step.json"
+```json pure title="next-step.json"
 const steps = [
   {
     name: 'age',
-    title: 'What is your age?',
+    title: 'Ποια είναι η ηλικία σας?',
     fields: [
       {
         key: 'age',
@@ -229,13 +227,13 @@ const steps = [
   },
   {
     name: 'citizen-underage',
-    title: 'Are you a student?',
+    title: 'Είστε μαθητής;',
     fields: [ ... ]
   },
   {
     // highlight-next-line
     name: 'citizen-adult',
-    title: 'Are you currently employed?',
+    title: 'Εργάζεστε;',
     fields: [
       {
         key: 'citizen-underage-employed',
@@ -245,11 +243,11 @@ const steps = [
           options: [
             {
               label: {primary: "Yes"},
-              value: 'yes',
+              value: 'Ναι',
             },
             {
               label: {primary: "No"},
-              value: 'no',
+              value: 'ΌΧι',
             }
           ]
         }
@@ -263,7 +261,7 @@ For example, you may use a form to determine if citizens are adults or not, and
 we want to ask users different questions according to their persona. We can use
 a branch between the `age` step and the other two steps.
 
-```jsx live
+```jsx
 import React from 'react';
 import GovGRFooter from '@digigov/ui/govgr/Footer';
 import Header from '@digigov/ui/app/Header';
@@ -283,7 +281,7 @@ import TranslatorsHeader from 'translators-landing/components/TranslatorsHeader'
 const steps = [
   {
     name: 'age',
-    title: 'What is your age?',
+    title: 'Ποια είναι η ηλικία σας;',
     fields: [
       {
         key: 'age',
@@ -297,7 +295,7 @@ const steps = [
   },
   {
     name: 'citizen-underage',
-    title: 'Are you a student?',
+    title: 'Είστε μαθητής;',
     fields: [
       {
         key: 'citizen-underage-student',
@@ -306,11 +304,11 @@ const steps = [
         extra: {
           options: [
             {
-              label: { primary: 'Yes' },
+              label: { primary: 'Ναι' },
               value: 'yes',
             },
             {
-              label: { primary: 'No' },
+              label: { primary: 'Όχι' },
               value: 'no',
             },
           ],
@@ -320,7 +318,7 @@ const steps = [
   },
   {
     name: 'citizen-adult',
-    title: 'Are you currently employed?',
+    title: 'Εργάζεστε;',
     fields: [
       {
         key: 'citizen-adult-employed',
@@ -329,11 +327,11 @@ const steps = [
         extra: {
           options: [
             {
-              label: { primary: 'Yes' },
+              label: { primary: 'Ναι' },
               value: 'yes',
             },
             {
-              label: { primary: 'No' },
+              label: { primary: 'Όχι' },
               value: 'no',
             },
           ],
@@ -392,24 +390,3 @@ export default function Index() {
   );
 }
 ```
-
-## Prop types
-
-<TableContainer>
-  <Table>
-    <TableHead>
-      <TableRow>
-        <TableHeadCell>Περίοδος</TableHeadCell>
-        <TableHeadCell>Κανονικό ποσό</TableHeadCell>
-        <TableHeadCell>Μειωμένο ποσό</TableHeadCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableDataCell>Πρώτες 6 εβδομάδες </TableDataCell>
-        <TableDataCell> €109.80 / εβδομάδα</TableDataCell>
-        <TableDataCell> €69.80 / εβδομάδα</TableDataCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-</TableContainer>

package/src/Questions/index.spec.tsx

@@ -2,8 +2,12 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { Field } from '@digigov/form';
-import { Step, StepForm, StepQuote, StepTitle } from '@digigov/form/Questions';
-import Questions from '@digigov/form/Questions';
+import Questions, {
+  Step,
+  StepForm,
+  StepQuote,
+  StepTitle,
+} from '@digigov/form/Questions';
 
 const steps = [
   {
@@ -42,6 +46,14 @@ const steps = [
   },
 ];
 
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+});
+
 it('renders the Questions', () => {
   expect(
     render(

package/src/Questions/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Questions variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/create-simple-form.mdx

@@ -4,12 +4,8 @@ title: Create a simple Digigov Form
 sidebar_label: Creating simple forms
 ---
 
-import LeadText from '@site/src/components/LeadText';
-
-<LeadText>
-  This guide walks through building a simple form page, complete with validation
-  and data serialisation.
-</LeadText>
+This guide walks through building a simple form page, complete with validation
+and data serialisation.
 
 ## What we are building
 

package/src/{index.mdx → doc.mdx}

@@ -1,20 +1,16 @@
 ---
 id: Introduction
-title: Digigov Form
-sidebar_label: Introduction to Digigov Form
 ---
 
-import LeadText from '@site/src/components/LeadText';
+# Digigov form
 
-<LeadText>
-  Digigov Form is an off-the-shelf solution for managing web forms using
-  Reactjs. It supports flexible and multi-step forms and easy-to-use validation.
-  This page will guide you through everything you need to create accessible and
-  dynamic forms that can handle all sorts of user inputs.
-</LeadText>
+Digigov Form is an off-the-shelf solution for managing web forms using
+Reactjs. It supports flexible and multi-step forms and easy-to-use validation.
+This page will guide you through everything you need to create accessible and
+dynamic forms that can handle all sorts of user inputs.
 
 <img
-  src="/img/form.svg"
+  src="/tmp/form.svg"
   style={{ margin: '3rem 0', maxWidth: '450px', width: '60%' }}
 />
 
@@ -34,18 +30,33 @@ will be able to save via an JSON API.
 The `@digigov/form` NPM package contains React components and validators. The
 library uses basic, semantically correct HTML5 input fields.
 
-It adds dynamic control, interactivity and validations to the core input
-components implemented in `@digigov/react-core`. Styling is provided by
-`@digigov/css` library following the [GOV.GR design
-system](https://guide.services.gov.gr).
+### 📦 Installation
 
-Digigov Form uses two main libraries internally. The first is [React Hook
-Form](https://www.react-hook-form.com/) which helps us manage the form state and
-perform actions and mutations on it. The second is
-[Yup](https://github.com/jquense/yup) and it is used to validate form data. It
+```sh
+yarn add @digigov/form
+
+```
+
+Or using npm:
+
+```sh
+npm install i @digigov/form
+
+```
+
+`digigov/form` is a **form management solution** which adds dynamic control while simplifies handling user input, based on:
+
+✅ [React Hook Form](https://www.react-hook-form.com/) which helps us manage the form state and
+perform actions and mutations on it.
+
+🛠️ [Yup](https://github.com/jquense/yup) and it is used to validate form data. It
 interfaces with React Hook Form right out of the box, but also enables us to
 define custom validation types such as AMKA, AFM etc.
 
+🔄 [Multi-step](/components/@digigov/form/Questions) forms for complex workflows.
+
+🔗 [digigov/form](/components/@digigov/form/FormBuilder) components for a consistent UI.
+
 Some basic functionalites of `@digigov/form` will be presented in the following
 sections and also we are going to guide you through some more advanced topics
 such as internationalisation, custom data validation etc.

package/src/inputs/AutoCompleteInput/AutoComplete.stories.js

@@ -1,7 +1,10 @@
 import AutoComplete from '@digigov/form/inputs/AutoCompleteInput';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/AutoCompleteInput',
   component: AutoComplete,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'AutoCompleteInput',
 };
 export { Default } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Default';

package/src/inputs/AutoCompleteInput/__stories__/Default.tsx

@@ -4,13 +4,7 @@ import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
 import Button from '@digigov/ui/form/Button';
 
-const results = [
-  'Αμερική',
-  'Ασία',
-  'Αυστραλία',
-  'Αφρική',
-  'Ευρώπη',
-];
+const results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
 
 const fields: FieldSpec[] = [
   {
@@ -35,8 +29,7 @@ const fields: FieldSpec[] = [
 
 const initialValues = {};
 
-export const Default = () => (
-
+export const Default = (_: any) => (
   <FormBuilder
     fields={fields}
     onSubmit={(data) => {
@@ -49,6 +42,5 @@ export const Default = () => (
     ))}
     <Button type="submit">Submit</Button>
   </FormBuilder>
-
 );
-export default Default;
+export default Default;

package/src/inputs/AutoCompleteInput/__stories__/Multiple.tsx

@@ -4,13 +4,7 @@ import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
 import Button from '@digigov/ui/form/Button';
 
-const results = [
-  'Αμερική',
-  'Ασία',
-  'Αυστραλία',
-  'Αφρική',
-  'Ευρώπη',
-];
+const results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
 
 const fields: FieldSpec[] = [
   {
@@ -35,7 +29,7 @@ const fields: FieldSpec[] = [
 
 const initialValues = {};
 
-export const Multiple = () => (
+export const Multiple = (_: any) => (
   <FormBuilder
     fields={fields}
     onSubmit={(data) => {