style: improve demo styles

asmyshlyaev177 · Nov 29, 2024 · 8d27ba1 · 8d27ba1
1 parent e634ef0
commit 8d27ba1
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 34 deletions.
diff --git a/packages/example-nextjs14/src/app/DemoPart.tsx b/packages/example-nextjs14/src/app/DemoPart.tsx
@@ -37,7 +37,7 @@ export function DemoPart({ searchParams }: { searchParams: object }) {
             <UrlBox />
           </div>
 
-          <div className="relative w-[max-content] font-mono before:absolute before:inset-0 before:animate-typewriter before:bg-white after:absolute after:inset-0 after:w-[0.125em] after:animate-caret after:bg-black">Type something in a form, changes reflected in URL and state instantly.</div>
+          <div className="relative ml-12 place-content-center flex animate-text bg-gradient-to-r from-purple-600 via-yellow-600 to-orange-600 bg-clip-text text-transparent w-full max-w-[15rem] font-bold select-none">Try to type something <span className='block text-[30px] leading-7 font-bold text-black animate-bounce -mb-2'>↓</span></div>
 
         </header>
 

diff --git a/packages/example-nextjs14/src/app/Status.tsx b/packages/example-nextjs14/src/app/Status.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 import { form } from 'shared/form';
 import { useUrlState } from 'state-in-url/next';
 
+import { typeOf } from 'packages/urlstate';
+
 import { SourceCodeBtn } from './components/SourceCodeBtn';
 
 export const Status = React.memo(({
@@ -29,19 +31,25 @@ export const Status = React.memo(({
       <h3>Types and structure of data are presered</h3>
 
       <div className="flex-none">
-        <pre
-          className="h-[330px] text-sm overflow-y-scroll text-gray-600 bg-white p-4 rounded-md shadow-inner break-all whitespace-pre-wrap"
+         <pre
+          className="h-[330px] overflow-y-scroll text-gray-600 bg-white p-4 rounded-md shadow-inner break-all whitespace-pre-wrap leading-6"
           data-testid="parsed"
         >
-          <div>{'{'}</div>
-            <div className="ml-4">
-              <div><b>name:</b> {urlState.name}</div>
-              <div><b>age:</b> {urlState.age}</div>
-              <div><b>agree:</b> {JSON.stringify(urlState.agree_to_terms)}</div>
-              <div><b>tags:</b> {JSON.stringify(urlState.tags, null, 2)}</div>
-            </div>
-          <div>{'}'}</div>
+          {/* <div>{'{'}</div>
+          <div className="ml-4">
+            <div><b>name:</b> {urlState.name}</div>
+            <div><b>age:</b> {urlState.age}</div>
+            <div><b>agree:</b> {JSON.stringify(urlState.agree_to_terms)}</div>
+            <div><b>tags:</b> {JSON.stringify(urlState.tags, null, 2)}</div>
+          </div>
+          <div>{'}'}</div> */}
+
+          {renderObject(urlState)}
+
+
         </pre>
+
+
       </div>
       <SourceCodeBtn
         href={ghLink}
@@ -50,3 +58,45 @@ export const Status = React.memo(({
     </div>
   );
 })
+
+type SimpleVal = string | number | boolean | undefined | null | Date
+
+const primitives = ['string', 'number', 'boolean', 'null', 'undefined', 'date']
+const mult = 6;
+
+function renderObject(obj: object | Array<SimpleVal> | SimpleVal, level = 0, parentLevel = 1) {
+  const type = typeOf(obj)
+
+  if (primitives.includes(type)) {
+    return (
+      <span className={`group ml-2 inline-flex flex-nowrap gap-2`}>
+        <span className='whitespace-break-spaces break-all'>{type === 'date' ? (obj as Date).toISOString() : String(obj)}</span>
+        <span className={`transition-all text-xs opacity-0 group-hover:opacity-100 text-orange-600 group-hover:font-semibold group-hover:block whitespace-nowrap -mt-[0.3rem] -ml-[1ch]`}>{type}</span>
+      </span>
+    )
+  }
+
+  if (type === 'object') {
+    return (
+      <span className='relative'>
+        <span>{'{'}</span>
+        {Object.entries(obj as Object).map(([key, val])=> (
+          <div style={{ marginLeft: (level + 2) * mult }} key={key} className=''>
+            <span className='font-semibold'>{key}</span>: {renderObject(val, level + 1)}
+
+          </div>
+        ))}
+        <span style={{ marginLeft: (level + parentLevel) * mult }}>{'}'}</span>
+      </span>
+    )
+  }
+
+  if (type === 'array') {
+    return (<span style={{ marginLeft: level * mult }} className='relative'>
+      <span>{'['}</span>
+      {(obj as Array<SimpleVal | object | Array<SimpleVal>>).map(el => renderObject(el, level + 1))}
+      <span style={{ marginLeft: level * mult }}>{']'}</span>
+    </span>)
+  }
+
+}
diff --git a/packages/example-nextjs14/src/app/components/FakeTypes.tsx b/packages/example-nextjs14/src/app/components/FakeTypes.tsx
@@ -32,7 +32,7 @@ export const FakeTypes = ({ matchers, id }: { matchers?: Matcher[], id: string }
         const next = (ev?.target?.nextSibling?.textContent || '').trim()
 
         // if (text?.length < 12) {
-        //   console.log(`${text}${next}`, { ev, context })
+          // console.log({ ev, context, text, next })
         // }
 
         const match = matchers?.find(el => el[0] === `${text}${next}`)
@@ -41,7 +41,7 @@ export const FakeTypes = ({ matchers, id }: { matchers?: Matcher[], id: string }
           if (match[1] !== tooltip.nodes) {
             setTooltip({ nodes: match[1], x: ev.clientX, y: ev.clientY })
           }
-        } else if (tooltip.nodes.length) {
+        } else if (tooltip.nodes.length || text.length > 20 && !next) {
           setTooltip(curr => ({ ...curr, nodes: [] }))
         }
       }
@@ -50,7 +50,7 @@ export const FakeTypes = ({ matchers, id }: { matchers?: Matcher[], id: string }
       (codeBlock as HTMLDivElement).onmouseleave = () => setTooltip(curr => ({...curr, nodes: []}));
 
     }
-  }, [id, tooltip.nodes, matchers])
+  }, [id, tooltip.nodes, matchers, context])
 
   return tooltip.nodes.length ? <div
     style={floatingStyles}

diff --git a/packages/shared/styles.css b/packages/shared/styles.css
@@ -156,6 +156,7 @@
 
     &:hover .line.highlighted {
       background-color: rgba(148, 148, 148, 0.15);
+      /* font-size: 103%; */
     }
 
     & .highlighted-word {

diff --git a/packages/shared/tailwind.ts b/packages/shared/tailwind.ts
@@ -8,33 +8,46 @@ export const sharedConfig: Partial<Config> = {
       },
 
       animation: {
-        typewriter: "typewriter 6s steps(30) forwards",
-        caret: "typewriter 6s steps(30) forwards, blink 1s steps(11) 10 2s",
+        // typewriter: "typewriter 6s steps(30) forwards",
+        // caret: "typewriter 6s steps(30) forwards, blink 1s steps(11) 10 2s",
+        text: "text 5s ease infinite",
       },
       keyframes: {
-        typewriter: {
-          to: {
-            left: "100%",
-          },
-        },
-        blink: {
-          "0%": {
-            opacity: "0",
-          },
-          "0.1%": {
-            opacity: "1",
+        text: {
+          "0%, 100%": {
+            "background-size": "200% 200%",
+            "background-position": "left center",
           },
           "50%": {
-            opacity: "1",
-          },
-          "50.1%": {
-            opacity: "0",
-          },
-          "100%": {
-            opacity: "0",
+            "background-size": "200% 200%",
+            "background-position": "right center",
           },
         },
       },
+      // keyframes: {
+      //   typewriter: {
+      //     to: {
+      //       left: "100%",
+      //     },
+      //   },
+      //   blink: {
+      //     "0%": {
+      //       opacity: "0",
+      //     },
+      //     "0.1%": {
+      //       opacity: "1",
+      //     },
+      //     "50%": {
+      //       opacity: "1",
+      //     },
+      //     "50.1%": {
+      //       opacity: "0",
+      //     },
+      //     "100%": {
+      //       opacity: "0",
+      //     },
+      //   },
+      // },
     },
   },
 };