@korsolutions/guidon 1.0.1 → 1.0.3

package/src/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "customConditions": ["dev-source", "react-native", "react-native-strict-api"],
+    "allowJs": true,
+    "esModuleInterop": true,
+    "jsx": "react-native",
+    "lib": ["DOM", "ESNext"],
+    "module": "preserve",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ESNext",
+    "strict": true,
+    "verbatimModuleSyntax": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/src/types.ts

@@ -5,6 +5,18 @@ import type { ReactNode } from 'react';
  */
 export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
 
+/**
+ * Position for floating tooltips (steps without a target element)
+ */
+export type FloatingPosition =
+  | 'center'
+  | 'top'
+  | 'bottom'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
 /**
  * Defines the measurements of a target element
  */
@@ -21,20 +33,32 @@ export interface TargetMeasurements {
 export interface GuidonStep {
   /** Unique identifier for this step */
   id: string;
-  /** ID of the target element to highlight */
-  targetId: string;
+  /**
+   * ID of the target element to highlight.
+   * If omitted, this becomes a floating tooltip step.
+   */
+  targetId?: string;
   /** Title displayed in the tooltip */
   title: string;
   /** Description/content displayed in the tooltip */
   description: string;
   /** Preferred position of the tooltip */
   tooltipPosition?: TooltipPosition;
+  /**
+   * Position for floating tooltips (only used when targetId is not provided)
+   * @default 'center'
+   */
+  floatingPosition?: FloatingPosition;
   /** Custom content to render in the tooltip */
   customContent?: ReactNode;
   /** Called when this step becomes active */
   onStepEnter?: () => void;
   /** Called when leaving this step */
   onStepExit?: () => void;
+  /** Optional message to display while waiting for target to mount */
+  waitingMessage?: string;
+  /** Timeout in ms before auto-skipping this step (0 = no timeout) */
+  waitTimeout?: number;
 }
 
 /**
@@ -141,6 +165,8 @@ export interface GuidonTooltipLabels {
   skip?: string;
   finish?: string;
   stepOf?: (current: number, total: number) => string;
+  /** Default message when waiting for target to mount */
+  waitingDefault?: string;
 }
 
 /**
@@ -207,6 +233,10 @@ export interface GuidonState {
   isLoading: boolean;
   /** Error from persistence operations */
   error: string | null;
