@nolwenture/formik-jsonschema-form 1.2.7 → 1.2.8

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 (11) hide show
  1. package/dist/cjs/Form/components/FieldInput.js +5 -3
  2. package/dist/cjs/Form/fields/MultipleChoiceField/styledComponents.js +1 -0
  3. package/dist/cjs/Form/templates/ObjectFieldTemplate/styledComponents.js +5 -2
  4. package/dist/cjs/FormView/components/Field.js +2 -6
  5. package/dist/cjs/utils/getStyle.js +1 -1
  6. package/dist/esm/Form/components/FieldInput.js +5 -3
  7. package/dist/esm/Form/fields/MultipleChoiceField/styledComponents.js +1 -0
  8. package/dist/esm/Form/templates/ObjectFieldTemplate/styledComponents.js +5 -2
  9. package/dist/esm/FormView/components/Field.js +2 -6
  10. package/dist/esm/utils/getStyle.js +1 -1
  11. package/package.json +1 -1
package/dist/cjs/Form/components/FieldInput.js CHANGED
@@ -40,10 +40,10 @@ const formik = __importStar(require("formik"));
40
40
  exports.FieldWrapper = styled_components_1.styled.div `
41
41
  display: flex;
42
42
  flex-direction: column;
43
- margin: ${(props) => `${props.theme.spacing.s} 0`};
43
+ gap: ${(props) => props.theme.spacing.xs};
44
44
  color: ${(props) => props.theme.color.text.default};
45
45
  opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
46
- pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
46
+ pointer-events: ${(props) => (props.$isDisabled ? "none" : "auto")};
47
47
  `;
48
48
  exports.FieldTitleInfoWrapper = styled_components_1.styled.div `
49
49
  display: flex;
@@ -62,7 +62,9 @@ exports.FieldDescription = styled_components_1.styled.p `
62
62
  margin: 0;
63
63
  font-family: ${(props) => props.theme.typography.fontFamily.base};
64
64
  font-size: ${(props) => props.theme.typography.size.base};
65
- font-weight: ${(props) => (props.$isReadOnly ? props.theme.typography.weight.bold : props.theme.typography.weight.normal)};
65
+ font-weight: ${(props) => props.$isReadOnly
66
+ ? props.theme.typography.weight.bold
67
+ : props.theme.typography.weight.normal};
66
68
  `;
67
69
  exports.FieldHelp = styled_components_1.styled.p `
68
70
  color: ${(props) => props.theme.color.text.default};
package/dist/cjs/Form/fields/MultipleChoiceField/styledComponents.js CHANGED
@@ -11,6 +11,7 @@ exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledCo
11
11
  flex-wrap: wrap;
12
12
  justify-content: start;
13
13
  flex-direction: column;
14
+ gap: ${(props) => props.theme.spacing.l};
14
15
 
