@stubber/form-fields 1.0.0

package/README.md

@@ -0,0 +1,303 @@
+# stubber-form-fields-pkg
+
+## 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
+
+- `npm version patch` to bump the version
+- `git push origin master` to push the bumped version
+- `npm run build` to build the package
+- `npm run package` to package the package
+- `npm publish` to publish the package

package/dist/Field.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { getContext, onDestroy, onMount } from "svelte";
+  import * as utils from "./utils/index.js";
+  import _ from "lodash-es";
+
+  export let form;
+  export let initial_field_spec = null;
+  export let parent_field = null;
+  export let field_wrapper = null;
+  export let field = null;
+
+  const default_field_wrapper = getContext("stubber-form-fields-default-wrapper");
+
+  let removeField;
+  onMount(() => {
+    let addResult = form.addField(initial_field_spec, $parent_field?.state?.state_key);
+    if (addResult?.state_key) field = utils.createField(addResult?.state_key, form);
+    if (addResult?.removeField) removeField = addResult?.removeField;
+  });
+
+  onDestroy(() => {
+    if (removeField) removeField();
+  });
+
+  // derive the field wrapper
+  $: FieldWrapper = field_wrapper || default_field_wrapper;
+
+  // get the right svelte component
+  $: fieldcomponent = utils.mapFieldToComponent($field?.spec);
+</script>
+
+{#if $field?.state?.conditions_passed}
+  <div class={$field?.state?.invisible ? "invisible absolute" : ""}>
+    <svelte:component this={FieldWrapper} {form} {field} {fieldcomponent} {parent_field} />
+  </div>
+{/if}

package/dist/Field.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  FieldProps */
+/** @typedef {typeof __propDef.events}  FieldEvents */
+/** @typedef {typeof __propDef.slots}  FieldSlots */
+export default class Field extends SvelteComponentTyped<{
+    form: any;
+    field?: null | undefined;
+    parent_field?: null | undefined;
+    initial_field_spec?: null | undefined;
+    field_wrapper?: null | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FieldProps = typeof __propDef.props;
+export type FieldEvents = typeof __propDef.events;
+export type FieldSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form: any;
+        field?: null | undefined;
+        parent_field?: null | undefined;
+        initial_field_spec?: null | undefined;
+        field_wrapper?: null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/Form.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { setContext } from "svelte";
+  import * as utils from "./utils/index.js";
+  import _ from "lodash-es";
+  import Field from "./Field.svelte";
+  import NullFieldWrapper from "./NullFieldWrapper.svelte";
+  import { deepEqual } from "fast-equals";
+
+  export let initial_form = {};
+  export let form = null;
+  export let field_wrapper = null;
+  export let dependencies = null;
+
+  form = utils.createForm({ dependencies, form });
+  setContext("stubber-form-fields-default-wrapper", field_wrapper || NullFieldWrapper);
+
+  let debounceRenderForm = utils.debounce(renderForm, 50);
+  $: debounceRenderForm(initial_form);
+  function renderForm(v) {
+    if (!deepEqual($form?.initial_form, v)) form.initialize(v);
+  }
+
+  $: fields = utils.getFieldsToRender($form?.root_spec?.fields);
+</script>
+
+{#if $form?.render_index}
+  {#key $form?.render_index}
+    {#if fields}
+      {#each fields as initial_field_spec (initial_field_spec.__key)}
+        <Field {form} {initial_field_spec} />
+      {/each}
+    {/if}
+  {/key}
+{/if}

package/dist/Form.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  FormProps */
+/** @typedef {typeof __propDef.events}  FormEvents */
+/** @typedef {typeof __propDef.slots}  FormSlots */
+export default class Form extends SvelteComponentTyped<{
+    form?: any;
+    field_wrapper?: null | undefined;
+    initial_form?: {} | undefined;
+    dependencies?: null | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form?: any;
+        field_wrapper?: null | undefined;
+        initial_form?: {} | undefined;
+        dependencies?: null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/NullFieldWrapper.svelte

@@ -0,0 +1,6 @@
+<script>
+  // fieldWrapper
+  export let fieldcomponent;
+</script>
+
+<svelte:component this={fieldcomponent} {...$$props} />

package/dist/NullFieldWrapper.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  NullFieldWrapperProps */
+/** @typedef {typeof __propDef.events}  NullFieldWrapperEvents */
+/** @typedef {typeof __propDef.slots}  NullFieldWrapperSlots */
+export default class NullFieldWrapper extends SvelteComponentTyped<{
+    [x: string]: any;
+    fieldcomponent: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NullFieldWrapperProps = typeof __propDef.props;
+export type NullFieldWrapperEvents = typeof __propDef.events;
+export type NullFieldWrapperSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        fieldcomponent: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/component_parts/arraybuilder/FieldWrapper.svelte

@@ -0,0 +1,69 @@
+<script>
+  import _ from "lodash-es";
+
+  // fieldWrapper
+  export let field;
+  export let fieldcomponent;
+  export let parent_field;
+
+  function removeEntry() {
+    let field_index = parseInt($field.spec?.__key);
+    // update the parent field
+    let parent_data = _.cloneDeep($parent_field?.data?.base);
+    if (_.isArray(parent_data)) {
+      parent_data = parent_data.slice(0, field_index).concat(parent_data.slice(field_index + 1));
+    }
+
+    parent_field.update((p) => {
+      let cp = _.cloneDeep(p);
+      _.set(cp, "data.base", parent_data);
+      return cp;
+    });
+  }
+
+  function reorder(is_move_higher) {
+    let field_index = parseInt($field.spec?.__key);
+    let sibling_index = field_index + (is_move_higher ? 1 : -1);
+
+    if (sibling_index < 0 || sibling_index >= $parent_field?.data?.base?.length) return;
+
+    // update the parent field
+    let parent_data = _.cloneDeep($parent_field?.data?.base);
+    if (_.isArray(parent_data)) {
+      let temp = _.cloneDeep(parent_data[field_index]);
+      parent_data[field_index] = _.cloneDeep(parent_data[sibling_index]);
+      parent_data[sibling_index] = temp;
+    }
+
+    $parent_field.data.base = parent_data;
+  }
+</script>
+
+<div class="flex items-stretch pb-6">
+  <div class="relative flex-grow-0 mr-2">
+    <button
+      on:click={() => reorder(false)}
+      type="button"
+      class="flex items-center justify-center text-xl w-8 border border-dashed bg-surface-0 border-surface-300 hover:bg-surface-500 hover:text-surface-0 active:bg-surface-500 active:text-surface-0 active:border-0 rounded-t text-surface-500 h-1/2"
+    >
+      <i class="fa-regular fa-angle-up" />
+    </button>
+    <button
+      on:click={() => reorder(true)}
+      type="button"
+      class="flex items-center justify-center text-xl w-8 border border-t-0 border-dashed bg-surface-0 border-surface-300 hover:bg-surface-500 hover:text-surface-0 active:bg-surface-500 active:text-surface-0 active:border-0 rounded-b text-surface-500 h-1/2"
+    >
+      <i class="fa-regular fa-angle-down" />
+    </button>
+  </div>
+  <div class="flex-grow">
+    <svelte:component this={fieldcomponent} {...$$props} field_wrapper={null} />
+  </div>
+  <button
+    on:click={removeEntry}
+    type="button"
+    class="flex-grow-0 flex items-center justify-center text-xl w-8 ml-2 border border-dashed bg-surface-0 border-danger-300 hover:bg-danger-500 hover:text-surface-0 hover:border-0 active:bg-danger-500 active:text-surface-0 active:border-0 rounded text-danger-500"
+  >
+    <i class="fa-regular fa-xmark" />
+  </button>
+</div>

package/dist/fields/component_parts/arraybuilder/FieldWrapper.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  FieldWrapperProps */
+/** @typedef {typeof __propDef.events}  FieldWrapperEvents */
+/** @typedef {typeof __propDef.slots}  FieldWrapperSlots */
+export default class FieldWrapper extends SvelteComponentTyped<{
+    [x: string]: any;
+    field: any;
+    fieldcomponent: any;
+    parent_field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FieldWrapperProps = typeof __propDef.props;
+export type FieldWrapperEvents = typeof __propDef.events;
+export type FieldWrapperSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        field: any;
+        fieldcomponent: any;
+        parent_field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/component_parts/fieldbuilder/FieldWrapper.svelte

@@ -0,0 +1,8 @@
+<script>
+  // fieldWrapper
+  export let fieldcomponent;
+</script>
+
+<div class="mb-2">
+  <svelte:component this={fieldcomponent} {...$$props} />
+</div>

package/dist/fields/component_parts/fieldbuilder/FieldWrapper.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  FieldWrapperProps */
+/** @typedef {typeof __propDef.events}  FieldWrapperEvents */
+/** @typedef {typeof __propDef.slots}  FieldWrapperSlots */
+export default class FieldWrapper extends SvelteComponentTyped<{
+    [x: string]: any;
+    fieldcomponent: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FieldWrapperProps = typeof __propDef.props;
+export type FieldWrapperEvents = typeof __propDef.events;
+export type FieldWrapperSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        fieldcomponent: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/AgGrid.svelte

@@ -0,0 +1,53 @@
+<script>import { syncStoreToStore } from "../../utils/syncing";
+import { deepEqual } from "fast-equals";
+import _ from "lodash-es";
+import { onMount } from "svelte";
+import { createGrid, GridApi } from "ag-grid-community";
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-material.css";
+export let field;
+$:
+  state_key = $field.state?.state_key;
+$:
+  label = $field.spec?.title;
+$:
+  hide_label = $field.spec?.hide_label;
+$:
+  isValid = !$field.state?.validation || $field.state?.validation?.valid;
+$:
+  validationMessage = $field.state?.validation?.message;
+let gridDiv;
+let gridApi;
+const gridOptions = {
+  autoSizeStrategy: {
+    type: "fitGridWidth",
+    defaultMinWidth: 100
+  },
+  defaultColDef: {
+    suppressMovable: true
+  },
+  onGridReady: (params) => {
+    gridApi = params.api;
+  },
+  onCellValueChanged: () => {
+    let rowData = [];
+    gridApi.forEachNode((node) => rowData.push(node.data));
+    $field.data.base = rowData;
+  },
+  // Row Data: The data to be displayed.
+  rowData: [],
+  // Column Definitions: Defines & controls grid columns.
+  columnDefs: []
+};
+onMount(() => {
+  let columnDefs = $field.spec?.params?.columnDefs;
+  if (columnDefs)
+    gridOptions.columnDefs = columnDefs;
+  let rowData = $field.data?.base;
+  if (Array.isArray(rowData))
+    gridOptions.rowData = rowData;
+  createGrid(gridDiv, gridOptions);
+});
+</script>
+
+<div bind:this={gridDiv} class="ag-theme-material w-full h-96" />

package/dist/fields/components/AgGrid.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-material.css";
+declare const __propDef: {
+    props: {
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AgGridProps = typeof __propDef.props;
+export type AgGridEvents = typeof __propDef.events;
+export type AgGridSlots = typeof __propDef.slots;
+export default class AgGrid extends SvelteComponentTyped<AgGridProps, AgGridEvents, AgGridSlots> {
+}
+export {};