@nolwenture/formik-jsonschema-form 0.1.0 → 0.1.2

package/src/fields/StringField.tsx

@@ -1,89 +0,0 @@
-import { useContext, useEffect, useMemo } from "react";
-import { idText } from "typescript";
-import { FormRegistry } from "../Form";
-import { FieldProps } from "../types";
-import { useExtractUiSchema, useSetDefault } from "../utils";
-
-function getEnums({ schema }: FieldProps) {
-  const numberOfDefined = [schema.enum, schema.oneOf, schema.anyOf].filter(
-    (x) => x
-  ).length;
-
-  if (numberOfDefined === 0) {
-    return;
-  }
-  if (numberOfDefined > 1) {
-    throw new Error('Only one of "enum", "oneOf" or "anyOf" can be defined!');
-  }
-  if (schema.enum) {
-    return {
-      type: "select",
-      values: schema.enum.map((option: any) => ({
-        const: option,
-        title: `${option}`,
-      })),
-    };
-  }
-  if (schema.oneOf) {
-    return {
-      type: "select",
-      values: schema.oneOf as { const: any; title: string }[],
-    };
-  }
-  if (schema.anyOf) {
-    return {
-      type: "multiSelect",
-      values: schema.anyOf as { const: any; title: string }[],
-    };
-  }
-}
-
-export function StringField(props: FieldProps) {
-  const {
-    templates: { FieldTemplate },
-    components: { FieldInput },
-  } = useContext(FormRegistry);
-  useSetDefault(props);
-  const { name, schema, uiSchema } = props;
-  const { type, placeholder, props: inputProps } = useExtractUiSchema(uiSchema);
-  const enums = useMemo(() => getEnums(props), [props]);
-
-  switch (enums?.type) {
-    case "select":
-    case "multiSelect":
-      return (
-        <FieldTemplate {...props}>
-          <FieldInput
-            {...{
-              type,
-              placeholder,
-              ...inputProps,
-            }}
-            name={name}
-            formikAs="select"
-            multiple={enums.type === "multiSelect"}
-          >
-            {enums.type !== "multiSelect" && <option value=""></option>}
-            {enums?.values.map((option, index) => (
-              <option key={index} value={option.const}>
-                {option.title}
-              </option>
-            ))}
-          </FieldInput>
-        </FieldTemplate>
-      );
-    default:
-      return (
-        <FieldTemplate {...props}>
-          <FieldInput
-            {...{
-              type,
-              placeholder,
-              ...inputProps,
-            }}
-            name={name}
-          />
-        </FieldTemplate>
-      );
-  }
-}

package/src/fields/types.tsx

@@ -1,10 +0,0 @@
-export const COMPONENT_TYPES = {
-  array: "ArrayField",
-  boolean: "BooleanField",
-  integer: "NumberField",
-  number: "NumberField",
-  object: "ObjectField",
-  string: "StringField",
-  null: "NullField",
-  any: "AnyField",
-};

package/src/formEditorSchemas.ts

@@ -1,40 +0,0 @@
-import { Schema, UiSchema } from "./types";
-
-const field: Schema = {
-  type: "object",
-  properties: {
-    type: {
-      type: "string",
-      title: "Field type",
-      oneOf: [
-        { const: "string", title: "String" },
-        { const: "number", title: "Number" },
-        { const: "array", title: "Array" },
-        { const: "object", title: "Object" },
-      ],
-    },
-    title: {
-      type: "string",
-      title: "Field title",
-    },
-  },
-};
-
-export const schema: Schema = {
-  type: "object",
-  properties: {
-    "schema.type": {
-      type: "string",
-      default: "object",
-    },
-    "schema.title": {
-      type: "string",
-      title: "Form title",
-    },
-  },
-  additionalProperties: field,
-};
-
-export const uiSchema: UiSchema = {
-  "schema.type": { props: { type: "hidden" } },
-};

package/src/styledComponents.tsx

