@dev-dudu-0515/panasuri 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Elvin Aquiatan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,222 @@
+# panasuri - Reactive Zod Validation Helper for ArrowJS
+
+A lightweight validation helper built on top of **Zod** that makes form validation simple and reactive.
+
+It provides:
+
+- ⚡ Built for ArrowJS reactive state
+- ✅ Full form validation
+- ✅ Field-level validation
+- 🔄 Reactive error updates
+- 🪶 Lightweight and dependency-free (except Zod)
+- 🎯 Type-safe with TypeScript
+
+---
+
+## Installation
+
+```bash
+npm install zod
+```
+
+Then import the helper.
+
+```ts
+import { createValidator } from "@lib/zod";
+```
+
+---
+
+## Basic Usage
+
+Create your Zod schema.
+
+```ts
+import { z } from "zod";
+
+export const LoginSchema = z.object({
+  username: z
+    .string()
+    .min(1, "Username is required"),
+
+  password: z
+    .string()
+    .min(8, "Password must be at least 8 characters"),
+});
+```
+
+Initialize the validator.
+
+```ts
+const { errors, isValid, validateField } = createValidator(
+  input,
+  LoginSchema,
+);
+```
+
+---
+
+## API
+
+### `createValidator(data, schema)`
+
+Returns:
+
+| Property | Description |
+|----------|-------------|
+| `errors` | Reactive object containing validation errors. |
+| `isValid()` | Validates the entire form and returns `true` or `false`. |
+| `validateField(field)` | Validates a single field. |
+
+---
+
+## Validating a Field
+
+Call `validateField()` whenever a field changes or loses focus.
+
+```ts
+validateField("username");
+```
+
+Example:
+
+```ts
+<input
+  @input=${(e: Event) => {
+    input.username = (e.target as HTMLInputElement).value;
+
+    if (touched.username) {
+      validateField("username");
+    }
+  }}
+  @blur=${() => validateField("username")}
+/>
+```
+
+---
+
+## Displaying Validation Errors
+
+The `errors` object contains an array of messages for each field.
+
+```ts
+errors.username
+```
+
+Example:
+
+```ts
+<div>
+  ${() =>
+    errors?.username?.map(
+      (error) => html`
+        <div class="text-error">
+          ${error}
+        </div>
+      `,
+    )}
+</div>
+```
+
+---
+
+## Validating the Entire Form
+
+Use `isValid()` before submitting.
+
+```ts
+const submit = () => {
+  if (!isValid()) {
+    return;
+  }
+
+  // Continue with form submission
+};
+```
+
+---
+
+## Complete Example
+
+```ts
+const { errors, isValid, validateField } = createValidator(
+  input,
+  LoginSchema,
+);
+
+<input
+  id="login_username"
+  type="text"
+  .value=${() => input.username}
+  @input=${(e: Event) => {
+    input.username = (e.target as HTMLInputElement).value;
+
+    if (touched.username) {
+      validateField("username");
+    }
+  }}
+  @focus=${() => {
+    touched.username = true;
+  }}
+  @blur=${() => {
+    validateField("username");
+  }}
+/>
+
+<div>
+  ${() =>
+    errors.username?.map(
+      (error) => html`<div>${error}</div>`,
+    )}
+</div>
+```
+
+---
+
+## Validation Flow
+
+```
+User types
+      │
+      ▼
+Update model
+      │
+      ▼
+validateField("username")
+      │
+      ▼
+errors.username updated
+      │
+      ▼
+UI automatically re-renders
+```
+
+For form submission:
+
+```
+Submit
+   │
+   ▼
+isValid()
+   │
+   ├── false → Display errors
+   │
+   └── true → Submit form
+```
+
+---
+
+## Why use this helper?
+
+- Minimal API
+- Built on top of Zod
+- No framework lock-in
+- Supports both live validation and submit validation
+- Keeps validation logic separate from UI components
+- Works well with reactive state libraries
+
+---
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+export declare function createValidator<T extends Record<string, any>>(state: T, schema: z.ZodType<T>): {
+    errors: Partial<Record<keyof T, string[]>> extends infer T_1 ? T_1 extends Partial<Record<keyof T, string[]>> ? T_1 extends import("@arrow-js/core").Computed<infer TValue> ? TValue : T_1 extends import("@arrow-js/core").ReactiveTarget ? T_1 | import("@arrow-js/core").Reactive<T_1> : T_1 : never : never;
+    isValid: () => boolean;
+    validateField: (field: keyof T) => boolean;
+    validateAll: () => boolean;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3D,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;;;2BAkCU,MAAM,CAAC;;EA+DtC"}

package/dist/index.js

@@ -0,0 +1,77 @@
+import { reactive } from '@arrow-js/core';
+import { z } from 'zod';
+export function createValidator(state, schema) {
+    // 1. House the flags inside the reactive object shell
+    const validatorState = reactive({
+        errors: {},
+        isValid: false,
+        hasErrors: false,
+    });
+    const mapErrors = (issues) => {
+        const fieldErrors = {};
+        for (const issue of issues) {
+            const field = issue.path?.[0];
+            if (!field)
+                continue;
+            const message = issue.message;
+            fieldErrors[field] ??= new Set();
+            fieldErrors[field].add(message);
+        }
+        return fieldErrors;
+    };
+    // 2. Clear Type Checking Error: Object.keys(state) avoids ReactiveValue proxy walls
+    const syncValidationFlag = () => {
+        const hasErrors = Object.keys(state).some((key) => {
+            const fieldErrors = validatorState.errors[key];
+            return Array.isArray(fieldErrors) && fieldErrors.length > 0;
+        });
+        validatorState.hasErrors = hasErrors;
+        validatorState.isValid = !hasErrors;
+    };
+    const validateField = (field) => {
+        const result = schema.safeParse(state);
+        // Case 1: Entire form is clean and valid
+        if (result.success) {
+            validatorState.errors[field] = [];
+            syncValidationFlag();
+            return true;
+        }
+        const mapped = mapErrors(result.error.issues);
+        // Case 2: This specific field has errors
+        validatorState.errors[field] = mapped[field]
+            ? [...mapped[field]]
+            : [];
+        syncValidationFlag();
+        return !(validatorState.errors[field] &&
+            validatorState.errors[field].length > 0);
+    };
+    const validateAll = () => {
+        const result = schema.safeParse(state);
+        if (result.success) {
+            Object.keys(validatorState.errors).forEach((k) => {
+                validatorState.errors[k] = [];
+            });
+            syncValidationFlag();
+            return true;
+        }
+        const mapped = mapErrors(result.error.issues);
+        // Mirror the exact error state to the reactive errors object
+        // If a field isn't in mapped, it means it's valid -> clear it.
+        Object.keys(state).forEach((key) => {
+            const field = key;
+            validatorState.errors[field] = mapped[field]
+                ? [...mapped[field]]
+                : [];
+        });
+        syncValidationFlag();
+        return false;
+    };
+    // 3. Return the single reactive proxy configuration block
+    return {
+        errors: validatorState.errors,
+        isValid: () => validatorState.isValid,
+        validateField,
+        validateAll,
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/tests/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/tests/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../src/tests/index.test.ts"],"names":[],"mappings":""}

package/dist/tests/index.test.js

@@ -0,0 +1,38 @@
+import { expect, test } from 'vitest';
+import { z } from 'zod';
+import { reactive } from '@arrow-js/core';
+import { createValidator } from '../index.js';
+const schema = z.object({
+    username: z
+        .string()
+        .trim()
+        .min(1, 'Username is required.')
+        .min(5, 'Username must be at least 5 characters long.')
+        .max(20, 'Username must be at most 20 characters long.')
+        .regex(/^(?!.*[_]{2})[a-zA-Z0-9_]+$/, 'Username can only contain letters, numbers, and at least 1 underscore.'),
+    password: z
+        .string()
+        .trim()
+        .min(1, 'Password is required.')
+        .min(5, 'Password must be at least 5 characters long.')
+        .max(50, 'Password must be at most 50 characters long.'),
+});
+const input = reactive({
+    username: '',
+    password: '',
+});
+const { errors, validateField } = createValidator(input, schema);
+test('Username empty string validation.', () => {
+    validateField('username');
+    console.log(errors);
+    expect(errors.username?.includes('Username is required.'));
+});
+test('Username minimun length validation.', () => {
+    validateField('username');
+    expect(errors.username?.includes('Username must be at least 5 characters long.'));
+});
+test('Username valid pattern validation.', () => {
+    validateField('username');
+    expect(errors.username?.includes('Username can only contain letters, numbers, and at least 1 underscore.'));
+});
+//# sourceMappingURL=index.test.js.map

package/dist/tests/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../src/tests/index.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC;SACR,MAAM,EAAE;SACR,IAAI,EAAE;SACN,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC;SAC/B,GAAG,CAAC,CAAC,EAAE,8CAA8C,CAAC;SACtD,GAAG,CAAC,EAAE,EAAE,8CAA8C,CAAC;SACvD,KAAK,CACJ,6BAA6B,EAC7B,wEAAwE,CACzE;IAEH,QAAQ,EAAE,CAAC;SACR,MAAM,EAAE;SACR,IAAI,EAAE;SACN,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC;SAC/B,GAAG,CAAC,CAAC,EAAE,8CAA8C,CAAC;SACtD,GAAG,CAAC,EAAE,EAAE,8CAA8C,CAAC;CAC3D,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,QAAQ,CAAC;IACrB,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC;AAEH,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAEjE,IAAI,CAAC,mCAAmC,EAAE,GAAG,EAAE;IAC7C,aAAa,CAAC,UAAU,CAAC,CAAC;IAE1B,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAEpB,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,uBAAuB,CAAC,CAAC,CAAC;AAC7D,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,qCAAqC,EAAE,GAAG,EAAE;IAC/C,aAAa,CAAC,UAAU,CAAC,CAAC;IAE1B,MAAM,CACJ,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,8CAA8C,CAAC,CAC1E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,oCAAoC,EAAE,GAAG,EAAE;IAC9C,aAAa,CAAC,UAAU,CAAC,CAAC;IAE1B,MAAM,CACJ,MAAM,CAAC,QAAQ,EAAE,QAAQ,CACvB,wEAAwE,CACzE,CACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@dev-dudu-0515/panasuri",
+  "version": "1.0.0",
+  "description": "Reactive Zod validation helper for ArrowJS",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@arrow-js/core": "^1.0.6",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}