+  /** Whether the guide is waiting for a target element to mount */
+  waitingForTarget: boolean;
+  /** The targetId currently being waited for */
+  waitingTargetId: string | null;
 }
 
 /**

package/dist/index.d.mts

@@ -1,128 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { G as GuidonTargetProps, a as GuidonTheme, b as GuidonStep, c as GuidonProviderProps, d as GuidonStore, e as GuidonConfig, T as TargetMeasurements } from './index-D_JFvCIg.mjs';
-export { l as GuidonActions, g as GuidonPersistenceAdapter, f as GuidonProgress, k as GuidonState, h as GuidonTooltipLabels, i as GuidonTooltipRenderProps, j as TooltipPosition, q as createApiAdapter, p as createAsyncStorageAdapter, r as createCompositeAdapter, o as createLocalStorageAdapter, n as createMemoryAdapter, m as createNoopAdapter, u as useGuidonPersistence, s as useShouldShowGuidon } from './index-D_JFvCIg.mjs';
-import * as zustand from 'zustand';
-import 'react';
-
-/**
- * Wrapper component that marks an element as a walkthrough target
- * Automatically measures and reports its position to the walkthrough store
- */
-declare function GuidonTarget({ children, targetId, active, }: GuidonTargetProps): react_jsx_runtime.JSX.Element;
-
-interface GuidonOverlayProps {
-    theme?: GuidonTheme;
-    animationDuration?: number;
-    onBackdropPress?: () => void;
-}
-declare function GuidonOverlay({ theme, animationDuration, onBackdropPress, }: GuidonOverlayProps): react_jsx_runtime.JSX.Element | null;
-
-interface GuidonTooltipProps {
-    theme?: GuidonTheme;
-    animationDuration?: number;
-    renderCustomTooltip?: (props: {
-        step: GuidonStep;
-        currentIndex: number;
-        totalSteps: number;
-        onNext: () => void;
-        onPrevious: () => void;
-        onSkip: () => void;
-    }) => React.ReactNode;
-    labels?: {
-        next?: string;
-        previous?: string;
-        skip?: string;
-        finish?: string;
-        stepOf?: (current: number, total: number) => string;
-    };
-}
-declare function GuidonTooltip({ theme, animationDuration, renderCustomTooltip, labels, }: GuidonTooltipProps): react_jsx_runtime.JSX.Element | null;
-
-interface GuidonContextValue {
-    start: () => void;
-    skip: () => void;
-    reset: () => void;
-    replay: () => Promise<void>;
-    isActive: boolean;
-    isCompleted: boolean;
-    isLoading: boolean;
-}
-declare function useGuidonContext(): GuidonContextValue;
-declare function GuidonProvider({ children, config, autoStart, shouldStart, persistenceAdapter, portalComponent: Portal, renderTooltip, tooltipLabels, onBackdropPress, }: GuidonProviderProps): react_jsx_runtime.JSX.Element;
-
-declare const useGuidonStore: zustand.UseBoundStore<zustand.StoreApi<GuidonStore>>;
-/**
- * Guidon API for external control
- * Can be used outside of React components
- */
-declare const Guidon: {
-    /**
-     * Configure the walkthrough with steps and options
-     */
-    configure: (config: GuidonConfig) => void;
-    /**
-     * Start the walkthrough
-     */
-    start: () => void;
-    /**
-     * Go to the next step
-     */
-    next: () => void;
-    /**
-     * Go to the previous step
-     */
-    previous: () => void;
-    /**
-     * Go to a specific step by index
-     */
-    goToStep: (index: number) => void;
-    /**
-     * Skip the walkthrough
-     */
-    skip: () => void;
-    /**
-     * Complete the walkthrough
-     */
-    complete: () => void;
-    /**
-     * Reset the walkthrough to initial state
-     */
-    reset: () => void;
-    /**
-     * Check if the walkthrough is currently active
-     */
-    isActive: () => boolean;
-    /**
-     * Check if the walkthrough has been completed
-     */
-    isCompleted: () => boolean;
-    /**
-     * Get the current step index
-     */
-    getCurrentStepIndex: () => number;
-    /**
-     * Get the current step
-     */
-    getCurrentStep: () => GuidonStep | null;
-    /**
-     * Get all steps
-     */
-    getSteps: () => GuidonStep[];
-    /**
-     * Subscribe to store changes
-     */
-    subscribe: (listener: (state: GuidonStore, prevState: GuidonStore) => void) => () => void;
-};
-/**
- * Hook selectors for common use cases
- */
-declare const useGuidonActive: () => boolean;
-declare const useGuidonStep: () => GuidonStep | null;
-declare const useGuidonProgress: () => {
-    currentStep: number;
-    totalSteps: number;
-    percentage: number;
-};
-declare const useTargetMeasurements: (targetId: string) => TargetMeasurements;
-
-export { Guidon, GuidonConfig, GuidonOverlay, GuidonProvider, GuidonProviderProps, GuidonStep, GuidonStore, GuidonTarget, GuidonTargetProps, GuidonTheme, GuidonTooltip, TargetMeasurements, useGuidonActive, useGuidonContext, useGuidonProgress, useGuidonStep, useGuidonStore, useTargetMeasurements };

package/dist/index.d.ts

