@privyid/persona 1.1.2 → 1.2.0

package/dist/components/form-group/index.md

@@ -0,0 +1,264 @@
+---
+title: Form Group · Components
+description: Form label, caption, and other stuff.
+---
+
+<script setup>
+  import pFormGroup from './FormGroup.vue'
+  import pInput from '../input/Input.vue'
+</script>
+
+# Form Group
+
+> Form label, caption, and other stuff.
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-form-group label="First Name">
+    <p-input />
+  </p-form-group>
+</preview>
+
+```vue
+<template>
+  <p-form-group label="First Name">
+    <p-input />
+  </p-form-group>
+</template>
+```
+
+### Advance Usage
+
+<preview>
+  <p-form-group
+    label="First Name"
+    caption="This is caption"
+    description="This is description"
+    hint="This is hint"
+    required>
+    <p-input />
+  </p-form-group>
+</preview>
+
+```vue
+<template>
+  <p-form-group
+    label="First Name"
+    caption="This is caption"
+    description="This is description"
+    hint="This is hint"
+    required>
+    <p-input />
+  </p-form-group>
+</template>
+```
+
+## Required Mode
+
+Add little marker for required form using prop `required`.
+
+<preview>
+  <p-form-group
+    label="First Name"
+    required>
+    <p-input />
+  </p-form-group>
+</preview>
+
+```vue
+<template>
+  <p-form-group
+    label="First Name"
+    required>
+    <p-input />
+  </p-form-group>
+</template>
+```
+
+## Caption
+Add sub-label using `caption` prop.
+
+<preview>
+  <p-form-group
+    label="First Name"
+    caption="Lorem Ipsum dolor sitar">
+    <p-input />
+  </p-form-group>
+</preview>
+
+```vue
+<template>
+  <p-form-group
+    label="First Name"
+    caption="Lorem Ipsum dolor sitar">
+    <p-input />
+  </p-form-group>
+</template>
+```
+
+## Description
+
+Add decription note below the form input using `description` prop.
+
+<preview>
+  <p-form-group
+    label="First Name"
+    description="Lorem Ipsum dolor sitar">
+    <p-input />
+  </p-form-group>
+</preview>
+
+```vue
+<template>
+  <p-form-group
+    label="First Name"
+    description="Lorem Ipsum dolor sitar">
+    <p-input />
+  </p-form-group>
+</template>
+```
+
+## Error Message
+
+Error message from validation can be add in here using prop `error`. Note, it'll replace `description` message.
+
+<preview class="flex-col space-y-4">
+  <div>
+    <p-form-group
+      label="First Name"
+      description="Lorem Ipsum dolor sitar"
+      error="Please fill this field">
+      <p-input />
+    </p-form-group>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-form-group
+    label="First Name"
+    description="Lorem Ipsum dolor sitar"
+    error="Please fill this field">
+    <p-input />
+  </p-form-group>
+</template>
+```
+
+### With icon
+
+Show error icon with prop `error-icon`. Note, it'll only show if prop `error` was provided too.
+
+<preview class="flex-col space-y-4">
+  <div>
+    <p-form-group
+      label="First Name"
+      description="Lorem Ipsum dolor sitar"
+      error="Please fill this field"
+      error-icon>
+      <p-input />
+    </p-form-group>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-form-group
+    label="First Name"
+    description="Lorem Ipsum dolor sitar"
+    error="Please fill this field"
+    error-icon>
+    <p-input />
+  </p-form-group>
+</template>
+```
+
+## Hint tooltip
+
+Easy add hint tooltip using prop `hint`.
+
+<preview>
+  <p-form-group
+    label="First Name"
+    hint="Lorem Ipsum dolor sitar">
+    <p-input />
+  </p-form-group>
+</preview>
+
+```vue
+<template>
+  <p-form-group
+    label="First Name"
+    hint="Lorem Ipsum dolor sitar">
+    <p-input />
+  </p-form-group>
+</template>
+```
+
+## Horizontal Layout
+
+<preview>
+  <p-form-group
+    horizontal
+    required
+    label="First Name"
+    description="This is description">
+    <p-input />
+  </p-form-group>
+</preview>
+
+```vue
+<template>
+  <p-form-group
+    horizontal
+    required
+    label="First Name"
+    description="This is description">
+    <p-input />
+  </p-form-group>
+</template>
+```
+
+## API
+
+### Props
+
+| Props         |   Type    | Default | Description              |
+|---------------|:---------:|:-------:|--------------------------|
+| `label`       | `String`  |   `-`   | Form group label         |
+| `required`    | `Boolean` | `false` | Required flag            |
+| `caption`     | `String`  |   `-`   | Sublabel caption         |
+| `description` | `String`  |   `-`   | Description note         |
+| `hint`        | `String`  |   `-`   | Tooltip hint             |
+| `error`       | `String`  |   `-`   | Error validation message |
+| `error-icon`  | `Boolean` | `false` | Show error icon          |
+| `horizontal`  | `Boolean` | `false` | Horizontal layout        |
+
+### Slots
+
+| Name          | Description                    |
+|---------------|--------------------------------|
+| `label`       | Content to used as label       |
+| `caption`     | Content to used as caption     |
+| `description` | Content to used as description |
+| `hint`        | Content to used as hint        |
+| `error`       | Content to used as error       |
+
+### 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/form-group/kitchensink.md