@@ -1,107 +0,0 @@
-import styled from "styled-components";
-import * as formik from "formik";
-import {
-  ArrayFieldButtonProps,
-  ArrayFieldButtonPurpose,
-  ObjectFieldButtonProps,
-  ObjectFieldButtonPurpose,
-} from "./types";
-
-export const Form = styled(formik.Form)``;
-export const FormButtonWrapper = styled.div``;
-export const FormButton = styled.button``;
-
-export const ObjectFieldWrapper = styled.fieldset``;
-export const ObjectFieldTitle = styled.legend``;
-export const ObjectFieldList = styled.ul`
-  list-style-type: none;
-  padding: 0;
-`;
-export const ObjectFieldItem = styled.li`
-  display: flex;
-`;
-export const ObjectFieldItemButtons = styled.div`
-  display: flex;
-  margin: 0.5rem;
-`;
-export const ObjectFieldButtonEl = styled.a`
-  cursor: pointer;
-  border: 1px solid black;
-  display: block;
-  line-height: 1em;
-  height: 1em;
-  width: 1em;
-  text-align: center;
-`;
-
-export function ObjectFieldButton({
-  purpose,
-  onClick,
-}: ObjectFieldButtonProps) {
-  switch (purpose) {
-    case ObjectFieldButtonPurpose.ADD:
-      return <ObjectFieldButtonEl onClick={onClick}>+</ObjectFieldButtonEl>;
-    case ObjectFieldButtonPurpose.REMOVE:
-      return <ObjectFieldButtonEl onClick={onClick}>-</ObjectFieldButtonEl>;
-    case ObjectFieldButtonPurpose.MOVE_UP:
-      return <ObjectFieldButtonEl onClick={onClick}>↑</ObjectFieldButtonEl>;
-    case ObjectFieldButtonPurpose.MOVE_DOWN:
-      return <ObjectFieldButtonEl onClick={onClick}>↓</ObjectFieldButtonEl>;
-    default:
-      return (
-        <ObjectFieldButtonEl onClick={onClick}>
-          UNKNOWN PURPOSE
-        </ObjectFieldButtonEl>
-      );
-  }
-}
-
-export const ArrayFieldWrapper = ObjectFieldWrapper;
-export const ArrayFieldTitle = ObjectFieldTitle;
-export const ArrayFieldList = ObjectFieldList;
-export const ArrayFieldItem = ObjectFieldItem;
-export const ArrayFieldItemButtons = ObjectFieldItemButtons;
-export const ArrayFieldButtonEl = ObjectFieldButtonEl;
-
-export function ArrayFieldButton({ purpose, onClick }: ArrayFieldButtonProps) {
-  switch (purpose) {
-    case ArrayFieldButtonPurpose.ADD:
-      return <ArrayFieldButtonEl onClick={onClick}>+</ArrayFieldButtonEl>;
-    case ArrayFieldButtonPurpose.REMOVE:
-      return <ArrayFieldButtonEl onClick={onClick}>-</ArrayFieldButtonEl>;
-    case ArrayFieldButtonPurpose.MOVE_UP:
-      return <ArrayFieldButtonEl onClick={onClick}>↑</ArrayFieldButtonEl>;
-    case ArrayFieldButtonPurpose.MOVE_DOWN:
-      return <ArrayFieldButtonEl onClick={onClick}>↓</ArrayFieldButtonEl>;
-    default:
-      return (
-        <ArrayFieldButtonEl onClick={onClick}>
-          UNKNOWN PURPOSE
-        </ArrayFieldButtonEl>
-      );
-  }
-}
-
-export const FieldWrapper = styled.div`
-  margin: 0.5rem 0;
-`;
-export const FieldTitle = styled.label`
-  font-weight: 700;
-`;
-export const FieldDescription = styled.p`
-  margin: 0;
-  font-size: 0.9em;
-`;
-export const FieldHelp = styled.p`
-  margin: 0;
-  font-size: 0.9em;
-`;
-export const ErrorMessage = styled(formik.ErrorMessage)``;
-
-/*
- * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
- *
- */
-export const FieldInput = styled(({ formikAs, ...props }) => {
-  return <formik.Field {...props} as={formikAs} />;
-})``;

package/src/templates/ArrayFieldTemplate.tsx

