@sio-group/form-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -26,20 +26,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
-import {
-  dateIsBiggerThan,
-  dateIsSmallerThan,
-  isBiggerThan,
-  isEmail,
-  isPattern,
-  isRequired,
-  isSmallerThan,
-  isUrl
-} from "@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;
   }
@@ -125,8 +369,8 @@ function getDefaultValidations(config) {
     case "time":
       const min = config.config?.min;
       const max = config.config?.max;
-      const parsedMin = parseDateValue(min);
-      const parsedMax = parseDateValue(max);
+      const parsedMin = parseDateValue2(min);
+      const parsedMax = parseDateValue2(max);
       if (parsedMin) validations.push(dateIsBiggerThan(parsedMin));
       if (parsedMax) validations.push(dateIsSmallerThan(parsedMax));
       break;
@@ -1075,9 +1319,6 @@ var DateInput = ({
   );
 };
 
-// src/components/Fields/Input/FileInput/index.tsx
-import { isValidFile } from "@sio-group/form-validation";
-
 // src/utils/get-accept-string.ts
 var getAccept = (accept) => {
   if (Array.isArray(accept)) {

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@sio-group/form-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
+  "private": false,
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -26,12 +27,12 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@sio/form-types": "0.1.0",
-    "@sio/form-validation": "0.1.0"
+    "@sio-group/form-types": "0.1.3",
+    "@sio-group/form-validation": "0.1.3"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4",

package/src/assets/scss/components/button.scss

@@ -0,0 +1,164 @@
+@use "../utilities/mixins" as *;
+@use "../tokens/colors" as *;
+
+:where(.btn--primary) {
+  --sio-btn-bg: var(--sio-btn-primary-bg);
+  --sio-btn-border: var(--sio-btn-primary-border);
+  --sio-btn-text: var(--sio-btn-primary-text);
+
+  --sio-btn-bg-hover: color-mix(in srgb, var(--sio-btn-bg) 85%, black);
+  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
+  --sio-btn-text-hover: var(--sio-btn-text);
+
+  --sio-btn-bg-disabled: color-mix(in srgb, var(--sio-btn-bg) 40%, white);
+  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 60%, black);
+}
+
+:where(.btn--secondary) {
+  --sio-btn-bg: var(--sio-btn-secondary-bg);
+  --sio-btn-border: var(--sio-btn-secondary-border);
+  --sio-btn-text: var(--sio-btn-secondary-text);
+
+  --sio-btn-bg-hover: var(--sio-btn-bg);
+  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
+  --sio-btn-text-hover: var(--sio-btn-text);
+
+  --sio-btn-bg-disabled: var(--sio-btn-bg);
+  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
+}
+
+:where(.btn--link) {
+  --sio-btn-bg: var(--sio-btn-link-bg);
+  --sio-btn-border: var(--sio-btn-link-border);
+  --sio-btn-text: var(--sio-btn-link-text);
+
+  --sio-btn-bg-hover: var(--sio-btn-bg);
+  --sio-btn-border-hover: var(--sio-btn-border);
+  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
+
+  --sio-btn-bg-disabled: var(--sio-btn-bg);
+  --sio-btn-border-disabled: var(--sio-btn-border);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
+}
+
+:where(.btn) {
+  background-color: var(--sio-btn-bg);
+  color: var(--sio-btn-text);
+  display: inline-block;
+  font-size: .9em;
+  font-weight: 500;
+  user-select: none;
+  text-align: center;
+  border: 1px solid var(--sio-btn-border);
+  padding: 2px 15px;
+  border-radius: 3px;
+  cursor: pointer;
+  min-height: 22px;
+  transition: all .3s ease-in;
+  text-decoration: none;
+}
+
+:where(.btn--link) {
+  display: inline;
+  font-weight: unset;
+  user-select: none;
+  text-align: left;
+  padding: 0;
+  border-radius: unset;
+  min-height: unset;
+  transition: all 0.3s ease-in;
+  text-decoration: underline;
+}
+
+:where(.btn:hover),
+:where(.btn:active),
+:where(.btn:focus),
+:where(.btn.btn--active) {
+  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
+  color: var(--sio-btn-text-hover, var(--sio-btn-text));
+}
+
+:where(.btn:disabled),
+:where(.btn.btn--disabled) {
+  cursor: not-allowed;
+
+  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
+  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
+}
+
+@each $name, $color in $colors {
+  :where(.btn--primary.btn--#{$name}) {
+    --sio-btn-bg: var(--sio-color-#{$name});
+    --sio-btn-border: var(--sio-color-#{$name});
+    --sio-btn-text: var(--sio-color-white);
+  }
+  :where(.btn--secondary.btn--#{$name}) {
+    --sio-btn-bg: transparent;
+    --sio-btn-border: var(--sio-color-#{$name});
+    --sio-btn-text: var(--sio-color-#{$name});
+  }
+  :where(.btn--link.btn--#{$name}) {
+    --sio-btn-bg: transparent;
+    --sio-btn-border: transparent;
+    --sio-btn-text: var(--sio-color-#{$name});
+  }
+}
+
+:where(.btn--block) {
+  display: block;
+  width: 100%;
+}
+
+:where(.btn--lg) {
+  padding: 5px 20px;
+  font-size: 1.1em;
+  min-height: 34px;
+}
+
+:where(.btn--sm) {
+  padding: 2.5px 5px;
+  font-size: .7em;
+  min-height: 23px;
+}
+
+:where(.btn--loading) {
+  position: relative;
+  cursor: wait !important;
+}
+
+:where(.btn__spinner) {
+  display: flex;
+  animation: spin 1s infinite linear;
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+}
+
+:where(.btn__spinner svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+:where(.btn__spinner circle) {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-dasharray: 30 100;
+  stroke-linecap: round;
+}
+
+:where(.btn__loading-text) {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+:where(.btn-group) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}

package/src/assets/scss/components/checkbox.scss

@@ -0,0 +1,90 @@
+:where(.form-field__checkbox label) {
+  position: relative;
+  padding-left: 32px;
+}
+
+:where(.form-field__checkbox label > div) {
+  display: inline;
+  color: var(--sio-color-black);
+  font-weight: normal;
+}
+
+:where(.form-field__checkbox label):before {
+  content: '';
+  background-color: var(--sio-form-bg);
+  position: absolute;
+  border-radius: var(--sio-form-border-radius);
+  cursor: pointer;
+  border: 1px solid var(--sio-form-border);
+  width: 17px;
+  height: 17px;
+  left: 0;
+  top: -1px;
+}
+
+:where(.form-field__checkbox label):after {
+  content: '';
+  position: absolute;
+  background-color: var(--sio-color-primary);
+  width: 13px;
+  height: 13px;
+  top: 2px;
+  left: 3px;
+  transform: scale(0);
+  border-radius: var(--sio-form-border-radius);
+  cursor: pointer;
+  transition: all .4s;
+}
+
+:where(.form-field__checkbox input[type='checkbox']) {
+  display: none !important;
+}
+
+:where(.form-field__checkbox.form-field--has-value label):before {
+  border-color: var(--sio-color-primary);
+}
+
+:where(.form-field__checkbox.form-field--has-value label):after {
+  transform: scale(1);
+}
+
+:where(.form-field__checkbox.form-field--has-errors label):before {
+  border-color: var(--sio-color-error);
+  background: rgba(var(--sio-color-error-rgb), .06);
+}
+
+:where(.form-field__checkbox.form-field--has-errors.form-field--has-value label):after {
+  border-color: var(--sio-color-error);
+  background: var(--sio-color-error);
+}
+
+
+:where(.form-field__checkbox.form-field--disabled label) {
+  cursor: not-allowed;
+}
+
+:where(.form-field__checkbox.form-field--disabled label):before,
+:where(.form-field__checkbox.form-field--disabled label):after {
+  cursor: not-allowed;
+}
+
+:where(.form-field__checkbox.form-field--disabled label):before {
+  border-color: var(--sio-color-light-gray);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, white);
+}
+
+:where(.form-field__checkbox.form-field--disabled label):after {
+  border-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+
+  transform: scale(0);
+  transition: all .4s;
+}
+
+:where(.form-field__checkbox.form-field--disabled.form-field--has-value label):before {
+  border-color: var(--sio-color-light-gray);
+}
+
+:where(.form-field__checkbox.form-field--disabled.form-field--has-value label):after {
+  transform: scale(1);
+}

package/src/assets/scss/components/color.scss

@@ -0,0 +1,29 @@
+:where(.form-field__color .form-field__control) {
+  max-width: 50px;
+}
+
+:where(.form-field__color input) {
+  padding: 0;
+  border-radius: var(--sio-form-border-radius);
+}
+
+:where(.form-field__color input[type="color" i]) {
+  inline-size: 50px;
+  block-size: 25.5px;
+  padding: 0;
+  border: none;
+}
+
+:where(.form-field__color input[type="color"])::-webkit-color-swatch-wrapper {
+  padding-block-end: 3px;
+  padding-block-start: 3px;
+  padding-inline-start: 3px;
+  padding-inline-end: 3px;
+  padding: 3px;
+  border: none;
+}
+
+:where(.form-field__color input[type="color"])::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}

package/src/assets/scss/components/form-field.scss

@@ -0,0 +1,34 @@
+:where(.form-field) {
+  position: relative;
+  margin: 5px 0 15px 0;
+}
+
+:where(.form-field label) {
+  color: var(--sio-form-label);
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
+:where(.form-field label span) {
+  color: var(--sio-color-error);
+  font-weight: bold;
+}
+
+:where(.form-field__description) {
+  color: var(--sio-color-gray);
+  font-weight: 200;
+  font-size: 0.9em;
+  margin-left: 10px;
+  white-space: pre-wrap;
+}
+
+:where(.form-field__errors) {
+  list-style: none;
+  padding: 0;
+  margin: 5px 0 0;
+  color: var(--sio-color-error);
+}
+
+:where(.form-field__errors-item) {
+  font-size: .9em
+}