@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

package/dist/src/components/tree-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/components/tree-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEX,YAAY,EAEZ,YAAY,EAEZ,MAAM,qBAAqB,CAAC;AAQ7B,OAAO,KAAoB,MAAM,OAAO,CAAC;AAsBzC,UAAU,YAAY,CAAC,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,CAAC;CACT;AAuBD,iBAAS,QAAQ,CAAC,CAAC,EAAE,EACpB,UAAU,EACV,KAAK,EACL,cAAc,EACd,eAAe,EACf,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,eAAe,EACf,WAAW,GACX,EAAE;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,CAChB,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EACnC,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAC/B,KAAK,CAAC,SAAS,CAAC;IACrB,QAAQ,CAAC,EACN,CAAC,CAAC,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAC9D,SAAS,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,2CA6EA;AAED,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/src/components/tree-view.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { hotkeysCoreFeature, renamingFeature, selectionFeature, syncDataLoaderFeature } from "@headless-tree/core";
+import { useTree } from "@headless-tree/react";
+import React, { useEffect } from "react";
+import { Tree, TreeItem, TreeItemLabel } from "../shadcn/components/ui/tree.js";
+import { cn } from "../shadcn/lib/utils.js";
+// Styles
+const treeItemStyle = cn("relative", "before:absolute", "before:inset-0", "before:-ms-1", "before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]");
+const treeItemLabelStyle = cn("before:bg-background", "relative", "before:absolute", "before:inset-x-0", "before:-inset-y-0", "before:-z-10");
+const customClickBehavior = {
+    itemInstance: {
+        getProps: ({ tree, item, prev })=>({
+                ...prev?.(),
+                onClick: ()=>{
+                    item.primaryAction();
+                    if (item.isExpanded()) {
+                        item.collapse();
+                    } else {
+                        item.expand();
+                    }
+                    if (!item.isFolder()) {
+                        tree.setSelectedItems([
+                            item.getItemMeta().itemId
+                        ]);
+                    }
+                }
+            })
+    }
+};
+const indent = 24;
+function TreeView({ rootItemId, items, selectedItemId, expandedItemIds, onSelectItem, customItemView, onRename, disableHover, zebra, horizontalLines, hideChevron }) {
+    const [state, setState] = React.useState({});
+    const treeConfig = {
+        initialState: {
+            selectedItems: selectedItemId ? [
+                selectedItemId
+            ] : [],
+            expandedItems: expandedItemIds ?? []
+        },
+        state,
+        setState,
+        indent,
+        rootItemId: rootItemId,
+        isItemFolder: (item)=>item.getItemData()?.children !== undefined,
+        getItemName: (item)=>item.getItemData()?.name,
+        dataLoader: {
+            getItem: (itemId)=>items[itemId] ?? {},
+            getChildren: (itemId)=>items[itemId]?.children ?? []
+        },
+        ...onRename ? {
+            onRename: onRename
+        } : {},
+        features: [
+            syncDataLoaderFeature,
+            hotkeysCoreFeature,
+            selectionFeature,
+            customClickBehavior,
+            renamingFeature
+        ]
+    };
+    const tree = useTree(treeConfig);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We must have explicit sync here
+    useEffect(()=>{
+        tree.rebuildTree();
+    }, [
+        items
+    ]);
+    useEffect(()=>{
+        setState((currentState)=>{
+            return {
+                ...currentState,
+                selectedItems: selectedItemId ? [
+                    selectedItemId
+                ] : []
+            };
+        });
+    }, [
+        selectedItemId
+    ]);
+    return /*#__PURE__*/ _jsx(Tree, {
+        tree: tree,
+        indent: indent,
+        children: tree.getItems().map((item)=>{
+            return /*#__PURE__*/ _jsx(TreeItem, {
+                item: item,
+                className: cn(treeItemStyle, zebra ? "even:bg-bg-secondary even:[&_[data-slot=tree-item-label]]:bg-bg-secondary" : ""),
+                children: /*#__PURE__*/ _jsx(TreeItemLabel, {
+                    hideChevron: hideChevron ?? false,
+                    disableHover: disableHover ?? false,
+                    className: treeItemLabelStyle,
+                    onClick: ()=>onSelectItem?.(item),
+                    horizontalLines: horizontalLines ?? false,
+                    children: customItemView ? customItemView(item, tree) : item.getItemData()?.name
+                })
+            }, item.getId());
+        })
+    });
+}
+export { TreeView };
+
+//# sourceMappingURL=tree-view.js.map

