polen
Version:
A framework for delightful GraphQL developer portals
50 lines • 4.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Cross2Icon } from '@radix-ui/react-icons';
import { Badge, Box, Flex, IconButton, Link, Popover, Text } from '@radix-ui/themes';
/**
* Popover content for GraphQL identifiers
*/
export const GraphQLIdentifierPopover = ({ identifier, documentation, hasError = false, referenceUrl, open, isPinned, onOpenChange, onNavigate, children, }) => {
// Determine badge color based on identifier kind
const getBadgeColor = () => {
switch (identifier.kind) {
case `Type`:
return `blue`;
case `Field`:
return `green`;
case `Argument`:
return `orange`;
case `Variable`:
return `purple`;
case `Directive`:
return `amber`;
case `Fragment`:
return `cyan`;
default:
return `gray`;
}
};
return (_jsxs(Popover.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(Popover.Trigger, { children: children }), _jsx(Popover.Content, { className: 'graphql-identifier-popover', style: { maxWidth: 400 }, onInteractOutside: (e) => {
// Prevent closing when clicking inside popover if pinned
if (isPinned) {
e.preventDefault();
}
}, children: _jsxs(Flex, { direction: 'column', gap: '2', children: [_jsxs(Flex, { justify: 'between', align: 'center', children: [_jsxs(Flex, { align: 'center', gap: '2', children: [_jsx(Text, { size: '2', weight: 'bold', children: identifier.name }), _jsx(Badge, { color: getBadgeColor(), size: '1', children: identifier.kind })] }), isPinned && (_jsx(IconButton, { size: '1', variant: 'ghost', onClick: () => {
onOpenChange(false);
}, "aria-label": 'Close popover', children: _jsx(Cross2Icon, {}) }))] }), _jsx(Box, { children: _jsxs(Text, { size: '1', color: 'gray', children: ["Type: ", _jsx(Text, { as: 'span', size: '1', style: { fontFamily: `monospace` }, children: documentation.typeInfo })] }) }), documentation.description && (_jsx(Box, { children: _jsx(Text, { size: '1', children: documentation.description }) })), documentation.defaultValue && (_jsx(Box, { children: _jsxs(Text, { size: '1', color: 'gray', children: ["Default:", ` `, _jsx(Text, { as: 'span', size: '1', style: { fontFamily: `monospace` }, children: documentation.defaultValue })] }) })), documentation.deprecated && (_jsxs(Box, { style: {
padding: `8px`,
backgroundColor: `var(--amber-2)`,
borderRadius: `4px`,
border: `1px solid var(--amber-6)`,
}, children: [_jsxs(Text, { size: '1', color: 'amber', children: ["\u26A0\uFE0F Deprecated: ", documentation.deprecated.reason] }), documentation.deprecated.replacement && (_jsxs(Text, { size: '1', color: 'amber', children: ["Use ", documentation.deprecated.replacement, " instead."] }))] })), hasError && (_jsx(Box, { style: {
padding: `8px`,
backgroundColor: `var(--red-2)`,
borderRadius: `4px`,
border: `1px solid var(--red-6)`,
}, children: _jsxs(Text, { size: '1', color: 'red', children: ["\u274C ", identifier.kind, " not found in schema"] }) })), _jsx(Box, { children: _jsxs(Text, { size: '1', color: 'gray', children: ["Path: ", identifier.schemaPath.join(` → `)] }) }), onNavigate && !hasError && (_jsx(Box, { children: _jsx(Link, { size: '1', href: referenceUrl, onClick: (e) => {
e.preventDefault();
onNavigate(referenceUrl);
onOpenChange(false);
}, children: "View full documentation \u2192" }) }))] }) })] }));
};
//# sourceMappingURL=GraphQLIdentifierPopover.js.map