@privyid/persona 0.3.0 → 0.5.0

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

@@ -0,0 +1,59 @@
+import { Hook } from '../../steps/utils/hook';
+export declare type TourActionHook = (to: AbstractTour, from: AbstractTour) => boolean | Promise<boolean>;
+export declare enum TourDirection {
+    FORWARD = 1,
+    BACKWARD = -1
+}
+export interface BaseTourOptions {
+    /**
+     * Uniq identifier, can be string or symbol
+     * use for edit and remove
+     */
+    name?: string | symbol;
+    /**
+     * on-before-prev hook
+     */
+    onBeforePrev?: TourActionHook;
+    /**
+      * on-before-next hook
+      */
+    onBeforeNext?: TourActionHook;
+}
+export declare abstract class AbstractTour<Options extends BaseTourOptions = BaseTourOptions> {
+    name?: string | symbol;
+    /**
+     * Step direction, 1 for forward (next), -1 for backward (prev)
+     */
+    protected direction: TourDirection;
+    protected parent?: AbstractTour;
+    protected options: Options;
+    protected onNextHooks: Hook<TourActionHook>;
+    protected onPrevHooks: Hook<TourActionHook>;
+    protected runOnPrevHooks: TourActionHook;
+    protected runOnNextHooks: TourActionHook;
+    constructor(options?: Options);
+    setParent(parent: AbstractTour): this;
+    /**
+     * Get options with parent options as fallback
+     */
+    getOptions(): Options;
+    /**
+     * Set tour direction
+     * @param direction 1 for forward (next) and -1 for backward (prev)
+     */
+    setDirection(direction: TourDirection): this;
+    /**
+     * Attach to parent
+     * @param parent Parent Instance
+     */
+    attach(parent: AbstractTour): this;
+    /**
+     * Deattach from parent
+     * @param parent Parent Instance
+     */
+    detach(parent: AbstractTour): this;
+    abstract start(): void | Promise<void>;
+    abstract stop(): void | Promise<void>;
+    abstract next(): void | Promise<void>;
+    abstract prev(): void | Promise<void>;
+}

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

@@ -0,0 +1,43 @@
+import defu from "defu";
+import { Hook } from "../../steps/utils/hook.mjs";
+export var TourDirection = /* @__PURE__ */ ((TourDirection2) => {
+  TourDirection2[TourDirection2["FORWARD"] = 1] = "FORWARD";
+  TourDirection2[TourDirection2["BACKWARD"] = -1] = "BACKWARD";
+  return TourDirection2;
+})(TourDirection || {});
+export class AbstractTour {
+  constructor(options) {
+    this.direction = 1 /* FORWARD */;
+    this.name = options?.name ?? Symbol("TourID");
+    this.options = options;
+    this.onPrevHooks = new Hook();
+    this.onNextHooks = new Hook();
+    if (typeof options?.onBeforePrev === "function")
+      this.onPrevHooks.add(options.onBeforePrev);
+    if (typeof options?.onBeforeNext === "function")
+      this.onNextHooks.add(options.onBeforeNext);
+    this.runOnPrevHooks = async (...args) => await this.onPrevHooks.run(...args);
+    this.runOnNextHooks = async (...args) => await this.onNextHooks.run(...args);
+  }
+  setParent(parent) {
+    this.parent = parent;
+    return this;
+  }
+  getOptions() {
+    return defu(this.options, this.parent?.getOptions());
+  }
+  setDirection(direction) {
+    this.direction = direction;
+    return this;
+  }
+  attach(parent) {
+    parent.onPrevHooks.add(this.runOnPrevHooks);
+    parent.onNextHooks.add(this.runOnNextHooks);
+    return this;
+  }
+  detach(parent) {
+    parent.onPrevHooks.remove(this.runOnPrevHooks);
+    parent.onNextHooks.remove(this.runOnNextHooks);
+    return this;
+  }
+}

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

@@ -0,0 +1,15 @@
+import userEvent from '@testing-library/user-event';
+import { AbstractStep } from '../step';
+declare type UserEvent = ReturnType<typeof userEvent['setup']>;
+declare type ExtractParams<F> = F extends (T: Element, ...args: infer P) => Promise<void> ? P : unknown[];
+export declare type EventType = 'click' | 'dblClick' | 'tripleClick' | 'type' | 'hover' | 'unhover' | 'clear';
+export declare 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 userEvent from "@testing-library/user-event";
+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 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,26 @@
+import { MaybeRef } from '@vueuse/shared';
+import { AbstractStep } from '../step';
+import { 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);
+    protected checkCondition(): Promise<boolean>;
+    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,69 @@
+import { unref } from "vue-demi";
+import { TourDirection } from "../base.mjs";
+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 {
+  constructor(options) {
+    super(options);
+    this.routines = [
+      {
+        type: 1 /* IF */,
+        condition: options.condition,
+        tour: options.tour
+      }
+    ];
+  }
+  async checkCondition() {
+    try {
+      const options = this.getOptions();
+      const condition = unref(options.condition);
+      return typeof condition === "function" ? await condition() : condition;
+    } catch (error) {
+      if (import.meta.env.DEV)
+        console.warn(error);
+      return false;
+    }
+  }
+  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;
+        const index = this.direction === TourDirection.BACKWARD ? tour.getSteps().length - 1 : 0;
+        await tour.setParent(this.parent).start(index, this.direction);
+        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,18 @@
+import { useRouter } from "../../../global/router.mjs";
+import { TourDirection } from "../base.mjs";
+import { AbstractStep } from "../step.mjs";
+export default class StepVisit extends AbstractStep {
+  constructor() {
+    super(...arguments);
+    this.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';
+declare type Merge<A, B> = Omit<A, keyof B> & B;
+declare type BaseOptions = Partial<Omit<TourOptions, 'onFinished'>>;
+export declare 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,30 @@
+import { AbstractTour, TourDirection } from "./base.mjs";
+export class AbstractStep extends AbstractTour {
+  constructor() {
+    super(...arguments);
+    this.cleanFns = [];
+  }
+  async dispose() {
+    return await Promise.allSettled(this.cleanFns.map((clean) => clean()));
+  }
+  onCleanup(cleanFn) {
+    this.cleanFns.push(cleanFn);
+  }
+  async start() {
+    this.attach(this.parent);
+    await this.run();
+  }
+  async stop() {
+    await this.dispose();
+    this.detach(this.parent);
+  }
+  async next() {
+    await this.parent.next();
+  }
+  async prev() {
+    await this.parent.prev();
+  }
+  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';
+declare 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,85 @@
+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(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));
+  }
+  click(target) {
+    return this.action(target, "click");
+  }
+  dblClick(target) {
+    return this.action(target, "dblClick");
+  }
+  tripleClick(target) {
+    return this.action(target, "tripleClick");
+  }
+  hover(target) {
+    return this.action(target, "hover");
+  }
+  unhover(target) {
+    return this.action(target, "unhover");
+  }
+  blur(target) {
+    return this.unhover(target);
+  }
+  type(target, text) {
+    return this.action(target, "type", text);
+  }
+  clear(target) {
+    return this.action(target, "clear");
+  }
+  visit(url, backUrl) {
+    return this.add(new StepVisit({ url, backUrl }));
+  }
+  runIf(condition, buildTour) {
+    const tour = new TourStory();
+    return this.add(new StepCondition({
+      condition,
+      tour: buildTour(tour) ?? tour
+    }));
+  }
+  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;
+  }
+  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;
+  }
+}