auto-component 0.0.33 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-component",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "main": "src/index.jsx",
   "peerDependencies": {
     "react": "^18.2.0",

package/src/auto-component.css

@@ -1,28 +1,22 @@
-#auto-component {
+#content-creator {
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin: 40px 0;
   font-family: Arial, Helvetica, sans-serif
 }
-#auto-component-entry {
-  position: fixed;
-  bottom: 100px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 90%;
-  max-width: 700px;
+#content-creator div {
+  width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 0 20px;
-  background: #222;
-  border-radius: 10px;
-  border: 2px solid rgb(108, 108, 246);
+  
 }
-#auto-component input {
-  width: 100%;
+#content-creator input {
+  width: 60%;
   height: 40px;
   border-radius: 5px;
   color: #444;
@@ -30,7 +24,7 @@
   border: 3px solid #ddd;
   padding-left: 10px;
 }
-#auto-component button {
+#content-creator button {
   padding: 10px;
   margin: 20px;
   background: rgb(184, 230, 184);
@@ -38,36 +32,29 @@
   border-radius: 5px;
   box-shadow: 0px 0px 5px #fff;
 }
-#auto-component button:nth-child(3) {
+#content-creator button:nth-child(3) {
   padding: 10px 20px;
   margin-left: 0px;
   margin-right: 0px;
   background: #db9d9d;
 }
-#auto-component button:hover {
+#content-creator button:hover {
   background: green;
   color: #eee;
 }
-#auto-component button:nth-child(3):hover {
+#content-creator button:nth-child(3):hover {
   background: #dc3c3c;
 }
-#auto-component-tabs {
-  position: fixed;
-  bottom: 68px;
-  left: 50%;
-  transform: translateX(-50%);
+#content-creator div:nth-child(2) {
   display: flex;
-  flex-direction: row;
-  width: 100%;
-  max-width: 700px;
+  flex-direction: column;
 }
 .tab {
-  width: 30%;
   margin: 0 10%;
   padding: 4px 0;
-  background: #c6c7d3;
-  color: #fff;
-  border-radius: 0 0 5px 5px;
+  background: #444;
+  color: #aaa;
+  border-radius: 5px 5px 0 0;
   cursor: pointer;
 }
 .tab:hover {
@@ -75,20 +62,17 @@
   color: #eee;
 }
 .selected {
-  background: #444;
-  color: #aaa;
+  background: #c6c7d3;
+  color: #fff;
   font-size: 1.2rem;
+  pointer-events: none;
 }
-#auto-component-code {
-  position: fixed;
-  bottom: 180px;
-  left: 50%;
-  transform: translateX(-50%);
+#content-creator pre {
+  position: relative;
   text-align: left;
-  max-width: 600px;
-  width: 80%;
-  max-height: 300px;
-  min-height: 300px;
+  max-width: 90%;
+  min-width: 90%;
+  max-height: 60vh;
   background: #cdd1d9;
   color: #111;
   padding: 40px 10px 40px 10px;
@@ -98,7 +82,7 @@
   box-shadow: 0px 0px 5px #fff;
   white-space: pre-wrap;
 }
