@digigov/form 2.0.0-rc.21 → 2.0.0-rc.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (148) hide show
  1. package/Field/FieldBaseContainer/index.js +1 -1
  2. package/Field/FieldBaseContainer.js.map +2 -2
  3. package/FieldArray/index.js +4 -4
  4. package/FieldArray/index.js.map +2 -2
  5. package/FieldObject/index.js +2 -2
  6. package/FieldObject/index.js.map +2 -2
  7. package/Fieldset/index.d.ts +1 -1
  8. package/Fieldset/index.js +5 -5
  9. package/Fieldset/index.js.map +2 -2
  10. package/Fieldset/types.d.ts +2 -2
  11. package/FormBuilder/index.js +3 -3
  12. package/FormBuilder/index.js.map +2 -2
  13. package/MultiplicityField/add-objects/index.js +4 -4
  14. package/MultiplicityField/add-objects.js.map +2 -2
  15. package/MultiplicityField/index.js +12 -10
  16. package/MultiplicityField/index.js.map +2 -2
  17. package/Questions/Step/StepTitle/index.js +4 -3
  18. package/Questions/Step/StepTitle.d.ts +1 -1
  19. package/Questions/Step/StepTitle.js.map +2 -2
  20. package/cjs/Field/FieldBaseContainer/index.js +2 -2
  21. package/cjs/Field/FieldBaseContainer.js.map +3 -3
  22. package/cjs/FieldArray/index.js +6 -6
  23. package/cjs/FieldArray/index.js.map +3 -3
  24. package/cjs/FieldObject/index.js +3 -3
  25. package/cjs/FieldObject/index.js.map +3 -3
  26. package/cjs/Fieldset/index.js +10 -10
  27. package/cjs/Fieldset/index.js.map +3 -3
  28. package/cjs/Fieldset/types.js.map +1 -1
  29. package/cjs/FormBuilder/index.js +5 -5
  30. package/cjs/FormBuilder/index.js.map +3 -3
  31. package/cjs/MultiplicityField/add-objects/index.js +8 -8
  32. package/cjs/MultiplicityField/add-objects.js.map +3 -3
  33. package/cjs/MultiplicityField/index.js +11 -14
  34. package/cjs/MultiplicityField/index.js.map +3 -3
  35. package/cjs/Questions/Step/StepTitle/index.js +5 -5
  36. package/cjs/Questions/Step/StepTitle.js.map +3 -3
  37. package/cjs/inputs/AutoCompleteInput/index.js +4 -4
  38. package/cjs/inputs/AutoCompleteInput/index.js.map +3 -3
  39. package/cjs/inputs/Checkboxes/index.js +6 -8
  40. package/cjs/inputs/Checkboxes/index.js.map +3 -3
  41. package/cjs/inputs/DateInput/index.js +3 -4
  42. package/cjs/inputs/DateInput/index.js.map +3 -3
  43. package/cjs/inputs/FileInput/index.js +7 -8
  44. package/cjs/inputs/FileInput/index.js.map +3 -3
  45. package/cjs/inputs/ImageInput/__stories__/WithInvalidImageDimension/index.js +2 -1
  46. package/cjs/inputs/ImageInput/__stories__/WithInvalidImageDimension.js.map +2 -2
  47. package/cjs/inputs/ImageInput/index.js +7 -8
  48. package/cjs/inputs/ImageInput/index.js.map +3 -3
  49. package/cjs/inputs/Input/index.js +4 -4
  50. package/cjs/inputs/Input/index.js.map +2 -2
  51. package/cjs/inputs/Label/index.js +3 -3
  52. package/cjs/inputs/Label/index.js.map +3 -3
  53. package/cjs/inputs/Radio/index.js +11 -13
  54. package/cjs/inputs/Radio/index.js.map +3 -3
  55. package/cjs/inputs/Select/index.js +3 -4
  56. package/cjs/inputs/Select/index.js.map +3 -3
  57. package/cjs/lazy/index.js +3 -0
  58. package/cjs/lazy.js.map +2 -2
  59. package/cjs/registry/index.js +2 -0
  60. package/cjs/registry.js.map +2 -2
  61. package/cjs/validators/index.js +6 -65
  62. package/cjs/validators/index.js.map +3 -3
  63. package/cjs/validators/utils/date/index.js +138 -0
  64. package/cjs/validators/utils/date.js.map +7 -0
  65. package/cjs/validators/utils/index.js +3 -1
  66. package/cjs/validators/utils/index.js.map +2 -2
  67. package/index.js +1 -1
  68. package/inputs/AutoCompleteInput/index.js +6 -4
  69. package/inputs/AutoCompleteInput/index.js.map +2 -2
  70. package/inputs/Checkboxes/index.js +7 -5
  71. package/inputs/Checkboxes/index.js.map +2 -2
  72. package/inputs/DateInput/index.js +5 -3
  73. package/inputs/DateInput/index.js.map +2 -2
  74. package/inputs/FileInput/index.js +5 -6
  75. package/inputs/FileInput/index.js.map +2 -2
  76. package/inputs/ImageInput/__stories__/WithInvalidImageDimension/index.js +2 -1
  77. package/inputs/ImageInput/__stories__/WithInvalidImageDimension.js.map +2 -2
  78. package/inputs/ImageInput/index.js +6 -7
  79. package/inputs/ImageInput/index.js.map +2 -2
  80. package/inputs/Input/index.js +4 -4
  81. package/inputs/Input/index.js.map +2 -2
  82. package/inputs/Label/index.js +2 -2
  83. package/inputs/Label/index.js.map +2 -2
  84. package/inputs/Radio/index.js +7 -5
  85. package/inputs/Radio/index.js.map +2 -2
  86. package/inputs/Select/index.js +1 -2
  87. package/inputs/Select/index.js.map +2 -2
  88. package/lazy/index.js +3 -0
  89. package/lazy.d.ts +3 -0
  90. package/lazy.js.map +2 -2
  91. package/package.json +4 -4
  92. package/registry/index.js +2 -0
  93. package/registry.d.ts +1 -0
  94. package/registry.js.map +2 -2
  95. package/src/Field/FieldBaseContainer.tsx +1 -1
  96. package/src/FieldArray/index.tsx +9 -8
  97. package/src/FieldObject/index.tsx +2 -2
  98. package/src/Fieldset/index.tsx +5 -5
  99. package/src/Fieldset/types.tsx +2 -2
  100. package/src/FormBuilder/{FormBuilder.mdx → doc.mdx} +20 -33
  101. package/src/FormBuilder/index.tsx +3 -3
  102. package/src/MultiplicityField/add-objects.tsx +5 -6
  103. package/src/MultiplicityField/{MultiplicityField.mdx → doc.mdx} +12 -16
  104. package/src/MultiplicityField/index.tsx +13 -12
  105. package/src/Questions/Step/StepTitle.tsx +4 -3
  106. package/src/Questions/__snapshots__/index.spec.tsx.snap +8 -4
  107. package/src/Questions/{index.mdx → doc.mdx} +9 -12
  108. package/src/create-simple-form.mdx +2 -6
  109. package/src/{index.mdx → doc.mdx} +4 -8
  110. package/src/inputs/AutoCompleteInput/{index.mdx → doc.mdx} +2 -13
  111. package/src/inputs/AutoCompleteInput/index.tsx +31 -26
  112. package/src/inputs/Checkboxes/{index.mdx → doc.mdx} +5 -15
  113. package/src/inputs/Checkboxes/index.tsx +29 -27
  114. package/src/inputs/DateInput/{index.mdx → doc.mdx} +1 -8
  115. package/src/inputs/DateInput/index.tsx +5 -3
  116. package/src/inputs/FileInput/{index.mdx → doc.mdx} +1 -5
  117. package/src/inputs/FileInput/index.tsx +5 -6
  118. package/src/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx +2 -0
  119. package/src/inputs/ImageInput/doc.mdx +23 -0
  120. package/src/inputs/ImageInput/index.tsx +9 -11
  121. package/src/inputs/Input/doc.mdx +56 -0
  122. package/src/inputs/Input/index.tsx +19 -11
  123. package/src/inputs/Label/doc.mdx +14 -0
  124. package/src/inputs/Label/index.tsx +2 -3
  125. package/src/inputs/OtpInput/{index.mdx → doc.mdx} +1 -8
  126. package/src/inputs/Radio/{index.mdx → doc.mdx} +5 -15
  127. package/src/inputs/Radio/index.tsx +57 -55
  128. package/src/inputs/Select/{index.mdx → doc.mdx} +1 -5
  129. package/src/inputs/Select/index.tsx +1 -2
  130. package/src/installation.mdx +2 -5
  131. package/src/lazy.js +3 -0
  132. package/src/registry.js +2 -0
  133. package/src/validators/index.ts +10 -70
  134. package/src/validators/utils/date.ts +107 -0
  135. package/src/validators/utils/index.ts +1 -0
  136. package/validators/index.js +10 -66
  137. package/validators/index.js.map +2 -2
  138. package/validators/utils/date/index.js +103 -0
  139. package/validators/utils/date/package.json +6 -0
  140. package/validators/utils/date.d.ts +9 -0
  141. package/validators/utils/date.js.map +7 -0
  142. package/validators/utils/index.d.ts +1 -0
  143. package/validators/utils/index.js +1 -0
  144. package/validators/utils/index.js.map +2 -2
  145. package/src/inputs/ImageInput/index.mdx +0 -19
  146. package/src/inputs/Input/index.mdx +0 -95
  147. package/src/inputs/Label/index.mdx +0 -0
  148. /package/src/Field/{index.mdx → doc.mdx} +0 -0
