auto-component 0.0.32 → 0.0.33

package/package.json

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

package/src/auto-component.css

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

package/src/index.jsx

@@ -1,243 +1,66 @@
-import { useState, useEffect } from 'react'
-// import beautify from 'js-beautify';
-import './auto-component.css'
+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'
 
-const AutoComponent = ({ exclusions }) => {
+const People = () => {
+  const [isLoading, setIsLoading] = useState(true)
+  const [people, setPeople] = useState([])
 
-//**-----------**/
-// ** 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 resData = await sendRequest();
-  
-      if (resData) {
-        setHistory(resData.history)
-        // setResponseData(formatHtml(resData.response.content));
-        setResponseData(resData.response.content);
-        setActiveTab('response');
-      }
+      const peopleData = await getPeople()
+      if (peopleData) setPeople(peopleData)
     } catch (err) {
-      console.log(err);
+      console.log(err)
     }
-    // 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
-    })
+    setIsLoading(false)
   }
 
   useEffect(() => {
-    if (requestData !== null) {
-      handleRequest();
-    }
-  },[requestData])
-
-  const handleReset = () => {
-    setRequest('')
-    setResponseData('')
-    randomUser()
-    setHistory([])
-  }
-
-  const handleRequestTab = () => {
-    setActiveTab('request')
-  }
-  const handleResponseTab = () => {
-    setActiveTab('response')
-  }
+    handleRequest()
+  }, [])
 
-  const copyToClipboard = async () => {
-    const text = activeTab === 'response' ? responseData : requestData
-    await navigator.clipboard.writeText(text)
-  }
-  
-//**---------------**/
-// ** Rendering ** //
-//**-------------**/
 
-  const getLog = () => {
+  if (isLoading) {
+    return <h1>Loading...</h1>;
+  } else {
     return (
-    history.map((entry, index) => (
-        
-        index !== 0 && entry.content.split('HTML Context:')[0] + (entry.content.includes("User Request") ? '\n' : '\n\n\n')
-      )
-    ))
-  }
-
-  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 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'
+      <section>
+        {/* <NewPersonForm handleRequest={handleRequest} /> */}
 
-  
-  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 id="secret-element" className='secret secret-element'>
+          this is the excluded text
+          <div className='something'>
+            and this is the excluded element
           </div>
-          <pre>
-           {activeTab === 'request' ? getLog() : responseHtml}
-          </pre>
         </div>
-        <div className="copy-btn" onClick={copyToClipboard} style={activeTab !== 'response' ? { display: 'none' } : null}>
-          copy
+
+        <div id="not-secret-element" className=''>
+          included
         </div>
-      </div>
-    </>
-  )
+
+        <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>
+          ))}
+        </div>
+        <AutoComponent />
+      </section>
+    );
+  }
 }
 
-export default AutoComponent
+export default People