diff --git a/packages/client/src/clients/guide/index.ts b/packages/client/src/clients/guide/index.ts index 0f959ae8..ddcb5e28 100644 --- a/packages/client/src/clients/guide/index.ts +++ b/packages/client/src/clients/guide/index.ts @@ -2,8 +2,10 @@ export { KnockGuideClient, DEBUG_QUERY_PARAMS } from "./client"; export type { KnockGuide, KnockGuideStep, + GuideIneligibilityMarker as KnockGuideIneligibilityMarker, TargetParams as KnockGuideTargetParams, SelectFilterParams as KnockGuideFilterParams, SelectGuideOpts as KnockSelectGuideOpts, SelectGuidesOpts as KnockSelectGuidesOpts, + StoreState as KnockGuideClientStoreState, } from "./types"; diff --git a/packages/react/package.json b/packages/react/package.json index 74276b2d..4ca8efc6 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -76,10 +76,12 @@ "@knocklabs/react-core": "workspace:^", "@popperjs/core": "^2.11.8", "@radix-ui/react-dialog": "^1.1.15", + "@radix-ui/react-hover-card": "^1.1.15", "@telegraph/combobox": "^0.1.16", "@telegraph/icon": "^0.2.7", "@telegraph/layout": "^0.2.3", "@telegraph/tokens": "^0.1.2", + "@telegraph/tooltip": "0.0.61", "@telegraph/typography": "^0.1.25", "clsx": "^2.1.1", "lodash.debounce": "^4.0.8" diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx new file mode 100644 index 00000000..7216f671 --- /dev/null +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx @@ -0,0 +1,48 @@ +import * as HoverCard from "@radix-ui/react-hover-card"; +import { Box, Stack } from "@telegraph/layout"; +import * as React from "react"; + +import { InspectedGuide, MissingGuide } from "./useInspectGuideClientStore"; + +type Props = { + guide: InspectedGuide | MissingGuide; +}; + +export const GuideHoverCard = ({ + children, + guide, +}: React.PropsWithChildren) => { + return ( + + + {children} + + + + +
+              {/* XXX: Prune some details */}
+              {JSON.stringify(guide, null, 2)}
+            
+
+ +
+
+
+ ); +}; diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx new file mode 100644 index 00000000..c7fe52c5 --- /dev/null +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx @@ -0,0 +1,103 @@ +import { Button } from "@telegraph/button"; +import { Stack } from "@telegraph/layout"; +import { Tag } from "@telegraph/tag"; +import { Tooltip } from "@telegraph/tooltip"; +import { Text } from "@telegraph/typography"; +import { CheckCircle2, CircleDashed, Eye, UserCircle2 } from "lucide-react"; +import * as React from "react"; + +import { GuideHoverCard } from "./GuideHoverCard"; +import { InspectedGuide, MissingGuide } from "./useInspectGuideClientStore"; + +const Row = ({ children }: React.PropsWithChildren) => ( + + {children} + +); + +type Props = { + guide: MissingGuide | InspectedGuide; + orderIndex: number; +}; + +export const GuideRow = ({ guide, orderIndex }: Props) => { + return ( + + + + {orderIndex + 1} + + + + {guide.key} + + + + + + + {guide.__typename === "Guide" && ( + <> + +