From ebfc650a641e5d9be9796ab6a38cf9bcd6e8ccaf Mon Sep 17 00:00:00 2001
From: Ryan Sites <ryan.sites@optum.com>
Date: Wed, 2 Jun 2021 13:15:54 -0400
Subject: [PATCH 1/2] bump version

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0029768..fc8e5a6 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
 	"name": "@optum/json-schema-editor",
-	"version": "2.0.1",
+	"version": "2.0.3",
 	"description": "JsonSchema Editor React Control",
 	"repository": "https://github.com/optum/jsonschema-editor-react",
 	"license": "Apache 2.0",
 	"engines": {
 		"node": ">=10.18.0 <11 || >=12.14.0 <13 || >=13.5.0"
 	},
-	"source": "src/JsonSchemaEditor/index.ts",
+	"source": "src/index.ts",
 	"publishConfig": {
 		"access": "public",
 		"registry": "https://registry.npmjs.org"

From cce20c10779c3f0f90c0a4e6b48b4e5416869cdc Mon Sep 17 00:00:00 2001
From: Ryan Sites <ryan.sites@optum.com>
Date: Wed, 2 Jun 2021 13:16:08 -0400
Subject: [PATCH 2/2] refactor to include typescript.types exported

---
 src/JsonSchemaEditor.test.tsx                 |  40 +-
 .../JsonSchemaEditor.types.ts                 |   0
 src/JsonSchemaEditor/JsonSchemaEditor.tsx     |  78 +--
 .../advanced-boolean/index.tsx                |  72 +--
 .../advanced-number/index.tsx                 | 253 ++++-----
 .../advanced-string/index.tsx                 | 339 +++++------
 src/JsonSchemaEditor/drop-plus/index.tsx      | 165 +++---
 src/JsonSchemaEditor/index.ts                 |   1 -
 .../schema-advanced/index.tsx                 |  40 +-
 src/JsonSchemaEditor/schema-array/index.tsx   | 378 ++++++-------
 src/JsonSchemaEditor/schema-item/index.tsx    | 524 +++++++++---------
 src/JsonSchemaEditor/schema-object/index.tsx  | 177 +++---
 src/JsonSchemaEditor/schema-root/index.tsx    | 232 ++++----
 src/JsonSchemaEditor/state/schema.ts          |  52 +-
 src/JsonSchemaEditor/state/test.ts            | 380 ++++++-------
 src/JsonSchemaEditor/utils.ts                 | 326 +++++------
 src/index.ts                                  |   1 +
 17 files changed, 1535 insertions(+), 1523 deletions(-)
 rename src/{JsonSchemaEditor => }/JsonSchemaEditor.types.ts (100%)
 delete mode 100644 src/JsonSchemaEditor/index.ts
 create mode 100644 src/index.ts

diff --git a/src/JsonSchemaEditor.test.tsx b/src/JsonSchemaEditor.test.tsx
index 8ea2d9e..cc2003b 100644
--- a/src/JsonSchemaEditor.test.tsx
+++ b/src/JsonSchemaEditor.test.tsx
@@ -1,38 +1,38 @@
 import React from "react";
 import { render } from "@testing-library/react";
 
-import JsonSchemaEditor from "./JsonSchemaEditor";
-import { SchemaEditorProps } from "./JsonSchemaEditor/JsonSchemaEditor.types";
+import JsonSchemaEditor from ".";
+import { SchemaEditorProps } from "./JsonSchemaEditor.types";
 
 const printIt = (schema: string) => {
-  console.log(schema);
+	console.log(schema);
 };
 
 describe("JsonSchemaEditor", () => {
-  let props: SchemaEditorProps;
+	let props: SchemaEditorProps;
 
-  beforeEach(() => {
-    props = {
-      onSchemaChange: printIt,
-    };
-  });
+	beforeEach(() => {
+		props = {
+			onSchemaChange: printIt,
+		};
+	});
 
-  const renderComponent = () => render(<JsonSchemaEditor {...props} />);
+	const renderComponent = () => render(<JsonSchemaEditor {...props} />);
 
-  it("should have primary className with default props", () => {
-    renderComponent();
+	it("should have primary className with default props", () => {
+		renderComponent();
 
-    const { container } = renderComponent();
+		const { container } = renderComponent();
 
-    // const testComponent = getByTestId("jsonschema-editor");
-    console.log(container.innerHTML);
+		// const testComponent = getByTestId("jsonschema-editor");
+		console.log(container.innerHTML);
 
-    // expect(testComponent).toHaveClass("test-component-primary");
+		// expect(testComponent).toHaveClass("test-component-primary");
 
-    // console.log(result.asFragment.toString);
-    // // expect(screen.getByText("root")).toBeInTheDocument();
-    // expect(true).toBe(true);
-  });
+		// console.log(result.asFragment.toString);
+		// // expect(screen.getByText("root")).toBeInTheDocument();
+		// expect(true).toBe(true);
+	});
 });
 
 // test("renders learn react link", () => {
diff --git a/src/JsonSchemaEditor/JsonSchemaEditor.types.ts b/src/JsonSchemaEditor.types.ts
similarity index 100%
rename from src/JsonSchemaEditor/JsonSchemaEditor.types.ts
rename to src/JsonSchemaEditor.types.ts
diff --git a/src/JsonSchemaEditor/JsonSchemaEditor.tsx b/src/JsonSchemaEditor/JsonSchemaEditor.tsx
index d0eb0d3..a0ee243 100644
--- a/src/JsonSchemaEditor/JsonSchemaEditor.tsx
+++ b/src/JsonSchemaEditor/JsonSchemaEditor.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState } from "@hookstate/core";
 import { useSchemaState, defaultSchema } from "./state";
-import { SchemaEditorProps } from "./JsonSchemaEditor.types";
+import { SchemaEditorProps } from "../JsonSchemaEditor.types";
 import { Flex, ChakraProvider, theme } from "@chakra-ui/react";
 
 import { SchemaRoot } from "./schema-root";
@@ -9,49 +9,49 @@ import { Whoops } from "./whoops";
 import { SchemaObject } from "./schema-object";
 import { SchemaArray } from "./schema-array";
 
-export * from "./JsonSchemaEditor.types";
+export * from "../JsonSchemaEditor.types";
 
 export const JsonSchemaEditor = (props: SchemaEditorProps) => {
-  const { onSchemaChange, readOnly, data } = props;
+	const { onSchemaChange, readOnly, data } = props;
 
-  const schemaState = useSchemaState({
-    jsonSchema: data ?? defaultSchema(),
-    isReadOnly: readOnly ?? false,
-    fieldId: 0,
-  });
+	const schemaState = useSchemaState({
+		jsonSchema: data ?? defaultSchema(),
+		isReadOnly: readOnly ?? false,
+		fieldId: 0,
+	});
 
-  const jsonSchemaState = useState(schemaState.jsonSchema);
+	const jsonSchemaState = useState(schemaState.jsonSchema);
 
-  return (
-    <ChakraProvider theme={theme}>
-      {schemaState.isValidSchema ? (
-        <Flex m={2} direction="column">
-          <SchemaRoot
-            onSchemaChange={onSchemaChange}
-            schemaState={schemaState.jsonSchema}
-            isReadOnly={schemaState.isReadOnly}
-          />
+	return (
+		<ChakraProvider theme={theme}>
+			{schemaState.isValidSchema ? (
+				<Flex m={2} direction="column">
+					<SchemaRoot
+						onSchemaChange={onSchemaChange}
+						schemaState={schemaState.jsonSchema}
+						isReadOnly={schemaState.isReadOnly}
+					/>
 
-          {jsonSchemaState.type.value === "object" && (
-            <SchemaObject
-              schemaState={jsonSchemaState}
-              isReadOnly={schemaState.isReadOnly ?? false}
-            />
-          )}
+					{jsonSchemaState.type.value === "object" && (
+						<SchemaObject
+							schemaState={jsonSchemaState}
+							isReadOnly={schemaState.isReadOnly ?? false}
+						/>
+					)}
 
-          {jsonSchemaState.type.value === "array" && (
-            <SchemaArray
-              schemaState={jsonSchemaState}
-              isReadOnly={schemaState.isReadOnly ?? false}
-            />
-          )}
-        </Flex>
-      ) : (
-        <Flex alignContent="center" justifyContent="center">
-          <Whoops />
-        </Flex>
-      )}
-      {/* <Modal
+					{jsonSchemaState.type.value === "array" && (
+						<SchemaArray
+							schemaState={jsonSchemaState}
+							isReadOnly={schemaState.isReadOnly ?? false}
+						/>
+					)}
+				</Flex>
+			) : (
+				<Flex alignContent="center" justifyContent="center">
+					<Whoops />
+				</Flex>
+			)}
+			{/* <Modal
         isOpen={localState.isAdvancedOpen.get()}
         finalFocusRef={focusRef}
         size="lg"
@@ -77,6 +77,6 @@ export const JsonSchemaEditor = (props: SchemaEditorProps) => {
           </ModalFooter>
         </ModalContent>
       </Modal> */}
-    </ChakraProvider>
-  );
+		</ChakraProvider>
+	);
 };
diff --git a/src/JsonSchemaEditor/advanced-boolean/index.tsx b/src/JsonSchemaEditor/advanced-boolean/index.tsx
index c136470..f6b0b1a 100644
--- a/src/JsonSchemaEditor/advanced-boolean/index.tsx
+++ b/src/JsonSchemaEditor/advanced-boolean/index.tsx
@@ -1,46 +1,46 @@
 import * as React from "react";
 import { Flex, FormLabel, Stack, Select } from "@chakra-ui/react";
 
-import { AdvancedItemStateProps } from "../JsonSchemaEditor.types";
+import { AdvancedItemStateProps } from "../../JsonSchemaEditor.types";
 import { useState } from "@hookstate/core";
 
 export const AdvancedBoolean: React.FunctionComponent<AdvancedItemStateProps> = (
-  props: React.PropsWithChildren<AdvancedItemStateProps>
+	props: React.PropsWithChildren<AdvancedItemStateProps>
 ) => {
-  const { itemStateProp } = props;
+	const { itemStateProp } = props;
 
-  const item = useState(itemStateProp);
+	const item = useState(itemStateProp);
 
-  return (
-    <Flex direction="column" wrap="nowrap">
-      <Stack
-        isInline
-        alignItems="center"
-        justifyContent="center"
-        alignContent="center"
-        m={1}
-      >
-        <FormLabel mr={2} htmlFor="default">
-          Default:{" "}
-        </FormLabel>
-        <Select
-          variant="outline"
-          value={(item.default.value as string) ?? ""}
-          size="sm"
-          margin={2}
-          placeholder="Choose data type"
-          onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
-            item.default.set(evt.target.value);
-          }}
-        >
-          <option key="true" value="true">
-            true
-          </option>
-          <option key="false" value="false">
-            false
-          </option>
-        </Select>
-      </Stack>
-    </Flex>
-  );
+	return (
+		<Flex direction="column" wrap="nowrap">
+			<Stack
+				isInline
+				alignItems="center"
+				justifyContent="center"
+				alignContent="center"
+				m={1}
+			>
+				<FormLabel mr={2} htmlFor="default">
+					Default:{" "}
+				</FormLabel>
+				<Select
+					variant="outline"
+					value={(item.default.value as string) ?? ""}
+					size="sm"
+					margin={2}
+					placeholder="Choose data type"
+					onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
+						item.default.set(evt.target.value);
+					}}
+				>
+					<option key="true" value="true">
+						true
+					</option>
+					<option key="false" value="false">
+						false
+					</option>
+				</Select>
+			</Stack>
+		</Flex>
+	);
 };
diff --git a/src/JsonSchemaEditor/advanced-number/index.tsx b/src/JsonSchemaEditor/advanced-number/index.tsx
index dd049b5..c9ece6f 100644
--- a/src/JsonSchemaEditor/advanced-number/index.tsx
+++ b/src/JsonSchemaEditor/advanced-number/index.tsx
@@ -1,141 +1,144 @@
 import * as React from "react";
 import {
-  Flex,
-  FormLabel,
-  Stack,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  NumberIncrementStepper,
-  NumberDecrementStepper,
-  Checkbox,
-  Textarea,
+	Flex,
+	FormLabel,
+	Stack,
+	NumberInput,
+	NumberInputField,
+	NumberInputStepper,
+	NumberIncrementStepper,
+	NumberDecrementStepper,
+	Checkbox,
+	Textarea,
 } from "@chakra-ui/react";
 
