Skip to content

Commit 904d032

Browse files
thomaswhyyouthomaswhyyou
committed
add guides list w/ targeting and archived indicators
1 parent 0ebc110 commit 904d032

9 files changed

Lines changed: 529 additions & 103 deletions

File tree

‎packages/client/src/clients/guide/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ export { KnockGuideClient, DEBUG_QUERY_PARAMS } from "./client";
22
export type {
33
KnockGuide,
44
KnockGuideStep,
5+
GuideIneligibilityMarker as KnockGuideIneligibilityMarker,
56
TargetParams as KnockGuideTargetParams,
67
SelectFilterParams as KnockGuideFilterParams,
78
SelectGuideOpts as KnockSelectGuideOpts,
89
SelectGuidesOpts as KnockSelectGuidesOpts,
10+
StoreState as KnockGuideClientStoreState,
911
} from "./types";

‎packages/react-core/vite.config.mts.timestamp-1769027936090-215a58f55e0f58.mjs‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎packages/react/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,12 @@
7676
"@knocklabs/react-core": "workspace:^",
7777
"@popperjs/core": "^2.11.8",
7878
"@radix-ui/react-dialog": "^1.1.15",
79+
"@radix-ui/react-hover-card": "^1.1.15",
7980
"@telegraph/combobox": "^0.1.16",
8081
"@telegraph/icon": "^0.2.7",
8182
"@telegraph/layout": "^0.2.3",
8283
"@telegraph/tokens": "^0.1.2",
84+
"@telegraph/tooltip": "0.0.61",
8385
"@telegraph/typography": "^0.1.25",
8486
"clsx": "^2.1.1",
8587
"lodash.debounce": "^4.0.8"

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import * as HoverCard from "@radix-ui/react-hover-card";
2+
import { Box, Stack } from "@telegraph/layout";
3+
import * as React from "react";
4+
5+
import { InspectedGuide, MissingGuide } from "./useInspectGuideClientStore";
6+
7+
type Props = {
8+
guide: InspectedGuide | MissingGuide;
9+
};
10+
11+
export const GuideHoverCard = ({
12+
children,
13+
guide,
14+
}: React.PropsWithChildren<Props>) => {
15+
return (
16+
<HoverCard.Root>
17+
<HoverCard.Trigger>
18+
<Stack align="center">{children}</Stack>
19+
</HoverCard.Trigger>
20+
<HoverCard.Portal>
21+
<HoverCard.Content sideOffset={44} side="left">
22+
<Box
23+
px="2"
24+
shadow="2"
25+
rounded="3"
26+
border="px"
27+
overflow="auto"
28+
style={{
29+
width: "450px",
30+
maxHeight: "600px",
31+
}}
32+
>
33+
<pre
34+
style={{
35+
fontSize: "12px",
36+
}}
37+
>
38+
{/* TODO: Prune some details */}
39+
<code>{JSON.stringify(guide, null, 2)}</code>
40+
</pre>
41+
</Box>
42+
<HoverCard.Arrow />
43+
</HoverCard.Content>
44+
</HoverCard.Portal>
45+
</HoverCard.Root>
46+
);
47+
};

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { Button } from "@telegraph/button";
2+
import { Stack } from "@telegraph/layout";
3+
import { Tag } from "@telegraph/tag";
4+
import { Tooltip } from "@telegraph/tooltip";
5+
import { Text } from "@telegraph/typography";
6+
import { CheckCircle2, CircleDashed, Eye, UserCircle2 } from "lucide-react";
7+
import * as React from "react";
8+
9+
import { GuideHoverCard } from "./GuideHoverCard";
10+
import { InspectedGuide, MissingGuide } from "./useInspectGuideClientStore";
11+
12+
const Row = ({ children }: React.PropsWithChildren) => (
13+
<Stack h="7" px="2" borderTop="px" justify="space-between" align="center">
14+
{children}
15+
</Stack>
16+
);
17+
18+
type Props = {
19+
guide: MissingGuide | InspectedGuide;
20+
orderIndex: number;
21+
};
22+
23+
export const GuideRow = ({ guide, orderIndex }: Props) => {
24+
return (
25+
<Row>
26+
<Stack h="6" justify="flex-start" align="center" gap="2">
27+
<Tag
28+
size="0"
29+
variant="soft"
30+
color={guide.bypass_global_group_limit ? "blue" : "default"}
31+
>
32+
{orderIndex + 1}
33+
</Tag>
34+
<GuideHoverCard guide={guide}>
35+
<Text as="code" size="1" color={guide.active ? "black" : "disabled"}>
36+
{guide.key}
37+
</Text>
38+
</GuideHoverCard>
39+
</Stack>
40+
41+
<Stack gap="1" justify="flex-end">
42+
{guide.__typename === "Guide" && (
43+
<>
44+
<Tooltip
45+
label={
46+
!guide.inspection.targetable.status &&
47+
guide.inspection.targetable.message
48+
}
49+
enabled={!guide.inspection.targetable.status}
50+
>
51+
<Button
52+
px="1"
53+
size="1"
54+
variant="soft"
55+
color={guide.inspection.targetable.status ? "green" : "red"}
56+
leadingIcon={{ icon: UserCircle2, alt: "Target" }}
57+
/>
58+
</Tooltip>
59+
<Tooltip
60+
label="User has already archived this guide"
61+
enabled={guide.inspection.archived.status}
62+
>
63+
<Button
64+
px="1"
65+
size="1"
66+
variant="soft"
67+
color={guide.inspection.archived.status ? "red" : "green"}
68+
leadingIcon={{ icon: Eye, alt: "Not archived" }}
69+
/>
70+
</Tooltip>
71+
</>
72+
)}
73+
<Tooltip
74+
label={
75+
guide.__typename === "MissingGuide"
76+
? "This guide has never been committed and published yet"
77+
: "This guide is not active"
78+
}
79+
enabled={!guide.active}
80+
>
81+
<Button
82+
px="1"
83+
size="1"
84+
variant="soft"
85+
color={guide.active ? "green" : "red"}
86+
leadingIcon={
87+
guide.active
88+
? { icon: CheckCircle2, alt: "Active" }
89+
: { icon: CircleDashed, alt: "Inactive" }
90+
}
91+
/>
92+
</Tooltip>
93+
</Stack>
94+
</Row>
95+
);
96+
};

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Select } from "@telegraph/select";
2+
3+
import { MAX_Z_INDEX } from "../shared";
4+
5+
export type DisplayOption = "current-page" | "all-eligible" | "all-guides";
6+
7+
type Props = {
8+
value: DisplayOption;
9+
onChange: (option: DisplayOption) => void;
10+
};
11+
12+
export const GuidesListDisplaySelect = ({ value, onChange }: Props) => {
13+
return (
14+
<Select.Root
15+
size="1"
16+
value={value}
17+
onValueChange={(value) => {
18+
if (!value) return;
19+
onChange(value as DisplayOption);
20+
}}
21+
contentProps={{
22+
style: { zIndex: MAX_Z_INDEX },
23+
}}
24+
>
25+
{/*
26+
<Select.Option size="1" value="current-page">
27+
Present and activated on current page
28+
</Select.Option>
29+
*/}
30+
<Select.Option size="1" value="all-eligible">
31+
All eligible guides for user
32+
</Select.Option>
33+
<Select.Option size="1" value="all-guides">
34+
All existing guides
35+
</Select.Option>
36+
</Select.Root>
37+
);
38+
};

0 commit comments

Comments
 (0)