@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/dist/src/components/icon-button.stories.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import { AlignLeft, Copy, Download, Edit, Settings, Trash2 } from "lucide-react";
+import { IconButton } from "./icon-button.js";
+const meta = {
+    title: "Component/IconButton",
+    component: IconButton,
+    parameters: {
+        docs: {
+            page: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Title, {}),
+                        /*#__PURE__*/ _jsx(Primary, {}),
+                        /*#__PURE__*/ _jsx(Controls, {})
+                    ]
+                })
+        }
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "ghost",
+                "link"
+            ]
+        },
+        disabled: {
+            control: "boolean"
+        }
+    },
+    args: {
+        icon: /*#__PURE__*/ _jsx(Copy, {}),
+        "aria-label": "Copy",
+        variant: "ghost",
+        disabled: false
+    }
+};
+export default meta;
+export const Default = {
+    tags: [
+        "!dev"
+    ],
+    render: (args)=>/*#__PURE__*/ _jsx(IconButton, {
+            ...args
+        })
+};
+export const Demo = {
+    tags: [
+        "!autodocs"
+    ],
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-4",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-4",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "w-16 typo-body text-text-secondary",
+                            children: "Ghost:"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Copy, {}),
+                            "aria-label": "Copy",
+                            variant: "ghost"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Edit, {}),
+                            "aria-label": "Edit",
+                            variant: "ghost"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Trash2, {}),
+                            "aria-label": "Delete",
+                            variant: "ghost"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Download, {}),
+                            "aria-label": "Download",
+                            variant: "ghost"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Settings, {}),
+                            "aria-label": "Settings",
+                            variant: "ghost"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(AlignLeft, {}),
+                            "aria-label": "Align",
+                            variant: "ghost"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-4",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "w-16 typo-body text-text-secondary",
+                            children: "Link:"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Copy, {}),
+                            "aria-label": "Copy",
+                            variant: "link"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Edit, {}),
+                            "aria-label": "Edit",
+                            variant: "link"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Trash2, {}),
+                            "aria-label": "Delete",
+                            variant: "link"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Download, {}),
+                            "aria-label": "Download",
+                            variant: "link"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Settings, {}),
+                            "aria-label": "Settings",
+                            variant: "link"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(AlignLeft, {}),
+                            "aria-label": "Align",
+                            variant: "link"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-4",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "w-16 typo-body text-text-secondary",
+                            children: "Disabled:"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Copy, {}),
+                            "aria-label": "Copy",
+                            variant: "ghost",
+                            disabled: true
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            icon: /*#__PURE__*/ _jsx(Copy, {}),
+                            "aria-label": "Copy",
+                            variant: "link",
+                            disabled: true
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=icon-button.stories.js.map