-import { AdvancedItemStateProps, JSONSchema7 } from "../JsonSchemaEditor.types";
+import {
+	AdvancedItemStateProps,
+	JSONSchema7,
+} from "../../JsonSchemaEditor.types";
 import { none, useState } from "@hookstate/core";
 
 export const AdvancedNumber: React.FunctionComponent<AdvancedItemStateProps> = (
-  props: React.PropsWithChildren<AdvancedItemStateProps>
+	props: React.PropsWithChildren<AdvancedItemStateProps>
 ) => {
-  const { itemStateProp } = props;
+	const { itemStateProp } = props;
 
-  const changeEnumOtherValue = (value: string): string[] | null => {
-    const array = value.split("\n");
-    if (array.length === 0 || (array.length === 1 && !array[0])) {
-      return null;
-    }
+	const changeEnumOtherValue = (value: string): string[] | null => {
+		const array = value.split("\n");
+		if (array.length === 0 || (array.length === 1 && !array[0])) {
+			return null;
+		}
 
-    return array;
-  };
+		return array;
+	};
 
-  const itemState = useState(itemStateProp);
+	const itemState = useState(itemStateProp);
 
-  const isEnumChecked = (itemState.value as JSONSchema7).enum !== undefined;
-  const enumData = (itemState.value as JSONSchema7).enum
-    ? (itemState.enum.value as string[])
-    : [];
-  const enumValue = enumData?.join("\n");
+	const isEnumChecked = (itemState.value as JSONSchema7).enum !== undefined;
+	const enumData = (itemState.value as JSONSchema7).enum
+		? (itemState.enum.value as string[])
+		: [];
+	const enumValue = enumData?.join("\n");
 
-  return (
-    <Flex direction="column" wrap="nowrap">
-      <Stack
-        isInline
-        alignItems="center"
-        justifyContent="center"
-        alignContent="center"
-        m={1}
-      >
-        <FormLabel mr={2}>Default: </FormLabel>
+	return (
+		<Flex direction="column" wrap="nowrap">
+			<Stack
+				isInline
+				alignItems="center"
+				justifyContent="center"
+				alignContent="center"
+				m={1}
+			>
+				<FormLabel mr={2}>Default: </FormLabel>
 
-        <NumberInput
-          size="sm"
-          defaultValue={Number(itemState.default.value)}
-          placeholder="Default value"
-          onChange={(value: number | string) => {
-            itemState.default.set(Number(value));
-          }}
-        >
-          <NumberInputField value={Number(itemState.default.value)} />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
-      </Stack>
+				<NumberInput
+					size="sm"
+					defaultValue={Number(itemState.default.value)}
+					placeholder="Default value"
+					onChange={(value: number | string) => {
+						itemState.default.set(Number(value));
+					}}
+				>
+					<NumberInputField value={Number(itemState.default.value)} />
+					<NumberInputStepper>
+						<NumberIncrementStepper />
+						<NumberDecrementStepper />
+					</NumberInputStepper>
+				</NumberInput>
+			</Stack>
 
-      <Stack
-        isInline
-        alignItems="center"
-        justifyContent="center"
-        alignContent="center"
-        m={1}
-      >
-        <FormLabel mr={2}>Min Value: </FormLabel>
-        <NumberInput
-          size="sm"
-          defaultValue={Number(itemState.minimum.value)}
-          onChange={(value: number | string) => {
-            itemState.minimum.set(Number(value));
-          }}
-        >
-          <NumberInputField value={Number(itemState.minimum.value)} />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
-        <FormLabel mr={2}>Max Value: </FormLabel>
-        <NumberInput
-          size="sm"
-          defaultValue={Number(itemState.maximum.value)}
-          onChange={(value: number | string) => {
-            itemState.maximum.set(Number(value));
-          }}
-        >
-          <NumberInputField value={Number(itemState.maximum.value)} />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
-      </Stack>
-      <Stack
-        isInline
-        alignItems="center"
-        justifyContent="center"
-        alignContent="center"
-        m={1}
-      >
-        <FormLabel mr={2}>Enum: </FormLabel>
-        <Checkbox
-          isChecked={isEnumChecked}
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            if (!evt.target.checked) {
-              itemState.enum.set(none);
-            } else {
-              itemState.enum.set(Array<string>());
-            }
-          }}
-        />
-        <Textarea
-          value={enumValue}
-          isDisabled={!isEnumChecked}
-          placeholder="ENUM Values - One Entry Per Line"
-          type={"number"}
-          onChange={(evt: React.ChangeEvent<HTMLTextAreaElement>) => {
-            const re = /^[0-9\n]+$/;
-            if (evt.target.value === "" || re.test(evt.target.value)) {
-              const update = changeEnumOtherValue(evt.target.value);
-              if (update === null) {
-                itemState.enum.set(none);
-              } else {
-                itemState.enum.set(update as string[]);
-              }
-            }
-          }}
-        />
-      </Stack>
-    </Flex>
-  );
+			<Stack
+				isInline
+				alignItems="center"
+				justifyContent="center"
+				alignContent="center"
+				m={1}
+			>
+				<FormLabel mr={2}>Min Value: </FormLabel>
+				<NumberInput
+					size="sm"
+					defaultValue={Number(itemState.minimum.value)}
+					onChange={(value: number | string) => {
+						itemState.minimum.set(Number(value));
+					}}
+				>
+					<NumberInputField value={Number(itemState.minimum.value)} />
+					<NumberInputStepper>
+						<NumberIncrementStepper />
+						<NumberDecrementStepper />
+					</NumberInputStepper>
+				</NumberInput>
+				<FormLabel mr={2}>Max Value: </FormLabel>
+				<NumberInput
+					size="sm"
+					defaultValue={Number(itemState.maximum.value)}
+					onChange={(value: number | string) => {
+						itemState.maximum.set(Number(value));
+					}}
+				>
+					<NumberInputField value={Number(itemState.maximum.value)} />
+					<NumberInputStepper>
+						<NumberIncrementStepper />
+						<NumberDecrementStepper />
+					</NumberInputStepper>
+				</NumberInput>
+			</Stack>
+			<Stack
+				isInline
+				alignItems="center"
+				justifyContent="center"
+				alignContent="center"
+				m={1}
+			>
+				<FormLabel mr={2}>Enum: </FormLabel>
+				<Checkbox
+					isChecked={isEnumChecked}
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						if (!evt.target.checked) {
+							itemState.enum.set(none);
+						} else {
+							itemState.enum.set(Array<string>());
+						}
+					}}
+				/>
+				<Textarea
+					value={enumValue}
+					isDisabled={!isEnumChecked}
+					placeholder="ENUM Values - One Entry Per Line"
+					type={"number"}
+					onChange={(evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+						const re = /^[0-9\n]+$/;
+						if (evt.target.value === "" || re.test(evt.target.value)) {
+							const update = changeEnumOtherValue(evt.target.value);
+							if (update === null) {
+								itemState.enum.set(none);
+							} else {
+								itemState.enum.set(update as string[]);
+							}
+						}
+					}}
+				/>
+			</Stack>
+		</Flex>
+	);
 };
diff --git a/src/JsonSchemaEditor/advanced-string/index.tsx b/src/JsonSchemaEditor/advanced-string/index.tsx
index a0bf293..f011528 100644
--- a/src/JsonSchemaEditor/advanced-string/index.tsx
+++ b/src/JsonSchemaEditor/advanced-string/index.tsx
@@ -1,184 +1,187 @@
 import * as React from "react";
 import {
-  Flex,
-  Input,
-  FormLabel,
-  Stack,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  NumberIncrementStepper,
-  NumberDecrementStepper,
-  Checkbox,
-  Textarea,
-  Select,
+	Flex,
+	Input,
+	FormLabel,
+	Stack,
+	NumberInput,
+	NumberInputField,
+	NumberInputStepper,
+	NumberIncrementStepper,
+	NumberDecrementStepper,
+	Checkbox,
+	Textarea,
+	Select,
 } from "@chakra-ui/react";
-import { AdvancedItemStateProps, JSONSchema7 } from "../JsonSchemaEditor.types";
+import {
+	AdvancedItemStateProps,
+	JSONSchema7,
+} from "../../JsonSchemaEditor.types";
 import { none, useState } from "@hookstate/core";
 import { StringFormat } from "../utils";
 
 export const AdvancedString: React.FunctionComponent<AdvancedItemStateProps> = (
-  props: React.PropsWithChildren<AdvancedItemStateProps>
+	props: React.PropsWithChildren<AdvancedItemStateProps>
 ) => {
-  const { itemStateProp } = props;
+	const { itemStateProp } = props;
 
-  const changeEnumOtherValue = (value: string): string[] | null => {
-    const array = value.split("\n");
-    if (array.length === 0 || (array.length === 1 && !array[0])) {
-      return null;
-    }
+	const changeEnumOtherValue = (value: string): string[] | null => {
+		const array = value.split("\n");
+		if (array.length === 0 || (array.length === 1 && !array[0])) {
+			return null;
+		}
 
-    return array;
-  };
+		return array;
+	};
 
-  const itemState = useState(itemStateProp);
+	const itemState = useState(itemStateProp);
 
-  const isEnumChecked = (itemState.value as JSONSchema7).enum !== undefined;
-  const enumData = (itemState.value as JSONSchema7).enum
-    ? (itemState.enum.value as string[])
-    : [];
-  const enumValue = enumData?.join("\n");
+	const isEnumChecked = (itemState.value as JSONSchema7).enum !== undefined;
+	const enumData = (itemState.value as JSONSchema7).enum
+		? (itemState.enum.value as string[])
+		: [];
+	const enumValue = enumData?.join("\n");
 
-  return (
-    <Flex direction="column" wrap="nowrap">
-      <Stack
-        isInline
-        alignItems="center"
-        justifyContent="center"
-        alignContent="center"
-        m={1}
-      >
-        <FormLabel mr={2}>Default: </FormLabel>
-        <Input
-          id="default"
-          placeholder="Default value"
-          value={(itemState.default.value as string) ?? ""}
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            itemState.default.set(evt.target.value);
-          }}
-        />
-      </Stack>
+	return (
+		<Flex direction="column" wrap="nowrap">
+			<Stack
+				isInline
+				alignItems="center"
+				justifyContent="center"
+				alignContent="center"
+				m={1}
+			>
+				<FormLabel mr={2}>Default: </FormLabel>
+				<Input
+					id="default"
+					placeholder="Default value"
+					value={(itemState.default.value as string) ?? ""}
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						itemState.default.set(evt.target.value);
+					}}
+				/>
+			</Stack>
 
-      <Stack
-        isInline
-        alignItems="center"
-        justifyContent="center"
-        alignContent="center"
-        m={1}
-      >
-        <FormLabel mr={2}>Min Length: </FormLabel>
-        <NumberInput
-          size="sm"
-          defaultValue={Number(itemState.minLength.value)}
-          onChange={(value: number | string) => {
-            itemState.minLength.set(Number(value));
-          }}
-        >
-          <NumberInputField value={Number(itemState.minLength.value)} />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
-        <FormLabel mr={2}>Max Length: </FormLabel>
-        <NumberInput
-          size="sm"
-          onChange={(value: number | string) => {
-            itemState.maxLength.set(Number(value));
-          }}
-        >
-          <NumberInputField value={Number(itemState.maxLength.value)} />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
-      </Stack>
-      <Stack
-        isInline
-        alignItems="center"
-        justifyContent="center"
-        alignContent="center"
-        m={1}
-      >
-        <FormLabel mr={2} htmlFor="pattern">
-          Pattern:{" "}
-        </FormLabel>
-        <Input
-          id="pattern"
-          placeholder="MUST be a valid regular expression."
-          value={itemState.pattern.value ?? ""}
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            itemState.pattern.set(evt.target.value);
-          }}
-        />
-      </Stack>
+			<Stack
+				isInline
+				alignItems="center"
+				justifyContent="center"
+				alignContent="center"
+				m={1}
+			>
+				<FormLabel mr={2}>Min Length: </FormLabel>
+				<NumberInput
+					size="sm"
+					defaultValue={Number(itemState.minLength.value)}
+					onChange={(value: number | string) => {
+						itemState.minLength.set(Number(value));
+					}}
+				>
+					<NumberInputField value={Number(itemState.minLength.value)} />
+					<NumberInputStepper>
+						<NumberIncrementStepper />
+						<NumberDecrementStepper />
+					</NumberInputStepper>
+				</NumberInput>
+				<FormLabel mr={2}>Max Length: </FormLabel>
+				<NumberInput
+					size="sm"
+					onChange={(value: number | string) => {
+						itemState.maxLength.set(Number(value));
+					}}
+				>
+					<NumberInputField value={Number(itemState.maxLength.value)} />
+					<NumberInputStepper>
+						<NumberIncrementStepper />
+						<NumberDecrementStepper />
+					</NumberInputStepper>
+				</NumberInput>
+			</Stack>
+			<Stack
+				isInline
+				alignItems="center"
+				justifyContent="center"
+				alignContent="center"
+				m={1}
+			>
+				<FormLabel mr={2} htmlFor="pattern">
+					Pattern:{" "}
+				</FormLabel>
+				<Input
+					id="pattern"
+					placeholder="MUST be a valid regular expression."
+					value={itemState.pattern.value ?? ""}
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						itemState.pattern.set(evt.target.value);
+					}}
+				/>
+			</Stack>
 
