Complete refactor. Add comments and reorganize files

package.json

@@ -52,10 +52,7 @@
   "dependencies": {
     "@itsjonq/elm": "^0.0.6",
     "@itsjonq/is": "^0.0.2",
-    "deep-equal": "^1.1.1",
-    "memoize-one": "^5.1.1",
     "react-useportal": "^1.0.13",
-    "reselect": "4.0.0",
     "tinycolor2": "^1.4.1",
     "unistore": "^3.5.1"
   },

src/Controls.js → src/components/Controls.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import usePortal from 'react-useportal';
 import { View } from '@itsjonq/elm';
-import { updateField } from './store';
-import { useControls } from './useControls';
+
+import { updateField } from '../store';
+import { useControls } from '../hooks';
 import { Field } from './Field';
 
 export function BaseControls(props) {

src/Field.js → src/components/Field.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { View } from '@itsjonq/elm';
-import { createUniqueIdFactory } from './utils';
+
+import { createUniqueIdFactory } from '../utils';
 
 const fieldId = createUniqueIdFactory('Field');
 

src/__tests__/ControlPanel.test.js → src/components/__tests__/Controls.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { cy } from '@itsjonq/cyan';
-import { BaseControls as Controls } from '../index';
+import { BaseControls as Controls } from '../../index';
 
 describe('Controls', () => {
 	test('should render', () => {

src/components/index.js

@@ -0,0 +1 @@
+export * from './Controls';

src/hooks/index.js

@@ -0,0 +1 @@
+export * from './useControls';

src/hooks/useControls.js

@@ -0,0 +1,64 @@
+import { useRef, useEffect, useState } from 'react';
+
+import { store, getFields, resetFields } from '../store';
+import * as knobs from '../knobs';
+
+/**
+ * A special hook that "connects" the store with a rendered component.
+ * The hook callback arguments provide knobs that allow for the user
+ * to add fields to the store.
+ */
+export function useControls() {
+	const [fields, setFields] = useState(getFields());
+	const ref = useRef(false);
+
+	useEffect(() => {
+		const updateState = () => setFields(getFields());
+
+		/**
+		 * Forces an update during the initial render phase.
+		 * This is required after the initial connection to the store.
+		 * Otherwise, the added fields do not show on first render.
+		 */
+		if (!ref.current) {
+			ref.current = true;
+			updateState();
+		}
+
+		/**
+		 * A subscription is established to the store to "connect" to store
+		 * state together with this hook state.
+		 */
+		store.subscribe(updateState);
+
+		return () => {
+			/**
+			 * The default behaviour is to remove all fields within the store
+			 * the moment the component is unmounted from view.
+			 */
+			resetFields();
+			/**
+			 * The subscription is removed from the store on unmount.
+			 */
+			store.unsubscribe(updateState);
+		};
+	}, [ref, setFields]);
+
+	const attributes = mapStateToProps(fields);
+
+	return { ...knobs, fields, attributes };
+}
+
+/**
+ * Remaps the collection of fields into a Object of key/value pairs.
+ * @param {Array<Object>} state The fields.
+ * @returns {Object}
+ */
+function mapStateToProps(state) {
+	return state.reduce((props, item) => {
+		return {
+			...props,
+			[item.prop]: item.value,
+		};
+	}, {});
+}

src/index.js

@@ -1,4 +1,4 @@
-export * from './useControls';
-export * from './Controls';
+export * from './components';
+export * from './hooks';
 export * from './knobs';
 export * from './store';

src/knobs/index.js

@@ -0,0 +1 @@
+export * from './knobs';