package/src/MultiplicityField/index.tsx CHANGED
@@ -1,19 +1,20 @@
1
1
  import React, { useState } from 'react';
2
2
  import { useFieldArray, UseFormReturn } from 'react-hook-form';
3
- import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
4
-
5
- import FieldObject from '@digigov/form/FieldObject';
6
- import AddObjects from '@digigov/form/MultiplicityField/add-objects';
3
+ import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
4
+ import { FieldObject } from '@digigov/form/FieldObject';
5
+ import { AddObjects } from '@digigov/form/MultiplicityField/add-objects';
7
6
  import {
8
7
  MultiplicityProps,
9
8
  StashedObject,
10
9
  } from '@digigov/form/MultiplicityField/types';
11
- import { Button } from '@digigov/react-core/Button';
12
- import { Card } from '@digigov/react-core/Card';
13
- import { CardAction } from '@digigov/react-core/CardAction';
14
- import { CardContent } from '@digigov/react-core/CardContent';
15
- import { CardHeading } from '@digigov/react-core/CardHeading';
16
- import { Heading } from '@digigov/react-core/Heading';
10
+ import {
11
+ Card,
12
+ CardHeading,
13
+ CardContent,
14
+ CardAction,
15
+ } from '@digigov/ui/content/Card';
16
+ import { Button } from '@digigov/ui/form/Button';
17
+ import { Heading } from '@digigov/ui/typography/Heading';
17
18
 
