@sio-group/form-react 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,97 +1,38 @@
 # Changelog
 
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-### Added
-
-- Initial release of `@sio-group/form-react` package
-- **Form Component** - Complete form renderer with layout support
-- **useForm Hook** - Central form state management
-- **Individual Field Components**
-- **Button Components**
-- **Layout System**
-- **Form State Tracking**
-- **File Upload Features**
-
-### Changed
-
-- N/A (initial release)
-
-### Deprecated
-
-- N/A (initial release)
-
-### Removed
-
-- N/A (initial release)
+## 0.2.0
 
-### Fixed
+### Minor Changes
 
-- N/A (initial release)
+- d1d7d64: Upgrade react peer dependancy
 
-### Security
+## 0.1.3
 
-- N/A (initial release)
-- 
----
+### Patch Changes
 
-## [0.1.0] - 2024-03-13
+- Final updated release with bugfixes
+- Updated dependencies
+  - @sio-group/form-validation@0.1.3
+  - @sio-group/form-types@0.1.3
 
-### Added
+## 0.1.2
 
-- Initial beta release
-- Complete form rendering system
-- All core field components
-- useForm hook with full state management
-- Responsive layout grid
-- Button system with variants and colors
-- File upload handling
-- Comprehensive test coverage
-- Documentation with examples
-- TypeScript definitions
+### Patch Changes
 
----
+- Final minor release with bugfixes
+- Updated dependencies
+  - @sio-group/form-validation@0.1.2
+  - @sio-group/form-types@0.1.2
 
-## Versioning Guidelines
+## 0.1.1
 
