diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index bbc294c..4c63b45 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -23,7 +23,7 @@ - [ ] Linting and formatting pass (`pnpm lint && pnpm format`) - [ ] PR title follows semantic commit format (`feat:`, `fix:`, etc.) - [ ] Changes are documented (README, JSDoc, or comments if needed) -- [ ] Ready for review — not a draft +- [ ] Ready for review - not a draft --- diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml.disable similarity index 92% rename from .github/workflows/release.yml rename to .github/workflows/release.yml.disable index 92e9b47..2e17038 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml.disable @@ -60,8 +60,8 @@ jobs: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} run: | echo "ℹ️ Packages flagged for publish:" - echo "• core → ${{ steps.release.outputs['packages/core--release_version'] }}" - echo "• cli → ${{ steps.release.outputs['packages/cli--release_version'] }}" + echo "• core ➡️ ${{ steps.release.outputs['packages/core--release_version'] }}" + echo "• cli ➡️ ${{ steps.release.outputs['packages/cli--release_version'] }}" if [[ '${{ steps.release.outputs['packages/core--release_created'] }}' == 'true' ]]; then echo "📦 Publishing @react-zero-ui/core…" diff --git a/.prettierrc.json b/.prettierrc.json index aa184a9..295e1be 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -12,4 +12,4 @@ "bracketSameLine": true, "embeddedLanguageFormatting": "auto", "singleAttributePerLine": true -} \ No newline at end of file +} diff --git a/.release-please-config.json b/.release-please-config.json deleted file mode 100644 index 288e79b..0000000 --- a/.release-please-config.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "release-type": "node", - "monorepo-tags": true, - "include-component-in-tag": true, - "packages": { - "packages/core": { "package-name": "@react-zero-ui/core", "release-type": "node" }, - "packages/cli": { "package-name": "create-zero-ui", "release-type": "node" } - } -} diff --git a/AGENTS.md b/AGENTS.md deleted file mode 100644 index a545470..0000000 --- a/AGENTS.md +++ /dev/null @@ -1,87 +0,0 @@ - - -# Guidelines for AI Agents in this Repo - -This repository contains **React Zero-UI**, a library for global UI state without React re-renders. -Use these tips when working with the codebase or generating examples. - -## How React Zero-UI works - -1. `useUI()` writes to `document.body.dataset` using keys you specify. - -```tsx -const [staleValue, setValue] = useUI<'open' | 'closed'>('sidebar', 'closed'); -``` - -- `key` → becomes `data-{key}` on `
` (e.g., `sidebar` → `data-sidebar="closed"`). -- `defaultValue` → used for SSR to avoid FOUC. Added to the body as a data-attribute. at build time. -- The first value is **always stale** — do NOT rely on it for reactive updates. - -2. Consumption is done strictly with tailwind variant classNames: - -```html - -``` - -3. Build-time tooling scans all `useUI()` keys and values, then generates matching Tailwind variants. - -4. At runtime, calling the setter updates the `data-*` attribute on `` immediately. No VDOM. No re-renders. - ---- - -## Best Practices for AI Agents - -- ✅ Use `useUI()` **only for UI state**: themes, layout flags, open/closed toggles, etc. -- ✅ Prefer **kebab-case keys**: e.g. `sidebar-open`, `theme-dark`. -- ✅ Always provide a `defaultValue`: prevents FOUC and enables SSR. -- ✅ Do **NOT** use the first value from `useUI()` for logic — it DOES NOT UPDATE. -- ✅ You can call setters **from anywhere** in the app — no prop drilling or context needed. -- ✅ Tailwind classes must use `key-value:` pattern: - - `theme-dark:bg-black` - - `accent-blue:text-blue-500` - - `sidebar-open:translate-x-0` - ---- - -## Example: Toggle Theme - -```tsx -// Set state -const [, setTheme] = useUI<'light' | 'dark'>('theme', 'light'); -; -``` - -```html - - -``` - -## Example: Scoping Styles - -```tsx -const [, setTheme] = useUI<'light' | 'dark'>('theme', 'light'); -// Simply pass a ref to the element -; -``` - -Now the data-\* will flip on that element, and the styles will be scoped to that element, or its children. - ---- - -## What NOT to do - -- ❌ Do not pass anything to the StateKey or InitialValue that is not a string or does not resolve to a string. -- ❌ Don't use `useUI()` for business logic or data fetching -- ❌ Don't rely on the first tuple value for reactivity -- ❌ Don't use camelCase keys (will break variant generation) - ---- - -## Summary - -**React Zero-UI is a ZERO re-render UI state engine with global state baked in.** It replaces traditional VDOM cycles with `data-*` attribute flips and compile-time CSS. No React context. No prop drilling. No runtime cost. - -Think of it as writing atomic Tailwind variants for every UI state — but flipping them dynamically at runtime without re-rendering anything. diff --git a/README.md b/README.md index ce5194c..fcc1eec 100644 --- a/README.md +++ b/README.md @@ -1,186 +1,217 @@ -# React Zero‑UI (Beta) + + + -**Instant UI state updates. ZERO React re‑renders. Near ZERO runtime. <500 bytes** + -Pre‑render your UI once, flip a `data-*` attribute to update — that's it. +
+
+
{JSON.stringify({ theme, altTheme, variant, size, mode, color }, null, 2)}
-