@nolwenture/formik-jsonschema-form 1.0.0-beta.34 → 1.0.0-beta.35

package/dist/cjs/Form/Form.js

@@ -3,25 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formik_1 = require("formik");
-const utils_1 = require("../utils");
 const FormRegistry_1 = require("./FormRegistry");
 const components_1 = require("./components");
 const fields_1 = require("./fields");
 const templates_1 = require("./templates");
 const Form = (props) => {
-    (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
-        "schema",
-        "onSubmit",
-        "uiSchema",
-        "className",
-        "formData",
-        "className",
-        "children",
-        "fields",
-        "formContext",
-        "components",
-        "hideUnmarkedAdditionalProperties",
-    ]);
     const { isSubmitting } = (0, formik_1.useFormikContext)();
     const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;

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

@@ -58,7 +58,7 @@ const ObjectField = (props) => {
         (props.uiSchema?.["ui:options"]?.isCollapsible
             ? templates.CollapsibleObjectFieldTemplate
             : templates.ObjectFieldTemplate);
-    return ((0, jsx_runtime_1.jsx)(styledComponents_1.ObjectFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name, children: [orderedProperties
+    return ((0, jsx_runtime_1.jsx)(styledComponents_1.ObjectFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name || "ROOT", "data-fjsf-level": !name ? 0 : name.split(".").length, children: [orderedProperties
                     .map((child) => {
                     if (typeof child === "string") {
                         const childSchema = properties?.[child];

package/dist/cjs/FormView/FormView.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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");
@@ -16,19 +15,6 @@ exports.FormWrapper = styled_components_1.default.div `
   //padding: ${(props) => props.theme.spacing.xxxxxl};
 `;
 const FormView = (props) => {
-    (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
-        "schema",
-        "onSubmit",
-        "uiSchema",
-        "className",
-        "formData",
-        "className",
-        "children",
-        "fields",
-        "formContext",
-        "components",
-        "hideUnmarkedAdditionalProperties",
-    ]);
     const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema.definitions;

package/dist/cjs/FormView/fields/ObjectField/ObjectField.js

@@ -34,7 +34,7 @@ const ObjectField = (props) => {
     const SelectedObjectFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.ObjectFieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedObjectFieldTemplate, { ...props, children: orderedProperties
+    return ((0, jsx_runtime_1.jsx)(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name || "ROOT", "data-fjsf-level": !name ? 0 : name.split(".").length, children: orderedProperties
             .map((child, index) => {
             if (typeof child === "string") {
                 const childSchema = properties?.[child];

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

@@ -9,12 +9,22 @@ const styledComponents_1 = require("./styledComponents");
 const ObjectFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { Wrapper, Title, Description } = (0, styledComponents_1.getComponents)(components);
-    const { children, uiSchema } = props;
+    const { children, uiSchema, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
     const { help, info, 
     //TODO: This is not right
     props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...wrapperProps, children: [title && (0, jsx_runtime_1.jsx)(Title, { ...titleProps, children: title }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children] }));
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes,
+    };
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && (0, jsx_runtime_1.jsx)(Title, { ...titleProps, children: title }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children] }));
 };
 exports.ObjectFieldTemplate = ObjectFieldTemplate;

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

@@ -8,12 +8,25 @@ 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 `
-    break-before: avoid;
-    color: ${(props) => props.theme.color.text.default};
-    font-family: ${(props) => props.theme.typography.fontFamily.heading};
-    font-size: ${(props) => props.theme.typography.size.base};
-    font-weight: ${(props) => props.theme.typography.weight.bold};
-    margin: ${(props) => `${props.theme.spacing.s} 0`};
+  break-before: avoid;
+  color: ${(props) => props.theme.color.text.default};
+  font-family: ${(props) => props.theme.typography.fontFamily.heading};
+  font-size: ${(props) => props.theme.typography.size.base};
+  font-weight: ${(props) => props.theme.typography.weight.bold};
+  margin: ${(props) => `${props.theme.spacing.s} 0`};
+
+  /* ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
+    font-size: ${(props) => props.theme.typography.size.h4};
+  } */
+  ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
+    font-size: ${(props) => props.theme.typography.size.h1};
+  }
+  /* ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
+    font-size: ${(props) => props.theme.typography.size.h2};
+  }
+  ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
+    font-size: ${(props) => props.theme.typography.size.h3};
+  } */
 `;
 exports.ObjectFieldTemplateDescription = undefined;
 function getComponents(components) {

package/dist/cjs/utils/index.js

@@ -14,7 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.warnFromUnsupportedKeys = void 0;
 __exportStar(require("./deepOverlap"), exports);
 __exportStar(require("./extractUiSchema"), exports);
 __exportStar(require("./getEnums"), exports);
@@ -28,12 +27,3 @@ __exportStar(require("./createValidationSchema"), exports);
 __exportStar(require("./orderByUiSchema"), exports);
 __exportStar(require("./orderAdditionalProperties"), exports);
 __exportStar(require("./setTitleValues"), exports);
-//TODO: REMOVE WHEN ALL SUPPORTED
-const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {
-    Object.keys(data).forEach((key) => {
-        if (!supportedKeys.includes(key)) {
-            console.warn(`Component "${componentName}" does not support (yet) key "${key}"`);
-        }
-    });
-};
-exports.warnFromUnsupportedKeys = warnFromUnsupportedKeys;

package/dist/esm/Form/Form.js

@@ -1,24 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFormikContext } from "formik";
-import { warnFromUnsupportedKeys } from "../utils";
 import { FormRegistry } from "./FormRegistry";
 import { components as defaultComponents } from "./components";
 import { fields as defaultFields } from "./fields";
 import { templates as defaultTemplates } from "./templates";
 export const Form = (props) => {
-    warnFromUnsupportedKeys("Form", props, [
-        "schema",
-        "onSubmit",
-        "uiSchema",
-        "className",
-        "formData",
-        "className",
-        "children",
-        "fields",
-        "formContext",
-        "components",
-        "hideUnmarkedAdditionalProperties",
-    ]);
     const { isSubmitting } = useFormikContext();
     const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;

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

@@ -55,7 +55,7 @@ export const ObjectField = (props) => {
         (props.uiSchema?.["ui:options"]?.isCollapsible
             ? templates.CollapsibleObjectFieldTemplate
             : templates.ObjectFieldTemplate);
-    return (_jsx(ObjectFieldWrapper, { children: _jsxs(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name, children: [orderedProperties
+    return (_jsx(ObjectFieldWrapper, { children: _jsxs(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name || "ROOT", "data-fjsf-level": !name ? 0 : name.split(".").length, children: [orderedProperties
                     .map((child) => {
                     if (typeof child === "string") {
                         const childSchema = properties?.[child];

package/dist/esm/FormView/FormView.js

@@ -1,6 +1,5 @@
 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";
@@ -10,19 +9,6 @@ export const FormWrapper = styled.div `
   //padding: ${(props) => props.theme.spacing.xxxxxl};
 `;
 export const FormView = (props) => {
-    warnFromUnsupportedKeys("Form", props, [
-        "schema",
-        "onSubmit",
-        "uiSchema",
-        "className",
-        "formData",
-        "className",
-        "children",
-        "fields",
-        "formContext",
-        "components",
-        "hideUnmarkedAdditionalProperties",
-    ]);
     const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema.definitions;

package/dist/esm/FormView/fields/ObjectField/ObjectField.js

@@ -31,7 +31,7 @@ export const ObjectField = (props) => {
     const SelectedObjectFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.ObjectFieldTemplate;
-    return (_jsx(SelectedObjectFieldTemplate, { ...props, children: orderedProperties
+    return (_jsx(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name || "ROOT", "data-fjsf-level": !name ? 0 : name.split(".").length, children: orderedProperties
             .map((child, index) => {
             if (typeof child === "string") {
                 const childSchema = properties?.[child];

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

@@ -6,11 +6,21 @@ import { getComponents } from "./styledComponents";
 export const ObjectFieldTemplate = (props) => {
     const { components } = useContext(FormViewRegistry);
     const { Wrapper, Title, Description } = getComponents(components);
-    const { children, uiSchema } = props;
+    const { children, uiSchema, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
     const { help, info, 
     //TODO: This is not right
     props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    return (_jsxs(Wrapper, { ...wrapperProps, children: [title && _jsx(Title, { ...titleProps, children: title }), description && (_jsx(Description, { ...descriptionProps, children: description })), children] }));
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes,
+    };
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && _jsx(Title, { ...titleProps, children: title }), description && (_jsx(Description, { ...descriptionProps, children: description })), children] }));
 };

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

@@ -1,12 +1,25 @@
 import styled from "styled-components";
 export const ObjectFieldTemplateWrapper = styled.div ``;
 export const ObjectFieldTemplateTitle = styled.div `
-    break-before: avoid;
-    color: ${(props) => props.theme.color.text.default};
-    font-family: ${(props) => props.theme.typography.fontFamily.heading};
-    font-size: ${(props) => props.theme.typography.size.base};
-    font-weight: ${(props) => props.theme.typography.weight.bold};
-    margin: ${(props) => `${props.theme.spacing.s} 0`};
+  break-before: avoid;
+  color: ${(props) => props.theme.color.text.default};
+  font-family: ${(props) => props.theme.typography.fontFamily.heading};
+  font-size: ${(props) => props.theme.typography.size.base};
+  font-weight: ${(props) => props.theme.typography.weight.bold};
+  margin: ${(props) => `${props.theme.spacing.s} 0`};
+
+  /* ${ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
+    font-size: ${(props) => props.theme.typography.size.h4};
+  } */
+  ${ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
+    font-size: ${(props) => props.theme.typography.size.h1};
+  }
+  /* ${ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
+    font-size: ${(props) => props.theme.typography.size.h2};
+  }
+  ${ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
+    font-size: ${(props) => props.theme.typography.size.h3};
+  } */
 `;
 export const ObjectFieldTemplateDescription = undefined;
 export function getComponents(components) {

package/dist/esm/utils/index.js

@@ -11,11 +11,3 @@ export * from "./createValidationSchema";
 export * from "./orderByUiSchema";
 export * from "./orderAdditionalProperties";
 export * from "./setTitleValues";
-//TODO: REMOVE WHEN ALL SUPPORTED
-export const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {
-    Object.keys(data).forEach((key) => {
-        if (!supportedKeys.includes(key)) {
-            console.warn(`Component "${componentName}" does not support (yet) key "${key}"`);
-        }
-    });
-};

package/dist/types/utils/index.d.ts

@@ -11,4 +11,3 @@ export * from "./createValidationSchema";
 export * from "./orderByUiSchema";
 export * from "./orderAdditionalProperties";
 export * from "./setTitleValues";
-export declare const warnFromUnsupportedKeys: (componentName: string, data: Record<string, any>, supportedKeys: string[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.0-beta.34",
+  "version": "1.0.0-beta.35",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [