Context separated to its own file

src/components/Builder.tsx

@@ -1,11 +1,12 @@
-import React, { createContext, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Iterator } from './Iterator';
 import { colors } from '../constants/colors';
 import { normalizeTree } from '../utils/normalizeTree';
 import { denormalizeTree } from '../utils/denormalizeTree';
 import uniqid from 'uniqid';
 import { assignIds } from '../utils/assignIds';
+import { BuilderContextProvider } from './Context';
 
 /* Configurable components */
 
@@ -89,19 +90,6 @@ export interface BuilderProps {
   onChange?: (data: any) => any;
 }
 
-export interface BuilderContextProps {
-  fields: BuilderFieldProps[];
-  data: any;
-  components: BuilderComponentsProps;
-  strings: Strings;
-  setData: React.Dispatch<any>;
-  onChange: (data: any) => void;
-}
-
-export const BuilderContext = createContext<BuilderContextProps>(
-  {} as BuilderContextProps
-);
-
 export const defaultComponents: BuilderComponentsProps = {
   form: {
     Input,
@@ -126,33 +114,6 @@ export const Builder: React.FC<BuilderProps> = ({
   let normalizedData: any;
   originalData = assignIds(originalData);
 
-  components = {
-    ...defaultComponents,
-    ...components,
-    form: { ...defaultComponents.form, ...components.form },
-  };
-
-  strings = {
-    ...defaultStrings,
-    ...strings,
-    component: {
-      ...defaultStrings.component,
-      ...strings.component,
-    },
-    form: {
-      ...defaultStrings.form,
-      ...strings.form,
-    },
-    group: {
-      ...defaultStrings.group,
-      ...strings.group,
-    },
-    operators: {
-      ...defaultStrings.operators,
-      ...strings.operators,
-    },
-  };
-
   if (originalData.length === 0) {
     originalData = [
       {
@@ -189,19 +150,17 @@ export const Builder: React.FC<BuilderProps> = ({
   };
 
   return (
-    <BuilderContext.Provider
-      value={{
-        fields,
-        components,
-        strings,
-        data,
-        setData,
-        onChange: handleChange,
-      }}
+    <BuilderContextProvider
+      fields={fields}
+      components={components}
+      strings={strings}
+      data={data}
+      setData={setData}
+      onChange={handleChange}
     >
       <StyledBuilder>
         <Iterator originalData={data} filteredData={filteredData} />
       </StyledBuilder>
-    </BuilderContext.Provider>
+    </BuilderContextProvider>
   );
 };

src/components/Component/index.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
-import { BuilderFieldOperator, BuilderContext } from '../Builder';
+import { BuilderFieldOperator } from '../Builder';
+import { BuilderContext } from '../Context';
 import { FieldSelect } from '../Widgets/FieldSelect';
 import { Boolean } from '../Widgets/Boolean';
 import { Select } from '../Widgets/Select';

src/components/Context.tsx

@@ -0,0 +1,76 @@
+import React, { createContext } from 'react';
+import {
+  BuilderFieldProps,
+  BuilderComponentsProps,
+  defaultComponents,
+} from './Builder';
+import { strings as defaultStrings, Strings } from '../constants/strings';
+
+export interface BuilderContextProps {
+  fields: BuilderFieldProps[];
+  data: any;
+  components: BuilderComponentsProps;
+  strings: Strings;
+  setData: React.Dispatch<any>;
+  onChange: (data: any) => void;
+}
+
+export const BuilderContext = createContext<BuilderContextProps>(
+  {} as BuilderContextProps
+);
+
+export interface BuilderContextProviderProps extends BuilderContextProps {
+  children: React.ReactNode | React.ReactNodeArray;
+}
+
+export const BuilderContextProvider: React.FC<BuilderContextProviderProps> = ({
+  fields,
+  components,
+  strings,
+  data,
+  setData,
+  onChange,
+  children,
+}) => {
+  components = {
+    ...defaultComponents,
+    ...components,
+    form: { ...defaultComponents.form, ...components.form },
+  };
+
+  strings = {
+    ...defaultStrings,
+    ...strings,
+    component: {
+      ...defaultStrings.component,
+      ...strings.component,
+    },
+    form: {
+      ...defaultStrings.form,
+      ...strings.form,
+    },
+    group: {
+      ...defaultStrings.group,
+      ...strings.group,
+    },
+    operators: {
+      ...defaultStrings.operators,
+      ...strings.operators,
+    },
+  };
+
+  return (
+    <BuilderContext.Provider
+      value={{
+        fields,
+        components,
+        strings,
+        data,
+        setData,
+        onChange,
+      }}
+    >
+      {children}
+    </BuilderContext.Provider>
+  );
+};

src/components/Group/index.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
-import { BuilderGroupValues, BuilderContext } from '../Builder';
+import { BuilderGroupValues } from '../Builder';
+import { BuilderContext } from '../Context';
 import uniqid from 'uniqid';
 import { clone } from '../../utils/clone';
 

src/components/Widgets/Boolean.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { BuilderContext } from '../Builder';
+import { BuilderContext } from '../Context'
 import { clone } from '../../utils/clone';
 
 export interface BooleanProps {

src/components/Widgets/FieldSelect.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { BuilderContext } from '../Builder';
+import { BuilderContext } from '../Context'
 import { clone } from '../../utils/clone';
 import { isOptionList } from '../../utils/types';
 

src/components/Widgets/Input.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { isStringArray, isUndefined } from '../../utils/types';
-import { BuilderContext } from '../Builder';
+import { BuilderContext } from '../Context'
 import { clone } from '../../utils/clone';
 
 interface InputProps {

src/components/Widgets/OperatorSelect.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
-import { BuilderContext, BuilderFieldOperator } from '../Builder';
+import { BuilderFieldOperator } from '../Builder';
+import { BuilderContext } from '../Context'
 import { clone } from '../../utils/clone';
 import { isStringArray } from '../../utils/types';
 

src/components/Widgets/Select.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { BuilderContext } from '../Builder';
+import { BuilderContext } from '../Context'
 import { clone } from '../../utils/clone';
 
 export interface SelectProps {

src/components/Widgets/SelectMulti.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { BuilderContext } from '../Builder';
+import { BuilderContext } from '../Context'
 import { clone } from '../../utils/clone';
 
 export interface SelectMultiProps {

src/index.tsx

@@ -9,6 +9,8 @@ export {
   defaultComponents,
 } from './components/Builder';
 
+export { BuilderContext, BuilderContextProps } from './components/Context';
+
 /* Configurable components */
 
 export { Input, InputProps } from './components/Form/Input';

test/components/Component/index.test.tsx

@@ -1,13 +1,13 @@
-import { Component } from '../../../src/components/Component/index';
-import { shallow, mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import React from 'react';
 import {
-  BuilderContext,
-  BuilderFieldProps,
   BuilderComponentsProps,
+  BuilderFieldProps,
   defaultComponents,
 } from '../../../src/components/Builder';
+import { Component } from '../../../src/components/Component/index';
+import { BuilderContext } from '../../../src/components/Context';
 import { strings } from '../../../src/constants/strings';
-import React from 'react';
 
 const components: BuilderComponentsProps = defaultComponents;
 const fields: BuilderFieldProps[] = [

test/components/Group/index.test.tsx

@@ -1,13 +1,13 @@
-import { Group } from '../../../src/components/Group/index';
-import { shallow, mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import React from 'react';
 import {
-  BuilderContext,
-  BuilderFieldProps,
   BuilderComponentsProps,
+  BuilderFieldProps,
   defaultComponents,
 } from '../../../src/components/Builder';
+import { BuilderContext } from '../../../src/components/Context';
+import { Group } from '../../../src/components/Group/index';
 import { strings } from '../../../src/constants/strings';
-import React from 'react';
 
 const components: BuilderComponentsProps = defaultComponents;
 const fields: BuilderFieldProps[] = [

test/components/Iterator.test.tsx

@@ -2,10 +2,10 @@ import { mount, shallow } from 'enzyme';
 import React from 'react';
 import {
   BuilderComponentsProps,
-  BuilderContext,
   BuilderFieldProps,
   defaultComponents,
 } from '../../src/components/Builder';
+import { BuilderContext } from '../../src/components/Context';
 import { Iterator } from '../../src/components/Iterator';
 import { strings } from '../../src/constants/strings';
 

test/components/Widgets/Boolean.test.tsx

@@ -1,12 +1,12 @@
-import { Boolean } from '../../../src/components/Widgets/Boolean';
+import { mount, shallow } from 'enzyme';
+import React from 'react';
 import {
-  BuilderContext,
-  BuilderFieldProps,
   BuilderComponentsProps,
+  BuilderFieldProps,
   defaultComponents,
 } from '../../../src/components/Builder';
-import { shallow, mount } from 'enzyme';
-import React from 'react';
+import { BuilderContext } from '../../../src/components/Context';
+import { Boolean } from '../../../src/components/Widgets/Boolean';
 
 const components: BuilderComponentsProps = defaultComponents;
 const fields: BuilderFieldProps[] = [

test/components/Widgets/FieldSelect.test.tsx

@@ -1,12 +1,12 @@
-import { FieldSelect } from '../../../src/components/Widgets/FieldSelect';
+import { mount, shallow } from 'enzyme';
+import React from 'react';
 import {
-  BuilderContext,
-  BuilderFieldProps,
   BuilderComponentsProps,
+  BuilderFieldProps,
   defaultComponents,
 } from '../../../src/components/Builder';
-import { shallow, mount } from 'enzyme';
-import React from 'react';
+import { BuilderContext } from '../../../src/components/Context';
+import { FieldSelect } from '../../../src/components/Widgets/FieldSelect';
 
 const components: BuilderComponentsProps = defaultComponents;
 const fields: BuilderFieldProps[] = [

test/components/Widgets/Input.test.tsx

@@ -1,12 +1,12 @@
-import { Input } from '../../../src/components/Widgets/Input';
+import { mount, shallow } from 'enzyme';
+import React from 'react';
 import {
-  BuilderContext,
-  BuilderFieldProps,
   BuilderComponentsProps,
+  BuilderFieldProps,
   defaultComponents,
 } from '../../../src/components/Builder';
-import { shallow, mount } from 'enzyme';
-import React from 'react';
+import { BuilderContext } from '../../../src/components/Context';
+import { Input } from '../../../src/components/Widgets/Input';
 
 const components: BuilderComponentsProps = defaultComponents;
 const fields: BuilderFieldProps[] = [

test/components/Widgets/OperatorSelect.test.tsx

@@ -1,15 +1,15 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
 import {
-  OperatorSelect,
-  OperatorSelectValuesProps,
-} from '../../../src/components/Widgets/OperatorSelect';
-import {
-  BuilderContext,
-  BuilderFieldProps,
   BuilderComponentsProps,
+  BuilderFieldProps,
   defaultComponents,
 } from '../../../src/components/Builder';
-import { shallow, mount } from 'enzyme';
-import React from 'react';
+import { BuilderContext } from '../../../src/components/Context';
+import {
+  OperatorSelect,
+  OperatorSelectValuesProps,
+} from '../../../src/components/Widgets/OperatorSelect';
 
 const components: BuilderComponentsProps = defaultComponents;
 const fields: BuilderFieldProps[] = [

test/components/Widgets/Select.test.tsx

@@ -1,12 +1,12 @@
-import { Select } from '../../../src/components/Widgets/Select';
+import { mount, shallow } from 'enzyme';
+import React from 'react';
 import {
-  BuilderContext,
-  BuilderFieldProps,
   BuilderComponentsProps,
+  BuilderFieldProps,
   defaultComponents,
 } from '../../../src/components/Builder';
-import { shallow, mount } from 'enzyme';
-import React from 'react';
+import { BuilderContext } from '../../../src/components/Context';
+import { Select } from '../../../src/components/Widgets/Select';
 
 const components: BuilderComponentsProps = defaultComponents;
 const fields: BuilderFieldProps[] = [