diff --git a/src/components/atoms/Toast.tsx b/src/core/components/atoms/Toast.tsx
similarity index 100%
rename from src/components/atoms/Toast.tsx
rename to src/core/components/atoms/Toast.tsx
diff --git a/src/components/atoms/Tooltip.tsx b/src/core/components/atoms/Tooltip.tsx
similarity index 100%
rename from src/components/atoms/Tooltip.tsx
rename to src/core/components/atoms/Tooltip.tsx
diff --git a/src/components/atoms/WorkflowSelector.tsx b/src/core/components/atoms/WorkflowSelector.tsx
similarity index 95%
rename from src/components/atoms/WorkflowSelector.tsx
rename to src/core/components/atoms/WorkflowSelector.tsx
index 21118e4..ac48d17 100644
--- a/src/components/atoms/WorkflowSelector.tsx
+++ b/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';
diff --git a/src/components/atoms/form/AdjacentStepListItem.tsx b/src/core/components/atoms/form/AdjacentStepListItem.tsx
similarity index 100%
rename from src/components/atoms/form/AdjacentStepListItem.tsx
rename to src/core/components/atoms/form/AdjacentStepListItem.tsx
diff --git a/src/components/atoms/form/ExecutorProperty.tsx b/src/core/components/atoms/form/ExecutorProperty.tsx
similarity index 98%
rename from src/components/atoms/form/ExecutorProperty.tsx
rename to src/core/components/atoms/form/ExecutorProperty.tsx
index 82ef582..36cd539 100644
--- a/src/components/atoms/form/ExecutorProperty.tsx
+++ b/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('/');
diff --git a/src/components/atoms/form/InspectorProperty.tsx b/src/core/components/atoms/form/InspectorProperty.tsx
similarity index 100%
rename from src/components/atoms/form/InspectorProperty.tsx
rename to src/core/components/atoms/form/InspectorProperty.tsx
diff --git a/src/components/atoms/form/ListProperty.tsx b/src/core/components/atoms/form/ListProperty.tsx
similarity index 100%
rename from src/components/atoms/form/ListProperty.tsx
rename to src/core/components/atoms/form/ListProperty.tsx
diff --git a/src/components/atoms/form/MatrixProperty.tsx b/src/core/components/atoms/form/MatrixProperty.tsx
similarity index 100%
rename from src/components/atoms/form/MatrixProperty.tsx
rename to src/core/components/atoms/form/MatrixProperty.tsx
diff --git a/src/components/atoms/form/StepListItem.tsx b/src/core/components/atoms/form/StepListItem.tsx
similarity index 100%
rename from src/components/atoms/form/StepListItem.tsx
rename to src/core/components/atoms/form/StepListItem.tsx
diff --git a/src/core/components/atoms/nodes/JobNode.tsx b/src/core/components/atoms/nodes/JobNode.tsx
new file mode 100644
index 0000000..6e03b41
--- /dev/null
+++ b/src/core/components/atoms/nodes/JobNode.tsx
@@ -0,0 +1,313 @@
+// import { Job, types, workflow } from '@circleci/circleci-config-sdk';
+// import { WorkflowJob } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Workflow';
+// import React, { useRef } from 'react';
+// import { Handle, isNode, NodeProps, Position } from 'react-flow-renderer';
+// import JobIcon from '../../../icons/components/JobIcon';
+// import JobOnHoldIcon from '../../../icons/components/JobOnHoldIcon';
+// import DeleteItemIcon from '../../../icons/ui/DeleteItemIcon';
+// import MinusIcon from '../../../icons/ui/MinusIcon';
+// import PlusIcon from '../../../icons/ui/PlusIcon';
+// import { JobMapping } from '../../../mappings/components/JobMapping';
+// import { useStoreActions, useStoreState } from '../../../state/Hooks';
+// import { StagedJobMenuNav } from '../../menus/stage/StagedJobMenu';
+// import { flattenGenerable } from '../Definition';
+
+// const formatPattern = (pattern: string) => {
+// if (!pattern.startsWith('^')) {
+// pattern = `^${pattern}`;
+// }
+// if (!pattern.endsWith('$')) {
+// pattern = `${pattern}$`;
+// }
+
+// return pattern;
+// };
+
+// const ConnectorIcon = (props: { filled: boolean; subtraction?: boolean }) => {
+// return (
+// <>
+// {props.subtraction ? (
+//
+// ) : (
+//
+// )}
+// >
+// );
+// };
+
+// const JobNode: React.FunctionComponent<
+// NodeProps & { data: workflow.WorkflowJob }
+// > = (props) => {
+// const elements = useStoreState(
+// (state) =>
+// state.definitions.workflows[state.selectedWorkflowId].value.elements,
+// );
+// const dragging = useStoreState((state) => state.dragging);
+// // const setWorkflowElements = useStoreActions(
+// // (actions) => actions.setWorkflowElements,
+// // );
+// const updateJob = useStoreActions((actions) => actions.update_jobs);
+// const navigateTo = useStoreActions((actions) => actions.navigateTo);
+// const setConnecting = useStoreActions((actions) => actions.setConnecting);
+// const toolbox = useStoreState((state) => state.previewToolbox);
+// const selectedWorkflow = useStoreState((state) => state.selectedWorkflowId);
+// const altAction = useStoreState((state) => state.altAction);
+// const removeWorkflowElement = useStoreActions(
+// (actions) => actions.removeWorkflowElement,
+// );
+
+// const connecting = useStoreState((state) => state.connecting);
+// const updateConnecting = useStoreActions(
+// (actions) => actions.updateConnecting,
+// );
+
+// const updateWorkflowJob = (
+// workflowJob: workflow.WorkflowJob,
+// applyToData: {
+// job?: Job;
+// parameters?: types.workflow.WorkflowJobParameters;
+// },
+// ) =>
+// elements.map((element) =>
+// isNode(element) && element.data.job.name === workflowJob.job.name
+// ? { ...element, data: { ...workflowJob, ...applyToData } }
+// : element,
+// );
+// const [hovering, setHovering] = React.useState({
+// handles: false,
+// node: false,
+// requiredBy: false,
+// remove: false,
+// requires: false,
+// });
+
+// let filtered = false;
+
+// const workflowJob = props.data as WorkflowJob;
+// const filters = workflowJob.parameters?.filters;
+
+// if (filters && toolbox.filter.preview && filters[toolbox.filter.type]) {
+// const jobFilter = filters[toolbox.filter.type];
+// const sample = toolbox.filter.pattern;
+
+// try {
+// const ignoreFilter = jobFilter?.ignore?.some((pattern) =>
+// sample.match(formatPattern(pattern)),
+// );
+// const onlyFilter = jobFilter?.only
+// ? jobFilter?.only?.some((pattern) =>
+// sample.match(formatPattern(pattern)),
+// )
+// : true;
+
+// filtered = ignoreFilter || !onlyFilter;
+// } catch (e) {
+// console.warn('Invalid regex pattern');
+// }
+// } else if (toolbox.filter.type === 'tags') {
+// filtered = true;
+// }
+
+// const jobIcon = (isApproval: boolean = false) => {
+// const classNameValue = 'w-5 mr-2';
+// if (isApproval) {
+// return
;
+// } else {
+// return
;
+// }
+// };
+
+// const viewJobProperties = () => {
+// navigateTo({
+// component: StagedJobMenuNav,
+// props: {
+// source: workflowJob,
+// values: flattenGenerable(workflowJob, true),
+// id: props.id,
+// overrideRoot: selectedWorkflow,
+// },
+// origin: true,
+// });
+// };
+
+// const trackHovering = (
+// entering: string[],
+// leaving: string[],
+// postEnter?: () => void,
+// postLeave?: () => void,
+// ) => {
+// return {
+// onMouseEnter: () => {
+// setHovering(
+// entering.reduce(
+// (previous, n) => ({ ...previous, [n]: true }),
+// hovering,
+// ),
+// );
+// postEnter && postEnter();
+// },
+// onMouseLeave: () => {
+// setHovering(
+// leaving.reduce(
+// (previous, n) => ({ ...previous, [n]: false }),
+// hovering,
+// ),
+// );
+// postLeave && postLeave();
+// },
+// };
+// };
+
+// const nodeRef = useRef(null);
+// const startConnecting =
+// (side: 'source' | 'target') => (e: React.DragEvent
) => {
+// setConnecting({
+// ref: nodeRef,
+// id: {
+// connectionNodeId: props.id,
+// connectionHandleType: side,
+// connectionHandleId: `${props.id}_${side}`,
+// },
+// name: props.data.parameters?.name || props.data.name,
+// });
+// e.preventDefault();
+// };
+
+// return (
+// {
+// const startType = connecting?.start?.id.connectionHandleType;
+// const side = startType === 'source' ? 'target' : 'source';
+// updateConnecting({
+// ref: nodeRef,
+// id: {
+// connectionNodeId: props.id,
+// connectionHandleType: side,
+// connectionHandleId: `${props.id}_${side}`,
+// },
+// name: props.data.parameters?.name || props.data.name,
+// });
+// },
+// () => {
+// updateConnecting(undefined);
+// },
+// )}
+// onDragOver={(e) => {
+// if (dragging && dragging.dataType?.dragTarget === JobMapping.key) {
+// e.preventDefault();
+// }
+// }}
+// onDrop={(e) => {
+// if (
+// dragging &&
+// dragging.dataType?.dragTarget === JobMapping.key &&
+// dragging.dataType.applyToNode
+// ) {
+// const applyToData = dragging.dataType.applyToNode(
+// dragging.data,
+// props.data,
+// );
+
+// if (JobMapping.key in applyToData) {
+// updateJob({ old: props.data.job, new: applyToData.job });
+// }
+
+// if ('parameters' in applyToData) {
+// updateWorkflowJob(props.data, applyToData);
+// }
+// }
+// }}
+// >
+//
+//
+//
+
+//
+//
+// {jobIcon(props.data.parameters?.type === 'approval')}
+// {props.data.parameters?.name || props.data.name}
+//
+// {
+// removeWorkflowElement(props.id);
+// }}
+// >
+//
+//
+//
+
+//
{--
+// // TODO: Implement 'add job' menu functionality
+// // }}
+// draggable
+// onDragStart={startConnecting('source')}
+// >
+//
+//
+
+//
+//
+//
+// );
+// };
+
+// export default JobNode;
+export default {}
\ No newline at end of file
diff --git a/src/components/atoms/summaries/CommandSummary.tsx b/src/core/components/atoms/summaries/CommandSummary.tsx
similarity index 100%
rename from src/components/atoms/summaries/CommandSummary.tsx
rename to src/core/components/atoms/summaries/CommandSummary.tsx
diff --git a/src/components/atoms/summaries/ExecutorSummary.tsx b/src/core/components/atoms/summaries/ExecutorSummary.tsx
similarity index 100%
rename from src/components/atoms/summaries/ExecutorSummary.tsx
rename to src/core/components/atoms/summaries/ExecutorSummary.tsx
diff --git a/src/components/atoms/summaries/JobSummary.tsx b/src/core/components/atoms/summaries/JobSummary.tsx
similarity index 100%
rename from src/components/atoms/summaries/JobSummary.tsx
rename to src/core/components/atoms/summaries/JobSummary.tsx
diff --git a/src/components/atoms/summaries/ParameterSummary.tsx b/src/core/components/atoms/summaries/ParameterSummary.tsx
similarity index 100%
rename from src/components/atoms/summaries/ParameterSummary.tsx
rename to src/core/components/atoms/summaries/ParameterSummary.tsx
diff --git a/src/components/containers/BreadCrumbs.tsx b/src/core/components/containers/BreadCrumbs.tsx
similarity index 100%
rename from src/components/containers/BreadCrumbs.tsx
rename to src/core/components/containers/BreadCrumbs.tsx
diff --git a/src/components/containers/CollapsibleList.tsx b/src/core/components/containers/CollapsibleList.tsx
similarity index 100%
rename from src/components/containers/CollapsibleList.tsx
rename to src/core/components/containers/CollapsibleList.tsx
diff --git a/src/components/containers/ConfirmationModal.tsx b/src/core/components/containers/ConfirmationModal.tsx
similarity index 98%
rename from src/components/containers/ConfirmationModal.tsx
rename to src/core/components/containers/ConfirmationModal.tsx
index 5a98392..cbcd7e7 100644
--- a/src/components/containers/ConfirmationModal.tsx
+++ b/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',
@@ -57,7 +57,7 @@ const ConfirmationModal = () => {
}, [updateConfirmation]);
const handleUserKeyPress = useCallback(
- (event) => {
+ (event: any) => {
const { key } = event;
if (key === 'Escape') {
closeHandler();
diff --git a/src/components/containers/DefinitionsContainer.tsx b/src/core/components/containers/DefinitionsContainer.tsx
similarity index 98%
rename from src/components/containers/DefinitionsContainer.tsx
rename to src/core/components/containers/DefinitionsContainer.tsx
index 8aaf730..cc6cb8f 100644
--- a/src/components/containers/DefinitionsContainer.tsx
+++ b/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';
diff --git a/src/components/containers/DropdownContainer.tsx b/src/core/components/containers/DropdownContainer.tsx
similarity index 100%
rename from src/components/containers/DropdownContainer.tsx
rename to src/core/components/containers/DropdownContainer.tsx
diff --git a/src/components/containers/ExternalLinks.tsx b/src/core/components/containers/ExternalLinks.tsx
similarity index 93%
rename from src/components/containers/ExternalLinks.tsx
rename to src/core/components/containers/ExternalLinks.tsx
index 1cdea3a..18c01b3 100644
--- a/src/components/containers/ExternalLinks.tsx
+++ b/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 = [
diff --git a/src/components/containers/FilterPreviewContainer.tsx b/src/core/components/containers/FilterPreviewContainer.tsx
similarity index 100%
rename from src/components/containers/FilterPreviewContainer.tsx
rename to src/core/components/containers/FilterPreviewContainer.tsx
diff --git a/src/components/containers/GuideContainer.tsx b/src/core/components/containers/GuideContainer.tsx
similarity index 100%
rename from src/components/containers/GuideContainer.tsx
rename to src/core/components/containers/GuideContainer.tsx
diff --git a/src/components/containers/HeaderMenu.tsx b/src/core/components/containers/HeaderMenu.tsx
similarity index 50%
rename from src/components/containers/HeaderMenu.tsx
rename to src/core/components/containers/HeaderMenu.tsx
index 49be178..efdee59 100644
--- a/src/components/containers/HeaderMenu.tsx
+++ b/src/core/components/containers/HeaderMenu.tsx
@@ -1,10 +1,12 @@
+import { FlowTools } from '../../../flow/components/FlowTools';
+import { Button } from '../atoms/Button';
import { ExternalLinks } from './ExternalLinks';
import PreviewToolbox from './PreviewToolbox';
export default function HeaderMenu() {
return (
-
-
+
+
);
diff --git a/src/components/containers/KBarList.tsx b/src/core/components/containers/KBarList.tsx
similarity index 100%
rename from src/components/containers/KBarList.tsx
rename to src/core/components/containers/KBarList.tsx
diff --git a/src/components/containers/OrbImportsContainer.tsx b/src/core/components/containers/OrbImportsContainer.tsx
similarity index 99%
rename from src/components/containers/OrbImportsContainer.tsx
rename to src/core/components/containers/OrbImportsContainer.tsx
index ef04f34..d9b0173 100644
--- a/src/components/containers/OrbImportsContainer.tsx
+++ b/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 (
{
navigateTo({
diff --git a/src/components/containers/ParamListContainer.tsx b/src/core/components/containers/ParamListContainer.tsx
similarity index 100%
rename from src/components/containers/ParamListContainer.tsx
rename to src/core/components/containers/ParamListContainer.tsx
diff --git a/src/components/containers/ParametersContainer.tsx b/src/core/components/containers/ParametersContainer.tsx
similarity index 96%
rename from src/components/containers/ParametersContainer.tsx
rename to src/core/components/containers/ParametersContainer.tsx
index 640333b..936e643 100644
--- a/src/components/containers/ParametersContainer.tsx
+++ b/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: {
)}
diff --git a/src/components/containers/PreviewToolbox.tsx b/src/core/components/containers/PreviewToolbox.tsx
similarity index 100%
rename from src/components/containers/PreviewToolbox.tsx
rename to src/core/components/containers/PreviewToolbox.tsx
diff --git a/src/core/components/containers/WorkflowContainer.tsx b/src/core/components/containers/WorkflowContainer.tsx
new file mode 100644
index 0000000..a7bb964
--- /dev/null
+++ b/src/core/components/containers/WorkflowContainer.tsx
@@ -0,0 +1,283 @@
+// import { orb } from '@circleci/circleci-config-sdk';
+// import { WorkflowJobParameters } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Workflow/types/WorkflowJob.types';
+// import { useEffect, useState } from 'react';
+// import ReactFlow, {
+// addEdge,
+// Background,
+// BackgroundVariant,
+// ConnectionLineComponentProps,
+// ConnectionMode,
+// EdgeProps,
+// Transform,
+// isNode,
+// Node,
+// NodeTypes,
+// useStore as flowActions,
+// } from 'react-flow-renderer';
+// import { v4 } from 'uuid';
+// import { dataMappings } from '../../mappings/GenerableMapping';
+// import { JobMapping } from '../../mappings/components/JobMapping';
+// import { useStoreActions, useStoreState } from '../../state/Hooks';
+// import ConnectionLine from '../atoms/ConnectionLine';
+// import Edge from '../atoms/Edge';
+
+// export interface ElementProps {
+// className?: string;
+// bgClassName?: string;
+// }
+
+// const getTypes = (): NodeTypes =>
+// Object.assign(
+// {},
+// ...dataMappings.map((component) =>
+// component.mapping.node
+// ? { [component.mapping.key]: component.mapping.node.component }
+// : null,
+// ),
+// );
+
+// const WorkflowContainer = ({ bgClassName, className }: ElementProps) => {
+// const importOrb = useStoreActions((actions) => actions.importOrb);
+// const [[x, y, zoom], setTransform] = useState([0,0, 1]);
+// const [cooldown, setCooldown] = useState(false);
+// const elements = useStoreState(
+// (state) =>
+// state.definitions.workflows[state.selectedWorkflowId].value.elements,
+// );
+// const addWorkflowElement = useStoreActions(
+// (actions) => actions.addWorkflowElement,
+// );
+// const setWorkflowElements = useStoreActions(
+// (actions) => actions.setWorkflowElements,
+// );
+// const dragging = useStoreState((state) => state.dragging);
+// const connecting = useStoreState((state) => state.connecting);
+// const setConnecting = useStoreActions((actions) => actions.setConnecting);
+// const altAction = useStoreState((state) => state.altAction);
+// const setAltAction = useStoreActions((actions) => actions.setAltAction);
+// const [connectingTo, setConnectingTo] = useState({ x: 0, y: 0 });
+
+// window.addEventListener('keydown', (e) => {
+// if (e.shiftKey && !cooldown) {
+// setAltAction(!altAction);
+
+// setCooldown(true);
+
+// setTimeout(() => {
+// setCooldown(false);
+// }, 5);
+// }
+// });
+
+// const updateWorkflowJob = (
+// targetJob: string,
+// applyToData: (parameters: WorkflowJobParameters) => WorkflowJobParameters,
+// ) =>
+// elements.nodes.map((element) => {
+// return isNode(element) &&
+// JobMapping.node?.transform &&
+// (element.data.parameters?.name || element.data.job.name) === targetJob
+// ? {
+// ...element,
+// data: JobMapping.node.transform(
+// element.data.job,
+// applyToData(element.data.parameters),
+// ),
+// }
+// : element;
+// });
+
+// const handleMouseUp = () => {
+// if (connecting?.start?.name) {
+// const source =
+// connecting.start.id.connectionHandleType === 'source'
+// ? connecting.start
+// : connecting.end;
+// const target =
+// connecting.start.id.connectionHandleType === 'source'
+// ? connecting.end
+// : connecting.start;
+// const startName = source?.name;
+
+// if (target?.name && startName) {
+// if (
+// connecting.intent === 'creating' &&
+// source.id.connectionNodeId !== target.id.connectionNodeId
+// ) {
+// const edges = addEdge(
+// {
+// source: source.id.connectionNodeId,
+// target: target.id.connectionNodeId,
+// type: 'requires',
+// sourceHandle: source.id.connectionHandleId,
+// targetHandle: target.id.connectionNodeId,
+// animated: false,
+// style: { stroke: '#A3A3A3', strokeWidth: '2px' },
+// },
+// elements.edges,
+// );
+
+// const nodes = updateWorkflowJob(target.name, (parameters) => ({
+// ...parameters,
+// requires: parameters?.requires
+// ? [...parameters.requires, startName]
+// : [startName],
+// }))
+// setWorkflowElements(
+// {edges, nodes}
+// );
+// } else {
+// const nodes = updateWorkflowJob(target.name, (parameters) => {
+// let requires = undefined;
+
+// if (parameters.requires) {
+// const updatedRequires = parameters?.requires?.filter(
+// (requirement) => requirement !== startName,
+// );
+// requires =
+// updatedRequires.length > 0 ? updatedRequires : undefined;
+// }
+// return {
+// ...parameters,
+// requires,
+// };
+// });
+
+// const edges = elements.edges.filter((e) => {
+// if (e.type !== 'requires') {
+// return true;
+// }
+
+// const edge = e as EdgeProps;
+
+// return (
+// edge.source !== source.id.connectionNodeId ||
+// edge.target !== target.id.connectionNodeId
+// );
+// });
+
+// setWorkflowElements({edges, nodes});
+// }
+// }
+
+// setConnecting({
+// id: {
+// connectionNodeId: null,
+// connectionHandleType: null,
+// connectionHandleId: null,
+// },
+// });
+// }
+// };
+
+// useEffect(() => {
+// window.addEventListener('mouseup', handleMouseUp);
+
+// return () => {
+// window.removeEventListener('mouseup', handleMouseUp);
+// };
+// });
+
+// const gap = 15;
+
+// // const NodeGraph = () => {
+// // // const setConnecting = flowActions((state) => state.set);
+// // // const setConnectingPosition = flowActions(
+// // // (state) => state.setConnectionPosition,
+// // // );
+
+// // useEffect(() => {
+// // setConnecting(connecting?.start?.id);
+// // setConnectingPosition({
+// // x: connectingTo.x - transform.x,
+// // y: connectingTo.y - transform.y,
+// // });
+// // });
+
+// // return null;
+// // };
+
+// return (
+// {
+// if (dragging?.dataType?.dragTarget === 'workflow') {
+// e.preventDefault();
+// }
+// }}
+// onDrag={(e) => {}}
+// onMouseMove={(e) => {
+// const containerBounds = (e.target as Element)
+// .closest('.react-flow')
+// ?.getBoundingClientRect();
+
+// if (containerBounds) {
+// setConnectingTo({
+// x: e.clientX + x - containerBounds.left,
+// y: e.clientY + y - containerBounds.top,
+// });
+// }
+// }}
+// onDrop={(e) => {
+// const nodeMapping = dragging?.dataType?.node;
+
+// if (dragging?.dataType?.dragTarget === 'workflow' && nodeMapping) {
+// const pos = {
+// x: e.clientX - 80 - x,
+// y: e.clientY - 120 - y,
+// };
+// const round = (val: number) =>
+// Math.floor(val / zoom / gap) * gap;
+// let data = dragging.data;
+
+// if (nodeMapping.transform) {
+// data = nodeMapping.transform(data, undefined, elements);
+// }
+
+// if (data.job instanceof orb.OrbRef) {
+// importOrb(data.job.orb);
+// }
+
+// const workflowNode: Node
= {
+// id: data.parameters?.name || data.name || v4(),
+// data,
+// connectable: true,
+// dragHandle: '.node',
+// type: dragging.dataType.key,
+// position: { x: round(pos.x), y: round(pos.y) },
+// };
+
+// addWorkflowElement(workflowNode);
+// }
+// }}
+// >
+// {
+// // setTransform(e || transform);
+// // }}
+// selectNodesOnDrag={false}
+// nodeTypes={getTypes()}
+// edgeTypes={{ requires: Edge }}
+// snapToGrid={true}
+// minZoom={0.1}
+// connectionMode={ConnectionMode.Loose}
+// connectionLineComponent={
+// ConnectionLine as React.ComponentType
+// }
+// >
+//
+//
+//
+// );
+// };
+
+ export default {};
diff --git a/src/components/containers/inspector/CommandInspector.tsx b/src/core/components/containers/inspector/CommandInspector.tsx
similarity index 96%
rename from src/components/containers/inspector/CommandInspector.tsx
rename to src/core/components/containers/inspector/CommandInspector.tsx
index f5f409d..68ac817 100644
--- a/src/components/containers/inspector/CommandInspector.tsx
+++ b/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';
diff --git a/src/components/containers/inspector/ExecutorInspector.tsx b/src/core/components/containers/inspector/ExecutorInspector.tsx
similarity index 100%
rename from src/components/containers/inspector/ExecutorInspector.tsx
rename to src/core/components/containers/inspector/ExecutorInspector.tsx
diff --git a/src/components/containers/inspector/JobInspector.tsx b/src/core/components/containers/inspector/JobInspector.tsx
similarity index 97%
rename from src/components/containers/inspector/JobInspector.tsx
rename to src/core/components/containers/inspector/JobInspector.tsx
index 23355f3..4122691 100644
--- a/src/components/containers/inspector/JobInspector.tsx
+++ b/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,
diff --git a/src/components/containers/inspector/ParameterInspector.tsx b/src/core/components/containers/inspector/ParameterInspector.tsx
similarity index 100%
rename from src/components/containers/inspector/ParameterInspector.tsx
rename to src/core/components/containers/inspector/ParameterInspector.tsx
diff --git a/src/components/containers/inspector/subtypes/CommandSubtypes.tsx b/src/core/components/containers/inspector/subtypes/CommandSubtypes.tsx
similarity index 100%
rename from src/components/containers/inspector/subtypes/CommandSubtypes.tsx
rename to src/core/components/containers/inspector/subtypes/CommandSubtypes.tsx
diff --git a/src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx b/src/core/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
similarity index 96%
rename from src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
rename to src/core/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
index 252d21b..8e2f923 100644
--- a/src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
+++ b/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 {
diff --git a/src/components/containers/inspector/subtypes/ParameterSubtypes.tsx b/src/core/components/containers/inspector/subtypes/ParameterSubtypes.tsx
similarity index 98%
rename from src/components/containers/inspector/subtypes/ParameterSubtypes.tsx
rename to src/core/components/containers/inspector/subtypes/ParameterSubtypes.tsx
index 5bb8adf..e4c452a 100644
--- a/src/components/containers/inspector/subtypes/ParameterSubtypes.tsx
+++ b/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';
diff --git a/src/components/menus/SubTypeMenu.tsx b/src/core/components/menus/SubTypeMenu.tsx
similarity index 100%
rename from src/components/menus/SubTypeMenu.tsx
rename to src/core/components/menus/SubTypeMenu.tsx
diff --git a/src/components/menus/TabbedMenu.tsx b/src/core/components/menus/TabbedMenu.tsx
similarity index 100%
rename from src/components/menus/TabbedMenu.tsx
rename to src/core/components/menus/TabbedMenu.tsx
diff --git a/src/components/menus/definitions/DefinitionsMenu.tsx b/src/core/components/menus/definitions/DefinitionsMenu.tsx
similarity index 94%
rename from src/components/menus/definitions/DefinitionsMenu.tsx
rename to src/core/components/menus/definitions/DefinitionsMenu.tsx
index 65c4ca3..a246f9a 100644
--- a/src/components/menus/definitions/DefinitionsMenu.tsx
+++ b/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';
diff --git a/src/components/menus/definitions/InspectorDefinitionMenu.tsx b/src/core/components/menus/definitions/InspectorDefinitionMenu.tsx
similarity index 96%
rename from src/components/menus/definitions/InspectorDefinitionMenu.tsx
rename to src/core/components/menus/definitions/InspectorDefinitionMenu.tsx
index fc6a85e..196fad1 100644
--- a/src/components/menus/definitions/InspectorDefinitionMenu.tsx
+++ b/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 & {
values: Record;
dependencies: Array;
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 (
- {props.editing ? 'Edit' : 'New'} {props.dataType?.name.singular}
+ {props.editing ? 'Edit' : 'New'} {props.dataMapping?.name.singular}
);
},
Icon: (props: InspectorDefinitionProps) => {
- let iconComponent = props.dataType?.components.icon;
+ let iconComponent = props.dataMapping?.components.icon;
if (!iconComponent) {
return null;
diff --git a/src/components/menus/definitions/OrbDefinitionsMenu.tsx b/src/core/components/menus/definitions/OrbDefinitionsMenu.tsx
similarity index 98%
rename from src/components/menus/definitions/OrbDefinitionsMenu.tsx
rename to src/core/components/menus/definitions/OrbDefinitionsMenu.tsx
index 1e9a930..7cb193d 100644
--- a/src/components/menus/definitions/OrbDefinitionsMenu.tsx
+++ b/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';
diff --git a/src/components/menus/definitions/OrbImportMenu.tsx b/src/core/components/menus/definitions/OrbImportMenu.tsx
similarity index 99%
rename from src/components/menus/definitions/OrbImportMenu.tsx
rename to src/core/components/menus/definitions/OrbImportMenu.tsx
index 18439e4..e01a4cd 100644
--- a/src/components/menus/definitions/OrbImportMenu.tsx
+++ b/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';
diff --git a/src/components/menus/definitions/StepDefinitionMenu.tsx b/src/core/components/menus/definitions/StepDefinitionMenu.tsx
similarity index 100%
rename from src/components/menus/definitions/StepDefinitionMenu.tsx
rename to src/core/components/menus/definitions/StepDefinitionMenu.tsx
diff --git a/src/components/menus/definitions/subtypes/ExecutorTypePage.tsx b/src/core/components/menus/definitions/subtypes/ExecutorTypePage.tsx
similarity index 100%
rename from src/components/menus/definitions/subtypes/ExecutorTypePage.tsx
rename to src/core/components/menus/definitions/subtypes/ExecutorTypePage.tsx
diff --git a/src/components/menus/definitions/subtypes/ParameterTypePage.tsx b/src/core/components/menus/definitions/subtypes/ParameterTypePage.tsx
similarity index 97%
rename from src/components/menus/definitions/subtypes/ParameterTypePage.tsx
rename to src/core/components/menus/definitions/subtypes/ParameterTypePage.tsx
index 30f5240..a6a03e7 100644
--- a/src/components/menus/definitions/subtypes/ParameterTypePage.tsx
+++ b/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';
diff --git a/src/components/menus/definitions/subtypes/StepTypePage.tsx b/src/core/components/menus/definitions/subtypes/StepTypePage.tsx
similarity index 100%
rename from src/components/menus/definitions/subtypes/StepTypePage.tsx
rename to src/core/components/menus/definitions/subtypes/StepTypePage.tsx
diff --git a/src/components/menus/stage/StagedFilterMenu.tsx b/src/core/components/menus/stage/StagedFilterMenu.tsx
similarity index 100%
rename from src/components/menus/stage/StagedFilterMenu.tsx
rename to src/core/components/menus/stage/StagedFilterMenu.tsx
diff --git a/src/components/menus/stage/StagedJobMenu.tsx b/src/core/components/menus/stage/StagedJobMenu.tsx
similarity index 99%
rename from src/components/menus/stage/StagedJobMenu.tsx
rename to src/core/components/menus/stage/StagedJobMenu.tsx
index 24fbd41..b2e1446 100644
--- a/src/components/menus/stage/StagedJobMenu.tsx
+++ b/src/core/components/menus/stage/StagedJobMenu.tsx
@@ -175,7 +175,7 @@ const StagedJobMenu = ({ source, values, id }: WorkflowJobMenuProps) => {
>
diff --git a/src/components/panes/EditorPane.tsx b/src/core/components/panes/EditorPane.tsx
similarity index 97%
rename from src/components/panes/EditorPane.tsx
rename to src/core/components/panes/EditorPane.tsx
index ae9980c..7cf6350 100644
--- a/src/components/panes/EditorPane.tsx
+++ b/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) => {
diff --git a/src/components/panes/NavigationPane.tsx b/src/core/components/panes/NavigationPane.tsx
similarity index 93%
rename from src/components/panes/NavigationPane.tsx
rename to src/core/components/panes/NavigationPane.tsx
index cddeef1..d6e20e4 100644
--- a/src/components/panes/NavigationPane.tsx
+++ b/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 {
diff --git a/src/components/panes/WorkflowsPane.tsx b/src/core/components/panes/WorkflowsPane.tsx
similarity index 54%
rename from src/components/panes/WorkflowsPane.tsx
rename to src/core/components/panes/WorkflowsPane.tsx
index 159266a..0582963 100644
--- a/src/components/panes/WorkflowsPane.tsx
+++ b/src/core/components/panes/WorkflowsPane.tsx
@@ -1,6 +1,8 @@
import Logo from '../../icons/ui/Logo';
import HeaderMenu from '../containers/HeaderMenu';
-import WorkflowContainer from '../containers/WorkflowContainer';
+// import WorkflowContainer from '../containers/WorkflowContainer';
+import ReactFlow, { Background, BackgroundVariant, ControlButton, Controls } from 'reactflow';
+import { GraphWrapper } from '../../../flow/components/Flow';
const WorkflowsPane = () => {
return (
@@ -9,8 +11,8 @@ const WorkflowsPane = () => {
className="flex flex-col flex-nowrap flex-1"
id="Workflows-Pane"
>
-