siteguide.js 0.5.1 → 0.6.0

package/dist/css/siteguide.css

@@ -1 +1 @@
-:root{--sg-bg: var(--sg-mono-100);--sg-text: var(--sg-mono-900);--sg-line: var(--sg-mono-500);--primary: #2e62d9;--primary-hover: #2ca2fd;--secondary: #2ca2fd;--secondary-hover: #2ca2fd;--sg-mono-900: #101828;--sg-mono-800: #4c525e;--sg-mono-700: #7c8089;--sg-mono-600: #acaeb5;--sg-mono-500: #d5d6d9;--sg-mono-400: #e6e7e8;--sg-mono-300: #f4f4f5;--sg-mono-200: #f9f9fa;--sg-mono-100: #fff;--padding-s: 8px;--padding-m: 12px;--padding-l: 16px;--padding-2l: 20px;--sg-text-m: 16px;--sg-text-l: 18px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.siteguide{color:var(--sg-text);box-sizing:border-box;font-family:Inter,sans-serif;font-size:var(--sg-text-m);width:280px;min-height:150px;background-color:var(--sg-bg);border-radius:8px;border:1px solid var(--sg-line);display:flex;flex-direction:column;position:absolute;box-shadow:0 10px 10px #0001;z-index:1000001;max-height:400px}.siteguide-animation{animation:fadeIn .3s ease-out}.siteguide-arrow{position:absolute;width:10px;height:10px;background-color:var(--sg-bg)}.siteguide-highlight{box-shadow:0 0 #212121cc,0 0 0 5000px #21212180;border:2px solid var(--sg-mono-900);border-radius:4px;opacity:1;z-index:1000000;position:absolute;transition:all .3s ease-out;pointer-events:none}.siteguide-header{display:flex;align-items:center;width:100%;padding:var(--padding-m) var(--padding-2l) 0}.siteguide-content{width:100%;padding:var(--padding-m) var(--padding-2l);overflow-y:auto}.siteguide-content::-webkit-scrollbar{width:4px}.siteguide-content::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:4px}.siteguide-title{display:block;font-size:var(--sg-text-l);font-weight:800;color:var(--sg-text)}.siteguide-image{width:100%;height:auto;border-radius:4px;object-fit:cover;margin-bottom:var(--padding-m)}.siteguide-description{font-size:14px;font-weight:400;color:var(--sg-text)}.siteguide-footer{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--padding-m);border-top:1px solid var(--sg-line);gap:var(--padding-l);margin-top:auto}.siteguide-button{padding:var(--padding-s) var(--padding-l);border-radius:4px;cursor:pointer;font-size:14px;line-height:20px;transition:background-color .3s ease-out;color:var(--sg-mono-100)}.siteguide-button-secondary{background-color:var(--secondary)}.siteguide-button-secondary:hover{background-color:var(--secondary-hover)}.siteguide-button-primary{background-color:var(--primary)}.siteguide-button-primary:hover{background-color:var(--primary-hover)}.siteguide-button-link{color:var(--primary);background-color:transparent;cursor:pointer;transition:color .3s ease-out}.siteguide-button-link:hover{color:var(--primary-hover)}.siteguide-close{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:4px;cursor:pointer;position:absolute;top:10px;right:10px;transition:background-color .3s ease-out}.siteguide-close:hover{background-color:var(--secondary-hover);color:#fff}.siteguide-close-icon{height:10px}
+:root{--sg-bg: var(--sg-mono-100);--sg-text: var(--sg-mono-900);--sg-line: var(--sg-mono-500);--primary: #2e62d9;--primary-hover: #2ca2fd;--secondary: #2ca2fd;--secondary-hover: #2ca2fd;--sg-mono-900: #101828;--sg-mono-800: #4c525e;--sg-mono-700: #7c8089;--sg-mono-600: #acaeb5;--sg-mono-500: #d5d6d9;--sg-mono-400: #e6e7e8;--sg-mono-300: #f4f4f5;--sg-mono-200: #f9f9fa;--sg-mono-100: #fff;--padding-s: 8px;--padding-m: 12px;--padding-l: 16px;--padding-2l: 20px;--sg-text-m: 16px;--sg-text-l: 18px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.siteguide{color:var(--sg-text);box-sizing:border-box;font-family:Inter,sans-serif;font-size:var(--sg-text-m);width:280px;min-height:150px;background-color:var(--sg-bg);border-radius:8px;border:1px solid var(--sg-line);display:flex;flex-direction:column;position:absolute;box-shadow:0 10px 10px #0001;z-index:1000001;max-height:400px}.siteguide-animation{animation:fadeIn .3s ease-out}.siteguide-arrow{position:absolute;width:10px;height:10px;background-color:inherit}.siteguide-highlight{box-shadow:0 0 #212121cc,0 0 0 5000px #21212180;border:2px solid var(--sg-mono-900);border-radius:4px;opacity:1;z-index:1000000;position:absolute;transition:all .3s ease-out;pointer-events:none}.siteguide-header{display:flex;align-items:center;width:100%;padding:var(--padding-m) var(--padding-2l) 0;font-family:inherit}.siteguide-content{width:100%;padding:var(--padding-m) var(--padding-2l);overflow-y:auto;font-family:inherit}.siteguide-content::-webkit-scrollbar{width:4px}.siteguide-content::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:4px}.siteguide-title{display:block;font-size:var(--sg-text-l);font-weight:800;color:var(--sg-text);font-family:inherit}.siteguide-image{width:100%;height:auto;border-radius:4px;object-fit:cover;margin-bottom:var(--padding-m)}.siteguide-description{font-size:14px;font-weight:400;color:var(--sg-text);font-family:inherit}.siteguide-footer{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--padding-m);border-top:1px solid var(--sg-line);gap:var(--padding-l);margin-top:auto}.siteguide-button{padding:var(--padding-s) var(--padding-l);border-radius:4px;cursor:pointer;font-size:14px;line-height:20px;transition:background-color .3s ease-out;color:var(--sg-mono-100);border:none;font-family:inherit}.siteguide-button-secondary{background-color:var(--secondary)}.siteguide-button-secondary:hover{background-color:var(--secondary-hover)}.siteguide-button-primary{background-color:var(--primary)}.siteguide-button-primary:hover{background-color:var(--primary-hover)}.siteguide-button-link{color:var(--primary);background-color:transparent;cursor:pointer;transition:color .3s ease-out}.siteguide-button-link:hover{color:var(--primary-hover)}.siteguide-close{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:4px;cursor:pointer;position:absolute;top:10px;right:10px;transition:background-color .3s ease-out}.siteguide-close:hover{background-color:var(--secondary-hover);color:#fff}.siteguide-close-icon{height:10px}

package/dist/index.d.ts

@@ -21,38 +21,13 @@ export declare type CustomPopupData = SharedPopupData & {
     node: HTMLElement;
 };
 
-/**
- * Represents the data for a custom popup
- */
-declare type CustomPopupData_2 = SharedPopupData_2 & {
-    /**
-     * The type of the popup
-     */
-    type: Extract<PopupType_2, 'custom'>;
-    /**
-     * The HTML element to use as the content of the custom popup
-     */
-    node: HTMLElement;
-};
-
 /**
  * Represents a deep required type, ensuring all properties of an object are required and recursively applies to nested objects
  * @template T The type to make deep required
  * @returns A type that represents a deep required version of T
  */
-declare type DeepRequired<T> = T extends (...args: any[]) => any
-? T
-: T extends object
-? { [K in keyof T]-?: DeepRequired<T[K]> }
-: T;
-
-/**
- * Represents a deep required type, ensuring all properties of an object are required and recursively applies to nested objects
- * @template T The type to make deep required
- * @returns A type that represents a deep required version of T
- */
-declare type DeepRequired_2<T> = T extends (...args: any[]) => any ? T : T extends object ? {
-    [K in keyof T]-?: DeepRequired_2<T[K]>;
+declare type DeepRequired<T> = T extends (...args: any[]) => any ? T : T extends object ? {
+    [K in keyof T]-?: DeepRequired<T[K]>;
 } : T;
 
 /**
@@ -64,114 +39,17 @@ declare interface IRenderer {
      * @param {HTMLElement} popup - The popup element to render content into
      * @param {TourStep} step - The tour step for which to render the popup content
      */
-    render(popup: HTMLElement, step: ITourStep): Promise<void>;
-
+    render(popup: HTMLElement, step: TourStep): Promise<void>;
     /**
      * Updates the position of the popup based on the step's host element
      * @param {HTMLElement} popup - The popup element to update the position for
      * @param {TourStep} step - The tour step that the popup is associated with
      */
-    updatePosition(popup: HTMLElement, step: ITourStep): void;
-}
-
-/**
- * Interface for rendering element
- */
-declare interface IRenderer_2 {
-    /**
-     * Renders the popup for a given step
-     * @param {HTMLElement} popup - The popup element to render content into
-     * @param {TourStep} step - The tour step for which to render the popup content
-     */
-    render(popup: HTMLElement, step: ITourStep_2): Promise<void>;
-    /**
-     * Updates the position of the popup based on the step's host element
-     * @param {HTMLElement} popup - The popup element to update the position for
-     * @param {TourStep} step - The tour step that the popup is associated with
-     */
-    updatePosition(popup: HTMLElement, step: ITourStep_2): void;
-}
-
-/**
- * @deprecated need to rethink
- * Made for resolving circular dependencies
- */
-declare interface ITour {
-    get stepList(): readonly ITourStep[];
-    get config(): RequiredTourConfig;
-    get popup(): HTMLElement | null;
-    get highlight(): HTMLElement | null;
-    get popupRenderer(): IRenderer;
-    get highlightRenderer(): IRenderer;
-    addStep(config: TourStepConfig_2): void;
-    addSteps(steps: TourStepConfig_2[]): void;
-    removeStep(stepId: StepId): void;
-    start(): void;
-    complete(): void;
-    prev(): void;
-    next(): void;
-}
-
-/**
- * @deprecated need to rethink
- * Made for resolving circular dependencies
- */
-declare interface ITour_2 {
-    get stepList(): readonly ITourStep_2[];
-    get config(): RequiredTourConfig_2;
-    get popup(): HTMLElement | null;
-    get highlight(): HTMLElement | null;
-    get popupRenderer(): IRenderer;
-    get highlightRenderer(): IRenderer;
-    addStep(config: TourStepConfig): void;
-    addSteps(steps: TourStepConfig[]): void;
-    removeStep(stepId: StepId_2): void;
-    start(): void;
-    complete(): void;
-    prev(): void;
-    next(): void;
-}
-
-/**
- * @deprecated need to rethink
- * Made for resolving circular dependencies
- */
-declare interface ITourStep {
-    get direction(): StepDirection;
-    get isFirst(): boolean;
-    get nextStep(): ITourStep | null;
-    get prevStep(): ITourStep | null;
-    get hasHost(): boolean;
-    get hostElement(): HTMLElement | null;
-    readonly id: StepId;
-    readonly popupData: PopupData_2;
-    readonly tour: ITour;
-    readonly index: number | null;
-    show(direction: StepDirection): Promise<void>;
-}
-
-/**
- * @deprecated need to rethink
- * Made for resolving circular dependencies
- */
-declare interface ITourStep_2 {
-    get direction(): StepDirection_2;
-    get isFirst(): boolean;
-    get nextStep(): ITourStep_2 | null;
-    get prevStep(): ITourStep_2 | null;
-    get hasHost(): boolean;
-    get hostElement(): HTMLElement | null;
-    readonly id: StepId_2;
-    readonly popupData: PopupData_2;
-    readonly tour: ITour_2;
-    readonly index: number | null;
-    show(direction: StepDirection_2): Promise<void>;
+    updatePosition(popup: HTMLElement, step: TourStep): void;
 }
 
 export declare type PopupCloseIconElement = InnerHTML | HTMLElement;
 
-declare type PopupCloseIconElement_2 = InnerHTML | HTMLElement;
-
 /**
  * Represents the customization options for a popup
  */
@@ -210,54 +88,11 @@ export declare type PopupCustomization = {
     imageClass?: string;
 };
 
-/**
- * Represents the customization options for a popup
- */
-declare type PopupCustomization_2 = {
-    /**
-     * The CSS class to apply to the popup container
-     */
-    class?: string;
-    /**
-     * The CSS class to apply to the popup header
-     */
-    headerClass?: string;
-    /**
-     * The CSS class to apply to the popup title
-     */
-    titleClass?: string;
-    /**
-     * The CSS class to apply to the popup close button
-     */
-    closeButtonClass?: string;
-    /**
-     * The CSS class to apply to the popup content
-     */
-    contentClass?: string;
-    /**
-     * The CSS class to apply to the popup description
-     */
-    descriptionClass?: string;
-    /**
-     * The CSS class to apply to the popup footer
-     */
-    footerClass?: string;
-    /**
-     * The CSS class to apply to the popup image
-     */
-    imageClass?: string;
-};
-
 /**
  * Represents the data for a popup
  */
 export declare type PopupData = TextPopupData | CustomPopupData;
 
-/**
- * Represents the data for a popup
- */
-declare type PopupData_2 = TextPopupData_2 | CustomPopupData_2;
-
 /**
  * Represents the host of a tour step. It can be a string, an HTMLElement, or a function that returns either an HTMLElement or a string.
  * @example
@@ -275,67 +110,21 @@ declare type PopupData_2 = TextPopupData_2 | CustomPopupData_2;
  */
 export declare type PopupHost = string | Element | (() => Element | string);
 
-/**
- * Represents the host of a tour step. It can be a string, an HTMLElement, or a function that returns either an HTMLElement or a string.
- * @example
- * // Example 1: Class as host
- * { host: '.example-element' }
- * @example
- * // Example 2: HTMLElement as host
- * { host: document.querySelector('.example-element') }
- * @example
- * // Example 3: Function returning HTMLElement as host
- * { host: () => document.querySelector('.example-element') };
- * @example
- * // Example 4: Function returning string as host
- * { host: () => '.example-element' };
- */
-declare type PopupHost_2 = string | Element | (() => Element | string);
-
 /**
  * The position of a popup
  */
 export declare type PopupPosition = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
 
-/**
- * The position of a popup
- */
-declare type PopupPosition_2 =
-| 'auto'
-| 'top'
-| 'bottom'
-| 'left'
-| 'right'
-| 'top-end'
-| 'top-start'
-| 'bottom-end'
-| 'bottom-start'
-| 'left-end'
-| 'left-start'
-| 'right-end'
-| 'right-start';
-
 /**
  * The type of a popup
  */
 export declare type PopupType = 'text' | 'custom';
 
-/**
- * The type of a popup
- */
-declare type PopupType_2 = 'text' | 'custom';
-
 /**
  * Represents a required tour configuration.
  * This type ensures all properties of the TourConfig are required.
  */
-declare type RequiredTourConfig = DeepRequired<TourConfig_2>;
-
-/**
- * Represents a required tour configuration.
- * This type ensures all properties of the TourConfig are required.
- */
-declare type RequiredTourConfig_2 = DeepRequired_2<TourConfig>;
+declare type RequiredTourConfig = DeepRequired<TourConfig>;
 
 /**
  * Represents the shared data for a popup, including title, position, customization, and button collection.
@@ -362,39 +151,13 @@ export declare type SharedPopupData = {
     buttonList?: TourButtonConfig[];
 };
 
-/**
- * Represents the shared data for a popup, including title, position, customization, and button collection.
- */
-declare type SharedPopupData_2 = {
-    /**
-     * The title of the popup
-     */
-    title?: string;
-    /**
-     * The position of the popup
-     * @default 'auto'
-     */
-    position?: PopupPosition_2;
-    /**
-     * Customization options for the popup
-     *
-     * Each step-popup can have own styles by providing it's own classes
-     */
-    customization?: PopupCustomization_2;
-    /**
-     * A collection of button configurations for the popup
-     */
-    buttonList?: TourButtonConfig_2[];
+export declare const Siteguide: {
+    readonly isActive: boolean;
+    readonly activeTour: Tour | null;
 };
 
 declare type StepDirection = 'toNext' | 'fromBack';
 
-declare type StepDirection_2 = 'toNext' | 'fromBack';
-
-declare type StepId = string;
-
-declare type StepId_2 = string;
-
 /**
  * Represents the data for a text popup
  */
@@ -413,42 +176,25 @@ export declare type TextPopupData = SharedPopupData & {
     imgSrc?: string;
 };
 
-/**
- * Represents the data for a text popup
- */
-declare type TextPopupData_2 = SharedPopupData_2 & {
-    /**
-     * The type of the popup
-     */
-    type: Extract<PopupType_2, 'text'>;
-    /**
-     * The text to display in the popup
-     */
-    text?: string;
-    /**
-     * The source of the image to display in the popup
-     */
-    imgSrc?: string;
-};
-
-export declare class Tour implements ITour {
-    get stepList(): readonly ITourStep[];
-    get config(): RequiredTourConfig_2;
+export declare class Tour {
+    get stepList(): readonly TourStep[];
+    get config(): RequiredTourConfig;
     get popup(): HTMLElement | null;
     get highlight(): HTMLElement | null;
-    readonly popupRenderer: IRenderer_2;
-    readonly highlightRenderer: IRenderer_2;
+    get activeStep(): TourStep | null;
+    readonly popupRenderer: IRenderer;
+    readonly highlightRenderer: IRenderer;
     private _popup;
     private _highlight;
     private _stepList;
     private _activeStep;
     private _bodyResizeObserver;
     private _config;
-    private readonly _stepMap;
     constructor(config: TourConfig);
     addStep(config: TourStepConfig): void;
     addSteps(steps: TourStepConfig[]): void;
-    removeStep(stepId: StepId_2): void;
+    addNext(config: TourStepConfig): void;
+    removeStep(index: number): void;
     start(): void;
     complete(): void;
     prev(): void;
@@ -480,39 +226,11 @@ export declare type TourButtonConfig = {
     action: (() => void) | (() => Promise<void>);
 };
 
-/**
- * Represents the configuration for a button
- */
-declare type TourButtonConfig_2 = {
-    /**
-     * The text to display on the button
-     */
-    text: string;
-    /**
-     * The type of the button, which can be 'primary' or 'secondary'
-     */
-    type?: TourButtonType_2;
-    /**
-     * Additional CSS class to apply to the button
-     */
-    class?: string;
-    /**
-     * The action to perform when the button is clicked.
-     * This can be a function that returns void or a Promise that resolves to void
-     */
-    action: (() => void) | (() => Promise<void>);
-};
-
 /**
  * Type of a button
  */
 export declare type TourButtonType = 'primary' | 'secondary' | 'link';
 
-/**
- * Type of a button
- */
-declare type TourButtonType_2 = 'primary' | 'secondary' | 'link';
-
 /**
  * Represents the configuration for a tour.
  */
@@ -524,6 +242,11 @@ export declare type TourConfig = {
      * @default 'siteguide'
      */
     classPrefix?: string;
+    /**
+     * Additional class to provide for popup
+     * @default ''
+     */
+    class?: string;
     /**
      * Indicates if the tour popup can be closed by the user
      * @default true
@@ -545,77 +268,20 @@ export declare type TourConfig = {
      */
     closeIcon?: PopupCloseIconElement;
     /**
-     * Indicates if the arrow should be shown
-     * @default false
-     */
-    disableArrow?: boolean;
-    /**
-     * Configuration for the helper layout.
+     * Arrow configuration
      */
-    highlight?: {
+    arrow?: {
         /**
-         * Indicates if the helper layout should be disabled
+         * Indicates if the arrow should be shown
          * @default false
          */
         disable?: boolean;
         /**
-         * The horizontal padding for the helper layout.
-         * @default 8
-         */
-        padding?: number;
-        /**
-         * The class to apply to the highlight
-         * @default 'siteguide-highlight'
+         * Additional class to apply to the arrow
+         * @default ''
          */
         class?: string;
     };
-    /**
-     * The class to apply to the tour popup animation
-     * @default 'siteguide-animation'
-     */
-    animationClass?: string;
-    /**
-     * The function to translate the tokens
-     */
-    translateFn?: TranslateFn_2;
-};
-
-/**
- * Represents the configuration for a tour.
- */
-declare type TourConfig_2 = {
-    /**
-     * The prefix for the CSS classes used in the tour
-     * Overriding this prefix will replace all 'siteguide-' prefixes with '{classPrefix}-'
-     * This option allows to easily replace all classes for customizing popup html
-     * @default 'siteguide'
-     */
-    classPrefix?: string;
-    /**
-     * Indicates if the tour popup can be closed by the user
-     * @default true
-     */
-    allowClose?: boolean;
-    /**
-     * Indicates if the tour popup can be closed by clicking outside the popup
-     * @default true
-     */
-    allowClickoutClose?: boolean;
-    /**
-     * Specifies if the tour should scroll to the current step and how to scroll
-     * Can be a boolean to enable or disable scrolling, or an object with options for scrollIntoView
-     * @default {behavior:'smooth',block:'center',inline:'center'}
-     */
-    scrollTo?: boolean | ScrollIntoViewOptions;
-    /**
-     * The element or HTML to use as the close icon
-     */
-    closeIcon?: PopupCloseIconElement_2;
-    /**
-     * Indicates if the arrow should be shown
-     * @default false
-     */
-    disableArrow?: boolean;
     /**
      * Configuration for the helper layout.
      */
@@ -631,12 +297,11 @@ declare type TourConfig_2 = {
          */
         padding?: number;
         /**
-         * The class to apply to the highlight
-         * @default 'siteguide-highlight'
+         * Additional class to apply to the highlight
+         * @default ''
          */
         class?: string;
     };
-
     /**
      * The class to apply to the tour popup animation
      * @default 'siteguide-animation'
@@ -648,24 +313,25 @@ declare type TourConfig_2 = {
     translateFn?: TranslateFn;
 };
 
-export declare class TourStep implements ITourStep_2 {
+export declare class TourStep {
     get isFirst(): boolean;
-    get nextStep(): ITourStep_2 | null;
-    get prevStep(): ITourStep_2 | null;
-    get direction(): StepDirection_2;
+    get nextStep(): TourStep | null;
+    get prevStep(): TourStep | null;
+    get direction(): StepDirection;
     get hasHost(): boolean;
     get hostElement(): HTMLElement | null;
-    readonly id: StepId_2;
+    get index(): number | null;
+    set index(value: number);
     readonly popupData: PopupData;
-    readonly tour: ITour_2;
-    readonly index: number | null;
+    readonly tour: Tour;
+    private _index;
     private _hostElement;
     private _direction;
     private readonly _hostData;
     private readonly _popupRenderer;
     private readonly _highlightRenderer;
-    constructor(tour: ITour_2, config: TourStepConfig);
-    show(direction: StepDirection_2): Promise<void>;
+    constructor(tour: Tour, config: TourStepConfig);
+    show(direction: StepDirection): Promise<void>;
     private resolveHostElement;
 }
 
@@ -673,10 +339,6 @@ export declare class TourStep implements ITourStep_2 {
  * Represents the configuration for a single step in a tour
  */
 export declare type TourStepConfig = {
-    /**
-     * The unique identifier for the tour step.
-     */
-    id: StepId_2;
     /**
      * The index of the step in the tour
      */
@@ -691,28 +353,6 @@ export declare type TourStepConfig = {
     popup: PopupData;
 };
 
-/**
- * Represents the configuration for a single step in a tour
- */
-declare type TourStepConfig_2 = {
-    /**
-     * The unique identifier for the tour step.
-     */
-    id: StepId;
-    /**
-     * The index of the step in the tour
-     */
-    index?: number;
-    /**
-     * The host element or a function that returns the host element for the tour step
-     */
-    host?: PopupHost_2;
-    /**
-     * The popup data for the tour step
-     */
-    popup: PopupData_2;
-};
-
 /**
  * The function to translate the tokens
  * @param {string} token - The token to translate
@@ -720,11 +360,4 @@ declare type TourStepConfig_2 = {
  */
 declare type TranslateFn = (token: string) => string;
 
-/**
- * The function to translate the tokens
- * @param {string} token - The token to translate
- * @returns {string} The translated string
- */
-declare type TranslateFn_2 = (token: string) => string;
-
 export { }