-.auto-component-copy {
+.copy-btn {
   position: absolute;
   top: 130px;
   right: 7%;
@@ -111,9 +95,6 @@
   color: #fff;
 }
 
-.auto-component-copy:hover {
+.copy-btn:hover {
   background: #666;
-}
-.hidden {
-  display: none;
 }

package/src/index.jsx

@@ -1,66 +1,243 @@
-import {useState, useEffect} from 'react'
-import { Link } from 'react-router-dom'
-import { getPeople } from '../../utilities/people-service'
-import './People.css'
-import NewPersonForm from './NewPersonForm'
-import AutoComponent from '../../components/Componenter'
+import { useState, useEffect } from 'react'
+// import beautify from 'js-beautify';
+import './auto-component.css'
 
-const People = () => {
-  const [isLoading, setIsLoading] = useState(true)
-  const [people, setPeople] = useState([])
+const AutoComponent = ({ exclusions }) => {
 
+//**-----------**/
+// ** State ** //
+//**---------**/
+  const [ currentHtml, setHtml ] = useState('')
+  const [ currentStyle, setStyles ] = useState('')
+  const [ currentRequest, setRequest ] = useState('')
+  const [ user, setUser ] = useState('')
+
+  const [ responseData, setResponseData ] = useState(null)
+  const [ requestData, setRequestData ] = useState(null)
+  
+  const [ activeTab, setActiveTab ] = useState('request')
+  const [ history, setHistory ] = useState(["No History"])
+
+//**-------------------------**/
+// ** HTML/CSS Formatting ** //
+//**-----------------------**/
+  // get the html/style for the current page and set state
+  const htmlContent = () => {
+    const body = document.querySelector('body')
+    const htmlContent = body ? body.innerHTML : ''
+    const cssStyles = document.documentElement.innerHTML
+
+    const cleanedHtml = cleanExclusions(htmlContent, exclusions)
+    const cleanedStyles = cleanStyles(cssStyles)
+    
+    setHtml(cleanedHtml)
+    setStyles(cleanedStyles)
+  }
+
+  // format html for display (breaks/indentation)
+  // const formatHtml = (html) => {
+  //   return beautify.html(html, {
+  //     indent_size: 2,
+  //     wrap_line_length: 80,
+  //     max_preserve_newlines: 1,
+  //   })
+  // }
+
+  // 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
+  
+  // partial exclusion
+  const cleanExclusions = (html) => {
+    const regexExcludeClass = /(<[^>]*\sclass\s*=\s*['"]([^'"]*exclude[^'"]*)['"][^>]*>)[\s\S]*?(<\/[^>]*>)/g;
+    const cleanedHtml = html.replace(regexExcludeClass, '$1$3');
+    const scriptIndex = cleanedHtml.lastIndexOf('<script');
+
+    // return formatHtml(cleanedHtml.substring(0, scriptIndex));
+    return cleanedHtml.substring(0, scriptIndex);
+  };
+
+  // full exclusion
+  // const cleanExclusionsFull = (html) => {
+  //   const regexExcludeClass = /<[^>]*\sclass\s*=\s*['"]([^'"]*exclude[^'"]*)['"][^>]*>[\s\S]*?<\/[^>]*>/g
+  //   const cleanedHtml = html.replace(regexExcludeClass, '')
+  //   const scriptIndex = cleanedHtml.lastIndexOf('<script')
+  //   
+  //   return formatHtml(cleanedHtml.substring(0, scriptIndex))
+  // }
+
+  // exclude non <style> data and remove comments
+  const cleanStyles = (css) => {
+    const styleRegex = /<style\b[^>]*>(.*?)<\/style>/gs
+    const matches = css.match(styleRegex)
+  
+    if (matches) {
+      const cleanedMatches = matches.map(match => match.replace(/\/\*[\s\S]*?\*\//g, ''))
+      return cleanedMatches
+    }
+    return null
+  }
+
+  const randomUser = () => {
+    setUser(Math.floor(Math.random()*100000))
+  }
+
+  useEffect(() => {
+    htmlContent()
+    randomUser()
+  }, [])
+
+//**---------------------------**/
+// ** API Requests/Response ** //
+//**-------------------------**/
+
+  // TEMP FUNCTION FOR TESTING
+  // const sendRequest = (data) => {
+  //   return(response)
+  // }
+
+  const sendRequest = async () => {
+    const url = "https://server-auto-component-46830ff262f8.herokuapp.com/api";
+  
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestData),
+      });
+  
+      if (res.ok) {
+        const jsonData = await res.json();
+        return jsonData;
+      } else {
+        throw new Error("Invalid request!");
+      }
+    } catch (err) {
+      console.log(err.message);
+    }
+  };
+  
+  // make API request with updated state data
   const handleRequest = async () => {
     try {
-      const peopleData = await getPeople()
-      if (peopleData) setPeople(peopleData)
+      const resData = await sendRequest();
+  
+      if (resData) {
+        setHistory(resData.history)
+        // setResponseData(formatHtml(resData.response.content));
+        setResponseData(resData.response.content);
+        setActiveTab('response');
+      }
     } catch (err) {
-      console.log(err)
+      console.log(err);
     }
-    setIsLoading(false)
+    // setIsLoading(false);
+  };
+
+//**------------------------**/
+// ** UI/Button Handling ** //
+//**----------------------**/
+
+  const handleChange = (e) => {
+    e.preventDefault()
+    setRequest(e.target.value)
+  }
+
+  const handleGenerate = async (e) => {
+    await setRequestData({
+      "userId": user,
+      "request": currentRequest, 
+      "html": currentHtml
+    })
   }
 
   useEffect(() => {
-    handleRequest()
-  }, [])
+    if (requestData !== null) {
+      handleRequest();
+    }
+  },[requestData])
+
+  const handleReset = () => {
+    setRequest('')
+    setResponseData('')
+    randomUser()
+    setHistory([])
+  }
 
+  const handleRequestTab = () => {
+    setActiveTab('request')
+  }
+  const handleResponseTab = () => {
+    setActiveTab('response')
+  }
 
-  if (isLoading) {
-    return <h1>Loading...</h1>;
-  } else {
+  const copyToClipboard = async () => {
+    const text = activeTab === 'response' ? responseData : requestData
+    await navigator.clipboard.writeText(text)
+  }
+  
+//**---------------**/
+// ** Rendering ** //
+//**-------------**/
+
+  const getLog = () => {
     return (
-      <section>
-        {/* <NewPersonForm handleRequest={handleRequest} /> */}
+    history.map((entry, index) => (
+        
+        index !== 0 && entry.content.split('HTML Context:')[0] + (entry.content.includes("User Request") ? '\n' : '\n\n\n')
+      )
+    ))
+  }
 
-        <div id="secret-element" className='secret secret-element'>
-          this is the excluded text
-          <div className='something'>
-            and this is the excluded element
-          </div>
-        </div>
+  const requestHTML = currentHtml ? (
+`Review the details below for accuracy and privacy concerns.
+If the contents of an element should be excluded, add the 'exclude' class to the element.
+Click Generate to send the request and receive the auto component AI generated code.
 
-        <div id="not-secret-element" className=''>
-          included
-        </div>
+User 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"'
+    
+  const responseHtml = responseData ? (
+    responseData
+  ) : 'No response has been generated'
 
-        <div className="people-list">
-          {people.map((p) => (
-            <Link to={"/people/" + p._id}>
-              <div key={p._id}>
-                <h3>{p.name}</h3>
-                  <img
-                    className="profile-image"
-                    src={p.image}
-                    alt={`Image of ${p.name}`}
-                  />
-                <p>{p.title}</p>
-              </div>
-            </Link>
-          ))}
+  
+  return (
+    <>
+      {/* create the display window */}
+      <div id="auto-component">
+        <div>
+          <input type="text" value={currentRequest} onChange={handleChange} placeholder="Enter a request"></input>
+          <button onClick={handleGenerate}>Generate</button>
+          <button onClick={handleReset}>X</button>
         </div>
-        <AutoComponent />
-      </section>
-    );
-  }
+        <div>
+          <div>
+           <div className={`${activeTab === 'request' ? 'selected' : ''} tab`} onClick={handleRequestTab}>
+              Request
+            </div>
+            <div className={`${activeTab === 'response' ? 'selected' : ''} tab`} onClick={handleResponseTab}>
+              Response
+            </div>
+          </div>
+          <pre>
+           {activeTab === 'request' ? getLog() : responseHtml}
+          </pre>
+        </div>
+        <div className="copy-btn" onClick={copyToClipboard} style={activeTab !== 'response' ? { display: 'none' } : null}>
+          copy
+        </div>
+      </div>
+    </>
+  )
 }
 
-export default People
+export default AutoComponent