@privyid/persona 1.1.2 → 1.2.0

package/dist/components/camera/adapter/liveness.spec.mjs

@@ -0,0 +1,30 @@
+import { vi } from "vitest";
+import { runAdapter } from "../__mocks__/run-adapter.mjs";
+import {
+  sampleImage,
+  sampleImage2,
+  takePicture
+} from "../__mocks__/take-picture.mjs";
+import * as motion from "../__mocks__/motion.mjs";
+import LivenessAdapter from "./liveness.mjs";
+vi.mock("../utils/take-picture.ts", () => {
+  return { takePicture };
+});
+vi.mock("../utils/motion.ts", () => motion);
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+it("should capture image with motion", async () => {
+  const output = await runAdapter(LivenessAdapter);
+  expect(output.preview).toBe(sampleImage);
+  expect(output.result).toBeArray();
+  expect(output.result[0]).toBeInstanceOf(File);
+  expect(output.result[1]).toBeInstanceOf(File);
+});
+it("should return base64 as result", async () => {
+  takePicture.mockReturnValueOnce(sampleImage).mockReturnValueOnce(sampleImage2);
+  const output = await runAdapter(LivenessAdapter, { base64: true });
+  expect(output.preview).toBe(sampleImage2);
+  expect(output.result[0]).toBe(sampleImage2);
+  expect(output.result[1]).toBe(sampleImage);
+});

package/dist/components/camera/adapter/qr-code.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/camera/adapter/qr-code.spec.mjs

@@ -0,0 +1,21 @@
+import { vi } from "vitest";
+import { BrowserQRCodeReader } from "@zxing/browser";
+import { sampleImage, takePicture } from "../__mocks__/take-picture.mjs";
+import { BarcodeFormat, Result } from "@zxing/library";
+import { runAdapter, video } from "../__mocks__/run-adapter.mjs";
+import QrCodeAdapter from "./qr-code.mjs";
+const decode = vi.spyOn(BrowserQRCodeReader.prototype, "decodeOnceFromVideoElement").mockResolvedValue(new Result("Hello World", new Uint8Array(), 8, [], BarcodeFormat.QR_CODE));
+vi.mock("../utils/take-picture.ts", () => {
+  return { takePicture };
+});
+it("should capture qr code", async () => {
+  const output = await runAdapter(QrCodeAdapter);
+  expect(output.preview).toBe(sampleImage);
+  expect(output.result).toBe("Hello World");
+  expect(decode).toBeCalledWith(video);
+});
+it("should capture image from video in mirror mode", async () => {
+  const output = await runAdapter(QrCodeAdapter, { mirror: true });
+  expect(output.preview).toBe(sampleImage);
+  expect(takePicture).toBeCalledWith(video, true);
+});

package/dist/components/camera/index.md