package/dist/src/components/icon-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icon-button.stories.tsx"],"sourcesContent":["import { Controls, Primary, Title } from \"@storybook/addon-docs/blocks\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport {\n\tAlignLeft,\n\tCopy,\n\tDownload,\n\tEdit,\n\tSettings,\n\tTrash2,\n} from \"lucide-react\";\nimport { IconButton } from \"./icon-button\";\n\nconst meta = {\n\ttitle: \"Component/IconButton\",\n\tcomponent: IconButton,\n\tparameters: {\n\t\tdocs: {\n\t\t\tpage: () => (\n\t\t\t\t<>\n\t\t\t\t\t<Title />\n\t\t\t\t\t<Primary />\n\t\t\t\t\t<Controls />\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t},\n\targTypes: {\n\t\tvariant: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"ghost\", \"link\"],\n\t\t},\n\t\tdisabled: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t},\n\targs: {\n\t\ticon: <Copy />,\n\t\t\"aria-label\": \"Copy\",\n\t\tvariant: \"ghost\",\n\t\tdisabled: false,\n\t},\n} satisfies Meta<typeof IconButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n\ttags: [\"!dev\"],\n\trender: (args) => <IconButton {...args} />,\n};\n\nexport const Demo: Story = {\n\ttags: [\"!autodocs\"],\n\trender: () => (\n\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t<div className=\"flex items-center gap-4\">\n\t\t\t\t<span className=\"w-16 typo-body text-text-secondary\">Ghost:</span>\n\t\t\t\t<IconButton icon={<Copy />} aria-label=\"Copy\" variant=\"ghost\" />\n\t\t\t\t<IconButton icon={<Edit />} aria-label=\"Edit\" variant=\"ghost\" />\n\t\t\t\t<IconButton icon={<Trash2 />} aria-label=\"Delete\" variant=\"ghost\" />\n\t\t\t\t<IconButton icon={<Download />} aria-label=\"Download\" variant=\"ghost\" />\n\t\t\t\t<IconButton icon={<Settings />} aria-label=\"Settings\" variant=\"ghost\" />\n\t\t\t\t<IconButton icon={<AlignLeft />} aria-label=\"Align\" variant=\"ghost\" />\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-4\">\n\t\t\t\t<span className=\"w-16 typo-body text-text-secondary\">Link:</span>\n\t\t\t\t<IconButton icon={<Copy />} aria-label=\"Copy\" variant=\"link\" />\n\t\t\t\t<IconButton icon={<Edit />} aria-label=\"Edit\" variant=\"link\" />\n\t\t\t\t<IconButton icon={<Trash2 />} aria-label=\"Delete\" variant=\"link\" />\n\t\t\t\t<IconButton icon={<Download />} aria-label=\"Download\" variant=\"link\" />\n\t\t\t\t<IconButton icon={<Settings />} aria-label=\"Settings\" variant=\"link\" />\n\t\t\t\t<IconButton icon={<AlignLeft />} aria-label=\"Align\" variant=\"link\" />\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-4\">\n\t\t\t\t<span className=\"w-16 typo-body text-text-secondary\">Disabled:</span>\n\t\t\t\t<IconButton\n\t\t\t\t\ticon={<Copy />}\n\t\t\t\t\taria-label=\"Copy\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tdisabled\n\t\t\t\t/>\n\t\t\t\t<IconButton icon={<Copy />} aria-label=\"Copy\" variant=\"link\" disabled />\n\t\t\t</div>\n\t\t</div>\n\t),\n};\n"],"names":["Controls","Primary","Title","AlignLeft","Copy","Download","Edit","Settings","Trash2","IconButton","meta","title","component","parameters","docs","page","argTypes","variant","control","options","disabled","args","icon","Default","tags","render","Demo","div","className","span","aria-label"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,OAAO,EAAEC,KAAK,QAAQ,+BAA+B;AAExE,SACCC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,IAAI,EACJC,QAAQ,EACRC,MAAM,QACA,eAAe;AACtB,SAASC,UAAU,QAAQ,mBAAgB;AAE3C,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,MAAM;YACLC,MAAM,kBACL;;sCACC,KAACb;sCACD,KAACD;sCACD,KAACD;;;QAGJ;IACD;IACAgB,UAAU;QACTC,SAAS;YACRC,SAAS;YACTC,SAAS;gBAAC;gBAAS;aAAO;QAC3B;QACAC,UAAU;YACTF,SAAS;QACV;IACD;IACAG,MAAM;QACLC,oBAAM,KAAClB;QACP,cAAc;QACda,SAAS;QACTG,UAAU;IACX;AACD;AAEA,eAAeV,KAAK;AAGpB,OAAO,MAAMa,UAAiB;IAC7BC,MAAM;QAAC;KAAO;IACdC,QAAQ,CAACJ,qBAAS,KAACZ;YAAY,GAAGY,IAAI;;AACvC,EAAE;AAEF,OAAO,MAAMK,OAAc;IAC1BF,MAAM;QAAC;KAAY;IACnBC,QAAQ,kBACP,MAACE;YAAIC,WAAU;;8BACd,MAACD;oBAAIC,WAAU;;sCACd,KAACC;4BAAKD,WAAU;sCAAqC;;sCACrD,KAACnB;4BAAWa,oBAAM,KAAClB;4BAAS0B,cAAW;4BAAOb,SAAQ;;sCACtD,KAACR;4BAAWa,oBAAM,KAAChB;4BAASwB,cAAW;4BAAOb,SAAQ;;sCACtD,KAACR;4BAAWa,oBAAM,KAACd;4BAAWsB,cAAW;4BAASb,SAAQ;;sCAC1D,KAACR;4BAAWa,oBAAM,KAACjB;4BAAayB,cAAW;4BAAWb,SAAQ;;sCAC9D,KAACR;4BAAWa,oBAAM,KAACf;4BAAauB,cAAW;4BAAWb,SAAQ;;sCAC9D,KAACR;4BAAWa,oBAAM,KAACnB;4BAAc2B,cAAW;4BAAQb,SAAQ;;;;8BAE7D,MAACU;oBAAIC,WAAU;;sCACd,KAACC;4BAAKD,WAAU;sCAAqC;;sCACrD,KAACnB;4BAAWa,oBAAM,KAAClB;4BAAS0B,cAAW;4BAAOb,SAAQ;;sCACtD,KAACR;4BAAWa,oBAAM,KAAChB;4BAASwB,cAAW;4BAAOb,SAAQ;;sCACtD,KAACR;4BAAWa,oBAAM,KAACd;4BAAWsB,cAAW;4BAASb,SAAQ;;sCAC1D,KAACR;4BAAWa,oBAAM,KAACjB;4BAAayB,cAAW;4BAAWb,SAAQ;;sCAC9D,KAACR;4BAAWa,oBAAM,KAACf;4BAAauB,cAAW;4BAAWb,SAAQ;;sCAC9D,KAACR;4BAAWa,oBAAM,KAACnB;4BAAc2B,cAAW;4BAAQb,SAAQ;;;;8BAE7D,MAACU;oBAAIC,WAAU;;sCACd,KAACC;4BAAKD,WAAU;sCAAqC;;sCACrD,KAACnB;4BACAa,oBAAM,KAAClB;4BACP0B,cAAW;4BACXb,SAAQ;4BACRG,QAAQ;;sCAET,KAACX;4BAAWa,oBAAM,KAAClB;4BAAS0B,cAAW;4BAAOb,SAAQ;4BAAOG,QAAQ;;;;;;AAIzE,EAAE"}

package/dist/src/components/operation-outcome-view.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+type OperationOutcomeSeverity = "fatal" | "error" | "warning" | "information";
+export interface OperationOutcomeIssue {
+    code: string;
+    severity: OperationOutcomeSeverity;
+    diagnostics?: string;
+    expression?: string[];
+    details?: {
+        coding?: {
+            system?: string;
+            code?: string;
+            display?: string;
+        }[];
+        text?: string;
+    };
+}
+export interface OperationOutcome {
+    resourceType: "OperationOutcome";
+    issue: OperationOutcomeIssue[];
+}
+export type OperationOutcomeViewProps = {
+    resource: OperationOutcome;
+    onIssueClick?: (issue: OperationOutcomeIssue) => void;
+} & Omit<React.ComponentProps<"div">, "resource">;
+export declare function OperationOutcomeView({ resource, onIssueClick, className, ...props }: OperationOutcomeViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=operation-outcome-view.d.ts.map

package/dist/src/components/operation-outcome-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operation-outcome-view.d.ts","sourceRoot":"","sources":["../../../src/components/operation-outcome-view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,wBAAwB,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC;AAE9E,MAAM,WAAW,qBAAqB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,wBAAwB,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE;QACT,MAAM,CAAC,EAAE;YAAE,MAAM,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAChE,IAAI,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;CACF;AAED,MAAM,WAAW,gBAAgB;IAChC,YAAY,EAAE,kBAAkB,CAAC;IACjC,KAAK,EAAE,qBAAqB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,yBAAyB,GAAG;IACvC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACtD,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAwIlD,wBAAgB,oBAAoB,CAAC,EACpC,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACR,EAAE,yBAAyB,2CAkF3B"}

package/dist/src/components/operation-outcome-view.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy, Info, TriangleAlert } from "lucide-react";
+import React from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../shadcn/components/ui/tooltip.js";
+import { cn } from "../shadcn/lib/utils.js";
+const severityOrder = [
+    "fatal",
+    "error",
+    "warning",
+    "information"
+];
+const severityConfig = {
+    fatal: {
+        header: cn("bg-bg-error-primary_inverse", "text-text-primary_on-brand"),
+        text: "text-text-error-primary",
+        icon: TriangleAlert,
+        label: "fatal"
+    },
+    error: {
+        header: cn("bg-bg-error-primary_inverse", "text-text-primary_on-brand"),
+        text: "text-text-error-primary",
+        icon: TriangleAlert,
+        label: "error"
+    },
+    warning: {
+        header: cn("bg-bg-warning-primary_inverse", "text-text-warning-primary"),
+        text: "text-text-warning-primary",
+        icon: TriangleAlert,
+        label: "warning"
+    },
+    information: {
+        header: cn("bg-bg-info-primary_inverse", "text-text-primary_on-brand"),
+        text: "text-text-info-primary",
+        icon: Info,
+        label: "info"
+    }
+};
+const issueCodeLabels = {
+    "constraint-error": "Constraint violation",
+    "constraint-exception": "Constraint exception",
+    "empty-value": "Empty value",
+    "expected-array": "Expected array",
+    "extension-for-repeated-primitive-types-must-be-an-array": "Extension must be array",
+    "extension-for-scalar-primitive-types-must-be-an-object": "Extension must be object",
+    "internal-validator-error": "Internal validator error",
+    "invalid-cardinality": "Invalid cardinality",
+    "invalid-constant": "Invalid constant",
+    "invalid-extension-cardinality": "Invalid extension cardinality",
+    "invalid-slice-cardinality": "Invalid slice cardinality",
+    "invalid-slice-default": "Invalid slice default",
+    "invalid-slicing-ordrer": "Invalid slicing order",
+    "invalid-target-profile": "Invalid target profile",
+    "invalid-type": "Invalid type",
+    "non-existent-resource": "Resource not found",
+    "required-key": "Required field",
+    "terminology-binding-error": "Terminology binding error",
+    "terminology-binding-check": "Terminology binding check",
+    "too-many-union-subtypes": "Too many union subtypes",
+    "underscore-keys-should-be-element-type": "Invalid underscore key",
+    "underscore-property-on-complex-type": "Invalid underscore property",
+    "unexpected-array": "Unexpected array",
+    "unexpected-object": "Unexpected object",
+    "unknown-extension": "Unknown extension",
+    "unknown-key": "Unknown property",
+    "unknown-profile": "Unknown profile",
+    "unknown-resource-type": "Unknown resource type",
+    "unmatched-element-in-closed-slicing": "Unmatched element in slicing",
+    "unmathced-resource": "Unmatched resource",
+    "wrong-union-type": "Wrong union type",
+    processing: "Processing error",
+    invalid: "Invalid",
+    structure: "Structure error",
+    required: "Required",
+    value: "Invalid value",
+    invariant: "Invariant violation",
+    "not-found": "Not found",
+    "not-supported": "Not supported",
+    duplicate: "Duplicate",
+    "business-rule": "Business rule violation",
+    conflict: "Conflict",
+    transient: "Transient error",
+    exception: "Exception"
+};
+function getIssueCode(issue) {
+    return issue.details?.coding?.[0]?.code ?? issue.code;
+}
+function getIssueCodeLabel(code) {
+    return issueCodeLabels[code] ?? code;
+}
+function groupIssuesBySeverity(issues) {
+    const groups = new Map();
+    for (const issue of issues){
+        const existing = groups.get(issue.severity) ?? [];
+        existing.push(issue);
+        groups.set(issue.severity, existing);
+    }
+    return severityOrder.filter((s)=>groups.has(s)).map((s)=>({
+            severity: s,
+            issues: groups.get(s)
+        }));
+}
+function CopyButton({ resource }) {
+    const [copied, setCopied] = React.useState(false);
+    const handleCopy = (e)=>{
+        e.stopPropagation();
+        navigator.clipboard.writeText(JSON.stringify(resource, null, 2));
+        setCopied(true);
+        setTimeout(()=>setCopied(false), 2000);
+    };
+    return /*#__PURE__*/ _jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ _jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx("button", {
+                    type: "button",
+                    className: "p-1 rounded hover:bg-white/20 transition-colors [&>svg]:size-3.5",
+                    onClick: handleCopy,
+                    children: copied ? /*#__PURE__*/ _jsx(Check, {}) : /*#__PURE__*/ _jsx(Copy, {})
+                })
+            }),
+            /*#__PURE__*/ _jsx(TooltipContent, {
+                side: "bottom",
+                children: copied ? "Copied" : "Copy OperationOutcome"
+            })
+        ]
+    });
+}
+export function OperationOutcomeView({ resource, onIssueClick, className, ...props }) {
+    const groups = groupIssuesBySeverity(resource.issue);
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "operation-outcome-view",
+        className: cn("flex flex-col", className),
+        ...props,
+        children: groups.map(({ severity, issues })=>{
+            const config = severityConfig[severity];
+            const Icon = config.icon;
+            const count = issues.length;
+            const label = `${count} ${config.label}${count !== 1 ? "s" : ""}`;
+            return /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: cn("flex items-center gap-2 px-4 h-8", "[&>svg]:size-4 [&>svg]:shrink-0", "typo-body", "sticky top-0 z-10", config.header),
+                        children: [
+                            /*#__PURE__*/ _jsx(Icon, {}),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "grow",
+                                children: label
+                            }),
+                            /*#__PURE__*/ _jsx(CopyButton, {
+                                resource: resource
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex flex-col py-1 bg-bg-primary",
+                        children: issues.map((issue)=>{
+                            const expressionText = issue.expression?.join(", ");
+                            const codeLabel = getIssueCodeLabel(getIssueCode(issue));
+                            const key = `${issue.severity}-${getIssueCode(issue)}-${expressionText ?? ""}`;
+                            const row = /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                className: cn("flex cursor-pointer hover:bg-bg-secondary w-full text-left"),
+                                onClick: onIssueClick ? ()=>onIssueClick(issue) : undefined,
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: cn("px-4 py-1 typo-body font-medium whitespace-nowrap", config.text),
+                                        children: codeLabel
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "pr-4 py-1 typo-body text-text-primary whitespace-nowrap",
+                                        children: expressionText ?? ""
+                                    })
+                                ]
+                            }, key);
+                            if (!issue.diagnostics) return row;
+                            return /*#__PURE__*/ _jsxs(Tooltip, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                        asChild: true,
+                                        children: row
+                                    }),
+                                    /*#__PURE__*/ _jsx(TooltipContent, {
+                                        side: "bottom",
+                                        align: "start",
+                                        className: "max-w-lg whitespace-pre-wrap",
+                                        children: issue.diagnostics
+                                    })
+                                ]
+                            }, key);
+                        })
+                    })
+                ]
+            }, severity);
+        })
+    });
+}
+
+//# sourceMappingURL=operation-outcome-view.js.map

