Skip to content

Commit b7b3708

Browse files
thomaswhyyouthomaswhyyou
authored
feat: add GuideContextDetails to guide toolbar v2 (#870)
1 parent 681b7fa commit b7b3708

7 files changed

Lines changed: 148 additions & 21 deletions

File tree

‎.changeset/wet-berries-tease.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@knocklabs/react": patch
3+
"guide-example": patch
4+
"@knocklabs/client": patch
5+
"@knocklabs/react-core": patch
6+
---
7+
8+
[guides] add guide toolbar v2 poc

‎packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { useGuideContext, useStore } from "@knocklabs/react-core";
2+
import { Box, Stack } from "@telegraph/layout";
3+
import { Text } from "@telegraph/typography";
4+
import { ChevronDown, ChevronRight } from "lucide-react";
5+
import * as React from "react";
6+
7+
export const GuideContextDetails = () => {
8+
const { client } = useGuideContext();
9+
const [isExpanded, setIsExpanded] = React.useState(false);
10+
11+
const defaultGroup = useStore(client.store, (state) => state.guideGroups[0]);
12+
const displayInterval = defaultGroup?.display_interval ?? null;
13+
14+
return (
15+
<Stack direction="column" borderTop="px">
16+
<Stack
17+
h="5"
18+
px="2"
19+
bg="gray-3"
20+
align="center"
21+
gap="1"
22+
style={{ cursor: "pointer" }}
23+
onClick={() => setIsExpanded((prev) => !prev)}
24+
>
25+
<Text as="span" size="0" weight="medium">
26+
Details
27+
</Text>
28+
{isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
29+
</Stack>
30+
31+
{isExpanded && (
32+
<Stack direction="column">
33+
<Stack direction="column" gap="0_5" py="1" px="2" borderTop="px">
34+
<Text as="span" size="0" weight="medium">
35+
Throttle
36+
</Text>
37+
<Text as="code" size="0">
38+
{displayInterval === null ? "-" : `Every ${displayInterval}s`}
39+
</Text>
40+
</Stack>
41+
42+
<Stack direction="column" py="1" px="2" borderTop="px">
43+
<Text as="span" size="0" weight="medium">
44+
Target params
45+
</Text>
46+
<Stack direction="column" gap="0_5" mt="1">
47+
<Text as="span" size="0" color="gray">
48+
Tenant
49+
</Text>
50+
<Text as="code" size="0">
51+
{client.targetParams.tenant ? (
52+
<Box
53+
rounded="2"
54+
overflow="auto"
55+
backgroundColor="gray-2"
56+
border="px"
57+
style={{ maxHeight: "200px" }}
58+
>
59+
<pre style={{ fontSize: "11px", margin: 0 }}>
60+
<code>{client.targetParams.tenant}</code>
61+
</pre>
62+
</Box>
63+
) : (
64+
<Text as="code" size="0">
65+
-
66+
</Text>
67+
)}
68+
</Text>
69+
</Stack>
70+
71+
<Stack direction="column" gap="0_5">
72+
<Text as="span" size="0" color="gray">
73+
Data
74+
</Text>
75+
{client.targetParams.data ? (
76+
<Box
77+
rounded="2"
78+
overflow="auto"
79+
backgroundColor="gray-2"
80+
border="px"
81+
style={{ maxHeight: "200px" }}
82+
>
83+
<pre style={{ fontSize: "11px", margin: 0 }}>
84+
<code>
85+
{JSON.stringify(client.targetParams.data, null, 2)}
86+
</code>
87+
</pre>
88+
</Box>
89+
) : (
90+
<Text as="code" size="0">
91+
-
92+
</Text>
93+
)}
94+
</Stack>
95+
</Stack>
96+
</Stack>
97+
)}
98+
</Stack>
99+
);
100+
};

‎packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const GuideHoverCard = ({
3434
<Stack align="center">{children}</Stack>
3535
</HoverCard.Trigger>
3636
<HoverCard.Portal>
37-
<HoverCard.Content sideOffset={44} side="left">
37+
<HoverCard.Content sideOffset={16} side="left">
3838
<Box
3939
px="2"
4040
shadow="2"

‎packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,20 @@ type Props = {
3434
export const GuideRow = ({ guide, orderIndex }: Props) => {
3535
return (
3636
<Row>
37-
<Stack h="6" justify="flex-start" align="center" gap="2">
38-
<Tag
39-
size="0"
40-
variant="soft"
41-
color={guide.bypass_global_group_limit ? "blue" : "default"}
42-
>
43-
{orderIndex + 1}
44-
</Tag>
45-
<GuideHoverCard guide={guide}>
46-
<Text as="code" size="1" color={guide.active ? "black" : "disabled"}>
37+
<GuideHoverCard guide={guide}>
38+
<Stack h="6" justify="flex-start" align="center" gap="2">
39+
<Tag
40+
size="0"
41+
variant="soft"
42+
color={guide.bypass_global_group_limit ? "blue" : "default"}
43+
>
44+
{orderIndex + 1}
45+
</Tag>
46+
<Text as="code" size="1">
4747
{guide.key}
4848
</Text>
49-
</GuideHoverCard>
50-
</Stack>
49+
</Stack>
50+
</GuideHoverCard>
5151

5252
<Stack justify="flex-end">
5353
{!isUnknownGuide(guide) && (

‎packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { Select } from "@telegraph/select";
22

33
import { TOOLBAR_Z_INDEX } from "../shared";
44

5-
export type DisplayOption = "current-page" | "all-eligible" | "all-guides";
5+
export type DisplayOption =
6+
| "only-displaying"
7+
| "only-displayable"
8+
| "all-eligible"
9+
| "all-guides";
610

711
type Props = {
812
value: DisplayOption;
@@ -22,7 +26,10 @@ export const GuidesListDisplaySelect = ({ value, onChange }: Props) => {
2226
style: { zIndex: TOOLBAR_Z_INDEX },
2327
}}
2428
>
25-
<Select.Option size="1" value="current-page">
29+
<Select.Option size="1" value="only-displaying">
30+
Displaying on current page
31+
</Select.Option>
32+
<Select.Option size="1" value="only-displayable">
2633
Displayable on current page
2734
</Select.Option>
2835
<Select.Option size="1" value="all-eligible">

‎packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { KnockButton } from "../KnockButton";
88
import { TOOLBAR_Z_INDEX } from "../shared";
99
import "../styles.css";
1010

11+
import { GuideContextDetails } from "./GuideContextDetails";
1112
import { GuideRow } from "./GuideRow";
1213
import {
1314
DisplayOption,
@@ -27,13 +28,17 @@ const GuidesList = ({
2728
displayOption: DisplayOption;
2829
}) => {
2930
return guides.map((guide, idx) => {
30-
if (
31-
displayOption === "current-page" &&
32-
(!guide.annotation.isEligible || !guide.annotation.isQualified)
33-
) {
31+
const { isEligible, isQualified, selectable } = guide.annotation;
32+
const isDisplayable = isEligible && isQualified;
33+
const isDisplaying = isDisplayable && selectable.status === "returned";
34+
35+
if (displayOption === "only-displaying" && !isDisplaying) {
36+
return null;
37+
}
38+
if (displayOption === "only-displayable" && !isDisplayable) {
3439
return null;
3540
}
36-
if (displayOption === "all-eligible" && !guide.annotation.isEligible) {
41+
if (displayOption === "all-eligible" && !isEligible) {
3742
return null;
3843
}
3944

@@ -45,7 +50,7 @@ export const V2 = () => {
4550
const { client } = useGuideContext();
4651

4752
const [guidesListDisplayOption, setGuidesListDisplayOption] =
48-
React.useState<DisplayOption>("current-page");
53+
React.useState<DisplayOption>("only-displayable");
4954

5055
const [isVisible, setIsVisible] = React.useState(detectToolbarParam());
5156
const [isCollapsed, setIsCollapsed] = React.useState(true);
@@ -115,6 +120,7 @@ export const V2 = () => {
115120

116121
<Box w="full">
117122
{result.error && <Box>{result.error}</Box>}
123+
<GuideContextDetails />
118124
<GuidesList
119125
guides={result.guides}
120126
displayOption={guidesListDisplayOption}

‎packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,9 @@ export type UnknownGuide = {
107107
annotation: {
108108
isEligible: false;
109109
isQualified: false;
110+
selectable: {
111+
status: undefined;
112+
};
110113
};
111114
};
112115

@@ -383,6 +386,9 @@ const newUnknownGuide = (key: KnockGuide["key"]) =>
383386
annotation: {
384387
isEligible: false,
385388
isQualified: false,
389+
selectable: {
390+
status: undefined,
391+
},
386392
},
387393
}) as UnknownGuide;
388394

0 commit comments

Comments
 (0)