auto-component 0.0.44 → 0.1.0

package/lib/auto-component.css

@@ -13,7 +13,7 @@
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
-  max-width: 700px;
+  max-width: 1000px;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -64,7 +64,7 @@
   justify-content: center;
   text-align: center;
   width: 100%;
-  max-width: 700px;
+  max-width: 1000px;
   z-index: 9998;
 }
 .tab {
@@ -91,14 +91,14 @@
   left: 50%;
   transform: translateX(-50%);
   width: 80%;
-  max-width: 600px;
+  max-width: 900px;
   max-height: 300px;
   height: 300px;
 }
 
 #auto-component-code {
   width: 100%;
-  max-width: 600px;
+  max-width: 900px;
   max-height: 300px;
   height: 300px;
   text-align: left;

package/lib/index.js

@@ -20,7 +20,11 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable no-unused-vars */ /* eslint-disable react-hooks/exhaustive-deps */
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // AutoComponent
+// Built By:
+//   https://github.com/SamPatt
+//   https://github.com/TimHuitt
+/* eslint-disable no-unused-vars */ /* eslint-disable react-hooks/exhaustive-deps */ // Helpful in Babel transpile: https://github.com/receter/my-components
 var AutoComponent = function AutoComponent() {
   //**-----------**/
   // ** State ** //
@@ -81,45 +85,42 @@ var AutoComponent = function AutoComponent() {
     });
   };
 
-  // clean html of exclusions:
+  // ** Clean HTML of Exclusions **
   // if an element className includes 'exclude'
   // (partial) the element wrapper remains, but contents removed
   // OR, (full) the element and it's content are excluded from output
+  // thanks gpt for these clever exclusion tools
 
   // partial exclusion
-
   var cleanExclusions = function cleanExclusions(html) {
     var parser = new DOMParser();
     var doc = parser.parseFromString(html, 'text/html');
     var elementsToClean = doc.querySelectorAll('.exclude');
+    var removeAllChildNodes = function removeAllChildNodes(element) {
+      Array.from(element.childNodes).forEach(function (child) {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+          removeAllChildNodes(child);
+        } else {
+          element.removeChild(child);
+        }
+      });
+    };
     elementsToClean.forEach(function (element) {
       removeAllChildNodes(element);
     });
     return doc.documentElement.outerHTML;
   };
-  var removeAllChildNodes = function removeAllChildNodes(element) {
-    Array.from(element.childNodes).forEach(function (child) {
-      if (child.nodeType === Node.ELEMENT_NODE) {
-        removeAllChildNodes(child);
-      } else {
-        element.removeChild(child);
-      }
-    });
-  };
 
   // full exclusion
-  // const cleanExclusions = (html) => {
-  //   const parser = new DOMParser();
-  //   const doc = parser.parseFromString(html, 'text/html');
-  // 
-  //   const elementsToExclude = doc.querySelectorAll('.exclude');
-  // 
-  //   elementsToExclude.forEach((element) => {
-  //     element.parentNode.removeChild(element);
-  //   });
-  // 
-  //   return doc.documentElement.outerHTML;
-  // };
+  var cleanExclusionsFull = function cleanExclusionsFull(html) {
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(html, 'text/html');
+    var elementsToExclude = doc.querySelectorAll('.exclude');
+    elementsToExclude.forEach(function (element) {
+      element.parentNode.removeChild(element);
+    });
+    return doc.documentElement.outerHTML;
+  };
 
   // exclude non <style> data and remove comments
   var cleanStyles = function cleanStyles(css) {
@@ -133,9 +134,13 @@ var AutoComponent = function AutoComponent() {
     }
     return null;
   };
+
+  // generate a random 5 digit user id
   var randomUser = function randomUser() {
     setUser(Math.floor(Math.random() * 100000));
   };
