@digigov/form 0.10.8 → 0.10.9

package/src/inputs/Input/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import TextInput from '@digigov/react-core/TextInput';
+import TextArea from '@digigov/react-core/TextArea';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+
+const TYPES_MAP = {
+  string: 'text',
+  int: 'text',
+  text: 'text',
+  date: 'date',
+};
+
+export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+  extra?: {
+    fullWidth?: boolean;
+    multiline?: boolean;
+    className?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    rows?: any;
+  };
+}
+
+export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
+  function WrappedInput({ name, type, extra, ...props }, ref: never) {
+    let { multiline = false, rows } = extra || {};
+    const { className } = extra || {};
+    // if enforced to multiline use true. Derive from type otherwise.
+    multiline = multiline === true || type === 'text';
+    // use explicit rows value if set. Derive from multiline otherwise.
+    rows = rows || (multiline ? 4 : 1);
+    // translate dilosi type to HTML Input type
+    const fieldType = TYPES_MAP[type || 'text'] || 'text';
+    if (multiline === true) {
+      return (
+        <TextArea
+          name={name}
+          className={className}
+          rows={rows}
+          ref={ref}
+          {...{
+            ...props,
+            reset: undefined,
+            required: undefined,
+            type: fieldType,
+          }}
+        />
+      );
+    } else {
+      return (
+        <TextInput
+          name={name}
+          type={fieldType}
+          className={className}
+          ref={ref}
+          {...{ ...props, reset: undefined, required: undefined }}
+        />
+      );
+    }
+  }
+);
+
+export default Input;

package/src/inputs/Label/Label.stories.js

@@ -0,0 +1,7 @@
+import Label from '@digigov/form/inputs/Label';
+export default {
+  title: 'Digigov Form/inputs/Label',
+  component: Label,
+  displayName: 'Label'
+};
+export * from '@digigov/form/inputs/Label/__stories__/Default';

package/src/inputs/Label/Label.stories.playwright.json

@@ -0,0 +1,40 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-inputs-label--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "ooEeQHqEWAfT",
+          "title": "Validation"
+        },
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "Hello"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "q4WekeUxbs0v",
+          "title": "add text"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import FormBuilder, { Field, Label } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Label
+      label={{
+        primary: 'Στοιχεία επιχείρησης',
+        secondary: 'Συμπληρώστε τα στοιχεία',
+      }}
+    />
+    <Field
+      key="business-title"
+      name="business-title"
+      type="string"
+      label={{ primary: 'Όνομα επιχείρησης' }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Default;

package/src/inputs/Label/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import LabelTitle from '@digigov/react-core/LabelTitle';
+import Hint from '@digigov/react-core/Hint';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import { FieldLabelProps } from '@digigov/form/types';
+
+export interface FieldOptionProps {
+  label?: FieldLabelProps;
+  value: string;
+  disabled?: boolean;
+  selected?: () => React.FC;
+}
+
+export interface LabelProps {
+  primary?: string;
+  secondary?: string;
+}
+
+export interface LabelProps {
+  className?: string;
+  value?: string;
+  label?: FieldLabelProps;
+}
+
+export const Label: React.FC<LabelProps> = ({ className, label, value }) => {
+  const { t } = useTranslation();
+  if ((!label || (label && !label.primary && !label.secondary)) && !value) {
+    return null;
+  }
+  return (
+    <>
+      <LabelTitle className={className} size="s">
+        {(label && label.primary && t(label.primary)) || value}
+      </LabelTitle>
+      {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+    </>
+  );
+};
+
+Label.defaultProps = {
+  label: {},
+};
+
+export default Label;

package/src/inputs/Radio/Radio.stories.js

@@ -0,0 +1,7 @@
+import Radio from '@digigov/form/inputs/Radio';
+export default {
+  title: 'Digigov Form/inputs/Radio',
+  component: Radio,
+  displayName: 'Radio'
+};
+export * from '@digigov/form/inputs/Radio/__stories__/Default';

package/src/inputs/Radio/Radio.stories.playwright.json

@@ -0,0 +1,57 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-inputs-radio--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "keMAaO2G4EzT",
+          "title": "validation error"
+        },
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "ArrowDown"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "ArrowDown"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Enter"
+              }
+            }
+          ],
+          "id": "KOjNMdAt5T_R",
+          "title": "select option with keyboard and submit"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key={'string'}
+      name="string"
+      type="choice:single"
+      required
+      label={{ primary: 'Ποια ειναι η χώρα της διαμονής σας;' }}
+      extra={{
+        options: [
+          {
+            label: { primary: 'Ελλάδα' },
+            value: 'greece',
+          },
+          {
+            label: { primary: 'Κύπρος' },
+            value: 'cyprus',
+          },
+          {
+            label: { primary: 'Χώρα της Ευρωπαϊκής Ένωσης' },
+            value: 'eu',
+          },
+          {
+            label: { primary: 'Ηνωμένες Πολιτείες της Αμερικής' },
+            value: 'usa',
+          },
+        ],
+      }}
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Default;

