@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/tour/core/step/action.d.ts

@@ -0,0 +1,15 @@
+import type UE from '@testing-library/user-event';
+import { AbstractStep } from '../step';
+type UserEvent = ReturnType<typeof UE['setup']>;
+type ExtractParams<F> = F extends (T: Element, ...args: infer P) => Promise<void> ? P : unknown[];
+export type EventType = 'click' | 'dblClick' | 'tripleClick' | 'type' | 'hover' | 'unhover' | 'clear';
+export type ParamsOf<E extends EventType> = ExtractParams<UserEvent[E]>;
+export interface ActionOptions<E extends EventType> {
+    target: string;
+    action: E;
+    params: ParamsOf<E>;
+}
+export default class StepAction<E extends EventType> extends AbstractStep<ActionOptions<E>> {
+    protected run(): Promise<void>;
+}
+export {};

package/dist/components/tour/core/step/action.mjs

@@ -0,0 +1,14 @@
+import { AbstractStep } from "../step.mjs";
+import { waitElement } from "../../utils/wait-element.mjs";
+export default class StepAction extends AbstractStep {
+  async run() {
+    const options = this.getOptions();
+    const { default: userEvent } = await import("@testing-library/user-event");
+    const target = await waitElement(options.target, options.waitTimeout);
+    const user = userEvent.setup({ document });
+    const action = options.action;
+    const params = options.params ?? [];
+    await user[action].apply(void 0, [target, ...params]);
+    await this.ahead();
+  }
+}

package/dist/components/tour/core/step/conditional.d.ts

@@ -0,0 +1,25 @@
+import type { MaybeRef } from '@vueuse/shared';
+import { AbstractStep } from '../step';
+import type { Tour } from '../tour';
+export interface ConditionalOptions {
+    condition: MaybeRef<boolean | (() => boolean | Promise<boolean>)>;
+    tour: Tour;
+}
+export declare enum ConditionalType {
+    IF = 1,
+    ELSE_IF = 2,
+    ELSE = 3
+}
+interface Routine extends ConditionalOptions {
+    type: ConditionalType;
+}
+export default class StepCondition extends AbstractStep<ConditionalOptions> {
+    protected routines: Routine[];
+    constructor(options: ConditionalOptions);
+    canChain(): boolean;
+    chain(routine: Routine): this;
+    getTotalChild(): number;
+    getRoutines(): Routine[];
+    protected run(): Promise<void>;
+}
+export {};

package/dist/components/tour/core/step/conditional.mjs

@@ -0,0 +1,57 @@
+import { unref } from "vue";
+import { AbstractStep } from "../step.mjs";
+export var ConditionalType = /* @__PURE__ */ ((ConditionalType2) => {
+  ConditionalType2[ConditionalType2["IF"] = 1] = "IF";
+  ConditionalType2[ConditionalType2["ELSE_IF"] = 2] = "ELSE_IF";
+  ConditionalType2[ConditionalType2["ELSE"] = 3] = "ELSE";
+  return ConditionalType2;
+})(ConditionalType || {});
+export default class StepCondition extends AbstractStep {
+  routines;
+  constructor(options) {
+    super(options);
+    this.routines = [
+      {
+        type: 1 /* IF */,
+        condition: options.condition,
+        tour: options.tour
+      }
+    ];
+  }
+  canChain() {
+    return this.routines.at(-1).type !== 3 /* ELSE */;
+  }
+  chain(routine) {
+    this.routines.push(routine);
+    return this;
+  }
+  getTotalChild() {
+    return Math.max(...this.routines.map((routine) => routine.tour.getTotalChild()));
+  }
+  getRoutines() {
+    return this.routines;
+  }
+  async run() {
+    let result = false;
+    for (const routine of this.routines) {
+      const condition = unref(routine.condition);
+      try {
+        result = typeof condition === "function" ? await condition() : condition;
+      } catch (error) {
+        if (import.meta.env.DEV)
+          console.warn(error);
+        result = false;
+      }
+      if (result) {
+        const tour = routine.tour;
+        await tour.setParent(this.parent).setDirection(this.direction).start();
+        this.onCleanup(async () => {
+          await tour.stop();
+        });
+        break;
+      }
+    }
+    if (!result)
+      await this.ahead();
+  }
+}

package/dist/components/tour/core/step/delay.d.ts

@@ -0,0 +1,8 @@
+import { AbstractStep } from '../step';
+interface Options {
+    duration: number;
+}
+export default class StepDelay extends AbstractStep<Options> {
+    protected run(): Promise<void>;
+}
+export {};

package/dist/components/tour/core/step/delay.mjs

