Skip to content

Commit 71c1e10

Browse files
Austin1serbAustin1serb
authored
added useScopedUI hook (#17)
1 parent a934584 commit 71c1e10

27 files changed

+295
-207
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ yarn-error.log*
1919

2020
# tarballs produced during local tests
2121
*.tgz
22-
22+
t.*
2323

2424
# keep these files
2525
!next-env.d.ts

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@
3737
"lint": "eslint .",
3838
"lint:fix": "eslint . --fix",
3939
"typecheck": "tsc --noEmit --project tsconfig.base.json",
40-
"size": "npx esbuild ./packages/core/dist/index.js --bundle --minify --format=esm --external:react --define:process.env.NODE_ENV='\"production\"' | gzip -c | wc -c"
40+
"size": "npx esbuild ./packages/core/dist/index.js --bundle --minify --format=esm --external:react --define:process.env.NODE_ENV='\"production\"' | gzip -c | wc -c",
41+
"build-output": "npx esbuild ./packages/core/dist/index.js --bundle --minify --format=esm --external:react --define:process.env.NODE_ENV='\"production\"'"
4142
},
4243
"devDependencies": {
4344
"@eslint/js": "^9.32.0",

‎packages/core/__tests__/e2e/next.spec.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,8 @@ test.describe('Zero-UI Next.js Integration Tests', () => {
178178

179179
// Click scope toggle
180180
await page.getByTestId('scope-toggle').click();
181-
await expect(body).toHaveAttribute('data-scope', 'off');
181+
const scope = page.getByTestId('scope-container');
182+
await expect(scope).toHaveAttribute('data-scope', 'on');
182183

183184
// Verify other states are preserved
184185
await expect(body).toHaveAttribute('data-theme', 'dark');

‎packages/core/__tests__/e2e/vite.spec.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,8 @@ test.describe('Zero-UI Next.js Integration Tests', () => {
167167

168168
// Click scope toggle
169169
await page.getByTestId('scope-toggle').click();
170-
await expect(body).toHaveAttribute('data-scope', 'off');
170+
const scope = page.getByTestId('scope-container');
171+
await expect(scope).toHaveAttribute('data-scope', 'on');
171172

172173
// Verify other states are preserved
173174
await expect(body).toHaveAttribute('data-theme', 'dark');

‎packages/core/__tests__/fixtures/next/.zero-ui/attributes.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
/* AUTO-GENERATED - DO NOT EDIT */
22
export const bodyAttributes = {
33
"data-child": "closed",
4-
"data-faq": "closed",
5-
"data-mobile": "false",
64
"data-number": "1",
7-
"data-scope": "off",
85
"data-theme": "light",
96
"data-theme-2": "light",
107
"data-theme-three": "light",

‎packages/core/__tests__/fixtures/next/app/FAQ.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { useUI } from '@react-zero-ui/core';
1+
import { useScopedUI } from '@react-zero-ui/core';
22

33
function FAQ({ question, answer, index }) {
4-
const [, setOpen] = useUI<'open' | 'closed'>('faq', 'closed'); // Same key everywhere!
4+
const [open, setOpen] = useScopedUI<'open' | 'closed'>('faq', 'closed'); // Same key everywhere!
55

66
return (
77
<div
88
ref={setOpen.ref}
9-
data-index={index}>
9+
data-index={index}
10+
data-faq={open}>
1011
<button
1112
data-testid={`faq-${index}-toggle`}
1213
className="bg-blue-500 text-white p-2 rounded-md m-5"

‎packages/core/__tests__/fixtures/next/app/layout.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
import { bodyAttributes } from '@zero-ui/attributes';
2-
import './globals.css';
1+
import { bodyAttributes } from "@zero-ui/attributes";import './globals.css';
32

43
export default function RootLayout({ children }) {
5-
return (
6-
<html lang="en">
7-
<body
8-
{...bodyAttributes}
9-
className="bg-red test-ww this is to test the body tag"
10-
id="88">
4+
return (
5+
<html lang="en">
6+
<body {...bodyAttributes}
7+
className="bg-red test-ww this is to test the body tag"
8+
id="88">
119
{children}
1210
</body>
13-
</html>
14-
);
15-
}
11+
</html>);
12+
13+
}

‎packages/core/__tests__/fixtures/next/app/page.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
'use client';
2-
import { useUI } from '@react-zero-ui/core';
2+
import { useScopedUI, useUI } from '@react-zero-ui/core';
33
import UseEffectComponent from './UseEffectComponent';
44
import FAQ from './FAQ';
55
import { ChildComponent } from './ChildComponent';
66
import { ChildWithoutSetter } from './ChildWithoutSetter';
77

88
export default function Page() {
9+
const [scope, setScope] = useScopedUI<'off' | 'on'>('scope', 'off');
10+
911
const [, setTheme] = useUI<'light' | 'dark'>('theme', 'light');
1012
const [, setTheme2] = useUI<'light' | 'dark'>('theme-2', 'light');
1113
const [, setThemeThree] = useUI<'light' | 'dark'>('theme-three', 'light');
1214
const [, setToggle] = useUI<'true' | 'false'>('toggle-boolean', 'true');
1315
const [, setNumber] = useUI<'1' | '2'>('number', '1');
14-
const [, setOpen] = useUI<'open' | 'closed'>('faq', 'closed'); // Same key everywhere!
15-
const [, setScope] = useUI<'off' | 'on'>('scope', 'off');
16-
const [, setMobile] = useUI<'true' | 'false'>('mobile', 'false');
16+
const [open, setOpen] = useScopedUI<'open' | 'closed'>('faq', 'closed');
17+
const [mobile, setMobile] = useScopedUI<'true' | 'false'>('mobile', 'false');
1718
const [, setChildOpen] = useUI<'open' | 'closed'>('child', 'closed');
1819

1920
const [, setToggleFunction] = useUI<'white' | 'black'>('toggle-function', 'white');
@@ -145,6 +146,7 @@ export default function Page() {
145146
className="scope-off:bg-blue-100 scope-on:bg-blue-900 scope-on:text-white"
146147
data-testid="scope-container"
147148
//this ref tells the hook to flip the data key here
149+
data-scope={scope}
148150
ref={setScope.ref}>
149151
<button
150152
type="button"
@@ -166,7 +168,8 @@ export default function Page() {
166168
className="mobile-false:bg-blue-100 mobile-true:bg-blue-900 mobile-true:text-white"
167169
data-testid="mobile-container"
168170
//this ref tells the hook to flip the data key here
169-
ref={setMobile.ref}>
171+
ref={setMobile.ref}
172+
data-mobile={mobile}>
170173
<button
171174
type="button"
172175
onClick={() => {
@@ -194,7 +197,9 @@ export default function Page() {
194197

195198
<hr />
196199

197-
<div ref={setOpen.ref}>
200+
<div
201+
ref={setOpen.ref}
202+
data-faq={open}>
198203
<button
199204
className="bg-blue-500 text-white p-2 rounded-md m-5"
200205
onClick={() => setOpen((prev) => (prev === 'open' ? 'closed' : 'open'))}>

‎packages/core/__tests__/fixtures/vite/.zero-ui/attributes.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* AUTO-GENERATED - DO NOT EDIT */
22
export declare const bodyAttributes: {
3+
"data-child": "closed" | "open";
34
"data-faq": "closed" | "open";
45
"data-mobile": "false" | "true";
56
"data-number": "1" | "2";

‎packages/core/__tests__/fixtures/vite/.zero-ui/attributes.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
/* AUTO-GENERATED - DO NOT EDIT */
22
export const bodyAttributes = {
3-
"data-faq": "closed",
4-
"data-mobile": "false",
3+
"data-child": "closed",
54
"data-number": "1",
6-
"data-scope": "off",
75
"data-theme": "light",
86
"data-theme-2": "light",
97
"data-theme-three": "light",

0 commit comments

Comments
 (0)