Cleanup

dist/App.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _logo = _interopRequireDefault(require("./logo.svg"));
+
+require("./App.css");
+
+function App() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "App"
+  }, /*#__PURE__*/React.createElement("header", {
+    className: "App-header"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _logo.default,
+    className: "App-logo",
+    alt: "logo"
+  }), /*#__PURE__*/React.createElement("p", null, "Edit ", /*#__PURE__*/React.createElement("code", null, "src/App.js"), " and save to reload."), /*#__PURE__*/React.createElement("a", {
+    className: "App-link",
+    href: "https://reactjs.org",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "Learn React")));
+}
+
+var _default = App;
+exports.default = _default;

dist/App.test.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = require("@testing-library/react");
+
+var _App = _interopRequireDefault(require("./App"));
+
+test('renders learn react link', function () {
+  (0, _react.render)( /*#__PURE__*/React.createElement(_App.default, null));
+
+  var linkElement = _react.screen.getByText(/learn react/i);
+
+  expect(linkElement).toBeInTheDocument();
+});

dist/components/Block/DropRegion.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropRegion = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ProgrammingContext = require("../ProgrammingContext");
+
+var _reactDnd = require("react-dnd");
+
+var _index = require("./index");
+
+var _lodash = require("lodash");
+
+var transferBlockSelector = function transferBlockSelector(state) {
+  return state.transferBlock;
+};
+
+var DropRegion = function DropRegion(_ref) {
+  var _dropProps$item, _dropProps$item$data, _dropProps$item2;
+
+  var id = _ref.id,
+      parentId = _ref.parentId,
+      fieldInfo = _ref.fieldInfo,
+      idx = _ref.idx,
+      minHeight = _ref.minHeight,
+      hideText = _ref.hideText,
+      disabled = _ref.disabled,
+      highlightColor = _ref.highlightColor,
+      context = _ref.context,
+      showBuffer = _ref.showBuffer;
+  var transferBlock = (0, _ProgrammingContext.useProgrammingStore)(transferBlockSelector);
+  var data = (0, _ProgrammingContext.useProgrammingStore)((0, _react.useCallback)(function (store) {
+    return store.programData[id];
+  }, [id]));
+
+  var _useDrop = (0, _reactDnd.useDrop)(function () {
+    return {
+      accept: fieldInfo.accepts,
+      drop: function drop(item, _) {
+        // console.log(item)
+        transferBlock(item.data, item, {
+          fieldInfo: fieldInfo,
+          parentId: parentId,
+          idx: idx
+        });
+      },
+      canDrop: function canDrop(item) {
+        return !disabled && !item.onCanvas && (0, _lodash.isEqual)((0, _lodash.intersection)(context, item.context), item.context);
+      },
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver(),
+          item: monitor.getItem()
+        };
+      }
+    };
+  }, [fieldInfo, parentId, idx, disabled]),
+      _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
+      dropProps = _useDrop2[0],
+      drop = _useDrop2[1];
+
+  var validDropType = fieldInfo.accepts.includes((_dropProps$item = dropProps.item) === null || _dropProps$item === void 0 ? void 0 : (_dropProps$item$data = _dropProps$item.data) === null || _dropProps$item$data === void 0 ? void 0 : _dropProps$item$data.type) && !((_dropProps$item2 = dropProps.item) !== null && _dropProps$item2 !== void 0 && _dropProps$item2.onCanvas) && (0, _lodash.isEqual)((0, _lodash.intersection)(context, dropProps.item.context), dropProps.item.context); // console.log({validDropType,disabled})
+
+  var renderedData = data ? data : dropProps.item && validDropType && !disabled && dropProps.isOver ? dropProps.item.data : null;
+  var isPreview = renderedData && renderedData !== data;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "nodrag",
+    ref: drop,
+    style: {
+      borderRadius: 4,
+      backgroundColor: dropProps.isOver && validDropType ? "#44884488" : validDropType ? "#88888888" : null,
+      minHeight: minHeight,
+      minWidth: 100,
+      display: 'flex',
+      flex: 1
+    }
+  }, renderedData && !isPreview ? /*#__PURE__*/_react.default.createElement(_index.Block, {
+    staticData: renderedData,
+    idx: idx,
+    parentId: parentId,
+    fieldInfo: fieldInfo,
+    bounded: true,
+    style: {
+      marginTop: 4,
+      marginBottom: 4
+    },
+    highlightColor: highlightColor,
+    context: context
+  }) : renderedData ? /*#__PURE__*/_react.default.createElement(_index.PreviewBlock, {
+    staticData: renderedData,
+    idx: idx,
+    parentId: parentId,
+    fieldInfo: fieldInfo,
+    bounded: true,
+    highlightColor: highlightColor,
+    context: context,
+    style: {
+      marginBottom: showBuffer ? minHeight : null,
+      marginTop: showBuffer ? minHeight : null
+    }
+  }) : hideText ? null : fieldInfo.name);
+};
+
+exports.DropRegion = DropRegion;