@@ -0,0 +1,9 @@
+import { delay } from "nanodelay";
+import { AbstractStep } from "../step.mjs";
+export default class StepDelay extends AbstractStep {
+  async run() {
+    const options = this.getOptions();
+    await delay(options.duration);
+    await this.ahead();
+  }
+}

package/dist/components/tour/core/step/dialog.d.ts

@@ -0,0 +1,11 @@
+import { AbstractStep } from '../step';
+export interface DialogOptions {
+    target: string;
+    title?: string;
+    text: string;
+    image?: string;
+}
+export default class StepDialog extends AbstractStep<DialogOptions> {
+    protected dismiss(): Promise<void>;
+    protected run(): Promise<void>;
+}

package/dist/components/tour/core/step/dialog.mjs

@@ -0,0 +1,25 @@
+import defu from "defu";
+import { removeSingleton, useSingleton } from "../../../global/use-singleton.mjs";
+import { AbstractStep } from "../step.mjs";
+import { waitElement } from "../../utils/wait-element.mjs";
+export default class StepDialog extends AbstractStep {
+  async dismiss() {
+    await this.parent.stop();
+  }
+  async run() {
+    const options = this.getOptions();
+    const { default: Tour } = await import("../../Tour.vue");
+    const tour = await useSingleton(Tour);
+    const target = await waitElement(options.target, options.waitTimeout);
+    tour.show(target, defu({
+      step: this.parent.getIndex() + 1,
+      totalStep: this.parent.getTotal(),
+      onNext: this.next.bind(this),
+      onPrev: this.prev.bind(this),
+      onDismiss: this.dismiss.bind(this)
+    }, options));
+    this.onCleanup(async () => {
+      await removeSingleton(Tour);
+    });
+  }
+}

package/dist/components/tour/core/step/visit.d.ts

@@ -0,0 +1,9 @@
+import { AbstractStep } from '../step';
+export interface VisitOptions {
+    url: string;
+    backUrl?: string;
+}
+export default class StepVisit extends AbstractStep<VisitOptions> {
+    protected lastURL: string;
+    protected run(): Promise<void>;
+}

package/dist/components/tour/core/step/visit.mjs

@@ -0,0 +1,15 @@
+import { useRouter } from "../../../global/router.mjs";
+import { TourDirection } from "../base.mjs";
+import { AbstractStep } from "../step.mjs";
+export default class StepVisit extends AbstractStep {
+  lastURL = "";
+  async run() {
+    const router = useRouter();
+    const options = this.getOptions();
+    const lastURL = this.lastURL;
+    const targetURL = this.direction === TourDirection.FORWARD ? options.url : options.backUrl ?? lastURL;
+    this.lastURL = router.getURL();
+    await router.toURL(targetURL);
+    await this.ahead();
+  }
+}

package/dist/components/tour/core/step.d.ts

@@ -0,0 +1,37 @@
+import { AbstractTour } from './base';
+import type { Tour, TourOptions } from './tour';
+type Merge<A, B> = Omit<A, keyof B> & B;
+type BaseOptions = Partial<Omit<TourOptions, 'onFinished'>>;
+export type OnCleanup = (cleanupFn: () => unknown) => unknown;
+export declare abstract class AbstractStep<Option> extends AbstractTour<Merge<BaseOptions, Option>> {
+    protected parent?: Tour;
+    protected cleanFns: Array<() => unknown>;
+    protected dispose(): Promise<PromiseSettledResult<unknown>[]>;
+    /**
+     * Run function before unmounted
+     * @param cleanFn clean function
+     */
+    protected onCleanup(cleanFn: () => unknown): void;
+    /**
+     * Start this step
+     */
+    start(): Promise<void>;
+    /**
+     * Stop this step
+     */
+    stop(): Promise<void>;
+    /**
+     * Trigger next to parent
+     */
+    next(): Promise<void>;
+    /**
+     * Trigger prev to parent
+     */
+    prev(): Promise<void>;
+    /**
+     * Trigger next or prev following the direction
+     */
+    ahead(): Promise<void>;
+    protected abstract run(): void | Promise<void>;
+}
+export {};

package/dist/components/tour/core/step.mjs

@@ -0,0 +1,46 @@
+import { AbstractTour, TourDirection } from "./base.mjs";
+export class AbstractStep extends AbstractTour {
+  cleanFns = [];
+  async dispose() {
+    return await Promise.allSettled(this.cleanFns.map((clean) => clean()));
+  }
+  /**
+   * Run function before unmounted
+   * @param cleanFn clean function
+   */
+  onCleanup(cleanFn) {
+    this.cleanFns.push(cleanFn);
+  }
+  /**
+   * Start this step
+   */
+  async start() {
+    this.attach(this.parent);
+    await this.run();
+  }
+  /**
+   * Stop this step
+   */
+  async stop() {
+    await this.dispose();
+    this.detach(this.parent);
+  }
+  /**
+   * Trigger next to parent
+   */
+  async next() {
+    await this.parent.next();
+  }
+  /**
+   * Trigger prev to parent
+   */
+  async prev() {
+    await this.parent.prev();
+  }
+  /**
+   * Trigger next or prev following the direction
+   */
+  async ahead() {
+    return await (this.direction === TourDirection.BACKWARD ? this.prev() : this.next());
+  }
+}

