auto-component 0.0.44 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/auto-component.css +67 -14
- package/lib/index.js +89 -57
- package/package.json +1 -1
package/lib/auto-component.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
left: 50%;
|
|
14
14
|
transform: translateX(-50%);
|
|
15
15
|
width: 90%;
|
|
16
|
-
max-width:
|
|
16
|
+
max-width: 1000px;
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: row;
|
|
19
19
|
justify-content: center;
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
}
|
|
57
57
|
#auto-component-tabs {
|
|
58
58
|
position: fixed;
|
|
59
|
-
bottom:
|
|
59
|
+
bottom: 70px;
|
|
60
60
|
left: 50%;
|
|
61
61
|
transform: translateX(-50%);
|
|
62
62
|
display: flex;
|
|
@@ -64,13 +64,13 @@
|
|
|
64
64
|
justify-content: center;
|
|
65
65
|
text-align: center;
|
|
66
66
|
width: 100%;
|
|
67
|
-
max-width:
|
|
67
|
+
max-width: 1000px;
|
|
68
68
|
z-index: 9998;
|
|
69
69
|
}
|
|
70
70
|
.tab {
|
|
71
71
|
width: 30%;
|
|
72
72
|
margin: 0 10%;
|
|
73
|
-
padding:
|
|
73
|
+
padding: 6px 0;
|
|
74
74
|
background: #c6c7d3 !important;
|
|
75
75
|
color: #fff !important;
|
|
76
76
|
border-radius: 0 0 5px 5px;
|
|
@@ -83,24 +83,24 @@
|
|
|
83
83
|
.auto-component-selected {
|
|
84
84
|
background: #444 !important;
|
|
85
85
|
color: #aaa !important;
|
|
86
|
-
font-
|
|
86
|
+
font-weight: bold;
|
|
87
87
|
}
|
|
88
88
|
#auto-component-code-container {
|
|
89
89
|
position: fixed;
|
|
90
90
|
bottom: 180px;
|
|
91
91
|
left: 50%;
|
|
92
92
|
transform: translateX(-50%);
|
|
93
|
+
overflow: hidden;
|
|
93
94
|
width: 80%;
|
|
94
|
-
max-width:
|
|
95
|
-
max-height:
|
|
96
|
-
height: 300px;
|
|
95
|
+
max-width: 900px;
|
|
96
|
+
max-height: 400px;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
#auto-component-code {
|
|
100
|
-
|
|
101
|
-
|
|
100
|
+
margin: 0;
|
|
101
|
+
padding: 0;
|
|
102
|
+
max-width: 900px;
|
|
102
103
|
max-height: 300px;
|
|
103
|
-
height: 300px;
|
|
104
104
|
text-align: left;
|
|
105
105
|
background: #cdd1d9;
|
|
106
106
|
color: #111;
|
|
@@ -115,8 +115,8 @@
|
|
|
115
115
|
}
|
|
116
116
|
.auto-component-copy {
|
|
117
117
|
position: absolute;
|
|
118
|
-
top:
|
|
119
|
-
right:
|
|
118
|
+
top: 0;
|
|
119
|
+
right: 0;
|
|
120
120
|
display: flex;
|
|
121
121
|
justify-content: center;
|
|
122
122
|
align-items: center;
|
|
@@ -136,4 +136,57 @@
|
|
|
136
136
|
}
|
|
137
137
|
.auto-component-hidden {
|
|
138
138
|
display: none;
|
|
139
|
-
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.placeholder-top-left {
|
|
142
|
+
position: relative;
|
|
143
|
+
top: 0;
|
|
144
|
+
left: 0;
|
|
145
|
+
padding: 10px;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.auto-component-placeholder {
|
|
149
|
+
display: flex;
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
justify-content: space-between;
|
|
152
|
+
height: 100%;
|
|
153
|
+
width: 100%;
|
|
154
|
+
min-height: 150px;
|
|
155
|
+
background-size: 40px 40px;
|
|
156
|
+
background-image: repeating-linear-gradient(
|
|
157
|
+
45deg, /* Change angle to horizontal */
|
|
158
|
+
rgba(255, 255, 255, 0.15) 0px,
|
|
159
|
+
rgba(76, 126, 97, 0.459) 1px,
|
|
160
|
+
transparent 3px,
|
|
161
|
+
transparent 14px
|
|
162
|
+
);
|
|
163
|
+
position: relative;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.auto-component-placeholder.animate {
|
|
167
|
+
animation: slide 1s linear infinite;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.loading-indicator {
|
|
171
|
+
border: 4px solid #f3f3f3; /* Light grey */
|
|
172
|
+
border-top: 4px solid #3498db; /* Blue */
|
|
173
|
+
border-radius: 50%;
|
|
174
|
+
width: 20px;
|
|
175
|
+
height: 20px;
|
|
176
|
+
animation: spin 2s linear infinite;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
@keyframes spin {
|
|
180
|
+
0% { transform: rotate(0deg); }
|
|
181
|
+
100% { transform: rotate(360deg); }
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
@keyframes slide {
|
|
186
|
+
from {
|
|
187
|
+
background-position: -40px 0; /* Start moving from the left */
|
|
188
|
+
}
|
|
189
|
+
to {
|
|
190
|
+
background-position: 40px 0; /* Move to the right */
|
|
191
|
+
}
|
|
192
|
+
}
|
package/lib/index.js
CHANGED
|
@@ -20,7 +20,11 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
|
|
|
20
20
|
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); }
|
|
21
21
|
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; }
|
|
22
22
|
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; } }
|
|
23
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // AutoComponent
|
|
24
|
+
// Built By:
|
|
25
|
+
// https://github.com/SamPatt
|
|
26
|
+
// https://github.com/TimHuitt
|
|
27
|
+
/* eslint-disable no-unused-vars */ /* eslint-disable react-hooks/exhaustive-deps */ // Helpful in Babel transpile: https://github.com/receter/my-components
|
|
24
28
|
var AutoComponent = function AutoComponent() {
|
|
25
29
|
//**-----------**/
|
|
26
30
|
// ** State ** //
|
|
@@ -57,6 +61,10 @@ var AutoComponent = function AutoComponent() {
|
|
|
57
61
|
_useState16 = _slicedToArray(_useState15, 2),
|
|
58
62
|
history = _useState16[0],
|
|
59
63
|
setHistory = _useState16[1];
|
|
64
|
+
var _useState17 = (0, _react.useState)(false),
|
|
65
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
|
66
|
+
isRequesting = _useState18[0],
|
|
67
|
+
setIsRequesting = _useState18[1];
|
|
60
68
|
|
|
61
69
|
//**-------------------------**/
|
|
62
70
|
// ** HTML/CSS Formatting ** //
|
|
@@ -81,45 +89,42 @@ var AutoComponent = function AutoComponent() {
|
|
|
81
89
|
});
|
|
82
90
|
};
|
|
83
91
|
|
|
84
|
-
//
|
|
92
|
+
// ** Clean HTML of Exclusions **
|
|
85
93
|
// if an element className includes 'exclude'
|
|
86
94
|
// (partial) the element wrapper remains, but contents removed
|
|
87
95
|
// OR, (full) the element and it's content are excluded from output
|
|
96
|
+
// thanks gpt for these clever exclusion tools
|
|
88
97
|
|
|
89
98
|
// partial exclusion
|
|
90
|
-
|
|
91
99
|
var cleanExclusions = function cleanExclusions(html) {
|
|
92
100
|
var parser = new DOMParser();
|
|
93
101
|
var doc = parser.parseFromString(html, 'text/html');
|
|
94
102
|
var elementsToClean = doc.querySelectorAll('.exclude');
|
|
103
|
+
var removeAllChildNodes = function removeAllChildNodes(element) {
|
|
104
|
+
Array.from(element.childNodes).forEach(function (child) {
|
|
105
|
+
if (child.nodeType === Node.ELEMENT_NODE) {
|
|
106
|
+
removeAllChildNodes(child);
|
|
107
|
+
} else {
|
|
108
|
+
element.removeChild(child);
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
};
|
|
95
112
|
elementsToClean.forEach(function (element) {
|
|
96
113
|
removeAllChildNodes(element);
|
|
97
114
|
});
|
|
98
115
|
return doc.documentElement.outerHTML;
|
|
99
116
|
};
|
|
100
|
-
var removeAllChildNodes = function removeAllChildNodes(element) {
|
|
101
|
-
Array.from(element.childNodes).forEach(function (child) {
|
|
102
|
-
if (child.nodeType === Node.ELEMENT_NODE) {
|
|
103
|
-
removeAllChildNodes(child);
|
|
104
|
-
} else {
|
|
105
|
-
element.removeChild(child);
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
};
|
|
109
117
|
|
|
110
118
|
// full exclusion
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
//
|
|
121
|
-
// return doc.documentElement.outerHTML;
|
|
122
|
-
// };
|
|
119
|
+
var cleanExclusionsFull = function cleanExclusionsFull(html) {
|
|
120
|
+
var parser = new DOMParser();
|
|
121
|
+
var doc = parser.parseFromString(html, 'text/html');
|
|
122
|
+
var elementsToExclude = doc.querySelectorAll('.exclude');
|
|
123
|
+
elementsToExclude.forEach(function (element) {
|
|
124
|
+
element.parentNode.removeChild(element);
|
|
125
|
+
});
|
|
126
|
+
return doc.documentElement.outerHTML;
|
|
127
|
+
};
|
|
123
128
|
|
|
124
129
|
// exclude non <style> data and remove comments
|
|
125
130
|
var cleanStyles = function cleanStyles(css) {
|
|
@@ -133,9 +138,13 @@ var AutoComponent = function AutoComponent() {
|
|
|
133
138
|
}
|
|
134
139
|
return null;
|
|
135
140
|
};
|
|
141
|
+
|
|
142
|
+
// generate a random 5 digit user id
|
|
136
143
|
var randomUser = function randomUser() {
|
|
137
144
|
setUser(Math.floor(Math.random() * 100000));
|
|
138
145
|
};
|
|
146
|
+
|
|
147
|
+
// set initial load data
|
|
139
148
|
(0, _react.useEffect)(function () {
|
|
140
149
|
htmlContent();
|
|
141
150
|
randomUser();
|
|
@@ -145,20 +154,18 @@ var AutoComponent = function AutoComponent() {
|
|
|
145
154
|
// ** API Requests/Response ** //
|
|
146
155
|
//**-------------------------**/
|
|
147
156
|
|
|
148
|
-
//
|
|
149
|
-
//
|
|
150
|
-
// return(response)
|
|
151
|
-
// }
|
|
152
|
-
|
|
157
|
+
// handle sending the user request to the auto-component API
|
|
158
|
+
// API sends packaged request to GPT for a code based response
|
|
153
159
|
var sendRequest = /*#__PURE__*/function () {
|
|
154
160
|
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
155
161
|
var url, res, jsonData;
|
|
156
162
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
157
163
|
while (1) switch (_context.prev = _context.next) {
|
|
158
164
|
case 0:
|
|
165
|
+
setIsRequesting(true);
|
|
159
166
|
url = "https://server-auto-component-46830ff262f8.herokuapp.com/api";
|
|
160
|
-
_context.prev =
|
|
161
|
-
_context.next =
|
|
167
|
+
_context.prev = 2;
|
|
168
|
+
_context.next = 5;
|
|
162
169
|
return fetch(url, {
|
|
163
170
|
method: 'POST',
|
|
164
171
|
headers: {
|
|
@@ -166,38 +173,40 @@ var AutoComponent = function AutoComponent() {
|
|
|
166
173
|
},
|
|
167
174
|
body: JSON.stringify(requestData)
|
|
168
175
|
});
|
|
169
|
-
case
|
|
176
|
+
case 5:
|
|
170
177
|
res = _context.sent;
|
|
171
178
|
if (!res.ok) {
|
|
172
|
-
_context.next =
|
|
179
|
+
_context.next = 13;
|
|
173
180
|
break;
|
|
174
181
|
}
|
|
175
|
-
_context.next =
|
|
182
|
+
_context.next = 9;
|
|
176
183
|
return res.json();
|
|
177
|
-
case
|
|
184
|
+
case 9:
|
|
178
185
|
jsonData = _context.sent;
|
|
179
186
|
return _context.abrupt("return", jsonData);
|
|
180
|
-
case 12:
|
|
181
|
-
throw new Error("Invalid request!");
|
|
182
187
|
case 13:
|
|
183
|
-
|
|
188
|
+
throw new Error("Invalid request!");
|
|
189
|
+
case 14:
|
|
190
|
+
_context.next = 19;
|
|
184
191
|
break;
|
|
185
|
-
case
|
|
186
|
-
_context.prev =
|
|
187
|
-
_context.t0 = _context["catch"](
|
|
192
|
+
case 16:
|
|
193
|
+
_context.prev = 16;
|
|
194
|
+
_context.t0 = _context["catch"](2);
|
|
188
195
|
console.log(_context.t0.message);
|
|
189
|
-
case
|
|
196
|
+
case 19:
|
|
197
|
+
setIsRequesting(false);
|
|
198
|
+
case 20:
|
|
190
199
|
case "end":
|
|
191
200
|
return _context.stop();
|
|
192
201
|
}
|
|
193
|
-
}, _callee, null, [[
|
|
202
|
+
}, _callee, null, [[2, 16]]);
|
|
194
203
|
}));
|
|
195
204
|
return function sendRequest() {
|
|
196
205
|
return _ref.apply(this, arguments);
|
|
197
206
|
};
|
|
198
207
|
}();
|
|
199
208
|
|
|
200
|
-
//
|
|
209
|
+
// handle request initialization and state updates
|
|
201
210
|
var handleRequest = /*#__PURE__*/function () {
|
|
202
211
|
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
203
212
|
var resData;
|
|
@@ -212,7 +221,7 @@ var AutoComponent = function AutoComponent() {
|
|
|
212
221
|
if (resData) {
|
|
213
222
|
setHistory(resData.history);
|
|
214
223
|
setResponseData(formatHtml(resData.response.content));
|
|
215
|
-
setActiveTab('response');
|
|
224
|
+
activeTab !== '' && setActiveTab('response');
|
|
216
225
|
}
|
|
217
226
|
_context2.next = 10;
|
|
218
227
|
break;
|
|
@@ -221,10 +230,14 @@ var AutoComponent = function AutoComponent() {
|
|
|
221
230
|
_context2.t0 = _context2["catch"](0);
|
|
222
231
|
console.log(_context2.t0);
|
|
223
232
|
case 10:
|
|
233
|
+
_context2.prev = 10;
|
|
234
|
+
setIsRequesting(false); // Set isRequesting to false after processing response
|
|
235
|
+
return _context2.finish(10);
|
|
236
|
+
case 13:
|
|
224
237
|
case "end":
|
|
225
238
|
return _context2.stop();
|
|
226
239
|
}
|
|
227
|
-
}, _callee2, null, [[0, 7]]);
|
|
240
|
+
}, _callee2, null, [[0, 7, 10, 13]]);
|
|
228
241
|
}));
|
|
229
242
|
return function handleRequest() {
|
|
230
243
|
return _ref2.apply(this, arguments);
|
|
@@ -247,10 +260,11 @@ var AutoComponent = function AutoComponent() {
|
|
|
247
260
|
_context3.next = 2;
|
|
248
261
|
return setRequestData({
|
|
249
262
|
"userId": user,
|
|
250
|
-
"request": currentRequest
|
|
251
|
-
"html": currentHtml
|
|
263
|
+
"request": currentRequest
|
|
252
264
|
});
|
|
253
265
|
case 2:
|
|
266
|
+
setRequest('');
|
|
267
|
+
case 3:
|
|
254
268
|
case "end":
|
|
255
269
|
return _context3.stop();
|
|
256
270
|
}
|
|
@@ -270,6 +284,7 @@ var AutoComponent = function AutoComponent() {
|
|
|
270
284
|
setResponseData('');
|
|
271
285
|
randomUser();
|
|
272
286
|
setHistory([]);
|
|
287
|
+
setIsRequesting(false);
|
|
273
288
|
};
|
|
274
289
|
var handleRequestTab = /*#__PURE__*/function () {
|
|
275
290
|
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
|
|
@@ -329,22 +344,36 @@ var AutoComponent = function AutoComponent() {
|
|
|
329
344
|
// ** Rendering ** //
|
|
330
345
|
//**-------------**/
|
|
331
346
|
|
|
347
|
+
// get request history log and format for display
|
|
332
348
|
var getLog = function getLog() {
|
|
333
349
|
return history.map(function (entry, index) {
|
|
334
|
-
return index !== 0
|
|
350
|
+
return index !== 0 ? entry.content.split('HTML Context:')[0] + (entry.content.includes("User Request") ? '\n\n' : '\n\n\n') : '';
|
|
335
351
|
});
|
|
336
352
|
};
|
|
337
|
-
|
|
338
|
-
|
|
353
|
+
|
|
354
|
+
// build request tab content
|
|
355
|
+
var requestHTML = currentHtml ? getLog() && getLog().join('') + "Click 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"';
|
|
339
356
|
var responseHtml = responseData ? responseData : 'No response has been generated';
|
|
357
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
358
|
+
if (e.key === 'Enter') {
|
|
359
|
+
e.preventDefault();
|
|
360
|
+
handleGenerate();
|
|
361
|
+
}
|
|
362
|
+
};
|
|
363
|
+
|
|
364
|
+
//**------------**/
|
|
365
|
+
// ** Return ** //
|
|
366
|
+
//**----------**/
|
|
367
|
+
|
|
340
368
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
341
369
|
className: "auto-component exclude"
|
|
342
|
-
}, /*#__PURE__*/_react["default"].createElement("div", null,
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
_react["default"].createElement(_reactJsxParser["default"], {
|
|
370
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
371
|
+
className: "placeholder-top-left"
|
|
372
|
+
}, "auto-component"), /*#__PURE__*/_react["default"].createElement("hr", null), responseData ? /*#__PURE__*/_react["default"].createElement(_reactJsxParser["default"], {
|
|
346
373
|
jsx: responseData
|
|
347
|
-
}) :
|
|
374
|
+
}) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
375
|
+
className: "auto-component-placeholder ".concat(isRequesting ? 'animate' : '')
|
|
376
|
+
}), /*#__PURE__*/_react["default"].createElement("hr", null)), /*#__PURE__*/_react["default"].createElement("div", {
|
|
348
377
|
id: "auto-component-ui"
|
|
349
378
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
350
379
|
id: "auto-component-code-container",
|
|
@@ -359,10 +388,13 @@ var AutoComponent = function AutoComponent() {
|
|
|
359
388
|
} : null
|
|
360
389
|
}, "copy")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
361
390
|
id: "auto-component-entry"
|
|
362
|
-
}, /*#__PURE__*/_react["default"].createElement("
|
|
391
|
+
}, isRequesting ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
392
|
+
className: "loading-indicator"
|
|
393
|
+
}) : /*#__PURE__*/_react["default"].createElement("input", {
|
|
363
394
|
type: "text",
|
|
364
395
|
value: currentRequest,
|
|
365
396
|
onChange: handleChange,
|
|
397
|
+
onKeyDown: handleKeyDown,
|
|
366
398
|
placeholder: "Enter a request"
|
|
367
399
|
}), /*#__PURE__*/_react["default"].createElement("button", {
|
|
368
400
|
onClick: handleGenerate
|