final merge

final

Co-authored-by: Tolga Mizrakci <tolgamizrakci@gmail.com>
Co-authored-by: Adam Singer <spincycle01@yahoo.com>
Co-authored-by: Shlomo Porges <porges.s@gmail.com>

Author: 4 people

src/utils/Interfaces.ts

@@ -22,7 +22,7 @@ export interface ChildInt {
   position: PositionInt;
   color: string | null; // maybe optional instead, look up null vs undefined
   htmlElement: string | null; // maybe should be optional instead
-  HTMLInfo: { [index: string]: { info: any } }; // replace with HTMLinfo specifics
+  HTMLInfo: { [index: string]: string }; // replace with HTMLinfo specifics
 }
 
 export interface ChildrenInt extends Array<ChildInt> {}

src/utils/colors.util.ts

@@ -1,30 +1,29 @@
 const colors: Array<string> = [
-  "#E27D60",
-  "#E3AFBC",
-  "#E8A87C",
-  "#C38D9E",
-  "#41B3A3",
-  "#D12FA2",
-  "#F64C72",
-  "#DAAD86",
-  "#8EE4AF",
-  "#5CDB95",
-  "#7395AE", // light grey
-  "#b90061",
-  "#AFD275",
-  "#45A29E",
-  "#D79922",
-  "#C5CBE3", // lightish grey
-  "#FFCB9A",
-  "#E98074",
-  "#8860D0",
-  "#5AB9EA",
-  "#5860E9",
-  "#84CEEB",
-  "#61892F"
+  '#E27D60',
+  '#E3AFBC',
+  '#E8A87C',
+  '#C38D9E',
+  '#41B3A3',
+  '#D12FA2',
+  '#F64C72',
+  '#DAAD86',
+  '#8EE4AF',
+  '#5CDB95',
+  '#7395AE', // light grey
+  '#b90061',
+  '#AFD275',
+  '#45A29E',
+  '#D79922',
+  '#C5CBE3', // lightish grey
+  '#FFCB9A',
+  '#E98074',
+  '#8860D0',
+  '#5AB9EA',
+  '#5860E9',
+  '#84CEEB',
+  '#61892F',
 ];
 
-const getColor = (): string =>
-  colors[Math.floor(Math.random() * colors.length)];
+const getColor = (): string => colors[Math.floor(Math.random() * colors.length)];
 
 export default getColor;

src/utils/componentReducer.util.ts

@@ -2,14 +2,7 @@ import getSelectable from './getSelectable.util.ts';
 import getColor from './colors.util.ts';
 import { getSize } from './htmlElements.util.ts';
 import cloneDeep from './cloneDeep.ts';
-import {
-  ComponentInt,
-  ApplicationStateInt,
-  ChildrenInt,
-  ChildInt,
-  ComponentsInt,
-  PropInt,
-} from './Interfaces.ts';
+import { ComponentInt, ApplicationStateInt, ChildrenInt, ChildInt, ComponentsInt, PropInt } from './Interfaces.ts';
 
 const initialComponentState: ComponentInt = {
   id: 0,
@@ -228,7 +221,8 @@ export const deleteChild = (
     focusComponent: calledFromDeleteComponent ? state.focusComponent : parentComponentCopy, // when called from delete component we dont need want to touch the focus
     focusChild: calledFromDeleteComponent
       ? cloneDeep(state.initialApplicationFocusChild)
-      : parentComponentCopy.childrenArray[parentComponentCopy.childrenArray.length - 1],
+      : parentComponentCopy.childrenArray[parentComponentCopy.childrenArray.length - 1] ||
+        cloneDeep(state.initialApplicationFocusChild), // guard in case final child is deleted
   };
 };
 
@@ -288,11 +282,9 @@ export const handleTransform = (
   };
 
   const children = [
-    ...state.components
-      .find(comp => comp.id === componentId)
-      .childrenArray.filter(child => {
-        if (child.childId !== childId) return child;
-      }),
+    ...state.components.find(comp => comp.id === componentId).childrenArray.filter(child => {
+      if (child.childId !== childId) return child;
+    }),
     transformedChild,
   ];
 

src/utils/createFiles.util.ts