package/src/inputs/Radio/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import RadioContainer from '@digigov/react-core/RadioContainer';
+import RadioItem from '@digigov/react-core/RadioItem';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { useWatch } from 'react-hook-form';
+import Hint from '@digigov/react-core/Hint';
+
+export interface RadioButtonsGroupProps
+  extends Omit<UncontrolledFieldProps, 'extra'> {
+  extra: {
+    className?: string;
+    options: Array<FieldOptionProps>;
+    dense?: boolean;
+  };
+}
+
+export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
+  name,
+  control,
+  register,
+  extra: { options, className },
+  disabled,
+  ...props
+}) => {
+  const currentValue: string | undefined = useWatch({ control, name });
+  const { t } = useTranslation();
+  return (
+    <RadioContainer className={className} defaultValue={currentValue} id={name}>
+      {options.map(
+        ({ label, value: v, disabled: optionDisabled, selected }) => (
+          <div key={`${name}.${v}`}>
+            <RadioItem
+              {...register(name)}
+              value={v}
+              disabled={disabled || optionDisabled}
+              {...{
+                ...props,
+                reset: undefined,
+                required: undefined,
+                'aria-describedby': undefined,
+                type: 'radio',
+              }}
+            >
+              {(label && label.primary && t(label.primary)) || v}
+              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+            </RadioItem>
+            {selected && selected()}
+          </div>
+        )
+      )}
+    </RadioContainer>
+  );
+};
+
+export default RadioButtonsGroup;

package/src/inputs/Select/Select.stories.js

@@ -0,0 +1,7 @@
+import Select from '@digigov/form/inputs/Select';
+export default {
+  title: 'Digigov Form/inputs/Select',
+  component: Select,
+  displayName: 'Select'
+};
+export * from '@digigov/form/inputs/Select/__stories__/Default';

package/src/inputs/Select/Select.stories.playwright.json

@@ -0,0 +1,22 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-inputs-select--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "selectHtmlOption",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>select",
+                "values": "greece"
+              }
+            }
+          ],
+          "id": "nGzokC6y1_5m",
+          "title": "select option"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key={'string'}
+      name="string"
+      type="choice:single"
+      required
+      label={{ primary: 'Ποια ειναι η χώρα της διαμονής σας;' }}
+      extra={{
+        component: 'Select',
+        options: [
+          {
+            label: { primary: '' },
+            value: '',
+          },
+          {
+            label: { primary: 'Ελλάδα' },
+            value: 'greece',
+          },
+          {
+            label: { primary: 'Κύπρος' },
+            value: 'cyprus',
+          },
+          {
+            label: { primary: 'Χώρα της Ευρωπαϊκής Ένωσης' },
+            value: 'eu',
+          },
+          {
+            label: { primary: 'Ηνωμένες Πολιτείες της Αμερικής' },
+            value: 'usa',
+          },
+        ],
+      }}
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Default;

package/src/inputs/Select/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import SelectContainer from '@digigov/react-core/SelectContainer';
+import SelectOption from '@digigov/react-core/SelectOption';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+
+export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {
+  extra: {
+    className?: string;
+    options: Array<FieldOptionProps>;
+  };
+}
+
+export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
+  function WrappedSelect(
+    { name, extra: { options, className }, disabled, ...props },
+    ref: never
+  ) {
+    return (
+      <SelectContainer
+        className={className}
+        ref={ref}
+        name={name}
+        disabled={disabled}
+        {...{ ...props, reset: undefined, required: undefined }}
+      >
+        {options.map(({ value, label }) => (
+          <SelectOption key={value} value={value}>
+            {label && label.primary ? label.primary : value}
+          </SelectOption>
+        ))}
+      </SelectContainer>
+    );
+  }
+);
+
+export default Select;

package/src/inputs/index.ts

@@ -0,0 +1,7 @@
+export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
+export { default as DateInput } from '@digigov/form/inputs/DateInput';
+export { default as FileInput } from '@digigov/form/inputs/FileInput';
+export { default as Input } from '@digigov/form/inputs/Input';
+export { default as Label } from '@digigov/form/inputs/Label';
+export { default as Radio } from '@digigov/form/inputs/Radio';
+export { default as Select } from '@digigov/form/inputs/Select';

package/src/installation.mdx

@@ -0,0 +1,72 @@
+---
+id: Installation
+title: Installing Digigov Form
+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>
+
+We assume that your stack uses some of the following tools.
+
+* React v16 or later
+* Nextjs or create-react-app to run your code
+* Digigov CSS, as a CSS import or as Tailwind plugin 
+
+## Using create-digigov-app
+
+We highly recommend using `create-digigov-app`. Our scaffolder was created to save development teams time and effort. This way
+everything you need is already configured.
+
+ If you choose to use our scaffolder tool, make sure you follow this
+[guide](/docs/building-apps) first, if you haven't already done so.
+
+Then you just install the `@digigov/form` package from NPM.
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    <CodeBlock>
+      npm install @digigov/form --save
+    </CodeBlock>
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock>
+      yarn add @digigov/form
+    </CodeBlock>
+  </TabItem>
+</Tabs>
+
+## Using custom configuration
+
+This method is not recommended and you should proceed at your own risk. For
+Digigov Form to work properly, it is essential to do some configuration.
+
+* A working React application, ideally [Nextjs](https://nextjs.org/) or [Create
+  React App](https://create-react-app.dev/)
+* You should already have [installed and configured Digigov
+  CSS](https://guide.services.gov.gr/docs/installation)
+
+If you meet these prerequisites, now it is time to install the dependencies.
+
+Assuming that you have not used any of the Digigov libraries before, go ahead
+and install `@digigov/form` and it's dependencies.
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    <CodeBlock>
+      npm install @digigov/form @digigov/ui @digigov/react-core --save
+    </CodeBlock>
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock>
+      yarn add @digigov/form @digigov/ui @digigov/react-core
+    </CodeBlock>
+  </TabItem>
+</Tabs>

package/src/internal.ts

@@ -0,0 +1,34 @@
+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 * 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';