@sio-group/form-react 0.1.0 → 0.1.3

package/src/utils/create-field-props.ts

@@ -0,0 +1,115 @@
+import { BaseFieldProps, FieldProps, FieldState, FieldSetters } from "../types";
+import { getColumnClasses } from "./get-column-classes";
+
+export const createFieldProps = (field: FieldState, setters: FieldSetters, disabled: boolean, renderLayout: boolean = false): FieldProps => {
+  const classes: string = getColumnClasses(field.layout, field.styling?.className);
+
+  const baseProps: BaseFieldProps = {
+    id: field.id,
+    name: field.name,
+    label: field.label,
+    placeholder: field.placeholder,
+    value: field.value,
+    errors: field.errors,
+    required: field.required,
+    autocomplete: field.autocomplete,
+    touched: field.touched,
+    focused: field.focused,
+    readOnly: field.readOnly,
+    disabled,
+    icon: field.icon,
+    description: field.description,
+    onChange: setters.handleChange,
+    setFocused: setters.setFocused,
+    setTouched: setters.setTouched,
+    className: renderLayout ? classes : field.styling?.className,
+    style: field.styling?.style,
+  };
+
+  if (field.type === 'textarea') {
+    return {
+      ...baseProps,
+      type: field.type,
+      rows: field.rows,
+      cols: field.cols,
+    }
+  }
+
+  if (field.type === "file") {
+    return {
+      ...baseProps,
+      type: field.type,
+      accept: field.accept,
+      multiple: field.multiple ?? false,
+      capture: field.capture ?? false,
+      onError: setters.setErrors,
+      filesize: field.filesize ?? 10240,
+      onFileRemove: field.onFileRemove,
+      onRemoveAll: field.onRemoveAll,
+    };
+  }
+
+  if (field.type === "range" || field.type === "number") {
+     const numberProps = {
+      ...baseProps,
+      type: field.type,
+      min: field.min ?? Number.MIN_SAFE_INTEGER,
+      max: field.max ?? Number.MAX_SAFE_INTEGER,
+      step: field.step ?? 1,
+    };
+
+    if (field.type === "number") {
+      return {
+        ...numberProps,
+        spinner: field.spinner ?? true,
+      };
+    }
+
+    if (field.type === "range") {
+      return {
+        ...numberProps,
+        showValue: field.showValue ?? true,
+      };
+    }
+  }
+
+  if(field.type === "date" || field.type === "time" || field.type === 'datetime-local') {
+    return {
+      ...baseProps,
+      type: field.type,
+      min: field.min ?? '',
+      max: field.max ?? '',
+      step: field.step ?? 1,
+    };
+  }
+
+  if (field.type === "url") {
+    return {
+      ...baseProps,
+      type: field.type,
+      allowLocalhost: field.allowLocalhost ?? false,
+      allowFtp: field.allowFtp ?? false,
+      secureOnly: field.secureOnly ?? !(field.allowLocalhost || field.allowFtp),
+    };
+  }
+
+  if (field.type === "select" || field.type === "creatable") {
+    return {
+      ...baseProps,
+      type: field.type,
+      options: field.options || [],
+      multiple: field.multiple,
+    };
+  }
+
+  if (field.type === "radio") {
+    return {
+      ...baseProps,
+      type: field.type,
+      options: field.options || [],
+      inline: field.inline ?? false,
+    };
+  }
+
+  return { ...baseProps, type: field.type, };
+}

package/src/utils/create-field-state.ts