package/dist/src/components/operation-outcome-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/operation-outcome-view.tsx"],"sourcesContent":["import { Check, Copy, Info, TriangleAlert } from \"lucide-react\";\nimport React from \"react\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"../shadcn/components/ui/tooltip\";\nimport { cn } from \"../shadcn/lib/utils\";\n\ntype OperationOutcomeSeverity = \"fatal\" | \"error\" | \"warning\" | \"information\";\n\nexport interface OperationOutcomeIssue {\n\tcode: string;\n\tseverity: OperationOutcomeSeverity;\n\tdiagnostics?: string;\n\texpression?: string[];\n\tdetails?: {\n\t\tcoding?: { system?: string; code?: string; display?: string }[];\n\t\ttext?: string;\n\t};\n}\n\nexport interface OperationOutcome {\n\tresourceType: \"OperationOutcome\";\n\tissue: OperationOutcomeIssue[];\n}\n\nexport type OperationOutcomeViewProps = {\n\tresource: OperationOutcome;\n\tonIssueClick?: (issue: OperationOutcomeIssue) => void;\n} & Omit<React.ComponentProps<\"div\">, \"resource\">;\n\nconst severityOrder: OperationOutcomeSeverity[] = [\n\t\"fatal\",\n\t\"error\",\n\t\"warning\",\n\t\"information\",\n];\n\nconst severityConfig = {\n\tfatal: {\n\t\theader: cn(\"bg-bg-error-primary_inverse\", \"text-text-primary_on-brand\"),\n\t\ttext: \"text-text-error-primary\",\n\t\ticon: TriangleAlert,\n\t\tlabel: \"fatal\",\n\t},\n\terror: {\n\t\theader: cn(\"bg-bg-error-primary_inverse\", \"text-text-primary_on-brand\"),\n\t\ttext: \"text-text-error-primary\",\n\t\ticon: TriangleAlert,\n\t\tlabel: \"error\",\n\t},\n\twarning: {\n\t\theader: cn(\"bg-bg-warning-primary_inverse\", \"text-text-warning-primary\"),\n\t\ttext: \"text-text-warning-primary\",\n\t\ticon: TriangleAlert,\n\t\tlabel: \"warning\",\n\t},\n\tinformation: {\n\t\theader: cn(\"bg-bg-info-primary_inverse\", \"text-text-primary_on-brand\"),\n\t\ttext: \"text-text-info-primary\",\n\t\ticon: Info,\n\t\tlabel: \"info\",\n\t},\n} as const;\n\nconst issueCodeLabels: Record<string, string> = {\n\t\"constraint-error\": \"Constraint violation\",\n\t\"constraint-exception\": \"Constraint exception\",\n\t\"empty-value\": \"Empty value\",\n\t\"expected-array\": \"Expected array\",\n\t\"extension-for-repeated-primitive-types-must-be-an-array\":\n\t\t\"Extension must be array\",\n\t\"extension-for-scalar-primitive-types-must-be-an-object\":\n\t\t\"Extension must be object\",\n\t\"internal-validator-error\": \"Internal validator error\",\n\t\"invalid-cardinality\": \"Invalid cardinality\",\n\t\"invalid-constant\": \"Invalid constant\",\n\t\"invalid-extension-cardinality\": \"Invalid extension cardinality\",\n\t\"invalid-slice-cardinality\": \"Invalid slice cardinality\",\n\t\"invalid-slice-default\": \"Invalid slice default\",\n\t\"invalid-slicing-ordrer\": \"Invalid slicing order\",\n\t\"invalid-target-profile\": \"Invalid target profile\",\n\t\"invalid-type\": \"Invalid type\",\n\t\"non-existent-resource\": \"Resource not found\",\n\t\"required-key\": \"Required field\",\n\t\"terminology-binding-error\": \"Terminology binding error\",\n\t\"terminology-binding-check\": \"Terminology binding check\",\n\t\"too-many-union-subtypes\": \"Too many union subtypes\",\n\t\"underscore-keys-should-be-element-type\": \"Invalid underscore key\",\n\t\"underscore-property-on-complex-type\": \"Invalid underscore property\",\n\t\"unexpected-array\": \"Unexpected array\",\n\t\"unexpected-object\": \"Unexpected object\",\n\t\"unknown-extension\": \"Unknown extension\",\n\t\"unknown-key\": \"Unknown property\",\n\t\"unknown-profile\": \"Unknown profile\",\n\t\"unknown-resource-type\": \"Unknown resource type\",\n\t\"unmatched-element-in-closed-slicing\": \"Unmatched element in slicing\",\n\t\"unmathced-resource\": \"Unmatched resource\",\n\t\"wrong-union-type\": \"Wrong union type\",\n\tprocessing: \"Processing error\",\n\tinvalid: \"Invalid\",\n\tstructure: \"Structure error\",\n\trequired: \"Required\",\n\tvalue: \"Invalid value\",\n\tinvariant: \"Invariant violation\",\n\t\"not-found\": \"Not found\",\n\t\"not-supported\": \"Not supported\",\n\tduplicate: \"Duplicate\",\n\t\"business-rule\": \"Business rule violation\",\n\tconflict: \"Conflict\",\n\ttransient: \"Transient error\",\n\texception: \"Exception\",\n};\n\nfunction getIssueCode(issue: OperationOutcomeIssue): string {\n\treturn issue.details?.coding?.[0]?.code ?? issue.code;\n}\n\nfunction getIssueCodeLabel(code: string): string {\n\treturn issueCodeLabels[code] ?? code;\n}\n\nfunction groupIssuesBySeverity(issues: OperationOutcomeIssue[]) {\n\tconst groups = new Map<OperationOutcomeSeverity, OperationOutcomeIssue[]>();\n\tfor (const issue of issues) {\n\t\tconst existing = groups.get(issue.severity) ?? [];\n\t\texisting.push(issue);\n\t\tgroups.set(issue.severity, existing);\n\t}\n\treturn severityOrder\n\t\t.filter((s) => groups.has(s))\n\t\t.map((s) => ({\n\t\t\tseverity: s,\n\t\t\tissues: groups.get(s) as OperationOutcomeIssue[],\n\t\t}));\n}\n\nfunction CopyButton({ resource }: { resource: OperationOutcome }) {\n\tconst [copied, setCopied] = React.useState(false);\n\n\tconst handleCopy = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tnavigator.clipboard.writeText(JSON.stringify(resource, null, 2));\n\t\tsetCopied(true);\n\t\tsetTimeout(() => setCopied(false), 2000);\n\t};\n\n\treturn (\n\t\t<Tooltip>\n\t\t\t<TooltipTrigger asChild>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"p-1 rounded hover:bg-white/20 transition-colors [&>svg]:size-3.5\"\n\t\t\t\t\tonClick={handleCopy}\n\t\t\t\t>\n\t\t\t\t\t{copied ? <Check /> : <Copy />}\n\t\t\t\t</button>\n\t\t\t</TooltipTrigger>\n\t\t\t<TooltipContent side=\"bottom\">\n\t\t\t\t{copied ? \"Copied\" : \"Copy OperationOutcome\"}\n\t\t\t</TooltipContent>\n\t\t</Tooltip>\n\t);\n}\n\nexport function OperationOutcomeView({\n\tresource,\n\tonIssueClick,\n\tclassName,\n\t...props\n}: OperationOutcomeViewProps) {\n\tconst groups = groupIssuesBySeverity(resource.issue);\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"operation-outcome-view\"\n\t\t\tclassName={cn(\"flex flex-col\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{groups.map(({ severity, issues }) => {\n\t\t\t\tconst config = severityConfig[severity];\n\t\t\t\tconst Icon = config.icon;\n\t\t\t\tconst count = issues.length;\n\t\t\t\tconst label = `${count} ${config.label}${count !== 1 ? \"s\" : \"\"}`;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={severity}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex items-center gap-2 px-4 h-8\",\n\t\t\t\t\t\t\t\t\"[&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t\t\t\t\t\"typo-body\",\n\t\t\t\t\t\t\t\t\"sticky top-0 z-10\",\n\t\t\t\t\t\t\t\tconfig.header,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t\t<span className=\"grow\">{label}</span>\n\t\t\t\t\t\t\t<CopyButton resource={resource} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex flex-col py-1 bg-bg-primary\">\n\t\t\t\t\t\t\t{issues.map((issue) => {\n\t\t\t\t\t\t\t\tconst expressionText = issue.expression?.join(\", \");\n\t\t\t\t\t\t\t\tconst codeLabel = getIssueCodeLabel(getIssueCode(issue));\n\t\t\t\t\t\t\t\tconst key = `${issue.severity}-${getIssueCode(issue)}-${expressionText ?? \"\"}`;\n\n\t\t\t\t\t\t\t\tconst row = (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"flex cursor-pointer hover:bg-bg-secondary w-full text-left\",\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\tonIssueClick ? () => onIssueClick(issue) : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"px-4 py-1 typo-body font-medium whitespace-nowrap\",\n\t\t\t\t\t\t\t\t\t\t\t\tconfig.text,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{codeLabel}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span className=\"pr-4 py-1 typo-body text-text-primary whitespace-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t{expressionText ?? \"\"}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif (!issue.diagnostics) return row;\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Tooltip key={key}>\n\t\t\t\t\t\t\t\t\t\t<TooltipTrigger asChild>{row}</TooltipTrigger>\n\t\t\t\t\t\t\t\t\t\t<TooltipContent\n\t\t\t\t\t\t\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\t\t\t\t\t\t\talign=\"start\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"max-w-lg whitespace-pre-wrap\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{issue.diagnostics}\n\t\t\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"names":["Check","Copy","Info","TriangleAlert","React","Tooltip","TooltipContent","TooltipTrigger","cn","severityOrder","severityConfig","fatal","header","text","icon","label","error","warning","information","issueCodeLabels","processing","invalid","structure","required","value","invariant","duplicate","conflict","transient","exception","getIssueCode","issue","details","coding","code","getIssueCodeLabel","groupIssuesBySeverity","issues","groups","Map","existing","get","severity","push","set","filter","s","has","map","CopyButton","resource","copied","setCopied","useState","handleCopy","e","stopPropagation","navigator","clipboard","writeText","JSON","stringify","setTimeout","asChild","button","type","className","onClick","side","OperationOutcomeView","onIssueClick","props","div","data-slot","config","Icon","count","length","span","expressionText","expression","join","codeLabel","key","row","undefined","diagnostics","align"],"mappings":"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"}