@@ -0,0 +1,25 @@
+<script setup>
+  import pFormGroup from './FormGroup.vue'
+  import pInput from '../input/Input.vue'
+  import pCheckbox from '../checkbox/Checkbox.vue'
+</script>
+
+# Testing
+
+<p-form-group label="First Name">
+  <p-input />
+</p-form-group>
+
+<p-form-group label="Last Name">
+  <p-input />
+</p-form-group>
+
+<p-form-group label="Email">
+  <p-input />
+</p-form-group>
+
+<p-form-group label="Anumas">
+  <p-input />
+</p-form-group>
+
+<p-checkbox>Anu</p-checkbox>

package/dist/components/global/store.spec.d.ts

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

package/dist/components/global/store.spec.mjs

@@ -0,0 +1,72 @@
+import { describe } from "vitest";
+import {
+  setLang,
+  useStore,
+  useLang,
+  createStore,
+  initStore,
+  setStore,
+  getCDN,
+  setCDN,
+  destroyStore,
+  setPSPDFLicenseKey,
+  getPSPDFLicenseKey
+} from "./store.mjs";
+beforeEach(() => {
+  initStore();
+});
+describe("setLang", () => {
+  it("should able to set global lang", () => {
+    const lang = useLang();
+    const context = useStore();
+    setLang("id");
+    expect(context.value.lang).toBe("id");
+    expect(lang.value).toBe("id");
+  });
+});
+describe("createStore", () => {
+  it("should create new store instance", () => {
+    const a = useStore();
+    const b = createStore();
+    expect(a).not.toBe(b);
+  });
+});
+describe("useStore", () => {
+  it("should create new store instance", () => {
+    const a = useStore();
+    const b = createStore();
+    expect(a).not.toBe(b);
+  });
+});
+describe("setStore", () => {
+  it("should able to set store instance to global", () => {
+    const a = useStore();
+    const b = createStore();
+    expect(a).not.toBe(b);
+    setStore(b);
+    const c = useStore();
+    expect(c).toBe(b);
+  });
+});
+describe("setCDN", () => {
+  it("should able to set global cdnURL", () => {
+    const context = useStore();
+    expect(context.value.cdnURL).toBe("https://unpkg.com/");
+    expect(getCDN()).toBe("https://unpkg.com/");
+    setCDN("https://www.jsdelivr.com/package/npm/");
+    expect(context.value.cdnURL).toBe("https://www.jsdelivr.com/package/npm/");
+    expect(getCDN()).toBe("https://www.jsdelivr.com/package/npm/");
+  });
+});
+describe("getCDN", () => {
+  it("should return default if globalState not defined", () => {
+    destroyStore();
+    expect(getCDN()).toBe("https://unpkg.com/");
+  });
+});
+describe("setPSPDFLicenseKey", () => {
+  it("should able to set PSPDFKit Licensekey", () => {
+    setPSPDFLicenseKey("ABCDEFG");
+    expect(getPSPDFLicenseKey()).toBe("ABCDEFG");
+  });
+});

package/dist/components/global/use-singleton.spec.d.ts

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

package/dist/components/global/use-singleton.spec.mjs

