kayforms 0.1.1

package/packages/solid/src/index.ts

@@ -0,0 +1,206 @@
+// ============================================================================
+// @kayforms/solid — Solid JS Adapter
+// ============================================================================
+// Bridges Kayforms reactive signals to Solid's reactive Signal/Context systems.
+// ============================================================================
+
+import {
+  createSignal,
+  onCleanup,
+  createContext,
+  useContext,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import {
+  createForm,
+  type FormConfig,
+  type FormStore,
+  type FormErrors,
+  type FieldNode,
+  type Signal,
+  type Computed,
+} from "@kayforms/core";
+
+// ---------------------------------------------------------------------------
+// Signal → Solid Accessor bridge
+// ---------------------------------------------------------------------------
+
+/**
+ * Hook to convert a Kayforms Signal or Computed into a Solid read-only Accessor.
+ * Automatically handles subscriptions and cleanups on component teardown.
+ */
+export function useSignalValue<T>(signal: Signal<T> | Computed<T>): Accessor<T> {
+  const [val, setVal] = createSignal<T>(signal.peek());
+  const unsubscribe = signal.subscribe((next) => {
+    setVal(() => next);
+  });
+  onCleanup(unsubscribe);
+  return val;
+}
+
+// ---------------------------------------------------------------------------
+// Context System
+// ---------------------------------------------------------------------------
+
+const FormContext = createContext<FormStore<any>>();
+
+export interface FormProviderProps {
+  form: FormStore<any>;
+  children: JSX.Element;
+}
+
+/** Provides form context to child Solid components */
+export function FormProvider(props: FormProviderProps) {
+  return FormContext.Provider({
+    value: props.form,
+    get children() {
+      return props.children;
+    },
+  });
+}
+
+/** Injects form context into child Solid components */
+export function useFormContext(): FormStore<any> {
+  const store = useContext(FormContext);
+  if (!store) {
+    throw new Error(
+      "[kayforms/solid] useField must be used inside a <FormProvider> component."
+    );
+  }
+  return store;
+}
+
+// ---------------------------------------------------------------------------
+// useForm
+// ---------------------------------------------------------------------------
+
+export interface UseFormReturn<T extends Record<string, unknown>> {
+  /** The reactive form store */
+  store: FormStore<T>;
+  /** Solid Accessor for values */
+  values: Accessor<T>;
+  /** Solid Accessor for errors */
+  errors: Accessor<FormErrors<T>>;
+  /** Solid Accessor for dirty state */
+  dirty: Accessor<boolean>;
+  /** Solid Accessor for validity */
+  valid: Accessor<boolean>;
+  /** Solid Accessor for submitting state */
+  submitting: Accessor<boolean>;
+  /** Solid Accessor for validating state */
+  validating: Accessor<boolean>;
+  /** Submission handler */
+  handleSubmit: (e?: Event) => void;
+  /** Reset form values */
+  reset: (values?: Partial<T>) => void;
+  /** Get a field node by path */
+  getField: <V = unknown>(path: string) => FieldNode<V>;
+}
+
+/**
+ * Create and manage a Kayforms form in a Solid JS component.
+ */
+export function useForm<T extends Record<string, unknown>>(
+  config: FormConfig<T>
+): UseFormReturn<T> {
+  const store = createForm(config);
+
+  onCleanup(() => {
+    store.dispose();
+  });
+
+  const values = useSignalValue(store.values);
+  const errors = useSignalValue(store.errors);
+  const dirty = useSignalValue(store.dirty);
+  const valid = useSignalValue(store.valid);
+  const submitting = useSignalValue(store.submitting);
+  const validating = useSignalValue(store.validating);
+
+  const handleSubmit = (e?: Event) => {
+    e?.preventDefault();
+    store.submit();
+  };
+
+  const reset = (newValues?: Partial<T>) => {
+    store.reset(newValues);
+  };
+
+  return {
+    store,
+    values,
+    errors,
+    dirty,
+    valid,
+    submitting,
+    validating,
+    handleSubmit,
+    reset,
+    getField: store.getField,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// useField
+// ---------------------------------------------------------------------------
+
+export interface UseFieldReturn<V = unknown> {
+  /** Solid Accessor for field value */
+  value: Accessor<V>;
+  /** Solid Accessor for field error */
+  error: Accessor<string | undefined>;
+  /** Solid Accessor for touched state */
+  touched: Accessor<boolean>;
+  /** Solid Accessor for dirty state */
+  dirty: Accessor<boolean>;
+  /** Solid Accessor for validating state */
+  validating: Accessor<boolean>;
+  /** Triggered value update */
+  onChange: (value: V) => void;
+  /** Blur handler */
+  onBlur: () => void;
+  /** Props for binding to plain DOM inputs */
+  inputProps: {
+    value: V;
+    onInput: (e: any) => void;
+    onBlur: () => void;
+  };
+}
+
+/**
+ * Bind a single field's reactive signals in a Solid JS component.
+ */
+export function useField<V = unknown>(path: string): UseFieldReturn<V> {
+  const store = useFormContext();
+  const field = store.getField<V>(path);
+
+  const value = useSignalValue(field.value);
+  const error = useSignalValue(field.error);
+  const touched = useSignalValue(field.touched);
+  const dirty = useSignalValue(field.dirty);
+  const validating = useSignalValue(field.validating);
+
+  const onChange = (v: V) => field.onChange(v);
+  const onBlur = () => field.onBlur();
+
+  const handleInput = (e: any) => {
+    field.onChange(e.target.value as V);
+  };
+
+  return {
+    value,
+    error,
+    touched,
+    dirty,
+    validating,
+    onChange,
+    onBlur,
+    get inputProps() {
+      return {
+        value: value(),
+        onInput: handleInput,
+        onBlur,
+      };
+    },
+  };
+}

package/packages/solid/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}

package/packages/solid/tsup.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  minify: false,
+  treeshake: true,
+  external: ["solid-js", "@kayforms/core"],
+  outExtension({ format }) {
+    return {
+      js: format === "cjs" ? ".cjs" : ".js",
+    };
+  },
+});