-This project follows [SemVer](https://semver.org/):
-- **MAJOR** version for incompatible API changes
-- **MINOR** version for new functionality in a backward compatible manner
-- **PATCH** version for backward compatible bug fixes
+### Patch Changes
 
-## Release History
+- 69e584e: minor changes in readme
+- Updated dependencies [69e584e]
+  - @sio-group/form-validation@0.1.1
+  - @sio-group/form-types@0.1.1
 
-| Version | Date       | Highlights           |
-|---------|------------|----------------------|
-| 0.1.0   | 2024-03-13 | Initial beta release |
-| 1.0.0   | TBD        | Stable release       |
-
----
-
-## Upgrade Guides
-
-### From 0.x to 1.x
-*Coming soon*
-
----
-
-## Migration Notes
-
-### Beta Users
-If you're using the beta version (0.x), please note that the API is considered stable, but minor changes may occur before the 1.0.0 release. Check the release notes for any breaking changes.
-
-### Breaking Changes in Future Versions
-- **1.0.0** - First stable release (no breaking changes planned)
-
----
-
-## Dependencies
+All notable changes to this project will be documented in this file.
 
-### Internal Dependencies
-- `@sio-group/form-types` - Shared type definitions
-- `@sio-group/form-builder` - Form structure builder (optional)
-- `@sio-group/form-validation` - Validation rules (optional)
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

package/README.md

@@ -22,8 +22,8 @@ npm install @sio-group/form-react
 ```
 
 **Peer Dependencies:**
-- `react`: ^18.0.0
-- `react-dom`: ^18.0.0
+- `react`: ^19.0.0
+- `react-dom`: ^19.0.0
 
 ---
 

package/dist/index.cjs

@@ -75,11 +75,264 @@ var slugify = (string, separator = "_") => {
   return string.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/[^a-z0-9 ]/g, "").replace(/\s+/g, separator);
 };
 
-// src/utils/create-field-state.ts
-var import_form_validation = require("@sio-group/form-validation");
+// ../form-validation/dist/index.js
+var isRequired = (errorMessage) => (val, label = "Dit") => {
+  const message = errorMessage?.replace("{label}", label) || `${label} is een verplicht veld.`;
+  if (val === null || val === void 0) {
+    return message;
+  }
+  if (typeof val === "string" && val.trim().length === 0) {
+    return message;
+  }
+  if (typeof val === "boolean" && !val) {
+    return message;
+  }
+  if (Array.isArray(val) && val.length === 0) {
+    return message;
+  }
+  return null;
+};
+var isEmail = (errorMessage) => (val, label = "Dit") => {
+  if (val === null || val === void 0) {
+    return null;
+  }
+  if (typeof val !== "string") {
+    return errorMessage || `${label} is geen geldig e-mailadres.`;
+  }
+  const trimmed = val.trim();
+  if (trimmed.length === 0) {
+    return null;
+  }
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+  return emailRegex.test(trimmed) ? null : errorMessage || `${label} is geen geldig e-mailadres.`;
+};
+var isUrl = (allowLocalhost = false, allowFtp = false, secureOnly = true) => (val, label = "Dit") => {
+  if (val === null || val === void 0) {
+    return null;
+  }
+  if (typeof val !== "string") {
+    return `${label} is geen geldige URL.`;
+  }
+  const trimmed = val.trim();
+  if (trimmed.length === 0) {
+    return null;
+  }
+  try {
+    const url = new URL(trimmed);
+    if (secureOnly && url.protocol !== "https:") {
+      return `${label} moet https gebruiken.`;
+    }
+    if (!allowFtp && url.protocol === "ftp") {
+      return `${label} mag geen ftp gebruiken.`;
+    }
+    if (!allowLocalhost && (url.hostname === "localhost" || url.hostname === "127.0.0.1")) {
+      return `${label} mag geen localhost zijn.`;
+    }
+    return null;
+  } catch {
+    return `${label} is geen geldige URL.`;
+  }
+};
+var isBiggerThan = (min, errorMessage) => (val, label = "Dit") => {
+  if (val === null || val === void 0 || val === "") {
+    return null;
+  }
+  const num = Number(val);
+  if (Number.isNaN(num)) {
+    return `${label} moet een geldig getal zijn.`;
+  }
+  return min <= num ? null : errorMessage?.replace("{label}", label)?.replace("{min}", min.toString()) || `${label} mag niet kleiner zijn dan ${min}.`;
+};
+var isSmallerThan = (max, errorMessage) => (val, label = "Dit") => {
+  if (val === null || val === void 0 || val === "") {
+    return null;
+  }
+  const num = Number(val);
+  if (Number.isNaN(num)) {
+    return `${label} moet een geldig getal zijn.`;
+  }
+  return num <= max ? null : errorMessage?.replace("{label}", label)?.replace("{max}", max.toString()) || `${label} mag niet groter zijn dan ${max}.`;
+};
+var parseDateValue = (val) => {
+  if (val instanceof Date) {
+    return {
+      type: hasExplicitTime(val) ? "datetime" : "date",
+      value: isNaN(val.getTime()) ? null : val
+    };
+  }
+  if (typeof val !== "string") {
+    return { type: "invalid", value: null };
+  }
+  const trimmed = val.trim();
+  if (trimmed === "") {
+    return { type: "invalid", value: null };
+  }
+  const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/;
+  if (timeRegex.test(trimmed)) {
+    const [hours, minutes, seconds = 0] = trimmed.split(":").map(Number);
+    const date = /* @__PURE__ */ new Date();
+    date.setHours(hours, minutes, seconds, 0);
+    return { type: "time", value: date };
+  }
+  const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+  if (dateRegex.test(trimmed)) {
+    const date = /* @__PURE__ */ new Date(trimmed + "T00:00:00.000Z");
+    return {
+      type: "date",
+      value: isNaN(date.getTime()) ? null : date
+    };
+  }
+  const dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
+  if (dateTimeRegex.test(trimmed)) {
+    const date = /* @__PURE__ */ new Date(trimmed + ".000Z");
+    return {
+      type: "datetime",
+      value: isNaN(date.getTime()) ? null : date
+    };
+  }
+  return { type: "invalid", value: null };
+};
+function hasExplicitTime(date) {
+  return date.getUTCHours() !== 0 || date.getUTCMinutes() !== 0 || date.getUTCSeconds() !== 0 || date.getUTCMilliseconds() !== 0;
+}
+var dateIsBiggerThan = (min, errorMessage) => (val, label = "Dit") => {
+  if (val === null || val === void 0 || val === "") {
+    return null;
+  }
+  const parsed = parseDateValue(val);
+  if (!parsed.value) {
+    return `${label} moet een geldige ${parsed.type === "time" ? "tijd" : "datum"} zijn.`;
+  }
+  let formattedMin;
+  switch (parsed.type) {
+    case "time":
+      formattedMin = min.toLocaleTimeString("nl-NL", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZone: "UTC"
+      });
+      break;
+    case "date":
+      formattedMin = min.toLocaleDateString("nl-NL", { timeZone: "UTC" });
+      break;
+    case "datetime":
+      formattedMin = min.toLocaleString("nl-NL", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZone: "UTC"
+      });
+      break;
+    default:
+      formattedMin = min.toLocaleDateString("nl-NL", { timeZone: "UTC" });
+  }
+  if (parsed.type === "time") {
+    const timeValue = parsed.value.getHours() * 60 + parsed.value.getMinutes();
+    const minTime = min.getHours() * 60 + min.getMinutes();
+    return timeValue >= minTime ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMin) || `${label} mag niet voor ${formattedMin} zijn.`;
+  }
+  return min.getTime() <= parsed.value.getTime() ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMin) || `${label} mag niet voor ${formattedMin} zijn.`;
+};
+var dateIsSmallerThan = (max, errorMessage) => (val, label = "Dit") => {
+  if (val === null || val === void 0 || val === "") {
+    return null;
+  }
+  const parsed = parseDateValue(val);
+  if (!parsed.value) {
+    return `${label} moet een geldige ${parsed.type === "time" ? "tijd" : "datum"} zijn.`;
+  }
+  let formattedMax;
+  switch (parsed.type) {
+    case "time":
+      formattedMax = max.toLocaleTimeString("nl-NL", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZone: "UTC"
+      });
+      break;
+    case "date":
+      formattedMax = max.toLocaleDateString("nl-NL", { timeZone: "UTC" });
+      break;
+    case "datetime":
+      formattedMax = max.toLocaleString("nl-NL", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZone: "UTC"
+      });
+      break;
+    default:
+      formattedMax = max.toLocaleDateString("nl-NL", { timeZone: "UTC" });
+  }
+  if (parsed.type === "time") {
+    const timeValue = parsed.value.getHours() * 60 + parsed.value.getMinutes();
+    const macTime = max.getHours() * 60 + max.getMinutes();
+    return macTime >= timeValue ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMax) || `${label} mag niet na ${formattedMax} zijn.`;
+  }
+  return parsed.value.getTime() <= max.getTime() ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMax) || `${label} mag niet na ${formattedMax} zijn.`;
+};
+var isValidFile = (maxSize, accept) => (file) => {
+  if (!file) {
+    return null;
+  }
+  if (maxSize && file.size / 1024 > maxSize) {
+    return `${file.name} is te groot (max ${maxSize} KB).`;
+  }
+  if (accept) {
+    const allowed = accept.split(",").map((s) => s.trim().toLowerCase());
+    const ext = `.${file.name.split(".").pop()?.toLowerCase()}`;
+    const mime = file.type.toLowerCase();
+    const valid = allowed.some((pattern) => {
+      if (pattern === mime) return true;
+      if (pattern.endsWith("/*")) {
+        return mime.startsWith(pattern.replace("/*", "/"));
+      }
+      return pattern === ext;
+    });
+    if (!valid) {
+      return `${file.name} is niet toegelaten.`;
+    }
+  }
+  return null;
+};
+var isPattern = (pattern, errorMsg) => (val, label = "Dit") => {
+  if (val === null || val === void 0 || val === "") {
+    return null;
+  }
+  if (typeof val !== "string") {
+    return errorMsg || `${label} heeft een ongeldig patroon.`;
+  }
+  const trimmed = val.trim();
+  if (trimmed === "") {
+    return null;
+  }
+  let regex;
+  if (typeof pattern === "string") {
+    if (pattern.startsWith("/") && pattern.lastIndexOf("/") > 0) {
+      const lastSlash = pattern.lastIndexOf("/");
+      const patternBody = pattern.substring(1, lastSlash);
+      const flags = pattern.substring(lastSlash + 1);
+      const safeFlags = flags.replace("g", "");
+      regex = new RegExp(patternBody, safeFlags);
+    } else {
+      regex = new RegExp(pattern);
+    }
+  } else {
+    regex = new RegExp(pattern.source, pattern.flags.replace("g", ""));
+  }
+  return regex.test(trimmed) ? null : errorMsg || `${label} heeft een ongeldig patroon.`;
+};
 
 // src/utils/parse-date.ts
-var parseDateValue = (val) => {
+var parseDateValue2 = (val) => {
   if (val instanceof Date) {
     return isNaN(val.getTime()) ? null : val;
   }
@@ -149,31 +402,31 @@ function getDefaultValue(config) {
 function getDefaultValidations(config) {
   const validations = [];
   if (config.config?.required) {
-    validations.push((0, import_form_validation.isRequired)());
+    validations.push(isRequired());
   }
   switch (config.type) {
     case "email":
-      validations.push((0, import_form_validation.isEmail)());
+      validations.push(isEmail());
       break;
     case "number":
     case "range":
-      if (config.config?.min) validations.push((0, import_form_validation.isBiggerThan)(config.config?.min));
-      if (config.config?.max) validations.push((0, import_form_validation.isSmallerThan)(config.config?.max));
+      if (config.config?.min) validations.push(isBiggerThan(config.config?.min));
+      if (config.config?.max) validations.push(isSmallerThan(config.config?.max));
       break;
     case "date":
     case "datetime-local":
     case "time":
       const min = config.config?.min;
       const max = config.config?.max;
-      const parsedMin = parseDateValue(min);
-      const parsedMax = parseDateValue(max);
-      if (parsedMin) validations.push((0, import_form_validation.dateIsBiggerThan)(parsedMin));
-      if (parsedMax) validations.push((0, import_form_validation.dateIsSmallerThan)(parsedMax));
+      const parsedMin = parseDateValue2(min);
+      const parsedMax = parseDateValue2(max);
+      if (parsedMin) validations.push(dateIsBiggerThan(parsedMin));
+      if (parsedMax) validations.push(dateIsSmallerThan(parsedMax));
       break;
     case "url":
-      if (config.config?.pattern) validations.push((0, import_form_validation.isPattern)(config.config.pattern));
+      if (config.config?.pattern) validations.push(isPattern(config.config.pattern));
       validations.push(
-        (0, import_form_validation.isUrl)(
+        isUrl(
           config.config?.allowLocalhost || false,
           config.config?.allowFtp || false,
           config.config?.secureOnly || !(config.config?.allowLocalhost || config.config?.allowFtp)
@@ -182,7 +435,7 @@ function getDefaultValidations(config) {
       break;
     case "text":
     case "tel":
-      if (config.config?.pattern) validations.push((0, import_form_validation.isPattern)(config.config.pattern));
+      if (config.config?.pattern) validations.push(isPattern(config.config.pattern));
       break;
   }
   return validations;
@@ -1115,9 +1368,6 @@ var DateInput = ({
   );
 };
 
-// src/components/Fields/Input/FileInput/index.tsx
-var import_form_validation2 = require("@sio/form-validation");
-
 // src/utils/get-accept-string.ts
 var getAccept = (accept) => {
   if (Array.isArray(accept)) {
@@ -1248,7 +1498,7 @@ var FileInput = ({
   };
   const handleChange = (e) => {
     const files = Array.from(e.target.files ?? []);
-    const validator = (0, import_form_validation2.isValidFile)(filesize, getAccept(accept));
+    const validator = isValidFile(filesize, getAccept(accept));
     let fileList = [...currentFiles];
     const errorList = [];
     for (let file of files) {

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties, ComponentType, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
-import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio-group/form-types';
+import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio/form-types';
 import { Properties } from 'csstype';
-import { ValidationRule } from '@sio-group/form-types/src/core/valudation-rule';
+import { ValidationRule } from '@sio/form-types/src/core/valudation-rule';
 
 interface FormLayout {
   fields: string[];

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties, ComponentType, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
-import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio-group/form-types';
+import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio/form-types';
 import { Properties } from 'csstype';
-import { ValidationRule } from '@sio-group/form-types/src/core/valudation-rule';
+import { ValidationRule } from '@sio/form-types/src/core/valudation-rule';
 
 interface FormLayout {
   fields: string[];