@@ -4,9 +4,15 @@ import componentRender from './componentRender.util.ts';
 
 const createFiles = (components: any, path: string, appName: string, exportAppBool: boolean) => {
   let dir = path;
-  if (!dir.match(/components|\*$/)) {
-    if (fs.existsSync(`${dir}/src`)) {
-      dir = `${dir}/src`;
+  if (exportAppBool === false) {
+    if (!dir.match(/components|\*$/)) {
+      if (fs.existsSync(`${dir}/src`)) {
+        dir = `${dir}/src`;
+      }
+      dir = `${dir}/components`;
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir);
+      }
     }
   } else if (exportAppBool) {
     if (!dir.match(/${appName}|\*$/)) {

src/utils/getSelectable.util.ts

@@ -1,13 +1,10 @@
-import { ComponentInt, ComponentsInt, ChildInt } from "./interfaces.ts";
+import { ComponentInt, ComponentsInt, ChildInt } from './interfaces.ts';
 
 interface getSelectableInt {
   [key: string]: Array<number>;
 }
 
-function getSelectable(
-  newFocusComponent: ComponentInt,
-  components: ComponentsInt
-) {
+function getSelectable(newFocusComponent: ComponentInt, components: ComponentsInt) {
   const focusComponentId = newFocusComponent.id;
   const componentsToCheck = components
     .map((comp: ComponentInt) => comp.id)
@@ -19,12 +16,12 @@ function findAncestors(
   components: ComponentsInt,
   currentCompArr: ComponentsInt,
   componentsToCheck: ComponentsInt,
-  ancestors: Array<number> = []
+  ancestors: Array<number> = [],
 ): getSelectableInt {
   if (!currentCompArr.length) {
     return {
-      ancestors: ancestors,
-      selectableChildren: componentsToCheck
+      ancestors,
+      selectableChildren: componentsToCheck,
     };
   }
 
@@ -33,20 +30,16 @@ function findAncestors(
   for (let i = 0; i < components.length; i++) {
     if (componentsToCheck.includes(components[i].id)) {
       const myChildren = components[i].childrenArray.map(
-        (child: ChildInt) => child.childComponentId
+        (child: ChildInt) => child.childComponentId,
       );
 
-      const found = currentCompArr.filter((comp: ComponentInt) =>
-        myChildren.includes(comp)
-      );
+      const found = currentCompArr.filter((comp: ComponentInt) => myChildren.includes(comp));
 
       if (found.length) {
         ancestors.push(components[i].id);
         newAncestors.push(components[i].id);
 
-        const indexToDelete = componentsToCheck.findIndex(
-          (c: Number) => c === components[i].id
-        );
+        const indexToDelete = componentsToCheck.findIndex((c: Number) => c === components[i].id);
 
         componentsToCheck.splice(indexToDelete, 1);
       }

src/utils/htmlElements.util.ts

@@ -18,48 +18,46 @@ const HTMLelements: htmlElementsInt = {
   Image: {
     width: 100,
     height: 100,
-    attributes: ['className', 'id', 'src']
+    attributes: ['className', 'id', 'src'],
   },
   Button: {
     width: 75,
     height: 28,
-    attributes: ['className', 'id', 'text']
+    attributes: ['className', 'id', 'text'],
   },
   Form: {
     width: 150,
     height: 150,
-    attributes: ['className', 'id', 'text']
+    attributes: ['className', 'id', 'text'],
   },
   Paragraph: {
     width: 250,
     height: 75,
-    attributes: ['className', 'id', 'text']
+    attributes: ['className', 'id', 'text'],
   },
   List: {
     width: 75,
     height: 75,
-    attributes: ['className', 'id', 'text']
+    attributes: ['className', 'id', 'text'],
   },
   Link: {
     width: 50,
     height: 50,
-    attributes: ['className', 'id', 'text']
-  }
+    attributes: ['className', 'id', 'text'],
+  },
 };
 
 function getSize(htmlElement: string): htmlElemPositionInt {
   const localHTMLelements = HTMLelements;
 
   if (!(htmlElement in localHTMLelements)) {
-    window.alert(
-      `htmlElement error: "${htmlElement} is not found in our database"`
-    );
+    window.alert(`htmlElement error: "${htmlElement} is not found in our database"`);
     return;
   }
 
   return {
     width: HTMLelements[htmlElement].width || 300,
-    height: HTMLelements[htmlElement].height || 300
+    height: HTMLelements[htmlElement].height || 300,
   };
 }
 

webpack.config.development.js

@@ -22,7 +22,6 @@ module.exports = {
     path: BUILD_DIR,
     filename: 'js/bundle.js',
   },
-  resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
   module: {
     rules: [
       { test: /\.tsx?$/, exclude: /node-modules/, loader: 'babel-loader' },