@nolwenture/formik-jsonschema-form 0.1.0

package/src/_sampleData.ts

@@ -0,0 +1,273 @@
+import { Schema, UiSchema } from "./types";
+
+export type SimpleFormDataType = {
+  firstName: string;
+  lastName: string;
+};
+
+export const simpleSchema: Schema = {
+  title: "TITLE",
+  properties: {
+    firstName: { type: "string", title: "First name" },
+    lastName: { type: "string", title: "Last name" },
+  },
+};
+
+export const simpleUiSchema: UiSchema = {
+  "ui:description": "Description text",
+};
+
+export const completeSchema: Schema = {
+  title: "Inventory",
+  type: "object",
+  required: ["string", "number", "boolean", "enum"],
+  properties: {
+    string: {
+      type: "string",
+      title: "String",
+      description: "String description",
+    },
+    number: {
+      type: "number",
+      title: "Number",
+      description: "Number description",
+    },
+    date: {
+      type: "string",
+      title: "Date",
+      description: "Date description",
+    },
+    boolean: {
+      type: "boolean",
+      title: "Boolean",
+      description: "Boolean description",
+      default: false,
+    },
+    enum: {
+      type: "number",
+      title: "Enum",
+      description: "Enum description",
+      enum: [1, 2, 3, 4],
+    },
+    enumOneOf: {
+      type: "number",
+      title: "Enum oneOf (non-standard)",
+      description: "Enum oneOf description",
+      oneOf: [
+        { const: 1, title: "one" },
+        { const: 2, title: "two" },
+        { const: 3, title: "three" },
+        { const: 4, title: "four" },
+      ],
+    },
+    enumAnyOf: {
+      type: "number",
+      title: "Enum anyOf (non-standard)",
+      description: "Enum anyOf description",
+      anyOf: [
+        { const: 1, title: "one" },
+        { const: 2, title: "two" },
+        { const: 3, title: "three" },
+        { const: 4, title: "four" },
+      ],
+    },
+    null: { type: "null", title: "Null", description: "Null description" },
+    nested: {
+      type: "object",
+      title: "Nested object",
+      description: "Nested object description",
+      properties: {
+        string: {
+          type: "string",
+          title: "Nested String",
+          description: "Nested String description",
+        },
+        number: {
+          type: "number",
+          title: "Nested Number",
+          description: "Nested Number description",
+        },
+        date: {
+          type: "string",
+          title: "Date",
+          description: "Date description",
+        },
+        boolean: {
+          type: "boolean",
+          title: "Nested Boolean",
+          description: "Nested Boolean description",
+          default: false,
+        },
+        enum: {
+          type: "number",
+          title: "Nested Enum",
+          description: "Nested Enum description",
+          enum: [1, 2, 3, 4],
+        },
+        null: {
+          type: "null",
+          title: "Nested Null",
+          description: "Nested Null description",
+        },
+      },
+      additionalProperties: {
+        type: "string",
+      },
+    },
+    array: {
+      type: "array",
+      title: "Array",
+      description: "Array description",
+      additionalItems: {
+        type: "string",
+      },
+    },
+    partiallyFixedArray: {
+      type: "array",
+      title: "Partially fixed array",
+      description: "Partially fixed array description",
+      items: [{ type: "string", default: "Hello" }, { type: "string" }],
+      additionalItems: {
+        type: "string",
+        default: "defaultForAdditional",
+      },
+    },
+    enumArray: {
+      type: "array",
+      title: "Enum array",
+      description: "Enum array description",
+      additionalItems: {
+        type: "number",
+        enum: [1, 2, 3, 4],
+      },
+    },
+    objectArray: {
+      type: "array",
+      title: "Object array",
+      description: "Object array description",
+      additionalItems: {
+        type: "object",
+        title: "Array object",
+        description: "Array object description",
+        properties: {
+          string: {
+            type: "string",
+            title: "Array String",
+            description: "Array String description",
+          },
+          number: {
+            type: "number",
+            title: "Array Number",
+            description: "Array Number description",
+          },
+          date: {
+            type: "string",
+            title: "Date",
+            description: "Date description",
+          },
+          boolean: {
+            type: "boolean",
+            title: "Array Boolean",
+            description: "Array Boolean description",
+            default: false,
+          },
+          enum: {
+            type: "array",
+            title: "Array Enum",
+            description: "Array Enum description",
+            items: {
+              type: "number",
+              enum: [1, 2, 3, 4],
+            },
+          },
+          null: {
+            type: "null",
+            title: "Array Null",
+            description: "Array Null description",
+          },
+        },
+      },
+    },
+  },
+};
+
+export const completeUiSchema: UiSchema = {
+  string: {
+    "ui:help": "String help",
+    "ui:options": {
+      placeholder: "String placeholder",
+    },
+  },
+  number: {
+    "ui:help": "Number help",
+    "ui:options": {
+      placeholder: "Number placeholder",
+    },
+  },
+  date: {
+    "ui:field": "DateField",
+    "ui:help": "Date help",
+  },
+  boolean: {
+    "ui:help": "Boolean help",
+    "ui:options": {
+      valueDescription: "Boolean specific label",
+    },
+  },
+  enum: {
+    "ui:help": "Enum help",
+  },
+  null: {
+    "ui:help": "Null help",
+  },
+  nested: {
+    string: {
+      "ui:help": "String help",
+      "ui:options": {
+        placeholder: "String placeholder",
+      },
+    },
+    number: {
+      "ui:help": "Number help",
+      "ui:options": {
+        placeholder: "Number placeholder",
+      },
+    },
+    date: {
+      "ui:field": "DateField",
+      "ui:help": "Date help",
+    },
+    boolean: {
+      "ui:help": "Boolean help",
+      "ui:options": {
+        valueDescription: "Boolean specific label",
+      },
+    },
+    enum: {
+      "ui:help": "Enum help",
+    },
+    null: {
+      "ui:help": "Null help",
+    },
+  },
+};
+
+export const generatedSchema: Schema = {
+  type: "object",
+  properties: {
+    object: {
+      type: "object",
+      additionalProperties: {},
+    },
+    value: {},
+    array: {
+      type: "array",
+      additionalItems: {},
+    },
+    property: {
+      type: "string",
+    },
+  },
+  required: ["object", "value", "property"],
+  additionalProperties: false,
+};

