From d3537d36a78ecf9e7754b9aa1ac7516b6944e370 Mon Sep 17 00:00:00 2001 From: Austin1serb Date: Sat, 21 Jun 2025 23:41:45 -0700 Subject: [PATCH 1/2] fix: updated layout shift demo --- examples/demo/src/app/(test)/ZeroState.tsx | 12 ++++++------ examples/demo/src/app/(test)/page.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/demo/src/app/(test)/ZeroState.tsx b/examples/demo/src/app/(test)/ZeroState.tsx index c84a293..b0095d4 100644 --- a/examples/demo/src/app/(test)/ZeroState.tsx +++ b/examples/demo/src/app/(test)/ZeroState.tsx @@ -3,7 +3,7 @@ import useUI from '@austinserb/react-zero-ui'; import { useRenderTracker } from './ReactTracker'; -export function TestComponent() { +export function TestComponentZero() { const ref = useRenderTracker('TestComponent'); const [, setTheme] = useUI<'light' | 'dark'>('theme', 'light'); const [, setAccent] = useUI<'violet' | 'emerald' | 'amber'>('accent', 'violet'); @@ -112,13 +112,13 @@ function InteractiveCard({ toggleMenu }: { toggleMenu: () => void }) { aria-label="button" onClick={toggleMenu} className="accent-violet:bg-violet-500 accent-emerald:bg-emerald-500 accent-amber:bg-amber-500 w-full rounded-lg py-3 font-medium text-white hover:scale-[1.02]"> - Close Panel - Open Panel + Close Panel + Open Panel {/* Sliding Panel */} -
+

✨ This panel slides open without re-rendering!

@@ -146,8 +146,8 @@ function StateDisplay() {
menu: - Open - Closed + Open + Closed
diff --git a/examples/demo/src/app/(test)/page.tsx b/examples/demo/src/app/(test)/page.tsx index 3d2c64e..03cea52 100644 --- a/examples/demo/src/app/(test)/page.tsx +++ b/examples/demo/src/app/(test)/page.tsx @@ -2,7 +2,7 @@ import { Icon } from '@/app/components/Icon'; import { TestComponentWithState } from './ReactState'; -import { TestComponent } from './ZeroState'; +import { TestComponentZero } from './ZeroState'; import { useUI } from '@austinserb/react-zero-ui'; export default function Page() { @@ -36,7 +36,7 @@ export default function Page() {
- +
From a4472a1130ad69dbe371d4a06dc0ab057f98b888 Mon Sep 17 00:00:00 2001 From: Austin1serb Date: Sat, 21 Jun 2025 23:42:03 -0700 Subject: [PATCH 2/2] fix: fixed the close/open menu text --- .gitignore | 2 +- examples/demo/src/app/(test)/ReactState.tsx | 19 +++++++++++++------ examples/demo/src/app/(test)/ZeroState.tsx | 12 +++++++----- examples/demo/src/app/(test)/layout.tsx | 3 ++- examples/demo/src/app/globals.css | 3 +++ 5 files changed, 26 insertions(+), 13 deletions(-) diff --git a/.gitignore b/.gitignore index 2490e10..5d3307b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ # package artifacts node_modules/ -.next/ +**/.next/ dist/ coverage/ test-results/ diff --git a/examples/demo/src/app/(test)/ReactState.tsx b/examples/demo/src/app/(test)/ReactState.tsx index 2c2c287..0cbbea4 100644 --- a/examples/demo/src/app/(test)/ReactState.tsx +++ b/examples/demo/src/app/(test)/ReactState.tsx @@ -47,9 +47,14 @@ function Header({ theme }: { theme: 'light' | 'dark' }) {
-

React State Management

- -

Reactive state management with React

+

+ React State Management +

+ +

+ Reactive state management with React
+ Re-renders O(n) +

); } @@ -148,7 +153,7 @@ function InteractiveCard({ {/* Sliding Menu */}
-

✨ This panel slides open and has to re-render!

+

✨ This panel slides open and has to re-render!

@@ -160,9 +165,11 @@ function StateDisplay({ theme, accent, menuOpen }: { theme: 'light' | 'dark'; ac const ref = useRenderTracker('StateDisplay'); return ( -
+
+ className={`mt-5 **:text-nowrap flex justify-center gap-4 space-y-1 text-center font-mono text-sm capitalize ${accent === 'violet' ? 'text-violet-500' : accent === 'emerald' ? 'text-emerald-500' : 'text-amber-500'}`}>
theme: {theme}
accent: {accent}
menu: {menuOpen ? 'Open' : 'Closed'}
diff --git a/examples/demo/src/app/(test)/ZeroState.tsx b/examples/demo/src/app/(test)/ZeroState.tsx index b0095d4..f2ab007 100644 --- a/examples/demo/src/app/(test)/ZeroState.tsx +++ b/examples/demo/src/app/(test)/ZeroState.tsx @@ -33,7 +33,7 @@ function Header() {

Zero UI

- Reactive state without re-rendering OR prop drilling.
+ Reactive state without re-rendering .
Zero re-renders,{' '} Reactive &{' '} @@ -120,7 +120,7 @@ function InteractiveCard({ toggleMenu }: { toggleMenu: () => void }) { {/* Sliding Panel */}

-

✨ This panel slides open without re-rendering!

+

✨ This panel slides open without re-rendering!

@@ -132,7 +132,9 @@ function StateDisplay() { const ref = useRenderTracker('StateDisplay'); return ( -
+
theme: Light @@ -146,8 +148,8 @@ function StateDisplay() {
menu: - Open - Closed + Open + Closed
diff --git a/examples/demo/src/app/(test)/layout.tsx b/examples/demo/src/app/(test)/layout.tsx index 1b7ad5f..cd9cf2e 100644 --- a/examples/demo/src/app/(test)/layout.tsx +++ b/examples/demo/src/app/(test)/layout.tsx @@ -1,9 +1,10 @@ +import { domAnimation, LazyMotion } from 'motion/react'; import { RenderTracker } from './ReactTracker'; const layout: React.FC<{ children: React.ReactNode }> = ({ children }) => { return (
- {children} + {children}
(Layout.tsx) Global UI State Variables
diff --git a/examples/demo/src/app/globals.css b/examples/demo/src/app/globals.css index 24f032b..35c9f4d 100644 --- a/examples/demo/src/app/globals.css +++ b/examples/demo/src/app/globals.css @@ -7,6 +7,9 @@ 0px 25px 25px -3.75px rgba(0, 0, 0, 0.11), 0px -5px 5px -3.75px rgba(0, 0, 0, 0.11); } +/* * { + border: 1px dotted red; +} */ button:not(:disabled), [role='button']:not(:disabled) { cursor: pointer;