auto-component 0.1.3 → 1.0.0

package/README.md

@@ -2,7 +2,20 @@
 
 [![npm version](https://badge.fury.io/js/auto-component.svg)](https://www.npmjs.com/package/auto-component)
 
-> A tool to streamline UI element creation in React projects by utilizing AI prompted generation
+> A tool to streamline UI element creation in React projects through AI prompted generation
+
+## Technologies Used
+
+| Category            | Technologies                                                                          |
+|---------------------|----------------------------------------------------------------------------------------|
+| **Frontend**        | [React](https://reactjs.org/) - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)  |
+| **Backend**         | [Mongoose](https://mongoosejs.com/) - [Express](https://expressjs.com/) - [Node.js](https://nodejs.org/)  |
+| **Dependencies**    | [Babel](https://babeljs.io/) - [JSXParser](https://www.npmjs.com/package/jsx-parser) - [js-beautify](https://www.npmjs.com/package/js-beautify) |
+
+#### Dependency Uses
+> Babel - Transpile JSX to JS for publishing<br/>
+JSXParser - Dynamically render generated code<br/>
+js-beautify - Format JSX/HTML for UI display
 
 ## Installation
 
@@ -20,7 +33,7 @@ npm install -D auto-component
 import AutoComponent from 'auto-component';
 ```
 
-<div style="text-align: center;">
+<div style="display: flex; justify-content: center; align-items: center;">
   <img src="https://i.imgur.com/v18uMyR.png" alt="Step 2" style="max-width: 100%; height: auto;">
 </div>
 
@@ -30,7 +43,7 @@ import AutoComponent from 'auto-component';
 <AutoComponent />
 ```
 
-<div style="text-align: center;">
+<div style="display: flex; justify-content: center; align-items: center;">
   <img src="https://i.imgur.com/Hh4MV4W.png" alt="Step 3" style="max-width: 100%; height: auto;">
 </div>
 
@@ -38,13 +51,13 @@ import AutoComponent from 'auto-component';
 
 3. View your page to see the auto-component tool at the bottom, indicating where it will render your code:
 
-<div style="text-align: center;">
+<div style="display: flex; justify-content: center; align-items: center;">
   <img src="https://i.imgur.com/ItXg9Bd.png" alt="Step 4" style="max-width: 100%; height: auto;">
 </div>
 
 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:
 
-<div style="text-align: center;">
+<div style="display: flex; justify-content: center; align-items: center;">
   <img src="https://i.imgur.com/DmXWPdC.gif" alt="Step 5" style="max-width: 100%; height: auto;">
 </div>
 
@@ -52,7 +65,7 @@ import AutoComponent from 'auto-component';
 
 5. Ask `auto-component` to make changes to the code it provided, and see the changes rendered on the page:
 
-<div style="text-align: center;">
+<div style="display: flex; justify-content: center; align-items: center;">
   <img src="https://i.imgur.com/zSqx9iP.gif" alt="Step 6" style="max-width: 100%; height: auto;">
 </div>
 
@@ -60,7 +73,7 @@ import AutoComponent from 'auto-component';
 
 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:
 
-<div style="text-align: center;">
+<div style="display: flex; justify-content: center; align-items: center;">
   <img src="https://i.imgur.com/m9KpCHL.gif" alt="Step 7" style="max-width: 100%; height: auto;">
 </div>
 
@@ -68,6 +81,44 @@ import AutoComponent from 'auto-component';
 
 7. Click the red X button to start a new session.
 
+
+# Planned Features
+
+## User Features
+
+1. **Personal Page:**
+   - Allow users to create a personal page to store and manage their created components.
+   - Efficiently reuse and keep track of components.
+
+2. **Save and Manage Code:**
+   - Provide a "Save" button to store the returned code from the AI.
+   - Users can easily manage their components within their user page.
+
+3. **Position Customization:**
+   - Allow users to shift the position of the request/code box around the screen.
+   - Ensure it doesn't obscure anything in their project.
+
+## Developer Features
+
+1. **Code Integration Walkthrough:**
+   - Include an optional walkthrough of code integration.
+   - Help developers understand how to implement generated components into their projects.
+
+2. **Code Editing in the Browser:**
+   - Enable developers to edit displayed code directly in the browser.
+   - Allow quick adjustments without leaving the platform.
+
+3. **Access Saved Components:**
+   - Provide developers with the ability to access their saved components directly from the AutoComponent component.
+
+4. **Multiple AutoComponent Instances:**
+   - Notify developers if there is more than one `<AutoComponent />` creation component added to the project.
+   - Prevent potential functionality issues that may arise from multiple instances.
+
+5. **Multiple Components with Single Request Box:**
+   - Allow developers to add multiple components to the page.
+   - Provide an easy way to switch between them using a single request box.
+
 ## License
 
 This project is licensed under the AGPL 3.0 License - see the [LICENSE](LICENSE) file for details.

package/lib/index.js

@@ -61,24 +61,28 @@ var AutoComponent = function AutoComponent() {
     setUser = _useState8[1];
   var _useState9 = (0, _react.useState)(''),
     _useState10 = _slicedToArray(_useState9, 2),
-    responseData = _useState10[0],
-    setResponseData = _useState10[1];
-  var _useState11 = (0, _react.useState)(null),
+    userID = _useState10[0],
+    setUserID = _useState10[1];
+  var _useState11 = (0, _react.useState)(''),
     _useState12 = _slicedToArray(_useState11, 2),
-    requestData = _useState12[0],
-    setRequestData = _useState12[1];
-  var _useState13 = (0, _react.useState)(''),
+    responseData = _useState12[0],
+    setResponseData = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    activeTab = _useState14[0],
-    setActiveTab = _useState14[1];
-  var _useState15 = (0, _react.useState)(["No History"]),
+    requestData = _useState14[0],
+    setRequestData = _useState14[1];
+  var _useState15 = (0, _react.useState)(''),
     _useState16 = _slicedToArray(_useState15, 2),
-    history = _useState16[0],
-    setHistory = _useState16[1];
-  var _useState17 = (0, _react.useState)(false),
+    activeTab = _useState16[0],
+    setActiveTab = _useState16[1];
+  var _useState17 = (0, _react.useState)(["No History"]),
     _useState18 = _slicedToArray(_useState17, 2),
-    isRequesting = _useState18[0],
-    setIsRequesting = _useState18[1];
+    history = _useState18[0],
+    setHistory = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    isRequesting = _useState20[0],
+    setIsRequesting = _useState20[1];
 
   //**-------------------------**/
   // ** HTML/CSS Formatting ** //
@@ -257,21 +261,90 @@ var AutoComponent = function AutoComponent() {
       return _ref2.apply(this, arguments);
     };
   }();
+  var saveComponent = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(data) {
+      var url, response, responseData;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            url = "https://server-auto-component-46830ff262f8.herokuapp.com/user";
+            _context3.next = 3;
+            return fetch(url, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify(data)
+            });
+          case 3:
+            response = _context3.sent;
+            if (response.ok) {
+              _context3.next = 6;
+              break;
+            }
+            throw new Error('Failed to save component');
+          case 6:
+            _context3.next = 8;
+            return response.json();
+          case 8:
+            responseData = _context3.sent;
+            console.log('Save successful:', responseData);
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function saveComponent(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
 
   //**------------------------**/
   // ** UI/Button Handling ** //
   //**----------------------**/
 
+  var handleSave = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+      var saveData;
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            saveData = {
+              userId: user,
+              content: responseData
+              // Add other relevant data you might want to save
+            };
+            _context4.prev = 1;
+            _context4.next = 4;
+            return saveComponent(saveData);
+          case 4:
+            _context4.next = 9;
+            break;
+          case 6:
+            _context4.prev = 6;
+            _context4.t0 = _context4["catch"](1);
+            console.error("Error saving component:", _context4.t0);
+          case 9:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[1, 6]]);
+    }));
+    return function handleSave() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
   var handleChange = function handleChange(e) {
     e.preventDefault();
     setRequest(e.target.value);
   };
   var handleGenerate = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(e) {
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(e) {
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            _context3.next = 2;
+            _context5.next = 2;
             return setRequestData({
               "userId": user,
               "request": currentRequest
@@ -280,12 +353,12 @@ var AutoComponent = function AutoComponent() {
             setRequest('');
           case 3:
           case "end":
-            return _context3.stop();
+            return _context5.stop();
         }
-      }, _callee3);
+      }, _callee5);
     }));