package/src/fields/AnyField.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+import { JSONSchema7, JSONSchema7TypeName } from "json-schema";
+import { useState } from "react";
+import { FieldProps } from "../types";
+import { SchemaField } from "./SchemaField";
+
+import { COMPONENT_TYPES } from "./types";
+
+export function AnyField(props: FieldProps) {
+  const [type, setType] = useState<JSONSchema7TypeName>("string");
+  const { name, schema, uiSchema } = props;
+  const enrichedSchema = useMemo<JSONSchema7>(() => {
+    switch (type) {
+      case "object":
+        return { ...(schema || {}), type, additionalProperties: {} };
+      case "array":
+        return { ...(schema || {}), type, additionalItems: {} };
+      default:
+        return { ...(schema || {}), type };
+    }
+  }, [type, schema]);
+  return (
+    <div>
+      <select
+        value={type}
+        onChange={(event) => setType(event.target.value as JSONSchema7TypeName)}
+      >
+        {Object.keys(COMPONENT_TYPES).map((type) => (
+          <option value={type}>{type}</option>
+        ))}
+      </select>
+      <SchemaField name={name} schema={enrichedSchema} uiSchema={uiSchema} />
+    </div>
+  );
+}

package/src/fields/ArrayField.tsx

@@ -0,0 +1,177 @@
+import { useContext, useMemo } from "react";
+import _ from "lodash";
+import { FormRegistry } from "../Form";
+import { useField } from "formik";
+import { ArrayFieldButtonPurpose, FieldProps, Schema } from "../types";
+import { useExtractUiSchema } from "../utils";
+
+function appendArray(values: any[] | undefined): any[] {
+  return values ? [...values, ""] : [""];
+}
+
+function removeFromArray(values: any[], index: number) {
+  return [...values.slice(0, index), ...values.slice(index + 1)];
+}
+function moveInArray(values: any[], index: number, direction: -1 | 1) {
+  if (direction === -1) {
+    return [
+      ...values.slice(0, index - 1),
+      values[index],
+      values[index - 1],
+      ...values.slice(index + 1),
+    ];
+  } else {
+    return [
+      ...values.slice(0, index),
+      values[index + 1],
+      values[index],
+      ...values.slice(index + 2),
+    ];
+  }
+}
+
+export function ArrayField(props: FieldProps) {
+  const {
+    fields: { SchemaField },
+    templates: { ArrayFieldTemplate },
+    components: {
+      ArrayFieldItem,
+      ArrayFieldList,
+      ArrayFieldItemButtons,
+      ArrayFieldButton,
+    },
+  } = useContext(FormRegistry);
+  const { name, schema, uiSchema } = props;
+  const [{ value }, _, { setValue }] = useField<any[]>(name);
+
+  const {
+    items,
+    additionalItems,
+  }: { items: Schema[]; additionalItems: Schema | undefined } = useMemo(() => {
+    let items =
+      schema.items && typeof schema.items !== "boolean" ? schema.items : [];
+    if (!Array.isArray(items)) {
+      items = [items];
+    }
+    return {
+      items: items.filter((item) => typeof item !== "boolean") as Schema[],
+      additionalItems:
+        typeof schema.additionalItems !== "boolean"
+          ? schema.additionalItems
+          : undefined,
+    };
+  }, [schema]);
+
+  //This whole mess would give backwards compatibility, but maybe we don't do it
+  // const {
+  //   items,
+  //   additionalItems,
+  // }: {
+  //   items: Schema[];
+  //   additionalItems: Schema | undefined;
+  // } = useMemo(
+  //   () =>
+  //     !schema.additionalItems
+  //       ? {
+  //           additionalItems:
+  //             typeof schema.items !== "boolean"
+  //               ? Array.isArray(schema.items)
+  //                 ? typeof schema.items[0] !== "boolean"
+  //                   ? schema.items[0]
+  //                   : undefined
+  //                 : typeof schema.items !== "boolean"
+  //                 ? schema.items
+  //                 : undefined
+  //               : undefined,
+  //           items: [],
+  //         }
+  //       : {
+  //           additionalItems:
+  //             typeof schema.additionalItems !== "boolean"
+  //               ? schema.additionalItems
+  //               : undefined,
+  //           items: schema.items
+  //             ? Array.isArray(schema.items)
+  //               ? (schema.items.filter(
+  //                   (item) => typeof item !== "boolean"
+  //                 ) as Schema[])
+  //               : typeof schema.items !== "boolean"
+  //               ? [schema.items]
+  //               : []
+  //             : [],
+  //         },
+  //   [schema]
+  // );
+  // Bacwards compatibility ends
+
+  const { props: inputProps, disabled } = useExtractUiSchema(uiSchema);
+
+  return (
+    <ArrayFieldTemplate {...props}>
+      <ArrayFieldList>
+        {(items || []).map((itemSchema, index) => (
+          <ArrayFieldItem>
+            <SchemaField
+              key={index}
+              name={`${name}[${index}]`}
+              schema={typeof itemSchema !== "boolean" ? itemSchema : {}}
+              uiSchema={uiSchema?.[index] || uiSchema?.items}
+            />
+          </ArrayFieldItem>
+        ))}
+        {(value?.slice(items.length) || []).map((_, index) => (
+          <ArrayFieldItem>
+            <SchemaField
+              key={index}
+              {...{
+                disabled,
+                ...inputProps,
+              }}
+              name={`${name}[${index + items.length}]`}
+              schema={
+                additionalItems && typeof additionalItems !== "boolean"
+                  ? additionalItems
+                  : {}
+              }
+              uiSchema={{
+                disabled,
+                ...(uiSchema?.[index + items.length] || uiSchema?.items),
+              }}
+            />
+            <ArrayFieldItemButtons>
+              <ArrayFieldButton
+                purpose={ArrayFieldButtonPurpose.REMOVE}
+                onClick={() =>
+                  setValue(removeFromArray(value, index + items.length))
+                }
+              />
+
+              {value.length > 1 && index > 0 && (
+                <ArrayFieldButton
+                  purpose={ArrayFieldButtonPurpose.MOVE_UP}
+                  onClick={() =>
+                    setValue(moveInArray(value, index + items.length, -1))
+                  }
+                />
+              )}
+              {value.length > 1 && index < value.length - 1 && (
+                <ArrayFieldButton
+                  purpose={ArrayFieldButtonPurpose.MOVE_DOWN}
+                  onClick={() =>
+                    setValue(moveInArray(value, index + items.length, 1))
+                  }
+                />
+              )}
+            </ArrayFieldItemButtons>
+          </ArrayFieldItem>
+        ))}
+      </ArrayFieldList>
+      {additionalItems && (
+        <ArrayFieldButton
+          purpose={ArrayFieldButtonPurpose.ADD}
+          onClick={() => setValue(appendArray(value))}
+        />
+      )}
+    </ArrayFieldTemplate>
+  );
+}