@@ -0,0 +1,99 @@
+import { FieldConfigMap, FormField } from "@sio-group/form-types";
+import { FieldState, FieldValue } from "../types";
+import { ValidationRule } from "@sio-group/form-types/src/core/valudation-rule";
+import {
+  dateIsBiggerThan,
+  dateIsSmallerThan,
+  isBiggerThan,
+  isEmail, isPattern,
+  isRequired,
+  isSmallerThan,
+  isUrl
+} from "@sio-group/form-validation";
+import { parseDateValue } from "./parse-date";
+
+export const createFieldState = (name: string, id: string, config: FormField): FieldState => {
+  return {
+    ...config.config,
+    id,
+    name,
+    type: config.type,
+    value: config.config?.defaultValue ?? getDefaultValue(config),
+    validations: [
+      ...(config.config?.validations ?? []),
+      ...getDefaultValidations(config),
+    ],
+    errors: [],
+    touched: false,
+    focused: false,
+  } as FieldState
+}
+
+function getDefaultValue<T extends keyof FieldConfigMap> (config: FormField): FieldValue<T> {
+  switch (config.type) {
+    case "checkbox":
+      return false;
+    case "range":
+      return config.config.min ?? 0;
+    case "select":
+    case "creatable":
+      return null;
+    case "file":
+      return [];
+    case "color":
+      return "#000000";
+    case "number":
+    case "text":
+    default:
+      return "";
+  }
+}
+
+function getDefaultValidations<T extends keyof FieldConfigMap>(config: FormField): ValidationRule<T>[] {
+  const validations: ValidationRule<T>[] = [];
+
+  if (config.config?.required) {
+    validations.push(isRequired());
+  }
+
+  switch (config.type) {
+    case 'email':
+      validations.push(isEmail());
+      break;
+
+    case 'number':
+    case 'range':
+      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: string | undefined = config.config?.min;
+      const max: string | undefined = config.config?.max;
+      const parsedMin: Date | null = parseDateValue(min);
+      const parsedMax: Date | null = parseDateValue(max);
+      if (parsedMin) validations.push(dateIsBiggerThan(parsedMin));
+      if (parsedMax) validations.push(dateIsSmallerThan(parsedMax));
+      break;
+
+    case 'url':
+      if (config.config?.pattern) validations.push(isPattern(config.config.pattern));
+      validations.push(
+        isUrl(
+          config.config?.allowLocalhost || false,
+          config.config?.allowFtp || false,
+          config.config?.secureOnly || !(config.config?.allowLocalhost || config.config?.allowFtp),
+        ),
+      );
+      break;
+
+    case 'text':
+    case 'tel':
+      if (config.config?.pattern) validations.push(isPattern(config.config.pattern));
+      break;
+  }
+
+  return validations;
+}

package/src/utils/custom-icons.tsx