-      <Stack
-        isInline
-        alignItems="center"
-        justifyContent="center"
-        alignContent="center"
-        m={1}
-      >
-        <FormLabel mr={2}>Enum: </FormLabel>
-        <Checkbox
-          isChecked={isEnumChecked}
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            if (!evt.target.checked) {
-              itemState.enum.set(none);
-            } else {
-              itemState.enum.set(Array<string>());
-            }
-          }}
-        />
-        <Textarea
-          value={enumValue || ""}
-          isDisabled={!isEnumChecked}
-          placeholder="ENUM Values - One Entry Per Line"
-          onChange={(evt: React.ChangeEvent<HTMLTextAreaElement>) => {
-            const update = changeEnumOtherValue(evt.target.value);
-            if (update === null) {
-              itemState.enum.set(none);
-            } else {
-              itemState.enum.set(update as string[]);
-            }
-          }}
-        />
-      </Stack>
-      <Stack
-        isInline
-        alignItems="center"
-        justifyContent="center"
-        alignContent="center"
-        m={1}
-      >
-        <FormLabel mr={2} htmlFor="format">
-          Format:{" "}
-        </FormLabel>
-        <Select
-          variant="outline"
-          value={itemState.format.value ?? ""}
-          size="sm"
-          margin={2}
-          placeholder="Choose data type"
-          onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
-            if (evt.target.value === "") {
-              itemState.format.set(none);
-            } else {
-              itemState.format.set(evt.target.value);
-            }
-          }}
-        >
-          {StringFormat.map((item, index) => {
-            return (
-              <option key={String(index)} value={item.name}>
-                {item.name}
-              </option>
-            );
-          })}
-        </Select>
-      </Stack>
-    </Flex>
-  );
+			<Stack
+				isInline
+				alignItems="center"
+				justifyContent="center"
+				alignContent="center"
+				m={1}
+			>
+				<FormLabel mr={2}>Enum: </FormLabel>
+				<Checkbox
+					isChecked={isEnumChecked}
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						if (!evt.target.checked) {
+							itemState.enum.set(none);
+						} else {
+							itemState.enum.set(Array<string>());
+						}
+					}}
+				/>
+				<Textarea
+					value={enumValue || ""}
+					isDisabled={!isEnumChecked}
+					placeholder="ENUM Values - One Entry Per Line"
+					onChange={(evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+						const update = changeEnumOtherValue(evt.target.value);
+						if (update === null) {
+							itemState.enum.set(none);
+						} else {
+							itemState.enum.set(update as string[]);
+						}
+					}}
+				/>
+			</Stack>
+			<Stack
+				isInline
+				alignItems="center"
+				justifyContent="center"
+				alignContent="center"
+				m={1}
+			>
+				<FormLabel mr={2} htmlFor="format">
+					Format:{" "}
+				</FormLabel>
+				<Select
+					variant="outline"
+					value={itemState.format.value ?? ""}
+					size="sm"
+					margin={2}
+					placeholder="Choose data type"
+					onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
+						if (evt.target.value === "") {
+							itemState.format.set(none);
+						} else {
+							itemState.format.set(evt.target.value);
+						}
+					}}
+				>
+					{StringFormat.map((item, index) => {
+						return (
+							<option key={String(index)} value={item.name}>
+								{item.name}
+							</option>
+						);
+					})}
+				</Select>
+			</Stack>
+		</Flex>
+	);
 };
diff --git a/src/JsonSchemaEditor/drop-plus/index.tsx b/src/JsonSchemaEditor/drop-plus/index.tsx
index 01a8588..c5c13b8 100644
--- a/src/JsonSchemaEditor/drop-plus/index.tsx
+++ b/src/JsonSchemaEditor/drop-plus/index.tsx
@@ -1,98 +1,101 @@
 import * as React from "react";
 import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  Stack,
-  FlexProps,
-  IconButton,
-  Button,
+	Popover,
+	PopoverTrigger,
+	PopoverContent,
+	Stack,
+	FlexProps,
+	IconButton,
+	Button,
 } from "@chakra-ui/react";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import { DataType, getDefaultSchema } from "../utils";
 import { State, useState } from "@hookstate/core";
-import { JSONSchema7, JSONSchema7Definition } from "../JsonSchemaEditor.types";
+import {
+	JSONSchema7,
+	JSONSchema7Definition,
+} from "../../JsonSchemaEditor.types";
 import { random } from "../utils";
 export interface DropPlusProps extends FlexProps {
-  itemStateProp: State<JSONSchema7>;
-  parentStateProp: State<JSONSchema7>;
-  isDisabled: boolean;
+	itemStateProp: State<JSONSchema7>;
+	parentStateProp: State<JSONSchema7>;
+	isDisabled: boolean;
 }
 export const DropPlus: React.FunctionComponent<DropPlusProps> = (
-  props: React.PropsWithChildren<DropPlusProps>
+	props: React.PropsWithChildren<DropPlusProps>
 ) => {
-  const itemState = useState(props.itemStateProp);
-  const parentState = useState(props.parentStateProp);
-  const parentStateOrNull: State<JSONSchema7> | undefined = parentState.ornull;
-  const propertiesOrNull:
-    | State<{
-        [key: string]: JSONSchema7Definition;
-      }>
-    | undefined = parentStateOrNull.properties.ornull;
+	const itemState = useState(props.itemStateProp);
+	const parentState = useState(props.parentStateProp);
+	const parentStateOrNull: State<JSONSchema7> | undefined = parentState.ornull;
+	const propertiesOrNull:
+		| State<{
+				[key: string]: JSONSchema7Definition;
+		  }>
+		| undefined = parentStateOrNull.properties.ornull;
 
-  const itemPropertiesOrNull:
-    | State<{
-        [key: string]: JSONSchema7Definition;
-      }>
-    | undefined = itemState.properties.ornull;
+	const itemPropertiesOrNull:
+		| State<{
+				[key: string]: JSONSchema7Definition;
+		  }>
+		| undefined = itemState.properties.ornull;
 
-  if (props.isDisabled) {
-    return <div />;
-  }
+	if (props.isDisabled) {
+		return <div />;
+	}
 
-  if (!parentStateOrNull) {
-    return <></>;
-  }
+	if (!parentStateOrNull) {
+		return <></>;
+	}
 
-  return (
-    <Popover trigger="hover">
-      <PopoverTrigger>
-        <IconButton
-          isRound
-          size="sm"
-          mt={2}
-          mb={2}
-          mr={2}
-          variant="link"
-          colorScheme="green"
-          fontSize="16px"
-          icon={<IoIosAddCircleOutline />}
-          aria-label="Add Child Node"
-        />
-      </PopoverTrigger>
+	return (
+		<Popover trigger="hover">
+			<PopoverTrigger>
+				<IconButton
+					isRound
+					size="sm"
+					mt={2}
+					mb={2}
+					mr={2}
+					variant="link"
+					colorScheme="green"
+					fontSize="16px"
+					icon={<IoIosAddCircleOutline />}
+					aria-label="Add Child Node"
+				/>
+			</PopoverTrigger>
 
-      <PopoverContent border="0" zIndex={4} width="100px" color="white">
-        <Stack>
-          <Button
-            colorScheme="blue"
-            variant="outline"
-            size="xs"
-            onClick={() => {
-              const fieldName = `field_${random()}`;
-              propertiesOrNull
-                ?.nested(fieldName)
-                .set(getDefaultSchema(DataType.string) as JSONSchema7);
-            }}
-          >
-            Sibling Node
-          </Button>
-          <Button
-            size="xs"
-            colorScheme="orange"
-            variant="outline"
-            onClick={() => {
-              if (itemState.properties) {
-                const fieldName = `field_${random()}`;
-                itemPropertiesOrNull
-                  ?.nested(fieldName)
-                  .set(getDefaultSchema(DataType.string) as JSONSchema7);
-              }
-            }}
-          >
-            Child Node
-          </Button>
-        </Stack>
-      </PopoverContent>
-    </Popover>
-  );
+			<PopoverContent border="0" zIndex={4} width="100px" color="white">
+				<Stack>
+					<Button
+						colorScheme="blue"
+						variant="outline"
+						size="xs"
+						onClick={() => {
+							const fieldName = `field_${random()}`;
+							propertiesOrNull
+								?.nested(fieldName)
+								.set(getDefaultSchema(DataType.string) as JSONSchema7);
+						}}
+					>
+						Sibling Node
+					</Button>
+					<Button
+						size="xs"
+						colorScheme="orange"
+						variant="outline"
+						onClick={() => {
+							if (itemState.properties) {
+								const fieldName = `field_${random()}`;
+								itemPropertiesOrNull
+									?.nested(fieldName)
+									.set(getDefaultSchema(DataType.string) as JSONSchema7);
+							}
+						}}
+					>
+						Child Node
+					</Button>
+				</Stack>
+			</PopoverContent>
+		</Popover>
+	);
 };
diff --git a/src/JsonSchemaEditor/index.ts b/src/JsonSchemaEditor/index.ts
deleted file mode 100644
index 463b721..0000000
--- a/src/JsonSchemaEditor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { JsonSchemaEditor as default } from "./JsonSchemaEditor";
diff --git a/src/JsonSchemaEditor/schema-advanced/index.tsx b/src/JsonSchemaEditor/schema-advanced/index.tsx
index b58d1ee..cf2af20 100644
--- a/src/JsonSchemaEditor/schema-advanced/index.tsx
+++ b/src/JsonSchemaEditor/schema-advanced/index.tsx
@@ -3,33 +3,33 @@ import { Flex } from "@chakra-ui/react";
 import { AdvancedString } from "../advanced-string";
 import { AdvancedNumber } from "../advanced-number";
 import { AdvancedBoolean } from "../advanced-boolean";
-import { JSONSchema7 } from "../JsonSchemaEditor.types";
+import { JSONSchema7 } from "../../JsonSchemaEditor.types";
 import { State, useState } from "@hookstate/core";
 
 export interface AdvancedSettingsProps {
-  itemStateProp: State<JSONSchema7>;
+	itemStateProp: State<JSONSchema7>;
 }
 
 export const AdvancedSettings: React.FunctionComponent<AdvancedSettingsProps> = (
-  props: React.PropsWithChildren<AdvancedSettingsProps>
+	props: React.PropsWithChildren<AdvancedSettingsProps>
 ) => {
-  const itemState = useState(props.itemStateProp);
+	const itemState = useState(props.itemStateProp);
 
-  const getAdvancedView = (
-    item: State<JSONSchema7>
-  ): JSX.Element | undefined => {
-    switch (itemState.type.value) {
-      case "string":
-        return <AdvancedString itemStateProp={item} />;
-      case "number":
-      case "integer":
-        return <AdvancedNumber itemStateProp={item} />;
-      case "boolean":
-        return <AdvancedBoolean itemStateProp={item} />;
-      default:
-        return undefined;
-    }
-  };
+	const getAdvancedView = (
+		item: State<JSONSchema7>
+	): JSX.Element | undefined => {
+		switch (itemState.type.value) {
+			case "string":
+				return <AdvancedString itemStateProp={item} />;
+			case "number":
+			case "integer":
+				return <AdvancedNumber itemStateProp={item} />;
+			case "boolean":
+				return <AdvancedBoolean itemStateProp={item} />;
+			default:
+				return undefined;
+		}
+	};
 
-  return <Flex>{getAdvancedView(itemState)}</Flex>;
+	return <Flex>{getAdvancedView(itemState)}</Flex>;
 };
