From 3610c07ea08b46c3965809c2827a216224997ba6 Mon Sep 17 00:00:00 2001 From: Thomas Date: Fri, 9 Jan 2026 17:22:48 -0500 Subject: [PATCH 1/6] upgrade node.js to v24 From 2700a7572950b58b978bde051ad9a18d23ea88ab Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 14 Jan 2026 14:06:39 -0500 Subject: [PATCH 2/6] handle ineligible_guides field in the guides fetch resp --- packages/client/src/clients/guide/client.ts | 9 ++++++++- packages/client/src/clients/guide/types.ts | 12 ++++++++++++ packages/client/test/clients/guide/guide.test.ts | 3 +++ 3 files changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/client/src/clients/guide/client.ts b/packages/client/src/clients/guide/client.ts index f3ee847e9..b83b8bdc2 100644 --- a/packages/client/src/clients/guide/client.ts +++ b/packages/client/src/clients/guide/client.ts @@ -295,6 +295,7 @@ export class KnockGuideClient { guideGroups: [], guideGroupDisplayLogs: {}, guides: {}, + ineligibleGuides: {}, previewGuides: {}, queries: {}, location, @@ -376,7 +377,12 @@ export class KnockGuideClient { >(this.channelId, queryParams); queryStatus = { status: "ok" }; - const { entries, guide_groups: groups, guide_group_display_logs } = data; + const { + entries, + guide_groups: groups, + guide_group_display_logs, + ineligible_guides, + } = data; this.knock.log("[Guide] Loading fetched guides"); this.store.setState((state) => ({ @@ -384,6 +390,7 @@ export class KnockGuideClient { guideGroups: groups?.length > 0 ? groups : [mockDefaultGroup(entries)], guideGroupDisplayLogs: guide_group_display_logs || {}, guides: byKey(entries.map((g) => this.localCopy(g))), + ineligibleGuides: byKey(ineligible_guides), queries: { ...state.queries, [queryKey]: queryStatus }, })); } catch (e) { diff --git a/packages/client/src/clients/guide/types.ts b/packages/client/src/clients/guide/types.ts index f7112713b..9f52bd92e 100644 --- a/packages/client/src/clients/guide/types.ts +++ b/packages/client/src/clients/guide/types.ts @@ -63,6 +63,13 @@ export interface GuideGroupData { updated_at: string; } +export type GuideIneligibilityData = { + __typename: "GuideIneligibilityMarker"; + key: KnockGuide["key"]; + reason: string; + message: string; +}; + export type GetGuidesQueryParams = { data?: string; tenant?: string; @@ -74,6 +81,7 @@ export type GetGuidesResponse = { entries: GuideData[]; guide_groups: GuideGroupData[]; guide_group_display_logs: Record; + ineligible_guides: GuideIneligibilityData[]; }; // @@ -200,6 +208,10 @@ export type StoreState = { guideGroups: GuideGroupData[]; guideGroupDisplayLogs: Record; guides: Record; + ineligibleGuides: Record< + GuideIneligibilityData["key"], + GuideIneligibilityData + >; previewGuides: Record; queries: Record; location: string | undefined; diff --git a/packages/client/test/clients/guide/guide.test.ts b/packages/client/test/clients/guide/guide.test.ts index 999c93846..75fd754ba 100644 --- a/packages/client/test/clients/guide/guide.test.ts +++ b/packages/client/test/clients/guide/guide.test.ts @@ -156,6 +156,7 @@ describe("KnockGuideClient", () => { guideGroups: [], guideGroupDisplayLogs: {}, guides: {}, + ineligibleGuides: {}, previewGuides: {}, queries: {}, location: undefined, @@ -184,6 +185,7 @@ describe("KnockGuideClient", () => { guideGroups: [], guideGroupDisplayLogs: {}, guides: {}, + ineligibleGuides: {}, previewGuides: {}, queries: {}, location: "https://example.com", @@ -200,6 +202,7 @@ describe("KnockGuideClient", () => { guideGroups: [], guideGroupDisplayLogs: {}, guides: {}, + ineligibleGuides: {}, previewGuides: {}, queries: {}, location: undefined, From c89f0ff1767b147957518c5ca639acf3070c2100 Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 14 Jan 2026 14:16:08 -0500 Subject: [PATCH 3/6] add a placeholder v2 toolbar component --- examples/guide-example/src/App.tsx | 1 + packages/react/src/index.ts | 1 - .../guide/components/GuideToolbar/index.ts | 1 - .../guide/components/Toolbar/KnockButton.tsx | 51 ++++++++++++++++ .../GuideToolbar.tsx => Toolbar/V1.tsx} | 49 ++------------- .../modules/guide/components/Toolbar/V2.tsx | 59 +++++++++++++++++++ .../guide/components/Toolbar/helpers.ts | 3 + .../modules/guide/components/Toolbar/index.ts | 2 + .../{GuideToolbar => Toolbar}/styles.css | 0 .../src/modules/guide/components/index.ts | 2 +- packages/react/src/modules/guide/index.ts | 3 +- .../guide/providers/KnockGuideProvider.tsx | 23 +++++--- .../react/test/guide/GuideToolbar.test.tsx | 10 ++-- 13 files changed, 144 insertions(+), 61 deletions(-) delete mode 100644 packages/react/src/modules/guide/components/GuideToolbar/index.ts create mode 100644 packages/react/src/modules/guide/components/Toolbar/KnockButton.tsx rename packages/react/src/modules/guide/components/{GuideToolbar/GuideToolbar.tsx => Toolbar/V1.tsx} (58%) create mode 100644 packages/react/src/modules/guide/components/Toolbar/V2.tsx create mode 100644 packages/react/src/modules/guide/components/Toolbar/helpers.ts create mode 100644 packages/react/src/modules/guide/components/Toolbar/index.ts rename packages/react/src/modules/guide/components/{GuideToolbar => Toolbar}/styles.css (100%) diff --git a/examples/guide-example/src/App.tsx b/examples/guide-example/src/App.tsx index ab59a88ce..9d3204fe8 100644 --- a/examples/guide-example/src/App.tsx +++ b/examples/guide-example/src/App.tsx @@ -65,6 +65,7 @@ function App() { readyToTarget={true} listenForUpdates={true} colorMode={colorMode} + toolbar="v2" >

Knock In-App Guide Example

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 80214ade0..97ee3fcfa 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -43,7 +43,6 @@ export { Card, CardView, KnockGuideProvider, - GuideToolbar as KnockGuideToolbar, Modal, ModalView, } from "./modules/guide"; diff --git a/packages/react/src/modules/guide/components/GuideToolbar/index.ts b/packages/react/src/modules/guide/components/GuideToolbar/index.ts deleted file mode 100644 index 54c13648f..000000000 --- a/packages/react/src/modules/guide/components/GuideToolbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { GuideToolbar } from "./GuideToolbar"; diff --git a/packages/react/src/modules/guide/components/Toolbar/KnockButton.tsx b/packages/react/src/modules/guide/components/Toolbar/KnockButton.tsx new file mode 100644 index 000000000..93ae8e55a --- /dev/null +++ b/packages/react/src/modules/guide/components/Toolbar/KnockButton.tsx @@ -0,0 +1,51 @@ +import { Button } from "@telegraph/button"; + +import { MAX_Z_INDEX } from "./helpers"; +import "./styles.css"; + +type Props = { + onClick: () => void; +}; + +export const KnockButton = ({ onClick }: Props) => { + return ( + + ); +}; diff --git a/packages/react/src/modules/guide/components/GuideToolbar/GuideToolbar.tsx b/packages/react/src/modules/guide/components/Toolbar/V1.tsx similarity index 58% rename from packages/react/src/modules/guide/components/GuideToolbar/GuideToolbar.tsx rename to packages/react/src/modules/guide/components/Toolbar/V1.tsx index cb6d3989f..f0bc299aa 100644 --- a/packages/react/src/modules/guide/components/GuideToolbar/GuideToolbar.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V1.tsx @@ -6,13 +6,11 @@ import { Text } from "@telegraph/typography"; import { Minimize2, Undo2, Wrench } from "lucide-react"; import { useState } from "react"; +import { KnockButton } from "./KnockButton"; +import { MAX_Z_INDEX } from "./helpers"; import "./styles.css"; -// 'max' z index based on max value of a signed 32-bit int -// Ref: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index/25461690#25461690 -const MAX_Z_INDEX = 2147483647; - -export const GuideToolbar = () => { +export const V1 = () => { const [isCollapsed, setIsCollapsed] = useState(false); const { client } = useGuideContext(); @@ -31,46 +29,7 @@ export const GuideToolbar = () => { }; if (isCollapsed) { - return ( - - ); + return ; } return ( diff --git a/packages/react/src/modules/guide/components/Toolbar/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2.tsx new file mode 100644 index 000000000..20aa88065 --- /dev/null +++ b/packages/react/src/modules/guide/components/Toolbar/V2.tsx @@ -0,0 +1,59 @@ +import { Button } from "@telegraph/button"; +import { Stack } from "@telegraph/layout"; +import { Text } from "@telegraph/typography"; +import { Minimize2 } from "lucide-react"; +import { useState } from "react"; + +import { KnockButton } from "./KnockButton"; +import { MAX_Z_INDEX } from "./helpers"; +import "./styles.css"; + +export const V2 = () => { + const [isCollapsed, setIsCollapsed] = useState(false); + + if (isCollapsed) { + return setIsCollapsed(false)} />; + } + + return ( + + + + Toolbar v2 placeholder + + +