feat(react): tour components

workspaces/react/src/flows-context.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import { type TourBlock, type Block, type Components } from "./types";
+import { type TourBlock, type Block, type Components, type TourComponents } from "./types";
 
 export interface RunningTour {
   block: Block;
@@ -11,6 +11,7 @@ export interface RunningTour {
 export interface IFlowsContext {
   blocks: Block[];
   components: Components;
+  tourComponents: TourComponents;
   transition: (props: { exitNode: string; blockId: string }) => Promise<void>;
   runningTours: RunningTour[];
 }
@@ -20,6 +21,7 @@ const asyncNoop = async (): Promise<void> => {};
 export const FlowsContext = createContext<IFlowsContext>({
   blocks: [],
   components: {},
+  tourComponents: {},
   transition: asyncNoop,
   runningTours: [],
 });

workspaces/react/src/flows-provider.tsx

@@ -1,6 +1,6 @@
 import { type FC, type ReactNode, useMemo } from "react";
 import { getApi } from "./api";
-import { type Components } from "./types";
+import { type TourComponents, type Components } from "./types";
 import { Block } from "./block";
 import { FlowsContext, type IFlowsContext } from "./flows-context";
 import { useRunningTours } from "./use-running-tours";
@@ -15,6 +15,7 @@ interface Props {
   userId?: string;
   apiUrl?: string;
   components: Components;
+  tourComponents: TourComponents;
 }
 
 export const FlowsProvider: FC<Props> = ({
@@ -24,6 +25,7 @@ export const FlowsProvider: FC<Props> = ({
   organizationId,
   userId,
   components,
+  tourComponents,
 }) => {
   const blocks = useBlocks({ apiUrl, environment, organizationId, userId });
   const runningTours = useRunningTours(blocks);
@@ -46,7 +48,7 @@ export const FlowsProvider: FC<Props> = ({
   );
 
   return (
-    <FlowsContext.Provider value={{ blocks, components, transition, runningTours }}>
+    <FlowsContext.Provider value={{ blocks, components, transition, runningTours, tourComponents }}>
       {children}
       {floatingBlocks.map((block) => {
         return <Block block={block} key={block.id} />;

workspaces/react/src/index.ts

@@ -1,2 +1,3 @@
 export { FlowsProvider } from "./flows-provider";
 export * from "./flows-slot";
+export type { TourComponentProps } from "./types";

workspaces/react/src/tour-block.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useMemo, type FC } from "react";
 import { type RunningTour, useFlowsContext } from "./flows-context";
-import { type Block } from "./types";
 
 interface Props {
   tour: RunningTour;
@@ -10,13 +9,13 @@ export const TourBlock: FC<Props> = ({ tour }) => {
   const { setCurrentBlockIndex, block, activeStep } = tour;
   const blockId = block.id;
 
-  const { components, transition } = useFlowsContext();
+  const { tourComponents, transition } = useFlowsContext();
 
   const isLastStep = useMemo(() => {
-    const blocks = tour.block.data.blocks as Block[] | undefined;
+    const blocks = tour.block.tourBlocks;
     if (!blocks) return false;
     return tour.currentBlockIndex === blocks.length - 1;
-  }, [tour.block.data.blocks, tour.currentBlockIndex]);
+  }, [tour.block.tourBlocks, tour.currentBlockIndex]);
 
   const cancel = useCallback(
     () => transition({ exitNode: "cancel", blockId }),
@@ -43,7 +42,7 @@ export const TourBlock: FC<Props> = ({ tour }) => {
 
   if (!activeStep) return null;
 
-  const Component = components[activeStep.type];
+  const Component = tourComponents[activeStep.type];
   if (!Component) return null;
 
   return <Component {...activeStep.data} next={next} prev={prev} cancel={cancel} />;

workspaces/react/src/types.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any -- needed for our purposes */
+
 import { type FC } from "react";
 
 export interface Block {
@@ -21,5 +23,20 @@ export interface TourBlock {
   slotIndex?: number;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore
-export type Components = Record<string, FC<any>>;
+type FlowsComponentProps<T extends Record<string, any> = any> = T;
+export type Components = Record<string, FC<FlowsComponentProps>>;
+
+export type TourComponentProps<T extends Record<string, any> = any> = {
+  next: () => void;
+  prev: () => void;
+  cancel: () => Promise<void>;
+} & T;
+export type TourComponent = FC<TourComponentProps>;
+export type TourComponents = Record<string, TourComponent>;
+
+export interface BlockState<T extends Record<string, unknown>> {
+  entered_at: string;
+  activated_at?: string;
+  exited_at?: string;
+  data: T;
+}