diff --git a/src/JsonSchemaEditor/schema-array/index.tsx b/src/JsonSchemaEditor/schema-array/index.tsx
index 851109b..4704db1 100644
--- a/src/JsonSchemaEditor/schema-array/index.tsx
+++ b/src/JsonSchemaEditor/schema-array/index.tsx
@@ -1,215 +1,215 @@
 import * as React from "react";
 import {
-  Flex,
-  Input,
-  Checkbox,
-  FlexProps,
-  Select,
-  IconButton,
-  Tooltip,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Button,
+	Flex,
+	Input,
+	Checkbox,
+	FlexProps,
+	Select,
+	IconButton,
+	Tooltip,
+	Modal,
+	ModalOverlay,
+	ModalContent,
+	ModalHeader,
+	ModalBody,
+	ModalFooter,
+	Button,
 } from "@chakra-ui/react";
 import { useState, State } from "@hookstate/core";
-import { JSONSchema7, JSONSchema7TypeName } from "../JsonSchemaEditor.types";
+import { JSONSchema7, JSONSchema7TypeName } from "../../JsonSchemaEditor.types";
 import { FiSettings } from "react-icons/fi";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import {
-  SchemaTypes,
-  getDefaultSchema,
-  DataType,
-  handleTypeChange,
-  random,
+	SchemaTypes,
+	getDefaultSchema,
+	DataType,
+	handleTypeChange,
+	random,
 } from "../utils";
 
 import { SchemaObject } from "../schema-object";
 import { AdvancedSettings } from "../schema-advanced";
 export interface SchemaArrayProps extends FlexProps {
-  schemaState: State<JSONSchema7>;
-  isReadOnly: State<boolean>;
+	schemaState: State<JSONSchema7>;
+	isReadOnly: State<boolean>;
 }
 export const SchemaArray: React.FunctionComponent<SchemaArrayProps> = (
-  props: React.PropsWithChildren<SchemaArrayProps>
+	props: React.PropsWithChildren<SchemaArrayProps>
 ) => {
-  const { schemaState, isReadOnly } = props;
+	const { schemaState, isReadOnly } = props;
 
-  const state = useState(schemaState.items as JSONSchema7);
-  const isReadOnlyState = useState(isReadOnly);
+	const state = useState(schemaState.items as JSONSchema7);
+	const isReadOnlyState = useState(isReadOnly);
 
-  const { length } = state.path.filter((name) => name !== "properties");
-  const tagPaddingLeftStyle = {
-    paddingLeft: `${20 * (length + 1)}px`,
-  };
+	const { length } = state.path.filter((name) => name !== "properties");
+	const tagPaddingLeftStyle = {
+		paddingLeft: `${20 * (length + 1)}px`,
+	};
 
-  const onCloseAdvanced = (): void => {
-    localState.isAdvancedOpen.set(false);
-  };
+	const onCloseAdvanced = (): void => {
+		localState.isAdvancedOpen.set(false);
+	};
 
-  const showadvanced = (): void => {
-    localState.isAdvancedOpen.set(true);
-  };
+	const showadvanced = (): void => {
+		localState.isAdvancedOpen.set(true);
+	};
 
-  const focusRef = React.createRef<HTMLElement>();
+	const focusRef = React.createRef<HTMLElement>();
 
-  const localState = useState({
-    isAdvancedOpen: false,
-  });
+	const localState = useState({
+		isAdvancedOpen: false,
+	});
 
-  return (
-    <>
-      <Flex
-        direction="row"
-        wrap="nowrap"
-        className="array-item"
-        mt={2}
-        mr={5}
-        style={tagPaddingLeftStyle}
-      >
-        <Input
-          key="Items"
-          isDisabled
-          value="Items"
-          size="sm"
-          flexShrink={1}
-          margin={2}
-          variant="outline"
-        />
-        <Checkbox isDisabled margin={2} colorScheme="blue" />
-        <Select
-          variant="outline"
-          isDisabled={isReadOnlyState.value}
-          value={state.type.value as JSONSchema7TypeName}
-          size="sm"
-          margin={2}
-          placeholder="Choose data type"
-          onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
-            const newSchema = handleTypeChange(
-              evt.target.value as JSONSchema7TypeName,
-              false
-            );
-            state.set(newSchema as JSONSchema7);
-          }}
-        >
-          {SchemaTypes.map((item, index) => {
-            return (
-              <option key={String(index)} value={item}>
-                {item}
-              </option>
-            );
-          })}
-        </Select>
-        <Input
-          value={state.title.value}
-          isDisabled={isReadOnlyState.value}
-          size="sm"
-          margin={2}
-          variant="outline"
-          placeholder="Add Title"
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            state.title.set(evt.target.value);
-          }}
-        />
-        <Input
-          value={state.description.value}
-          isDisabled={isReadOnlyState.value}
-          size="sm"
-          margin={2}
-          variant="outline"
-          placeholder="Add Description"
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            state.description.set(evt.target.value);
-          }}
-        />
-        <Tooltip
-          hasArrow
-          aria-label="Advanced Settings"
-          label="Advanced Settings"
-          placement="top"
-        >
-          <IconButton
-            isRound
-            isDisabled={isReadOnlyState.value}
-            size="sm"
-            mt={2}
-            mb={2}
-            ml={1}
-            variant="link"
-            colorScheme="blue"
-            fontSize="16px"
-            icon={<FiSettings />}
-            aria-label="Advanced Settings"
-            onClick={() => {
-              showadvanced();
-            }}
-          />
-        </Tooltip>
+	return (
+		<>
+			<Flex
+				direction="row"
+				wrap="nowrap"
+				className="array-item"
+				mt={2}
+				mr={5}
+				style={tagPaddingLeftStyle}
+			>
+				<Input
+					key="Items"
+					isDisabled
+					value="Items"
+					size="sm"
+					flexShrink={1}
+					margin={2}
+					variant="outline"
+				/>
+				<Checkbox isDisabled margin={2} colorScheme="blue" />
+				<Select
+					variant="outline"
+					isDisabled={isReadOnlyState.value}
+					value={state.type.value as JSONSchema7TypeName}
+					size="sm"
+					margin={2}
+					placeholder="Choose data type"
+					onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
+						const newSchema = handleTypeChange(
+							evt.target.value as JSONSchema7TypeName,
+							false
+						);
+						state.set(newSchema as JSONSchema7);
+					}}
+				>
+					{SchemaTypes.map((item, index) => {
+						return (
+							<option key={String(index)} value={item}>
+								{item}
+							</option>
+						);
+					})}
+				</Select>
+				<Input
+					value={state.title.value}
+					isDisabled={isReadOnlyState.value}
+					size="sm"
+					margin={2}
+					variant="outline"
+					placeholder="Add Title"
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						state.title.set(evt.target.value);
+					}}
+				/>
+				<Input
+					value={state.description.value}
+					isDisabled={isReadOnlyState.value}
+					size="sm"
+					margin={2}
+					variant="outline"
+					placeholder="Add Description"
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						state.description.set(evt.target.value);
+					}}
+				/>
+				<Tooltip
+					hasArrow
+					aria-label="Advanced Settings"
+					label="Advanced Settings"
+					placement="top"
+				>
+					<IconButton
+						isRound
+						isDisabled={isReadOnlyState.value}
+						size="sm"
+						mt={2}
+						mb={2}
+						ml={1}
+						variant="link"
+						colorScheme="blue"
+						fontSize="16px"
+						icon={<FiSettings />}
+						aria-label="Advanced Settings"
+						onClick={() => {
+							showadvanced();
+						}}
+					/>
+				</Tooltip>
 
-        {state.type.value === "object" && (
-          <Tooltip
-            hasArrow
-            aria-label="Add Child Node"
-            label="Add Child Node"
-            placement="top"
-          >
-            <IconButton
-              isRound
-              isDisabled={isReadOnlyState.value}
-              size="sm"
-              mt={2}
-              mb={2}
-              mr={2}
-              variant="link"
-              colorScheme="green"
-              fontSize="16px"
-              icon={<IoIosAddCircleOutline />}
-              aria-label="Add Child Node"
-              onClick={() => {
-                const fieldName = `field_${random()}`;
-                (state.properties as State<{
-                  [key: string]: JSONSchema7;
-                }>)[fieldName].set(getDefaultSchema(DataType.string));
-              }}
-            />
-          </Tooltip>
-        )}
-      </Flex>
-      {state.type?.value === "object" && (
-        <SchemaObject isReadOnly={isReadOnlyState} schemaState={state} />
-      )}
-      {state.type?.value === "array" && (
-        <SchemaArray isReadOnly={isReadOnlyState} schemaState={state} />
-      )}
-      <Modal
-        isOpen={localState.isAdvancedOpen.get()}
-        finalFocusRef={focusRef}
-        size="lg"
-        onClose={onCloseAdvanced}
-      >
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader textAlign="center">Advanced Schema Settings</ModalHeader>
+				{state.type.value === "object" && (
+					<Tooltip
+						hasArrow
+						aria-label="Add Child Node"
+						label="Add Child Node"
+						placement="top"
+					>
+						<IconButton
+							isRound
+							isDisabled={isReadOnlyState.value}
+							size="sm"
+							mt={2}
+							mb={2}
+							mr={2}
+							variant="link"
+							colorScheme="green"
+							fontSize="16px"
+							icon={<IoIosAddCircleOutline />}
+							aria-label="Add Child Node"
+							onClick={() => {
+								const fieldName = `field_${random()}`;
+								(state.properties as State<{
+									[key: string]: JSONSchema7;
+								}>)[fieldName].set(getDefaultSchema(DataType.string));
+							}}
+						/>
+					</Tooltip>
+				)}
+			</Flex>
+			{state.type?.value === "object" && (
+				<SchemaObject isReadOnly={isReadOnlyState} schemaState={state} />
+			)}
+			{state.type?.value === "array" && (
+				<SchemaArray isReadOnly={isReadOnlyState} schemaState={state} />
+			)}
+			<Modal
+				isOpen={localState.isAdvancedOpen.get()}
+				finalFocusRef={focusRef}
+				size="lg"
+				onClose={onCloseAdvanced}
+			>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader textAlign="center">Advanced Schema Settings</ModalHeader>
 
-          <ModalBody>
-            <AdvancedSettings itemStateProp={state} />
-          </ModalBody>
+					<ModalBody>
+						<AdvancedSettings itemStateProp={state} />
+					</ModalBody>
 
-          <ModalFooter>
-            <Button
-              colorScheme="blue"
-              variant="ghost"
-              mr={3}
-              onClick={onCloseAdvanced}
-            >
-              Close
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
+					<ModalFooter>
+						<Button
+							colorScheme="blue"
+							variant="ghost"
+							mr={3}
+							onClick={onCloseAdvanced}
+						>
+							Close
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
 };
diff --git a/src/JsonSchemaEditor/schema-item/index.tsx b/src/JsonSchemaEditor/schema-item/index.tsx
index 21f2dd9..fe27156 100644
--- a/src/JsonSchemaEditor/schema-item/index.tsx
+++ b/src/JsonSchemaEditor/schema-item/index.tsx
@@ -1,13 +1,13 @@
 import * as React from "react";
 import {
-  Flex,
-  Input,
-  Checkbox,
-  FlexProps,
-  Select,
-  Tooltip,
-  IconButton,
-  useToast,
+	Flex,
+	Input,
+	Checkbox,
+	FlexProps,
+	Select,
+	Tooltip,
+	IconButton,
+	useToast,
 } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
 import { IoIosAddCircleOutline } from "react-icons/io";
@@ -15,16 +15,16 @@ import { AiOutlineDelete } from "react-icons/ai";
 import { DropPlus } from "../drop-plus";
 import { useState, State, none } from "@hookstate/core";
 import {
-  JSONSchema7,
-  JSONSchema7Definition,
-  JSONSchema7TypeName,
-} from "../JsonSchemaEditor.types";
+	JSONSchema7,
+	JSONSchema7Definition,
+	JSONSchema7TypeName,
+} from "../../JsonSchemaEditor.types";
 import {
-  getDefaultSchema,
-  DataType,
-  SchemaTypes,
-  random,
-  handleTypeChange,
+	getDefaultSchema,
+	DataType,
+	SchemaTypes,
+	random,
+	handleTypeChange,
 } from "../utils";
 import { renameKeys, deleteKey } from "../utils";
 import { useDebouncedCallback } from "use-debounce";
