feat: getCurrentStep and nextStep methods

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rbnd/flows",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "A better way to onboard users and drive product adoption.",
   "repository": {
     "type": "git",

public/flows.css

@@ -7,8 +7,8 @@
   --flows-primary-hover: #0060ce;
 
   --flows-border: 1px solid #cccccc;
-  --flows-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
-
+  --flows-shadow: 0px 8px 12px rgba(28, 26, 39, 0.08), 0px 6px 8px rgba(28, 26, 39, 0.12),
+    0px 0px 1px rgba(28, 26, 39, 0.16);
   --flows-borderRadius: 8px;
 
   --flows-tooltip-padding: 16px;
@@ -43,6 +43,7 @@
   font-size: var(--flows-heading-font-size);
   line-height: var(--flows-heading-line-height);
   font-weight: var(--flows-heading-font-weight);
+  margin: 0;
 }
 
 .flows-body {
@@ -116,6 +117,7 @@
   color: var(--flows-text);
   border-radius: var(--flows-borderRadius);
   position: absolute;
+  z-index: 1500;
   padding: var(--flows-tooltip-padding);
   box-shadow: var(--flows-shadow);
 

src/index.ts

@@ -19,6 +19,17 @@ export const identifyUser = (userId: string): void => {
   context.userId = userId;
 };
 
+export const getCurrentStep = (flowId: string): FlowStep | null => {
+  const state = instances.find((s) => s.flowId === flowId);
+  if (!state) return null;
+  return state.currentStep ?? null;
+};
+export const nextStep = (flowId: string, action?: number): void => {
+  const state = instances.find((s) => s.flowId === flowId);
+  if (!state) return;
+  state.nextStep(action).render();
+};
+
 export const init = (options: FlowsOptions): void => {
   context.customerId = options.customerId;
   context.onNextStep = options.onNextStep;

src/render.tsx

@@ -1,16 +1,18 @@
 import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom";
-import type { FlowModalStep, FlowStep, FlowTooltipStep } from "./types";
+import type { FlowModalStep, FlowStep, FlowTooltipStep, Placement } from "./types";
 import type { FlowState } from "./flow-state";
 
 const updateTooltip = ({
   target,
   tooltip,
+  placement,
 }: {
   target: Element;
   tooltip: HTMLElement;
+  placement?: Placement;
 }): Promise<void> =>
   computePosition(target, tooltip, {
-    placement: "bottom",
+    placement: placement ?? "bottom",
     middleware: [
       offset(4),
       flip({ fallbackPlacements: ["top", "bottom", "left", "right"] }),
@@ -70,7 +72,9 @@ const renderTooltip = ({
   );
   root.appendChild(tooltip);
   // eslint-disable-next-line @typescript-eslint/no-misused-promises -- Promise is handled inside the updateTooltip
-  const cleanup = autoUpdate(target, tooltip, () => updateTooltip({ target, tooltip }));
+  const cleanup = autoUpdate(target, tooltip, () =>
+    updateTooltip({ target, tooltip, placement: step.placement }),
+  );
   return { cleanup };
 };
 

src/types.ts

@@ -1,10 +1,17 @@
+import type { Placement as FloatingUiPlacement } from "@floating-ui/dom";
+
+export type Placement = FloatingUiPlacement;
+
 export interface FlowTooltipStep {
+  key?: string;
   title: string;
   body?: string;
   element: string;
   options?: { text: string; action: number }[];
+  placement?: Placement;
 }
 export interface FlowModalStep {
+  key?: string;
   title: string;
   body?: string;
   options?: { text: string; action: number }[];
@@ -22,6 +29,7 @@ export interface WaitStepOptions {
   action?: number;
 }
 export interface FlowWaitStep {
+  key?: string;
   wait: WaitStepOptions | WaitStepOptions[];
 }
 export type FlowStep = FlowModalStep | FlowTooltipStep | FlowWaitStep;