package/dist/src/components/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tree-view.tsx"],"sourcesContent":["import type {\n\tFeatureImplementation,\n\tItemInstance,\n\tTreeConfig,\n\tTreeInstance,\n\tTreeState,\n} from \"@headless-tree/core\";\nimport {\n\thotkeysCoreFeature,\n\trenamingFeature,\n\tselectionFeature,\n\tsyncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport React, { useEffect } from \"react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"#shadcn/components/ui/tree\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\n// Styles\nconst treeItemStyle = cn(\n\t\"relative\",\n\t\"before:absolute\",\n\t\"before:inset-0\",\n\t\"before:-ms-1\",\n\t\"before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\",\n);\n\nconst treeItemLabelStyle = cn(\n\t\"before:bg-background\",\n\t\"relative\",\n\t\"before:absolute\",\n\t\"before:inset-x-0\",\n\t\"before:-inset-y-0\",\n\t\"before:-z-10\",\n);\n\ninterface TreeViewItem<T> {\n\tname: string;\n\tchildren?: string[];\n\tmeta?: T;\n}\n\nconst customClickBehavior: FeatureImplementation = {\n\titemInstance: {\n\t\tgetProps: ({ tree, item, prev }) => ({\n\t\t\t...prev?.(),\n\t\t\tonClick: () => {\n\t\t\t\titem.primaryAction();\n\t\t\t\tif (item.isExpanded()) {\n\t\t\t\t\titem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\titem.expand();\n\t\t\t\t}\n\t\t\t\tif (!item.isFolder()) {\n\t\t\t\t\ttree.setSelectedItems([item.getItemMeta().itemId]);\n\t\t\t\t}\n\t\t\t},\n\t\t}),\n\t},\n};\n\nconst indent = 24;\n\nfunction TreeView<T>({\n\trootItemId,\n\titems,\n\tselectedItemId,\n\texpandedItemIds,\n\tonSelectItem,\n\tcustomItemView,\n\tonRename,\n\tdisableHover,\n\tzebra,\n\thorizontalLines,\n\thideChevron,\n}: {\n\trootItemId: string;\n\tselectedItemId?: string;\n\texpandedItemIds?: string[];\n\tonSelectItem?: (item: ItemInstance<TreeViewItem<T>>) => void;\n\titems: Record<string, TreeViewItem<T>>;\n\tcustomItemView?: (\n\t\titem: ItemInstance<TreeViewItem<T>>,\n\t\ttree: TreeInstance<TreeViewItem<T>>,\n\t) => React.ReactNode;\n\tonRename?:\n\t\t| ((item: ItemInstance<TreeViewItem<T>>, value: string) => void)\n\t\t| undefined;\n\tdisableHover?: boolean;\n\tzebra?: boolean;\n\thorizontalLines?: boolean;\n\thideChevron?: boolean;\n}) {\n\tconst [state, setState] = React.useState<Partial<TreeState<TreeViewItem<T>>>>(\n\t\t{},\n\t);\n\tconst treeConfig: TreeConfig<TreeViewItem<T>> = {\n\t\tinitialState: {\n\t\t\tselectedItems: selectedItemId ? [selectedItemId] : [],\n\t\t\texpandedItems: expandedItemIds ?? [],\n\t\t},\n\t\tstate,\n\t\tsetState,\n\t\tindent,\n\t\trootItemId: rootItemId,\n\t\tisItemFolder: (item: ItemInstance<TreeViewItem<T>>) =>\n\t\t\titem.getItemData()?.children !== undefined,\n\t\tgetItemName: (item: ItemInstance<TreeViewItem<T>>) =>\n\t\t\titem.getItemData()?.name,\n\t\tdataLoader: {\n\t\t\tgetItem: (itemId) => (items[itemId] as TreeViewItem<T>) ?? {},\n\t\t\tgetChildren: (itemId) => items[itemId]?.children ?? [],\n\t\t},\n\t\t...(onRename ? { onRename: onRename } : {}),\n\t\tfeatures: [\n\t\t\tsyncDataLoaderFeature,\n\t\t\thotkeysCoreFeature,\n\t\t\tselectionFeature,\n\t\t\tcustomClickBehavior,\n\t\t\trenamingFeature,\n\t\t],\n\t};\n\n\tconst tree = useTree<TreeViewItem<T>>(treeConfig);\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: We must have explicit sync here\n\tuseEffect(() => {\n\t\ttree.rebuildTree();\n\t}, [items]);\n\n\tuseEffect(() => {\n\t\tsetState((currentState) => {\n\t\t\treturn {\n\t\t\t\t...currentState,\n\t\t\t\tselectedItems: selectedItemId ? [selectedItemId] : [],\n\t\t\t};\n\t\t});\n\t}, [selectedItemId]);\n\n\treturn (\n\t\t<Tree tree={tree} indent={indent}>\n\t\t\t{tree.getItems().map((item) => {\n\t\t\t\treturn (\n\t\t\t\t\t<TreeItem\n\t\t\t\t\t\tkey={item.getId()}\n\t\t\t\t\t\titem={item}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\ttreeItemStyle,\n\t\t\t\t\t\t\tzebra\n\t\t\t\t\t\t\t\t? \"even:bg-bg-secondary even:[&_[data-slot=tree-item-label]]:bg-bg-secondary\"\n\t\t\t\t\t\t\t\t: \"\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TreeItemLabel\n\t\t\t\t\t\t\thideChevron={hideChevron ?? false}\n\t\t\t\t\t\t\tdisableHover={disableHover ?? false}\n\t\t\t\t\t\t\tclassName={treeItemLabelStyle}\n\t\t\t\t\t\t\tonClick={() => onSelectItem?.(item)}\n\t\t\t\t\t\t\thorizontalLines={horizontalLines ?? false}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customItemView\n\t\t\t\t\t\t\t\t? customItemView(item, tree)\n\t\t\t\t\t\t\t\t: item.getItemData()?.name}\n\t\t\t\t\t\t</TreeItemLabel>\n\t\t\t\t\t</TreeItem>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Tree>\n\t);\n}\n\nexport { TreeView, type TreeViewItem, type TreeInstance };\n"],"names":["hotkeysCoreFeature","renamingFeature","selectionFeature","syncDataLoaderFeature","useTree","React","useEffect","Tree","TreeItem","TreeItemLabel","cn","treeItemStyle","treeItemLabelStyle","customClickBehavior","itemInstance","getProps","tree","item","prev","onClick","primaryAction","isExpanded","collapse","expand","isFolder","setSelectedItems","getItemMeta","itemId","indent","TreeView","rootItemId","items","selectedItemId","expandedItemIds","onSelectItem","customItemView","onRename","disableHover","zebra","horizontalLines","hideChevron","state","setState","useState","treeConfig","initialState","selectedItems","expandedItems","isItemFolder","getItemData","children","undefined","getItemName","name","dataLoader","getItem","getChildren","features","rebuildTree","currentState","getItems","map","className","getId"],"mappings":";AAOA,SACCA,kBAAkB,EAClBC,eAAe,EACfC,gBAAgB,EAChBC,qBAAqB,QACf,sBAAsB;AAC7B,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,OAAOC,SAASC,SAAS,QAAQ,QAAQ;AACzC,SAASC,IAAI,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,kCAA6B;AAC3E,SAASC,EAAE,QAAQ,yBAAuB;AAE1C,SAAS;AACT,MAAMC,gBAAgBD,GACrB,YACA,mBACA,kBACA,gBACA;AAGD,MAAME,qBAAqBF,GAC1B,wBACA,YACA,mBACA,oBACA,qBACA;AASD,MAAMG,sBAA6C;IAClDC,cAAc;QACbC,UAAU,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAM,CAAA;gBACpC,GAAGA,QAAQ;gBACXC,SAAS;oBACRF,KAAKG,aAAa;oBAClB,IAAIH,KAAKI,UAAU,IAAI;wBACtBJ,KAAKK,QAAQ;oBACd,OAAO;wBACNL,KAAKM,MAAM;oBACZ;oBACA,IAAI,CAACN,KAAKO,QAAQ,IAAI;wBACrBR,KAAKS,gBAAgB,CAAC;4BAACR,KAAKS,WAAW,GAAGC,MAAM;yBAAC;oBAClD;gBACD;YACD,CAAA;IACD;AACD;AAEA,MAAMC,SAAS;AAEf,SAASC,SAAY,EACpBC,UAAU,EACVC,KAAK,EACLC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,YAAY,EACZC,KAAK,EACLC,eAAe,EACfC,WAAW,EAkBX;IACA,MAAM,CAACC,OAAOC,SAAS,GAAGrC,MAAMsC,QAAQ,CACvC,CAAC;IAEF,MAAMC,aAA0C;QAC/CC,cAAc;YACbC,eAAed,iBAAiB;gBAACA;aAAe,GAAG,EAAE;YACrDe,eAAed,mBAAmB,EAAE;QACrC;QACAQ;QACAC;QACAd;QACAE,YAAYA;QACZkB,cAAc,CAAC/B,OACdA,KAAKgC,WAAW,IAAIC,aAAaC;QAClCC,aAAa,CAACnC,OACbA,KAAKgC,WAAW,IAAII;QACrBC,YAAY;YACXC,SAAS,CAAC5B,SAAW,AAACI,KAAK,CAACJ,OAAO,IAAwB,CAAC;YAC5D6B,aAAa,CAAC7B,SAAWI,KAAK,CAACJ,OAAO,EAAEuB,YAAY,EAAE;QACvD;QACA,GAAId,WAAW;YAAEA,UAAUA;QAAS,IAAI,CAAC,CAAC;QAC1CqB,UAAU;YACTtD;YACAH;YACAE;YACAW;YACAZ;SACA;IACF;IAEA,MAAMe,OAAOZ,QAAyBwC;IAEtC,2FAA2F;IAC3FtC,UAAU;QACTU,KAAK0C,WAAW;IACjB,GAAG;QAAC3B;KAAM;IAEVzB,UAAU;QACToC,SAAS,CAACiB;YACT,OAAO;gBACN,GAAGA,YAAY;gBACfb,eAAed,iBAAiB;oBAACA;iBAAe,GAAG,EAAE;YACtD;QACD;IACD,GAAG;QAACA;KAAe;IAEnB,qBACC,KAACzB;QAAKS,MAAMA;QAAMY,QAAQA;kBACxBZ,KAAK4C,QAAQ,GAAGC,GAAG,CAAC,CAAC5C;YACrB,qBACC,KAACT;gBAEAS,MAAMA;gBACN6C,WAAWpD,GACVC,eACA2B,QACG,8EACA;0BAGJ,cAAA,KAAC7B;oBACA+B,aAAaA,eAAe;oBAC5BH,cAAcA,gBAAgB;oBAC9ByB,WAAWlD;oBACXO,SAAS,IAAMe,eAAejB;oBAC9BsB,iBAAiBA,mBAAmB;8BAEnCJ,iBACEA,eAAelB,MAAMD,QACrBC,KAAKgC,WAAW,IAAII;;eAlBnBpC,KAAK8C,KAAK;QAsBlB;;AAGH;AAEA,SAASlC,QAAQ,GAAyC"}