@@ -32,265 +32,265 @@ import { SchemaObject } from "../schema-object";
 import { SchemaArray } from "../schema-array";
 
 export interface SchemaItemProps extends FlexProps {
-  required: string[];
-  itemStateProp: State<JSONSchema7>;
-  parentStateProp: State<JSONSchema7>;
-  name: string;
-  isReadOnly: State<boolean>;
-  showadvanced: (item: State<JSONSchema7>) => void;
+	required: string[];
+	itemStateProp: State<JSONSchema7>;
+	parentStateProp: State<JSONSchema7>;
+	name: string;
+	isReadOnly: State<boolean>;
+	showadvanced: (item: State<JSONSchema7>) => void;
 }
 
 export const SchemaItem: React.FunctionComponent<SchemaItemProps> = (
-  props: React.PropsWithChildren<SchemaItemProps>
+	props: React.PropsWithChildren<SchemaItemProps>
 ) => {
-  const {
-    name,
-    itemStateProp,
-    showadvanced,
-    required,
-    parentStateProp,
-    isReadOnly,
-  } = props;
+	const {
+		name,
+		itemStateProp,
+		showadvanced,
+		required,
+		parentStateProp,
+		isReadOnly,
+	} = props;
 
-  // const itemState = useState(itemStateProp);
-  const parentState = useState(parentStateProp);
-  const parentStateOrNull: State<JSONSchema7> | undefined = parentState.ornull;
-  const propertiesOrNull:
-    | State<{
-        [key: string]: JSONSchema7Definition;
-      }>
-    | undefined = parentStateOrNull.properties.ornull;
+	// const itemState = useState(itemStateProp);
+	const parentState = useState(parentStateProp);
+	const parentStateOrNull: State<JSONSchema7> | undefined = parentState.ornull;
+	const propertiesOrNull:
+		| State<{
+				[key: string]: JSONSchema7Definition;
+		  }>
+		| undefined = parentStateOrNull.properties.ornull;
 
-  const nameState = useState(name);
-  const isReadOnlyState = useState(isReadOnly);
+	const nameState = useState(name);
+	const isReadOnlyState = useState(isReadOnly);
 
-  const itemState = useState(
-    (parentStateProp.properties as State<{
-      [key: string]: JSONSchema7;
-    }>).nested(nameState.value)
-  );
+	const itemState = useState(
+		(parentStateProp.properties as State<{
+			[key: string]: JSONSchema7;
+		}>).nested(nameState.value)
+	);
 
-  const { length } = parentState.path.filter((name) => name !== "properties");
-  const tagPaddingLeftStyle = {
-    paddingLeft: `${20 * (length + 1)}px`,
-  };
+	const { length } = parentState.path.filter((name) => name !== "properties");
+	const tagPaddingLeftStyle = {
+		paddingLeft: `${20 * (length + 1)}px`,
+	};
 
-  const isRequired = required
-    ? required.length > 0 && required.includes(name)
-    : false;
-  const toast = useToast();
+	const isRequired = required
+		? required.length > 0 && required.includes(name)
+		: false;
+	const toast = useToast();
 
-  // Debounce callback
-  const debounced = useDebouncedCallback(
-    // function
-    (newValue: string) => {
-      // Todo: make toast for duplicate properties
-      if (propertiesOrNull && propertiesOrNull[newValue].value) {
-        toast({
-          title: "Duplicate Property",
-          description: "Property already exists!",
-          status: "error",
-          duration: 1000,
-          isClosable: true,
-          position: "top",
-        });
-      } else {
-        const oldName = name;
-        const proptoupdate = newValue;
+	// Debounce callback
+	const debounced = useDebouncedCallback(
+		// function
+		(newValue: string) => {
+			// Todo: make toast for duplicate properties
+			if (propertiesOrNull && propertiesOrNull[newValue].value) {
+				toast({
+					title: "Duplicate Property",
+					description: "Property already exists!",
+					status: "error",
+					duration: 1000,
+					isClosable: true,
+					position: "top",
+				});
+			} else {
+				const oldName = name;
+				const proptoupdate = newValue;
 
-        const newobj = renameKeys(
-          { [oldName]: proptoupdate },
-          parentState.properties.value
-        );
-        parentStateOrNull.properties.set(JSON.parse(JSON.stringify(newobj)));
-      }
-    },
-    // delay in ms
-    1000
-  );
+				const newobj = renameKeys(
+					{ [oldName]: proptoupdate },
+					parentState.properties.value
+				);
+				parentStateOrNull.properties.set(JSON.parse(JSON.stringify(newobj)));
+			}
+		},
+		// delay in ms
+		1000
+	);
 
-  if (!itemState.value) {
-    return <></>;
-  }
+	if (!itemState.value) {
+		return <></>;
+	}
 
-  return (
-    <div>
-      <Flex
-        alignContent="space-evenly"
-        direction="row"
-        wrap="nowrap"
-        className="schema-item"
-        style={tagPaddingLeftStyle}
-      >
-        <Input
-          isDisabled={isReadOnlyState.value}
-          defaultValue={nameState.value}
-          size="sm"
-          margin={2}
-          variant="outline"
-          placeholder="Enter property name"
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            debounced(evt.target.value);
-          }}
-        />
-        <Checkbox
-          isDisabled={isReadOnlyState.value}
-          isChecked={isRequired}
-          margin={2}
-          colorScheme="blue"
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            if (!evt.target.checked && required.includes(name)) {
-              (parentState.required as State<string[]>)[
-                required.indexOf(name)
-              ].set(none);
-            } else {
-              parentState.required.merge([name]);
-            }
-          }}
-        />
-        <Select
-          isDisabled={false}
-          variant="outline"
-          value={itemState.type.value}
-          size="sm"
-          margin={2}
-          placeholder="Choose data type"
-          onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
-            const newSchema = handleTypeChange(
-              evt.target.value as JSONSchema7TypeName,
-              false
-            );
-            itemState.set(newSchema as JSONSchema7);
-          }}
-        >
-          {SchemaTypes.map((item, index) => {
-            return (
-              <option key={String(index)} value={item}>
-                {item}
-              </option>
-            );
-          })}
-        </Select>
-        <Input
-          isDisabled={isReadOnlyState.value}
-          value={itemState.title.value || ""}
-          size="sm"
-          margin={2}
-          variant="outline"
-          placeholder="Add Title"
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            itemState.title.set(evt.target.value);
-          }}
-        />
-        <Input
-          isDisabled={isReadOnlyState.value}
-          value={itemState.description.value || ""}
-          size="sm"
-          margin={2}
-          variant="outline"
-          placeholder="Add Description"
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            itemState.description.set(evt.target.value);
-          }}
-        />
+	return (
+		<div>
+			<Flex
+				alignContent="space-evenly"
+				direction="row"
+				wrap="nowrap"
+				className="schema-item"
+				style={tagPaddingLeftStyle}
+			>
+				<Input
+					isDisabled={isReadOnlyState.value}
+					defaultValue={nameState.value}
+					size="sm"
+					margin={2}
+					variant="outline"
+					placeholder="Enter property name"
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						debounced(evt.target.value);
+					}}
+				/>
+				<Checkbox
+					isDisabled={isReadOnlyState.value}
+					isChecked={isRequired}
+					margin={2}
+					colorScheme="blue"
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						if (!evt.target.checked && required.includes(name)) {
+							(parentState.required as State<string[]>)[
+								required.indexOf(name)
+							].set(none);
+						} else {
+							parentState.required.merge([name]);
+						}
+					}}
+				/>
+				<Select
+					isDisabled={false}
+					variant="outline"
+					value={itemState.type.value}
+					size="sm"
+					margin={2}
+					placeholder="Choose data type"
+					onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
+						const newSchema = handleTypeChange(
+							evt.target.value as JSONSchema7TypeName,
+							false
+						);
+						itemState.set(newSchema as JSONSchema7);
+					}}
+				>
+					{SchemaTypes.map((item, index) => {
+						return (
+							<option key={String(index)} value={item}>
+								{item}
+							</option>
+						);
+					})}
+				</Select>
+				<Input
+					isDisabled={isReadOnlyState.value}
+					value={itemState.title.value || ""}
+					size="sm"
+					margin={2}
+					variant="outline"
+					placeholder="Add Title"
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						itemState.title.set(evt.target.value);
+					}}
+				/>
+				<Input
+					isDisabled={isReadOnlyState.value}
+					value={itemState.description.value || ""}
+					size="sm"
+					margin={2}
+					variant="outline"
+					placeholder="Add Description"
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						itemState.description.set(evt.target.value);
+					}}
+				/>
 
-        {itemState.type.value !== "object" && itemState.type.value !== "array" && (
-          <Tooltip
-            hasArrow
-            aria-label="Advanced Settings"
-            label="Advanced Settings"
-            placement="top"
-          >
-            <IconButton
-              isRound
-              isDisabled={isReadOnlyState.value}
-              size="sm"
-              mt={2}
-              mb={2}
-              ml={1}
-              variant="link"
-              colorScheme="blue"
-              fontSize="16px"
-              icon={<FiSettings />}
-              aria-label="Advanced Settings"
-              onClick={() => {
-                showadvanced(itemState);
-              }}
-            />
-          </Tooltip>
-        )}
+				{itemState.type.value !== "object" && itemState.type.value !== "array" && (
+					<Tooltip
+						hasArrow
+						aria-label="Advanced Settings"
+						label="Advanced Settings"
+						placement="top"
+					>
+						<IconButton
+							isRound
+							isDisabled={isReadOnlyState.value}
+							size="sm"
+							mt={2}
+							mb={2}
+							ml={1}
+							variant="link"
+							colorScheme="blue"
+							fontSize="16px"
+							icon={<FiSettings />}
+							aria-label="Advanced Settings"
+							onClick={() => {
+								showadvanced(itemState);
+							}}
+						/>
+					</Tooltip>
+				)}
 
-        <Tooltip
-          hasArrow
-          aria-label="Remove Node"
-          label="Remove Node"
-          placement="top"
-        >
-          <IconButton
-            isRound
-            isDisabled={isReadOnlyState.value}
-            size="sm"
-            mt={2}
-            mb={2}
-            ml={1}
-            variant="link"
-            colorScheme="red"
-            fontSize="16px"
-            icon={<AiOutlineDelete />}
-            aria-label="Remove Node"
-            onClick={() => {
-              const updatedState = deleteKey(
-                nameState.value,
-                JSON.parse(JSON.stringify(parentState.properties.value))
-              );
-              parentState.properties.set(updatedState);
-            }}
-          />
-        </Tooltip>
+				<Tooltip
+					hasArrow
+					aria-label="Remove Node"
+					label="Remove Node"
+					placement="top"
+				>
+					<IconButton
+						isRound
+						isDisabled={isReadOnlyState.value}
+						size="sm"
+						mt={2}
+						mb={2}
+						ml={1}
+						variant="link"
+						colorScheme="red"
+						fontSize="16px"
+						icon={<AiOutlineDelete />}
+						aria-label="Remove Node"
+						onClick={() => {
+							const updatedState = deleteKey(
+								nameState.value,
+								JSON.parse(JSON.stringify(parentState.properties.value))
+							);
+							parentState.properties.set(updatedState);
+						}}
+					/>
+				</Tooltip>
 
-        {itemState.type?.value === "object" ? (
-          <DropPlus
-            isDisabled={isReadOnlyState.value}
-            parentStateProp={parentState}
-            itemStateProp={itemStateProp}
-          />
-        ) : (
-          <Tooltip
-            hasArrow
-            aria-label="Add Sibling Node"
-            label="Add Sibling Node"
-            placement="top"
-          >
-            <IconButton
-              isRound
-              isDisabled={isReadOnlyState.value}
-              size="sm"
-              mt={2}
-              mb={2}
-              mr={2}
-              variant="link"
-              colorScheme="green"
-              fontSize="16px"
-              icon={<IoIosAddCircleOutline />}
-              aria-label="Add Sibling Node"
-              onClick={() => {
-                if (propertiesOrNull) {
-                  const fieldName = `field_${random()}`;
-                  propertiesOrNull
-                    ?.nested(fieldName)
-                    .set(getDefaultSchema(DataType.string) as JSONSchema7);
-                }
-              }}
-            />
-          </Tooltip>
-        )}
-      </Flex>
-      {itemState.type?.value === "object" && (
-        <SchemaObject isReadOnly={isReadOnlyState} schemaState={itemState} />
-      )}
-      {itemState.type?.value === "array" && (
-        <SchemaArray isReadOnly={isReadOnlyState} schemaState={itemState} />
-      )}
-    </div>
-  );
+				{itemState.type?.value === "object" ? (
+					<DropPlus
+						isDisabled={isReadOnlyState.value}
+						parentStateProp={parentState}
+						itemStateProp={itemStateProp}
+					/>
+				) : (
+					<Tooltip
+						hasArrow
+						aria-label="Add Sibling Node"
+						label="Add Sibling Node"
+						placement="top"
+					>
+						<IconButton
+							isRound
+							isDisabled={isReadOnlyState.value}
+							size="sm"
+							mt={2}
+							mb={2}
+							mr={2}
+							variant="link"
+							colorScheme="green"
+							fontSize="16px"
+							icon={<IoIosAddCircleOutline />}
+							aria-label="Add Sibling Node"
+							onClick={() => {
+								if (propertiesOrNull) {
+									const fieldName = `field_${random()}`;
+									propertiesOrNull
+										?.nested(fieldName)
+										.set(getDefaultSchema(DataType.string) as JSONSchema7);
+								}
+							}}
+						/>
+					</Tooltip>
+				)}
+			</Flex>
+			{itemState.type?.value === "object" && (
+				<SchemaObject isReadOnly={isReadOnlyState} schemaState={itemState} />
+			)}
+			{itemState.type?.value === "array" && (
+				<SchemaArray isReadOnly={isReadOnlyState} schemaState={itemState} />
+			)}
+		</div>
+	);
 };