@@ -0,0 +1,145 @@
+export const CustomIcons =  {
+  Date: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" fill="none"/>
+      <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor"/>
+      <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor"/>
+      <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor"/>
+    </svg>
+  ),
+  Time: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+      <circle cx="12" cy="12" r="1" fill="currentColor" fillOpacity="0.3" stroke="none" />
+    </svg>
+  ),
+  DateTime: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <rect x="2" y="3" width="14" height="14" rx="2" ry="2" />
+      <line x1="5" y1="2" x2="5" y2="5" />
+      <line x1="13" y1="2" x2="13" y2="5" />
+      <line x1="2" y1="7" x2="16" y2="7" />
+
+      <circle cx="19" cy="15" r="4" />
+      <polyline points="19 13 19 15 21 16" />
+    </svg>
+  ),
+  FileUpload: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+      <polyline points="13 2 13 9 20 9" />
+      <path d="M12 12v6m0-6 2 2m-2-2-2 2" />
+    </svg>
+  ),
+  CloudUpload: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M12 16v-6m0 0-2 2m2-2 2 2" />
+      <path d="M16 16h3a4 4 0 0 0 0-8h-1.5A5.5 5.5 0 0 0 7 9a5 5 0 0 0-1 9.8" />
+    </svg>
+  ),
+  TrashIcon: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M3 6h18" />
+      <rect x="6" y="6" width="12" height="14" rx="1" ry="1" />
+
+      <path d="M9 3h6" />
+      <path d="M10 3v3M14 3v3" />
+
+      <line x1="10" y1="10" x2="10" y2="16" />
+      <line x1="14" y1="10" x2="14" y2="16" />
+    </svg>
+  ),
+  SimpleTrashIcon: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M3 6h18" />
+      <rect x="6" y="8" width="12" height="12" rx="1" ry="1" />
+      <path d="M9 4h6" />
+    </svg>
+  ),
+  DeleteTrashIcon: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M3 6h18" />
+      <rect x="6" y="6" width="12" height="14" rx="1" ry="1" />
+      <path d="M9 3h6" />
+      <path d="M10 3v3M14 3v3" />
+      <line x1="9" y1="10" x2="15" y2="16" />
+      <line x1="15" y1="10" x2="9" y2="16" />
+    </svg>
+  ),
+  FileIcon: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+      <polyline points="13 2 13 9 20 9" />
+    </svg>
+  ),
+  Word: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
+      <polyline points="13 2 13 9 20 9"/>
+      <line x1="8" y1="13" x2="16" y2="13"/>
+      <line x1="8" y1="16" x2="16" y2="16"/>
+      <line x1="8" y1="19" x2="13" y2="19"/>
+    </svg>
+  ),
+  Excel: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
+      <polyline points="13 2 13 9 20 9"/>
+      <rect x="7" y="12" width="10" height="7" rx="1"/>
+      <line x1="7" y1="15.5" x2="17" y2="15.5"/>
+      <line x1="11.5" y1="12" x2="11.5" y2="19"/>
+    </svg>
+  ),
+  PowerPoint: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
+      <polyline points="13 2 13 9 20 9"/>
+      <rect x="7" y="12" width="10" height="7" rx="1"/>
+      <path d="M9 17l2-3 2 2 2-3"/>
+    </svg>
+  ),
+  Pdf: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
+      <polyline points="13 2 13 9 20 9"/>
+      <rect x="7" y="14" width="10" height="4" rx="1"/>
+    </svg>
+  ),
+  Image: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
+      <polyline points="13 2 13 9 20 9"/>
+      <circle cx="9" cy="13" r="1.5"/>
+      <path d="M7 18l3-3 2 2 3-3 2 4"/>
+    </svg>
+  ),
+  Audio: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
+      <polyline points="13 2 13 9 20 9"/>
+      <path d="M8 16v-2"/>
+      <path d="M10 17v-4"/>
+      <path d="M12 18v-6"/>
+      <path d="M14 17v-4"/>
+      <path d="M16 16v-2"/>
+    </svg>
+  ),
+  Video: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
+      <polyline points="13 2 13 9 20 9"/>
+      <rect x="7" y="12" width="8" height="6" rx="1"/>
+      <polygon points="11 14 14 15 11 16"/>
+    </svg>
+  ),
+  Globe: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
+         stroke="currentColor" strokeWidth="1.5"
+         strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M2 12h20" />
+      <path d="M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20z" />
+    </svg>
+  ),
+};

package/src/utils/file-type-icon.ts

@@ -0,0 +1,63 @@
+import { CustomIcons } from "./custom-icons";
+
+export const FileTypeIcon = (mime: string) => {
+  let icon;
+
+  switch (mime) {
+    case 'text/plain':
+      icon = CustomIcons.FileIcon();
+      break;
+    case 'text/uri-list':
+      return CustomIcons.Globe();
+    case 'application/xls':
+    case 'application/vnd.ms-excel':
+    case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+    case 'application/vnd.ms-excel.sheet.macroEnabled.12':
+    case 'application/vnd.ms-excel.sheet.binary.macroEnabled.12':
+      icon = CustomIcons.Excel();
+      break;
+    case 'application/msword':
+    case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+    case 'application/vnd.ms-word':
+    case 'application/vnd.ms-word.document.macroEnabled.12':
+      icon = CustomIcons.Word();
+      break;
+    case 'application/vnd.ms-powerpoint':
+    case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+    case 'application/vnd.ms-powerpoint.presentation.macroEnabled.12':
+    case 'application/vnd.openxmlformats-officedocument.presentationml.slideshow':
+      icon = CustomIcons.PowerPoint();
+      break;
+    case 'application/pdf':
+      icon = CustomIcons.Pdf();
+      break;
+    case 'audio/mpeg':
+    case 'audio/wav':
+    case 'audio/x-wav':
+    case 'audio/ogg':
+    case 'audio/mp4':
+      icon = CustomIcons.Audio();
+      break;
+    case 'image/jpeg':
+    case 'image/png':
+    case 'image/bmp':
+    case 'image/gif':
+    case 'image/webp':
+    case 'image/svg+xml':
+    case 'image/heic':
+    case 'image/heif':
+      icon = CustomIcons.Image();
+      break;
+    case 'video/mp4':
+    case 'video/quicktime':
+    case 'video/webm':
+    case 'video/x-msvideo':
+    case 'video/x-matroska':
+      icon = CustomIcons.Video();
+      break;
+    default:
+      icon = CustomIcons.FileIcon();
+  }
+
+  return icon;
+};

