refactor: Cleaned up drag and drop

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.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/ComponentInfo.tsx → src/core/components/atoms/ComponentInfo.tsx

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

src/components/atoms/Definition.tsx → src/core/components/atoms/Definition.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/Footer.tsx → src/core/components/atoms/Footer.tsx

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

src/components/atoms/OpenConfig.tsx → src/core/components/atoms/OpenConfig.tsx

@@ -5,7 +5,7 @@ import {
   useStoreActions,
   useStoreState,
 } from '../../state/Hooks';
-import { Button } from '../atoms/Button';
+import { Button } from './Button';
 
 export const OpenConfig = () => {
   const inputFile = useRef<HTMLInputElement>(null);

src/components/atoms/Select.tsx → src/core/components/atoms/Select.tsx

@@ -61,7 +61,7 @@ const Select = (props: SelectProps) => {
         props.borderless
           ? 'border-transparent'
           : ' border-circle-gray-300 shadow-sm'
-      } px-2 hover:border-circle-gray-700 border 
+      } px-2 hover:border-circle-gray-700 border
         ${props.className}`}
     >
       <div className="flex flex-row w-full">

src/components/atoms/WorkflowSelector.tsx → src/core/components/atoms/WorkflowSelector.tsx

@@ -1,7 +1,7 @@
 import { v4 } from 'uuid';
 import WorkflowIcon from '../../icons/components/WorkflowIcon';
 import ExpandIcon from '../../icons/ui/ExpandIcon';
-import { WorkflowStage } from '../../mappings/components/WorkflowMapping';
+import { WorkflowStage } from '../../../mappings/components/WorkflowMapping';
 import { useStoreActions, useStoreState } from '../../state/Hooks';
 import DropdownContainer from '../containers/DropdownContainer';
 

src/components/atoms/form/ExecutorProperty.tsx → src/core/components/atoms/form/ExecutorProperty.tsx

@@ -31,7 +31,7 @@ export const ExecutorProperty = ({
       label={label || "Executor"}
       as="select"
       name={`${name}.name`}
-      className="w-full"  
+      className="w-full"
       {...props}
       dependent={(executorName: string) => {
         const splitName = executorName?.split('/');

src/components/containers/ConfirmationModal.tsx → src/core/components/containers/ConfirmationModal.tsx

@@ -33,7 +33,7 @@ const confirmDialogue: ConfirmationDialogueTemplates = {
   },
   delete: {
     header: `Delete ${placeholder} ${placeholder}?`,
-    body: `When you delete the ${placeholder} named ${placeholder}, it will be removed from each component that uses it. 
+    body: `When you delete the ${placeholder} named ${placeholder}, it will be removed from each component that uses it.
     This definition has %s dependent components.`,
     button: 'Delete',
     buttonVariant: 'dangerous',

src/components/containers/DefinitionsContainer.tsx → src/core/components/containers/DefinitionsContainer.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import InspectableMapping from '../../mappings/InspectableMapping';
+import InspectableMapping from '../../../mappings/InspectableMapping';
 import { mapDefinitions, NamedGenerable } from '../../state/DefinitionStore';
 import { useStoreActions, useStoreState } from '../../state/Hooks';
 import AddButton from '../atoms/AddButton';

src/components/containers/ExternalLinks.tsx → src/core/components/containers/ExternalLinks.tsx

@@ -1,5 +1,5 @@
 import MoreIcon from '../../icons/ui/MoreIcon';