diff --git a/src/JsonSchemaEditor/schema-object/index.tsx b/src/JsonSchemaEditor/schema-object/index.tsx
index 9f589d5..5ac6aeb 100644
--- a/src/JsonSchemaEditor/schema-object/index.tsx
+++ b/src/JsonSchemaEditor/schema-object/index.tsx
@@ -1,108 +1,111 @@
 import * as React from "react";
 import { SchemaItem } from "../schema-item";
-import { JSONSchema7, JSONSchema7Definition } from "../JsonSchemaEditor.types";
+import {
+	JSONSchema7,
+	JSONSchema7Definition,
+} from "../../JsonSchemaEditor.types";
 import { useState, State } from "@hookstate/core";
 import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
+	Button,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
 } from "@chakra-ui/react";
 import { AdvancedSettings } from "../schema-advanced";
 export interface SchemaObjectProps {
-  schemaState: State<JSONSchema7>;
-  isReadOnly: State<boolean>;
+	schemaState: State<JSONSchema7>;
+	isReadOnly: State<boolean>;
 }
 
 export const SchemaObject: React.FunctionComponent<SchemaObjectProps> = (
-  props: React.PropsWithChildren<SchemaObjectProps>
+	props: React.PropsWithChildren<SchemaObjectProps>
 ) => {
-  const { schemaState, isReadOnly } = props;
-  const schema = useState(schemaState);
-  const properties = useState(schema.properties);
+	const { schemaState, isReadOnly } = props;
+	const schema = useState(schemaState);
+	const properties = useState(schema.properties);
 
-  const propertiesOrNull:
-    | State<{
-        [key: string]: JSONSchema7Definition;
-      }>
-    | undefined = properties.ornull;
+	const propertiesOrNull:
+		| State<{
+				[key: string]: JSONSchema7Definition;
+		  }>
+		| undefined = properties.ornull;
 
-  const isReadOnlyState = useState(isReadOnly);
+	const isReadOnlyState = useState(isReadOnly);
 
-  const onCloseAdvanced = (): void => {
-    localState.isAdvancedOpen.set(false);
-  };
+	const onCloseAdvanced = (): void => {
+		localState.isAdvancedOpen.set(false);
+	};
 
-  const showadvanced = (item: State<JSONSchema7>): void => {
-    localState.isAdvancedOpen.set(true);
-  };
+	const showadvanced = (item: State<JSONSchema7>): void => {
+		localState.isAdvancedOpen.set(true);
+	};
 
-  const focusRef = React.createRef<HTMLElement>();
+	const focusRef = React.createRef<HTMLElement>();
 
-  const localState = useState({
-    isAdvancedOpen: false,
-  });
+	const localState = useState({
+		isAdvancedOpen: false,
+	});
 
-  if (!propertiesOrNull) {
-    return <></>;
-  } else {
-    return (
-      <div className="object-style">
-        {propertiesOrNull?.keys?.map((name) => {
-          return (
-            <>
-              <SchemaItem
-                key={String(name)}
-                itemStateProp={
-                  propertiesOrNull.nested(name as string) as State<JSONSchema7>
-                }
-                parentStateProp={schema}
-                name={name as string}
-                showadvanced={showadvanced}
-                required={schema.required.value as string[]}
-                isReadOnly={isReadOnlyState}
-              />
-              <Modal
-                isOpen={localState.isAdvancedOpen.get()}
-                finalFocusRef={focusRef}
-                size="lg"
-                onClose={onCloseAdvanced}
-              >
-                <ModalOverlay />
-                <ModalContent>
-                  <ModalHeader textAlign="center">
-                    Advanced Schema Settings
-                  </ModalHeader>
+	if (!propertiesOrNull) {
+		return <></>;
+	} else {
+		return (
+			<div className="object-style">
+				{propertiesOrNull?.keys?.map((name) => {
+					return (
+						<>
+							<SchemaItem
+								key={String(name)}
+								itemStateProp={
+									propertiesOrNull.nested(name as string) as State<JSONSchema7>
+								}
+								parentStateProp={schema}
+								name={name as string}
+								showadvanced={showadvanced}
+								required={schema.required.value as string[]}
+								isReadOnly={isReadOnlyState}
+							/>
+							<Modal
+								isOpen={localState.isAdvancedOpen.get()}
+								finalFocusRef={focusRef}
+								size="lg"
+								onClose={onCloseAdvanced}
+							>
+								<ModalOverlay />
+								<ModalContent>
+									<ModalHeader textAlign="center">
+										Advanced Schema Settings
+									</ModalHeader>
 
-                  <ModalBody>
-                    <AdvancedSettings
-                      itemStateProp={
-                        propertiesOrNull.nested(
-                          name as string
-                        ) as State<JSONSchema7>
-                      }
-                    />
-                  </ModalBody>
+									<ModalBody>
+										<AdvancedSettings
+											itemStateProp={
+												propertiesOrNull.nested(
+													name as string
+												) as State<JSONSchema7>
+											}
+										/>
+									</ModalBody>
 
-                  <ModalFooter>
-                    <Button
-                      colorScheme="blue"
-                      variant="ghost"
-                      mr={3}
-                      onClick={onCloseAdvanced}
-                    >
-                      Close
-                    </Button>
-                  </ModalFooter>
-                </ModalContent>
-              </Modal>
-            </>
-          );
-        })}
-      </div>
-    );
-  }
+									<ModalFooter>
+										<Button
+											colorScheme="blue"
+											variant="ghost"
+											mr={3}
+											onClick={onCloseAdvanced}
+										>
+											Close
+										</Button>
+									</ModalFooter>
+								</ModalContent>
+							</Modal>
+						</>
+					);
+				})}
+			</div>
+		);
+	}
 };
diff --git a/src/JsonSchemaEditor/schema-root/index.tsx b/src/JsonSchemaEditor/schema-root/index.tsx
index 86a7da3..9f573ae 100644
--- a/src/JsonSchemaEditor/schema-root/index.tsx
+++ b/src/JsonSchemaEditor/schema-root/index.tsx
@@ -1,130 +1,130 @@
 import * as React from "react";
 import {
-  Flex,
-  Input,
-  Checkbox,
-  FlexProps,
-  Select,
-  IconButton,
-  Tooltip,
+	Flex,
+	Input,
+	Checkbox,
+	FlexProps,
+	Select,
+	IconButton,
+	Tooltip,
 } from "@chakra-ui/react";
 import { useState, State } from "@hookstate/core";
-import { JSONSchema7, JSONSchema7TypeName } from "../JsonSchemaEditor.types";
+import { JSONSchema7, JSONSchema7TypeName } from "../../JsonSchemaEditor.types";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import { getDefaultSchema, DataType, random, handleTypeChange } from "../utils";
 export interface SchemaArrayProps extends FlexProps {
-  schemaState: State<JSONSchema7>;
-  onSchemaChange: (results: string) => void;
-  isReadOnly: State<boolean>;
+	schemaState: State<JSONSchema7>;
+	onSchemaChange: (results: string) => void;
+	isReadOnly: State<boolean>;
 }
 export const SchemaRoot: React.FunctionComponent<SchemaArrayProps> = (
-  props: React.PropsWithChildren<SchemaArrayProps>
+	props: React.PropsWithChildren<SchemaArrayProps>
 ) => {
-  const state = useState(props.schemaState);
-  const isReadOnlyState = useState(props.isReadOnly);
+	const state = useState(props.schemaState);
+	const isReadOnlyState = useState(props.isReadOnly);
 
-  return (
-    <>
-      {props.onSchemaChange(JSON.stringify(state.value))}
-      <Flex
-        data-testid="jsonschema-editor"
-        direction="row"
-        wrap="nowrap"
-        size="sm"
-        mt={2}
-        mr={5}
-      >
-        <Input isDisabled placeholder="root" margin={2} variant="outline" />
-        <Tooltip
-          hasArrow
-          aria-label="All Required"
-          label="All Required"
-          placement="top"
-        >
-          <Checkbox
-            isDisabled={isReadOnlyState.value}
-            margin={2}
-            width={20}
-            colorScheme="blue"
-          />
-        </Tooltip>
+	return (
+		<>
+			{props.onSchemaChange(JSON.stringify(state.value))}
+			<Flex
+				data-testid="jsonschema-editor"
+				direction="row"
+				wrap="nowrap"
+				size="sm"
+				mt={2}
+				mr={5}
+			>
+				<Input isDisabled placeholder="root" margin={2} variant="outline" />
+				<Tooltip
+					hasArrow
+					aria-label="All Required"
+					label="All Required"
+					placement="top"
+				>
+					<Checkbox
+						isDisabled={isReadOnlyState.value}
+						margin={2}
+						width={20}
+						colorScheme="blue"
+					/>
+				</Tooltip>
 
-        <Select
-          variant="outline"
-          isDisabled={isReadOnlyState.value}
-          value={state.type.value ?? ""}
-          size="sm"
-          margin={2}
-          placeholder="Choose root data type"
-          onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
-            const newSchema = handleTypeChange(
-              evt.target.value as JSONSchema7TypeName,
-              false
-            );
-            state.set(newSchema as JSONSchema7);
-          }}
-        >
-          <option key="object" value="object">
-            object
-          </option>
-          <option key="array" value="array">
-            array
-          </option>
-        </Select>
-        <Input
-          value={state.value?.title ?? ""}
-          isDisabled={isReadOnlyState.value}
-          size="sm"
-          margin={2}
-          variant="outline"
-          placeholder="Add Title"
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            state.title.set(evt.target.value);
-          }}
-        />
-        <Input
-          value={state.value?.description ?? ""}
-          isDisabled={isReadOnlyState.value}
-          size="sm"
-          margin={2}
-          variant="outline"
-          placeholder="Add Description"
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            state.description.set(evt.target.value);
-          }}
-        />
+				<Select
+					variant="outline"
+					isDisabled={isReadOnlyState.value}
+					value={state.type.value ?? ""}
+					size="sm"
+					margin={2}
+					placeholder="Choose root data type"
+					onChange={(evt: React.ChangeEvent<HTMLSelectElement>) => {
+						const newSchema = handleTypeChange(
+							evt.target.value as JSONSchema7TypeName,
+							false
+						);
+						state.set(newSchema as JSONSchema7);
+					}}
+				>
+					<option key="object" value="object">
+						object
+					</option>
+					<option key="array" value="array">
+						array
+					</option>
+				</Select>
+				<Input
+					value={state.value?.title ?? ""}
+					isDisabled={isReadOnlyState.value}
+					size="sm"
+					margin={2}
+					variant="outline"
+					placeholder="Add Title"
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						state.title.set(evt.target.value);
+					}}
+				/>
+				<Input
+					value={state.value?.description ?? ""}
+					isDisabled={isReadOnlyState.value}
+					size="sm"
+					margin={2}
+					variant="outline"
+					placeholder="Add Description"
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						state.description.set(evt.target.value);
+					}}
+				/>
 