@@ -1,46 +0,0 @@
-import { useContext } from "react";
-import { FormRegistry } from "../Form";
-import { ArrayFieldTemplateProps } from "../types";
-import { useExtractUiSchema, getDescription, getTitle } from "../utils";
-
-export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
-  const {
-    components: {
-      ArrayFieldWrapper,
-      ArrayFieldTitle,
-      FieldDescription,
-      ErrorMessage,
-      FieldHelp,
-    },
-  } = useContext(FormRegistry);
-  const { name, uiSchema, children } = props;
-  const title = getTitle(props);
-  const description = getDescription(props);
-  const {
-    help,
-    //TODO: This is not right
-    props: {
-      wrapper: wrappertProps,
-      title: titleProps,
-      description: descriptionProps,
-      help: helpProps,
-      error: errorProps,
-    } = {},
-  } = useExtractUiSchema(uiSchema);
-
-  return (
-    <ArrayFieldWrapper {...wrappertProps}>
-      {title && (
-        <ArrayFieldTitle {...titleProps} htmlFor={name}>
-          {title}
-        </ArrayFieldTitle>
-      )}
-      {description && (
-        <FieldDescription {...descriptionProps}>{description}</FieldDescription>
-      )}
-      {children}
-      {help && <FieldHelp {...helpProps}>{help}</FieldHelp>}
-      <ErrorMessage {...errorProps} name={name} />
-    </ArrayFieldWrapper>
-  );
-}

package/src/templates/FieldTemplate.tsx

@@ -1,46 +0,0 @@
-import { useContext } from "react";
-import { FormRegistry } from "../Form";
-import { FieldTemplateProps } from "../types";
-import { useExtractUiSchema, getDescription, getTitle } from "../utils";
-
-export function FieldTemplate(props: FieldTemplateProps) {
-  const {
-    components: {
-      FieldWrapper,
-      FieldTitle,
-      FieldDescription,
-      ErrorMessage,
-      FieldHelp,
-    },
-  } = useContext(FormRegistry);
-  const { name, uiSchema, children } = props;
-  const title = getTitle(props);
-  const description = getDescription(props);
-  const {
-    help,
-    //TODO: This is not right
-    props: {
-      wrapper: wrappertProps,
-      title: titleProps,
-      description: descriptionProps,
-      help: helpProps,
-      error: errorProps,
-    } = {},
-  } = useExtractUiSchema(uiSchema);
-
-  return (
-    <FieldWrapper {...wrappertProps}>
-      {title && (
-        <FieldTitle {...titleProps} htmlFor={name}>
-          {title}
-        </FieldTitle>
-      )}
-      {description && (
-        <FieldDescription {...descriptionProps}>{description}</FieldDescription>
-      )}
-      {children}
-      {help && <FieldHelp {...helpProps}>{help}</FieldHelp>}
-      <ErrorMessage {...errorProps} name={name} />
-    </FieldWrapper>
-  );
-}

package/src/templates/ObjectFieldTemplate.tsx

@@ -1,22 +0,0 @@
-import { useContext } from "react";
-import { FormRegistry } from "../Form";
-import { ObjectFieldTemplateProps } from "../types";
-import { getDescription, getTitle } from "../utils";
-
-export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
-  const {
-    components: { FieldDescription, ObjectFieldTitle, ObjectFieldWrapper },
-  } = useContext(FormRegistry);
-  const { children } = props;
-
-  const title = getTitle(props);
-  const description = getDescription(props);
-
-  return (
-    <ObjectFieldWrapper>
-      {title && <ObjectFieldTitle>{title}</ObjectFieldTitle>}
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {children}
-    </ObjectFieldWrapper>
-  );
-}

package/src/types.ts