18
19
  // epeidh einai forwardRef to ref mas to dinei xwrista apo ta props
19
20
  export const Multiplicity: React.FC<MultiplicityProps> = ({
@@ -48,7 +49,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
48
49
  setStashedObjects(newStashedObjects);
49
50
  };
50
51
  return (
51
- <FieldContainer
52
+ <FieldBaseContainer
52
53
  label={label}
53
54
  layout={layout}
54
55
  error={
@@ -99,7 +100,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
99
100
  clearErrors={clearErrors}
100
101
  Field={Field}
101
102
  />
102
- </FieldContainer>
103
+ </FieldBaseContainer>
103
104
  );
104
105
  };
105
106
 
package/src/Questions/Step/StepTitle.tsx CHANGED
@@ -1,12 +1,13 @@
1
1
  import React, { useContext } from 'react';
2
2
  import { StepContext } from '@digigov/form/Questions/Step/StepContext';
3
- import Heading, { HeadingProps } from '@digigov/react-core/Heading';
4
- import HeadingCaption from '@digigov/react-core/HeadingCaption';
5
- import PageTitleContainer, {
3
+ import {
4
+ PageTitleContainer,
6
5
  PageTitleCaption,
7
6
  } from '@digigov/ui/app/PageTitleContainer';
8
7
  import { useTranslation } from '@digigov/ui/i18n';
9
8
  import { BackLink } from '@digigov/ui/navigation/BackLink';
9
+ import { Heading, HeadingProps } from '@digigov/ui/typography/Heading';
10
+ import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
10
11
 
11
12
  export interface StepTitleInterface {
12
13
  title?: string;
package/src/Questions/__snapshots__/index.spec.tsx.snap CHANGED
@@ -1,19 +1,22 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
3
  exports[`renders the Questions 1`] = `
4
4
  <body>
5
5
  <div>
6
6
  <a
7
- class="ds-back-link ds-print-hidden"
7
+ class="ds-print-hidden ds-back-link"
8
8
  tabindex="0"
9
9
  >
10
10
  <svg
11
11
  aria-hidden="true"
12
+ as="svg"
12
13
  class="ds-svg-icon--caret ds-svg-icon"
13
14
  focusable="false"
14
15
  viewBox="0 0 24 24"
15
16
  >
16
17
  <path
18
+ as="path"
19
+ class=""
17
20
  d="M18,22V2L6,12L18,22z"
18
21
  />
19
22
  </svg>
@@ -48,7 +51,7 @@ exports[`renders the Questions 1`] = `
48
51
  class="ds-label"
49
52
  >
50
53
  <span
51
- class="ds-heading-sm"
54
+ class="ds-label__title ds-label__title--sm"
52
55
  >
53
56
  name.field.primary
54
57
  </span>
@@ -60,13 +63,14 @@ exports[`renders the Questions 1`] = `
60
63
  <input
61
64
  aria-required="true"
62
65
  class="ds-input"
66
+ data-type="string"
63
67
  name="name"
64
68
  type="text"
65
69
  />
66
70
  </label>
67
71
  </div>
68
72
  <button
69
- class="ds-btn-primary ds-btn ds-print-hidden"
73
+ class="ds-print-hidden ds-btn ds-btn-primary"
70
74
  type="submit"
71
75
  >
72
76
  Συνέχεια
package/src/Questions/{index.mdx → doc.mdx} RENAMED
@@ -14,14 +14,11 @@ import {
14
14
  TableDataCell,
15
15
  } from '@digigov/react-core';
16
16
 
17
- import LeadText from '@site/src/components/LeadText';
18
17
 
19
- <LeadText>
20
- Question pages are used to ask users meaningful questions needed by your
21
- GOV.GR service, or even gather data about their persona or their application
22
- status. Use step questions to make bigger forms less scary and easier to fill
23
- out.
24
- </LeadText>
18
+ Question pages are used to ask users meaningful questions needed by your
19
+ GOV.GR service, or even gather data about their persona or their application
20
+ status. Use step questions to make bigger forms less scary and easier to fill
21
+ out.
25
22
 
26
23
  ## Introduction to Question pages
27
24
 
@@ -41,7 +38,7 @@ Even if users struggle through to the end of a form and answer honestly, if it
41
38
  more work than they expected, they’ll be annoyed about it. That's the exact
42
39
  opposite of our goals of making concise, easy-to-use services.
43
40
 
44
- ```jsx live
41
+ ```jsx
45
42
  import React from 'react';
46
43
  import Questions, { Step, StepForm, StepTitle } from '@digigov/form/Questions';
47
44
  import { Field } from '@digigov/form';
@@ -159,7 +156,7 @@ its subsequent subcomponents that you customise as needed, like the step title,
159
156
  description or form. You can also add components that are not form-specific,
160
157
  adding paragraphs or other custom components.
161
158
 
162
- ```jsx
159
+ ```jsx pure
163
160
  <Questions name="example" steps={steps} onSubmit={(data) => doSomething(data)}>
164
161
  {/* more steps could be rendered here ... */}
165
162
  <Step name="age">
@@ -184,7 +181,7 @@ object. The most basic properties are the following:
184
181
  - `fields` - an array that describes each input field that will be rendered in
185
182
  the `StepForm`. Each fields implements the `FieldSpec` interface as a JSON object.
186
183
 
187
- ```json title="step-name.json"
184
+ ```json pure title="step-name.json"
188
185
  {
189
186
  "name": "name",
190
187
  "title": "What is your name?",
@@ -209,7 +206,7 @@ basic branching between each step. The `nextStep` property will need to be a
209
206
  function that will take the form state as an argument and will return the key of
210
207
  the next `step`.
211
208
 
212
- ```json title="next-step.json"
209
+ ```json pure title="next-step.json"
213
210
  const steps = [
214
211
  {
215
212
  name: 'age',
@@ -263,7 +260,7 @@ For example, you may use a form to determine if citizens are adults or not, and
263
260
  we want to ask users different questions according to their persona. We can use
264
261
  a branch between the `age` step and the other two steps.
265
262
 
266
- ```jsx live
263
+ ```jsx
267
264
  import React from 'react';
268
265
  import GovGRFooter from '@digigov/ui/govgr/Footer';
269
266
  import Header from '@digigov/ui/app/Header';
package/src/create-simple-form.mdx CHANGED
@@ -4,12 +4,8 @@ title: Create a simple Digigov Form
4
4
  sidebar_label: Creating simple forms
5
5
  ---
6
6
 
7
- import LeadText from '@site/src/components/LeadText';
8
-
9
- <LeadText>
10
- This guide walks through building a simple form page, complete with validation
11
- and data serialisation.
12
- </LeadText>
7
+ This guide walks through building a simple form page, complete with validation
8
+ and data serialisation.
13
9
 
14
10
  ## What we are building
15
11
 
package/src/{index.mdx → doc.mdx} RENAMED
@@ -4,14 +4,10 @@ title: Digigov Form
4
4
  sidebar_label: Introduction to Digigov Form
5
5
  ---
6
6
 
7
- import LeadText from '@site/src/components/LeadText';
8
-
9
- <LeadText>
10
- Digigov Form is an off-the-shelf solution for managing web forms using
11
- Reactjs. It supports flexible and multi-step forms and easy-to-use validation.
12
- This page will guide you through everything you need to create accessible and
13
- dynamic forms that can handle all sorts of user inputs.
14
- </LeadText>
7
+ Digigov Form is an off-the-shelf solution for managing web forms using
8
+ Reactjs. It supports flexible and multi-step forms and easy-to-use validation.
9
+ This page will guide you through everything you need to create accessible and
10
+ dynamic forms that can handle all sorts of user inputs.
15
11
 
16
12
  <img
17
13
  src="/img/form.svg"
package/src/inputs/AutoCompleteInput/{index.mdx → doc.mdx} RENAMED
@@ -11,19 +11,8 @@ options as the users type and also let them select an option from the list.
11
11
 
12
12
  ### Default
13
13
 
14
- <Story
15
- packageName="@digigov/form"
16
- component="inputs/AutoCompleteInput"
17
- story="Default.tsx"
18
- />
14
+ <code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Default.tsx" />
19
15
 
20
16
  ### Display multiple values
21
17
 
22
- <Story
23
- packageName="@digigov/form"
24
- component="inputs/AutoCompleteInput"
25
- story="Multiple.tsx"
26
- />
27
-
28
-
29
-
18
+ <code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple.tsx" />
package/src/inputs/AutoCompleteInput/index.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import { ControlledFieldProps } from '@digigov/form/Field/types';
3
3
  import { FieldOptionProps } from '@digigov/form/inputs/Label';
4
- import { Hint } from '@digigov/react-core/Hint';
5
- import UIAutoComplete, {
4
+ import {
5
+ AutoComplete,
6
6
  AutoCompleteProps as UIAutoCompleteProps,
7
7
  } from '@digigov/ui/form/AutoComplete';
8
- import { Base } from '@digigov/react-core/Base';
9
-
8
+ import { Hint } from '@digigov/ui/typography/Hint';
9
+ import { Base } from '@digigov/ui/utils/Base';
10
10
  export interface AutoCompleteInputExtra
11
11
  extends Omit<
12
12
  UIAutoCompleteProps,
@@ -36,33 +36,38 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
36
36
  error,
37
37
  ...props
38
38
  }) => {
39
- const suggest = useCallback(function suggest(
40
- query: string,
41
- syncResults: (options: any[]) => void
42
- ): void {
43
- syncResults(
44
- query
45
- ? options.filter(function (option) {
46
- return (
47
- `${option.value} ${option.label?.primary || ''} ${option.label?.secondary || ''
48
- }`
49
- .toLowerCase()
50
- .indexOf(query.toLowerCase()) !== -1
51
- );
52
- })
53
- : options
54
- );
55
- },
56
- [options]);
39
+ const suggest = useCallback(
40
+ function suggest(
41
+ query: string,
42
+ syncResults: (options: any[]) => void
43
+ ): void {
44
+ syncResults(
45
+ query
46
+ ? options.filter(function (option) {
47
+ return (
48
+ `${option.value} ${option.label?.primary || ''} ${
49
+ option.label?.secondary || ''
50
+ }`
51
+ .toLowerCase()
52
+ .indexOf(query.toLowerCase()) !== -1
53
+ );
54
+ })
55
+ : options
56
+ );
57
+ },
58
+ [options]
59
+ );
57
60
 
58
61
  return (
59
- <UIAutoComplete
62
+ <AutoComplete
60
63
  multiple={type === 'choice:multiple' ? true : false}
61
64
  source={suggest}
62
65
  onConfirm={(value) => {
63
66
  if (Array.isArray(value)) {
64
- const selectedValues = value.map(item => item.value);
65
- selectedValues.length > 0 ? onChange(selectedValues) : onChange(undefined);
67
+ const selectedValues = value.map((item) => item.value);
68
+ selectedValues.length > 0
69
+ ? onChange(selectedValues)
70
+ : onChange(undefined);
66
71
  } else {
67
72
  onChange(value.value);
68
73
  }
@@ -95,4 +100,4 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
95
100
  );
96
101
  };
97
102
 
98
- export default AutoCompleteInput;
103
+ export default AutoCompleteInput;
package/src/inputs/Checkboxes/{index.mdx → doc.mdx} RENAMED
@@ -10,24 +10,14 @@ Checkboxes are used to let a user select one or more options of a limited number
10
10
 
11
11
  ### Default
12
12
 
13
- <Story
14
- packageName="@digigov/form"
15
- component="inputs/Checkboxes"
16
- story="Default.tsx"
17
- />
13
+ <code src="@digigov/form/inputs/Checkboxes/__stories__/Default.tsx" />
14
+
18
15
 
19
16
  ### Conditional
20
17
 
21
- <Story
22
- packageName="@digigov/form"
23
- component="inputs/Checkboxes"
24
- story="Conditional.tsx"
25
- />
18
+ <code src="@digigov/form/inputs/Checkboxes/__stories__/Conditional.tsx" />
19
+
26
20
 
27
21
  ### With divider
28
22
 
29
- <Story
30
- packageName="@digigov/form"
31
- component="inputs/Checkboxes"
32
- story="WithDivider.tsx"
33
- />
23
+ <code src="@digigov/form/inputs/Checkboxes/__stories__/WithDivider.tsx" />
package/src/inputs/Checkboxes/index.tsx CHANGED
@@ -1,11 +1,13 @@
1
1
  import React, { useState } from 'react';
2
2
  import { ControlledFieldProps } from '@digigov/form/Field/types';
3
3
  import { FieldOptionProps } from '@digigov/form/inputs/Label';
4
- import CoreCheckboxes from '@digigov/react-core/Checkbox';
5
- import { CheckboxConditional } from '@digigov/react-core/CheckboxConditional';
6
- import CheckboxItem from '@digigov/react-core/CheckboxItem';
7
- import Hint from '@digigov/react-core/Hint';
4
+ import {
5
+ Checkbox,
6
+ CheckboxItem,
7
+ CheckboxConditional,
8
+ } from '@digigov/ui/form/Checkbox';
8
9
  import { useTranslation } from '@digigov/ui/i18n';
10
+ import { Hint } from '@digigov/ui/typography/Hint';
9
11
 
10
12
  export interface CheckboxesProps
11
13
  extends Omit<ControlledFieldProps, 'extra' | 'value'> {
@@ -29,34 +31,34 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
29
31
  if (!value) value = [];
30
32
  const handleChange =
31
33
  (optionValue, idx, show) =>
32
- (evt): void => {
33
- let newValue;
34
- if (evt.currentTarget.checked) {
35
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
36
- // @ts-ignore
37
- newValue = value.concat([optionValue]);
38
- } else {
39
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
40
- // @ts-ignore
41
- newValue = value.filter((val) => val !== optionValue);
42
- }
43
- if (show && show.length > 0) {
44
- setChecked((items) =>
45
- items.map((item, index) => (index === idx ? !item : item))
46
- );
47
- }
34
+ (evt): void => {
35
+ let newValue;
36
+ if (evt.currentTarget.checked) {
37
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
38
+ // @ts-ignore
39
+ newValue = value.concat([optionValue]);
40
+ } else {
41
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
42
+ // @ts-ignore
43
+ newValue = value.filter((val) => val !== optionValue);
44
+ }
45
+ if (show && show.length > 0) {
46
+ setChecked((items) =>
47
+ items.map((item, index) => (index === idx ? !item : item))
48
+ );
49
+ }
48
50
 
49
- // reset value to undefined instead of an empty array
50
- // so the error state mechanism can throw validation errors
51
- if (newValue.length === 0) newValue = undefined;
52
- onChange(newValue);
53
- };
51
+ // reset value to undefined instead of an empty array
52
+ // so the error state mechanism can throw validation errors
53
+ if (newValue.length === 0) newValue = undefined;
54
+ onChange(newValue);
55
+ };
54
56
  const { t } = useTranslation();
55
57
  const [checked, setChecked] = useState(
56
58
  Array<boolean>(options.length).fill(false)
57
59
  );
58
60
  return (
59
- <CoreCheckboxes className={className}>
61
+ <Checkbox className={className}>
60
62
  {options.map(
61
63
  (
62
64
  {
@@ -103,7 +105,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
103
105
  </React.Fragment>
104
106
  )
105
107
  )}
106
- </CoreCheckboxes>
108
+ </Checkbox>
107
109
  );
108
110
  };
109
111
 
package/src/inputs/DateInput/{index.mdx → doc.mdx} RENAMED
@@ -13,11 +13,4 @@ either with a textbox that validates the input or a special date picker interfac
13
13
 
14
14
  ### Default
15
15
 
16
- <Story
17
- packageName="@digigov/form"
18
- component="inputs/DateInput"
19
- story="Default.tsx"
20
- />
21
-
22
-
23
-
16
+ <code src="@digigov/form/inputs/DateInput/__stories__/Default.tsx" />
package/src/inputs/DateInput/index.tsx CHANGED
@@ -2,8 +2,10 @@ import React, { useMemo, useState } from 'react';
2
2
  import dayjs from 'dayjs';
3
3
  import customParseFormat from 'dayjs/plugin/customParseFormat';
4
4
  import { UncontrolledFieldProps } from '@digigov/form/Field/types';
5
- import DateInputContainer from '@digigov/react-core/DateInputContainer';
6
- import CoreDateInputItem from '@digigov/react-core/DateInputItem';
5
+ import {
6
+ DateInputContainer,
7
+ DateInputItem,
8
+ } from '@digigov/ui/form/DateInputContainer';
7
9
  import { useTranslation } from '@digigov/ui/i18n';
8
10
  dayjs.extend(customParseFormat);
9
11
 
@@ -75,7 +77,7 @@ const makeDate = (val) => {
75
77
  };
76
78
 
77
79
  const DatePart = ({ label, ...props }) => {
78
- return <CoreDateInputItem {...props}>{label}</CoreDateInputItem>;
80
+ return <DateInputItem {...props}>{label}</DateInputItem>;
79
81
  };
80
82
 
81
83
  export const DateInput = ({ name, type, ...props }) => {
package/src/inputs/FileInput/{index.mdx → doc.mdx} RENAMED
@@ -12,8 +12,4 @@ Input element of type `file` let the user choose one or more files from their de
12
12
 
13
13
  ### Default
14
14
 
15
- <Story
16
- packageName="@digigov/form"
17
- component="inputs/FileInput"
18
- story="Default.tsx"
19
- />
15
+ <code src="@digigov/form/inputs/FileInput/__stories__/Default.tsx" />
package/src/inputs/FileInput/index.tsx CHANGED
@@ -1,11 +1,10 @@
1
1
  import React, { useState } from 'react';
2
2
  import { UncontrolledFieldProps } from '@digigov/form/Field/types';
3
- import FileUpload from '@digigov/react-core/FileUpload';
4
- import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
5
- import CoreHint from '@digigov/react-core/Hint';
6
- import Button from '@digigov/ui/form/Button';
3
+ import { Button } from '@digigov/ui/form/Button';
4
+ import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
7
5
  import { useTranslation } from '@digigov/ui/i18n';
8
- import Paragraph from '@digigov/ui/typography/Paragraph';
6
+ import { Hint } from '@digigov/ui/typography/Hint';
7
+ import { Paragraph } from '@digigov/ui/typography/Paragraph';
9
8
  export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
10
9
  extra?: {
11
10
  className?: string;
@@ -44,7 +43,7 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
44
43
  </Paragraph>
45
44
  </>
46
45
  ) : (
47
- <CoreHint>{t('upload.no_file')}</CoreHint>
46
+ <Hint>{t('upload.no_file')}</Hint>
48
47
  )}
49
48
  <FileUpload
50
49
  ref={ref}
package/src/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx CHANGED
@@ -9,6 +9,8 @@ const FIELDS: FieldSpec[] = [
9
9
  required: true,
10
10
  label: {
11
11
  primary: 'Ανέβασμα φωτογραφίας',
12
+ secondary:
13
+ 'Οι επιτρεπόμενες διαστάσεις είναι για το ύψος από 100 μέχρι 400 και για το πλάτος από 100 μέχρι 400.',
12
14
  },
13
15
  extra: {
14
16
  limit: {
package/src/inputs/ImageInput/doc.mdx ADDED
@@ -0,0 +1,23 @@
1
+ ---
2
+ title: Image Input
3
+ ---
4
+
5
+ # Image input
6
+
7
+
8
+
9
+ Input element of type `image` defines an image as a submit button, i.e. submit buttons that take the form of an image rather than text.
10
+
11
+ ## How to use
12
+
13
+ ### Default
14
+
15
+ <code src="@digigov/form/inputs/ImageInput/__stories__/Default.tsx" />
16
+
17
+ ### Display with max size
18
+
19
+ <code src="@digigov/form/inputs/ImageInput/__stories__/MaxSize.tsx" />
20
+
21
+ ### Display with min and max image dimensions
22
+
23
+ <code src="@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx" />
package/src/inputs/ImageInput/index.tsx CHANGED
@@ -1,12 +1,11 @@
1
1
  import React, { useState, useCallback } from 'react';
2
2
  import { UncontrolledFieldProps } from '@digigov/form/Field/types';
3
- import FileUpload from '@digigov/react-core/FileUpload';
4
- import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
5
- import CoreHint from '@digigov/react-core/Hint';
6
- import Button, { ButtonGroup } from '@digigov/ui/form/Button';
3
+ import { Button, ButtonGroup } from '@digigov/ui/form/Button';
4
+ import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
7
5
  import { useTranslation } from '@digigov/ui/i18n';
8
- import Paragraph from '@digigov/ui/typography/Paragraph';
9
- import { Base } from '@digigov/react-core/Base';
6
+ import { Hint } from '@digigov/ui/typography/Hint';
7
+ import { Paragraph } from '@digigov/ui/typography/Paragraph';
8
+ import { Base } from '@digigov/ui/utils/Base';
10
9
  export interface ImageProps {
11
10
  src?: any;
12
11
  }
@@ -20,7 +19,7 @@ export interface Limit {
20
19
  }
21
20
 
22
21
  export const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {
23
- return <Base as='img' src={src} className="ds-image--ratio" />;
22
+ return <Base as="img" src={src} className="ds-image--ratio" />;
24
23
  });
25
24
  export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
26
25
  extra?: {
@@ -72,13 +71,12 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
72
71
  {selectedImage !== null ? (
73
72
  <>
74
73
  <Paragraph>
75
- <Base as='b'>{t('upload.image')}:</Base> {`${selectedImage?.name}`}
74
+ <Base as="b">{t('upload.image')}:</Base>{' '}
75
+ {`${selectedImage?.name}`}
76
76
  </Paragraph>
77
77
  </>
78
78
  ) : (
79
- <CoreHint className="ds-dashed--border">
80
- {t('upload.no_image')}
81
- </CoreHint>
79
+ <Hint className="ds-dashed--border">{t('upload.no_image')}</Hint>
82
80
  )}
83
81
  <>
84
82
  {selectedImage !== null && <Image src={imageUrl} />}
package/src/inputs/Input/doc.mdx ADDED
@@ -0,0 +1,56 @@
1
+ ---
2
+ title: Input
3
+ ---
4
+
5
+ # Input
6
+
7
+ The input element of type `string` is used to create interactive controls for web-based forms in order to accept data from the user;
8
+ a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
9
+
10
+ ## How to use
11
+
12
+ ### String
13
+
14
+ <code src="@digigov/form/inputs/Input/__stories__/String.tsx" />
15
+
16
+ ### Boolean
17
+
18
+ <code src="@digigov/form/inputs/Input/__stories__/Boolean.tsx" />
19
+
20
+ ### AFM
21
+
22
+ <code src="@digigov/form/inputs/Input/__stories__/AFM.tsx" />
23
+
24
+
25
+ ### IBAN
26
+
27
+ <code src="@digigov/form/inputs/Input/__stories__/IBAN.tsx" />
28
+
29
+
30
+ ### Integer
31
+
32
+ <code src="@digigov/form/inputs/Input/__stories__/Integer.tsx" />
33
+
34
+
35
+ ### Landline number
36
+
37
+ <code src="@digigov/form/inputs/Input/__stories__/LandlineNumber.tsx" />
38
+
39
+
40
+ ### Mobile phone
41
+
42
+ <code src="@digigov/form/inputs/Input/__stories__/MobilePhone.tsx" />
43
+
44
+
45
+ ### Phone number
46
+
47
+ <code src="@digigov/form/inputs/Input/__stories__/PhoneNumber.tsx" />
48
+
49
+
50
+ ### Postal code
51
+
52
+ <code src="@digigov/form/inputs/Input/__stories__/PostalCode.tsx" />
53
+
54
+ ### Text with character limit
55
+
56
+ <code src="@digigov/form/inputs/Input/__stories__/TextWithLimit.tsx" />