test: add @ybyra/react unit tests, fix playground tests, and fix docs MIME error

[iguit0]

Description

• Adds the first test suite for @ybyra/react, covering all non-hook utility modules — 79 tests across 5 files
• Fixes pre-existing test failures in playground/sveltekit and playground/react-native
• Fixes MIME type console errors on all VitePress documentation pages caused by demo nav links

New tests (packages/react/src/)

File	Tests	Module under test
validation.test.ts	33	All 8 built-in validators, registerValidator, validateField, validateAllFields, translate passthrough
proxy.test.ts	18	createStateProxy change tracking, createSchemaProxy override tracking, immutability guarantees
translate.test.ts	10	resolveFieldLabel, resolveGroupLabel, resolveActionLabel fallback chains
icons.test.ts	9	configureIcons, resolveActionIcon, resolveGroupIcon domain→common fallback
registry.test.ts	9	registerRenderers, getRenderer, createRegistry global/scoped isolation

Playground fixes

playground/sveltekit — All 14 test suites were failing:

• esbuild.tsconfigRaw: '{}' in vitest config to bypass missing .svelte-kit/tsconfig.json
• New $app/paths mock (was aliased for $app/navigation and $app/state but not $app/paths)
• Added Send icon to lucide-svelte mocks in layout.test.ts and icons.test.ts
• Centralized lucide-svelte mock in tests/setup.ts for coverage of all route tests

playground/react-native — App tests (add, view, edit, index) were failing:

• Added @ybyra/persistence/web alias in vitest config (subpath wasn't resolved)
• Added vi.mock('@ybyra/persistence/web') in packages/react-native/testing/setup.ts

Docs fix — MIME type error on demo pages

Symptom: Every VitePress documentation page logged console errors:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server
responded with a MIME type of "text/html".

Root cause: The "Demos" dropdown in the VitePress nav used relative links (/demo/react-web/, etc.). VitePress only recognizes links as external if they start with a protocol (https://). Relative paths are treated as internal routes, causing VitePress to prefetch non-existent page modules — the server returned the 404 HTML page instead of JavaScript, triggering strict MIME type checking.

Fix: Changed all four demo nav links in docs/.vitepress/config.ts to use absolute URLs (https://devitools.github.io/ybyra/demo/react-web/, etc.). VitePress now correctly treats them as external links and skips prefetching.

Note: target: '_blank' only affects click behavior — it does NOT prevent VitePress from prefetching the link as an internal route. Full URL with protocol is required.

Why

@ybyra/react is the most complex package in the monorepo (form state, proxy system, validation, i18n, icon resolution) but had zero tests. These five modules are pure functions with no React dependency, so they can be tested with plain vitest — no jsdom or @testing-library/react needed.

The playground test failures were pre-existing (not introduced by this PR) but blocked the full pnpm test suite from passing.

Bug documented

createSchemaProxy interacts with structuredClone upstream, but pattern() in TextFieldDefinition stores a raw RegExp in validation params. structuredClone throws on RegExp objects. This is documented in a test comment in proxy.test.ts for a future fix in core.

Summary by CodeRabbit

• Tests

  • Added comprehensive test coverage for validation, translation, icon resolution, proxy utilities, and registry management in React package.
  • Enhanced test infrastructure for React Native and SvelteKit playgrounds.

• Chores

  • Updated demo navigation links to external URLs.
  • Refined TypeScript configuration to exclude test files from compilation.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces comprehensive test coverage for React utilities (icons, proxy, registry, translation, and validation), updates documentation navigation to external URLs, expands test mocking infrastructure across projects, and adjusts TypeScript and Vitest configurations to accommodate test files.

Changes

Cohort / File(s)	Summary
Documentation Navigation docs/.vitepress/config.ts	Updates Demos navigation items to use external URLs pointing to deployed demo sites for React Web, React Native, Vue + Quasar, and SvelteKit.
React Test Suites packages/react/src/icons.test.ts, packages/react/src/proxy.test.ts, packages/react/src/registry.test.ts, packages/react/src/translate.test.ts, packages/react/src/validation.test.ts	Introduces five new test suites with comprehensive coverage: icons module (configureIcons, resolveActionIcon, resolveGroupIcon); proxy utilities (createStateProxy and createSchemaProxy); registry module (registerRenderers, getRenderer, createRegistry); translation functions (resolveFieldLabel, resolveGroupLabel, resolveActionLabel); and validation utilities (built-in validators, custom validators, field validation with translation support).
React TypeScript Config packages/react/tsconfig.json	Adds exclude pattern to omit test files (src/**/*.test.ts and src/**/*.spec.ts) from TypeScript compilation scope.
React Native Test Setup packages/react-native/testing/setup.ts	Adds mock for @ybyra/persistence/web with createWebDriver function exposing mocked methods (initialize, create, read, update, destroy, search).
SvelteKit Test Configuration playground/sveltekit/vitest.config.mts	Adds esbuild configuration with tsconfigRaw property to vitest config. Also includes minor formatting adjustment in react-native vitest config.
SvelteKit Test Setup playground/sveltekit/tests/setup.ts, playground/sveltekit/tests/src/settings/icons.test.ts	Restores Plus and X exports in lucide-svelte mock; introduces new icons test with vitest mock setup and dynamic module import to ensure test isolation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A flurry of tests now adorns our code,
Configuration paths freshly bestowed,
Icons and proxies, validations divine,
Each module now tested—oh, how they shine! ✨
With mocks standing guard at the SvelteKit gate,
Our coverage grows grand, our future's first-rate!

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the three main components of the changeset: adding unit tests for @ybyra/react, fixing playground tests, and fixing a docs MIME error.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch test/react-unit-tests

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@playground/sveltekit/tests/src/settings/icons.test.ts`:
- Line 14: Remove the ineffective top-level dynamic import
import('../../../src/lib/settings/icons') — it’s a no-op because it’s neither
awaited nor assigned; instead rely on the awaited import already present inside
the test (the dynamic import used at line 18) or, if you intended module
initialization before tests, replace the bare import with an awaited
import/assignment in a beforeAll hook. Specifically delete the bare import(...)
statement (or convert it to await import('../../../src/lib/settings/icons') in a
setup block) and keep the existing awaited import inside the test.

🧹 Nitpick comments (5)

packages/react/tsconfig.json (1)

11-12: Consider adding .tsx test file exclusions.

The current patterns exclude .test.ts and .spec.ts files but not their .tsx counterparts. If any React component tests use JSX syntax (.test.tsx or .spec.tsx), they would still be included in the compilation.

💡 Proposed fix to cover TSX test files

   "include": ["src"],
-  "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.test.tsx", "src/**/*.spec.tsx"]

playground/sveltekit/tests/src/settings/icons.test.ts (1)

4-12: Duplicate mock — already defined in setup.ts.

The lucide-svelte mock is already configured in playground/sveltekit/tests/setup.ts (which is referenced in vitest.config.mts as a setup file). This inline mock is redundant and could cause confusion about which mock takes precedence.

♻️ Proposed fix to remove duplicate mock

 import { resolveActionIcon } from '@ybyra/sveltekit'
-import { describe, it, expect, vi } from 'vitest'
-
-vi.mock('lucide-svelte', () => ({
-  Plus: 'Plus',
-  Eye: 'Eye',
-  Pencil: 'Pencil',
-  Save: 'Save',
-  Send: 'Send',
-  X: 'X',
-  Trash2: 'Trash2',
-}))
+import { describe, it, expect } from 'vitest'

packages/react/src/validation.test.ts (3)

5-18: Consider extracting shared test helper.

The makeFieldConfig helper is duplicated from proxy.test.ts. While duplication in test files is generally acceptable for isolation, if more test files need this helper, consider extracting it to a shared test utilities file.

---

42-45: Minor: Comment says "returns null" but function returns empty array.

The test name says "returns null for non-empty string" but validateField returns an array. The assertion is correct (toHaveLength(0)), but the test name could be clearer.

📝 Suggested test name clarification

-    it('returns null for non-empty string', () => {
+    it('returns no errors for non-empty string', () => {
       const errors = validateField('hello', [rule])
       expect(errors).toHaveLength(0)
     })

Similar naming appears in other tests (lines 47, 52, 75, 80, 95, 110, 115, 130, 145, 160, 175).

---

136-164: Consider adding date edge case tests.

The minDate and maxDate tests use ISO date strings which is good. Consider adding tests for:

• Equal date (boundary condition: '2024-01-01' with minDate '2024-01-01')
• Invalid date strings (to verify graceful handling)

This is optional as the current coverage is adequate for typical use cases.