@@ -0,0 +1,48 @@
+import {
+  queryAllByTestId,
+  queryByTestId,
+  queryByText
+} from "@testing-library/vue";
+import { defineComponent } from "vue-demi";
+import {
+  removeSingleton,
+  resetInstance,
+  useSingleton
+} from "./use-singleton.mjs";
+const mockComponent = defineComponent({
+  template: `
+    <div data-testid="mock">
+      Hello, This is global component
+    </div>
+  `
+});
+describe("useSingleton", () => {
+  afterEach(async () => {
+    return await resetInstance();
+  });
+  it("should be able render given component into global container", async () => {
+    await useSingleton(mockComponent);
+    const target = queryByTestId(document.body, "mock");
+    const text = queryByText(document.body, "Hello, This is global component");
+    expect(target).toBeInTheDocument();
+    expect(text).toBeInTheDocument();
+  });
+  it("should be only create single instance per component", async () => {
+    await useSingleton(mockComponent);
+    await useSingleton(mockComponent);
+    const target = queryAllByTestId(document.body, "mock");
+    expect(target).toHaveLength(1);
+  });
+});
+describe("removeSingleton", () => {
+  it("should be able remove component in global container", async () => {
+    await useSingleton(mockComponent);
+    const target = queryByTestId(document.body, "mock");
+    const text = queryByText(document.body, "Hello, This is global component");
+    expect(target).toBeInTheDocument();
+    expect(text).toBeInTheDocument();
+    await removeSingleton(mockComponent);
+    expect(target).not.toBeInTheDocument();
+    expect(text).not.toBeInTheDocument();
+  });
+});

package/dist/components/heading/Heading.spec.d.ts

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

package/dist/components/heading/Heading.spec.mjs

@@ -0,0 +1,61 @@
+import { render } from "@testing-library/vue";
+import Heading from "./Heading.vue";
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { Heading },
+    template: `
+      <Heading>
+        Heading Title
+      </Heading>
+    `
+  });
+  const heading = screen.queryByTestId("heading");
+  const text = screen.queryByText("Heading Title");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveClass("h3");
+  expect(text).toBeInTheDocument();
+});
+it('should have style "h1" if element set to "h1"', () => {
+  const screen = render({
+    components: { Heading },
+    template: `
+      <Heading element="h1">
+        Title
+      </Heading>
+    `
+  });
+  const heading = screen.queryByTestId("heading");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveClass("h1");
+  expect(heading).not.toHaveClass("h3");
+});
+it('should have style "bold" if props `weight` is set to bold', () => {
+  const screen = render({
+    components: { Heading },
+    template: `
+      <Heading weight="bold">
+        Heading Text
+      </Heading>
+    `
+  });
+  const heading = screen.queryByTestId("heading");
+  const text = screen.queryByText("Heading Text");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveClass("heading--bold");
+  expect(text).toBeInTheDocument();
+});
+it('should have style "uppercase" if props `transform` is set to uppercase', () => {
+  const screen = render({
+    components: { Heading },
+    template: `
+      <Heading transform="uppercase">
+        Heading Text
+      </Heading>
+    `
+  });
+  const heading = screen.queryByTestId("heading");
+  const text = screen.queryByText("Heading Text");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveClass("heading--uppercase");
+  expect(text).toBeInTheDocument();
+});

package/dist/components/heading/Heading.vue

@@ -8,45 +8,33 @@
   </component>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type {
-  ElementVariant,
-  TransformVariant,
-  WeightVariant,
-} from '.'
-
+<script setup>
+import { computed } from "vue-demi";
 const props = defineProps({
   element: {
-    type   : String as PropType<ElementVariant>,
-    default: 'h3',
+    type: String,
+    default: "h3"
   },
   weight: {
-    type   : String as PropType<WeightVariant>,
-    default: 'normal',
+    type: String,
+    default: "normal"
   },
   transform: {
-    type   : String as PropType<TransformVariant>,
-    default: 'normalcase',
-  },
-})
-
+    type: String,
+    default: "normalcase"
+  }
+});
 const elementNames = computed(() => {
-  return props.element
-})
-
+  return props.element;
+});
 const classNames = computed(() => {
-  const result: string[] = [`${props.element}`]
-
+  const result = [`${props.element}`];
   if (props.transform)
-    result.push(`heading--${props.transform}`)
-
+    result.push(`heading--${props.transform}`);
   if (props.weight)
-    result.push(`heading--${props.weight}`)
-
-  return result
-})
+    result.push(`heading--${props.weight}`);
+  return result;
+});
 </script>
 
 <style lang="postcss">

package/dist/components/heading/Heading.vue.d.ts

@@ -0,0 +1,49 @@
+import type { PropType } from 'vue-demi';
+import type { ElementVariant, TransformVariant, WeightVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    weight: WeightVariant;
+    transform: TransformVariant;
+    element: ElementVariant;
+}, {}, {}, {}, 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;
+    };
+};