-    return function handleGenerate(_x) {
-      return _ref3.apply(this, arguments);
+    return function handleGenerate(_x2) {
+      return _ref5.apply(this, arguments);
     };
   }();
   (0, _react.useEffect)(function () {
@@ -301,56 +374,56 @@ var AutoComponent = function AutoComponent() {
     setIsRequesting(false);
   };
   var handleRequestTab = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
-            _context4.next = 2;
+            _context6.next = 2;
             return setActiveTab(activeTab === 'response' || activeTab === '' ? 'request' : '');
           case 2:
           case "end":
-            return _context4.stop();
+            return _context6.stop();
         }
-      }, _callee4);
+      }, _callee6);
     }));
     return function handleRequestTab() {
-      return _ref4.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var handleResponseTab = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
-            _context5.next = 2;
+            _context7.next = 2;
             return setActiveTab(activeTab === 'request' || activeTab === '' ? 'response' : '');
           case 2:
           case "end":
-            return _context5.stop();
+            return _context7.stop();
         }
-      }, _callee5);
+      }, _callee7);
     }));
     return function handleResponseTab() {
-      return _ref5.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   var copyToClipboard = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
       var text;
-      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+      return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
           case 0:
             text = activeTab === 'response' ? responseData : requestData;
-            _context6.next = 3;
+            _context8.next = 3;
             return navigator.clipboard.writeText(text);
           case 3:
           case "end":
-            return _context6.stop();
+            return _context8.stop();
         }
-      }, _callee6);
+      }, _callee8);
     }));
     return function copyToClipboard() {
-      return _ref6.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
 
@@ -366,7 +439,7 @@ var AutoComponent = function AutoComponent() {
   };
 
   // build request tab content
-  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"';
+  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"';
   var responseHtml = responseData ? responseData : 'No response has been generated';
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-component",
-  "version": "0.1.3",
+  "version": "1.0.0",
   "main": "lib/index.js",
   "peerDependencies": {
     "react": "^18.2.0",
@@ -43,5 +43,5 @@
   "bugs": {
     "url": "https://github.com/TimHuitt/auto-component/issues"
   },
-  "homepage": "https://github.com/TimHuitt/auto-component"
+  "homepage": "https://auto-component.netlify.app/"
 }