@digigov/form 2.0.0-6e3977bc → 2.0.0-834daea4

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

@@ -3,13 +3,9 @@ id: ask-users-recursive
 title: Ask users for recursive data
 ---
 
-import LeadText from '@site/src/components/LeadText';
-
-<LeadText>
-  Multiplicity & FieldArray fields allow users to input data described by a
-  particular schema for an arbitrary number of times until they are done. It can
-  be used to input a fixed, a minimum, and a maximum length of instances.
-</LeadText>
+Multiplicity & FieldArray fields allow users to input data described by a
+particular schema for an arbitrary number of times until they are done. It can
+be used to input a fixed, a minimum, and a maximum length of instances.
 
 ## What we are trying to achieve
 
@@ -108,7 +104,7 @@ This field is the most complex component we currently offer, and it uses the
 react-hook-form under the hood. First, let's take a look at what it looks like, and then we can
 break down its functionality and how you can use it.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
@@ -209,7 +205,7 @@ are asking users for information about their vehicles, we can also fill in the `
 `label.primary`, as well as the `type` and `required`
 props.
 
-```jsx
+```jsx pure
 <Field
   key="vehicles"
   name="vehicles"
@@ -232,7 +228,7 @@ inner form, respectively.
 Inside the `of` key you can add an `extra` key that will then contain a `fields`
 key describing the field props for all inputs needed.
 
-```js
+```js pure
 // this will be used as value for the `extra` prop
 {
   of: {
@@ -290,7 +286,7 @@ As a result, if you learn how to use one, you can easily use the other, and
 naturally, you can also change their behaviour by changing a single prop in your
 React code.
 
-```jsx
+```jsx pure
 <Field
   key="vehicles"
   name="vehicles"
@@ -305,7 +301,7 @@ React code.
 The end result looks very different from Multiplicity at first glance, but you
 can achieve the same results with both of them.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
@@ -396,7 +392,7 @@ should expect to need some length validation sooner than later.
 You can easily validate the exact length of the items added to the multipliticy
 array, simply by using the `extra.length` prop.
 
-```jsx
+```jsx pure
 <Field
   extra={{
     length: 2,
@@ -409,7 +405,7 @@ array, simply by using the `extra.length` prop.
 The example below will validate this and show all the error messages necessary
 to make sure that the users understand what is going wrong with the process.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
@@ -497,7 +493,7 @@ Do not mix and match the exact `length` validation with the `min` or `max`.
 
 :::
 
-```jsx
+```jsx pure
 <Field
   extra={{
     min: 2,
@@ -511,7 +507,7 @@ Do not mix and match the exact `length` validation with the `min` or `max`.
 The example below will validate this and show all the error messages necessary
 to make sure that the users understand what is going wrong with the process.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';

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> = ({
@@ -48,7 +49,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
     setStashedObjects(newStashedObjects);
   };
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
       error={
@@ -99,7 +100,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         clearErrors={clearErrors}
         Field={Field}
       />
-    </FieldContainer>
+    </FieldBaseContainer>
   );
 };
 

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,72 +1,76 @@
-// 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"
       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>
       Πίσω
     </a>
     <div
-      class="ds-page-title"
+      class=" ds-page-title"
     >
       <span
-        class="ds-caption-xl"
+        class=" ds-caption-xl"
       >
         intro.caption
       </span>
       <h1
-        class="ds-heading-xl"
+        class=" ds-heading-xl"
       >
         intro.title
       </h1>
     </div>
     <p
-      class="ds-body"
+      class=" ds-body"
     >
       This is the intro
     </p>
     <form
-      class="ds-form"
+      class=" ds-form"
     >
       <div
-        class="ds-field xs:ds-grid__col-span-12"
+        class=" ds-field xs:ds-grid__col-span-12"
       >
         <label
-          class="ds-label"
+          class=" ds-label"
         >
           <span
-            class="ds-heading-sm"
+            class=" ds-label__title ds-label__title--sm"
           >
             name.field.primary
           </span>
           <p
-            class="ds-hint"
+            class=" ds-hint"
           >
             name.field.secondary
           </p>
           <input
             aria-required="true"
-            class="ds-input"
+            class=" ds-input"
+            data-type="string"
             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/{index.mdx → doc.mdx}

@@ -14,14 +14,11 @@ import {
   TableDataCell,
 } from '@digigov/react-core';
 
-import LeadText from '@site/src/components/LeadText';
 
-<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 +38,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';
@@ -159,7 +156,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,7 +181,7 @@ 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?",
@@ -209,7 +206,7 @@ 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',
@@ -263,7 +260,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';

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}

@@ -4,14 +4,10 @@ title: Digigov Form
 sidebar_label: Introduction to Digigov Form
 ---
 
-import LeadText from '@site/src/components/LeadText';
-
-<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"

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

@@ -11,19 +11,8 @@ options as the users type and also let them select an option from the list.
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/AutoCompleteInput"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Default.tsx" />
 
 ### Display multiple values
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/AutoCompleteInput"
-  story="Multiple.tsx"
-/>
-
-
-
+<code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple.tsx" />

package/src/inputs/AutoCompleteInput/index.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { Hint } from '@digigov/react-core/Hint';
-import UIAutoComplete, {
+import {
+  AutoComplete,
   AutoCompleteProps as UIAutoCompleteProps,
 } from '@digigov/ui/form/AutoComplete';
-import { Base } from '@digigov/react-core/Base';
-
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Base } from '@digigov/ui/utils/Base';
 export interface AutoCompleteInputExtra
   extends Omit<
     UIAutoCompleteProps,
@@ -36,33 +36,38 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   error,
   ...props
 }) => {
-  const suggest = useCallback(function suggest(
-    query: string,
-    syncResults: (options: any[]) => void
-  ): void {
-    syncResults(
-      query
-        ? options.filter(function (option) {
-          return (
-            `${option.value} ${option.label?.primary || ''} ${option.label?.secondary || ''
-              }`
-              .toLowerCase()
-              .indexOf(query.toLowerCase()) !== -1
-          );
-        })
-        : options
-    );
-  },
-    [options]);
+  const suggest = useCallback(
+    function suggest(
+      query: string,
+      syncResults: (options: any[]) => void
+    ): void {
+      syncResults(
+        query
+          ? options.filter(function (option) {
+              return (
+                `${option.value} ${option.label?.primary || ''} ${
+                  option.label?.secondary || ''
+                }`
+                  .toLowerCase()
+                  .indexOf(query.toLowerCase()) !== -1
+              );
+            })
+          : options
+      );
+    },
+    [options]
+  );
 
   return (
-    <UIAutoComplete
+    <AutoComplete
       multiple={type === 'choice:multiple' ? true : false}
       source={suggest}
       onConfirm={(value) => {
         if (Array.isArray(value)) {
-          const selectedValues = value.map(item => item.value);
-          selectedValues.length > 0 ? onChange(selectedValues) : onChange(undefined);
+          const selectedValues = value.map((item) => item.value);
+          selectedValues.length > 0
+            ? onChange(selectedValues)
+            : onChange(undefined);
         } else {
           onChange(value.value);
         }
@@ -95,4 +100,4 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   );
 };
 
-export default AutoCompleteInput;
+export default AutoCompleteInput;

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

@@ -10,24 +10,14 @@ Checkboxes are used to let a user select one or more options of a limited number
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Default.tsx" />
+
 
 ### Conditional
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="Conditional.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Conditional.tsx" />
+
 
 ### With divider
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="WithDivider.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/WithDivider.tsx" />

package/src/inputs/Checkboxes/index.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import CoreCheckboxes from '@digigov/react-core/Checkbox';
-import { CheckboxConditional } from '@digigov/react-core/CheckboxConditional';
-import CheckboxItem from '@digigov/react-core/CheckboxItem';
-import Hint from '@digigov/react-core/Hint';
+import {
+  Checkbox,
+  CheckboxItem,
+  CheckboxConditional,
+} from '@digigov/ui/form/Checkbox';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 export interface CheckboxesProps
   extends Omit<ControlledFieldProps, 'extra' | 'value'> {
@@ -29,34 +31,34 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   if (!value) value = [];
   const handleChange =
     (optionValue, idx, show) =>
-      (evt): void => {
-        let newValue;
-        if (evt.currentTarget.checked) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          newValue = value.concat([optionValue]);
-        } else {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          newValue = value.filter((val) => val !== optionValue);
-        }
-        if (show && show.length > 0) {
-          setChecked((items) =>
-            items.map((item, index) => (index === idx ? !item : item))
-          );
-        }
+    (evt): void => {
+      let newValue;
+      if (evt.currentTarget.checked) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        newValue = value.concat([optionValue]);
+      } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        newValue = value.filter((val) => val !== optionValue);
+      }
+      if (show && show.length > 0) {
+        setChecked((items) =>
+          items.map((item, index) => (index === idx ? !item : item))
+        );
+      }
 
-        // reset value to undefined instead of an empty array
-        // so the error state mechanism can throw validation errors
-        if (newValue.length === 0) newValue = undefined;
-        onChange(newValue);
-      };
+      // reset value to undefined instead of an empty array
+      // so the error state mechanism can throw validation errors
+      if (newValue.length === 0) newValue = undefined;
+      onChange(newValue);
+    };
   const { t } = useTranslation();
   const [checked, setChecked] = useState(
     Array<boolean>(options.length).fill(false)
   );
   return (
-    <CoreCheckboxes className={className}>
+    <Checkbox className={className}>
       {options.map(
         (
           {
@@ -103,7 +105,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
           </React.Fragment>
         )
       )}
-    </CoreCheckboxes>
+    </Checkbox>
   );
 };
 

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

@@ -13,11 +13,4 @@ either with a textbox that validates the input or a special date picker interfac
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/DateInput"
-  story="Default.tsx"
-/>
-
-
-
+<code src="@digigov/form/inputs/DateInput/__stories__/Default.tsx" />

package/src/inputs/DateInput/index.tsx

@@ -2,8 +2,10 @@ import React, { useMemo, useState } from 'react';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import DateInputContainer from '@digigov/react-core/DateInputContainer';
-import CoreDateInputItem from '@digigov/react-core/DateInputItem';
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 dayjs.extend(customParseFormat);
 
@@ -75,7 +77,7 @@ const makeDate = (val) => {
 };
 
 const DatePart = ({ label, ...props }) => {
-  return <CoreDateInputItem {...props}>{label}</CoreDateInputItem>;
+  return <DateInputItem {...props}>{label}</DateInputItem>;
 };
 
 export const DateInput = ({ name, type, ...props }) => {

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

@@ -12,8 +12,4 @@ Input element of type `file` let the user choose one or more files from their de
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/FileInput"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/FileInput/__stories__/Default.tsx" />

package/src/inputs/FileInput/index.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import FileUpload from '@digigov/react-core/FileUpload';
-import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
-import CoreHint from '@digigov/react-core/Hint';
-import Button from '@digigov/ui/form/Button';
+import { Button } from '@digigov/ui/form/Button';
+import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
 import { useTranslation } from '@digigov/ui/i18n';
-import Paragraph from '@digigov/ui/typography/Paragraph';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
     className?: string;
@@ -44,7 +43,7 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
             </Paragraph>
           </>
         ) : (
-          <CoreHint>{t('upload.no_file')}</CoreHint>
+          <Hint>{t('upload.no_file')}</Hint>
         )}
         <FileUpload
           ref={ref}

package/src/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx

@@ -9,6 +9,8 @@ const FIELDS: FieldSpec[] = [
     required: true,
     label: {
       primary: 'Ανέβασμα φωτογραφίας',
+      secondary:
+        'Οι επιτρεπόμενες διαστάσεις είναι για το ύψος από 100 μέχρι 400 και για το πλάτος από 100 μέχρι 400.',
     },
     extra: {
       limit: {