@stubber/form-fields 1.4.6 → 1.5.0

package/README.md

@@ -10,300 +10,6 @@ pnpm install
 pnpm run dev
 ```
 
-## Quick start
-
-Use this as a quick demo
-
-```
-<script>
-  import { Form } from  'stubber-form-fields-pkg';
-
-  let initial_form = {
-    spec: {
-      fields: {
-        fullname: {
-          fieldtype: "text"
-        },
-        gender: {
-          fieldtype: "select",
-          params: {
-            options: [
-              {
-                label: "Male",
-                value: "male"
-              },
-              {
-                label: "Female",
-                value: "female"
-              }
-            ]
-          }
-        }
-      }
-    }
-  }
-
-  let form;
-
-</script>
-
-<Form
-  bind:form
-  {initial_form}
-/>
-```
-
-## Form
-
-- Can render a list of fields
-- All fields in a form have access to the state and data of other fields in the form
-- `initial_form` can be passed as a prop to this component to initialize the stores with some data
-- All props from this component are passed down to child components
-
-### props
-
-#### initial_form
-
-- Use to initialize the form
-
-```
-{
-  "spec": {
-    "test": {
-      "fieldtype": "text"
-    }
-  },
-  "data": {
-    "test": "Hi there"
-  }
-}
-```
-
-#### form
-
-- use this to bind to the internal store
-
-#### field_wrapper
-
-- Use to render fields differently
-- Below is the default wrapper as a guideline
-
-```
-<script>
-	// fieldWrapper
-	export let fieldcomponent;
-</script>
-
-<svelte:component this={fieldcomponent} {...$$props} />
-```
-
-#### dependencies
-
-- Many fields require extra dependencies that you can pass via this prop
-
-## Concepts
-
-There are a few concepts to be aware of when using this library
-
-### Field definition
-
-This is the JSON object, primarily as it comes from the template
-
-#### common settings
-
-- `name`
-  - always gets set to the key of the object and cannot be overwritten
-- `fieldtype`
-  - sets the field component to render in the form
-  - default value is`'text'`
-- `description`
-  - use to describe what the field is there for
-  - default value is`''`
-- `title`
-  - use to set the label of the field
-  - default value is a human readable form of `[name]`
-- `hide_label`
-  - set to `true` if you don't want the field to show a label
-  - default value is`false`
-- `details.keyname`
-  - use to set where in `data` to write the field value to
-  - default value is `[name]`
-- `details.datapath`
-  - use to nest the value deeper inside `data`
-  - default value is `''`
-- `initvalue.default`
-  - use to set the value of the field if the field value is not yet set
-- `initvalue.override`
-  - use to set the value of the field regardless of if the field value is set or not
-- `conditions`
-  - use to conditionally render a field
-  - array of jsonata expressions that evaluate using the fieldContext
-  - default value is `[]`
-
-```
-// example conditions
-[
-  "form.data.gender = 'male'"
-]
-```
-
-- `validations`
-  - use to ensure a valid field value
-  - default value is `{}`
-
-```
-// example validations
-{
-  "is_required_validation": {
-    "validationtype": "required",
-    "valid_message": "Looks good!",
-    "invalid_message": "This field is required"
-  },
-  "passes_regex_check": {
-    "validationtype": "regex",
-    "params": {
-      "regex": "regex here"
-    },
-    "invalid_message": "something is wrong"
-  },
-  "jsonata_check": {
-    "validationtype": "jsonata",
-    "params": {
-      "jsonata": "field.data = 5"
-    },
-    "invalid_message": "something is wrong"
-  }
-}
-```
-
-- `fields`
-  - Nest multiple fields under this field
-- `params` is where any field-specific settings are set
-
-### fieldtypes
-
-#### arraybuilder
-
-- `params.new_entry_field`
-  - this is a fieldspec for how new entries are added to the array
-  - `details.keyname` and `details.datapath` don't function in the new_entry_field
-
-#### checkbox
-
-- `params.checkedvalue`
-  - this is the value that the field will be set to if the box is checked
-  - default value is `true`
-- `params.uncheckedvalue`
-  - this is the value that the field will be set to if the box is not checked
-  - default value is `false`
-
-#### currency
-
-- `params.currency`
-  - set the currency of the field
-- `params.currency_whitelist`
-  - set array of currencies that can be selected
-- `params.currency_blacklist`
-  - set array of currencies that cannot be selected
-
-#### dataindication
-
-#### date
-
-#### datetime
-
-#### file
-
-#### hidden
-
-#### jsoneditor
-
-- `params.readonly`
-  - Shows a non-editable jsoneditor
-
-#### map
-
-#### multistep
-
-#### note
-
-#### radio
-
-- `params.options`
-  - set the options here
-
-```
-[
-  {
-    "label": "Red"
-  },
-  {
-    "label": "Green",
-    "value": "green"
-  },
-  {
-    "label": "Blue",
-    "value": {
-      "hello": "world"
-    }
-  }
-]
-```
-
-#### renderfield
-
-- `params.dynamic_fieldspec`
-  - Set the fieldspec here with values as jsonata expressions
-
-#### richtext
-
-#### scrollandreaddisplay
-
-- `params.displaytext`
-  - Set the text that should be displayed and scrolled through
-
-#### section
-
-#### select
-
-- `params.options`
-  - set the select options here
-
-```
-[
-  {
-    "label": "Red"
-  },
-  {
-    "label": "Green",
-    "value": "green"
-  },
-  {
-    "label": "Blue",
-    "value": {
-      "hello": "world"
-    }
-  }
-]
-```
-
-#### signature
-
-#### telephone
-
-#### text
-
-### Dependencies
-
-The dependencies prop is used by certain fields that only function with third party services. All the optional dependencies are listed below.
-
-- `file.upload_url`
-  - Where files should be uploaded to (e.g. `/api/file-server/upload`)
-- `map.mapboxAccessToken`
-  - Access token for mapbox account
-- `map.mapboxStylesheetUrl`
-  - Stylesheet url for maps
-
 # Publishing
 
 We use [semantic-release](https://github.com/semantic-release/semantic-release) to automate the versioning and package publishing process. To publish a new version of the package, follow these steps:
@@ -326,4 +32,64 @@ fix: fix button color
 
 See default ruleset [here](https://github.com/semantic-release/commit-analyzer/blob/master/lib/default-release-rules.js)
 
-# force-publish
+Conversion Progress:
+
+| Component            | TS DONE    | TESTS DONE |
+| -------------------- | ---------- | ---------- |
+| AgGrid               | x          |            |
+| Arraybuilder         | x          |            |
+| Checkbox             | x          |            |
+| CheckboxAutocomplete | x          |            |
+| Code                 | x          |            |
+| Contactselector      | x          |            |
+| Currency             | x          |            |
+| Dataindication       | x          |            |
+| Date                 | x          |            |
+| Datetime             | x          |            |
+| Email                | x          |            |
+| Fieldbuilder         | x          |            |
+| Fieldsbuilder        | deprecated |            |
+| File                 | x          |            |
+| Heading              | x          |            |
+| Hidden               | x          |            |
+| Hiddenlocation       | x          |            |
+| Html                 | x          |            |
+| Jsoneditor           | x          |            |
+| Map                  | x          |            |
+| Multicheckbox        | x          |            |
+| Multistep            | x          |            |
+| Note                 | x          |            |
+| Number               | x          |            |
+| Objectbuilder        | x          |            |
+| Qrcodescanner        | x          |            |
+| Radio                | x          |            |
+| Renderfield          | deprecated |            |
+| Screenrecorder       | x          |            |
+| Screenshot           | x          |            |
+| Scrollandreaddisplay | x          |            |
+| Section              | x          |            |
+| Select               | x          |            |
+| Selectresource       | x          |            |
+| Signature            | x          |            |
+| Slider               | x          |            |
+| SmartText            | x          |            |
+| Telephone            | x          |            |
+| Text                 | x          |            |
+| Voicenote            | x          |            |
+
+Generate Features
+
+| Feature               | TS DONE | TESTS DONE |
+| --------------------- | ------- | ---------- |
+| hide_label            | x       |            |
+| init_value            | x       |            |
+| without_value_details | x       |            |
+| attachments           | x       |            |
+| fieldbuilder support  | x       |            |
+
+## TS Refactor
+
+For now src/lib/fields2 exports a refactored and rewritten form fields implementation.
+The existing implementation is still present for now, but will be removed in future.
+
+This allows us to slowly switch editor/squared over to the new implementation without breaking everything at once.

package/dist/fields2/FieldLabel.svelte

@@ -0,0 +1,8 @@
+<script>import { Label } from "@stubber/ui/label";
+export let fieldStore;
+$: hide_label = $fieldStore.hide_label;
+</script>
+
+{#if !hide_label}
+  <Label for={$fieldStore.id}>{$fieldStore.label}</Label>
+{/if}

package/dist/fields2/FieldLabel.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBuiltField } from "./interfaces";
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FieldLabelProps = typeof __propDef.props;
+export type FieldLabelEvents = typeof __propDef.events;
+export type FieldLabelSlots = typeof __propDef.slots;
+export default class FieldLabel extends SvelteComponent<FieldLabelProps, FieldLabelEvents, FieldLabelSlots> {
+}
+export {};

package/dist/fields2/FieldMessage.svelte

@@ -0,0 +1,16 @@
+<script>import { Label } from "@stubber/ui/label";
+import { get, startCase } from "lodash-es";
+import { get_field_help_message } from "./utils";
+export let fieldStore;
+$: validation_result = $fieldStore.validation_result;
+$: type = validation_result?.type;
+</script>
+
+<Label
+  id="message-{$fieldStore.id}"
+  class="ml-2 text-xs {!$fieldStore.validation_result ? 'invisible' : ''} {type == 'error'
+    ? 'text-red-500'
+    : 'text-muted-foreground'}"
+>
+  {$fieldStore.validation_result?.message}
+</Label>

package/dist/fields2/FieldMessage.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { IBuiltField } from "./interfaces";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FieldMessageProps = typeof __propDef.props;
+export type FieldMessageEvents = typeof __propDef.events;
+export type FieldMessageSlots = typeof __propDef.slots;
+export default class FieldMessage extends SvelteComponent<FieldMessageProps, FieldMessageEvents, FieldMessageSlots> {
+}
+export {};

package/dist/fields2/Form.svelte

@@ -0,0 +1,29 @@
+<script>import { get as getStoreValue } from "svelte/store";
+import FormField from "./form-field.svelte";
+import { build_fields } from "./utils";
+import { validate_field } from "./validations/validate_field";
+export let initial_form;
+export let form;
+export let attachments;
+export let dependencies = void 0;
+if (initial_form.data) {
+  form.update((data) => {
+    return { ...data, ...initial_form.data };
+  });
+}
+const fields = build_fields(form, attachments, dependencies, initial_form.spec.fields);
+$: {
+  validate_form($form);
+}
+const validate_form = async (_) => {
+  for (const fieldStore of fields) {
+    await validate_field(form, fieldStore);
+  }
+};
+</script>
+
+<div class="flex flex-col gap-y-1">
+  {#each fields as fieldStore (getStoreValue(fieldStore).id)}
+    <FormField {fieldStore} />
+  {/each}
+</div>

package/dist/fields2/Form.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
+import type { IFormDependencies, IInitialForm } from "./interfaces";
+declare const __propDef: {
+    props: {
+        initial_form: IInitialForm;
+        form: Writable<any>;
+        attachments: Writable<any>;
+        dependencies?: IFormDependencies | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
+}
+export {};

package/dist/fields2/fileserver.d.ts

@@ -0,0 +1,15 @@
+import type { Writable } from "svelte/store";
+import type { IFormDependencies } from "./interfaces";
+export declare const uploadFiles: (files: File[], dependencies?: IFormDependencies) => Promise<{
+    uploaded_files: UploadedFile[];
+    failed_files: File[];
+} | undefined>;
+export declare const append_attachment: (UploadedFile: UploadedFile, attachment_store: Writable<UploadedFile[]>) => void;
+export declare const remove_attachment: (fileuuid: string, attachment_store: Writable<UploadedFile[]>) => void;
+export interface UploadedFile {
+    fileuuid: string;
+    filename: string;
+    originalname: string;
+    contentType: string;
+    [key: string]: any;
+}

package/dist/fields2/fileserver.js

@@ -0,0 +1,52 @@
+// export interface ExtendedFile extends File {
+//   path?: string; //for webkitdirectory, dont know svelte-file-dropzone has this apparently
+//   filename?: string; //from fileserver after upload
+// }
+export const uploadFiles = async (files, dependencies) => {
+    if (!dependencies?.file?.upload_url)
+        return;
+    const url = dependencies.file.upload_url;
+    const filesForm = new FormData();
+    if (!files?.length)
+        return;
+    files.forEach((file) => {
+        filesForm.append(file.name, file);
+    });
+    //send request
+    let resJSON;
+    try {
+        let res = await fetch(url, {
+            method: "POST",
+            body: filesForm,
+        });
+        //   resJSON = await utils.rawResToJSON(res);
+        if (res.ok) {
+            resJSON = await res.json();
+        }
+    }
+    catch (err) {
+        console.warn(err);
+    }
+    let uploaded_files = resJSON?.data?.uploaded_files ?? [];
+    let failed_files = files.filter((f) => !uploaded_files.find((uf) => uf.filename === f.name));
+    return {
+        uploaded_files,
+        failed_files,
+    };
+};
+export const append_attachment = (UploadedFile, attachment_store) => {
+    attachment_store.update((atts) => {
+        if (!atts)
+            atts = [];
+        atts.push(UploadedFile);
+        return atts;
+    });
+};
+export const remove_attachment = (fileuuid, attachment_store) => {
+    attachment_store.update((atts) => {
+        if (!atts)
+            atts = [];
+        atts = atts.filter((att) => att.fileuuid !== fileuuid);
+        return atts;
+    });
+};

package/dist/fields2/form-field.svelte

@@ -0,0 +1,10 @@
+<script>import { component_for } from "./interfaces";
+export let fieldStore;
+const component = component_for($fieldStore);
+</script>
+
+{#if !$fieldStore.hidden}
+  <div class="w-full">
+    <svelte:component this={component} {fieldStore} />
+  </div>
+{/if}

package/dist/fields2/form-field.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import { type IBuiltField } from "./interfaces";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FormFieldProps = typeof __propDef.props;
+export type FormFieldEvents = typeof __propDef.events;
+export type FormFieldSlots = typeof __propDef.slots;
+export default class FormField extends SvelteComponent<FormFieldProps, FormFieldEvents, FormFieldSlots> {
+}
+export {};