@privyid/persona 1.2.0 → 1.2.1-rc.0

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

@@ -1,15 +0,0 @@
-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/visit.spec.d.ts

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

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

@@ -1,34 +0,0 @@
-import { installRouter, useRouter } from "../../../global/router.mjs";
-import { MockTour } from "../../__mocks__/tour.mjs";
-import StepVisit from "./visit.mjs";
-beforeEach(() => {
-  let page = "/page-1";
-  installRouter({
-    toURL(url) {
-      page = url;
-    },
-    getURL() {
-      return page;
-    }
-  });
-});
-it("should redirect to target url", async () => {
-  const parent = new MockTour();
-  const step = new StepVisit({ url: "/page-2" });
-  await step.setParent(parent).start();
-  expect(useRouter().getURL()).toBe("/page-2");
-});
-it("should redirect to backUrl if direction if backward", async () => {
-  const parent = new MockTour();
-  const step = new StepVisit({ url: "/page-2", backUrl: "/page-404" });
-  await step.setParent(parent).setDirection(-1).start();
-  expect(useRouter().getURL()).toBe("/page-404");
-});
-it("should redirect to last url if direction if backward and backURL not provided", async () => {
-  const parent = new MockTour();
-  const step = new StepVisit({ url: "/page-2" });
-  await step.setParent(parent).start();
-  await step.stop();
-  await step.setDirection(-1).start();
-  expect(useRouter().getURL()).toBe("/page-1");
-});

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

@@ -1,37 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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;
-  }
-}

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

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

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