@@ -1,260 +0,0 @@
-import * as React from "react";
-import { JSONSchema7 } from "json-schema";
-import { FormikValues, FormikHelpers } from "formik";
-
-type ErrorSchema = {
-  [k: string]: ErrorSchema;
-};
-
-export type FormProps<T> = React.PropsWithChildren<{
-  /** If true, disabled prop is passed down to each field on the form */
-  disabled?: boolean | undefined;
-  // /** The value that will be passed to `class` HTML attribute of form  */
-  className?: string | undefined;
-  /** Form schema */
-  schema: Schema;
-  /** Form uiSchema */
-  uiSchema?: UiSchema | undefined;
-  /** Data that is passed down to all fields. Used for implementing context aware fields */
-  formContext?: Record<string, any>;
-  /** Dictionary of registered fields */
-  fields?: { [name: string]: Field } | undefined;
-  /* Customize the templates to construct the core field */
-  templates?: Partial<TemplatesType>;
-  components?: Partial<ComponentsType>;
-  /**
-   * If set to true, turns off HTML5 validation
-   * @default false
-   */
-  noHtml5Validate?: boolean | undefined;
-  // safeRenderCompletion?: boolean | undefined;
-  // /** Allows you to validate formdata against another JSON Schema meta schema */
-  // additionalMetaSchemas?: ReadonlyArray<object> | undefined;
-  // /** Allows you to define custom formats for validation */
-  // customFormats?:
-  //   | { [k: string]: string | RegExp | ((data: string) => boolean) }
-  //   | undefined;
-  // // HTML Attributes
-  // /** The value that will be passed to `id` HTML attribute of form  */
-  // id?: string | undefined;
-  // /** The value that will be passed to `name` HTML attribute of form  */
-  // name?: string | undefined;
-  // /** The value that will be passed to `method` HTML attribute of form  */
-  // method?: string | undefined;
-  // /** The value that will be passed to `target` HTML attribute of form  */
-  // target?: string | undefined;
-  // /** The value that will be passed to `action` HTML attribute of form  */
-  // action?: string | undefined;
-  // /** The value that will be passed to `autocomplete ` HTML attribute of form */
-  // autoComplete?: string | undefined;
-  // /** The value that will be passed to `enctype` HTML attribute of form  */
-  // enctype?: string | undefined;
-  // /** The value that will be passed to `accept-charset` HTML attribute of form  */
-  // acceptcharset?: string | undefined;
-  // /**
-  //  * If set to true, extra form data values not in form field will be removed when `onSubmit` is called
-  //  * @default false
-  //  */
-  // omitExtraData?: boolean | undefined;
-  // /**
-  //  * If `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field will be removed whenever `onChange` is called.
-  //  * @default false
-  //  */
-  // liveOmit?: boolean | undefined;
-  // /** Used to change the default `form` tag into a different HTML tag */
-  // tagName?: keyof JSX.IntrinsicElements | React.FunctionComponent | undefined;
-}>;
-
-export type Schema = JSONSchema7;
-
-export type UiSchema = {
-  "ui:field"?: Field | string;
-  "ui:options"?: {
-    [key: string]: boolean | number | string | object | any[] | null;
-  };
-  "ui:props"?: { [key: string]: any };
-  "ui:help"?: React.ReactNode | React.ReactNode[];
-  // "ui:order"?: string[] | undefined;
-  // "ui:FieldTemplate"?: React.FunctionComponent<FieldTemplateProps> | undefined;
-  // "ui:ArrayFieldTemplate"?:
-  //   | React.FunctionComponent<ArrayFieldTemplateProps>
-  //   | undefined;
-  // "ui:ObjectFieldTemplate"?:
-  //   | React.FunctionComponent<ObjectFieldTemplateProps>
-  //   | undefined;
-  [name: string]: any;
-};
-
-export type FormRegistryContextValue = {
-  fields: Record<string, Field>;
-  templates: TemplatesType;
-  components: ComponentsType;
-  definitions: Record<string, any>;
-  formContext: Record<string, any>;
-};
-
-export interface FieldProps
-  extends Pick<
-    React.HTMLAttributes<HTMLElement>,
-    Exclude<keyof React.HTMLAttributes<HTMLElement>, "onBlur">
-  > {
-  name: string;
-  schema: Schema;
-  uiSchema: UiSchema;
-  // errorSchema: ErrorSchema;
-  // onChange: (e: IChangeEvent<T> | any, es?: ErrorSchema) => any;
-  // onBlur: (name: string, value: boolean | number | string | null) => void;
-  // autofocus: boolean;
-  disabled?: boolean;
-  readonly?: boolean;
-  required?: boolean;
-  [prop: string]: any;
-}
-
-export type Field = React.FunctionComponent<FieldProps>;
-
-/*** TEMPLATES ***/
-export type FieldTemplateProps = React.PropsWithChildren<{
-  name: string;
-  schema: Schema;
-  uiSchema?: UiSchema;
-  hidden?: boolean;
-  required?: boolean;
-  readonly?: boolean;
-  disabled?: boolean;
-}>;
-
-export type ArrayFieldTemplateProps = React.PropsWithChildren<{
-  name: string;
-  schema: Schema;
-  uiSchema?: UiSchema;
-  hidden?: boolean;
-  required?: boolean;
-  readonly?: boolean;
-  disabled?: boolean;
-  // items: {
-  //   children: React.ReactElement;
-  //   className: string;
-  //   disabled: boolean;
-  //   hasMoveDown: boolean;
-  //   hasMoveUp: boolean;
-  //   hasRemove: boolean;
-  //   hasToolbar: boolean;
-  //   index: number;
-  //   onDropIndexClick: (index: number) => (event: any) => void;
-  //   onReorderClick: (index: number, newIndex: number) => (event: any) => void;
-  //   readonly: boolean;
-  //   key: string;
-  // }[];
-}>;
-
-export type ObjectFieldTemplateProps = {
-  schema: Schema;
-  uiSchema?: UiSchema;
-  required?: boolean;
-  children: React.ReactNode;
-};
-
-export type TemplatesType = {
-  FieldTemplate: React.FunctionComponent<FieldTemplateProps>;
-  ObjectFieldTemplate: React.FunctionComponent<ObjectFieldTemplateProps>;
-  ArrayFieldTemplate: React.FunctionComponent<ArrayFieldTemplateProps>;
-};
-
-/*** COMPONENTS ***/
-export type ComponentsType = {
-  Form: React.FunctionComponent<any>;
-  FormButtonWrapper: React.FunctionComponent<any>;
-  FormButton: React.FunctionComponent<any>;
-  ObjectFieldWrapper: React.FunctionComponent<any>;
-  ObjectFieldTitle: React.FunctionComponent<any>;
-  ObjectFieldItem: React.FunctionComponent<any>;
-  ObjectFieldItemButtons: React.FunctionComponent<any>;
-  ObjectFieldList: React.FunctionComponent<any>;
-  ObjectFieldButton: React.FunctionComponent<ObjectFieldButtonProps>;
-  ArrayFieldWrapper: React.FunctionComponent<any>;
-  ArrayFieldTitle: React.FunctionComponent<any>;
-  ArrayFieldItem: React.FunctionComponent<any>;
-  ArrayFieldItemButtons: React.FunctionComponent<any>;
-  ArrayFieldList: React.FunctionComponent<any>;
-  ArrayFieldButton: React.FunctionComponent<ArrayFieldButtonProps>;
-  FieldWrapper: React.FunctionComponent<any>;
-  FieldTitle: React.FunctionComponent<any>;
-  FieldDescription: React.FunctionComponent<any>;
-  FieldHelp: React.FunctionComponent<any>;
-  ErrorMessage: React.FunctionComponent<any>;
-  FieldInput: React.FunctionComponent<any>;
-};
-
-export enum ObjectFieldButtonPurpose {
-  ADD,
-  REMOVE,
-  MOVE_UP,
-  MOVE_DOWN,
-}
-
-export type ObjectFieldButtonProps = {
-  purpose: ObjectFieldButtonPurpose;
-  onClick: () => void;
-};
-
-export enum ArrayFieldButtonPurpose {
-  ADD,
-  REMOVE,
-  MOVE_UP,
-  MOVE_DOWN,
-}
-
-export type ArrayFieldButtonProps = {
-  purpose: ArrayFieldButtonPurpose;
-  onClick: () => void;
-};
-/*** ***/
-
-export type AjvError = {
-  message: string;
-  name: string;
-  params: any;
-  property: string;
-  stack: string;
-};
-
-export type ErrorListProps = {
-  errorSchema: FormValidation;
-  errors: AjvError[];
-  schema: Schema;
-  uiSchema: UiSchema;
-};
-
-export type IChangeEvent<T = any> = {
-  edit: boolean;
-  formData: T;
-  errors: AjvError[];
-  errorSchema: FormValidation;
-  schema: Schema;
-  uiSchema: UiSchema;
-  status?: string | undefined;
-};
-
-export type ISubmitEvent<T> = IChangeEvent<T>;
-
-export type FieldError = string;
-
-type FieldValidation = {
-  __errors: FieldError[];
-  addError: (message: string) => void;
-};
-
-type FormValidation = FieldValidation & {
-  [fieldName: string]: FieldValidation;
-};
-
-type FormSubmit<T = any> = {
-  formData: T;
-};
-
-export type AddButtonProps = {
-  className: string;
-  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  disabled: boolean;
-};