@larose-ui/forms 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 laRose contributors
+
+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/dist/index.css

@@ -0,0 +1,43 @@
+/* src/Form.module.css */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lr-space-4);
+  max-width: 28rem;
+}
+.title {
+  margin: 0;
+  font-size: var(--lr-font-size-xl);
+  font-weight: var(--lr-font-weight-semibold);
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--lr-space-2);
+}
+.selectLabel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lr-space-1);
+  font-size: var(--lr-font-size-sm);
+  font-weight: var(--lr-font-weight-medium);
+}
+.select,
+.textarea {
+  font-family: var(--lr-font-family-sans);
+  font-size: var(--lr-font-size-md);
+  padding: var(--lr-space-2) var(--lr-space-3);
+  border: 1px solid var(--lr-color-border);
+  border-radius: var(--lr-radius-md);
+  background: var(--lr-color-background);
+  color: var(--lr-color-text);
+}
+.textarea {
+  min-height: 5rem;
+  resize: vertical;
+}
+.select:focus,
+.textarea:focus {
+  outline: none;
+  border-color: var(--lr-color-primary);
+}

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+
+type FieldType = 'text' | 'email' | 'number' | 'select' | 'date' | 'textarea';
+interface FieldCondition {
+    field: string;
+    equals?: unknown;
+    notEquals?: unknown;
+}
+interface SelectOption {
+    label: string;
+    value: string;
+}
+interface FormFieldSchema {
+    name: string;
+    type: FieldType;
+    label: string;
+    placeholder?: string;
+    required?: boolean;
+    hint?: string;
+    showWhen?: FieldCondition;
+    dependsOn?: string;
+    options?: SelectOption[];
+}
+interface FormSchema {
+    id: string;
+    title?: string;
+    fields: FormFieldSchema[];
+}
+type FormValues = Record<string, string>;
+declare function evaluateCondition(condition: FieldCondition, values: FormValues): boolean;
+declare function getVisibleFields(schema: FormSchema, values: FormValues): FormFieldSchema[];
+declare function validateForm(schema: FormSchema, values: FormValues): Record<string, string>;
+
+interface FormProps {
+    schema: FormSchema;
+    initialValues?: FormValues;
+    submitUrl?: string;
+    onSubmit?: (values: FormValues) => Promise<void> | void;
+    submitLabel?: string;
+}
+declare function Form({ schema, initialValues, submitUrl, onSubmit, submitLabel, }: FormProps): react.JSX.Element;
+
+export { type FieldCondition, type FieldType, Form, type FormFieldSchema, type FormProps, type FormSchema, type FormValues, type SelectOption, evaluateCondition, getVisibleFields, validateForm };

package/dist/index.js