+
+  // set initial load data
   (0, _react.useEffect)(function () {
     htmlContent();
     randomUser();
@@ -145,11 +150,8 @@ var AutoComponent = function AutoComponent() {
   // ** API Requests/Response ** //
   //**-------------------------**/
 
-  // TEMP FUNCTION FOR TESTING
-  // const sendRequest = (data) => {
-  //   return(response)
-  // }
-
+  // handle sending the user request to the auto-component API
+  // API sends packaged request to GPT for a code based response
   var sendRequest = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var url, res, jsonData;
@@ -197,7 +199,7 @@ var AutoComponent = function AutoComponent() {
     };
   }();
 
-  // make API request with updated state data
+  // handle request initialization and state updates
   var handleRequest = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       var resData;
@@ -212,7 +214,7 @@ var AutoComponent = function AutoComponent() {
             if (resData) {
               setHistory(resData.history);
               setResponseData(formatHtml(resData.response.content));
-              setActiveTab('response');
+              activeTab !== '' && setActiveTab('response');
             }
             _context2.next = 10;
             break;
@@ -251,6 +253,8 @@ var AutoComponent = function AutoComponent() {
               "html": currentHtml
             });
           case 2:
+            setRequest('');
+          case 3:
           case "end":
             return _context3.stop();
         }
@@ -329,20 +333,30 @@ var AutoComponent = function AutoComponent() {
   // ** Rendering ** //
   //**-------------**/
 
+  // get request history log and format for display
   var getLog = function getLog() {
     return history.map(function (entry, index) {
-      return index !== 0 && entry.content.split('HTML Context:')[0] + (entry.content.includes("User Request") ? '\n' : '\n\n\n');
+      return index !== 0 ? entry.content.split('HTML Context:')[0] + (entry.content.includes("User Request") ? '\n\n' : '\n\n\n') : '';
     });
   };
-  var requestHTML = currentHtml ? getLog() + "Review the details below for accuracy and privacy concerns.\nIf the contents of an element should be excluded, add the 'exclude' class to the element.\nClick Generate to send the request and receive the auto component AI generated code.\n\nUser ID:\n    " + user + "\n\nUser Request:\n" + currentRequest + "\n\nUser HTML:\n" + currentHtml : 'There was an error collecting your HTML. Ensure no top level elements are assigned the class "exclude"';
-  console.log(responseData);
+
+  // build request tab content
+  var requestHTML = currentHtml ? getLog() && getLog().join('') + "Review the details below for accuracy and privacy concerns.\n\nIf the contents of an element should be excluded, add the 'exclude' class to the element.\n\nClick Generate to send a request and receive the auto component AI generated code.\n\nUser ID:\n" + user + "\n\nUser Request:\n" + currentRequest + "\n\nUser HTML:\n" + currentHtml : 'There was an error collecting your HTML. Ensure no top level elements are assigned the class "exclude"';
   var responseHtml = responseData ? responseData : 'No response has been generated';
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleGenerate();
+    }
+  };
+
+  //**------------**/
+  // ** Return ** //
+  //**----------**/
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "auto-component exclude"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, responseData ?
-  /*#__PURE__*/
-  // Use {} to directly interpolate the JSX code
-  _react["default"].createElement(_reactJsxParser["default"], {
+  }, /*#__PURE__*/_react["default"].createElement("div", null, responseData ? /*#__PURE__*/_react["default"].createElement(_reactJsxParser["default"], {
     jsx: responseData
   }) : '- auto component will be added here -'), /*#__PURE__*/_react["default"].createElement("div", {
     id: "auto-component-ui"
@@ -363,6 +377,7 @@ var AutoComponent = function AutoComponent() {
     type: "text",
     value: currentRequest,
     onChange: handleChange,
+    onKeyDown: handleKeyDown,
     placeholder: "Enter a request"
   }), /*#__PURE__*/_react["default"].createElement("button", {
     onClick: handleGenerate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-component",
-  "version": "0.0.44",
+  "version": "0.1.0",
   "main": "lib/index.js",
   "peerDependencies": {
     "react": "^18.2.0",