@stubber/form-fields 1.0.0

package/dist/fields/components/Renderfield.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { syncStoreToStore } from "../../utils/syncing";
+  import { deepEqual } from "fast-equals";
+  import _ from "lodash-es";
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
+  import { Form } from "../..";
+
+  export let form;
+  export let field;
+
+  let render_form = writable();
+  let dependencies = form.dependencies;
+
+  let initial_form;
+  $: updateInitForm($field?.state?.dynamic_fieldspec);
+  function updateInitForm(rf) {
+    let name = rf?.name ?? "rendered_field";
+    let f = _.cloneDeep(rf);
+    _.set(f, "details.keyname", "rendered_field");
+    let current_f = _.get(initial_form, `spec.fields.${name}`);
+    if (deepEqual(current_f, f)) return;
+    initial_form = _.cloneDeep({
+      spec: {
+        fields: {
+          [name]: f,
+        },
+      },
+      data: {
+        rendered_field: $field?.data?.base,
+      },
+    });
+  }
+
+  onMount(() => {
+    // set field values that aren't set yet
+
+    syncStoreToStore(
+      field,
+      render_form,
+      (a, b) => {
+        // return field internal state
+        let _clone = _.cloneDeep(b) || {};
+        _.set(_clone, "data.rendered_field", a?.data?.base);
+        return _clone;
+      },
+      (a, b) => {
+        let _clone = _.cloneDeep(a) || {};
+        _.set(_clone, "data.base", b?.data?.rendered_field ?? a?.data?.base);
+        return _clone;
+      }
+    );
+  });
+</script>
+
+{#if initial_form}
+  <Form bind:form={render_form} {initial_form} {dependencies} />
+{/if}

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  RenderfieldProps */
+/** @typedef {typeof __propDef.events}  RenderfieldEvents */
+/** @typedef {typeof __propDef.slots}  RenderfieldSlots */
+export default class Renderfield extends SvelteComponentTyped<{
+    form: any;
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RenderfieldProps = typeof __propDef.props;
+export type RenderfieldEvents = typeof __propDef.events;
+export type RenderfieldSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form: any;
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/Screenrecorder.svelte

@@ -0,0 +1,277 @@
+<script>
+  import { onMount } from "svelte";
+  import { Button } from "@stubber/ui";
+  import _ from "lodash-es";
+  import { deepEqual } from "fast-equals";
+  import { writable } from "svelte/store";
+  import { syncStoreToStore } from "../../utils/syncing";
+
+  export let form;
+  export let field;
+
+  const internal = writable({});
+
+  let isRecording;
+  let media = [];
+  let mediaRecorder = null;
+
+  $: 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;
+  $: max_files = isNaN(parseInt($field.spec?.params?.max_files))
+    ? Infinity
+    : parseInt($field.spec?.params?.max_files);
+  $: limit_remaining =
+    max_files - ($internal?.selected_files?.length ?? 0) - ($internal?.uploaded_files?.length ?? 0);
+
+  onMount(() => {
+    // set field values that aren't set yet
+    let f = _.cloneDeep($field);
+    let initial_value = _.isArray(f?.data?.base) ? f?.data?.base : [];
+    let initial_data = {
+      ...f?.data,
+      base: initial_value,
+    };
+    let initial_state_internal = {
+      selected_files: [],
+      uploaded_files: initial_value,
+      failed_files: [],
+    };
+
+    _.set(f, "data", initial_data);
+    _.set(f, "state.internal", initial_state_internal);
+    if (!deepEqual(f, $field)) $field = f;
+
+    syncStoreToStore(
+      field,
+      internal,
+      (a, b) => {
+        let _clone = _.cloneDeep(a.state?.internal) || {};
+
+        // get parts from data
+        let files = _.isArray(a?.data?.base) ? a?.data?.base : [];
+        _clone.uploaded_files = files;
+
+        // set field state if changed
+        if (!deepEqual(a?.state?.internal, _clone)) {
+          $field.state.internal = _clone;
+        }
+        return _clone;
+      },
+      (a, b) => {
+        let _clone = _.cloneDeep(a) || {};
+        // update the state
+        _.set(_clone, "state.internal", _.cloneDeep(b));
+        // update the data
+        _.set(_clone, "data.base", b?.uploaded_files);
+        return _clone;
+      }
+    );
+  });
+
+  async function initializeMediaRecorder() {
+    const stream = await navigator.mediaDevices.getDisplayMedia({
+      audio: true,
+      video: { mediaSource: "screen" },
+    });
+    const audiostream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const combine = new MediaStream([...stream.getVideoTracks(), ...audiostream.getAudioTracks()]);
+    mediaRecorder = new MediaRecorder(combine, { mimeType: "video/webm;codecs=vp9" });
+    mediaRecorder.ondataavailable = (e) => media.push(e.data);
+    mediaRecorder.onstop = function () {
+      let id = Math.random().toString(36).substring(7);
+      let filename = `${$field.spec?.name}_${id}.webm`;
+      let blob = new Blob(media, { type: "video/webm;codecs=vp9" });
+      let file = new File([blob], filename, { type: "video/webm;codecs=vp9" });
+      uploadFile(file, blob, filename);
+      media = [];
+      mediaRecorder = null;
+    };
+  }
+
+  async function startRecording() {
+    if (limit_remaining <= 0) {
+      alert("You have reached the maximum number of files allowed");
+      return;
+    }
+    await initializeMediaRecorder();
+    mediaRecorder.start();
+    isRecording = true;
+  }
+
+  function stopRecording() {
+    mediaRecorder.stop();
+    isRecording = false;
+  }
+
+  function toggleRecording() {
+    if (!isRecording) {
+      startRecording();
+    } else {
+      stopRecording();
+    }
+  }
+
+  async function uploadFile(file, blob, filename) {
+    let comparison = _.cloneDeep($internal);
+    let f_id = Math.random().toString(36).substring(7);
+    comparison.selected_files = comparison.selected_files || [];
+    comparison.selected_files.push({
+      blob,
+      file,
+      filename,
+      f_id,
+    });
+    if (!deepEqual(comparison, $internal)) {
+      $internal = comparison;
+    }
+
+    let upload_res = await form.uploadFiles([file]);
+    let { uploaded_files } = upload_res || {};
+
+    let comparison2 = _.cloneDeep($internal);
+    if (_.isArray(uploaded_files)) {
+      uploaded_files.forEach((a) => {
+        a.f_id = f_id;
+        form.appendAttachment(a);
+        comparison2.uploaded_files.push(a);
+      });
+    }
+
+    if (!uploaded_files?.length) {
+      comparison2.failed_files.push({
+        file,
+        filename,
+        f_id,
+      });
+    }
+
+    comparison2.selected_files = comparison2.selected_files.filter((f) => {
+      return f.f_id !== f_id;
+    });
+
+    if (!deepEqual(comparison2, $internal)) {
+      $internal = comparison2;
+    }
+  }
+
+  function removeFile(item) {
+    let name = item?.file?.filename ?? item?.file?.name;
+    let comparison = _.cloneDeep($internal);
+    comparison.selected_files = comparison.selected_files?.filter((f) => f.f_id !== item.f_id);
+    comparison.failed_files = comparison.failed_files?.filter((f) => f.f_id !== item.f_id);
+    comparison.uploaded_files = comparison.uploaded_files?.filter((f) => f.f_id !== item.f_id);
+
+    if (!deepEqual(comparison, $internal)) {
+      $internal = comparison;
+    }
+
+    if (item?.is_uploaded) {
+      form.removeAttachment(item?.file);
+    }
+  }
+
+  async function fileToBlob(file) {
+    return new Blob([new Uint8Array(await file.arrayBuffer())], { type: file.type });
+  }
+
+  let fileList = [];
+  $: formatFileList($internal);
+  async function formatFileList(i) {
+    let { uploaded_files, selected_files, failed_files } = i;
+    let r = [];
+    for (let item of uploaded_files || []) {
+      r.push({
+        file: item,
+        filename: item.filename,
+        is_uploaded: true,
+      });
+    }
+    for (let item of selected_files || []) {
+      r.push({
+        ...item,
+        is_selected: true,
+      });
+    }
+    for (let item of failed_files || []) {
+      r.push({
+        ...item,
+        is_failed: true,
+        blob: await fileToBlob(item.file),
+      });
+    }
+    fileList = r;
+  }
+
+  $: buttonLabel = isRecording ? "Stop recording" : "Start recording";
+</script>
+
+{#if $internal}
+  <div class="flex flex-col w-full text-surface-900">
+    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+      {label}
+    </label>
+    <div>
+      <Button
+        variant={isRecording ? "destructive" : "default"}
+        on:click={toggleRecording}
+      >
+        {#if isRecording}
+        <i class="fa-solid fa-video-slash" />
+        {:else}
+        <i class="fa-solid fa-video" />
+        {/if}
+        {buttonLabel}
+      </Button>
+      {#each fileList as item}
+        <div class="w-full flex flex-row items-center">
+          {#if item.is_uploaded}
+            <div class="px-2">
+              <i class="fa fa-check text-success-500" />
+            </div>
+          {:else if item.is_failed}
+            <div class="px-2 space-x-2 flex items-center text-danger-400">
+              <i class="fa-regular fa-triangle-exclamation" />
+              <p class="hidden md:block text-fluid-md">Failed</p>
+            </div>
+          {:else}
+            <div class="px-2 space-x-2 flex items-center text-surface-500">
+              <p class="hidden md:block text-fluid-md">uploading...</p>
+              <i class="fa fa-pulse fa-spinner" />
+            </div>
+          {/if}
+          {#if item?.blob}
+            <div class="shrink p-2">
+              <div class="overflow-hidden relative max-w-[200px]">
+                <!-- <audio controls src={window.URL.createObjectURL(item.blob)} /> -->
+                <video controls src={window.URL.createObjectURL(item.blob)} class="w-full">
+                  <track kind="captions" />
+                </video>
+              </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
+            type="button"
+            class="shrink-0 fa-solid fa-2xs fa-x bg-surface-0 rounded-full border border-surface-0 hover:border-warning-500 hover:text-warning-500"
+            on:click={() => {
+              removeFile(item);
+            }}
+          />
+        </div>
+      {/each}
+    </div>
+  </div>
+  {#if validationMessage}
+    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      {validationMessage}
+    </p>
+  {/if}
+{/if}

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  ScreenrecorderProps */
+/** @typedef {typeof __propDef.events}  ScreenrecorderEvents */
+/** @typedef {typeof __propDef.slots}  ScreenrecorderSlots */
+export default class Screenrecorder extends SvelteComponentTyped<{
+    form: any;
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ScreenrecorderProps = typeof __propDef.props;
+export type ScreenrecorderEvents = typeof __propDef.events;
+export type ScreenrecorderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form: any;
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/Screenshot.svelte

@@ -0,0 +1,270 @@
+<script>
+  import { onMount } from "svelte";
+  import { Button } from "@stubber/ui";
+  import _ from "lodash-es";
+  import { deepEqual } from "fast-equals";
+  import { writable } from "svelte/store";
+  import { syncStoreToStore } from "../../utils/syncing";
+
+  export let form;
+  export let field;
+
+  const internal = writable({});
+
+  let isRecording;
+
+  $: 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;
+  $: max_files = isNaN(parseInt($field.spec?.params?.max_files))
+    ? Infinity
+    : parseInt($field.spec?.params?.max_files);
+  $: limit_remaining =
+    max_files - ($internal?.selected_files?.length ?? 0) - ($internal?.uploaded_files?.length ?? 0);
+
+  onMount(() => {
+    // set field values that aren't set yet
+    let f = _.cloneDeep($field);
+    let initial_value = _.isArray(f?.data?.base) ? f?.data?.base : [];
+    let initial_data = {
+      ...f?.data,
+      base: initial_value,
+    };
+    let initial_state_internal = {
+      selected_files: [],
+      uploaded_files: initial_value,
+      failed_files: [],
+    };
+
+    _.set(f, "data", initial_data);
+    _.set(f, "state.internal", initial_state_internal);
+    if (!deepEqual(f, $field)) $field = f;
+
+    syncStoreToStore(
+      field,
+      internal,
+      (a, b) => {
+        let _clone = _.cloneDeep(a.state?.internal) || {};
+
+        // get parts from data
+        let files = _.isArray(a?.data?.base) ? a?.data?.base : [];
+        _clone.uploaded_files = files;
+
+        // set field state if changed
+        if (!deepEqual(a?.state?.internal, _clone)) {
+          $field.state.internal = _clone;
+        }
+        return _clone;
+      },
+      (a, b) => {
+        let _clone = _.cloneDeep(a) || {};
+        // update the state
+        _.set(_clone, "state.internal", _.cloneDeep(b));
+        // update the data
+        _.set(_clone, "data.base", b?.uploaded_files);
+        return _clone;
+      }
+    );
+  });
+
+  async function startRecording() {
+    if (limit_remaining <= 0) {
+      alert("You have reached the maximum number of files allowed");
+      return;
+    }
+    let id = Math.random().toString(36).substring(7);
+    let filename = `${$field.spec?.name}_${id}`;
+    if (!navigator.mediaDevices.getDisplayMedia) return;
+
+    const stream = await navigator.mediaDevices.getDisplayMedia({
+      video: { mediaSource: "screen" },
+    });
+    // get correct video track
+    const track = stream.getVideoTracks()[0];
+    // init Image Capture and not Video stream
+    const imageCapture = new ImageCapture(track);
+    // take first frame only
+    const bitmap = await imageCapture.grabFrame();
+    // destory video track to prevent more recording / mem leak
+    track.stop();
+
+    const canvas = document.createElement("canvas");
+    // this could be a document.createElement('canvas') if you want
+    // draw weird image type to canvas so we can get a useful image
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const context = canvas.getContext("2d");
+    context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
+    const image = canvas.toDataURL();
+
+    // this turns the base 64 string to a [File] object
+    const res = await fetch(image);
+    const buff = await res.arrayBuffer();
+    // clone so we can rename, and put into array for easy proccessing
+    const file = [
+      new File([buff], `${filename}.png`, {
+        type: "image/png",
+      }),
+    ];
+
+    await uploadFile(file[0], `${filename}.png`);
+
+    toggleRecording();
+  }
+
+  function stopRecording() {}
+
+  function toggleRecording() {
+    isRecording = !isRecording;
+    if (isRecording) {
+      startRecording();
+    } else {
+      stopRecording();
+    }
+  }
+
+  async function uploadFile(file, filename) {
+    let comparison = _.cloneDeep($internal);
+    let f_id = Math.random().toString(36).substring(7);
+    comparison.selected_files = comparison.selected_files || [];
+    comparison.selected_files.push({
+      file,
+      filename,
+      f_id,
+    });
+    if (!deepEqual(comparison, $internal)) {
+      $internal = comparison;
+    }
+
+    let upload_res = await form.uploadFiles([file]);
+    let { uploaded_files } = upload_res || {};
+
+    let comparison2 = _.cloneDeep($internal);
+    if (_.isArray(uploaded_files)) {
+      uploaded_files.forEach((a) => {
+        a.f_id = f_id;
+        form.appendAttachment(a);
+        comparison2.uploaded_files.push(a);
+      });
+    }
+
+    if (!uploaded_files?.length) {
+      comparison2.failed_files.push({
+        file,
+        filename,
+        f_id,
+      });
+    }
+
+    comparison2.selected_files = comparison2.selected_files.filter((f) => {
+      return f.f_id !== f_id;
+    });
+
+    if (!deepEqual(comparison2, $internal)) {
+      $internal = comparison2;
+    }
+  }
+
+  function removeFile(item) {
+    let comparison = _.cloneDeep($internal);
+    comparison.selected_files = comparison.selected_files?.filter((f) => f.f_id !== item.file.f_id);
+    comparison.failed_files = comparison.failed_files?.filter((f) => f.f_id !== item.file.f_id);
+    comparison.uploaded_files = comparison.uploaded_files?.filter((f) => f.f_id !== item.file.f_id);
+
+    if (!deepEqual(comparison, $internal)) {
+      $internal = comparison;
+    }
+
+    if (item?.is_uploaded) {
+      form.removeAttachment(item?.file);
+    }
+  }
+
+  $: buttonLabel = isRecording ? "Cancel" : "Take screenshot";
+
+  $: fileList = (
+    ($internal?.uploaded_files || [])?.map((f) => {
+      return {
+        file: f,
+        is_uploaded: true,
+      };
+    }) || []
+  )
+    .concat(
+      $internal?.selected_files?.map((f) => {
+        return {
+          file: f,
+          is_selected: true,
+        };
+      }) || []
+    )
+    .concat(
+      $internal?.failed_files?.map((f) => {
+        return {
+          file: f,
+          is_failed: true,
+        };
+      }) || []
+    );
+</script>
+
+{#if $internal}
+  <div class="flex flex-col w-full text-surface-900">
+    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+      {label}
+    </label>
+    <div>
+      <Button
+        variant={isRecording ? "destructive" : "default"}
+        on:click={toggleRecording}
+      >
+        {#if isRecording}
+        <i class="fa-solid fa-camera-slash" />
+        {:else}
+        <i class="fa-solid fa-camera" />
+        {/if}
+        {buttonLabel}
+      </Button>
+    </div>
+    <div class="w-full mt-2">
+      {#each fileList as item}
+        <div class="w-full flex flex-row">
+          {#if item.is_uploaded}
+            <div class="px-2">
+              <i class="fa fa-check text-success-500" />
+            </div>
+          {:else if item.is_failed}
+            <div class="px-2 space-x-2 flex items-center text-danger-400">
+              <i class="fa-regular fa-triangle-exclamation" />
+              <p class="hidden md:block text-fluid-md">Failed</p>
+            </div>
+          {:else}
+            <div class="px-2 space-x-2 flex items-center text-surface-500">
+              <p class="hidden md:block text-fluid-md" />
+              <i class="fa fa-pulse fa-spinner" />
+            </div>
+          {/if}
+          <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?.file?.filename ?? item?.file?.name ?? item?.file?.path}
+            </p>
+          </div>
+          <button
+            type="button"
+            class="shrink-0 ml-1 p-1 px-2 fa-solid fa-2xs fa-x bg-surface-0 rounded-full border border-surface-0 hover:border-warning-500 hover:text-warning-500"
+            on:click={() => {
+              removeFile(item);
+            }}
+          />
+        </div>
+      {/each}
+    </div>
+  </div>
+  {#if validationMessage}
+    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      {validationMessage}
+    </p>
+  {/if}
+{/if}

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  ScreenshotProps */
+/** @typedef {typeof __propDef.events}  ScreenshotEvents */
+/** @typedef {typeof __propDef.slots}  ScreenshotSlots */
+export default class Screenshot extends SvelteComponentTyped<{
+    form: any;
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ScreenshotProps = typeof __propDef.props;
+export type ScreenshotEvents = typeof __propDef.events;
+export type ScreenshotSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form: any;
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};