@@ -0,0 +1,205 @@
+---
+title: Camera · Components
+description: Take picture from user's camera
+---
+
+<script setup>
+  import pCamera from './Camera.vue'
+  import pBanner from '../banner/Banner.vue'
+  import LivenessAdapter from './adapter/liveness'
+  import QrCodeAdapter from './adapter/qr-code'
+  import { ref } from 'vue-demi'
+
+  const result    = ref()
+  const resultB64 = ref()
+</script>
+
+# Camera
+
+> Take picture from user's camera
+
+## Usage
+
+### Simple Usage
+
+<preview class="flex-col">
+  <p-camera />
+</preview>
+
+```vue
+<template>
+  <p-camera />
+</template>
+```
+
+## Mirror Mode
+
+Add prop `mirror` to enable mirror mode.
+
+<preview class="flex-col">
+  <p-camera mirror />
+</preview>
+
+```vue
+<template>
+  <p-camera mirror />
+</template>
+```
+
+### Preview-only mirror mode
+
+If you want to keep image result un-mirrored. set prop `mirror` to `preview`. It will revert back when you take the picture.
+
+<preview class="flex-col">
+  <p-camera mirror="preview" />
+</preview>
+
+```vue
+<template>
+  <p-camera mirror="preview" />
+</template>
+```
+
+## Masking
+
+Add mask overlay using prop `mask`. There are 3 available masks `square`, `round`, `card`.
+
+<preview class="flex-col space-y-2">
+  <p-camera mask="square" />
+  <p-camera mask="round" />
+  <p-camera mask="card" />
+</preview>
+
+```vue
+<template>
+  <p-camera mask="square" />
+  <p-camera mask="round" />
+  <p-camera mask="card" />
+</template>
+```
+
+## Silent
+
+Add prop `silent` to disabled shutter sound.
+
+<preview class="flex-col">
+  <p-camera silent />
+</preview>
+
+```vue
+<template>
+  <p-camera silent />
+</template>
+```
+
+## Liveness
+
+Change adapter to Liveness to perform liveness capture.
+
+<preview class="flex-col space-y-2">
+  <p-camera :adapter="LivenessAdapter" />
+</preview>
+
+```vue
+<template>
+  <p-camera :adapter="LivenessAdapter" />
+</template>
+
+<script setup>
+  import { LivenessAdapter } from '@privyid/persona/core'
+</script>
+
+```
+
+## QR Scanner
+
+This component has built-in adapter for QR Code Scanning, powered by [ZXing](https://github.com/zxing-js/library).
+
+<preview class="flex-col space-y-2">
+  <p-camera :adapter="QrCodeAdapter" />
+</preview>
+
+```vue
+<template>
+  <p-camera :adapter="QrCodeAdapter" />
+</template>
+
+<script setup>
+  import { QrCodeAdapter } from '@privyid/persona/core'
+</script>
+```
+
+## Binding v-model
+
+You can bind the result of image using `v-model`. The result is variant depend on adapter do you use.
+
+<preview class="flex-col">
+  <p-camera v-model="result" />
+</preview>
+
+```vue
+<template>
+  <p-camera v-model="result" />
+</template>
+```
+
+**result:**
+
+<pre class="truncate"><code>{{ result }}</code></pre>
+
+### Encode to base64
+
+You can add modifier `base64` to your `v-model`, it's enforce result to [base64-dataURI](https://en.wikipedia.org/wiki/Data_URI_scheme).
+
+<p-banner :dismissable="false">
+  <b>Note!</b> <code>v-model.base64</code> on QRCodeAdapter has no effect, the result will always original scanned text.
+</p-banner>
+
+<preview class="flex-col">
+  <p-camera v-model.base64="resultB64" />
+</preview>
+
+```vue
+<template>
+  <p-camera v-model.base64="resultB64" />
+</template>
+```
+
+**result:**
+
+<pre class="truncate"><code>{{ resultB64 }}</code></pre>
+
+## API
+
+### Props
+
+| Props        |        Type         |     Default      | Description                                                                        |
+|--------------|:-------------------:|:----------------:|------------------------------------------------------------------------------------|
+| `mirror`     | `Boolean`, `String` |       `-`        | Enable mirror mode, set to `preview` for [Preview Only](#preview-only-mirror-mode) |
+| `mask`       |      `String`       |       `-`        | Enable mask overlay, valid value is `square`, `round`, `card`, `none`              |
+| `silent`     |      `Boolean`      |     `false`      | Mute shutter sound                                                                 |
+| `adapter`    |      `Adapter`      | `CaptureAdapter` | Camera Adapter                                                                     |
+| `modelValue` |       `File`        |       `-`        | v-model value                                                                      |
+
+### Slots
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" class="text-center">There no slots here</td>
+    </tr>
+  </tbody>
+</table>
+
+### Events
+
+| Name     | Arguments | Description                      |
+|----------|:---------:|----------------------------------|
+| `start`  |     -     | Event when camera started        |
+| `result` |     -     | Event when camera captured image |

package/dist/components/caption/Caption.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/caption/Caption.spec.mjs

@@ -0,0 +1,62 @@
+import { render } from "@testing-library/vue";
+import Caption from "./Caption.vue";
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { Caption },
+    template: `
+      <Caption>
+        Caption Text
+      </Caption>
+    `
+  });
+  const caption = screen.queryByTestId("caption");
+  const text = screen.queryByText("Caption Text");
+  expect(caption).toBeInTheDocument();
+  expect(caption).toHaveClass("caption");
+  expect(text).toBeInTheDocument();
+});
+it('should have style "bold" if props `weight` is set to bold', () => {
+  const screen = render({
+    components: { Caption },
+    template: `
+      <Caption weight="bold">
+        Caption Text
+      </Caption>
+    `
+  });
+  const caption = screen.queryByTestId("caption");
+  const text = screen.queryByText("Caption Text");
+  expect(caption).toBeInTheDocument();
+  expect(caption).toHaveClass("caption", "caption--bold");
+  expect(text).toBeInTheDocument();
+});
+it('should have style "uppercase" if props `transform` is set to uppercase', () => {
+  const screen = render({
+    components: { Caption },
+    template: `
+      <Caption transform="uppercase">
+        Caption Text
+      </Caption>
+    `
+  });
+  const caption = screen.queryByTestId("caption");
+  const text = screen.queryByText("Caption Text");
+  expect(caption).toBeInTheDocument();
+  expect(caption).toHaveClass("caption", "caption--uppercase");
+  expect(text).toBeInTheDocument();
+});
+it('should have style "tiny" if props `size` is set to tn', () => {
+  const screen = render({
+    components: { Caption },
+    template: `
+      <Caption size="tn">
+        Caption Text
+      </Caption>
+    `
+  });
+  const caption = screen.queryByTestId("caption");
+  const text = screen.queryByText("Caption Text");
+  expect(caption).toBeInTheDocument();
+  expect(caption).toHaveClass("caption", "caption--tn");
+  expect(text).toBeInTheDocument();
+});

package/dist/components/caption/Caption.vue

@@ -6,42 +6,32 @@
   </span>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { WeightVariant, TransformVariant } from '../heading'
