@privyid/persona 0.3.0 → 0.4.0

package/dist/components/camera/utils/motion.mjs

@@ -0,0 +1,88 @@
+export const MOTION_THRESHOLD = 40;
+export const MOTION_FPS = 15;
+export const MOTION_AREA_SIZE = 160;
+export function takeSample(canvas, video) {
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  context.drawImage(
+    video,
+    video.videoWidth / 2 - MOTION_AREA_SIZE,
+    video.videoHeight / 2 - MOTION_AREA_SIZE,
+    MOTION_AREA_SIZE,
+    MOTION_AREA_SIZE,
+    0,
+    0,
+    MOTION_AREA_SIZE,
+    MOTION_AREA_SIZE
+  );
+  return context.getImageData(0, 0, canvas.width, canvas.height);
+}
+export function createTemplate(imageData) {
+  const centerX = imageData.width / 2;
+  const centerY = imageData.height / 2;
+  const width = imageData.width / 4;
+  const height = imageData.height / 4;
+  const xPos = centerX - width / 2;
+  const yPos = centerY - height / 2;
+  const buffer = new Uint8ClampedArray(width * height);
+  const template = {
+    centerX,
+    centerY,
+    width,
+    height,
+    xPos,
+    yPos,
+    buffer
+  };
+  const p = imageData.data;
+  let counter = 0;
+  for (let y = template.yPos; y < template.yPos + template.height; y++) {
+    let bufferIndex = y * imageData.width * 4 + template.xPos * 4 + 1;
+    for (let x = template.xPos; x < template.xPos + template.width; x++) {
+      template.buffer[counter++] = p[bufferIndex];
+      bufferIndex += 4;
+    }
+  }
+  return template;
+}
+export function motionDetection(imageData, template) {
+  let bestHitX = 0;
+  let bestHitY = 0;
+  let maxCorr = 0;
+  const searchWidth = imageData.width / 4;
+  const searchHeight = imageData.height / 4;
+  const p = imageData.data;
+  for (let y = template.centerY - searchHeight; y <= template.centerY + searchHeight - template.height; y++) {
+    for (let x = template.centerX - searchWidth; x <= template.centerX + searchWidth - template.width; x++) {
+      let nominator = 0;
+      let denominator = 0;
+      let templateIndex = 0;
+      for (let ty = 0; ty < template.height; ty++) {
+        let bufferIndex = x * 4 + 1 + (y + ty) * imageData.width * 4;
+        for (let tx = 0; tx < template.width; tx++) {
+          const imagepixel = p[bufferIndex];
+          nominator += template.buffer[templateIndex++] * imagepixel;
+          denominator += imagepixel * imagepixel;
+          bufferIndex += 4;
+        }
+      }
+      let ncc = 0;
+      if (denominator > 0)
+        ncc = nominator * nominator / denominator;
+      if (ncc > maxCorr) {
+        maxCorr = ncc;
+        bestHitX = x;
+        bestHitY = y;
+      }
+    }
+  }
+  const distX = bestHitX - template.xPos;
+  const distY = bestHitY - template.yPos;
+  const movementDiff = Math.sqrt(distX * distX + distY * distY);
+  const maxDistX = searchWidth - template.width / 2;
+  const maxDistY = searchHeight - template.height / 2;
+  const maximumMovement = Math.sqrt(maxDistX * maxDistX + maxDistY * maxDistY);
+  let movementPercentage = movementDiff / maximumMovement * 100;
+  if (movementPercentage > 100)
+    movementPercentage = 100;
+  return movementPercentage;
+}

package/dist/components/camera/utils/take-picture.d.ts

@@ -0,0 +1 @@
+export declare function takePicture(video: HTMLVideoElement, mirror?: boolean): string;

package/dist/components/camera/utils/take-picture.mjs

@@ -0,0 +1,12 @@
+export function takePicture(video, mirror = false) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  if (mirror) {
+    context.scale(-1, 1);
+    context.drawImage(video, 0, 0, canvas.width * -1, canvas.height);
+  } else
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  return canvas.toDataURL("image/jpeg");
+}

package/dist/components/collapse/Collapse.vue