package/dist/components/tour/core/story.d.ts

@@ -0,0 +1,130 @@
+import { Tour } from './tour';
+import type { ConditionalOptions } from './step/conditional';
+import type { DialogOptions } from './step/dialog';
+import type { ActionOptions, EventType, ParamsOf } from './step/action';
+type TourBuilderCallback = (tour: TourStory) => unknown;
+/**
+ * Tour with additional function to build a tour stories
+ */
+export declare class TourStory extends Tour {
+    /**
+     * Show tour guide dialog
+     * @param options options
+     */
+    dialog(options: DialogOptions): this;
+    /**
+     * Show tour guide dialog
+     * @param target target querySelector
+     * @param text body text
+     * @param title title text
+     * @param image url image
+     */
+    dialog(target: string, text: string, title?: string, image?: string): this;
+    /**
+     * Delay or Wait, setTimout equivalent
+     * @param duration duration in milliseconds
+     */
+    delay(duration: number): this;
+    /**
+     * Trigger action to target element
+     * @param options ActionOptions
+     */
+    action<E extends EventType>(options: ActionOptions<E>): this;
+    /**
+     * Trigger action to target element
+     * @param target Target querySelector
+     * @param action Action name, ex: 'click', 'type'
+     * @param params Action parameters
+     */
+    action<E extends EventType>(target: string, action: E, ...params: ParamsOf<E>): this;
+    /**
+     * Trigger click to target element
+     * @param target Target querySelector
+     */
+    click(target: string): this;
+    /**
+     * Trigger double click to target element
+     * @param target Target querySelector
+     */
+    dblClick(target: string): this;
+    /**
+     * Trigger triple click to target element
+     * @param target Target querySelector
+     */
+    tripleClick(target: string): this;
+    /**
+     * Trigger hover to target element
+     * @param target Target querySelector
+     */
+    hover(target: string): this;
+    /**
+     * Trigger unhover (blur) to target element
+     * @param target Target querySelector
+     */
+    unhover(target: string): this;
+    /**
+     * Trigger blur (unhover) to target element
+     * @param target Target querySelector
+     */
+    blur(target: string): this;
+    /**
+     * Remotely typing target input
+     * @param target Target querySelector
+     */
+    type(target: string, text: string): this;
+    /**
+     * Clear input text
+     * @param target Target querySelector
+     */
+    clear(target: string): this;
+    /**
+     * Redirect to url
+     * @param url target url
+     * @param backUrl target url when back button clicked
+     */
+    visit(url: string, backUrl?: string): this;
+    /**
+     * Run steps only when condition meet, skip if not
+     * @param condition Ref or Function to check
+     * @param buildTour
+     * @example
+     * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+     *    return tour
+     *      .click('#mobile-only')
+     *      .dialog('#mobile-only', 'Hello World')
+     * })
+     */
+    runIf(condition: ConditionalOptions['condition'], buildTour: TourBuilderCallback): this;
+    /**
+     * Run else if, this must be used after runIf.
+     * @param condition
+     * @param buildTour
+     * @example
+     * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+     *    return tour
+     *      .click('#mobile-only')
+     *      .dialog('#mobile-only', 'Hello World')
+     * }).runElseIf(() => window.matchMedia("(max-width: 1000px), (tour) => {
+     *    return tour
+     *      .click('#tablet-only')
+     *      .dialog('#tablet-only', 'Hello World')*
+     * })
+     */
+    runElseIf(condition: ConditionalOptions['condition'], buildTour: TourBuilderCallback): this;
+    /**
+     * Run else condition, this must be used after runElse
+     * @param buildTour
+     * @example
+     * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+     *    return tour
+     *      .click('#mobile-only')
+     *      .dialog('#mobile-only', 'Hello World')
+     * }).runElse((tour) => {
+     *    return tour
+     *      .click('#not-mobile')
+     *      .dialog('#not-mobile', 'Hello World')*
+     * })
+     */
+    runElse(buildTour: TourBuilderCallback): this;
+}
+export {};

package/dist/components/tour/core/story.mjs