-import DropdownContainer from '../containers/DropdownContainer';
+import DropdownContainer from './DropdownContainer';
 
 export const ExternalLinks = () => {
   const links = [

src/components/containers/HeaderMenu.tsx → src/core/components/containers/HeaderMenu.tsx

@@ -1,6 +1,6 @@
+import { FlowTools } from '../../../flow/components/FlowTools';
 import { Button } from '../atoms/Button';
 import { ExternalLinks } from './ExternalLinks';
-import { FlowTools } from '../flow/FlowTools';
 import PreviewToolbox from './PreviewToolbox';
 
 export default function HeaderMenu() {

src/components/containers/OrbImportsContainer.tsx → src/core/components/containers/OrbImportsContainer.tsx

@@ -21,11 +21,11 @@ const OrbImportsContainer = (props: OrbImportProps) => {
   const ref = useRef(null);
   const orbDefinitions = useMemo(
     () =>
-    
+
       mapDefinitions(items, (orb) => {
         return (
           <button
-            className="w-full mb-2 p-4 py-2 text-sm cursor-pointer text-left text-circle-black 
+            className="w-full mb-2 p-4 py-2 text-sm cursor-pointer text-left text-circle-black
       bg-white border border-circle-gray-300 rounded-md2 flex flex-row hover:border-black"
             onClick={() => {
               navigateTo({

src/components/containers/ParametersContainer.tsx → src/core/components/containers/ParametersContainer.tsx

@@ -1,7 +1,7 @@
 import { FieldArray, useField } from 'formik';
 import ParameterIcon from '../../icons/components/ParameterIcon';
-import { ParameterMapping } from '../../mappings/components/ParameterMapping';
-import GenerableMapping from '../../mappings/GenerableMapping';
+import { ParameterMapping } from '../../../mappings/components/ParameterMapping';
+import GenerableMapping from '../../../mappings/GenerableMapping';
 import { useStoreActions } from '../../state/Hooks';
 import { Button } from '../atoms/Button';
 import { Empty } from '../atoms/Empty';
@@ -72,7 +72,7 @@ const ParameterContainer = (props: {
             <Empty
               label="No Parameters Yet"
               Logo={ParameterIcon}
-              description="Add a parameter by clicking the button above 
+              description="Add a parameter by clicking the button above
               to implement dynamic functionality."
             />
           )}

src/components/containers/inspector/CommandInspector.tsx → src/core/components/containers/inspector/CommandInspector.tsx

@@ -1,6 +1,6 @@
 import { FormikValues } from 'formik';
 import CommandIcon from '../../../icons/components/CommandIcon';
-import { CommandMapping } from '../../../mappings/components/CommandMapping';
+import { CommandMapping } from '../../../../mappings/components/CommandMapping';
 import { DefinitionsModel } from '../../../state/DefinitionStore';
 import { useStoreActions } from '../../../state/Hooks';
 import AddButton from '../../atoms/AddButton';

src/components/containers/inspector/JobInspector.tsx → src/core/components/containers/inspector/JobInspector.tsx

@@ -2,8 +2,8 @@ import { executors, Job, orb } from '@circleci/circleci-config-sdk';
 import { FormikValues, useField } from 'formik';
 import CommandIcon from '../../../icons/components/CommandIcon';
 import DeleteItemIcon from '../../../icons/ui/DeleteItemIcon';
-import { UNDEFINED_EXECUTOR } from '../../../mappings/components/ExecutorMapping';
-import { JobMapping } from '../../../mappings/components/JobMapping';
+import { UNDEFINED_EXECUTOR } from '../../../../mappings/components/ExecutorMapping';
+import { JobMapping } from '../../../../mappings/components/JobMapping';
 import {
   DefinitionsModel,
   DefinitionSubscriptions,

src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx → src/core/components/containers/inspector/subtypes/ExecutorSubtypes.tsx

@@ -1,5 +1,5 @@
 import { executors } from '@circleci/circleci-config-sdk';
-import { SubTypeMapping } from '../../../../mappings/GenerableMapping';
+import { SubTypeMapping } from '../../../../../mappings/GenerableMapping';
 import InspectorProperty from '../../../atoms/form/InspectorProperty';
 
 export interface ExecutorSubTypes {

src/components/containers/inspector/subtypes/ParameterSubtypes.tsx → src/core/components/containers/inspector/subtypes/ParameterSubtypes.tsx

@@ -1,5 +1,5 @@
 import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Reusable';
-import { SubTypeMapping } from '../../../../mappings/GenerableMapping';
+import { SubTypeMapping } from '../../../../../mappings/GenerableMapping';
 import InspectorProperty from '../../../atoms/form/InspectorProperty';
 import ListProperty from '../../../atoms/form/ListProperty';
 

src/components/menus/definitions/DefinitionsMenu.tsx → src/core/components/menus/definitions/DefinitionsMenu.tsx

@@ -1,8 +1,8 @@
 import { Form, Formik } from 'formik';
 import WorkflowIcon from '../../../icons/components/WorkflowIcon';
-import { WorkflowStage } from '../../../mappings/components/WorkflowMapping';
-import { dataMappings } from '../../../mappings/GenerableMapping';
-import InspectableMapping from '../../../mappings/InspectableMapping';
+import { WorkflowStage } from '../../../../mappings/components/WorkflowMapping';
+import { dataMappings } from '../../../../mappings/GenerableMapping';
+import InspectableMapping from '../../../../mappings/InspectableMapping';
 import { useStoreActions, useStoreState } from '../../../state/Hooks';
 import { NavigationComponent } from '../../../state/Store';
 import { Button } from '../../atoms/Button';

src/components/menus/definitions/InspectorDefinitionMenu.tsx → src/core/components/menus/definitions/InspectorDefinitionMenu.tsx

@@ -1,6 +1,6 @@
 import { Form, Formik } from 'formik';
 import EditIcon from '../../../icons/ui/EditIcon';
-import InspectableMapping from '../../../mappings/InspectableMapping';
+import InspectableMapping from '../../../../mappings/InspectableMapping';
 import {
   DefinitionsModel,
   DefinitionSubscriptions,
@@ -14,7 +14,7 @@ import ParameterContainer from '../../containers/ParametersContainer';
 import { SubTypeMenuPageProps } from '../SubTypeMenu';
 import TabbedMenu from '../TabbedMenu';
 
-type InspectorDefinitionProps = DataModel & {
+type InspectorDefinitionProps = DataModel<any, InspectableMapping> & {
   values: Record<string, object>;
   dependencies: Array<DefinitionSubscriptions>;
   editing?: boolean;
@@ -62,12 +62,11 @@ const getDependencies = (
  * For Orb definitions see OrbDefinitionsMenu.tsx
  * For Step definitions see StepDefinitionMenu.tsx
  */
-const InspectorDefinitionMenu = (props: InspectorDefinitionProps) => {
+const InspectorDefinitionMenu = ({ dataMapping, ...props}: InspectorDefinitionProps) => {
   const definitions = useStoreState((state) => state.definitions);
   const navigateBack = useStoreActions((actions) => actions.navigateBack);
   const setGuideStep = useStoreActions((actions) => actions.setGuideStep);
   const guideStep = useStoreState((state) => state.guideStep);
-  const dataMapping = props.dataType;
   const submitToStore = useStoreActions(
     (actions) =>
       (props.editing
@@ -320,12 +319,12 @@ const InspectorDefinitionMenuNav: NavigationComponent = {
   Label: (props: InspectorDefinitionProps) => {
     return (
       <p>
-        {props.editing ? 'Edit' : 'New'} {props.dataType?.name.singular}
+        {props.editing ? 'Edit' : 'New'} {props.dataMapping?.name.singular}
       </p>
     );
   },
   Icon: (props: InspectorDefinitionProps) => {
-    let iconComponent = props.dataType?.components.icon;
+    let iconComponent = props.dataMapping?.components.icon;
 
     if (!iconComponent) {
       return null;

src/components/menus/definitions/OrbDefinitionsMenu.tsx → src/core/components/menus/definitions/OrbDefinitionsMenu.tsx

@@ -10,8 +10,8 @@ import {
 } from '@circleci/circleci-config-sdk/dist/src/lib/Orb/types/Orb.types';
 import { useEffect, useState } from 'react';
 import Loading from '../../../icons/ui/Loading';
-import { typeToMapping } from '../../../mappings/GenerableMapping';
-import InspectableMapping from '../../../mappings/InspectableMapping';
+import { typeToMapping } from '../../../../mappings/GenerableMapping';
+import InspectableMapping from '../../../../mappings/InspectableMapping';
 import { useStoreActions, useStoreState } from '../../../state/Hooks';
 import { NavigationComponent } from '../../../state/Store';
 import { Button } from '../../atoms/Button';

src/components/menus/definitions/OrbImportMenu.tsx → src/core/components/menus/definitions/OrbImportMenu.tsx

@@ -9,7 +9,7 @@ import {
   useSearchBox,
   UseSearchBoxProps,
 } from 'react-instantsearch-hooks-web';
-import { searchClient } from '../../../App';
+import { searchClient } from '../../../../App';
 import DeleteItemIcon from '../../../icons/ui/DeleteItemIcon';
 import Loading from '../../../icons/ui/Loading';
 import { useStoreActions } from '../../../state/Hooks';

src/components/menus/definitions/subtypes/ParameterTypePage.tsx → src/core/components/menus/definitions/subtypes/ParameterTypePage.tsx

@@ -1,5 +1,5 @@
 import ParameterIcon from '../../../../icons/components/ParameterIcon';
-import InspectableMapping from '../../../../mappings/InspectableMapping';
+import InspectableMapping from '../../../../../mappings/InspectableMapping';
 import { NavigationComponent } from '../../../../state/Store';
 import Card from '../../../atoms/Card';
 import BreadCrumbs from '../../../containers/BreadCrumbs';

src/components/menus/stage/StagedJobMenu.tsx → src/core/components/menus/stage/StagedJobMenu.tsx

@@ -175,7 +175,7 @@ const StagedJobMenu = ({ source, values, id }: WorkflowJobMenuProps) => {
               >
                 <InspectorProperty type="button" name="name" label="Source Job">
                   <div
-                    className="w-full mb-2 p-2 text-sm  text-left text-circle-black 
+                    className="w-full mb-2 p-2 text-sm  text-left text-circle-black
                   bg-circle-gray-200 border border-circle-gray-300 rounded flex flex-row"
                   >
                     <JobIcon className="ml-1 mr-2 w-5 h-5" />

src/components/panes/EditorPane.tsx → src/core/components/panes/EditorPane.tsx

@@ -6,10 +6,10 @@ import {
   useStoreActions,
   useStoreState,
 } from '../../state/Hooks';
-import { version } from '../../version.json';
+import { version } from '../../../version.json';
 import { Button } from '../atoms/Button';
 import { OpenConfig } from '../atoms/OpenConfig';
-import templates from '../../examples';
+import templates from '../../../examples';
 import Editor, { DiffEditor } from '@monaco-editor/react';
 
 const EditorPane = (props: any) => {

src/components/panes/NavigationPane.tsx → src/core/components/panes/NavigationPane.tsx

@@ -1,5 +1,5 @@
 import { FocusScope } from 'react-aria';
-import { inspectorWidth } from '../../App';
+import { inspectorWidth } from '../../../App';
 import { useStoreState } from '../../state/Hooks';
 
 interface NavigationPaneProps {

src/components/panes/WorkflowsPane.tsx → src/core/components/panes/WorkflowsPane.tsx

@@ -1,8 +1,8 @@
 import Logo from '../../icons/ui/Logo';
 import HeaderMenu from '../containers/HeaderMenu';
 // import WorkflowContainer from '../containers/WorkflowContainer';
-import { GraphWrapper } from '../flow/Flow';
 import ReactFlow, { Background, BackgroundVariant, ControlButton, Controls } from 'reactflow';
+import { GraphWrapper } from '../../../flow/components/Flow';
 
 const WorkflowsPane = () => {
   return (
@@ -21,8 +21,8 @@ const WorkflowsPane = () => {
         <HeaderMenu />
       </header>
       <GraphWrapper className="z-10 border border-r-0 h-full border-b-0 border-circle-gray-300"></GraphWrapper>
- 
-      
+
+
     </div>
   );
 };