-        {state.value?.type === "object" && (
-          <>
-            <Tooltip
-              hasArrow
-              aria-label="Add Child Node"
-              label="Add Child Node"
-              placement="top"
-            >
-              <IconButton
-                isRound
-                isDisabled={isReadOnlyState.value}
-                size="sm"
-                mt={2}
-                mb={2}
-                mr={2}
-                variant="link"
-                colorScheme="green"
-                fontSize="16px"
-                icon={<IoIosAddCircleOutline />}
-                aria-label="Add Child Node"
-                onClick={() => {
-                  const fieldName = `field_${random()}`;
-                  (state.properties as State<{
-                    [key: string]: JSONSchema7;
-                  }>)[fieldName].set(getDefaultSchema(DataType.string));
-                }}
-              />
-            </Tooltip>
-          </>
-        )}
-      </Flex>
-    </>
-  );
+				{state.value?.type === "object" && (
+					<>
+						<Tooltip
+							hasArrow
+							aria-label="Add Child Node"
+							label="Add Child Node"
+							placement="top"
+						>
+							<IconButton
+								isRound
+								isDisabled={isReadOnlyState.value}
+								size="sm"
+								mt={2}
+								mb={2}
+								mr={2}
+								variant="link"
+								colorScheme="green"
+								fontSize="16px"
+								icon={<IoIosAddCircleOutline />}
+								aria-label="Add Child Node"
+								onClick={() => {
+									const fieldName = `field_${random()}`;
+									(state.properties as State<{
+										[key: string]: JSONSchema7;
+									}>)[fieldName].set(getDefaultSchema(DataType.string));
+								}}
+							/>
+						</Tooltip>
+					</>
+				)}
+			</Flex>
+		</>
+	);
 };
diff --git a/src/JsonSchemaEditor/state/schema.ts b/src/JsonSchemaEditor/state/schema.ts
index 981e682..f1ac4da 100644
--- a/src/JsonSchemaEditor/state/schema.ts
+++ b/src/JsonSchemaEditor/state/schema.ts
@@ -1,44 +1,44 @@
 import { createState, State } from "@hookstate/core";
-import { JSONSchema7 } from "../JsonSchemaEditor.types";
+import { JSONSchema7 } from "../../JsonSchemaEditor.types";
 import Ajv from "ajv";
-import { Schema2 } from "../JsonSchemaEditor.types";
+import { Schema2 } from "../../JsonSchemaEditor.types";
 const ajv = new Ajv();
 
 export const defaultSchema = (): JSONSchema7 => {
-  return {
-    $schema: "http://json-schema.org/draft-07/schema#",
-    type: "object",
-    title: "title",
-    description: "",
-    properties: {},
-    required: [],
-  };
+	return {
+		$schema: "http://json-schema.org/draft-07/schema#",
+		type: "object",
+		title: "title",
+		description: "",
+		properties: {},
+		required: [],
+	};
 };
 
 const countKeys = (object: any): number => {
-  if (typeof object !== "object" || object === null) {
-    return 0;
-  }
+	if (typeof object !== "object" || object === null) {
+		return 0;
+	}
 
-  const keys = Object.keys(object);
-  let sum = keys.length;
-  for (const key of keys) {
-    sum += countKeys(object[key]);
-  }
+	const keys = Object.keys(object);
+	let sum = keys.length;
+	for (const key of keys) {
+		sum += countKeys(object[key]);
+	}
 
-  return sum;
+	return sum;
 };
 
 const isValidSchema = (schema: JSONSchema7): boolean => {
-  const isValid = ajv.validateSchema(schema);
-  return isValid;
+	const isValid = ajv.validateSchema(schema);
+	return isValid;
 };
 
 export const useSchemaState = (initialState: Schema2): State<Schema2> => {
-  if (initialState.jsonSchema === undefined) {
-    initialState.jsonSchema = defaultSchema();
-  }
+	if (initialState.jsonSchema === undefined) {
+		initialState.jsonSchema = defaultSchema();
+	}
 
-  initialState.isValidSchema = isValidSchema(initialState.jsonSchema);
-  return createState<Schema2>(initialState);
+	initialState.isValidSchema = isValidSchema(initialState.jsonSchema);
+	return createState<Schema2>(initialState);
 };
diff --git a/src/JsonSchemaEditor/state/test.ts b/src/JsonSchemaEditor/state/test.ts
index 9829e22..49f5f0f 100644
--- a/src/JsonSchemaEditor/state/test.ts
+++ b/src/JsonSchemaEditor/state/test.ts
@@ -1,198 +1,198 @@
 import * as R from "ramda";
 import { PropertyType, getDefaultSchema, DataType } from "../utils";
-import { JsonSchemaObject, JsonSchemaType } from "../JsonSchemaEditor.types";
-import { Schema, SchemaHandler } from "../JsonSchemaEditor.types";
+import { JsonSchemaObject, JsonSchemaType } from "../../JsonSchemaEditor.types";
+import { Schema, SchemaHandler } from "../../JsonSchemaEditor.types";
 
 const renameKeys = R.curry((keysMap: Record<string, string>, object: any) =>
-  R.reduce(
-    (acc: any, key: string) => {
-      const k = R.has(key, keysMap) ? keysMap[key] : key;
-      acc[k] = object[key];
-      return acc;
-    },
-    {},
-    R.keys(object) as string[]
-  )
+	R.reduce(
+		(acc: any, key: string) => {
+			const k = R.has(key, keysMap) ? keysMap[key] : key;
+			acc[k] = object[key];
+			return acc;
+		},
+		{},
+		R.keys(object) as string[]
+	)
 );
 
 export const schemaHandler: SchemaHandler = {
-  handleNameChange: (
-    state: Schema,
-    newValue: string,
-    lens: string[]
-  ): JsonSchemaType => {
-    const map = { [lens[lens.length - 1]]: newValue };
-    const propsLens = R.lensPath(lens.slice(0, -1));
-    const propView = R.view(propsLens, state.jsonSchema);
-    const newProperties = renameKeys(map, propView);
-
-    const newState = R.set(propsLens, newProperties, state.jsonSchema);
-    return newState;
-  },
-  handleTitleChange: (
-    state: Schema,
-    newValue: string,
-    lens: string[]
-  ): JsonSchemaType => {
-    const idLens = R.lensPath([...lens, "$id"]);
-    const titleLens = R.lensPath([...lens, "title"]);
-    let newId = `${state.schemaRoot}${newValue.toLowerCase()}`;
-    newId = newId.replace(/\s/g, "");
-    const updatedId = R.set(idLens, newId, state.jsonSchema);
-    const newState = R.set(titleLens, newValue, updatedId);
-    return newState;
-  },
-  handleTypeChange: (
-    state: Schema,
-    newValue: string,
-    lens: string[]
-  ): JsonSchemaType => {
-    if (lens.length > 0) {
-      const typeLens = R.lensPath(lens);
-      const dataTypeValue: DataType = (DataType as any)[newValue];
-      const newState = R.set(
-        typeLens,
-        getDefaultSchema(dataTypeValue, state.schemaRoot),
-        state.jsonSchema
-      );
-      return newState;
-    } else {
-      switch (newValue) {
-        case "array":
-          return getDefaultSchema(DataType.array, state.schemaRoot, true);
-        case "object":
-          return getDefaultSchema(DataType.object, state.schemaRoot, true);
-        default:
-          return getDefaultSchema(DataType.object, state.schemaRoot, true);
-      }
-    }
-  },
-  handleDescriptionChange: (
-    state: Schema,
-    newValue: string,
-    lens: string[]
-  ): JsonSchemaType => {
-    const titleLens = R.lensPath([...lens, "description"]);
-
-    const newState = R.set(titleLens, newValue, state.jsonSchema);
-    return newState;
-  },
-  deleteItem: (state: Schema, lens: string[]): JsonSchemaType => {
-    const propertyName = lens[lens.length - 1];
-    const requiredLens = R.lensPath([...lens.splice(0, -1), "required"]);
-    const currentRequired = R.view<JsonSchemaType, string[]>(
-      requiredLens,
-      state.jsonSchema
-    );
-    const indexOfRequired = currentRequired.indexOf(propertyName);
-
-    currentRequired.splice(indexOfRequired, 1);
-
-    const newState = R.dissocPath<JsonSchemaType>(lens, state.jsonSchema);
-
-    return newState;
-  },
-  addItem: (
-    state: Schema,
-    lens: string[],
-    type: PropertyType
-  ): [JsonSchemaType, number] => {
-    const fieldName = `field_${String(state.fieldId + 1)}`;
-    lens =
-      type === PropertyType.SIBLING
-        ? [...lens.slice(0, -1), fieldName]
-        : [...lens, fieldName];
-
-    const addPath = R.lensPath(lens);
-    const newState = R.set(
-      addPath,
-      getDefaultSchema(DataType.string, state.schemaRoot),
-      state.jsonSchema
-    );
-
-    return [newState, state.fieldId + 1];
-  },
-  changeAdvancedProperty: (
-    state: Schema,
-    newValue: any,
-    lens: string[],
-    property: string
-  ): JsonSchemaType => {
-    const propertyLens = R.lensPath([...lens, property]);
-
-    const correctNewValue =
-      Number(newValue) === undefined ? newValue : Number(newValue);
-
-    const newState = R.set(propertyLens, correctNewValue, state.jsonSchema);
-    return newState;
-  },
-  changeEnum: (
-    state: Schema,
-    newValue: string[] | null,
-    lens: string[]
-  ): JsonSchemaType => {
-    const propertyLens = R.lensPath([...lens, "enum"]);
-    let newState: JsonSchemaType;
-    if (newValue === null) {
-      newState = R.dissocPath<JsonSchemaType>(
-        [...lens, "enum"],
-        state.jsonSchema
-      );
-    } else {
-      const typeLens = R.lensPath(lens);
-
-      const propType = R.view<JsonSchemaType, JsonSchemaType>(
-        typeLens,
-        state.jsonSchema
-      );
-      const correctNewValue =
-        propType.type === "number"
-          ? newValue.map((string) => (string === "" ? string : Number(string)))
-          : newValue;
-
-      newState = R.set(propertyLens, correctNewValue, state.jsonSchema);
-    }
-
-    return newState;
-  },
-  getDataByLens: (state: Schema, lens: string[]): JsonSchemaType => {
-    const propertyLens = R.lensPath(lens);
-
-    const data = JSON.parse(
-      JSON.stringify(R.view(propertyLens, state.jsonSchema))
-    );
-
-    return data;
-  },
-  handleRequiredChange: (
-    state: Schema,
-    newValue: boolean,
-    lens: string[]
-  ): JsonSchemaType => {
-    const propertyName = lens[lens.length - 1];
-
-    const requiredPath = lens.slice(0, -2);
-    const requiredLens = R.lensPath(requiredPath);
-
-    const currentState = R.view<JsonSchemaType, JsonSchemaObject>(
-      requiredLens,
-      state.jsonSchema
-    );
-
-    if (!currentState.required) {
-      currentState.required = new Array<string>();
-    }
-
-    const indexOfRequired = currentState.required.indexOf(propertyName);
-
-    if (!newValue && indexOfRequired >= 0) {
-      currentState.required.splice(indexOfRequired, 1);
-    } else if (newValue && indexOfRequired === -1) {
-      currentState.required.push(propertyName);
-    }
-
-    const newState = R.set(requiredLens, currentState, state.jsonSchema);
-
-    return newState;
-  },
+	handleNameChange: (
+		state: Schema,
+		newValue: string,
+		lens: string[]
+	): JsonSchemaType => {
+		const map = { [lens[lens.length - 1]]: newValue };
+		const propsLens = R.lensPath(lens.slice(0, -1));
+		const propView = R.view(propsLens, state.jsonSchema);
+		const newProperties = renameKeys(map, propView);
+
+		const newState = R.set(propsLens, newProperties, state.jsonSchema);
+		return newState;
+	},
+	handleTitleChange: (
+		state: Schema,
+		newValue: string,
+		lens: string[]
+	): JsonSchemaType => {
+		const idLens = R.lensPath([...lens, "$id"]);
+		const titleLens = R.lensPath([...lens, "title"]);
+		let newId = `${state.schemaRoot}${newValue.toLowerCase()}`;
+		newId = newId.replace(/\s/g, "");
+		const updatedId = R.set(idLens, newId, state.jsonSchema);
+		const newState = R.set(titleLens, newValue, updatedId);
+		return newState;
+	},
+	handleTypeChange: (
+		state: Schema,
+		newValue: string,
+		lens: string[]
+	): JsonSchemaType => {
+		if (lens.length > 0) {
+			const typeLens = R.lensPath(lens);
+			const dataTypeValue: DataType = (DataType as any)[newValue];
+			const newState = R.set(
+				typeLens,
+				getDefaultSchema(dataTypeValue, state.schemaRoot),
+				state.jsonSchema
+			);
+			return newState;
+		} else {
+			switch (newValue) {
+				case "array":
+					return getDefaultSchema(DataType.array, state.schemaRoot, true);
+				case "object":
+					return getDefaultSchema(DataType.object, state.schemaRoot, true);
+				default:
+					return getDefaultSchema(DataType.object, state.schemaRoot, true);
+			}
+		}
+	},
+	handleDescriptionChange: (
+		state: Schema,
+		newValue: string,
+		lens: string[]
+	): JsonSchemaType => {
+		const titleLens = R.lensPath([...lens, "description"]);
+
+		const newState = R.set(titleLens, newValue, state.jsonSchema);
+		return newState;
+	},
+	deleteItem: (state: Schema, lens: string[]): JsonSchemaType => {
+		const propertyName = lens[lens.length - 1];
+		const requiredLens = R.lensPath([...lens.splice(0, -1), "required"]);
+		const currentRequired = R.view<JsonSchemaType, string[]>(
+			requiredLens,
+			state.jsonSchema
+		);
+		const indexOfRequired = currentRequired.indexOf(propertyName);
+
+		currentRequired.splice(indexOfRequired, 1);
+
+		const newState = R.dissocPath<JsonSchemaType>(lens, state.jsonSchema);
+
+		return newState;
+	},
+	addItem: (
+		state: Schema,
+		lens: string[],
+		type: PropertyType
+	): [JsonSchemaType, number] => {
+		const fieldName = `field_${String(state.fieldId + 1)}`;
+		lens =
+			type === PropertyType.SIBLING
+				? [...lens.slice(0, -1), fieldName]
+				: [...lens, fieldName];
+
+		const addPath = R.lensPath(lens);
+		const newState = R.set(
+			addPath,
+			getDefaultSchema(DataType.string, state.schemaRoot),
+			state.jsonSchema
+		);
+
+		return [newState, state.fieldId + 1];
+	},
+	changeAdvancedProperty: (
+		state: Schema,
+		newValue: any,
+		lens: string[],
+		property: string
+	): JsonSchemaType => {
+		const propertyLens = R.lensPath([...lens, property]);
+
+		const correctNewValue =
+			Number(newValue) === undefined ? newValue : Number(newValue);
+
+		const newState = R.set(propertyLens, correctNewValue, state.jsonSchema);
+		return newState;
+	},
+	changeEnum: (
+		state: Schema,
+		newValue: string[] | null,
+		lens: string[]
+	): JsonSchemaType => {
+		const propertyLens = R.lensPath([...lens, "enum"]);
+		let newState: JsonSchemaType;
+		if (newValue === null) {
+			newState = R.dissocPath<JsonSchemaType>(
+				[...lens, "enum"],
+				state.jsonSchema
+			);
+		} else {
+			const typeLens = R.lensPath(lens);
+
+			const propType = R.view<JsonSchemaType, JsonSchemaType>(
+				typeLens,
+				state.jsonSchema
+			);
+			const correctNewValue =
+				propType.type === "number"
+					? newValue.map((string) => (string === "" ? string : Number(string)))
+					: newValue;
+
+			newState = R.set(propertyLens, correctNewValue, state.jsonSchema);
+		}
+
+		return newState;
+	},
+	getDataByLens: (state: Schema, lens: string[]): JsonSchemaType => {
+		const propertyLens = R.lensPath(lens);
+
+		const data = JSON.parse(
+			JSON.stringify(R.view(propertyLens, state.jsonSchema))
+		);
+
+		return data;
+	},
+	handleRequiredChange: (
+		state: Schema,
+		newValue: boolean,
+		lens: string[]
+	): JsonSchemaType => {
+		const propertyName = lens[lens.length - 1];
+
+		const requiredPath = lens.slice(0, -2);
+		const requiredLens = R.lensPath(requiredPath);
+
+		const currentState = R.view<JsonSchemaType, JsonSchemaObject>(
+			requiredLens,
+			state.jsonSchema
+		);
+
+		if (!currentState.required) {
+			currentState.required = new Array<string>();
+		}
+
+		const indexOfRequired = currentState.required.indexOf(propertyName);
+
+		if (!newValue && indexOfRequired >= 0) {
+			currentState.required.splice(indexOfRequired, 1);
+		} else if (newValue && indexOfRequired === -1) {
+			currentState.required.push(propertyName);
+		}
+
+		const newState = R.set(requiredLens, currentState, state.jsonSchema);
+
+		return newState;
+	},
 };
