fix: objectprop circular reference

core/editors/src/editors/ArrayEditor/ArrayEditor.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent } from 'react';
 import { ComponentControlArray } from '@component-controls/specification';
 import { Textarea } from 'theme-ui';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 export interface ArrayEditorProps extends PropertyControlProps {
   prop: ComponentControlArray;

core/editors/src/editors/BooleanEditor/BooleanEditor.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentControlBoolean } from '@component-controls/specification';
 import { Toggle } from '../../components/Toggle/Toggle';
 import { FlexContainer } from '../../components/FlexContainer/FlexContainer';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 export interface BooleanEditorProps extends PropertyControlProps {
   prop: ComponentControlBoolean;

core/editors/src/editors/ButtonEditor/ButtonEditor.tsx

@@ -5,7 +5,7 @@ import {
   PropertyControlProps,
   PropertyEditor,
   PropertyOnClick,
-} from '../../types';
+} from '../types';
 
 export interface ButtonEditorProps extends PropertyControlProps {
   prop: ComponentControlButton;

core/editors/src/editors/ColorEditor/ColorEditor.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { SketchPicker, ColorResult } from 'react-color';
 import { ComponentControlColor } from '@component-controls/specification';
 import { Button, Box } from 'theme-ui';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 export interface ColorEditorProps extends PropertyControlProps {
   prop: ComponentControlColor;

core/editors/src/editors/DateEditor/DateEditor.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, RefObject } from 'react';
 import { ComponentControlDate } from '@component-controls/specification';
 import { Input, Box } from 'theme-ui';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 const formatDate = (date: Date | undefined) => {
   if (date) {

core/editors/src/editors/FilesEditor/FilesEditor.tsx

@@ -2,7 +2,7 @@ import { FileReader } from 'global';
 import React, { ChangeEvent } from 'react';
 import { ComponentControlFiles } from '@component-controls/specification';
 import { Input } from 'theme-ui';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 function fileReaderPromise(file: File) {
   return new Promise<string>(resolve => {

core/editors/src/editors/NumberEditor/NumberEditor.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ChangeEvent } from 'react';
 import { ComponentControlNumber } from '@component-controls/specification';
 import { Input, Box, BoxProps } from 'theme-ui';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 export interface NumberEditorProps extends PropertyControlProps {
   prop: ComponentControlNumber;

core/editors/src/editors/ObjectEditor/ObjectEditor.tsx

@@ -1,15 +1,16 @@
 import React, { FC } from 'react';
 import { Button, Box } from 'theme-ui';
 import {
+  ControlTypes,
   ComponentControl,
   ComponentControlObject,
 } from '@component-controls/specification';
 import { mergeControlValues, getControlValues } from '@component-controls/core';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 import { FlexContainer } from '../../components/FlexContainer/FlexContainer';
 import { Popover } from '../../components/Popover/Popover';
 
-import { getPropertyEditor } from '../../prop-factory';
+import { PropertyEditors } from '../PropertyEditors';
 
 export interface ObjectEditorProps extends PropertyControlProps {
   prop: ComponentControlObject;
@@ -56,7 +57,7 @@ export const ObjectEditor: PropertyEditor<ObjectEditorProps> = ({
         return {
           name: key,
           prop: childProp,
-          node: getPropertyEditor(childProp.type),
+          node: AllPropertyEditors[childProp.type],
         };
       })
       .filter(p => p && p.node);
@@ -102,3 +103,11 @@ export const ObjectEditor: PropertyEditor<ObjectEditorProps> = ({
     </Popover>
   );
 };
+
+// avoid circular reference problem
+export const AllPropertyEditors: {
+  [name in ControlTypes]: PropertyEditor;
+} = {
+  ...PropertyEditors,
+  [ControlTypes.OBJECT]: ObjectEditor,
+};

core/editors/src/editors/ObjectEditor/index.ts

@@ -1 +1 @@
-export { ObjectEditor } from './ObjectEditor';
+export { ObjectEditor, AllPropertyEditors } from './ObjectEditor';

core/editors/src/editors/OptionsEditor/CheckboxEditor.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 import { ComponentControlOptions } from '@component-controls/specification';
 import { normalizeOptions, NormalizedOption } from './utils';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 interface CheckboxEditorProps extends PropertyControlProps {
   prop: ComponentControlOptions;

core/editors/src/editors/OptionsEditor/OptionsEditor.tsx

@@ -3,7 +3,7 @@ import ReactSelect from 'react-select';
 import styled from '@emotion/styled';
 import { ComponentControlOptions } from '@component-controls/specification';
 import { normalizeOptions } from './utils';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 import { RadiosEditor } from './RadiosEditor';
 import { CheckboxEditor } from './CheckboxEditor';

core/editors/src/editors/OptionsEditor/RadiosEditor.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { ComponentControlOptions } from '@component-controls/specification';
 import { normalizeOptions, NormalizedOption } from './utils';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 interface RadiosEditorProps extends PropertyControlProps {
   prop: ComponentControlOptions;

core/editors/src/editors/PropertyEditors.ts

@@ -0,0 +1,25 @@
+import { ControlTypes } from '@component-controls/specification';
+import { TextEditor } from './TextEditor';
+import { NumberEditor } from './NumberEditor';
+
+import { BooleanEditor } from './BooleanEditor';
+import { OptionsEditor } from './OptionsEditor';
+
+import { DateEditor } from './DateEditor';
+import { ColorEditor } from './ColorEditor';
+import { ButtonEditor } from './ButtonEditor';
+
+import { ArrayEditor } from './ArrayEditor';
+import { FilesEditor } from './FilesEditor';
+
+export const PropertyEditors = {
+  [ControlTypes.TEXT]: TextEditor,
+  [ControlTypes.NUMBER]: NumberEditor,
+  [ControlTypes.BOOLEAN]: BooleanEditor,
+  [ControlTypes.OPTIONS]: OptionsEditor,
+  [ControlTypes.DATE]: DateEditor,
+  [ControlTypes.COLOR]: ColorEditor,
+  [ControlTypes.BUTTON]: ButtonEditor,
+  [ControlTypes.ARRAY]: ArrayEditor,
+  [ControlTypes.FILES]: FilesEditor,
+};

core/editors/src/editors/TextEditor/TextEditor.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent } from 'react';
 import { ComponentControlText } from '@component-controls/specification';
 import { Input, Textarea } from 'theme-ui';
-import { PropertyControlProps, PropertyEditor } from '../../types';
+import { PropertyControlProps, PropertyEditor } from '../types';
 
 export interface TextEditorProps extends PropertyControlProps {
   prop: ComponentControlText;

core/editors/src/editors/prop-factory.ts

@@ -0,0 +1,7 @@
+import { ControlTypes } from '@component-controls/specification';
+import { PropertyEditor } from './types';
+
+import { AllPropertyEditors } from './ObjectEditor';
+
+export const getPropertyEditor = (type: ControlTypes): PropertyEditor =>
+  AllPropertyEditors[type];

core/editors/src/forms/ControlsTable/ControlEditorsTable.tsx

@@ -12,7 +12,7 @@ import {
 } from '@component-controls/core';
 
 import { Tab, Tabs, TabList, TabPanel } from '../../components/Tabs/Tabs';
-import { ControlsEditorsTableProps } from '../../types';
+import { ControlsEditorsTableProps } from '../../editors/types';
 import { ActionBar } from '../../components/ActionBar/ActionBar';
 
 import { PropertyEditorRow } from './PropEditorRow';

core/editors/src/forms/ControlsTable/PropEditorRow.tsx

@@ -6,9 +6,9 @@ import {
 import styled from '@emotion/styled';
 import { LoadedComponentControl } from '@component-controls/core';
 
-import { getPropertyEditor } from '../../prop-factory';
+import { getPropertyEditor } from '../../editors/prop-factory';
 import { FlexContainer } from '../../components/FlexContainer/FlexContainer';
-import { PropertyEditor } from '../../types';
+import { PropertyEditor } from '../../editors/types';
 
 const StyledTR = styled.tr<{}>(({ theme }) => ({
   //@ts-ignore

core/editors/src/index.ts

@@ -1,4 +1,4 @@
-export * from './prop-factory';
-export * from './types';
+export * from './editors/prop-factory';
+export * from './editors/types';
 export * from './forms/ControlsTable/ControlEditorsTable';
 export { FlexContainer } from './components/FlexContainer/FlexContainer';