15
16
  &:has(input[readonly]) {
16
17
  flex-direction: column;
package/dist/cjs/Form/templates/ObjectFieldTemplate/styledComponents.js CHANGED
@@ -7,12 +7,16 @@ const styled_components_1 = require("styled-components");
7
7
  exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
8
8
  display: flex;
9
9
  flex-direction: column;
10
+ gap: ${(props) => props.theme.spacing.m};
10
11
  color: ${(props) => props.theme.color.text.default};
11
12
  font-family: ${(props) => props.theme.typography.fontFamily.base};
12
13
  margin-inline: 0;
13
14
  margin-bottom: ${(props) => props.theme.spacing.xs};
14
15
 
15
- &:has(input[disabled]), &:has(option[disabled]), &:has(select[disabled]), &:has(textarea[disabled]) {
16
+ &:has(input[disabled]),
17
+ &:has(option[disabled]),
18
+ &:has(select[disabled]),
19
+ &:has(textarea[disabled]) {
16
20
  border-color: ${(props) => (0, polished_1.lighten)(0.4, props.theme.color.border.default)};
17
21
 
18
22
  legend {
@@ -23,7 +27,6 @@ exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
23
27
  }
24
28
  }
25
29
  }
26
-
27
30
  `;
28
31
  exports.ObjectFieldTemplateTitle = styled_components_1.styled.legend `
29
32
  color: ${(props) => props.theme.color.text.default};
package/dist/cjs/FormView/components/Field.js CHANGED
@@ -12,7 +12,8 @@ const fa_1 = require("react-icons/fa");
12
12
  exports.FieldWrapper = styled_components_1.default.div `
13
13
  color: ${(props) => props.theme.color.text.default};
14
14
  font-family: ${(props) => props.theme.typography.fontFamily.base};
15
- margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
15
+ gap: ${(props) => props.theme.spacing.s};
16
+ margin-bottom: ${(props) => props.theme.spacing.s};
16
17
  width: min(100%, 70rem);
17
18
  `;
18
19
  exports.FieldTitle = styled_components_1.default.label `
@@ -21,7 +22,6 @@ exports.FieldTitle = styled_components_1.default.label `
21
22
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
22
23
  font-size: ${(props) => props.theme.typography.size.base};
23
24
  font-weight: ${(props) => props.theme.typography.weight.bold};
24
- margin: ${(props) => `${props.theme.spacing.xs} 0 ${props.theme.spacing.s} 0`};
25
25
  width: 100%;
26
26
  `;
27
27
  exports.FieldDescription = styled_components_1.default.div `
@@ -30,14 +30,12 @@ exports.FieldDescription = styled_components_1.default.div `
30
30
  font-weight: ${(props) => props.theme.typography.weight.normal};
31
31
  font-style: italic;
32
32
  font-size: ${(props) => props.theme.typography.size.small};
33
- margin-bottom: ${(props) => props.theme.spacing.s};
34
33
  `;
35
34
  exports.StringFieldValue = styled_components_1.default.div `
36
35
  color: ${(props) => props.theme.color.text.default};
37
36
  font-family: ${(props) => props.theme.typography.fontFamily.base};
38
37
  font-size: ${(props) => props.theme.typography.size.small};
39
38
  font-weight: ${(props) => props.theme.typography.weight.normal};
40
- margin-bottom: ${(props) => props.theme.spacing.l};
41
39
  padding-left: ${(props) => props.theme.spacing.l};
42
40
  white-space: pre-line;
43
41
  `;
@@ -46,7 +44,6 @@ exports.TextAreaValue = styled_components_1.default.div `
46
44
  font-family: ${(props) => props.theme.typography.fontFamily.base};
47
45
  font-size: ${(props) => props.theme.typography.size.small};
48
46
  font-weight: ${(props) => props.theme.typography.weight.normal};
49
- margin-bottom: ${(props) => props.theme.spacing.l};
50
47
  padding-left: ${(props) => props.theme.spacing.l};
51
48
  white-space: pre-line;
52
49
  `;
@@ -58,7 +55,6 @@ exports.ArrayFieldItem = styled_components_1.default.div `
58
55
  background-color: ${(props) => props.theme.color.background.default};
59
56
  padding: ${(props) => props.theme.spacing.l};
60
57
  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
61
- margin-bottom: ${(props) => props.theme.spacing.s};
62
58
  `;
63
59
  exports.EJSFieldValue = styled_components_1.default.div `
64
60
  color: ${(props) => props.theme.color.text.default};
package/dist/cjs/utils/getStyle.js CHANGED
@@ -4,7 +4,7 @@ exports.getStyle = getStyle;
4
4
  function getStyle(key) {
5
5
  const style = {};
6
6
  if (key === "inline") {
7
- style.display = "inline-grid";
7
+ style.flexDirection = "row";
8
8
  }
9
9
  if (key === "oneColumn") {
10
10
  style.display = "grid";
package/dist/esm/Form/components/FieldInput.js CHANGED
@@ -4,10 +4,10 @@ import * as formik from "formik";
4
4
  export const FieldWrapper = styled.div `
5
5
  display: flex;
6
6
  flex-direction: column;
7
- margin: ${(props) => `${props.theme.spacing.s} 0`};
7
+ gap: ${(props) => props.theme.spacing.xs};
8
8
  color: ${(props) => props.theme.color.text.default};
9
9
  opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
10
- pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
10
+ pointer-events: ${(props) => (props.$isDisabled ? "none" : "auto")};
11
11
  `;
12
12
  export const FieldTitleInfoWrapper = styled.div `
13
13
  display: flex;
@@ -26,7 +26,9 @@ export const FieldDescription = styled.p `
26
26
  margin: 0;
27
27
  font-family: ${(props) => props.theme.typography.fontFamily.base};
28
28
  font-size: ${(props) => props.theme.typography.size.base};
29
- font-weight: ${(props) => (props.$isReadOnly ? props.theme.typography.weight.bold : props.theme.typography.weight.normal)};
29
+ font-weight: ${(props) => props.$isReadOnly
30
+ ? props.theme.typography.weight.bold
31
+ : props.theme.typography.weight.normal};
30
32
  `;
31
33
  export const FieldHelp = styled.p `
32
34
  color: ${(props) => props.theme.color.text.default};
package/dist/esm/Form/fields/MultipleChoiceField/styledComponents.js CHANGED
@@ -5,6 +5,7 @@ export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
5
5
  flex-wrap: wrap;
6
6
  justify-content: start;
7
7
  flex-direction: column;
8
+ gap: ${(props) => props.theme.spacing.l};
8
9
 
9
10
  &:has(input[readonly]) {
10
11
  flex-direction: column;
package/dist/esm/Form/templates/ObjectFieldTemplate/styledComponents.js CHANGED
@@ -3,12 +3,16 @@ import { styled } from "styled-components";
3
3
  export const ObjectFieldTemplateWrapper = styled.fieldset `
4
4
  display: flex;
5
5
  flex-direction: column;
6
+ gap: ${(props) => props.theme.spacing.m};
6
7
  color: ${(props) => props.theme.color.text.default};
7
8
  font-family: ${(props) => props.theme.typography.fontFamily.base};
8
9
  margin-inline: 0;
9
10
  margin-bottom: ${(props) => props.theme.spacing.xs};
10
11
 
11
- &:has(input[disabled]), &:has(option[disabled]), &:has(select[disabled]), &:has(textarea[disabled]) {
12
+ &:has(input[disabled]),
13
+ &:has(option[disabled]),
14
+ &:has(select[disabled]),
15
+ &:has(textarea[disabled]) {
12
16
  border-color: ${(props) => lighten(0.4, props.theme.color.border.default)};
13
17
 
14
18
  legend {
@@ -19,7 +23,6 @@ export const ObjectFieldTemplateWrapper = styled.fieldset `
19
23
  }
20
24
  }
21
25
  }
22
-
23
26
  `;
24
27
  export const ObjectFieldTemplateTitle = styled.legend `
25
28
  color: ${(props) => props.theme.color.text.default};
package/dist/esm/FormView/components/Field.js CHANGED
@@ -6,7 +6,8 @@ import { FaCheck, FaTimes } from "react-icons/fa";
6
6
  export const FieldWrapper = styled.div `
7
7
  color: ${(props) => props.theme.color.text.default};
8
8
  font-family: ${(props) => props.theme.typography.fontFamily.base};
9
- margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
9
+ gap: ${(props) => props.theme.spacing.s};
10
+ margin-bottom: ${(props) => props.theme.spacing.s};
10
11
  width: min(100%, 70rem);
11
12
  `;
12
13
  export const FieldTitle = styled.label `
@@ -15,7 +16,6 @@ export const FieldTitle = styled.label `
15
16
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
16
17
  font-size: ${(props) => props.theme.typography.size.base};
17
18
  font-weight: ${(props) => props.theme.typography.weight.bold};
18
- margin: ${(props) => `${props.theme.spacing.xs} 0 ${props.theme.spacing.s} 0`};
19
19
  width: 100%;
20
20
  `;
21
21
  export const FieldDescription = styled.div `
@@ -24,14 +24,12 @@ export const FieldDescription = styled.div `
24
24
  font-weight: ${(props) => props.theme.typography.weight.normal};
25
25
  font-style: italic;
26
26
  font-size: ${(props) => props.theme.typography.size.small};
27
- margin-bottom: ${(props) => props.theme.spacing.s};
28
27
  `;
29
28
  export const StringFieldValue = styled.div `
30
29
  color: ${(props) => props.theme.color.text.default};
31
30
  font-family: ${(props) => props.theme.typography.fontFamily.base};
32
31
  font-size: ${(props) => props.theme.typography.size.small};
33
32
  font-weight: ${(props) => props.theme.typography.weight.normal};
34
- margin-bottom: ${(props) => props.theme.spacing.l};
35
33
  padding-left: ${(props) => props.theme.spacing.l};
36
34
  white-space: pre-line;
37
35
  `;
@@ -40,7 +38,6 @@ export const TextAreaValue = styled.div `
40
38
  font-family: ${(props) => props.theme.typography.fontFamily.base};
41
39
  font-size: ${(props) => props.theme.typography.size.small};
42
40
  font-weight: ${(props) => props.theme.typography.weight.normal};
43
- margin-bottom: ${(props) => props.theme.spacing.l};
44
41
  padding-left: ${(props) => props.theme.spacing.l};
45
42
  white-space: pre-line;
46
43
  `;
@@ -52,7 +49,6 @@ export const ArrayFieldItem = styled.div `
52
49
  background-color: ${(props) => props.theme.color.background.default};
53
50
  padding: ${(props) => props.theme.spacing.l};
54
51
  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
55
- margin-bottom: ${(props) => props.theme.spacing.s};
56
52
  `;
57
53
  export const EJSFieldValue = styled.div `
58
54
  color: ${(props) => props.theme.color.text.default};
package/dist/esm/utils/getStyle.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export function getStyle(key) {
2
2
  const style = {};
3
3
  if (key === "inline") {
4
- style.display = "inline-grid";
4
+ style.flexDirection = "row";
5
5
  }
6
6
  if (key === "oneColumn") {
7
7
  style.display = "grid";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nolwenture/formik-jsonschema-form",
3
- "version": "1.2.7",
3
+ "version": "1.2.8",
4
4
  "description": "Formik form generation from json schema",
5
5
  "author": "anttivikman <antti.vikman@nolwenture.com>",
6
6
  "contributors": [