refactor: Cleaned up drag and drop (#298)

Author: Jaryt

src/App.tsx

@@ -1,16 +1,16 @@
 import algoliasearch from 'algoliasearch';
 import { createStore, StoreProvider } from 'easy-peasy';
 import { useRef } from 'react';
-import Toast from './components/atoms/Toast';
-import ToolTip from './components/atoms/Tooltip';
-import ConfirmationModal from './components/containers/ConfirmationModal';
-import KBarList from './components/containers/KBarList';
-import EditorPane from './components/panes/EditorPane';
-import NavigationPane from './components/panes/NavigationPane';
-import WorkflowsPane from './components/panes/WorkflowsPane';
+import Toast from './core/components/atoms/Toast';
+import ToolTip from './core/components/atoms/Tooltip';
+import ConfirmationModal from './core/components/containers/ConfirmationModal';
+import KBarList from './core/components/containers/KBarList';
+import EditorPane from './core/components/panes/EditorPane';
+import NavigationPane from './core/components/panes/NavigationPane';
+import WorkflowsPane from './core/components/panes/WorkflowsPane';
 import './index.css';
-import useWindowDimensions, { useStoreState } from './state/Hooks';
-import Store from './state/Store';
+import useWindowDimensions, { useStoreState } from './core/state/Hooks';
+import Store from './core/state/Store';
 export const store = createStore(Store);
 export const inspectorWidth = 400;
 

src/components/atoms/AddButton.tsx src/core/components/atoms/AddButton.tsxsrc/components/atoms/AddButton.tsx renamed to src/core/components/atoms/AddButton.tsx

@@ -7,7 +7,7 @@ const AddButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
       type="button"
       {...props}
       className={
-        `bg-circle-gray-300 transition-colors h-8 w-8 rounded ${props.className} 
+        `bg-circle-gray-300 transition-colors h-8 w-8 rounded ${props.className}
       ${props.disabled ? 'opacity-50 cursor-default' : 'hover:bg-circle-gray-400 '}`
       }
     >

src/components/atoms/Button.tsx src/core/components/atoms/Button.tsxsrc/components/atoms/Button.tsx renamed to src/core/components/atoms/Button.tsx

@@ -1,6 +1,6 @@
 import InspectableMapping, {
   GenerableInfoType,
-} from '../../mappings/InspectableMapping';
+} from '../../../mappings/InspectableMapping';
 
 const ComponentInfo = ({
   type,

src/components/atoms/Card.tsx src/core/components/atoms/Card.tsxsrc/components/atoms/Card.tsx renamed to src/core/components/atoms/Card.tsx

@@ -5,7 +5,7 @@ import {
   OrbImport,
   OrbRef,
 } from '@circleci/circleci-config-sdk/dist/src/lib/Orb';
-import InspectableMapping from '../../mappings/InspectableMapping';
+import InspectableMapping from '../../../mappings/InspectableMapping';
 import { useStoreActions } from '../../state/Hooks';
 import { InspectorDefinitionMenuNav } from '../menus/definitions/InspectorDefinitionMenu';
 
@@ -35,7 +35,7 @@ export const flattenGenerable = (data: Generable, nested?: boolean) => {
   )[0];
 };
 
-const Definition = (props: {
+const Definition = ({ data, ...props}: {
   data: Generable | OrbRef<AnyParameterLiteral>;
   type: InspectableMapping;
   index: number;
@@ -47,27 +47,27 @@ const Definition = (props: {
 
   return (
     <button
-      className="w-full mb-2 p-4 py-2 cursor-pointer text-left text-circle-black 
+      className="w-full mb-2 p-4 py-2 cursor-pointer text-left text-circle-black
       bg-white border border-circle-gray-300 rounded-md2 hover:border-gray-700 text-base"
       draggable="true"
       onDragStart={(e) => {
-        const type = props.type;
+        const dataMapping = props.type;
 
-        if (type?.dragTarget) {
-          setDragging({ dataType: type, data: props.data });
+        if (dataMapping?.dragTarget) {
+          setDragging({ dataMapping, data });
         }
       }}
       onClick={(e) => {
-        if (props.data instanceof CircleCI.orb.OrbRef) {
+        if (data instanceof CircleCI.orb.OrbRef) {
           return;
         }
 
-        const flattened = flattenGenerable(props.data);
+        const flattened = flattenGenerable(data);
 
         navigateTo({
           component: InspectorDefinitionMenuNav,
           props: {
-            data: props.data,
+            data,
             editing: true,
             values: flattened,
             dataType: props.type,
@@ -76,7 +76,7 @@ const Definition = (props: {
         });
       }}
     >
-      <Summary data={props.data} />
+      <Summary data={data} />
     </button>
   );
 };

src/components/atoms/ComponentInfo.tsx …/core/components/atoms/ComponentInfo.tsxsrc/components/atoms/ComponentInfo.tsx renamed to src/core/components/atoms/ComponentInfo.tsx src/components/atoms/ComponentInfo.tsx renamed to src/core/components/atoms/ComponentInfo.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { inspectorWidth } from '../../App';
+import { inspectorWidth } from '../../../App';
 
 export const Footer = ({
   children,