@stubber/form-fields 1.4.6 → 1.5.1

package/dist/fields2/sub/voicenote-field.svelte

@@ -0,0 +1,161 @@
+<script context="module">import {} from "../interfaces";
+</script>
+
+<script>import { Textarea } from "@stubber/ui/textarea";
+import { Button } from "@stubber/ui/button";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { snakeCase } from "lodash-es";
+import {
+  append_attachment,
+  remove_attachment,
+  uploadFiles
+} from "../fileserver";
+export let fieldStore;
+const file_name_prefix = snakeCase($fieldStore.label || "voicenote");
+let mediaRecorder = null;
+let media = [];
+let fileList = [];
+$: isRecording = mediaRecorder?.state === "recording";
+$: buttonLabel = isRecording ? "Stop Recording" : "Start Recording";
+let max_files_param = $fieldStore.params?.max_files;
+$: max_files = isNaN(parseInt(max_files_param)) ? Infinity : parseInt(max_files_param);
+$: limit_remaining = max_files - fileList.length;
+const toggleRecording = () => {
+  if (mediaRecorder?.state === "recording") {
+    stopRecording();
+  } else {
+    startRecording();
+  }
+};
+async function startRecording() {
+  if (limit_remaining <= 0) {
+    alert("You have reached the maximum number of files allowed");
+    return;
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  mediaRecorder = new MediaRecorder(stream);
+  mediaRecorder.ondataavailable = (e) => media.push(e.data);
+  mediaRecorder.onstop = function() {
+    let id = Math.random().toString(36).substring(7);
+    let filename = `${file_name_prefix}_${id}.ogg`;
+    let blob = new Blob(media, { type: "audio/ogg; codecs=opus" });
+    let file = new File([blob], filename, { type: "audio/ogg; codecs=opus" });
+    uploadFile(file, blob, filename);
+    media = [];
+    mediaRecorder = null;
+  };
+  mediaRecorder.start();
+}
+async function uploadFile(file, blob, filename) {
+  fileList = [
+    ...fileList,
+    {
+      file,
+      blob,
+      filename,
+      is_uploaded: false,
+      is_failed: false
+    }
+  ];
+  const upload_res = await uploadFiles([file], $fieldStore.formDependencies);
+  const { uploaded_files = [], failed_files = [] } = upload_res || {};
+  const newly_uploaded = uploaded_files.find((f) => f.filename === filename) || {};
+  const is_uploaded = uploaded_files.length > 0;
+  const is_failed = failed_files.length > 0;
+  fileList = fileList.map((item) => {
+    if (item.filename === filename) {
+      return {
+        ...item,
+        ...newly_uploaded,
+        is_uploaded,
+        is_failed
+      };
+    }
+    return item;
+  });
+  if (newly_uploaded.fileuuid) {
+    append_attachment(newly_uploaded, $fieldStore.attachmentsStore);
+  }
+}
+const update_file_list = (field_value) => {
+  if (Array.isArray(field_value)) {
+    fileList = field_value.map((f) => ({
+      file: f.file,
+      blob: f.blob,
+      fileuuid: f.fileuuid,
+      contentType: f.contentType,
+      originalname: f.originalname,
+      filename: f.filename,
+      is_uploaded: f.is_uploaded || f.fileuuid ? true : false,
+      is_failed: f.is_failed || false
+    }));
+  }
+};
+update_file_list($fieldStore.value);
+$: update_field_value(fileList);
+const update_field_value = (files) => {
+  const uploaded_files = files.filter((f) => f.is_uploaded && f.fileuuid);
+  $fieldStore.value = uploaded_files.map((f) => ({
+    filename: f.filename,
+    fileuuid: f.fileuuid,
+    contentType: f.contentType,
+    originalname: f.originalname
+  }));
+};
+function stopRecording() {
+  mediaRecorder?.stop();
+}
+function removeFile(item) {
+  fileList = fileList.filter((f) => f !== item);
+  remove_attachment(item.fileuuid, $fieldStore.attachmentsStore);
+}
+</script>
+
+<FieldLabel {fieldStore} />
+<div class="flex flex-col gap-2 items-start">
+  <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
+    {#if isRecording}
+      <i class="fa-solid fa-microphone-slash" />
+    {:else}
+      <i class="fa-solid fa-microphone" />
+    {/if}
+    {buttonLabel}
+  </Button>
+  <div class="flex flex-col gap-1 w-full">
+    {#each fileList as item}
+      <div class="w-full flex flex-row items-center gap-1">
+        <div class="flex items-center justify-center w-6 h-6 shrink-0">
+          {#if item.is_uploaded}
+            <i class="fa fa-check text-success-500" />
+          {:else if item.is_failed}
+            <i class="fa-regular fa-triangle-exclamation text-danger-400" />
+          {:else}
+            <i class="fa fa-pulse fa-spinner text-surface-500" />
+          {/if}
+        </div>
+        {#if item?.blob}
+          <div class="shrink p-2 w-full">
+            <div class="overflow-hidden">
+              <audio class="w-full" controls src={window.URL.createObjectURL(item.blob)} />
+            </div>
+          </div>
+        {:else}
+          <div class="w-full shrink py-1 pl-2 truncate border border-surface-200 rounded-sm">
+            <p class="text-surface-800 text-fluid-md">
+              {item?.filename}
+            </p>
+          </div>
+        {/if}
+        <Button
+          variant="destructive"
+          class="h-6 w-6 p-0 shrink-0"
+          on:click={() => removeFile(item)}
+        >
+          <i class="fa-solid fa-2xs fa-x" />
+        </Button>
+      </div>
+    {/each}
+  </div>
+</div>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/voicenote-field.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField } from "../interfaces";
+interface IVoicenoteFieldParams {
+    max_files?: number | string;
+}
+export interface IVoicenoteField extends IBaseField<IVoicenoteFieldParams> {
+    fieldtype: "voicenote";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IVoicenoteFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VoicenoteFieldProps = typeof __propDef.props;
+export type VoicenoteFieldEvents = typeof __propDef.events;
+export type VoicenoteFieldSlots = typeof __propDef.slots;
+export default class VoicenoteField extends SvelteComponent<VoicenoteFieldProps, VoicenoteFieldEvents, VoicenoteFieldSlots> {
+}
+export {};

package/dist/fields2/utils.d.ts

@@ -0,0 +1,9 @@
+import { type Writable } from "svelte/store";
+import type { UploadedFile } from "./fileserver";
+import type { IBuiltField, IField, IFormDependencies, IValidationResult } from "./interfaces";
+export declare const build_fields: (formStore: Writable<any>, attachmentsStore: Writable<UploadedFile[]>, formDependencies: IFormDependencies | undefined, input_fields: Record<string, IField>, base_path?: string | null) => Writable<IBuiltField>[];
+export declare const build_field: (formStore: Writable<any>, attachmentsStore: Writable<UploadedFile[]>, formDependencies: IFormDependencies | undefined, field_key: string, field: IField, base_path?: string | null) => Writable<IBuiltField>;
+export declare const generate_field_data_path: (key: string, field: IField, base_path?: string | null) => string;
+export declare const get_field_label: (key: string, field: IField) => string;
+export declare const get_field_help_message: (field: IBuiltField) => IValidationResult | undefined;
+export declare const set_value_details: (field: IBuiltField, key: "label" | "details", details: any) => void;

package/dist/fields2/utils.js

@@ -0,0 +1,116 @@
+import { get, isEqual, set, startCase } from "lodash-es";
+import { get as getStoreValue, writable } from "svelte/store";
+export const build_fields = (formStore, attachmentsStore, formDependencies, input_fields, base_path = null) => {
+    return Object.entries(input_fields).map(([key, field]) => {
+        return build_field(formStore, attachmentsStore, formDependencies, key, field, base_path);
+    });
+};
+export const build_field = (formStore, attachmentsStore, formDependencies, field_key, field, base_path = null) => {
+    // console.log("dependencies", formDependencies);
+    let final_path = generate_field_data_path(field_key, field, base_path);
+    const built_field = {
+        id: `${field_key}-${final_path}`,
+        formStore,
+        attachmentsStore,
+        formDependencies,
+        data_path: final_path,
+        fieldtype: field.fieldtype,
+        label: get_field_label(field_key, field),
+        hide_label: field.hide_label ?? false,
+        hidden: false,
+        help: field.help,
+        validations: field.validations,
+        conditions: field.conditions,
+        without_value_details: field.without_value_details ?? false,
+        get value() {
+            const form_data = getStoreValue(formStore);
+            return get(form_data, final_path);
+        },
+        set value(val) {
+            formStore.update((f) => set(f, final_path, val));
+        },
+        get validation_result() {
+            return get_field_help_message(this);
+        },
+        params: field.params,
+    };
+    if (field.fieldtype === "number" || field.fieldtype === "slider") {
+        built_field.min = field.params?.min;
+        built_field.max = field.params?.max;
+        built_field.step = field.params?.step;
+    }
+    else if (field.fieldtype === "section" || field.fieldtype === "multistep") {
+        // we can build out all the fields in the section upfront
+        built_field.sub_fields = build_fields(formStore, attachmentsStore, formDependencies, field?.fields || {}, final_path);
+    }
+    else if (field.fieldtype === "arraybuilder") {
+        // we cant build fields yet, but this is the type of field we will need to build dynamically
+        if (!built_field.params) {
+            built_field.params = {};
+        }
+        built_field.params.new_entry_field =
+            field.params?.new_entry_field;
+    }
+    if (field.initvalue) {
+        const current_value = built_field.value;
+        if (current_value && field.initvalue.has_override) {
+            built_field.value = field.initvalue.override;
+        }
+        else if (!current_value && field.initvalue.has_default) {
+            built_field.value = field.initvalue.default;
+        }
+    }
+    return writable(built_field);
+};
+export const generate_field_data_path = (key, field, base_path = null) => {
+    let final_key = key;
+    if (field.__key) {
+        final_key = field.__key;
+    }
+    if (field.details?.keyname) {
+        final_key = field.details.keyname;
+    }
+    if (field.details?.datapath) {
+        final_key = field.details.datapath + "." + final_key;
+    }
+    if (base_path) {
+        final_key = base_path + "." + final_key;
+    }
+    return final_key;
+};
+export const get_field_label = (key, field) => {
+    return field.title || startCase(field.__key || key) || "Untitled Field";
+};
+export const get_field_help_message = (field) => {
+    const field_messages = field.errors;
+    if (!field_messages) {
+        if (field.help) {
+            return {
+                type: "info",
+                message: field.help,
+            };
+        }
+    }
+    if (Array.isArray(field_messages)) {
+        // return the first error message, else the first success message
+        const error = field_messages.find((m) => m.type === "error");
+        if (error) {
+            return error;
+        }
+    }
+};
+export const set_value_details = (field, key, details) => {
+    if (field.without_value_details) {
+        return;
+    }
+    const value = field.value;
+    const formStore = field.formStore;
+    const value_details_path = field.data_path + `_${key}`;
+    const current_value_details = getStoreValue(formStore)[value_details_path];
+    if (!isEqual(current_value_details, details)) {
+        formStore.update((f) => {
+            set(f, value_details_path, details);
+            return f;
+        });
+    }
+};

package/dist/fields2/validations/validate_field.d.ts

@@ -0,0 +1,11 @@
+import type { IJsonataValidation, IRequiredValidation, IRexegValidation, IValidationResult, IBuiltField } from "../interfaces";
+import type { Writable } from "svelte/store";
+export declare const validate_field: (formStore: Writable<any>, fieldStore: Writable<IBuiltField>) => Promise<void>;
+export declare const required_validation: (results: IValidationResult[], value: any, validation: IRequiredValidation) => void;
+export declare const regex_validation: (results: IValidationResult[], value: any, validation: IRexegValidation) => void;
+export declare const jsonata_validation: (results: IValidationResult[], _value: any, validation: IJsonataValidation, context?: any) => Promise<void>;
+export interface JsonataContext {
+    field: any;
+    form: any;
+}
+export declare const evaluate_field_conditions: (conditions: string[], context: JsonataContext) => Promise<boolean>;

package/dist/fields2/validations/validate_field.js

@@ -0,0 +1,121 @@
+import jsonata from "jsonata";
+import { get, set, unset } from "lodash-es";
+import { get as getStoreValue } from "svelte/store";
+export const validate_field = async (formStore, fieldStore) => {
+    const results = [];
+    const form = getStoreValue(formStore);
+    const field = getStoreValue(fieldStore);
+    const jsonata_context = {
+        field: {
+            data: field.value,
+        },
+        form: {
+            data: form,
+        },
+    };
+    if (field.conditions && field.conditions.length > 0) {
+        const conditions_passed = await evaluate_field_conditions(field.conditions, jsonata_context);
+        if (!conditions_passed) {
+            fieldStore.update((f) => {
+                f.hidden = true;
+                return f;
+            });
+            return; // Skip validation if conditions are not met
+        }
+        else {
+            fieldStore.update((f) => {
+                f.hidden = false;
+                return f;
+            });
+        }
+    }
+    // validate sub_fields if they exist (arraybuilder and section fields)
+    if (field.sub_fields && field.sub_fields.length > 0) {
+        // console.log("sub_fields", field.sub_fields);
+        for (const sub_field of field.sub_fields || []) {
+            // console.log(`Validating sub_field: ${sub_field.__key}`);
+            await validate_field(formStore, sub_field);
+        }
+    }
+    const validations = field.validations || [];
+    const value = field.value;
+    // console.log(`Validating field: ${field.__key}`, value, validations);
+    for (const validation of validations) {
+        if (validation.validationtype === "required") {
+            required_validation(results, value, validation);
+        }
+        else if (validation.validationtype === "regex") {
+            regex_validation(results, value, validation);
+        }
+        else if (validation.validationtype === "jsonata") {
+            await jsonata_validation(results, value, validation, jsonata_context);
+        }
+    }
+    if (results.length === 0) {
+        fieldStore.update((f) => {
+            unset(f, "errors");
+            return f;
+        });
+        return;
+    }
+    // console.log(`setting errors for field: ${field.data_path}`, results);
+    // fieldStore.errors = results;
+    fieldStore.update((f) => {
+        f.errors = results;
+        return f;
+    });
+};
+export const required_validation = (results, value, validation) => {
+    if (!value || value.length === 0 || (typeof value === "string" && value.trim() === "")) {
+        results.push({
+            message: validation.invalid_message || "This field is required.",
+            type: "error",
+        });
+    }
+};
+export const regex_validation = (results, value, validation) => {
+    const regex = new RegExp(validation.params.regex);
+    if (!regex.test(value ?? "")) {
+        results.push({
+            message: validation.invalid_message || "This field is invalid.",
+            type: "error",
+        });
+    }
+};
+export const jsonata_validation = async (results, _value, validation, context = {}) => {
+    try {
+        let result = await jsonata(validation.params.jsonata).evaluate(context);
+        console.log(`jsonata context:`, context);
+        console.log(`jsonata ${validation.params.jsonata} result:`, result);
+        if (!result) {
+            results.push({
+                message: validation.invalid_message || "This field is invalid.",
+                type: "error",
+            });
+        }
+    }
+    catch (error) {
+        console.error("JSONata validation error:", error);
+        results.push({
+            message: validation.invalid_message || "Invalid JSONata expression.",
+            type: "error",
+        });
+    }
+};
+export const evaluate_field_conditions = async (conditions, context) => {
+    try {
+        for (const condition of conditions) {
+            // console.log(`Evaluating condition: ${condition}`);
+            // console.log("Context:", context);
+            const result = await jsonata(condition).evaluate(context);
+            if (!result) {
+                return false; // If any condition fails, return false
+            }
+        }
+        return true; // All conditions passed
+    }
+    catch (error) {
+        console.error("Error evaluating conditions:", error);
+        return false;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.4.6",
+  "version": "1.5.1",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -19,6 +19,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
+    },
+    "./fields2": {
+      "types": "./dist/fields2/index.d.ts",
+      "svelte": "./dist/fields2/index.js"
     }
   },
   "scripts": {
@@ -32,6 +36,7 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
+    "@beyonk/svelte-mapbox": "^11.0.0",
     "@sveltejs/adapter-node": "^2.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.2.2",
@@ -55,13 +60,12 @@
   },
   "type": "module",
   "dependencies": {
-    "@beyonk/svelte-mapbox": "^11.0.0",
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/commands": "^6.8.1",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "@stubber/ui": "^1.13.1",
+    "@stubber/ui": "^1.13.5",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
     "codemirror": "^6.0.2",
@@ -83,12 +87,9 @@
     "svelte-writable-derived": "^3.1.0"
   },
   "pnpm": {
-    "onlyBuiltDependencies": [
-      "@sveltejs/kit",
-      "esbuild",
-      "svelte-preprocess",
-      "@parcel/watcher"
-    ]
+    "patchedDependencies": {
+      "@beyonk/svelte-mapbox@11.0.0": "patches/@beyonk__svelte-mapbox@11.0.0.patch"
+    }
   },
   "release": {
     "branches": [