-import type { SizeVariant } from '.'
-
+<script setup>
+import { computed } from "vue-demi";
 const props = defineProps({
   weight: {
-    type   : String as PropType<WeightVariant>,
-    default: 'normal',
+    type: String,
+    default: "normal"
   },
   transform: {
-    type   : String as PropType<TransformVariant>,
-    default: 'normalcase',
+    type: String,
+    default: "normalcase"
   },
   size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'xs',
-  },
-})
-
+    type: String,
+    default: "xs"
+  }
+});
 const classNames = computed(() => {
-  const result: string[] = ['caption']
-
+  const result = ["caption"];
   if (props.transform)
-    result.push(`caption--${props.transform}`)
-
+    result.push(`caption--${props.transform}`);
   if (props.weight)
-    result.push(`caption--${props.weight}`)
-
-  // eslint-disable-next-line unicorn/explicit-length-check
+    result.push(`caption--${props.weight}`);
   if (props.size)
-    result.push(`caption--${props.size}`)
-
-  return result
-})
+    result.push(`caption--${props.size}`);
+  return result;
+});
 </script>
 
 <style lang="postcss">

package/dist/components/caption/Caption.vue.d.ts

@@ -0,0 +1,50 @@
+import type { PropType } from 'vue-demi';
+import type { WeightVariant, TransformVariant } from '../heading';
+import type { SizeVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    weight: WeightVariant;
+    transform: TransformVariant;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/caption/index.md

@@ -0,0 +1,149 @@
+---
+title: Caption · Components
+description: Take picture from user's camera
+---
+
+<script setup>
+  import pCaption from './Caption.vue'
+</script>
+
+# Caption
+
+> Small additional title.
+
+## Usage
+
+### Basic Usage
+
+<preview>
+  <p-caption>
+    Any caption should here
+  </p-caption>
+</preview>
+
+```vue
+<template>
+  <p-caption>
+    Any caption should here
+  </p-caption>
+</template>
+```
+
+## Size
+Caption have 2 sizes variant, there are `xs` and `tn`. Default size is `xs`.
+
+<preview class="flex-col gap-3">
+  <p-caption size="xs">
+    Small caption should here
+  </p-caption>
+  <p-caption size="tn">
+    Tiny caption should here
+  </p-caption>
+</preview>
+
+```vue
+<template>
+  <p-caption size="xs">
+    Small caption should here
+  </p-caption>
+  <p-caption size="tn">
+    Tiny caption should here
+  </p-caption>
+</template>
+```
+
+## Weight
+Caption have 3 weights variant, there are `normal`, `medium` and `bold`. Default weight is `normal`.
+
+<preview class="flex-col gap-3">
+  <p-caption weight="normal">
+    Normal caption should here
+  </p-caption>
+  <p-caption weight="medium">
+    Medium caption should here
+  </p-caption>
+  <p-caption weight="bold">
+    Bold caption should here
+  </p-caption>
+</preview>
+
+```vue
+<template>
+  <p-caption weight="normal">
+    Normal caption should here
+  </p-caption>
+  <p-caption weight="medium">
+    Medium caption should here
+  </p-caption>
+  <p-caption weight="bold">
+    Bold caption should here
+  </p-caption>
+</template>
+```
+
+## Transform
+Caption have 4 transforms variant, there are `normalcase`, `lowercase`, `capitalize` and `uppercase`. Default transform is `normalcase`.
+<preview class="flex-col gap-3">
+  <p-caption transform="normalcase">
+    Normalcase caption should here
+  </p-caption>
+  <p-caption transform="lowercase">
+    Lowercase caption should here
+  </p-caption>
+  <p-caption transform="capitalize">
+    Capitalize caption should here
+  </p-caption>
+  <p-caption transform="uppercase">
+    Uppercase caption should here
+  </p-caption>
+</preview>
+
+```vue
+<template>
+  <p-caption transform="normalcase">
+    Normalcase caption should here
+  </p-caption>
+  <p-caption transform="lowercase">
+    Lowercase caption should here
+  </p-caption>
+  <p-caption transform="capitalize">
+    Capitalize caption should here
+  </p-caption>
+  <p-caption transform="uppercase">
+    Uppercase caption should here
+  </p-caption>
+</template>
+```
+
+## API
+
+### Props
+
+| Props       |   Type     | Default      | Description                                               |
+|-------------|:----------:|:------------:|-----------------------------------------------------------|
+| `size`      | `String`   |  `xs`        | Size of caption, valid value is `xs` and `tn`                 |
+| `weight`    | `String`   | `normal`     | Weight of subheading, valid value is `normal`, `medium` and `bold` |
+| `transform` | `String`   | `normalcase` | Transform of subheading, valid value is `normalcase`, `lowercase`, `capitalize` and `uppercase`   |
+
+### Slots
+
+| Name      | Description                 |
+|-----------|-----------------------------|
+| `default` | Content to place in caption |
+
+### Events
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Arguments</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="3" class="text-center">There no event here</td>
+    </tr>
+  </tbody>
+</table>

package/dist/components/card/Card.spec.d.ts

@@ -0,0 +1 @@
+export {};