@@ -1,128 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { G as GuidonTargetProps, a as GuidonTheme, b as GuidonStep, c as GuidonProviderProps, d as GuidonStore, e as GuidonConfig, T as TargetMeasurements } from './index-D_JFvCIg.js';
-export { l as GuidonActions, g as GuidonPersistenceAdapter, f as GuidonProgress, k as GuidonState, h as GuidonTooltipLabels, i as GuidonTooltipRenderProps, j as TooltipPosition, q as createApiAdapter, p as createAsyncStorageAdapter, r as createCompositeAdapter, o as createLocalStorageAdapter, n as createMemoryAdapter, m as createNoopAdapter, u as useGuidonPersistence, s as useShouldShowGuidon } from './index-D_JFvCIg.js';
-import * as zustand from 'zustand';
-import 'react';
-
-/**
- * Wrapper component that marks an element as a walkthrough target
- * Automatically measures and reports its position to the walkthrough store
- */
-declare function GuidonTarget({ children, targetId, active, }: GuidonTargetProps): react_jsx_runtime.JSX.Element;
-
-interface GuidonOverlayProps {
-    theme?: GuidonTheme;
-    animationDuration?: number;
-    onBackdropPress?: () => void;
-}
-declare function GuidonOverlay({ theme, animationDuration, onBackdropPress, }: GuidonOverlayProps): react_jsx_runtime.JSX.Element | null;
-
-interface GuidonTooltipProps {
-    theme?: GuidonTheme;
-    animationDuration?: number;
-    renderCustomTooltip?: (props: {
-        step: GuidonStep;
-        currentIndex: number;
-        totalSteps: number;
-        onNext: () => void;
-        onPrevious: () => void;
-        onSkip: () => void;
-    }) => React.ReactNode;
-    labels?: {
-        next?: string;
-        previous?: string;
-        skip?: string;
-        finish?: string;
-        stepOf?: (current: number, total: number) => string;
-    };
-}
-declare function GuidonTooltip({ theme, animationDuration, renderCustomTooltip, labels, }: GuidonTooltipProps): react_jsx_runtime.JSX.Element | null;
-
-interface GuidonContextValue {
-    start: () => void;
-    skip: () => void;
-    reset: () => void;
-    replay: () => Promise<void>;
-    isActive: boolean;
-    isCompleted: boolean;
-    isLoading: boolean;
-}
-declare function useGuidonContext(): GuidonContextValue;
-declare function GuidonProvider({ children, config, autoStart, shouldStart, persistenceAdapter, portalComponent: Portal, renderTooltip, tooltipLabels, onBackdropPress, }: GuidonProviderProps): react_jsx_runtime.JSX.Element;
-
-declare const useGuidonStore: zustand.UseBoundStore<zustand.StoreApi<GuidonStore>>;
-/**
- * Guidon API for external control
- * Can be used outside of React components
- */
-declare const Guidon: {
-    /**
-     * Configure the walkthrough with steps and options
-     */
-    configure: (config: GuidonConfig) => void;
-    /**
-     * Start the walkthrough
-     */
-    start: () => void;
-    /**
-     * Go to the next step
-     */
-    next: () => void;
-    /**
-     * Go to the previous step
-     */
-    previous: () => void;
-    /**
-     * Go to a specific step by index
-     */
-    goToStep: (index: number) => void;
-    /**
-     * Skip the walkthrough
-     */
-    skip: () => void;
-    /**
-     * Complete the walkthrough
-     */
-    complete: () => void;
-    /**
-     * Reset the walkthrough to initial state
-     */
-    reset: () => void;
-    /**
-     * Check if the walkthrough is currently active
-     */
-    isActive: () => boolean;
-    /**
-     * Check if the walkthrough has been completed
-     */
-    isCompleted: () => boolean;
-    /**
-     * Get the current step index
-     */
-    getCurrentStepIndex: () => number;
-    /**
-     * Get the current step
-     */
-    getCurrentStep: () => GuidonStep | null;
-    /**
-     * Get all steps
-     */
-    getSteps: () => GuidonStep[];
-    /**
-     * Subscribe to store changes
-     */
-    subscribe: (listener: (state: GuidonStore, prevState: GuidonStore) => void) => () => void;
-};
-/**
- * Hook selectors for common use cases
- */
-declare const useGuidonActive: () => boolean;
-declare const useGuidonStep: () => GuidonStep | null;
-declare const useGuidonProgress: () => {
-    currentStep: number;
-    totalSteps: number;
-    percentage: number;
-};
-declare const useTargetMeasurements: (targetId: string) => TargetMeasurements;
-
-export { Guidon, GuidonConfig, GuidonOverlay, GuidonProvider, GuidonProviderProps, GuidonStep, GuidonStore, GuidonTarget, GuidonTargetProps, GuidonTheme, GuidonTooltip, TargetMeasurements, useGuidonActive, useGuidonContext, useGuidonProgress, useGuidonStep, useGuidonStore, useTargetMeasurements };