package/dist/src/components/tree-view.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TreeView } from "./tree-view";
+declare const meta: Meta<typeof TreeView>;
+type ItemMeta = {
+    pinned?: boolean;
+    method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+    path?: string;
+};
+export default meta;
+type Story = StoryObj<typeof TreeView<ItemMeta>>;
+export declare const Default: Story;
+export declare const CustomItemView: Story;
+//# sourceMappingURL=tree-view.stories.d.ts.map

package/dist/src/components/tree-view.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tree-view.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAO/B,CAAC;AACF,KAAK,QAAQ,GAAG;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;AAqIjD,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAiFF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}

package/dist/src/components/tree-view.stories.js

@@ -0,0 +1,274 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Ellipsis, Pin, Plus } from "lucide-react";
+import React from "react";
+import { action } from "storybook/actions";
+import { Button } from "../shadcn/components/ui/button.js";
+import { PinIcon } from "../icons.js";
+import { TreeView } from "./tree-view.js";
+const meta = {
+    title: "Component/Tree view",
+    component: TreeView,
+    parameters: {
+        layout: "fullscreen"
+    },
+    tags: [
+        "autodocs"
+    ]
+};
+export default meta;
+const items = {
+    root: {
+        name: "Root",
+        children: [
+            "collection1",
+            "collection2",
+            "collection3"
+        ]
+    },
+    collection1: {
+        name: "Collection 1",
+        children: [
+            "request1",
+            "request2",
+            "request3"
+        ],
+        meta: {
+            pinned: true
+        }
+    },
+    collection2: {
+        name: "Collection 2",
+        children: [
+            "request4",
+            "request5",
+            "request6"
+        ]
+    },
+    collection3: {
+        name: "New Collection",
+        children: [
+            "request7",
+            "request8",
+            "request9",
+            "request10",
+            "request11",
+            "collection4"
+        ]
+    },
+    collection4: {
+        name: "New Collection",
+        children: [
+            "request12",
+            "request13",
+            "request14"
+        ]
+    },
+    request1: {
+        meta: {
+            method: "GET",
+            path: "/request1"
+        },
+        name: "Request 1"
+    },
+    request2: {
+        meta: {
+            method: "POST",
+            path: "/request2"
+        },
+        name: "Request 2"
+    },
+    request3: {
+        meta: {
+            method: "PUT",
+            path: "/request3"
+        },
+        name: "Request 3"
+    },
+    request4: {
+        meta: {
+            method: "DELETE",
+            path: "/request4"
+        },
+        name: "Request 4"
+    },
+    request5: {
+        meta: {
+            method: "PATCH",
+            path: "/request5"
+        },
+        name: "Request 5"
+    },
+    request6: {
+        meta: {
+            method: "GET",
+            path: "/request6"
+        },
+        name: "Request 6"
+    },
+    request7: {
+        meta: {
+            method: "PATCH",
+            path: "/fhir/Patient/123"
+        },
+        name: "Request 7"
+    },
+    request8: {
+        meta: {
+            method: "DELETE",
+            path: "/fhir/Patient/123"
+        },
+        name: "Request 8"
+    },
+    request9: {
+        meta: {
+            method: "PUT",
+            path: "/fhir/Patient/123"
+        },
+        name: "Request 9"
+    },
+    request10: {
+        meta: {
+            method: "POST",
+            path: "/fhir/Patient/123"
+        },
+        name: "Request 10"
+    },
+    request11: {
+        meta: {
+            method: "GET",
+            path: "/fhir/Patient/123"
+        },
+        name: "Request 11"
+    },
+    request12: {
+        meta: {
+            method: "PUT",
+            path: "/fhir/Patient/123"
+        },
+        name: "Request 12"
+    },
+    request13: {
+        meta: {
+            method: "PUT",
+            path: "/fhir/Patient/123"
+        },
+        name: "Request 13"
+    },
+    request14: {
+        meta: {
+            method: "PUT",
+            path: "/fhir/Patient/123"
+        },
+        name: "Request 14"
+    }
+};
+export const Default = {
+    args: {
+        items: items,
+        rootItemId: "root",
+        selectedItemId: "request9",
+        expandedItemIds: [
+            "collection3"
+        ],
+        onSelectItem: (a)=>action("onSelectItem")(a)
+    },
+    render: (args)=>/*#__PURE__*/ _jsx(TreeView, {
+            ...args
+        })
+};
+const customItemView = (item)=>{
+    const isRootLevel = item.getItemMeta().level === 0;
+    const hasChildren = item.getItemData()?.children !== undefined;
+    const requestMethhod = item.getItemData()?.meta?.method;
+    const requestPath = item.getItemData()?.meta?.path;
+    const itemName = item.getItemData()?.name;
+    const requestMethodView = ()=>{
+        switch(requestMethhod){
+            case "GET":
+                return /*#__PURE__*/ _jsx("div", {
+                    className: "opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-green text-left",
+                    children: "GET"
+                });
+            case "POST":
+                return /*#__PURE__*/ _jsx("div", {
+                    className: "opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-yellow text-left",
+                    children: "POST"
+                });
+            case "PUT":
+                return /*#__PURE__*/ _jsx("div", {
+                    className: "opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-blue text-left",
+                    children: "PUT"
+                });
+            case "PATCH":
+                return /*#__PURE__*/ _jsx("div", {
+                    className: "opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-violet text-left",
+                    children: "PATCH"
+                });
+            case "DELETE":
+                return /*#__PURE__*/ _jsx("div", {
+                    className: "opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-red text-left",
+                    children: "DELETE"
+                });
+            default:
+                return /*#__PURE__*/ _jsx("div", {
+                    className: "opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-gray text-left",
+                    children: "Unknown"
+                });
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "w-full flex justify-between gap-2",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex items-center gap-2 truncate",
+                children: hasChildren ? itemName : /*#__PURE__*/ _jsxs(React.Fragment, {
+                    children: [
+                        requestMethodView(),
+                        requestPath
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "gap-2 hidden group-hover/tree-item-label:flex items-center",
+                children: [
+                    isRootLevel && /*#__PURE__*/ _jsx(Button, {
+                        variant: "link",
+                        size: "small",
+                        className: "p-0 h-4",
+                        children: item.getItemData()?.meta?.pinned ? /*#__PURE__*/ _jsx(PinIcon, {}) : /*#__PURE__*/ _jsx(Pin, {})
+                    }),
+                    hasChildren && /*#__PURE__*/ _jsx(Button, {
+                        variant: "link",
+                        size: "small",
+                        className: "p-0 h-4",
+                        children: /*#__PURE__*/ _jsx(Plus, {})
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "link",
+                        size: "small",
+                        className: "p-0 h-4",
+                        children: /*#__PURE__*/ _jsx(Ellipsis, {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+export const CustomItemView = {
+    args: {
+        items: items,
+        rootItemId: "root",
+        selectedItemId: "request11",
+        expandedItemIds: [
+            "collection3",
+            "collection4"
+        ],
+        onSelectItem: (a)=>action("onSelectItem")(a.getItemData()?.name),
+        customItemView: customItemView
+    },
+    render: (args)=>/*#__PURE__*/ _jsx(TreeView, {
+            ...args
+        })
+};
+
+//# sourceMappingURL=tree-view.stories.js.map

package/dist/src/components/tree-view.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tree-view.stories.tsx"],"sourcesContent":["import type { ItemInstance } from \"@headless-tree/core\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Ellipsis, Pin, Plus } from \"lucide-react\";\nimport React from \"react\";\nimport { action } from \"storybook/actions\";\nimport { Button } from \"#shadcn/components/ui/button.js\";\nimport { PinIcon } from \"../icons\";\nimport type { TreeViewItem } from \"./tree-view\";\nimport { TreeView } from \"./tree-view\";\n\nconst meta: Meta<typeof TreeView> = {\n\ttitle: \"Component/Tree view\",\n\tcomponent: TreeView,\n\tparameters: {\n\t\tlayout: \"fullscreen\",\n\t},\n\ttags: [\"autodocs\"],\n};\ntype ItemMeta = {\n\tpinned?: boolean;\n\tmethod?: \"GET\" | \"POST\" | \"PUT\" | \"DELETE\" | \"PATCH\";\n\tpath?: string;\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TreeView<ItemMeta>>;\n\nconst items: Record<string, TreeViewItem<ItemMeta>> = {\n\troot: {\n\t\tname: \"Root\",\n\t\tchildren: [\"collection1\", \"collection2\", \"collection3\"],\n\t},\n\tcollection1: {\n\t\tname: \"Collection 1\",\n\t\tchildren: [\"request1\", \"request2\", \"request3\"],\n\t\tmeta: {\n\t\t\tpinned: true,\n\t\t},\n\t},\n\tcollection2: {\n\t\tname: \"Collection 2\",\n\t\tchildren: [\"request4\", \"request5\", \"request6\"],\n\t},\n\tcollection3: {\n\t\tname: \"New Collection\",\n\t\tchildren: [\n\t\t\t\"request7\",\n\t\t\t\"request8\",\n\t\t\t\"request9\",\n\t\t\t\"request10\",\n\t\t\t\"request11\",\n\t\t\t\"collection4\",\n\t\t],\n\t},\n\tcollection4: {\n\t\tname: \"New Collection\",\n\t\tchildren: [\"request12\", \"request13\", \"request14\"],\n\t},\n\trequest1: {\n\t\tmeta: {\n\t\t\tmethod: \"GET\",\n\t\t\tpath: \"/request1\",\n\t\t},\n\t\tname: \"Request 1\",\n\t},\n\trequest2: {\n\t\tmeta: {\n\t\t\tmethod: \"POST\",\n\t\t\tpath: \"/request2\",\n\t\t},\n\t\tname: \"Request 2\",\n\t},\n\trequest3: {\n\t\tmeta: {\n\t\t\tmethod: \"PUT\",\n\t\t\tpath: \"/request3\",\n\t\t},\n\t\tname: \"Request 3\",\n\t},\n\trequest4: {\n\t\tmeta: {\n\t\t\tmethod: \"DELETE\",\n\t\t\tpath: \"/request4\",\n\t\t},\n\t\tname: \"Request 4\",\n\t},\n\trequest5: {\n\t\tmeta: {\n\t\t\tmethod: \"PATCH\",\n\t\t\tpath: \"/request5\",\n\t\t},\n\t\tname: \"Request 5\",\n\t},\n\trequest6: {\n\t\tmeta: {\n\t\t\tmethod: \"GET\",\n\t\t\tpath: \"/request6\",\n\t\t},\n\t\tname: \"Request 6\",\n\t},\n\trequest7: {\n\t\tmeta: {\n\t\t\tmethod: \"PATCH\",\n\t\t\tpath: \"/fhir/Patient/123\",\n\t\t},\n\t\tname: \"Request 7\",\n\t},\n\trequest8: {\n\t\tmeta: {\n\t\t\tmethod: \"DELETE\",\n\t\t\tpath: \"/fhir/Patient/123\",\n\t\t},\n\t\tname: \"Request 8\",\n\t},\n\trequest9: {\n\t\tmeta: {\n\t\t\tmethod: \"PUT\",\n\t\t\tpath: \"/fhir/Patient/123\",\n\t\t},\n\t\tname: \"Request 9\",\n\t},\n\trequest10: {\n\t\tmeta: {\n\t\t\tmethod: \"POST\",\n\t\t\tpath: \"/fhir/Patient/123\",\n\t\t},\n\t\tname: \"Request 10\",\n\t},\n\trequest11: {\n\t\tmeta: {\n\t\t\tmethod: \"GET\",\n\t\t\tpath: \"/fhir/Patient/123\",\n\t\t},\n\t\tname: \"Request 11\",\n\t},\n\trequest12: {\n\t\tmeta: {\n\t\t\tmethod: \"PUT\",\n\t\t\tpath: \"/fhir/Patient/123\",\n\t\t},\n\t\tname: \"Request 12\",\n\t},\n\trequest13: {\n\t\tmeta: {\n\t\t\tmethod: \"PUT\",\n\t\t\tpath: \"/fhir/Patient/123\",\n\t\t},\n\t\tname: \"Request 13\",\n\t},\n\trequest14: {\n\t\tmeta: {\n\t\t\tmethod: \"PUT\",\n\t\t\tpath: \"/fhir/Patient/123\",\n\t\t},\n\t\tname: \"Request 14\",\n\t},\n};\n\nexport const Default: Story = {\n\targs: {\n\t\titems: items,\n\t\trootItemId: \"root\",\n\t\tselectedItemId: \"request9\",\n\t\texpandedItemIds: [\"collection3\"],\n\t\tonSelectItem: (a) => action(\"onSelectItem\")(a),\n\t},\n\trender: (args) => <TreeView {...args} />,\n};\n\nconst customItemView = (item: ItemInstance<TreeViewItem<ItemMeta>>) => {\n\tconst isRootLevel = item.getItemMeta().level === 0;\n\tconst hasChildren = item.getItemData()?.children !== undefined;\n\tconst requestMethhod = item.getItemData()?.meta?.method;\n\tconst requestPath = item.getItemData()?.meta?.path;\n\tconst itemName = item.getItemData()?.name;\n\n\tconst requestMethodView = () => {\n\t\tswitch (requestMethhod) {\n\t\t\tcase \"GET\":\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-green text-left\">\n\t\t\t\t\t\tGET\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\tcase \"POST\":\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-yellow text-left\">\n\t\t\t\t\t\tPOST\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\tcase \"PUT\":\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-blue text-left\">\n\t\t\t\t\t\tPUT\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\tcase \"PATCH\":\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-violet text-left\">\n\t\t\t\t\t\tPATCH\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\tcase \"DELETE\":\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-red text-left\">\n\t\t\t\t\t\tDELETE\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-gray text-left\">\n\t\t\t\t\t\tUnknown\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"w-full flex justify-between gap-2\">\n\t\t\t<div className=\"flex items-center gap-2 truncate\">\n\t\t\t\t{hasChildren ? (\n\t\t\t\t\titemName\n\t\t\t\t) : (\n\t\t\t\t\t<React.Fragment>\n\t\t\t\t\t\t{requestMethodView()}\n\t\t\t\t\t\t{requestPath}\n\t\t\t\t\t</React.Fragment>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"gap-2 hidden group-hover/tree-item-label:flex items-center\">\n\t\t\t\t{isRootLevel && (\n\t\t\t\t\t<Button variant=\"link\" size=\"small\" className=\"p-0 h-4\">\n\t\t\t\t\t\t{item.getItemData()?.meta?.pinned ? <PinIcon /> : <Pin />}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\t{hasChildren && (\n\t\t\t\t\t<Button variant=\"link\" size=\"small\" className=\"p-0 h-4\">\n\t\t\t\t\t\t<Plus />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\t<Button variant=\"link\" size=\"small\" className=\"p-0 h-4\">\n\t\t\t\t\t<Ellipsis />\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const CustomItemView: Story = {\n\targs: {\n\t\titems: items,\n\t\trootItemId: \"root\",\n\t\tselectedItemId: \"request11\",\n\t\texpandedItemIds: [\"collection3\", \"collection4\"],\n\t\tonSelectItem: (a) => action(\"onSelectItem\")(a.getItemData()?.name),\n\t\tcustomItemView: customItemView,\n\t},\n\trender: (args) => <TreeView {...args} />,\n};\n"],"names":["Ellipsis","Pin","Plus","React","action","Button","PinIcon","TreeView","meta","title","component","parameters","layout","tags","items","root","name","children","collection1","pinned","collection2","collection3","collection4","request1","method","path","request2","request3","request4","request5","request6","request7","request8","request9","request10","request11","request12","request13","request14","Default","args","rootItemId","selectedItemId","expandedItemIds","onSelectItem","a","render","customItemView","item","isRootLevel","getItemMeta","level","hasChildren","getItemData","undefined","requestMethhod","requestPath","itemName","requestMethodView","div","className","Fragment","variant","size","CustomItemView"],"mappings":"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"}

package/dist/src/icons.d.ts

@@ -0,0 +1,9 @@
+export declare const PlayIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const PinIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ResourceIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const BackoneElementIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const TypCodeIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReferenceIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComplexTypeIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const UnionIcon: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/src/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/icons.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,+CAkBpB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAwBnB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAgDxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAoB9B,CAAC;AAEF,eAAO,MAAM,WAAW,+CAgDvB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAkCzB,CAAC;AAEF,eAAO,MAAM,eAAe,+CA8C3B,CAAC;AAEF,eAAO,MAAM,SAAS,+CAkCrB,CAAC"}