package/src/utils/get-accept-string.ts

@@ -0,0 +1,24 @@
+import { AcceptType } from "@sio-group/form-types";
+
+/**
+ * Get the accept attribute for file inputs based on the provided accept-type.
+ * @param accept - Accept type which can be a string, an array of strings, or shorthand types like 'image', 'video', or 'audio'.
+ */
+export const getAccept = (accept?: AcceptType): string | undefined => {
+  if (Array.isArray(accept)) {
+    return accept
+      .map(item => {
+        if (item === 'image') return 'image/*';
+        if (item === 'video') return 'video/*';
+        if (item === 'audio') return 'audio/*';
+        return item;
+      })
+      .join(', ');
+  }
+
+  if (accept === 'image') return 'image/*';
+  if (accept === 'video') return 'video/*';
+  if (accept === 'audio') return 'audio/*';
+
+  return accept;
+};

package/src/utils/get-column-classes.ts

@@ -0,0 +1,21 @@
+import { LayoutType } from "@sio-group/form-types";
+
+export const getColumnClasses = (layout?: LayoutType, className?: string): string => {
+  if (!layout) return 'sio-col-xs-12';
+
+  const classes: string[] = [];
+
+  if (className) classes.push(className);
+
+  if (layout.sm) classes.push(`sio-col-sm-${layout.sm}`);
+  if (layout.md) classes.push(`sio-col-md-${layout.md}`);
+  if (layout.lg) classes.push(`sio-col-lg-${layout.lg}`);
+
+  if (layout.order) {
+    if (layout.order.sm) classes.push(`sio-order-sm-${layout.order.sm}`);
+    if (layout.order.md) classes.push(`sio-order-md-${layout.order.md}`);
+    if (layout.order.lg) classes.push(`sio-order-lg-${layout.order.lg}`);
+  }
+
+  return classes.join(' ');
+};

package/src/utils/get-file-size.ts

@@ -0,0 +1,9 @@
+export const getFileSize = (size: number) => {
+  const sizes: string[] = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+
+  if (size === 0) return '0 Bytes';
+
+  const i: number = Math.floor(Math.log(size) / Math.log(1024));
+
+  return `${Math.round(size / Math.pow(1024, i))} ${sizes[i]}`;
+};

package/src/utils/parse-date.ts

@@ -0,0 +1,36 @@
+export const parseDateValue = (val: unknown): Date | null => {
+  if (val instanceof Date) {
+    return isNaN(val.getTime()) ? null : val;
+  }
+
+  if (typeof val !== 'string') {
+    return null;
+  }
+
+  if (val.trim() === '') {
+    return null;
+  }
+
+  const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/;
+  if (timeRegex.test(val)) {
+    const [hours, minutes, seconds = 0] = val.split(':').map(Number);
+    const date = new Date();
+    date.setHours(hours, minutes, seconds, 0);
+    return date;
+  }
+
+  const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+  if (dateRegex.test(val)) {
+    const date = new Date(val + 'T00:00:00');
+    return isNaN(date.getTime()) ? null : date;
+  }
+
+  const dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
+  if (dateTimeRegex.test(val)) {
+    const date = new Date(val);
+    return isNaN(date.getTime()) ? null : date;
+  }
+
+  const date = new Date(val);
+  return isNaN(date.getTime()) ? null : date;
+};

package/src/utils/slugify.ts

@@ -0,0 +1,9 @@
+export const slugify = (string: string, separator: string = "_"): string => {
+  return string
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9 ]/g, "")
+    .replace(/\s+/g, separator);
+};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": false,
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"],
+  "references": [
+    { "path": "../form-types" }
+  ]
+}