From 8d27ba102e4b14e8ac8280491746c45282946a03 Mon Sep 17 00:00:00 2001 From: asmyshlyaev177 Date: Sat, 30 Nov 2024 01:13:33 +0400 Subject: [PATCH] style: improve demo styles --- .../example-nextjs14/src/app/DemoPart.tsx | 2 +- packages/example-nextjs14/src/app/Status.tsx | 70 ++++++++++++++++--- .../src/app/components/FakeTypes.tsx | 6 +- packages/shared/styles.css | 1 + packages/shared/tailwind.ts | 53 ++++++++------ 5 files changed, 98 insertions(+), 34 deletions(-) diff --git a/packages/example-nextjs14/src/app/DemoPart.tsx b/packages/example-nextjs14/src/app/DemoPart.tsx index f11c802..8b65e9c 100644 --- 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 }) { -
Type something in a form, changes reflected in URL and state instantly.
+
Try to type something ↓
diff --git a/packages/example-nextjs14/src/app/Status.tsx b/packages/example-nextjs14/src/app/Status.tsx index d7cfc71..6fc5919 100644 --- 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(({

Types and structure of data are presered

- 
-          
{'{'}

-            

-              
name: {urlState.name}

-              
age: {urlState.age}

-              
agree: {JSON.stringify(urlState.agree_to_terms)}

-              
tags: {JSON.stringify(urlState.tags, null, 2)}

-            

-          
{'}'}

+          {/* 
{'{'}

+          

+            
name: {urlState.name}

+            
age: {urlState.age}

+            
agree: {JSON.stringify(urlState.agree_to_terms)}

+            
tags: {JSON.stringify(urlState.tags, null, 2)}

+          

+          
{'}'}
 */}
+
+          {renderObject(urlState)}
+
+
+ +
); }) + +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, level = 0, parentLevel = 1) { + const type = typeOf(obj) + + if (primitives.includes(type)) { + return ( + + {type === 'date' ? (obj as Date).toISOString() : String(obj)} + {type} + + ) + } + + if (type === 'object') { + return ( + + {'{'} + {Object.entries(obj as Object).map(([key, val])=> ( +
+ {key}: {renderObject(val, level + 1)} + +
+ ))} + {'}'} + + ) + } + + if (type === 'array') { + return ( + {'['} + {(obj as Array>).map(el => renderObject(el, level + 1))} + {']'} + ) + } + +} diff --git a/packages/example-nextjs14/src/app/components/FakeTypes.tsx b/packages/example-nextjs14/src/app/components/FakeTypes.tsx index 3d6b8ea..e0098e7 100644 --- 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 ?
= { }, 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", + // }, + // }, + // }, }, }, };