@nolwenture/formik-jsonschema-form 1.0.0-beta.5 → 1.0.0-beta.8

package/dist/cjs/Form/fields/MultipleChoiceField/styledComponents.js

@@ -11,6 +11,8 @@ exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledCo
     ${common_1.commonCheckboxStyles}
     ${common_1.commonRadioStyles}
     font-family: ${(props) => props.theme.typography.fontFamily.base};
+    flex-wrap: wrap;
+    justify-content: start;
 `;
 exports.MultipleChoiceFieldElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldElement) ``;
 exports.MultipleChoiceFieldInputElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldInputElement) ``;

package/dist/cjs/Form/fields/SchemaField/SchemaField.js

@@ -33,7 +33,6 @@ const SchemaField = (props) => {
         schema: schemaSolvedForReferences.schema,
         uiSchema: schemaSolvedForReferences.uiSchema,
     };
-    console.log({ newProps });
     return (0, jsx_runtime_1.jsx)(FieldComponent, { ...newProps });
 };
 exports.SchemaField = SchemaField;

package/dist/cjs/Form/fields/StringField/StringField.js

@@ -32,7 +32,6 @@ const StringField = (props) => {
                                 hidden: true,
                                 ...uiSchema["ui:placeholderOptionOptions"]?.props, children: placeholder }), enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const.toString(), children: option.title }, index)))] }) }) }));
         default:
-            console.log({ props, type, inputProps });
             return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { type,
                         placeholder,
                         readOnly: props.schema.readOnly,

package/dist/cjs/FormView/FormView.js

@@ -1,12 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormView = void 0;
+exports.FormView = exports.FormWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../utils");
 const fields_1 = require("./fields");
 const components_1 = require("./components");
 const templates_1 = require("./templates");
 const FormViewRegistry_1 = require("./FormViewRegistry");
+exports.FormWrapper = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    padding: ${(props) => props.theme.spacing.xxxxxl};
+`;
 const FormView = (props) => {
     (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
         "schema",
@@ -37,6 +45,6 @@ const FormView = (props) => {
     };
     const { Form: FormEl } = registry.components;
     const SchemaField = registry.fields.SchemaField;
-    return ((0, jsx_runtime_1.jsx)(FormViewRegistry_1.FormViewRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(FormEl, { className: className, children: (0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.FormWrapper, { children: (0, jsx_runtime_1.jsx)(FormViewRegistry_1.FormViewRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(FormEl, { className: className, children: (0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }) }));
 };
 exports.FormView = FormView;

package/dist/cjs/FormView/components/Field.js

@@ -1,13 +1,106 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
-const styled_components_1 = require("styled-components");
-exports.FieldWrapper = styled_components_1.styled.div ``;
-exports.FieldTitle = styled_components_1.styled.label `
-  font-size: ${(props) => props.theme.typography.size.base};
+exports.MultipleChoiceFieldValue = exports.BooleanFieldValue = exports.MultipleChoiceFieldWrapper = exports.BooleanFieldWrapper = exports.EJSFieldValue = exports.ArrayFieldItem = exports.TextAreaValue = exports.StringFieldValue = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const styledComponents_1 = require("../../Form/fields/MultipleChoiceField/styledComponents");
+const getStyle_1 = require("../../utils/getStyle");
+exports.FieldWrapper = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    width: clamp(20rem, 100%, 70rem);
+    margin: ${(props) => `${props.theme.spacing.l} 0`};
+    break-before: auto;
+`;
+exports.FieldTitle = styled_components_1.default.label `
+    color: ${(props) => props.theme.color.text.default};
+    display: inline-block;
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-size: ${(props) => props.theme.typography.size.large};
+    font-weight: ${(props) => props.theme.typography.weight.bold};
+    margin: ${(props) => `${props.theme.spacing.xs} 0 ${props.theme.spacing.m} 0`};
+    border-top: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.text.default}`};
+    padding-top: ${(props) => props.theme.spacing.s};
+    width: 100%;
+`;
+exports.FieldDescription = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-weight: ${(props) => props.theme.typography.weight.normal};
+    font-style: italic;
+    font-size: ${(props) => props.theme.typography.size.base};
+    margin-bottom: ${(props) => props.theme.spacing.xs};
+    max-width: 66ch;
+`;
+exports.StringFieldValue = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    margin-bottom: ${(props) => props.theme.spacing.m};
+    max-width: 66ch;
+    white-space: pre-line;
+`;
+exports.TextAreaValue = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    margin-bottom: ${(props) => props.theme.spacing.m};
+    max-width: 66ch;
+    white-space: pre-line;
+`;
+exports.ArrayFieldItem = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+exports.EJSFieldValue = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    width: 100%;
+`;
+const NotSelected = styled_components_1.default.div `
+  opacity: 0.3;
+  display: flex;
+  align-items: start;
+`;
+const Selected = styled_components_1.default.div `
+  display: flex;
+  align-items: start;
+`;
+const SelectedBox = styled_components_1.default.span `
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
+  padding: ${(props) => `0 ${props.theme.spacing.xs}`};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
+  display: inline-flex;
+  justify-content: center;
+  align-items: start;
+`;
+const NotSelectedCircle = styled_components_1.default.span `
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
+  padding: ${(props) => props.theme.spacing.xxs};
+  border-radius: ${(props) => props.theme.borderRadius.circle};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-weight: ${(props) => props.theme.typography.weight.medium};
-  margin-right: ${(props) => props.theme.spacing.s};
-  color: ${(props) => props.theme.color.text.default};
+  font-size: ${(props) => props.theme.typography.size.small};
+  line-height: 1.1;
+  display: inline-flex;
+  justify-content: center;
+  align-items: start;
+  flex: 0 0 1rem;
+`;
+exports.BooleanFieldWrapper = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
+    label {
+        align-items: start;
+    }
 `;
-exports.FieldDescription = styled_components_1.styled.div ``;
+const BooleanFieldValue = ({ name, className, value, label, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2716" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Not selected" })] })) }));
+};
+exports.BooleanFieldValue = BooleanFieldValue;
+const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(styledComponents_1.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: [!selected && !notSelected && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Nothing was selected" }), selected &&
+                    selected.length > 0 &&
+                    selected.map((s) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: "\u2713" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
+                    notSelected?.length > 0 &&
+                    notSelected.map((n) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedCircle, { children: "\u2715" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+};
+exports.MultipleChoiceFieldValue = MultipleChoiceFieldValue;

package/dist/cjs/FormView/components/index.js

@@ -36,9 +36,7 @@ const templates_1 = require("../templates");
 const Field = __importStar(require("./Field"));
 const Form = __importStar(require("./Form"));
 const Icon = __importStar(require("./Icon"));
-const oldComponents = __importStar(require("./old_styledComponents"));
 exports.components = {
-    ...oldComponents,
     ...fields_1.fieldComponents,
     ...templates_1.templateComponents,
     //Please keep this in alphabetical order

package/dist/cjs/FormView/templates/ObjectFieldTemplate/styledComponents.js

@@ -7,7 +7,11 @@ exports.ObjectFieldTemplateDescription = exports.ObjectFieldTemplateTitle = expo
 exports.getComponents = getComponents;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.ObjectFieldTemplateWrapper = styled_components_1.default.div ``;
-exports.ObjectFieldTemplateTitle = styled_components_1.default.div ``;
+exports.ObjectFieldTemplateTitle = styled_components_1.default.div `
+    font-size: ${(props) => props.theme.typography.size.h3};
+    font-weight: ${(props) => props.theme.typography.weight.bold};
+    margin-bottom: ${(props) => props.theme.spacing.l};
+`;
 exports.ObjectFieldTemplateDescription = undefined;
 function getComponents(components) {
     return {

package/dist/esm/Form/fields/MultipleChoiceField/styledComponents.js

@@ -5,6 +5,8 @@ export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
     ${commonCheckboxStyles}
     ${commonRadioStyles}
     font-family: ${(props) => props.theme.typography.fontFamily.base};
+    flex-wrap: wrap;
+    justify-content: start;
 `;
 export const MultipleChoiceFieldElement = styled(RadioFieldElement) ``;
 export const MultipleChoiceFieldInputElement = styled(RadioFieldInputElement) ``;

package/dist/esm/Form/fields/SchemaField/SchemaField.js

@@ -30,6 +30,5 @@ export const SchemaField = (props) => {
         schema: schemaSolvedForReferences.schema,
         uiSchema: schemaSolvedForReferences.uiSchema,
     };
-    console.log({ newProps });
     return _jsx(FieldComponent, { ...newProps });
 };

package/dist/esm/Form/fields/StringField/StringField.js

@@ -29,7 +29,6 @@ export const StringField = (props) => {
                                 hidden: true,
                                 ...uiSchema["ui:placeholderOptionOptions"]?.props, children: placeholder }), enums?.values.map((option, index) => (_jsx("option", { value: option.const.toString(), children: option.title }, index)))] }) }) }));
         default:
-            console.log({ props, type, inputProps });
             return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsx(FieldInput, { type,
                         placeholder,
                         readOnly: props.schema.readOnly,

package/dist/esm/FormView/FormView.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
 import { warnFromUnsupportedKeys } from "../utils";
 import { fields as defaultFields } from "./fields";
 import { components as defaultComponents } from "./components";
 import { templates as defaultTemplates } from "./templates";
 import { FormViewRegistry } from "./FormViewRegistry";
+export const FormWrapper = styled.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    padding: ${(props) => props.theme.spacing.xxxxxl};
+`;
 export const FormView = (props) => {
     warnFromUnsupportedKeys("Form", props, [
         "schema",
@@ -34,5 +39,5 @@ export const FormView = (props) => {
     };
     const { Form: FormEl } = registry.components;
     const SchemaField = registry.fields.SchemaField;
-    return (_jsx(FormViewRegistry.Provider, { value: registry, children: _jsx(FormEl, { className: className, children: _jsx(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }));
+    return (_jsx(FormWrapper, { children: _jsx(FormViewRegistry.Provider, { value: registry, children: _jsx(FormEl, { className: className, children: _jsx(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }) }));
 };

package/dist/esm/FormView/components/Field.js

@@ -1,10 +1,98 @@
-import { styled } from "styled-components";
-export const FieldWrapper = styled.div ``;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldLabel, } from "../../Form/fields/MultipleChoiceField/styledComponents";
+import { getStyle } from "../../utils/getStyle";
+export const FieldWrapper = styled.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    width: clamp(20rem, 100%, 70rem);
+    margin: ${(props) => `${props.theme.spacing.l} 0`};
+    break-before: auto;
+`;
 export const FieldTitle = styled.label `
-  font-size: ${(props) => props.theme.typography.size.base};
+    color: ${(props) => props.theme.color.text.default};
+    display: inline-block;
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-size: ${(props) => props.theme.typography.size.large};
+    font-weight: ${(props) => props.theme.typography.weight.bold};
+    margin: ${(props) => `${props.theme.spacing.xs} 0 ${props.theme.spacing.m} 0`};
+    border-top: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.text.default}`};
+    padding-top: ${(props) => props.theme.spacing.s};
+    width: 100%;
+`;
+export const FieldDescription = styled.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-weight: ${(props) => props.theme.typography.weight.normal};
+    font-style: italic;
+    font-size: ${(props) => props.theme.typography.size.base};
+    margin-bottom: ${(props) => props.theme.spacing.xs};
+    max-width: 66ch;
+`;
+export const StringFieldValue = styled.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    margin-bottom: ${(props) => props.theme.spacing.m};
+    max-width: 66ch;
+    white-space: pre-line;
+`;
+export const TextAreaValue = styled.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    margin-bottom: ${(props) => props.theme.spacing.m};
+    max-width: 66ch;
+    white-space: pre-line;
+`;
+export const ArrayFieldItem = styled.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+export const EJSFieldValue = styled.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    width: 100%;
+`;
+const NotSelected = styled.div `
+  opacity: 0.3;
+  display: flex;
+  align-items: start;
+`;
+const Selected = styled.div `
+  display: flex;
+  align-items: start;
+`;
+const SelectedBox = styled.span `
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
+  padding: ${(props) => `0 ${props.theme.spacing.xs}`};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
+  display: inline-flex;
+  justify-content: center;
+  align-items: start;
+`;
+const NotSelectedCircle = styled.span `
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
+  padding: ${(props) => props.theme.spacing.xxs};
+  border-radius: ${(props) => props.theme.borderRadius.circle};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-weight: ${(props) => props.theme.typography.weight.medium};
-  margin-right: ${(props) => props.theme.spacing.s};
-  color: ${(props) => props.theme.color.text.default};
+  font-size: ${(props) => props.theme.typography.size.small};
+  line-height: 1.1;
+  display: inline-flex;
+  justify-content: center;
+  align-items: start;
+  flex: 0 0 1rem;
+`;
+export const BooleanFieldWrapper = styled.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+export const MultipleChoiceFieldWrapper = styled.div `
+    label {
+        align-items: start;
+    }
 `;
-export const FieldDescription = styled.div ``;
+export const BooleanFieldValue = ({ name, className, value, label, }) => {
+    return (_jsx("div", { className: className, children: value === true ? (_jsxs("div", { children: [_jsx("span", { children: "\u2713" }), _jsx("span", { children: label !== undefined ? label : "Selected" })] })) : (_jsxs("div", { children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: label !== undefined ? label : "Not selected" })] })) }));
+};
+export const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
+    return (_jsx(MultipleChoiceFieldWrapper, { children: _jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, { children: "Nothing was selected" }), selected &&
+                    selected.length > 0 &&
+                    selected.map((s) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: "\u2713" }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
+                    notSelected?.length > 0 &&
+                    notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedCircle, { children: "\u2715" }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+};

package/dist/esm/FormView/components/index.js

@@ -7,9 +7,7 @@ import { templateComponents } from "../templates";
 import * as Field from "./Field";
 import * as Form from "./Form";
 import * as Icon from "./Icon";
-import * as oldComponents from "./old_styledComponents";
 export const components = {
-    ...oldComponents,
     ...fieldComponents,
     ...templateComponents,
     //Please keep this in alphabetical order

package/dist/esm/FormView/templates/ObjectFieldTemplate/styledComponents.js

@@ -1,6 +1,10 @@
 import styled from "styled-components";
 export const ObjectFieldTemplateWrapper = styled.div ``;
-export const ObjectFieldTemplateTitle = styled.div ``;
+export const ObjectFieldTemplateTitle = styled.div `
+    font-size: ${(props) => props.theme.typography.size.h3};
+    font-weight: ${(props) => props.theme.typography.weight.bold};
+    margin-bottom: ${(props) => props.theme.spacing.l};
+`;
 export const ObjectFieldTemplateDescription = undefined;
 export function getComponents(components) {
     return {

package/dist/types/FormView/FormView.d.ts

@@ -1,4 +1,6 @@
 import type { FormProps } from "../common/types";
+import React from "react";
+export declare const FormWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FormView: <T>(props: FormProps<T> & {
     values: Record<string, any>;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/FormView/components/Field.d.ts

@@ -1,3 +1,36 @@
-export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FieldTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
-export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import * as formik from "formik";
+import React from "react";
+export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FieldTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StringFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TextAreaValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ArrayFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EJSFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BooleanFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MultipleChoiceFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type BooleanValueFieldProps = {
+    name: string;
+    className?: string;
+    value: boolean;
+    label?: string;
+};
+export declare const BooleanFieldValue: React.FC<BooleanValueFieldProps>;
+type MultipleChoiceFieldValueProps = {
+    selected: {
+        const: string | number;
+        title: string;
+    }[] | undefined;
+    notSelected: {
+        const: string | number;
+        title: string;
+    }[] | undefined;
+    inputProps?: any;
+    name?: React.ReactNode;
+    className?: string;
+    style?: string;
+    value?: string | number;
+    form?: formik.FormikContextType<unknown>;
+};
+export declare const MultipleChoiceFieldValue: React.FC<MultipleChoiceFieldValueProps>;
+export {};

package/dist/types/FormView/components/index.d.ts

@@ -8,25 +8,12 @@ export declare const components: {
     FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     FieldTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
     FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    getComponents(components: ComponentsType): {
-        Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-        Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-        Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    };
-    ObjectFieldTemplateWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    ObjectFieldTemplateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    ObjectFieldTemplateDescription: typeof Field.FieldDescription | undefined;
-    ArrayFieldTemplateWrapper: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTemplateWrapper | undefined;
-    ArrayFieldTemplateTitle: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTemplateTitle | undefined;
-    ArrayFieldTemplateDescription: typeof Field.FieldDescription | undefined;
-    ObjectFieldSection: import("react").FC<import("../fields/ObjectField").ObjectFieldSectionProps>;
-    ObjectFieldSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
-    ObjectFieldSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
     StringFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     TextAreaValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ArrayFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     EJSFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     BooleanFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    MultipleChoiceFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     BooleanFieldValue: React.FC<{
         name: string;
         className?: string;
@@ -49,5 +36,19 @@ export declare const components: {
         value?: string | number;
         form?: import("formik").FormikContextType<unknown>;
     }>;
+    getComponents(components: ComponentsType): {
+        Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+        Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+        Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    };
+    ObjectFieldTemplateWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    ObjectFieldTemplateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    ObjectFieldTemplateDescription: typeof Field.FieldDescription | undefined;
+    ArrayFieldTemplateWrapper: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTemplateWrapper | undefined;
+    ArrayFieldTemplateTitle: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTemplateTitle | undefined;
+    ArrayFieldTemplateDescription: typeof Field.FieldDescription | undefined;
+    ObjectFieldSection: import("react").FC<import("../fields/ObjectField").ObjectFieldSectionProps>;
+    ObjectFieldSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
+    ObjectFieldSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
 };
 export type ComponentsType = typeof components;

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.8",
   "description": "Formik form generation from json schema",
-  "author": "Antti Vikman <antti.vikman@nolwenture.com>",
+  "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [
-    "Antti Vikman <antti.vikman@nolwenture.com>",
-    "Niko Lintunen <niko.lintunen@nolwenture.com>"
+    "NoNasanen <nona.nasanen@nolwenture.com",
+    "anttivikman <antti.vikman@nolwenture.com>",
+    "nikolintunen-nolwenture <niko.lintunen@nolwenture.com>",
+    "tuunjuuso <juuso.tuunanen@nolwenture.com",
+    "anttischroderus <antti.schroderus@nolwenture.com>",
+    "samulinolw <samuli.vayrynen@nolwenture.com>",
+    "nolwram <rammohan.balasubramanian@nolwenture.com>"
   ],
   "license": "MIT",
   "types": "./dist/types/index.d.ts",
@@ -68,15 +73,15 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@nolwenture/component-library": "^1.0.6",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-interactions": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/react": "^8.0.5",
-    "@storybook/react-webpack5": "^8.0.5",
-    "@storybook/test": "^8.0.5",
-    "@storybook/test-runner": "^0.17.0",
+    "@nolwenture/component-library": "^1.0.8",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-webpack5": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@storybook/test-runner": "^0.21.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
@@ -96,7 +101,7 @@
     "react-router": "^7.0.1",
     "react-router-dom": "^7.0.1",
     "rimraf": "^6.0.1",
-    "storybook": "^8.0.5",
+    "storybook": "^8.5.0",
     "styled-components": "^6.1.8",
     "ts-jest": "^29.1.2",
     "webpack": "^5.91.0",

package/dist/cjs/FormView/components/old_styledComponents.js

@@ -1,65 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultipleChoiceFieldValue = exports.BooleanFieldValue = exports.BooleanFieldWrapper = exports.EJSFieldValue = exports.ArrayFieldItem = exports.TextAreaValue = exports.StringFieldValue = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const styledComponents_1 = require("../../Form/fields/MultipleChoiceField/styledComponents");
-const getStyle_1 = require("../../utils/getStyle");
-exports.StringFieldValue = styled_components_1.default.div `
-  white-space: pre-line;
-`;
-exports.TextAreaValue = styled_components_1.default.div `
-  white-space: pre-line;
-`;
-exports.ArrayFieldItem = styled_components_1.default.div ``;
-exports.EJSFieldValue = styled_components_1.default.div `
-  width: 100%;
-`;
-exports.BooleanFieldWrapper = styled_components_1.default.div ``;
-const BooleanFieldValue = ({ name, className, value, label, }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2716" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Not selected" })] })) }));
-};
-exports.BooleanFieldValue = BooleanFieldValue;
-const NotSelected = styled_components_1.default.div `
-  opacity: 0.3;
-  display: flex;
-  align-items: center;
-`;
-const Selected = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-`;
-const SelectedBox = styled_components_1.default.span `
-  color: ${(props) => props.theme.color.background.default};
-  background: ${(props) => props.theme.color.text.default};
-  padding: ${(props) => `0 ${props.theme.spacing.xs}`};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.small};
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-`;
-const NotSelectedCircle = styled_components_1.default.span `
-  color: ${(props) => props.theme.color.background.default};
-  background: ${(props) => props.theme.color.text.default};
-  padding: ${(props) => props.theme.spacing.xxs};
-  border-radius: ${(props) => props.theme.borderRadius.circle};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.small};
-  line-height: 1.1;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 1rem;
-`;
-const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
-    return ((0, jsx_runtime_1.jsxs)(styledComponents_1.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: [!selected && !notSelected && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Nothing was selected" }), selected &&
-                selected.length > 0 &&
-                selected.map((s) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: "\u2713" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
-                notSelected?.length > 0 &&
-                notSelected.map((n) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedCircle, { children: "\u2715" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }));
-};
-exports.MultipleChoiceFieldValue = MultipleChoiceFieldValue;

package/dist/esm/FormView/components/old_styledComponents.js

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from "styled-components";
-import { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldLabel, } from "../../Form/fields/MultipleChoiceField/styledComponents";
-import { getStyle } from "../../utils/getStyle";
-export const StringFieldValue = styled.div `
-  white-space: pre-line;
-`;
-export const TextAreaValue = styled.div `
-  white-space: pre-line;
-`;
-export const ArrayFieldItem = styled.div ``;
-export const EJSFieldValue = styled.div `
-  width: 100%;
-`;
-export const BooleanFieldWrapper = styled.div ``;
-export const BooleanFieldValue = ({ name, className, value, label, }) => {
-    return (_jsx("div", { className: className, children: value === true ? (_jsxs("div", { children: [_jsx("span", { children: "\u2713" }), _jsx("span", { children: label !== undefined ? label : "Selected" })] })) : (_jsxs("div", { children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: label !== undefined ? label : "Not selected" })] })) }));
-};
-const NotSelected = styled.div `
-  opacity: 0.3;
-  display: flex;
-  align-items: center;
-`;
-const Selected = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const SelectedBox = styled.span `
-  color: ${(props) => props.theme.color.background.default};
-  background: ${(props) => props.theme.color.text.default};
-  padding: ${(props) => `0 ${props.theme.spacing.xs}`};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.small};
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-`;
-const NotSelectedCircle = styled.span `
-  color: ${(props) => props.theme.color.background.default};
-  background: ${(props) => props.theme.color.text.default};
-  padding: ${(props) => props.theme.spacing.xxs};
-  border-radius: ${(props) => props.theme.borderRadius.circle};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.small};
-  line-height: 1.1;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 1rem;
-`;
-export const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
-    return (_jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, { children: "Nothing was selected" }), selected &&
-                selected.length > 0 &&
-                selected.map((s) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: "\u2713" }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
-                notSelected?.length > 0 &&
-                notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedCircle, { children: "\u2715" }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }));
-};

package/dist/types/FormView/components/old_styledComponents.d.ts

@@ -1,32 +0,0 @@
-import * as formik from "formik";
-import React from "react";
-export declare const StringFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TextAreaValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ArrayFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const EJSFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-type BooleanValueFieldProps = {
-    name: string;
-    className?: string;
-    value: boolean;
-    label?: string;
-};
-export declare const BooleanFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BooleanFieldValue: React.FC<BooleanValueFieldProps>;
-type MultipleChoiceFieldValueProps = {
-    selected: {
-        const: string | number;
-        title: string;
-    }[] | undefined;
-    notSelected: {
-        const: string | number;
-        title: string;
-    }[] | undefined;
-    inputProps?: any;
-    name?: React.ReactNode;
-    className?: string;
-    style?: string;
-    value?: string | number;
-    form?: formik.FormikContextType<unknown>;
-};
-export declare const MultipleChoiceFieldValue: React.FC<MultipleChoiceFieldValueProps>;
-export {};