auto-component 0.0.1

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "auto-component",
+  "version": "0.0.1",
+  "main": "src/index.js",
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "files": [
+    "src"
+  ]
+}

package/src/auto-component.css

@@ -0,0 +1,93 @@
+#content-creator {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 40px 0;
+}
+#content-creator div {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  
+}
+#content-creator input {
+  width: 60%;
+  height: 40px;
+  border-radius: 5px;
+  color: #444;
+  font-size: 20px;
+  padding-left: 10px;
+}
+#content-creator button {
+  padding: 10px;
+  margin: 20px;
+  background: rgb(184, 230, 184);
+  color: #111;
+  border-radius: 5px;
+  box-shadow: 0px 0px 5px #fff;
+}
+#content-creator button:nth-child(3) {
+  padding: 10px 20px;
+  margin-left: 0px;
+  margin-right: 0px;
+  background: #db9d9d;
+}
+#content-creator button:hover {
+  background: green;
+  color: #eee;
+}
+#content-creator button:nth-child(3):hover {
+  background: #dc3c3c;
+}
+#content-creator div:nth-child(2) {
+  display: flex;
+  flex-direction: column;
+}
+.tab {
+  margin: 0 10%;
+  background: #444;
+  border-radius: 5px 5px 0 0;
+  cursor: pointer;
+}
+.tab:hover {
+  background: #666;
+}
+.selected {
+
+  background: #888;
+  color: #111;
+}
+#content-creator pre {
+  position: relative;
+  text-align: left;
+  max-width: 90%;
+  min-width: 90%;
+  max-height: 60vh;
+  background: #aaa;
+  color: #111;
+  padding: 40px 10px 40px 10px;
+  overflow: auto;
+  border: 2px solid black;
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px #fff;
+}
+.copy-btn {
+  position: absolute;
+  top: 120px;
+  right: 7%;
+  max-width: 40px;
+  max-height: 30px;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  padding: 10px;
+  color: #fff;
+}
+
+.copy-btn:hover {
+  background: #666;
+}

package/src/auto-component.jsx

@@ -0,0 +1,188 @@
+import { useState, useEffect } from 'react'
+import beautify from 'js-beautify'
+import response from '../../assets/response.js'
+import './Componenter.css'
+
+const Componenter = ({ exclusions }) => {
+
+//**-----------**/
+// ** State ** //
+//**---------**/
+  const [currentHtml, setHtml] = useState('')
+  const [currentStyle, setStyles] = useState('')
+  const [ currentRequest, setRequest ] = useState('')
+
+  const [ responseData, setResponseData ] = useState(null)
+  const [ requestData, setRequestData ] = useState(null)
+
+  const [ activeTab, setActiveTab ] = useState('request')
+
+//**-------------------------**/
+// ** 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 = cleanHtml(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 cleanHtml = (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));
+  };
+
+  // full exclusion
+  const cleanHtmlFull = (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
+  }
+
+
+  useEffect(() => {
+    htmlContent()
+  }, [])
+
+//**---------------------------**/
+// ** API Requests/Response ** //
+//**-------------------------**/
+
+  // TEMP FUNCTION FOR TESTING
+  const sendRequest = (data) => {
+    return(response)
+  }
+
+  // make api request with updated state data
+  const handleRequest = async () => {
+    try {
+      const res = await sendRequest(requestData)
+      if (res) {
+        setResponseData(formatHtml(res.html))
+        setActiveTab('response')
+      }
+    } catch (err) {
+      console.log(err)
+    }
+    setIsLoading(false)
+  }
+
+//**-----------------**/
+// ** UI Handling ** //
+//**---------------**/
+
+  const handleChange = (e) => {
+    e.preventDefault()
+    setRequest(e.target.value)
+  }
+
+  const handleGenerate = async (e) => {
+    await setRequestData({
+      request: currentRequest, 
+      html: currentHtml
+    })
+    handleRequest()
+  }
+
+  const handleReset = () => {
+    setRequest('')
+    setResponseData('')
+  }
+
+  const handleRequestTab = () => {
+    setActiveTab('request')
+  }
+  const handleResponseTab = () => {
+    setActiveTab('response')
+  }
+  
+//**---------------**/
+// ** Rendering ** //
+//**-------------**/
+
+  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.
+
+    User 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'
+
+  
+  return (
+    <>
+      {/* create the display window */}
+      <div id="content-creator">
+        <div>
+          <input type="text" value={currentRequest} onChange={handleChange} placeholder="Enter a request"></input>
+          <button onClick={handleGenerate}>Generate</button>
+          <button onClick={handleReset}>X</button>
+        </div>
+        <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' ? requestHTML : responseHtml}
+          </pre>
+        </div>
+        <div className="copy-btn">
+          copy
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Componenter