diff --git a/src/JsonSchemaEditor/utils.ts b/src/JsonSchemaEditor/utils.ts
index 34e0a61..8df1443 100644
--- a/src/JsonSchemaEditor/utils.ts
+++ b/src/JsonSchemaEditor/utils.ts
@@ -1,4 +1,4 @@
-import { JSONSchema7, JSONSchema7TypeName } from "./JsonSchemaEditor.types";
+import { JSONSchema7, JSONSchema7TypeName } from "../JsonSchemaEditor.types";
 import * as React from "react";
 import { useState } from "@hookstate/core";
 import * as R from "ramda";
@@ -8,200 +8,200 @@ const schemaDraft = "http://json-schema.org/draft-07/schema#";
 export const JSONPATH_JOIN_CHAR = ".";
 
 export enum PropertyType {
-  SIBLING,
-  CHILD,
+	SIBLING,
+	CHILD,
 }
 
 export function useDebounce<T>(value: T, delay?: number): T {
-  const debouncedValue = useState<T>(value);
+	const debouncedValue = useState<T>(value);
 
-  React.useEffect(() => {
-    const timer = setTimeout(() => debouncedValue.set(value), delay || 500);
+	React.useEffect(() => {
+		const timer = setTimeout(() => debouncedValue.set(value), delay || 500);
 
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [value, delay]);
 
-  return debouncedValue.value;
+	return debouncedValue.value;
 }
 
 export default useDebounce;
 
 export const StringFormat = [
-  { name: "date-time" },
-  { name: "date" },
-  { name: "time" },
-  { name: "email" },
-  { name: "hostname" },
-  { name: "ipv4" },
-  { name: "ipv6" },
-  { name: "uri" },
-  { name: "regex" },
+	{ name: "date-time" },
+	{ name: "date" },
+	{ name: "time" },
+	{ name: "email" },
+	{ name: "hostname" },
+	{ name: "ipv4" },
+	{ name: "ipv6" },
+	{ name: "uri" },
+	{ name: "regex" },
 ];
 
 export const SchemaTypes = [
-  "string",
-  "number",
-  "array",
-  "object",
-  "boolean",
-  "integer",
+	"string",
+	"number",
+	"array",
+	"object",
+	"boolean",
+	"integer",
 ];
 
 export enum DataType {
-  string = "string",
-  number = "number",
-  array = "arrray",
-  object = "object",
-  boolean = "boolean",
-  integer = "integer",
+	string = "string",
+	number = "number",
+	array = "arrray",
+	object = "object",
+	boolean = "boolean",
+	integer = "integer",
 }
 
 export const getDefaultSchema = (
-  dataType: DataType,
-  includeSchema?: boolean
+	dataType: DataType,
+	includeSchema?: boolean
 ): JSONSchema7 => {
-  switch (dataType) {
-    case DataType.number:
-      return includeSchema
-        ? {
-            $schema: schemaDraft,
-            type: "number",
-            title: "",
-            description: "",
-            properties: {},
-          }
-        : {
-            type: "number",
-            title: "",
-            description: "",
-            properties: {},
-          };
-    case DataType.boolean:
-      return includeSchema
-        ? {
-            $schema: schemaDraft,
-            type: "boolean",
-            title: "",
-            description: "",
-            properties: {},
-          }
-        : {
-            type: "boolean",
-            title: "",
-            description: "",
-            properties: {},
-          };
-    case DataType.integer:
-      return includeSchema
-        ? {
-            $schema: schemaDraft,
-            type: "integer",
-            title: "",
-            description: "",
-            properties: {},
-          }
-        : {
-            type: "integer",
-            title: "",
-            description: "",
-            properties: {},
-          };
-    case DataType.array:
-      return includeSchema
-        ? {
-            $schema: schemaDraft,
-            type: "array",
-            title: "",
-            description: "",
-            items: {
-              type: "string",
-              title: "",
-              description: "",
-            },
-          }
-        : {
-            type: "array",
-            title: "",
-            description: "",
-            items: {
-              type: "string",
-              title: "",
-              description: "",
-            },
-          };
-    case DataType.object:
-      return includeSchema
-        ? {
-            $schema: schemaDraft,
-            type: "object",
-            title: "",
-            description: "",
-            properties: {},
-            required: [],
-          }
-        : {
-            type: "object",
-            title: "",
-            description: "",
-            properties: {},
-            required: [],
-          };
-    case DataType.string:
-    default:
-      return includeSchema
-        ? {
-            $schema: schemaDraft,
-            type: "string",
-            title: "",
-            description: "",
-            properties: {},
-          }
-        : {
-            type: "string",
-            title: "",
-            description: "",
-            properties: {},
-          };
-  }
+	switch (dataType) {
+		case DataType.number:
+			return includeSchema
+				? {
+						$schema: schemaDraft,
+						type: "number",
+						title: "",
+						description: "",
+						properties: {},
+				  }
+				: {
+						type: "number",
+						title: "",
+						description: "",
+						properties: {},
+				  };
+		case DataType.boolean:
+			return includeSchema
+				? {
+						$schema: schemaDraft,
+						type: "boolean",
+						title: "",
+						description: "",
+						properties: {},
+				  }
+				: {
+						type: "boolean",
+						title: "",
+						description: "",
+						properties: {},
+				  };
+		case DataType.integer:
+			return includeSchema
+				? {
+						$schema: schemaDraft,
+						type: "integer",
+						title: "",
+						description: "",
+						properties: {},
+				  }
+				: {
+						type: "integer",
+						title: "",
+						description: "",
+						properties: {},
+				  };
+		case DataType.array:
+			return includeSchema
+				? {
+						$schema: schemaDraft,
+						type: "array",
+						title: "",
+						description: "",
+						items: {
+							type: "string",
+							title: "",
+							description: "",
+						},
+				  }
+				: {
+						type: "array",
+						title: "",
+						description: "",
+						items: {
+							type: "string",
+							title: "",
+							description: "",
+						},
+				  };
+		case DataType.object:
+			return includeSchema
+				? {
+						$schema: schemaDraft,
+						type: "object",
+						title: "",
+						description: "",
+						properties: {},
+						required: [],
+				  }
+				: {
+						type: "object",
+						title: "",
+						description: "",
+						properties: {},
+						required: [],
+				  };
+		case DataType.string:
+		default:
+			return includeSchema
+				? {
+						$schema: schemaDraft,
+						type: "string",
+						title: "",
+						description: "",
+						properties: {},
+				  }
+				: {
+						type: "string",
+						title: "",
+						description: "",
+						properties: {},
+				  };
+	}
 };
 
 export const random = () => {
-  return Math.random().toString(36).substring(2, 6);
+	return Math.random().toString(36).substring(2, 6);
 };
 
 export const handleTypeChange = (
-  newValue: JSONSchema7TypeName,
-  rootChange: boolean
+	newValue: JSONSchema7TypeName,
+	rootChange: boolean
 ): JSONSchema7 => {
-  switch (newValue) {
-    case "array":
-      return getDefaultSchema(DataType.array, rootChange) as JSONSchema7;
-    case "object":
-      return getDefaultSchema(DataType.object, rootChange) as JSONSchema7;
-    default:
-      return getDefaultSchema(
-        (DataType as any)[newValue],
-        rootChange
-      ) as JSONSchema7;
-  }
+	switch (newValue) {
+		case "array":
+			return getDefaultSchema(DataType.array, rootChange) as JSONSchema7;
+		case "object":
+			return getDefaultSchema(DataType.object, rootChange) as JSONSchema7;
+		default:
+			return getDefaultSchema(
+				(DataType as any)[newValue],
+				rootChange
+			) as JSONSchema7;
+	}
 };
 
 export const renameKeys = R.curry(
-  (keysMap: Record<string, string>, object: any) =>
-    R.reduce(
-      (acc: any, key: string) => {
-        const k = R.has(key, keysMap) ? keysMap[key] : key;
-        acc[k] = object[key];
-        return acc;
-      },
-      {},
-      R.keys(object) as string[]
-    )
+	(keysMap: Record<string, string>, object: any) =>
+		R.reduce(
+			(acc: any, key: string) => {
+				const k = R.has(key, keysMap) ? keysMap[key] : key;
+				acc[k] = object[key];
+				return acc;
+			},
+			{},
+			R.keys(object) as string[]
+		)
 );
 
 export const deleteKey = (key: string, object: any) => {
-  delete object[key];
-  return object;
+	delete object[key];
+	return object;
 };
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..eedfe7b
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1 @@
+export { JsonSchemaEditor as default } from "./JsonSchemaEditor/JsonSchemaEditor";