@@ -1,249 +0,0 @@
-import { TourStory } from "./story.mjs";
-import StepAction from "./step/action.mjs";
-import StepDelay from "./step/delay.mjs";
-import StepDialog from "./step/dialog.mjs";
-import StepVisit from "./step/visit.mjs";
-import StepCondition from "./step/conditional.mjs";
-it("should able to add show step instance using `.dialog()`", () => {
-  const tour = new TourStory();
-  tour.dialog({ target: "#target", text: "Hello" });
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepDialog);
-  expect(option).toMatchObject({ target: "#target", text: "Hello" });
-});
-it("should able to add show step instance using `.dialog()` (shortcut)", () => {
-  const tour = new TourStory();
-  tour.dialog("#target", "This is text", "This is title", "http://image.com");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepDialog);
-  expect(option).toMatchObject({
-    target: "#target",
-    text: "This is text",
-    title: "This is title",
-    image: "http://image.com"
-  });
-});
-it("should able to add delay step using `.delay()`", () => {
-  const tour = new TourStory();
-  tour.delay(500);
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepDelay);
-  expect(option).toMatchObject({ duration: 500 });
-});
-it("should able to add action step using `.action()`", () => {
-  const tour = new TourStory();
-  tour.action({
-    target: "#target",
-    action: "type",
-    params: ["Hello World"]
-  });
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "type",
-    params: ["Hello World"]
-  });
-});
-it("should able to add action step using `.action()` (shorhcut)", () => {
-  const tour = new TourStory();
-  tour.action("#target", "type", "Hello World");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "type",
-    params: ["Hello World"]
-  });
-});
-it("should able to add action step type `click` using `.click()`", () => {
-  const tour = new TourStory();
-  tour.click("#target");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "click",
-    params: []
-  });
-});
-it("should able to add action step type `dblClick` using `.dblClick()`", () => {
-  const tour = new TourStory();
-  tour.dblClick("#target");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "dblClick",
-    params: []
-  });
-});
-it("should able to add action step type `tripleClick` using `.tripleClick()`", () => {
-  const tour = new TourStory();
-  tour.tripleClick("#target");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "tripleClick",
-    params: []
-  });
-});
-it("should able to add action step type `hover` using `.hover()`", () => {
-  const tour = new TourStory();
-  tour.hover("#target");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "hover",
-    params: []
-  });
-});
-it("should able to add action step type `unhover` using `.unhover()`", () => {
-  const tour = new TourStory();
-  tour.unhover("#target");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "unhover",
-    params: []
-  });
-});
-it("should able to add action step type `unhover` using `.blur()`", () => {
-  const tour = new TourStory();
-  tour.blur("#target");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "unhover",
-    params: []
-  });
-});
-it("should able to add action step type `type` using `.type()`", () => {
-  const tour = new TourStory();
-  tour.type("#target", "Hello Guys");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "type",
-    params: ["Hello Guys"]
-  });
-});
-it("should able to add action step type `clear` using `.clear()`", () => {
-  const tour = new TourStory();
-  tour.clear("#target");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepAction);
-  expect(option).toMatchObject({
-    target: "#target",
-    action: "clear",
-    params: []
-  });
-});
-it("should able to add action step type `visit` using `.visit()`", () => {
-  const tour = new TourStory();
-  tour.visit("/redirect-to");
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  expect(step).toBeInstanceOf(StepVisit);
-  expect(option).toMatchObject({ url: "/redirect-to" });
-});
-it("should able to add conditional step using `.runIf()`", () => {
-  const tour = new TourStory();
-  const condition = () => true;
-  tour.runIf(condition, (tour2) => {
-    tour2.dialog("#target", "message");
-  });
-  const step = tour.getSteps().at(0);
-  const option = step.getOptions();
-  const subStep = option.tour.getSteps().at(0);
-  const subOption = subStep.getOptions();
-  expect(step).toBeInstanceOf(StepCondition);
-  expect(option).toMatchObject({ condition });
-  expect(subStep).toBeInstanceOf(StepDialog);
-  expect(subOption).toMatchObject({ target: "#target", text: "message" });
-});
-it("should able to add else-if condition using `.runElseIf()`", () => {
-  const tour = new TourStory();
-  const condition = () => true;
-  const condition2 = () => false;
-  tour.runIf(condition, (tour2) => {
-    tour2.dialog("#target", "message");
-  }).runElseIf(condition2, (tour2) => {
-    tour2.dialog("#target-else-if", "message");
-  });
-  const step = tour.getSteps().at(0);
-  const option = step.getRoutines().at(-1);
-  const subStep = option.tour.getSteps().at(0);
-  const subOption = subStep.getOptions();
-  expect(step).toBeInstanceOf(StepCondition);
-  expect(option).toMatchObject({ condition: condition2 });
-  expect(subStep).toBeInstanceOf(StepDialog);
-  expect(subOption).toMatchObject({ target: "#target-else-if", text: "message" });
-});
-it("should able to add else condition using `.runElse()`", () => {
-  const tour = new TourStory();
-  const condition = () => true;
-  tour.runIf(condition, (tour2) => {
-    tour2.dialog("#target", "message");
-  }).runElse((tour2) => {
-    tour2.dialog("#target-else", "message");
-  });
-  const step = tour.getSteps().at(0);
-  const option = step.getRoutines().at(-1);
-  const subStep = option.tour.getSteps().at(0);
-  const subOption = subStep.getOptions();
-  expect(step).toBeInstanceOf(StepCondition);
-  expect(option).toMatchObject({ condition: true });
-  expect(subStep).toBeInstanceOf(StepDialog);
-  expect(subOption).toMatchObject({ target: "#target-else", text: "message" });
-});
-it("should thrown a error if called `.runElseIf` before `.runIf`", () => {
-  const tour = new TourStory();
-  expect(() => {
-    tour.runElseIf(true, (tour2) => {
-      tour2.dialog("#target", "message");
-    });
-  }).toThrowError(".runElseIf only can be use after .runIf or .runElseIf");
-});
-it("should thrown a error if called `.runElseIf` after `.runElse`", () => {
-  const tour = new TourStory();
-  expect(() => {
-    tour.runIf(true, (tour2) => tour2).runElse((tour2) => tour2).runElseIf(true, (tour2) => {
-      tour2.dialog("#target", "message");
-    });
-  }).toThrowError(".runElseIf only can be use after .runIf or .runElseIf");
-});
-it("should thrown a error if called `.runElse` before `.runIf`", () => {
-  const tour = new TourStory();
-  expect(() => {
-    tour.runElse((tour2) => {
-      tour2.dialog("#target", "message");
-    });
-  }).toThrowError(".runElse only can be use after .runIf or .runElseIf");
-});
-it("should thrown a error if called `.runElse` after `.runElse`", () => {
-  const tour = new TourStory();
-  expect(() => {
-    tour.runIf(true, (tour2) => tour2).runElse((tour2) => tour2).runElse((tour2) => {
-      tour2.dialog("#target", "message");
-    });
-  }).toThrowError(".runElse only can be use after .runIf or .runElseIf");
-});