package/packages/svelte/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kayforms/svelte",
+  "version": "0.1.0",
+  "description": "Svelte adapter for Kayforms reactive form library",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rimraf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kayforms/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "svelte": "^4.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0",
+    "rimraf": "^5.0.0"
+  },
+  "sideEffects": false,
+  "license": "MIT"
+}

package/packages/svelte/src/index.ts

@@ -0,0 +1,199 @@
+// ============================================================================
+// @kayforms/svelte — Svelte Adapter
+// ============================================================================
+// Bridges Kayforms signals to Svelte's reactive stores.
+// Enables using the Svelte `$store` template syntax directly.
+// ============================================================================
+
+import { onDestroy, setContext, getContext } from "svelte";
+import {
+  createForm,
+  type FormConfig,
+  type FormStore,
+  type FormErrors,
+  type FieldNode,
+  type Signal,
+  type Computed,
+} from "@kayforms/core";
+
+// ---------------------------------------------------------------------------
+// Svelte Store Wrapper
+// ---------------------------------------------------------------------------
+
+export interface ReadableStore<T> {
+  subscribe(run: (value: T) => void): () => void;
+}
+
+/**
+ * Wrap a Kayforms Signal or Computed in a Svelte readable store.
+ * Synchronously fires the current value to comply with Svelte store specifications.
+ */
+export function toStore<T>(signal: Signal<T> | Computed<T>): ReadableStore<T> {
+  return {
+    subscribe(run: (value: T) => void): () => void {
+      // Svelte stores must call the callback immediately upon subscription
+      run(signal.peek());
+      return signal.subscribe(run);
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Context System
+// ---------------------------------------------------------------------------
+
+const FORM_KEY = "kayforms-form-context";
+
+/** Provide form context inside a parent Svelte component */
+export function setFormContext(store: FormStore<any>): void {
+  setContext(FORM_KEY, store);
+}
+
+/** Retrieve form context inside a child Svelte component */
+export function getFormContext(): FormStore<any> {
+  const store = getContext<FormStore<any>>(FORM_KEY);
+  if (!store) {
+    throw new Error(
+      "[kayforms/svelte] getFormContext must be used inside a component " +
+        "where setFormContext(form.store) was called."
+    );
+  }
+  return store;
+}
+
+// ---------------------------------------------------------------------------
+// useForm (createFormStore)
+// ---------------------------------------------------------------------------
+
+export interface UseFormReturn<T extends Record<string, unknown>> {
+  /** The reactive form store */
+  store: FormStore<T>;
+  /** Svelte store for values */
+  values: ReadableStore<T>;
+  /** Svelte store for errors */
+  errors: ReadableStore<FormErrors<T>>;
+  /** Svelte store for dirty state */
+  dirty: ReadableStore<boolean>;
+  /** Svelte store for validity */
+  valid: ReadableStore<boolean>;
+  /** Svelte store for submitting state */
+  submitting: ReadableStore<boolean>;
+  /** Svelte store for validating state */
+  validating: ReadableStore<boolean>;
+  /** Submit handler */
+  handleSubmit: (e?: Event) => void;
+  /** Reset form values */
+  reset: (values?: Partial<T>) => void;
+  /** Get a field node by path */
+  getField: <V = unknown>(path: string) => FieldNode<V>;
+}
+
+/**
+ * Create and manage a Kayforms form in a Svelte component.
+ */
+export function useForm<T extends Record<string, unknown>>(
+  config: FormConfig<T>
+): UseFormReturn<T> {
+  const store = createForm(config);
+
+  onDestroy(() => {
+    store.dispose();
+  });
+
+  const values = toStore(store.values);
+  const errors = toStore(store.errors);
+  const dirty = toStore(store.dirty);
+  const valid = toStore(store.valid);
+  const submitting = toStore(store.submitting);
+  const validating = toStore(store.validating);
+
+  const handleSubmit = (e?: Event) => {
+    e?.preventDefault();
+    store.submit();
+  };
+
+  const reset = (newValues?: Partial<T>) => {
+    store.reset(newValues);
+  };
+
+  return {
+    store,
+    values,
+    errors,
+    dirty,
+    valid,
+    submitting,
+    validating,
+    handleSubmit,
+    reset,
+    getField: store.getField,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// useField (getFieldStore)
+// ---------------------------------------------------------------------------
+
+export interface UseFieldReturn<V = unknown> {
+  /** Underlying field node */
+  field: FieldNode<V>;
+  /** Svelte store for field value */
+  value: ReadableStore<V>;
+  /** Svelte store for field error */
+  error: ReadableStore<string | undefined>;
+  /** Svelte store for touched state */
+  touched: ReadableStore<boolean>;
+  /** Svelte store for dirty state */
+  dirty: ReadableStore<boolean>;
+  /** Svelte store for validating state */
+  validating: ReadableStore<boolean>;
+  /** Triggered value update */
+  onChange: (value: V) => void;
+  /** Blur handler */
+  onBlur: () => void;
+  /** Props for binding to plain DOM inputs */
+  inputProps: {
+    value: V;
+    onInput: (e: any) => void;
+    onBlur: () => void;
+  };
+}
+
+/**
+ * Bind a single field's reactive signals in a Svelte component.
+ */
+export function useField<V = unknown>(path: string): UseFieldReturn<V> {
+  const store = getFormContext();
+  const field = store.getField<V>(path);
+
+  const value = toStore(field.value);
+  const error = toStore(field.error);
+  const touched = toStore(field.touched);
+  const dirty = toStore(field.dirty);
+  const validating = toStore(field.validating);
+
+  const onChange = (v: V) => field.onChange(v);
+  const onBlur = () => field.onBlur();
+
+  const handleInput = (e: any) => {
+    field.onChange(e.target.value as V);
+  };
+
+  return {
+    field,
+    value,
+    error,
+    touched,
+    dirty,
+    validating,
+    onChange,
+    onBlur,
+    get inputProps() {
+      return {
+        value: field.value.peek(),
+        onInput: handleInput,
+        onBlur,
+      };
+    },
+  };
+}

package/packages/svelte/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}

package/packages/svelte/tsup.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  minify: false,
+  treeshake: true,
+  external: ["svelte", "@kayforms/core"],
+  outExtension({ format }) {
+    return {
+      js: format === "cjs" ? ".cjs" : ".js",
+    };
+  },
+});

package/packages/vanilla/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@kayforms/vanilla",
+  "version": "0.1.0",
+  "description": "Vanilla JS adapter for Kayforms reactive form library",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rimraf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kayforms/core": "workspace:*"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0",
+    "rimraf": "^5.0.0"
+  },
+  "sideEffects": false,
+  "license": "MIT"
+}