package/src/fields/BooleanField.tsx

@@ -0,0 +1,23 @@
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+import { FieldProps } from "../types";
+import { useExtractUiSchema, useSetDefault } from "../utils";
+
+export function BooleanField(props: FieldProps) {
+  const {
+    templates: { FieldTemplate },
+    components: { FieldInput },
+  } = useContext(FormRegistry);
+  useSetDefault(props);
+  const { name, uiSchema } = props;
+  const { label, props: inputProps } = useExtractUiSchema(uiSchema);
+
+  return (
+    <FieldTemplate {...props}>
+      <>
+        <FieldInput {...inputProps} name={name} type="checkbox" />
+        {label}
+      </>
+    </FieldTemplate>
+  );
+}

package/src/fields/DateField.tsx

@@ -0,0 +1,20 @@
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+import { FieldProps } from "../types";
+import { useExtractUiSchema, useSetDefault } from "../utils";
+
+export function DateField(props: FieldProps) {
+  const {
+    templates: { FieldTemplate },
+    components: { FieldInput },
+  } = useContext(FormRegistry);
+  useSetDefault(props);
+  const { name, uiSchema } = props;
+  const { props: inputProps } = useExtractUiSchema(uiSchema);
+
+  return (
+    <FieldTemplate {...props}>
+      <FieldInput {...inputProps} name={name} type="date" />
+    </FieldTemplate>
+  );
+}

