diff --git a/examples/guide-example/src/App.tsx b/examples/guide-example/src/App.tsx index 420764313..ab59a88ce 100644 --- a/examples/guide-example/src/App.tsx +++ b/examples/guide-example/src/App.tsx @@ -11,8 +11,14 @@ import "@knocklabs/react/dist/index.css"; import { useEffect, useState } from "react"; import { Link, Route, Routes } from "react-router"; +interface ChangelogCardContent { + headline: string; + title: string; + body: string; +} + const ChangelogCard = () => { - const { guide, step } = useGuide({ type: "changelog-card" }); + const { guide, step } = useGuide({ type: "changelog-card" }); useEffect(() => { if (step) step.markAsSeen(); diff --git a/packages/client/src/clients/guide/client.ts b/packages/client/src/clients/guide/client.ts index 7b2044c97..9410bb668 100644 --- a/packages/client/src/clients/guide/client.ts +++ b/packages/client/src/clients/guide/client.ts @@ -15,6 +15,7 @@ import { mockDefaultGroup, } from "./helpers"; import { + Any, ConstructorOpts, DebugState, GetGuidesQueryParams, @@ -446,7 +447,10 @@ export class KnockGuideClient { // Store selector // - selectGuides(state: StoreState, filters: SelectFilterParams = {}) { + selectGuides( + state: StoreState, + filters: SelectFilterParams = {}, + ): KnockGuide[] { if (Object.keys(state.guides).length === 0) { return []; } @@ -465,7 +469,10 @@ export class KnockGuideClient { return [...result.values()]; } - selectGuide(state: StoreState, filters: SelectFilterParams = {}) { + selectGuide( + state: StoreState, + filters: SelectFilterParams = {}, + ): KnockGuide | undefined { if (Object.keys(state.guides).length === 0) { return undefined; } diff --git a/packages/client/src/clients/guide/types.ts b/packages/client/src/clients/guide/types.ts index 2812feeb0..615ec2929 100644 --- a/packages/client/src/clients/guide/types.ts +++ b/packages/client/src/clients/guide/types.ts @@ -4,6 +4,9 @@ import { GenericData } from "@knocklabs/types"; // Fetch guides API // +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type Any = any; + export interface StepMessageState { id: string; seen_at: string | null; @@ -13,14 +16,13 @@ export interface StepMessageState { link_clicked_at: string | null; } -export interface GuideStepData { +export interface GuideStepData { ref: string; schema_key: string; schema_semver: string; schema_variant_key: string; message: StepMessageState; - // eslint-disable-next-line - content: any; + content: TContent; } interface GuideActivationLocationRuleData { @@ -28,14 +30,14 @@ interface GuideActivationLocationRuleData { pathname: string; } -export interface GuideData { +export interface GuideData { __typename: "Guide"; channel_id: string; id: string; key: string; type: string; semver: string; - steps: GuideStepData[]; + steps: GuideStepData[]; activation_location_rules: GuideActivationLocationRuleData[]; bypass_global_group_limit: boolean; inserted_at: string; @@ -148,7 +150,8 @@ export type GuideSocketEvent = // Guide client // -export interface KnockGuideStep extends GuideStepData { +export interface KnockGuideStep + extends GuideStepData { markAsSeen: () => void; markAsInteracted: (params?: { metadata?: GenericData }) => void; markAsArchived: () => void; @@ -159,10 +162,10 @@ interface KnockGuideActivationLocationRule pattern: URLPattern; } -export interface KnockGuide extends GuideData { - steps: KnockGuideStep[]; +export interface KnockGuide extends GuideData { + steps: KnockGuideStep[]; activation_location_rules: KnockGuideActivationLocationRule[]; - getStep: () => KnockGuideStep | undefined; + getStep: () => KnockGuideStep | undefined; } type QueryKey = string; diff --git a/packages/react-core/src/modules/guide/hooks/useGuide.ts b/packages/react-core/src/modules/guide/hooks/useGuide.ts index e974b5818..70dd24a00 100644 --- a/packages/react-core/src/modules/guide/hooks/useGuide.ts +++ b/packages/react-core/src/modules/guide/hooks/useGuide.ts @@ -7,12 +7,17 @@ import { useStore } from "@tanstack/react-store"; import { UseGuideContextReturn, useGuideContext } from "./useGuideContext"; -interface UseGuideReturn extends UseGuideContextReturn { - guide: KnockGuide | undefined; - step: KnockGuideStep | undefined; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type Any = any; + +interface UseGuideReturn extends UseGuideContextReturn { + guide: KnockGuide | undefined; + step: KnockGuideStep | undefined; } -export const useGuide = (filters: KnockGuideFilterParams): UseGuideReturn => { +export const useGuide = ( + filters: KnockGuideFilterParams, +): UseGuideReturn => { const context = useGuideContext(); if (!filters.key && !filters.type) { @@ -24,7 +29,7 @@ export const useGuide = (filters: KnockGuideFilterParams): UseGuideReturn => { const { client, colorMode } = context; const guide = useStore(client.store, (state) => - client.selectGuide(state, filters), + client.selectGuide(state, filters), ); const step = guide && guide.getStep(); diff --git a/packages/react-core/src/modules/guide/hooks/useGuides.ts b/packages/react-core/src/modules/guide/hooks/useGuides.ts index 12efe007d..78ff71d2f 100644 --- a/packages/react-core/src/modules/guide/hooks/useGuides.ts +++ b/packages/react-core/src/modules/guide/hooks/useGuides.ts @@ -3,18 +3,21 @@ import { useStore } from "@tanstack/react-store"; import { UseGuideContextReturn, useGuideContext } from "./useGuideContext"; -interface UseGuidesReturn extends UseGuideContextReturn { - guides: KnockGuide[]; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type Any = any; + +interface UseGuidesReturn extends UseGuideContextReturn { + guides: KnockGuide[]; } -export const useGuides = ( +export const useGuides = ( filters: Pick, -): UseGuidesReturn => { +): UseGuidesReturn => { const context = useGuideContext(); const { client, colorMode } = context; const guides = useStore(client.store, (state) => - client.selectGuides(state, filters), + client.selectGuides(state, filters), ); return { client, colorMode, guides };