package/dist/src/components/operation-outcome-view.stories.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OperationOutcomeView } from "./operation-outcome-view.js";
+const meta = {
+    title: "Component/OperationOutcomeView",
+    component: OperationOutcomeView,
+    parameters: {
+        layout: "padded"
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        resource: {
+            resourceType: "OperationOutcome",
+            issue: [
+                {
+                    code: "invalid",
+                    severity: "error",
+                    diagnostics: "Unknown key:",
+                    expression: [
+                        '"communication"'
+                    ]
+                },
+                {
+                    code: "invalid",
+                    severity: "error",
+                    diagnostics: "Unknown key:",
+                    expression: [
+                        '"address"'
+                    ]
+                },
+                {
+                    code: "invalid",
+                    severity: "error",
+                    diagnostics: "Unknown key:",
+                    expression: [
+                        '"temp1"'
+                    ]
+                },
+                {
+                    code: "invalid",
+                    severity: "error",
+                    diagnostics: "Unknown key:",
+                    expression: [
+                        '"temp2"'
+                    ]
+                }
+            ]
+        }
+    }
+};
+export const Demo = {
+    tags: [
+        "!autodocs"
+    ],
+    args: Default.args,
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-6",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-h4 mb-2",
+                            children: "Errors only"
+                        }),
+                        /*#__PURE__*/ _jsx(OperationOutcomeView, {
+                            resource: {
+                                resourceType: "OperationOutcome",
+                                issue: [
+                                    {
+                                        code: "invalid",
+                                        severity: "error",
+                                        diagnostics: "Unknown key:",
+                                        expression: [
+                                            '"communication"'
+                                        ]
+                                    },
+                                    {
+                                        code: "invalid",
+                                        severity: "error",
+                                        diagnostics: "Unknown key:",
+                                        expression: [
+                                            '"address"'
+                                        ]
+                                    }
+                                ]
+                            }
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-h4 mb-2",
+                            children: "Warnings only"
+                        }),
+                        /*#__PURE__*/ _jsx(OperationOutcomeView, {
+                            resource: {
+                                resourceType: "OperationOutcome",
+                                issue: [
+                                    {
+                                        code: "business-rule",
+                                        severity: "warning",
+                                        diagnostics: "Resource has no narrative text",
+                                        expression: [
+                                            "Patient.text"
+                                        ]
+                                    },
+                                    {
+                                        code: "informational",
+                                        severity: "warning",
+                                        diagnostics: "Best practice violation",
+                                        expression: [
+                                            "Patient.contact"
+                                        ]
+                                    }
+                                ]
+                            }
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-h4 mb-2",
+                            children: "Mixed severities"
+                        }),
+                        /*#__PURE__*/ _jsx(OperationOutcomeView, {
+                            resource: {
+                                resourceType: "OperationOutcome",
+                                issue: [
+                                    {
+                                        code: "structure",
+                                        severity: "fatal",
+                                        diagnostics: "Invalid JSON"
+                                    },
+                                    {
+                                        code: "invalid",
+                                        severity: "error",
+                                        diagnostics: "Unknown key:",
+                                        expression: [
+                                            '"temp1"'
+                                        ]
+                                    },
+                                    {
+                                        code: "invalid",
+                                        severity: "error",
+                                        diagnostics: "Unknown key:",
+                                        expression: [
+                                            '"temp2"'
+                                        ]
+                                    },
+                                    {
+                                        code: "business-rule",
+                                        severity: "warning",
+                                        diagnostics: "Missing preferred field",
+                                        expression: [
+                                            "Patient.name.given"
+                                        ]
+                                    },
+                                    {
+                                        code: "informational",
+                                        severity: "information",
+                                        diagnostics: "Validation completed with issues"
+                                    }
+                                ]
+                            }
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-h4 mb-2",
+                            children: "With multiple expressions"
+                        }),
+                        /*#__PURE__*/ _jsx(OperationOutcomeView, {
+                            resource: {
+                                resourceType: "OperationOutcome",
+                                issue: [
+                                    {
+                                        code: "required",
+                                        severity: "error",
+                                        diagnostics: "Missing required element",
+                                        expression: [
+                                            "Patient.identifier",
+                                            "Patient.name"
+                                        ]
+                                    },
+                                    {
+                                        code: "value",
+                                        severity: "error",
+                                        diagnostics: "Invalid date format",
+                                        expression: [
+                                            "Patient.birthDate"
+                                        ]
+                                    }
+                                ]
+                            }
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=operation-outcome-view.stories.js.map