diff --git a/.changeset/wet-berries-tease.md b/.changeset/wet-berries-tease.md new file mode 100644 index 000000000..12906cfb0 --- /dev/null +++ b/.changeset/wet-berries-tease.md @@ -0,0 +1,8 @@ +--- +"@knocklabs/react": patch +"guide-example": patch +"@knocklabs/client": patch +"@knocklabs/react-core": patch +--- + +[guides] add guide toolbar v2 poc diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx new file mode 100644 index 000000000..5b60e019e --- /dev/null +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx @@ -0,0 +1,100 @@ +import { useGuideContext, useStore } from "@knocklabs/react-core"; +import { Box, Stack } from "@telegraph/layout"; +import { Text } from "@telegraph/typography"; +import { ChevronDown, ChevronRight } from "lucide-react"; +import * as React from "react"; + +export const GuideContextDetails = () => { + const { client } = useGuideContext(); + const [isExpanded, setIsExpanded] = React.useState(false); + + const defaultGroup = useStore(client.store, (state) => state.guideGroups[0]); + const displayInterval = defaultGroup?.display_interval ?? null; + + return ( + + setIsExpanded((prev) => !prev)} + > + + Details + + {isExpanded ? : } + + + {isExpanded && ( + + + + Throttle + + + {displayInterval === null ? "-" : `Every ${displayInterval}s`} + + + + + + Target params + + + + Tenant + + + {client.targetParams.tenant ? ( + +
+                      {client.targetParams.tenant}
+                    
+
+ ) : ( + + - + + )} +
+
+ + + + Data + + {client.targetParams.data ? ( + +
+                    
+                      {JSON.stringify(client.targetParams.data, null, 2)}
+                    
+                  
+
+ ) : ( + + - + + )} +
+
+
+ )} +
+ ); +}; diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx index d941891f0..e305dec54 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx @@ -34,7 +34,7 @@ export const GuideHoverCard = ({ {children} - + { return ( - - - {orderIndex + 1} - - - + + + + {orderIndex + 1} + + {guide.key} - - + + {!isUnknownGuide(guide) && ( diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx index 2b7c51324..bc0ae13f3 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx @@ -2,7 +2,11 @@ import { Select } from "@telegraph/select"; import { TOOLBAR_Z_INDEX } from "../shared"; -export type DisplayOption = "current-page" | "all-eligible" | "all-guides"; +export type DisplayOption = + | "only-displaying" + | "only-displayable" + | "all-eligible" + | "all-guides"; type Props = { value: DisplayOption; @@ -22,7 +26,10 @@ export const GuidesListDisplaySelect = ({ value, onChange }: Props) => { style: { zIndex: TOOLBAR_Z_INDEX }, }} > - + + Displaying on current page + + Displayable on current page diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx index 1a885fd75..59a2aa397 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx @@ -8,6 +8,7 @@ import { KnockButton } from "../KnockButton"; import { TOOLBAR_Z_INDEX } from "../shared"; import "../styles.css"; +import { GuideContextDetails } from "./GuideContextDetails"; import { GuideRow } from "./GuideRow"; import { DisplayOption, @@ -27,13 +28,17 @@ const GuidesList = ({ displayOption: DisplayOption; }) => { return guides.map((guide, idx) => { - if ( - displayOption === "current-page" && - (!guide.annotation.isEligible || !guide.annotation.isQualified) - ) { + const { isEligible, isQualified, selectable } = guide.annotation; + const isDisplayable = isEligible && isQualified; + const isDisplaying = isDisplayable && selectable.status === "returned"; + + if (displayOption === "only-displaying" && !isDisplaying) { + return null; + } + if (displayOption === "only-displayable" && !isDisplayable) { return null; } - if (displayOption === "all-eligible" && !guide.annotation.isEligible) { + if (displayOption === "all-eligible" && !isEligible) { return null; } @@ -45,7 +50,7 @@ export const V2 = () => { const { client } = useGuideContext(); const [guidesListDisplayOption, setGuidesListDisplayOption] = - React.useState("current-page"); + React.useState("only-displayable"); const [isVisible, setIsVisible] = React.useState(detectToolbarParam()); const [isCollapsed, setIsCollapsed] = React.useState(true); @@ -115,6 +120,7 @@ export const V2 = () => { {result.error && {result.error}} + annotation: { isEligible: false, isQualified: false, + selectable: { + status: undefined, + }, }, }) as UnknownGuide;