@@ -0,0 +1,164 @@
+// src/schema.ts
+function evaluateCondition(condition, values) {
+  const current = values[condition.field];
+  if (condition.equals !== void 0) return current === condition.equals;
+  if (condition.notEquals !== void 0) return current !== condition.notEquals;
+  return Boolean(current);
+}
+function getVisibleFields(schema, values) {
+  return schema.fields.filter((field) => {
+    if (!field.showWhen) return true;
+    return evaluateCondition(field.showWhen, values);
+  });
+}
+function validateForm(schema, values) {
+  const errors = {};
+  const visible = getVisibleFields(schema, values);
+  for (const field of visible) {
+    const value = values[field.name]?.trim() ?? "";
+    if (field.required && !value) {
+      errors[field.name] = `${field.label} is required`;
+    }
+    if (field.type === "email" && value && !value.includes("@")) {
+      errors[field.name] = "Invalid email address";
+    }
+  }
+  return errors;
+}
+
+// src/Form.tsx
+import { useCallback, useMemo, useState } from "react";
+import { Input, Button, Alert, Textarea, Select } from "@larose-ui/react";
+import { useMutation } from "@larose-ui/data";
+import {
+  useOptionalObservability,
+  markFormSubmitted,
+  trackFormSuccess,
+  trackFormError,
+  trackFormValidationFailed
+} from "@larose-ui/observability";
+
+// src/Form.module.css
+var Form_default = {};
+
+// src/Form.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Form({
+  schema,
+  initialValues = {},
+  submitUrl,
+  onSubmit,
+  submitLabel = "Save"
+}) {
+  const [values, setValues] = useState(initialValues);
+  const [errors, setErrors] = useState({});
+  const [touched, setTouched] = useState({});
+  const [localSubmitting, setLocalSubmitting] = useState(false);
+  const observability = useOptionalObservability();
+  const formName = schema.id;
+  const mutation = useMutation({
+    url: submitUrl ?? "/__larose_noop__",
+    method: "POST"
+  });
+  const visibleFields = useMemo(
+    () => getVisibleFields(schema, values),
+    [schema, values]
+  );
+  const handleChange = useCallback((name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    setTouched((prev) => ({ ...prev, [name]: true }));
+  }, []);
+  const handleSubmit = useCallback(
+    async (e) => {
+      e.preventDefault();
+      const validationErrors = validateForm(schema, values);
+      setErrors(validationErrors);
+      if (Object.keys(validationErrors).length > 0) {
+        if (observability) {
+          trackFormValidationFailed(
+            formName,
+            observability.track,
+            Object.keys(validationErrors)
+          );
+        }
+        return;
+      }
+      if (observability) {
+        markFormSubmitted(formName, observability.track);
+      }
+      if (onSubmit) {
+        setLocalSubmitting(true);
+        try {
+          await onSubmit(values);
+          if (observability) trackFormSuccess(formName, observability.track);
+        } catch (err) {
+          if (observability) {
+            trackFormError(
+              formName,
+              observability.track,
+              err instanceof Error ? err.message : "Submit failed"
+            );
+          }
+          throw err;
+        } finally {
+          setLocalSubmitting(false);
+        }
+      } else if (submitUrl) {
+        const result = await mutation.mutate(values);
+        if (mutation.error && observability) {
+          trackFormError(formName, observability.track, mutation.error.message);
+        } else if (result !== void 0 && observability) {
+          trackFormSuccess(formName, observability.track);
+        }
+      }
+    },
+    [schema, values, onSubmit, submitUrl, mutation, observability, formName]
+  );
+  const serverError = submitUrl ? mutation.error : null;
+  const isSubmitting = localSubmitting || mutation.status === "submitting";
+  return /* @__PURE__ */ jsxs("form", { className: Form_default.form, onSubmit: handleSubmit, "data-form-id": schema.id, children: [
+    schema.title && /* @__PURE__ */ jsx("h2", { className: Form_default.title, children: schema.title }),
+    serverError && /* @__PURE__ */ jsx(Alert, { variant: "error", title: "Save failed", children: serverError.message }),
+    visibleFields.map((field) => /* @__PURE__ */ jsx("div", { children: field.type === "select" ? /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: field.label,
+        name: field.name,
+        value: values[field.name] ?? "",
+        onChange: (e) => handleChange(field.name, e.target.value),
+        options: field.options ?? [],
+        error: touched[field.name] ? errors[field.name] : void 0
+      }
+    ) : field.type === "textarea" ? /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: field.label,
+        name: field.name,
+        value: values[field.name] ?? "",
+        onChange: (e) => handleChange(field.name, e.target.value),
+        placeholder: field.placeholder,
+        error: touched[field.name] ? errors[field.name] : void 0,
+        hint: field.hint
+      }
+    ) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        label: field.label,
+        name: field.name,
+        type: field.type === "number" ? "number" : field.type,
+        value: values[field.name] ?? "",
+        onChange: (e) => handleChange(field.name, e.target.value),
+        hint: field.hint,
+        error: touched[field.name] ? errors[field.name] : void 0,
+        placeholder: field.placeholder
+      }
+    ) }, field.name)),
+    /* @__PURE__ */ jsx("div", { className: Form_default.actions, children: /* @__PURE__ */ jsx(Button, { type: "submit", loading: isSubmitting, children: submitLabel }) })
+  ] });
+}
+export {
+  Form,
+  evaluateCondition,
+  getVisibleFields,
+  validateForm
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@larose-ui/forms",
+  "version": "0.1.0",
+  "description": "Schema-driven forms for laRose UI platform",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@larose-ui/core": "0.1.0",
+    "@larose-ui/data": "0.1.0",
+    "@larose-ui/observability": "0.1.0",
+    "@larose-ui/react": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/larose-ui/larose.git",
+    "directory": "packages/forms"
+  },
+  "keywords": [
+    "larose",
+    "react",
+    "ui-platform",
+    "design-system",
+    "saas"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}