@nolwenture/formik-jsonschema-form 0.1.0

package/src/utils.ts

@@ -0,0 +1,124 @@
+import { useField } from "formik";
+import { useEffect, useMemo } from "react";
+import { FieldProps, Schema, UiSchema } from "./types";
+
+export function getTitle({
+  title,
+  uiSchema,
+  schema,
+}: {
+  title?: string;
+  uiSchema?: UiSchema;
+  schema?: Schema;
+}) {
+  return (
+    title ||
+    uiSchema?.["ui:options"]?.title ||
+    uiSchema?.["ui:title"] ||
+    schema?.title
+  );
+}
+export function getDescription({
+  description,
+  uiSchema,
+  schema,
+}: {
+  description?: string;
+  uiSchema?: UiSchema;
+  schema?: Schema;
+}) {
+  return (
+    description ||
+    uiSchema?.["ui:options"]?.description ||
+    uiSchema?.["ui:description"] ||
+    schema?.description
+  );
+}
+
+export function useSetDefault(props: FieldProps) {
+  const [{ value }, _, { setValue }] = useField(props.name);
+  useEffect(() => {
+    if (!value && props.schema.default) {
+      setValue(props.schema.default);
+    }
+  }, []);
+}
+
+export function useExtractUiSchema(props: UiSchema | undefined = {}): {
+  [name: string]: any;
+  field?: UiSchema["ui:field"];
+  props?: UiSchema["ui:props"];
+  help?: UiSchema["ui:help"];
+} {
+  return useMemo(() => {
+    const { "ui:options": options = {}, ...uiSchema } = props;
+    return {
+      ...Object.keys(uiSchema || {}).reduce(
+        (result, key) => ({
+          ...result,
+          [key.replace("ui:", "")]: uiSchema[key],
+        }),
+        {}
+      ),
+      ...options,
+    };
+  }, [props]);
+}
+
+export const guessType = function guessType(value: any) {
+  if (Array.isArray(value)) {
+    return "array";
+  } else if (typeof value === "string") {
+    return "string";
+  } else if (value == null) {
+    return "null";
+  } else if (typeof value === "boolean") {
+    return "boolean";
+  } else if (!isNaN(value)) {
+    return "number";
+  } else if (typeof value === "object") {
+    return "object";
+  }
+  // Default to string if we can't figure it out
+  return "string";
+};
+
+export function getSchemaType(schema: Schema) {
+  if (!schema) {
+    return undefined;
+  }
+  let { type } = schema;
+
+  if (!type && schema.const) {
+    return guessType(schema.const);
+  }
+
+  if (!type && schema.enum) {
+    return "string";
+  }
+
+  if (!type && (schema.properties || schema.additionalProperties)) {
+    return "object";
+  }
+
+  if (type instanceof Array && type.length === 2 && type.includes("null")) {
+    return type.find((type) => type !== "null");
+  }
+
+  return type;
+}
+
+//TODO: REMOVE WHEN ALL SUPPORTED
+export function warnFromUnsupportedKeys(
+  componentName: string,
+  data: Record<string, any>,
+  supportedKeys: string[]
+) {
+  Object.keys(data).forEach((key) => {
+    if (!supportedKeys.includes(key)) {
+      console.warn(
+        `Component "${componentName}" does not support (yet) key "${key}"`
+      );
+    }
+  });
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}