@@ -0,0 +1,88 @@
+<template>
+  <transition
+    name="fade"
+    mode="out-in">
+    <div
+      v-show="model || isToggleable"
+      data-testid="collapse"
+      class="collapse"
+      :class="classNames">
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  inject
+} from "vue-demi";
+import { useVModel } from "../input/use-input";
+import { NAVBAR_SETTINGS } from "../navbar/use-navbar";
+import { useMediaQuery } from "@vueuse/core";
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    isNav: {
+      type: Boolean,
+      default: false
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const model = useVModel(props);
+    const context = inject(NAVBAR_SETTINGS, void 0, true);
+    const lg = useMediaQuery("(min-width: 1024px)");
+    const md = useMediaQuery("(min-width: 768px)");
+    const sm = useMediaQuery("(min-width: 640px)");
+    const isToggleable = computed(() => {
+      if (context?.toggleable?.value === "lg")
+        return lg.value;
+      if (context?.toggleable?.value === "md")
+        return md.value;
+      if (context?.toggleable?.value === "sm")
+        return sm.value;
+      return model.value;
+    });
+    const classNames = computed(() => {
+      const result = [""];
+      if (model.value)
+        result.push("collapse--show");
+      if (props.isNav)
+        result.push("navbar--collapse");
+      return result;
+    });
+    return {
+      model,
+      classNames,
+      isToggleable
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.collapse {
+  &&--show {
+    @apply block;
+  }
+
+  &:not(.collapse--show) {
+    @apply hidden;
+  }
+}
+
+.navbar {
+  &--collapse {
+    @apply basis-full flex-grow items-center;
+  }
+}
+</style>

package/dist/components/collapse/Collapse.vue.d.ts

@@ -0,0 +1,29 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isNav: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    model: import("vue-demi").Ref<boolean>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    isToggleable: import("vue-demi").ComputedRef<boolean>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isNav: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    modelValue: boolean;
+    isNav: boolean;
+}>;
+export default _default;

package/dist/components/contextual-bar/ContextualBar.vue

@@ -0,0 +1,292 @@
+<template>
+  <div
+    v-show="model"
+    ref="contextualbar"
+    data-testid="contextual-bar"
+    class="contextual-bar"
+    :class="classNames">
+    <div
+      data-testid="contextual-bar-wrapper"
+      :class="[{ 'contextual-bar__wrapper--with-message' : (message || $slots.message), 'contextual-bar__wrapper--with-action' : $slots.action } ,'contextual-bar__wrapper']">
+      <span
+        v-if="$slots.icon"
+        data-testid="contextual-bar-icon"
+        class="contextual-bar__icon">
+        <slot name="icon" />
+      </span>
+      <div class="contextual-bar__content">
+        <div
+          v-if="title || $slots.title"
+          data-testid="contextual-bar-title"
+          class="contextual-bar__content__title">
+          <slot name="title">
+            <p-subheading v-if="message">
+              {{ title }}
+            </p-subheading>
+            <template v-else>
+              {{ title }}
+            </template>
+          </slot>
+        </div>
+        <div
+          v-if="message || $slots.message"
+          data-testid="contextual-bar-message"
+          class="contextual-bar__content__message">
+          <p-caption>
+            <slot name="message">
+              {{ message }}
+            </slot>
+          </p-caption>
+        </div>
+      </div>
+      <div
+        v-if="$slots.action"
+        data-testid="contextual-bar-action"
+        class="contextual-bar__action">
+        <slot name="action" />
+      </div>
+    </div>
+    <div
+      v-if="dismissable"
+      data-testid="contextual-bar-close"
+      class="contextual-bar__close"
+      @click="close">
+      <IconClose />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  watch
+} from "vue-demi";
+import { useVModel } from "../input/use-input";
+import pCaption from "../caption/Caption.vue";
+import pSubheading from "../subheading/Subheading.vue";
+import IconClose from "@carbon/icons-vue/lib/close/20";
+import {
+  templateRef,
+  until,
+  useElementBounding
+} from "@vueuse/core";
+export default defineComponent({
+  components: {
+    IconClose,
+    pCaption,
+    pSubheading
+  },
+  props: {
+    variant: {
+      type: String,
+      default: "light"
+    },
+    backgroundUrl: {
+      type: String,
+      default: void 0
+    },
+    dismissable: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    message: {
+      type: String,
+      default: void 0
+    },
+    align: {
+      type: String,
+      default: "left"
+    },
+    modelValue: {
+      type: Boolean,
+      default: true
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue", "close"],
+  setup(props, { emit }) {
+    const model = useVModel(props);
+    const contextualbar = templateRef("contextualbar");
+    const { height } = useElementBounding(contextualbar);
+    async function show() {
+      await until(height).changed();
+      document.body?.style.setProperty("transform", `translateY(${height.value}px)`);
+      document.body?.style.setProperty("transition", "transform 0.15s ease-in-out");
+      contextualbar.value?.style.setProperty("transform", `translateY(-${height.value}px)`);
+      contextualbar.value?.style.setProperty("transition", "transform 0.15s ease-in-out");
+    }
+    async function hide() {
+      contextualbar.value?.style.setProperty("transform", "translateY(-0px)");
+      contextualbar.value?.style.setProperty("transition", "transform 0.15s ease-in-out");
+      document.body?.style.removeProperty("transform");
+    }
+    function close(event) {
+      emit("close", event);
+      if (!event.defaultPrevented)
+        model.value = false;
+    }
+    const classNames = computed(() => {
+      const result = [""];
+      if (props.variant)
+        result.push(`contextual-bar--${props.variant}`);
+      if (props.align)
+        result.push(`contextual-bar--align-${props.align}`);
+      if (props.backgroundUrl)
+        result.push("contextual-bar--background-image");
+      return result;
+    });
+    onMounted(() => {
+      if (props.backgroundUrl)
+        contextualbar.value?.style.setProperty("background-image", `url('${props.backgroundUrl}')`);
+      if (model.value)
+        show();
+      else
+        hide();
+    });
+    watch(model, (value) => {
+      if (value)
+        show();
+      else
+        hide();
+    });
+    return {
+      model,
+      classNames,
+      close
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.contextual-bar {
+  @apply fixed z-[1030] top-0 left-0 p-6 w-full;
+
+  &--background-image {
+    @apply bg-no-repeat bg-cover bg-[top_center];
+  }
+
+  &__wrapper {
+    @apply px-24 items-center flex mr-9;
+
+    &--with-message {
+      @apply items-start;
+    }
+
+    &--with-action {
+      @apply items-center;
+
+      &.contextual-bar__wrapper--with-message {
+        .contextual-bar__icon {
+          @apply self-start;
+        }
+      }
+    }
+  }
+
+  &&--align-left {
+    .contextual-bar__wrapper {
+      @apply justify-start text-left;
+    }
+  }
+
+  &&--align-center {
+    .contextual-bar__wrapper {
+      @apply justify-center text-center;
+
+      &--with-action {
+        .contextual-bar__content {
+          @apply text-left;
+        }
+      }
+    }
+
+    .contextual-bar__action {
+      @apply ml-0;
+    }
+  }
+
+  &&--align-right {
+    .contextual-bar__wrapper {
+      @apply justify-end text-right;
+
+      &--with-action {
+        .contextual-bar__content {
+          @apply text-left;
+        }
+        .contextual-bar__action {
+          @apply ml-0;
+        }
+      }
+    }
+  }
+
+  &&--align-center,
+  &&--align-right {
+    .contextual-bar__wrapper {
+      &--with-action {
+        @apply gap-3;
+
+        .contextual-bar__icon {
+          @apply mr-0;
+        }
+      }
+    }
+
+    .contextual-bar__content {
+      @apply flex-grow-0;
+    }
+  }
+
+  &__content {
+    @apply flex-grow;
+
+    &__title {
+      @apply text-base;
+    }
+  }
+
+  &__action {
+    @apply flex flex-shrink-0 ml-auto gap-3;
+  }
+
+  &__icon {
+    @apply relative mr-4 flex-shrink;
+
+    img {
+      @apply max-w-[20px] w-auto;
+    }
+  }
+
+  &__close {
+    @apply absolute right-6 top-1/2 -translate-y-1/2 cursor-pointer text-black text-opacity-30 hover:text-opacity-50;
+  }
+
+  &&--dark {
+    @apply bg-black text-white;
+
+    .contextual-bar__close {
+      @apply text-white text-opacity-40 hover:text-opacity-60;
+    }
+  }
+
+  &&--light {
+    @apply bg-background-100 text-body-100;
+
+    .contextual-bar {
+      &__icon {
+        @apply text-primary-100;
+      }
+    }
+  }
+}
+</style>

package/dist/components/contextual-bar/ContextualBar.vue.d.ts

@@ -0,0 +1,77 @@
+import { PropType } from 'vue-demi';
+declare type StyleVariant = 'light' | 'dark';
+declare const _default: import("vue-demi").DefineComponent<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    backgroundUrl: {
+        type: StringConstructor;
+        default: any;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: any;
+    };
+    message: {
+        type: StringConstructor;
+        default: any;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    model: import("vue-demi").Ref<boolean>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    close: (event: Event) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    backgroundUrl: {
+        type: StringConstructor;
+        default: any;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: any;
+    };
+    message: {
+        type: StringConstructor;
+        default: any;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+}, {
+    variant: StyleVariant;
+    dismissable: boolean;
+    modelValue: boolean;
+    title: string;
+    message: string;
+    align: AlignVariant;
+    backgroundUrl: string;
+}>;
+export default _default;