@nolwenture/formik-jsonschema-form 0.9.3 → 0.10.0

package/README.md

@@ -420,7 +420,7 @@ const uiSchema = {
 ### Alternative fields
 
 There are alternative fields available for certain types.
-For `type: "string"` there is `DateField` and `MultipleChoiceField`.
+For `type: "string"` there is `DateField`, `MultipleChoiceField` and `TextAreaField`.
 
 `DateField` has a "dd.mm.yyyy" date input field and a calendar date picker and will save the date input as "yyyy-mm-dd" string.
 
@@ -465,6 +465,20 @@ const uiSchema = {
 };
 ```
 
+`TextAreaField` gives more space for a longer string input.
+
+```tsx
+const schema = {
+  properties: {
+    story: { type: "string", title: "A short story" },
+  },
+};
+
+const uiSchema = {
+  story: { "ui:field": "TextAreaField" },
+};
+```
+
 For `type: "boolean"` there is `RadioField` and `ToggleField`.
 `RadioField` can take labels for the "true" and "false" options. If left empty, the default labels will be "true" and "false".
 

package/dist/fields/TextAreaField.d.ts

@@ -0,0 +1,3 @@
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const TextAreaField: React.FC<FieldProps>;

package/dist/fields/TextAreaField.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+import { TextAreaInputField } from "../styledComponents";
+export const TextAreaField = (props) => {
+    const { templates: { FieldTemplate }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = useExtractUiSchema(uiSchema);
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(TextAreaInputField, { inputProps: inputProps, name: name }) })));
+};

package/dist/fields/index.d.ts

@@ -11,3 +11,4 @@ export * from "./RadioField";
 export * from "./ToggleField";
 export * from "./SearchMultiTagSelectField";
 export * from "./MultipleChoiceField";
+export * from "./TextAreaField";

package/dist/fields/index.js

@@ -11,3 +11,4 @@ export * from "./RadioField";
 export * from "./ToggleField";
 export * from "./SearchMultiTagSelectField";
 export * from "./MultipleChoiceField";
+export * from "./TextAreaField";

package/dist/fields/stories/TextAreaField.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { TextAreaField } from "../TextAreaField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const TextAreaInput: StoryObj<typeof TextAreaField>;

package/dist/fields/stories/TextAreaField.stories.js

@@ -0,0 +1,34 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { TextAreaField } from "../TextAreaField";
+import { Formik, Form } from "formik";
+export default {
+    title: "Fields/StringField",
+    component: TextAreaField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { name: "" }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+// Story for a regular text input
+export const TextAreaInput = {
+    args: {
+        name: "TextAreaField",
+        schema: { type: "string" },
+        uiSchema: { "ui:field": "TextAreaField" },
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const input = canvasElement.querySelector('textarea[name="TextAreaField"]');
+        expect(input).toBeInTheDocument();
+        yield userEvent.type(input, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu felis bibendum ut tristique et egestas quis. Urna duis convallis convallis tellus id interdum velit laoreet. Nisl condimentum id venenatis a condimentum vitae sapien. Massa sed elementum tempus egestas sed sed risus pretium. Nec feugiat nisl pretium fusce id velit. Vitae aliquet nec ullamcorper sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Tellus mauris a diam maecenas. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Id diam vel quam elementum pulvinar etiam. Urna id volutpat lacus laoreet non curabitur gravida. Faucibus purus in massa tempor nec feugiat nisl pretium. In hac habitasse platea dictumst vestibulum. Dui accumsan sit amet nulla. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque.");
+        yield expect(input).toHaveValue("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu felis bibendum ut tristique et egestas quis. Urna duis convallis convallis tellus id interdum velit laoreet. Nisl condimentum id venenatis a condimentum vitae sapien. Massa sed elementum tempus egestas sed sed risus pretium. Nec feugiat nisl pretium fusce id velit. Vitae aliquet nec ullamcorper sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Tellus mauris a diam maecenas. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Id diam vel quam elementum pulvinar etiam. Urna id volutpat lacus laoreet non curabitur gravida. Faucibus purus in massa tempor nec feugiat nisl pretium. In hac habitasse platea dictumst vestibulum. Dui accumsan sit amet nulla. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque.");
+    }),
+};

package/dist/hooks/useSetDefault.js

@@ -2,6 +2,9 @@ import { useEffect } from "react";
 import { useField } from "formik";
 import { getDefaultValueForType } from "../utils/getTypes";
 export const useSetDefault = (props) => {
+    if (!props.name) {
+        return;
+    }
     const [{ value }, _, { setValue }] = useField(props.name);
     useEffect(() => {
         if (!value) {

package/dist/sampleData/completeSchema.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const completeSchema = {
     title: "Inventory",
     type: "object",
-    required: ["string", "number", "boolean", "enum"],
+    required: ["string", "number", "boolean", "enum", "textArea"],
     properties: {
         string: {
             type: "string",
@@ -186,6 +186,11 @@ export const completeSchema = {
             },
             default: [{ string: "Hello" }],
         },
+        textArea: {
+            type: "string",
+            title: "TextArea Field",
+            description: "TextArea field description",
+        },
     },
 };
 export const completeUiSchema = {
@@ -288,4 +293,5 @@ export const completeUiSchema = {
             emptySearchMessage: "...no matching results found",
         },
     },
+    textArea: { "ui:field": "TextAreaField" },
 };

package/dist/styledComponents.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="hoist-non-react-statics" />
-import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps, MultipleChoiceFieldProps } from "./types";
+import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps, MultipleChoiceFieldProps, TextAreaInputFieldProps } from "./types";
 import React from "react";
 import * as formik from "formik";
 export declare const Form: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>, "ref"> & {
@@ -200,4 +200,12 @@ export declare const SearchableMultiTagSelectField: {
         MultiSelectOptionListWithoutItemStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>;
     };
 };
+export declare const TextAreaFieldInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+    ref?: unknown;
+}, never>, "ref"> & {
+    ref?: unknown;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+    ref?: unknown;
+}, never>> & Omit<({ formikAs, ...props }: Omit<formik.FieldAttributes<any>, "as">) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>, keyof React.Component<any, {}, any>>;
+export declare const TextAreaInputField: ({ inputProps, name, className, }: TextAreaInputFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/styledComponents.js

@@ -386,3 +386,10 @@ SearchableMultiTagSelectField.styles = {
     MultiSelectOptionListItemStyle: MultiSelectOptionListItem,
     MultiSelectOptionListWithoutItemStyle: MultiSelectOptionListWithoutItem,
 };
+export const TextAreaFieldInput = styled(FieldInput) `
+  width: 100%;
+  min-height: 5rem;
+`;
+export const TextAreaInputField = ({ inputProps, name, className, }) => {
+    return _jsx(TextAreaFieldInput, Object.assign({}, inputProps, { name: name, formikAs: "textarea" }));
+};

package/dist/types.d.ts

@@ -132,6 +132,7 @@ export type ComponentsType = {
     MultipleChoiceField: React.FunctionComponent<any>;
     ToggleSwitchField: React.FunctionComponent<any>;
     SearchableMultiTagSelectField: React.FunctionComponent<any>;
+    TextAreaInputField: React.FunctionComponent<any>;
 };
 export declare enum ObjectFieldButtonPurpose {
     ADD = 0,
@@ -172,6 +173,11 @@ export type RadioButtonFieldProps = {
     name?: React.ReactNode;
     className?: string;
 };
+export type TextAreaInputFieldProps = {
+    inputProps?: any;
+    name: string;
+    className?: string;
+};
 type Enum = {
     type: string;
     values: {

package/dist/utils/getEnums.d.ts

@@ -2,6 +2,9 @@ import type { FieldProps } from "../types";
 export declare const getEnums: ({ schema }: {
     schema: FieldProps["schema"];
 }) => {
+    values: never[];
+    type?: undefined;
+} | {
     type: string;
     values: {
         const: any;

package/dist/utils/getEnums.js

@@ -1,4 +1,7 @@
 export const getEnums = ({ schema }) => {
+    if (!schema) {
+        return { values: [] };
+    }
     const numberOfDefined = [schema.enum, schema.oneOf, schema.anyOf].filter((x) => x).length;
     if (numberOfDefined === 0) {
         return;

package/dist/utils/resolveSchema.js

@@ -59,12 +59,14 @@ export const resolveSchema = (_a, value) => {
             return schema;
         }, schemaCopy);
     }
-    const usedProperties = Object.keys((_b = schemaCopy.properties) !== null && _b !== void 0 ? _b : {});
-    Object.keys(value).map((key) => {
-        if (!usedProperties.includes(key)) {
-            valuesToRemoveDeps.push(key);
-        }
-    });
+    if (dependencies) {
+        const usedProperties = Object.keys((_b = schemaCopy.properties) !== null && _b !== void 0 ? _b : {});
+        Object.keys(value).map((key) => {
+            if (!usedProperties.includes(key)) {
+                valuesToRemoveDeps.push(key);
+            }
+        });
+    }
     if (!allOf && dependencies) {
         return [schemaCopy, valuesToRemoveDeps];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [