auto-component 0.1.4 → 1.0.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/README.md +25 -7
- package/lib/index.js +20 -59
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/auto-component)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://github.com/TimHuitt/client-auto-component)
|
|
6
|
+
|
|
7
|
+
[](https://auto-component.com)
|
|
9
|
+
|
|
10
|
+
> A tool to streamline UI element creation in React projects through AI prompted generation
|
|
11
|
+
|
|
12
|
+
## Technologies Used
|
|
13
|
+
|
|
14
|
+
| Category | Technologies |
|
|
15
|
+
|---------------------|----------------------------------------------------------------------------------------|
|
|
16
|
+
| **Frontend** | [React](https://reactjs.org/) - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) |
|
|
17
|
+
| **Backend** | [Mongoose](https://mongoosejs.com/) - [Express](https://expressjs.com/) - [Node.js](https://nodejs.org/) |
|
|
18
|
+
| **Dependencies** | [Babel](https://babeljs.io/) - [JSXParser](https://www.npmjs.com/package/jsx-parser) - [js-beautify](https://www.npmjs.com/package/js-beautify) |
|
|
19
|
+
|
|
20
|
+
#### Dependency Uses
|
|
21
|
+
> Babel - Transpile JSX to JS for publishing<br/>
|
|
22
|
+
JSXParser - Dynamically render generated code<br/>
|
|
23
|
+
js-beautify - Format JSX/HTML for UI display
|
|
6
24
|
|
|
7
25
|
## Installation
|
|
8
26
|
|
|
@@ -20,7 +38,7 @@ npm install -D auto-component
|
|
|
20
38
|
import AutoComponent from 'auto-component';
|
|
21
39
|
```
|
|
22
40
|
|
|
23
|
-
<div style="
|
|
41
|
+
<div style="display: flex; justify-content: center; align-items: center;">
|
|
24
42
|
<img src="https://i.imgur.com/v18uMyR.png" alt="Step 2" style="max-width: 100%; height: auto;">
|
|
25
43
|
</div>
|
|
26
44
|
|
|
@@ -30,7 +48,7 @@ import AutoComponent from 'auto-component';
|
|
|
30
48
|
<AutoComponent />
|
|
31
49
|
```
|
|
32
50
|
|
|
33
|
-
<div style="
|
|
51
|
+
<div style="display: flex; justify-content: center; align-items: center;">
|
|
34
52
|
<img src="https://i.imgur.com/Hh4MV4W.png" alt="Step 3" style="max-width: 100%; height: auto;">
|
|
35
53
|
</div>
|
|
36
54
|
|
|
@@ -38,13 +56,13 @@ import AutoComponent from 'auto-component';
|
|
|
38
56
|
|
|
39
57
|
3. View your page to see the auto-component tool at the bottom, indicating where it will render your code:
|
|
40
58
|
|
|
41
|
-
<div style="
|
|
59
|
+
<div style="display: flex; justify-content: center; align-items: center;">
|
|
42
60
|
<img src="https://i.imgur.com/ItXg9Bd.png" alt="Step 4" style="max-width: 100%; height: auto;">
|
|
43
61
|
</div>
|
|
44
62
|
|
|
45
63
|
4. Start building by telling `auto-component` what you want and clicking "Generate." The result will be rendered on the page. You can view the "Request" or "Response" tabs to inspect what is being sent to the AI and what was returned:
|
|
46
64
|
|
|
47
|
-
<div style="
|
|
65
|
+
<div style="display: flex; justify-content: center; align-items: center;">
|
|
48
66
|
<img src="https://i.imgur.com/DmXWPdC.gif" alt="Step 5" style="max-width: 100%; height: auto;">
|
|
49
67
|
</div>
|
|
50
68
|
|
|
@@ -52,7 +70,7 @@ import AutoComponent from 'auto-component';
|
|
|
52
70
|
|
|
53
71
|
5. Ask `auto-component` to make changes to the code it provided, and see the changes rendered on the page:
|
|
54
72
|
|
|
55
|
-
<div style="
|
|
73
|
+
<div style="display: flex; justify-content: center; align-items: center;">
|
|
56
74
|
<img src="https://i.imgur.com/zSqx9iP.gif" alt="Step 6" style="max-width: 100%; height: auto;">
|
|
57
75
|
</div>
|
|
58
76
|
|
|
@@ -60,7 +78,7 @@ import AutoComponent from 'auto-component';
|
|
|
60
78
|
|
|
61
79
|
6. When satisfied with the response, click on the "Response" tab underneath the input. Copy the code from the AI to use it in your codebase:
|
|
62
80
|
|
|
63
|
-
<div style="
|
|
81
|
+
<div style="display: flex; justify-content: center; align-items: center;">
|
|
64
82
|
<img src="https://i.imgur.com/m9KpCHL.gif" alt="Step 7" style="max-width: 100%; height: auto;">
|
|
65
83
|
</div>
|
|
66
84
|
|
package/lib/index.js
CHANGED
|
@@ -24,7 +24,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // AutoCom
|
|
|
24
24
|
// Built By:
|
|
25
25
|
// https://github.com/SamPatt
|
|
26
26
|
// https://github.com/TimHuitt
|
|
27
|
-
// Copyright (C)
|
|
27
|
+
// Copyright (C) 2023 Tim Huitt, Sam Patterson
|
|
28
28
|
//
|
|
29
29
|
// This program is free software: you can redistribute it and/or modify
|
|
30
30
|
// it under the terms of the GNU Affero General Public License as
|
|
@@ -49,50 +49,36 @@ var AutoComponent = function AutoComponent() {
|
|
|
49
49
|
setHtml = _useState2[1];
|
|
50
50
|
var _useState3 = (0, _react.useState)(''),
|
|
51
51
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
currentRequest = _useState4[0],
|
|
53
|
+
setRequest = _useState4[1];
|
|
54
54
|
var _useState5 = (0, _react.useState)(''),
|
|
55
55
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
user = _useState6[0],
|
|
57
|
+
setUser = _useState6[1];
|
|
58
58
|
var _useState7 = (0, _react.useState)(''),
|
|
59
59
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
var _useState9 = (0, _react.useState)(
|
|
60
|
+
responseData = _useState8[0],
|
|
61
|
+
setResponseData = _useState8[1];
|
|
62
|
+
var _useState9 = (0, _react.useState)(null),
|
|
63
63
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
var _useState11 = (0, _react.useState)(
|
|
64
|
+
requestData = _useState10[0],
|
|
65
|
+
setRequestData = _useState10[1];
|
|
66
|
+
var _useState11 = (0, _react.useState)(''),
|
|
67
67
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
var _useState13 = (0, _react.useState)(
|
|
68
|
+
activeTab = _useState12[0],
|
|
69
|
+
setActiveTab = _useState12[1];
|
|
70
|
+
var _useState13 = (0, _react.useState)(["No History"]),
|
|
71
71
|
_useState14 = _slicedToArray(_useState13, 2),
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
var _useState15 = (0, _react.useState)(
|
|
72
|
+
history = _useState14[0],
|
|
73
|
+
setHistory = _useState14[1];
|
|
74
|
+
var _useState15 = (0, _react.useState)(false),
|
|
75
75
|
_useState16 = _slicedToArray(_useState15, 2),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
var _useState17 = (0, _react.useState)(false),
|
|
79
|
-
_useState18 = _slicedToArray(_useState17, 2),
|
|
80
|
-
isRequesting = _useState18[0],
|
|
81
|
-
setIsRequesting = _useState18[1];
|
|
76
|
+
isRequesting = _useState16[0],
|
|
77
|
+
setIsRequesting = _useState16[1];
|
|
82
78
|
|
|
83
79
|
//**-------------------------**/
|
|
84
80
|
// ** HTML/CSS Formatting ** //
|
|
85
81
|
//**-----------------------**/
|
|
86
|
-
// get the html/style for the current page and set state
|
|
87
|
-
var htmlContent = function htmlContent() {
|
|
88
|
-
var body = document.querySelector('body');
|
|
89
|
-
var htmlContent = body ? body.innerHTML : '';
|
|
90
|
-
var cssStyles = document.documentElement.innerHTML;
|
|
91
|
-
var cleanedHtml = cleanExclusions(htmlContent);
|
|
92
|
-
var cleanedStyles = cleanStyles(cssStyles);
|
|
93
|
-
setHtml(formatHtml(cleanedHtml));
|
|
94
|
-
setStyles(cleanedStyles);
|
|
95
|
-
};
|
|
96
82
|
|
|
97
83
|
// format html for display (breaks/indentation)
|
|
98
84
|
var formatHtml = function formatHtml(html) {
|
|
@@ -129,30 +115,6 @@ var AutoComponent = function AutoComponent() {
|
|
|
129
115
|
return doc.documentElement.outerHTML;
|
|
130
116
|
};
|
|
131
117
|
|
|
132
|
-
// full exclusion
|
|
133
|
-
var cleanExclusionsFull = function cleanExclusionsFull(html) {
|
|
134
|
-
var parser = new DOMParser();
|
|
135
|
-
var doc = parser.parseFromString(html, 'text/html');
|
|
136
|
-
var elementsToExclude = doc.querySelectorAll('.exclude');
|
|
137
|
-
elementsToExclude.forEach(function (element) {
|
|
138
|
-
element.parentNode.removeChild(element);
|
|
139
|
-
});
|
|
140
|
-
return doc.documentElement.outerHTML;
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
// exclude non <style> data and remove comments
|
|
144
|
-
var cleanStyles = function cleanStyles(css) {
|
|
145
|
-
var styleRegex = /<style\b[^>]*>([\s\S]*?)<\/style>/g;
|
|
146
|
-
var matches = css.match(styleRegex);
|
|
147
|
-
if (matches) {
|
|
148
|
-
var cleanedMatches = matches.map(function (match) {
|
|
149
|
-
return match.replace(/\/\*[\s\S]*?\*\//g, '');
|
|
150
|
-
});
|
|
151
|
-
return cleanedMatches;
|
|
152
|
-
}
|
|
153
|
-
return null;
|
|
154
|
-
};
|
|
155
|
-
|
|
156
118
|
// generate a random 5 digit user id
|
|
157
119
|
var randomUser = function randomUser() {
|
|
158
120
|
setUser(Math.floor(Math.random() * 100000));
|
|
@@ -160,7 +122,6 @@ var AutoComponent = function AutoComponent() {
|
|
|
160
122
|
|
|
161
123
|
// set initial load data
|
|
162
124
|
(0, _react.useEffect)(function () {
|
|
163
|
-
htmlContent();
|
|
164
125
|
randomUser();
|
|
165
126
|
}, []);
|
|
166
127
|
|
|
@@ -366,7 +327,7 @@ var AutoComponent = function AutoComponent() {
|
|
|
366
327
|
};
|
|
367
328
|
|
|
368
329
|
// build request tab content
|
|
369
|
-
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
|
|
330
|
+
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 : 'There was an error collecting your HTML. Ensure no top level elements are assigned the class "exclude"';
|
|
370
331
|
var responseHtml = responseData ? responseData : 'No response has been generated';
|
|
371
332
|
var handleKeyDown = function handleKeyDown(e) {
|
|
372
333
|
if (e.key === 'Enter') {
|