@@ -0,0 +1,166 @@
+import { Tour } from "./tour.mjs";
+import { isString } from "lodash-es";
+import StepDialog from "./step/dialog.mjs";
+import StepDelay from "./step/delay.mjs";
+import StepAction from "./step/action.mjs";
+import StepVisit from "./step/visit.mjs";
+import StepCondition, { ConditionalType } from "./step/conditional.mjs";
+export class TourStory extends Tour {
+  dialog(targetOrOption, text = "", title, image) {
+    return isString(targetOrOption) ? this.add(new StepDialog({
+      target: targetOrOption,
+      text,
+      title,
+      image
+    })) : this.add(new StepDialog(targetOrOption));
+  }
+  /**
+   * Delay or Wait, setTimout equivalent
+   * @param duration duration in milliseconds
+   */
+  delay(duration) {
+    return this.add(new StepDelay({ duration }));
+  }
+  action(targetOrOption, action, ...params) {
+    return isString(targetOrOption) ? this.add(new StepAction({
+      target: targetOrOption,
+      action,
+      params
+    })) : this.add(new StepAction(targetOrOption));
+  }
+  /**
+   * Trigger click to target element
+   * @param target Target querySelector
+   */
+  click(target) {
+    return this.action(target, "click");
+  }
+  /**
+   * Trigger double click to target element
+   * @param target Target querySelector
+   */
+  dblClick(target) {
+    return this.action(target, "dblClick");
+  }
+  /**
+   * Trigger triple click to target element
+   * @param target Target querySelector
+   */
+  tripleClick(target) {
+    return this.action(target, "tripleClick");
+  }
+  /**
+   * Trigger hover to target element
+   * @param target Target querySelector
+   */
+  hover(target) {
+    return this.action(target, "hover");
+  }
+  /**
+   * Trigger unhover (blur) to target element
+   * @param target Target querySelector
+   */
+  unhover(target) {
+    return this.action(target, "unhover");
+  }
+  /**
+   * Trigger blur (unhover) to target element
+   * @param target Target querySelector
+   */
+  blur(target) {
+    return this.unhover(target);
+  }
+  /**
+   * Remotely typing target input
+   * @param target Target querySelector
+   */
+  type(target, text) {
+    return this.action(target, "type", text);
+  }
+  /**
+   * Clear input text
+   * @param target Target querySelector
+   */
+  clear(target) {
+    return this.action(target, "clear");
+  }
+  /**
+   * Redirect to url
+   * @param url target url
+   * @param backUrl target url when back button clicked
+   */
+  visit(url, backUrl) {
+    return this.add(new StepVisit({ url, backUrl }));
+  }
+  /**
+   * Run steps only when condition meet, skip if not
+   * @param condition Ref or Function to check
+   * @param buildTour
+   * @example
+   * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+   *    return tour
+   *      .click('#mobile-only')
+   *      .dialog('#mobile-only', 'Hello World')
+   * })
+   */
+  runIf(condition, buildTour) {
+    const tour = new TourStory();
+    return this.add(new StepCondition({
+      condition,
+      tour: buildTour(tour) ?? tour
+    }));
+  }
+  /**
+   * Run else if, this must be used after runIf.
+   * @param condition
+   * @param buildTour
+   * @example
+   * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+   *    return tour
+   *      .click('#mobile-only')
+   *      .dialog('#mobile-only', 'Hello World')
+   * }).runElseIf(() => window.matchMedia("(max-width: 1000px), (tour) => {
+   *    return tour
+   *      .click('#tablet-only')
+   *      .dialog('#tablet-only', 'Hello World')*
+   * })
+   */
+  runElseIf(condition, buildTour) {
+    const step = this.steps.at(-1);
+    if (!(step instanceof StepCondition) || !step.canChain())
+      throw new Error(".runElseIf only can be use after .runIf or .runElseIf");
+    const tour = new TourStory();
+    step.chain({
+      type: ConditionalType.ELSE_IF,
+      condition,
+      tour: buildTour(tour) ?? tour
+    });
+    return this;
+  }
+  /**
+   * Run else condition, this must be used after runElse
+   * @param buildTour
+   * @example
+   * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+   *    return tour
+   *      .click('#mobile-only')
+   *      .dialog('#mobile-only', 'Hello World')
+   * }).runElse((tour) => {
+   *    return tour
+   *      .click('#not-mobile')
+   *      .dialog('#not-mobile', 'Hello World')*
+   * })
+   */
+  runElse(buildTour) {
+    const step = this.steps.at(-1);
+    if (!(step instanceof StepCondition) || !step.canChain())
+      throw new Error(".runElse only can be use after .runIf or .runElseIf");
+    const tour = new TourStory();
+    step.chain({
+      type: ConditionalType.ELSE,
+      condition: true,
+      tour: buildTour(tour) ?? tour
+    });
+    return this;
+  }
+}