package/src/fields/NullField.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+import { FieldProps } from "../types";
+
+export function NullField(props: FieldProps) {
+  const {
+    templates: { FieldTemplate },
+  } = useContext(FormRegistry);
+  const { name } = props;
+
+  return <FieldTemplate {...props}></FieldTemplate>;
+}

package/src/fields/NumberField.tsx

@@ -0,0 +1,14 @@
+import { FieldProps } from "../types";
+import { StringField } from "./StringField";
+
+export function NumberField(props: FieldProps) {
+  return (
+    <StringField
+      {...props}
+      uiSchema={{
+        ...props.uiSchema,
+        "ui:props": { ...(props.uiSchema?.["ui:props"] || {}), type: "number" },
+      }}
+    />
+  );
+}

package/src/fields/ObjectField.tsx

@@ -0,0 +1,68 @@
+import { useField } from "formik";
+import { useContext, useMemo } from "react";
+import { FormRegistry } from "../Form";
+import { FieldProps, ObjectFieldButtonPurpose } from "../types";
+
+export function ObjectField(props: FieldProps) {
+  const {
+    fields: { SchemaField },
+    templates: { ObjectFieldTemplate },
+    components: {
+      ObjectFieldItem,
+      ObjectFieldList,
+      ObjectFieldItemButtons,
+      ObjectFieldButton,
+    },
+  } = useContext(FormRegistry);
+  const { name, schema, uiSchema } = props;
+  const [{ value }, _, { setValue }] = useField<Record<string, any>>(name);
+  const { properties, additionalProperties } = schema;
+  const propertyKeys = useMemo(
+    () => Object.keys(properties || {}),
+    [properties]
+  );
+
+  const additionalValues = useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(value || {}).filter(
+          ([key, value]) => !propertyKeys.includes(key)
+        )
+      ),
+    [value, propertyKeys]
+  );
+
+  return (
+    <ObjectFieldTemplate {...props}>
+      {Object.entries(properties || {}).map(([childName, childSchema]) => (
+        <SchemaField
+          key={childName}
+          name={name ? [name, childName].join(".") : childName}
+          schema={typeof childSchema !== "boolean" ? childSchema : {}}
+          uiSchema={uiSchema?.[childName]}
+        />
+      ))}
+      {Object.entries(additionalValues || {}).map(
+        ([childName, childSchema]) => (
+          <SchemaField
+            key={childName}
+            name={name ? [name, childName].join(".") : childName}
+            schema={typeof childSchema !== "boolean" ? childSchema : {}}
+            uiSchema={uiSchema?.[childName]}
+          />
+        )
+      )}
+      {additionalProperties && (
+        <ObjectFieldButton
+          purpose={ObjectFieldButtonPurpose.ADD}
+          onClick={() => {
+            const key = prompt("Give key");
+            if (key) {
+              setValue({ ...value, [key]: undefined });
+            }
+          }}
+        />
+      )}
+    </ObjectFieldTemplate>
+  );
+}

package/src/fields/SchemaField.tsx

@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { Field, FieldProps, Schema, UiSchema } from "../types";
+import { useExtractUiSchema, getSchemaType } from "../utils";
+import { FormRegistry } from "../Form";
+
+import { COMPONENT_TYPES } from "./types";
+
+function getFieldComponent(
+  schema: Schema,
+  uiSchema: UiSchema,
+  fields: Record<string, Field>
+) {
+  const { field } = useExtractUiSchema(uiSchema);
+  if (typeof field === "function") {
+    return field;
+  }
+  if (typeof field === "string" && field in fields) {
+    return fields[field];
+  }
+  let schemaType = getSchemaType(schema);
+  if (Array.isArray(schemaType)) {
+    schemaType = schemaType[0];
+  }
+  const componentName = COMPONENT_TYPES[schemaType || "any"];
+
+  return componentName in fields
+    ? fields[componentName]
+    : fields.UnsupportedField;
+}
+
+export function SchemaField(props: FieldProps) {
+  const { schema, uiSchema } = props;
+  const { fields } = useContext(FormRegistry);
+  const FieldComponent = getFieldComponent(schema, uiSchema, fields);
+
+  return <FieldComponent {...props} />;
+}