Spa may 2024

app/page.js

@@ -1,12 +1,12 @@
 import Layout from '@/components/Layout'
-import EditForm from '@/components/EditForm'
+import UI from '@/components/UI'
 
 export default function Home(props) {
   return (
     <>
-    <Layout navState={{ about: true }}>
-      <h1 className="font-semibold py-2">Create a test case</h1>
-      <EditForm />
+    <Layout navState={{ about: false }}>
+      <br />
+      <UI editable={true} />
     </Layout>
     </>
   )

app/sandbox.html/page.js

@@ -1,4 +1,4 @@
-import UI from '@/components/UI'
+import UI from '@/components/Sandbox'
 
 export default function Sandbox(props) {
   return (

components/Accordian.js

@@ -0,0 +1,26 @@
+import accordianStyles from '@/styles/accordian.module.css'
+
+export const Accordian = ({children}) => {
+  return (
+    <div className={`${accordianStyles.default} mx-auto w-full`}>
+      {children}
+    </div>
+  )
+}
+
+export const AccordianItem = (props) => {
+  const {children, title, open} = props
+  return (
+    <details className="bg-white open:bg-gray-100 duration-300 my-2 border" open={!!open}>
+      <summary className="bg-inherit px-5 py-0 text-md flex cursor-pointer">
+        {title}
+        <button className="ml-auto" type="button">
+          <svg className="fill-current opacity-75 w-4 h-4 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
+        </button>
+      </summary>
+      <div className="bg-white px-5 py-3 text-sm font-light flex">
+        {children}
+      </div>
+    </details>
+  )
+}

components/Header.js

@@ -20,11 +20,11 @@ export default function Header(props) {
 
   return (
     <header>
-      <nav className="flex items-center justify-between flex-wrap py-2">
-        <div className="flex items-center flex-shrink-0 mr-6">
-          <a href="/" className="no-underline text-black">
+      <nav className="flex items-center justify-between flex-wrap border-b-2 border-gray-300 bg-white">
+        <div className="flex items-center flex-shrink-0 mr-6 max-w-6xl">
+          <a href="/" className="no-underline text-black h-full">
             <span className="sr-only">jsPerf Home Page</span>
-            <span className="font-semibold text-2xl tracking-tight">jsPerf.app</span>
+            <span className="font-semibold text-2xl tracking-tight"><span className="inline-block font-bold text-3xl bg-jsp-yellow py-2 pr-1 pl-3 mr-1">JS</span>Perf.app</span>
           </a>
         </div>
         <div className="block lg:hidden">
@@ -40,7 +40,7 @@ export default function Header(props) {
           </div>
           { !session &&
           <div>
-            <button className="flex items-center inline-block text-sm px-4 py-2 hover:fill-blue-500 hover:text-blue-500 lg:mt-0" onClick={() => signIn("github")}>
+            <button className="flex items-center inline-block text-sm px-4 py-4 hover:fill-blue-500 hover:text-blue-500 lg:mt-0" onClick={() => signIn("github")}>
               <span>Sign In</span>
               <GitHubIcon fill="#000000" width={16} height={16} className="ml-2 fill-inherit" />
             </button>

components/Layout.js

@@ -14,10 +14,10 @@ export default function Layout(props) {
   return (
     <>
       <SessionProvider>
-        <div className="font-sans antialiased min-h-full flex flex-col bg-gray-100">
+        <div className="font-sans antialiased min-h-full flex flex-col bg-gray-50">
           <div className="flex-auto ">
-            <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
-              <Header navState={navState} />
+            <Header navState={navState} />
+            <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen bg-white">
               { children }
               <Footer />
             </div>

components/UI.js → components/Sandbox/index.js

@@ -9,7 +9,7 @@ import '@/app/lib/benchmark.mjs' // mjs to avoid webpack parser
 
 let modulePromises = {}
 
-export default function UI(props) {
+export default function Sandbox(props) {
   const Benchmark = global.Benchmark
 
   const initHTMLPlaceholder = useRef()

components/TestRunner/index.js

@@ -116,8 +116,8 @@ export default function Tests(props) {
 
   return (
     <>
-      <h2 className="font-bold my-5">Test runner</h2>
-      <div id="controls" className="flex my-5 h-16 items-center">
+    <div className="mt-5">
+      <div id="controls" className="flex px-2 my-5 h-16 items-center">
         <p id="status" className="flex-1">
           {
             'ready' === benchStatus 
@@ -127,15 +127,10 @@ export default function Tests(props) {
         </p>
         { ['ready', 'complete'].includes(benchStatus) &&
           <>
-            <button 
-              id="run" 
-              type="button" 
-              className={`${buttonStyles.default} mx-2`} 
-              onClick={() => run({maxTime: 5})}>{runButtonText[benchStatus]||runButtonText['default']}</button>
             <button
               type="button" 
-              className={buttonStyles.default}
-              onClick={() => run({maxTime: 0.5})}>Quick Run</button>
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              onClick={() => run({maxTime: 0.5})}>Run Tests &#9654;</button>
             </>
         }
         { 'running' === benchStatus &&
@@ -151,19 +146,23 @@ export default function Tests(props) {
           style={{height: "1px", width: "1px"}}></iframe>
       </div>
       <table id="test-table" className="w-full border-collapse">
-        <caption className="bg-gray-200 font-bold text-md text-gray-800">Testing in <UserAgent /></caption>
-        <thead className="bg-blue-500 text-white">
+        <caption className="bg-gray-300 font-bold text-md text-black">Testing in <UserAgent /></caption>
+        <thead className="text-white bg-blue-500 ">
           <tr>
-            <th colSpan="2" className="py-1">Test</th>
+            <th colSpan="2" className="py-1">Test cases</th>
             <th title="Operations per second (higher is better)" className="px-2">Ops/sec</th>
           </tr>
         </thead>
         <tbody>
           {tests.map((test, i) => 
             <Test key={i} test={test} benchStatus={benchStatus} />
           )}
+          <tr>
+            <td colSpan="3" className="bg-gray-100 text-black font-bold text-center">+ Add Test</td>
+          </tr>
         </tbody>
       </table>
+    </div>
     </>
   )
 }

components/UI/index.js

@@ -0,0 +1,117 @@
+"use client"
+
+import { useState } from 'react'
+
+import buttonStyles from '@/styles/buttons.module.css'
+import Title from '@/components/sections/Title'
+import Meta from '@/components/sections/Meta'
+import TestRunner from '@/components/TestRunner'
+import {Accordian, AccordianItem} from '@/components/Accordian'
+import Editor from '@/components/Editor'
+
+export default function UI(props) {
+  const { editable } = props
+
+  const pageData = {
+    initHTML: '',
+    setup: '',
+    teardown: '',
+    title: '',
+    tests: [
+      { title: 'Underscore Flatten', code: 'const a = 234' },
+      { title: 'Native Flatten', code: 'const a = 345435' }
+    ]
+  }
+
+
+  // Code block states
+  const [codeBlockInitHTML, setCodeBlockInitHTML] = useState(pageData?.initHTML || '')
+  const [codeBlockSetup, setCodeBlockSetup] = useState(pageData?.setup || '')
+  const [codeBlockTeardown, setCodeBlockTeardown] = useState(pageData?.teardown || '')
+
+  const formDefaults = Object.assign({}, {
+    title: '',
+    info: '',
+    slug: '',
+    visible: false
+  }, pageData)
+
+  const submitFormHandler = (event) => {
+    event.preventDefault()
+
+    const formData = (({
+      title, 
+      info
+    }) => ({
+      title: title?.value || '', 
+      info: info?.value || ''
+    }))( event.target )
+
+    formData.slug = formDefaults.slug
+
+    formData.initHTML = codeBlockInitHTML
+
+    console.log(formData)
+  }
+
+  return (
+    <>
+      <form onSubmit={submitFormHandler}>
+        <section>
+          <Title editable={editable} title={pageData.title} />
+        </section>
+
+        <br />
+        <section>
+          <button className="bg-gray-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded">
+            + Description
+          </button>
+
+          <button className="bg-gray-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded">
+            + Library
+          </button>
+
+          <button className="bg-gray-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded">
+            + Setup
+          </button>
+
+          <button className="bg-gray-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded">
+            + Teardown
+          </button>
+
+          {/* <button className="bg-blue-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded"> */}
+          {/*   Test Environment */}
+          {/* </button> */}
+        </section>
+
+          {/* <input type="text" className="w-full text-md px-2 my-1" placeholder="Description (optional)" /> */}
+
+          {/* <Accordian> */}
+          {/*   <AccordianItem title="Setup HTML"> */}
+          {/*     <Editor code={codeBlockInitHTML} onUpdate={setCodeBlockInitHTML} className="html w-full p-2 border" style={{minHeight: "150px"}} /> */}
+          {/*   </AccordianItem> */}
+          {/*  */}
+          {/*   <AccordianItem title="Setup Javascript"> */}
+          {/*   </AccordianItem> */}
+          {/* </Accordian> */}
+
+        <section>
+          <TestRunner tests={pageData.tests} initHTML={pageData.initHTML} setup={pageData.setup} teardown={pageData.teardown} />
+
+        </section>
+        <br />
+        {/* <section> */}
+        {/*   <Accordian> */}
+        {/*     <AccordianItem title="Teardown"> */}
+        {/*     </AccordianItem> */}
+        {/*   </Accordian> */}
+        {/* </section> */}
+        {/* <br />  */}
+
+        <section className="flex justify-end">
+          <button type="submit" className={`${buttonStyles.default}`}>Save</button>
+        </section>
+      </form>
+    </>
+  )
+}

components/sections/Title.js

@@ -0,0 +1,17 @@
+export default function Title(props) {
+  const { editable, title} = props
+
+  if (editable) {
+    return (
+      <input type="text" name="title" className="w-full text-2xl border-b border-gray-300 p-2" placeholder="Benchmark Title (optional)" defaultValue={title} />
+    )
+  }
+
+  return (
+    <>
+      <hgroup>
+        <h1 className="text-2xl py-6 font-bold">{pageData.title}<span className="text-gray-400 text-base">{`${pageData.revision > 1 ? ` (v${pageData.revision})` : ''}`}</span></h1>
+      </hgroup>
+    </>
+  )
+}

styles/accordian.module.css

@@ -0,0 +1,16 @@
+.default details button {
+  pointer-events: none;
+}
+
+.default details summary svg { 
+  transform: rotate(90deg);
+  transition: all 0.3s;
+}
+
+.default details[open] summary svg {
+  transform: rotate(-90deg);  
+}
+
+.default details[open] summary ~ * {	
+  animation: ease-opacity-t-b .5s ease
+}

styles/buttons.module.css

@@ -1,14 +1,22 @@
 .default {
   @apply no-underline;
   @apply bg-gray-100 hover:bg-gray-200;
-  @apply border border-gray-400;
+  @apply border border-gray-300;
   @apply font-bold;
   @apply py-2 px-2;
-  @apply rounded;
   color: #000000;
   cursor: pointer;
 }
 
+.submit {
+  @apply no-underline;
+  @apply bg-blue-500 hover:bg-gray-200;
+  @apply font-bold;
+  @apply py-2 px-2;
+  color: #ffffff;
+  cursor: pointer;
+}
+
 .default > * {
   vertical-align: middle;
 }

styles/globals.css

@@ -23,6 +23,10 @@ a:hover {
   .bg-jsp-blue {
     background-image: linear-gradient(to bottom, #6ca5dd, #1a6ab9);
   }
+
+  .bg-jsp-yellow {
+    background-color: rgb(244 225 30);
+  }
 }