dist/components/Block/DropZone.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropZone = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DropRegion = require("./DropRegion");
+
+var DropZone = function DropZone(_ref) {
+  var id = _ref.id,
+      parentId = _ref.parentId,
+      fieldInfo = _ref.fieldInfo,
+      idx = _ref.idx,
+      interactionDisabled = _ref.interactionDisabled,
+      highlightColor = _ref.highlightColor,
+      context = _ref.context;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "nodrag",
+    style: {
+      padding: 4,
+      backgroundColor: "#00000088",
+      borderRadius: 3,
+      minHeight: 30,
+      minWidth: "max-content",
+      margin: 4,
+      flex: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DropRegion.DropRegion, {
+    id: id,
+    parentId: parentId,
+    fieldInfo: fieldInfo,
+    idx: idx,
+    minHeight: 30,
+    bounded: true,
+    disabled: id || interactionDisabled,
+    highlightColor: highlightColor,
+    context: context
+  }));
+};
+
+exports.DropZone = DropZone;

dist/components/Block/ExpandCarrot.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandCarrot = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _fi = require("react-icons/fi");
+
+var _web = require("@react-spring/web");
+
+var _reactSpring = require("react-spring");
+
+var ExpandCarrot = function ExpandCarrot(_ref) {
+  var expanded = _ref.expanded,
+      onClick = _ref.onClick;
+  var carrotStyle = (0, _web.useSpring)({
+    rotate: expanded ? '90deg' : '0deg',
+    config: _reactSpring.config.wobbly,
+    height: 20,
+    width: 20
+  });
+  return /*#__PURE__*/_react.default.createElement(_web.animated.div, {
+    onClick: onClick,
+    style: carrotStyle
+  }, /*#__PURE__*/_react.default.createElement(_fi.FiChevronRight, null));
+};
+
+exports.ExpandCarrot = ExpandCarrot;

dist/components/Block/ExternalBlock.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExternalBlock = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _grommet = require("grommet");
+
+var _VisualBlock = require("./VisualBlock");
+
+var _ProgrammingContext = require("../ProgrammingContext");
+
+var _theme = require("../theme");
+
+var _rdndmbHtml5ToTouch = require("rdndmb-html5-to-touch");
+
+var _reactDndMultiBackend = require("react-dnd-multi-backend");
+
+var _reactDnd = require("react-dnd");
+
+var _Generators = require("../Generators");
+
+var InnerExternalBlock = function InnerExternalBlock(props) {
+  var _useProgrammingStore = (0, _ProgrammingContext.useProgrammingStore)((0, _react.useCallback)(function (state) {
+    return (0, _Generators.combinedBlockData)(state, props.data, null);
+  }, [props.data])),
+      _useProgrammingStore2 = (0, _slicedToArray2.default)(_useProgrammingStore, 2),
+      data = _useProgrammingStore2[0],
+      typeSpec = _useProgrammingStore2[1];
+
+  var otherProps = {
+    x: 0,
+    z: 0,
+    scale: 1,
+    onCanvas: false,
+    interactionDisabled: true,
+    bounded: true,
+    fieldInfo: 'outside',
+    parentId: 'outside'
+  };
+  return /*#__PURE__*/_react.default.createElement(_VisualBlock.VisualBlock, Object.assign({}, props, otherProps, {
+    data: data,
+    typeSpec: typeSpec
+  }));
+};
+
+var ExternalBlock = function ExternalBlock(_ref) {
+  var store = _ref.store,
+      highlightColor = _ref.highlightColor,
+      data = _ref.data,
+      style = _ref.style,
+      context = _ref.context;
+  var theme = (0, _theme.getTheme)(highlightColor, true);
+  return /*#__PURE__*/_react.default.createElement(_grommet.Grommet, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement(_ProgrammingContext.ProgrammingProvider, {
+    store: store
+  }, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
+    backend: _reactDndMultiBackend.MultiBackend,
+    options: _rdndmbHtml5ToTouch.HTML5toTouch
+  }, /*#__PURE__*/_react.default.createElement(InnerExternalBlock, {
+    highlightColor: highlightColor,
+    data: data,
+    style: (0, _objectSpread2.default)({}, style),
+    context: context
+  }))));
+};
+
+exports.ExternalBlock = ExternalBlock;