@har-analyzer/components 0.0.11 → 0.0.13

package/README.md

@@ -1,14 +1,20 @@
 # @har-analyzer/components
 
+[![npm version](https://img.shields.io/npm/v/@har-analyzer/components.svg?style=flat)](https://www.npmjs.com/package/@har-analyzer/components)
+[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@har-analyzer/components.svg?style=flat)](https://bundlephobia.com/package/@har-analyzer/components)
+[![build status](https://img.shields.io/github/actions/workflow/status/theallanjoshua/har-analyzer/publish-har-analyzer-components.yml?branch=main&style=flat)](https://github.com/theallanjoshua/har-analyzer/actions)
+
+
 Reusable React components for HAR Analyzer.
 
 ## ✨ Features
 
-- 📦 **Drop-in Dashboard**: Use the full `<HARAnalyzer />` component for a complete, ready-to-run HTTP Archive visualization tool, or compose individual panels.
+- 📦 **Drop-in Dashboard**: Use the full `<HAREntriesViewer />` component for a complete, ready-to-run HTTP Archive visualization tool, or compose individual panels.
+- ⚖️ **Entry Comparison**: Compare multiple HAR entries side-by-side to easily spot differences in headers, payloads, and responses by simply selecting multiple rows in the network table.
 - 🔍 **Advanced Filtering**: Filter network entries quickly by content types (JSON, HTML, JS, CSS, etc.) or error statuses via `<HAREntriesFilters />`.
 - 🕵️ **Deep Inspection**: Inspect detailed request/response headers, decoded payloads, and syntax-highlighted response bodies with `<ViewHAREntry />`.
-- 🛠️ **Persistent Preferences**: Context providers remember user preferences like themes (dark/light mode), table column layouts, and dashboard layouts effortlessly via the `<HARAnalyzerPreferencesProvider />`.
-- 🎨 **Modern UI**: Built on top of the [Cloudscape Design System](https://cloudscape.design/).
+- 🛠️ **Persistent Preferences**: Context providers remember user preferences like themes (dark/light mode) and table column layouts effortlessly via the `<HARAnalyzerPreferencesProvider />`.
+- 🎨 **Cloudscape UI**: Built on top of the [Cloudscape Design System](https://cloudscape.design/).
 - ⌨️ **Type Safe**: Fully written in TypeScript with exported utility types (`HARContent`, `HAREntry`) for standard HTTP Archive structures.
 
 ## Installation
@@ -144,7 +150,7 @@ function App() {
   return (
     <ListHAREntries
       harEntries={yourHarEntriesArray}
-      onChange={(entry) => console.log('Selected:', entry)}
+      onChange={(entries) => console.log('Selected:', entries)}
     />
   );
 }
@@ -152,10 +158,10 @@ function App() {
 
 **Props:**
 
-| Name      | Type      | Required | Description                          |
-|-----------|-----------|----------|--------------------------------------|
-| harEntries| HAREntry[]| Yes      | The entries to display in the table. |
-| onChange  | function  | Yes      | Callback when an entry is selected.  |
+| Name      | Type                                      | Required | Description                          |
+|-----------|-------------------------------------------|----------|--------------------------------------|
+| harEntries| HAREntry[]                                | Yes      | The entries to display in the table. |
+| onChange  | (selectedHAREntries: HAREntry[]) => void  | Yes      | Callback when entries are selected.  |
 
 ---
 

package/dist/chunks/index.js

@@ -1,35 +1,35 @@
-import { jsx as o, jsxs as w } from "react/jsx-runtime";
-import { useState as I, useEffect as L, useCallback as $, useMemo as p } from "react";
-import O from "@cloudscape-design/board-components/board";
-import z from "@cloudscape-design/board-components/board-item";
-import N from "@cloudscape-design/components/button";
-import B from "@cloudscape-design/components/header";
-import P from "../list-har-entries.js";
-import k from "../view-har-entry.js";
-import { useHARAnalyzerPreferences as y } from "../har-analyzer-preferences.js";
-import { d as v, b as x, a as U } from "./har.js";
-import j from "@cloudscape-design/components/space-between";
-import M from "@cloudscape-design/components/multiselect";
-import { C as V } from "./content-type.js";
-import W from "@cloudscape-design/components/segmented-control";
-function Y({ children: e, ...n }) {
-  return /* @__PURE__ */ o(j, { direction: "horizontal", size: "s", ...n, children: e });
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import { useState as y, useMemo as F } from "react";
+import k from "@cloudscape-design/board-components/board";
+import U from "@cloudscape-design/board-components/board-item";
+import M from "@cloudscape-design/components/button";
+import j from "@cloudscape-design/components/header";
+import Y from "../list-har-entries.js";
+import G from "../view-har-entry.js";
+import { d as f, b as V, a as W } from "./har.js";
+import q from "@cloudscape-design/components/space-between";
+import { useHARAnalyzerPreferences as H } from "../har-analyzer-preferences.js";
+import J from "@cloudscape-design/components/multiselect";
+import { C as K } from "./content-type.js";
+import Q from "@cloudscape-design/components/segmented-control";
+function X({ children: e, ...n }) {
+  return /* @__PURE__ */ o(q, { direction: "horizontal", size: "s", ...n, children: e });
 }
-const G = {
+const Z = {
   dragHandleAriaLabel: "Drag handle",
   dragHandleAriaDescription: "Use Space or Enter to activate drag, arrow keys to move, Space or Enter to submit, or Escape to discard. Be sure to temporarily disable any screen reader navigation feature that may interfere with the functionality of the arrow keys.",
   resizeHandleAriaLabel: "Resize handle",
   resizeHandleAriaDescription: "Use Space or Enter to activate resize, arrow keys to move, Space or Enter to submit, or Escape to discard. Be sure to temporarily disable any screen reader navigation feature that may interfere with the functionality of the arrow keys."
 };
-function u(e, n, t) {
+function p(e, n, t) {
   const r = n.length > 0 ? `Conflicts with ${n.map((s) => s.id).join(", ")}.` : "", i = t.length > 0 ? `Disturbed ${t.length} items.` : "";
   return [e, r, i].filter(Boolean).join(" ");
 }
-const q = {
+const ee = {
   liveAnnouncementDndStarted: (e) => e === "resize" ? "Resizing" : "Dragging",
   liveAnnouncementDndItemReordered: (e) => {
     const n = `column ${e.placement.x + 1}`, t = `row ${e.placement.y + 1}`;
-    return u(
+    return p(
       `Item moved to ${e.direction === "horizontal" ? n : t}.`,
       e.conflicts,
       e.disturbed
@@ -37,20 +37,20 @@ const q = {
   },
   liveAnnouncementDndItemResized: (e) => {
     const n = e.isMinimalColumnsReached ? " (minimal)" : "", t = e.isMinimalRowsReached ? " (minimal)" : "", r = e.direction === "horizontal" ? `columns ${e.placement.width}${n}` : `rows ${e.placement.height}${t}`;
-    return u(`Item resized to ${r}.`, e.conflicts, e.disturbed);
+    return p(`Item resized to ${r}.`, e.conflicts, e.disturbed);
   },
   liveAnnouncementDndItemInserted: (e) => {
     const n = `column ${e.placement.x + 1}`, t = `row ${e.placement.y + 1}`;
-    return u(`Item inserted to ${n}, ${t}.`, e.conflicts, e.disturbed);
+    return p(`Item inserted to ${n}, ${t}.`, e.conflicts, e.disturbed);
   },
   liveAnnouncementDndCommitted: (e) => `${e} committed`,
   liveAnnouncementDndDiscarded: (e) => `${e} discarded`,
-  liveAnnouncementItemRemoved: (e) => u(`Removed item ${e.item.id}.`, [], e.disturbed),
+  liveAnnouncementItemRemoved: (e) => p(`Removed item ${e.item.id}.`, [], e.disturbed),
   navigationAriaLabel: "Board navigation",
   navigationAriaDescription: "Click on non-empty item to move focus over",
   navigationItemAriaLabel: (e) => e ? e.id : "Empty"
 };
-function J(e) {
+function te(e) {
   const {
     components: n,
     definitions: t,
@@ -58,25 +58,25 @@ function J(e) {
     empty: i
   } = e;
   return /* @__PURE__ */ o(
-    O,
+    k,
     {
-      i18nStrings: q,
+      i18nStrings: ee,
       items: t,
-      renderItem: ({ id: s }, { removeItem: a }) => {
+      renderItem: ({ id: s }, { removeItem: d }) => {
         const {
-          title: l,
-          content: E,
-          actions: f,
-          counter: d,
-          canRemove: m
+          title: h,
+          content: u,
+          actions: A,
+          counter: R,
+          canRemove: E
         } = n[s] ?? {};
         return /* @__PURE__ */ o(
-          z,
+          U,
           {
-            header: /* @__PURE__ */ o(B, { counter: d, actions: f, children: l }),
-            i18nStrings: G,
-            settings: m && /* @__PURE__ */ o(N, { variant: "icon", iconName: "close", onClick: a }),
-            children: E
+            header: /* @__PURE__ */ o(j, { counter: R, actions: A, children: h }),
+            i18nStrings: Z,
+            settings: E && /* @__PURE__ */ o(M, { variant: "icon", iconName: "close", onClick: d }),
+            children: u
           }
         );
       },
@@ -87,123 +87,124 @@ function J(e) {
     }
   );
 }
-function K(e, n) {
-  return y(`boardDefinitionsPreference_${e}`, n);
+function w() {
+  return H("shouldFilterErrors", !1);
 }
-function S() {
-  return y("shouldFilterErrors", !1);
+const ne = [];
+function b() {
+  return H("contentTypeFilters", ne);
 }
-const Q = [];
-function T() {
-  return y("contentTypeFilters", Q);
-}
-const D = V.map((e) => ({
+const S = K.map((e) => ({
   value: e,
   label: e
 }));
-function X({ contentTypeFilters: e, onChange: n }) {
-  const t = D.filter(
+function re({ contentTypeFilters: e, onChange: n }) {
+  const t = S.filter(
     ({ value: i }) => e.includes(i)
   ), r = (i) => {
-    const s = i.map(({ value: a }) => a);
+    const s = i.map(({ value: d }) => d);
     n(s);
   };
   return /* @__PURE__ */ o(
-    M,
+    J,
     {
       placeholder: "Filter by content type",
       selectedOptions: t,
       onChange: ({ detail: i }) => {
         r(i.selectedOptions);
       },
-      options: D
+      options: S
     }
   );
 }
-const A = "ERRORS", Z = "ALL";
-function ee({ shouldFilterErrors: e, onChange: n }) {
+const I = "ERRORS", oe = "ALL";
+function ie({ shouldFilterErrors: e, onChange: n }) {
   return /* @__PURE__ */ o(
-    W,
+    Q,
     {
       options: [
         { text: "All", id: "ALL" },
-        { text: "Errors", id: A }
+        { text: "Errors", id: I }
       ],
-      selectedId: e ? A : Z,
+      selectedId: e ? I : oe,
       onChange: ({ detail: t }) => {
-        const r = t.selectedId === A;
+        const r = t.selectedId === I;
         n(r);
       }
     }
   );
 }
-function te() {
-  const [e, n] = T(), [t, r] = S();
-  return /* @__PURE__ */ w(Y, { children: [
-    /* @__PURE__ */ o(X, { contentTypeFilters: e, onChange: n }),
-    /* @__PURE__ */ o(ee, { shouldFilterErrors: t, onChange: r })
+function se() {
+  const [e, n] = b(), [t, r] = w();
+  return /* @__PURE__ */ x(X, { children: [
+    /* @__PURE__ */ o(re, { contentTypeFilters: e, onChange: n }),
+    /* @__PURE__ */ o(ie, { shouldFilterErrors: t, onChange: r })
   ] });
 }
-const C = 4, F = "har-entries-viewer", H = "selected-har-entry-viewer", _ = [
+const $ = {
+  rowSpan: 4,
+  columnSpan: 12
+}, T = "har-entries-viewer", ce = [
   {
-    id: F,
-    rowSpan: C,
-    columnSpan: 12
-  }
-], ne = [
-  ..._,
-  {
-    id: H,
-    rowSpan: C,
-    columnSpan: 12
+    ...$,
+    id: T
   }
 ];
-function Ae(e) {
-  const { title: n = "HAR Entries", harEntries: t } = e, [r, i] = I(), [s, a] = I(_);
-  L(() => {
-    r && (t.map(v).includes(v(r)) || i(void 0));
-  }, [t, r]);
-  const [l, E] = K(
-    "har-contents-viewer",
-    ne
-  ), f = (c) => {
-    a(c), c.length > 1 && E(c);
-  }, d = $((c) => {
-    i(c), s.length === 1 && a(l);
-  }, [l, s]), m = p(() => x(t), [t]), [R] = T(), [g] = S(), h = p(() => U(g ? m : t, R), [g, m, t, R]), b = p(() => ({
-    [F]: {
+function ve(e) {
+  const { title: n = "HAR Entries", harEntries: t } = e, [r, i] = y(t), [s, d] = y([]), [h, u] = y(ce);
+  if (t !== r) {
+    i(t);
+    const c = t.map(f), a = s.filter((m) => c.includes(f(m)));
+    a.length !== s.length && d(a);
+  }
+  const A = (c) => {
+    u(c);
+  }, R = (c) => {
+    d(c);
+    const a = c.map(f);
+    u((m) => {
+      const g = m.filter(({ id: l }) => a.includes(l) || l === T), z = g.map(({ id: l }) => l), O = a.filter((l) => !z.includes(l)), { rowSpan: B, columnSpan: N } = g.at(1) ?? $, P = O.map((l) => ({
+        rowSpan: B,
+        columnSpan: N,
+        id: l
+      }));
+      return [...g, ...P];
+    });
+  }, E = F(() => V(r), [r]), [v] = b(), [D] = w(), C = F(() => W(D ? E : r, v), [D, E, r, v]), L = s.reduce((c, a) => {
+    const m = f(a);
+    return {
+      ...c,
+      [m]: {
+        title: "Details",
+        content: /* @__PURE__ */ o(G, { harEntry: a })
+      }
+    };
+  }, {}), _ = {
+    [T]: {
       title: n,
-      counter: `(${h.length}/${t.length})`,
-      actions: /* @__PURE__ */ o(te, {}),
+      counter: `(${C.length}/${r.length})`,
+      actions: /* @__PURE__ */ o(se, {}),
       content: /* @__PURE__ */ o(
-        P,
+        Y,
         {
-          harEntries: h,
-          onChange: d
+          harEntries: C,
+          onChange: R
         }
       )
     },
-    [H]: r ? {
-      title: "Details",
-      content: /* @__PURE__ */ o(k, { harEntry: r }),
-      canRemove: !0
-    } : {
-      title: "Select an entry to see details",
-      content: null,
-      canRemove: !0
-    }
-  }), [h, t, d, r, n]);
+    ...L
+  };
   return /* @__PURE__ */ o(
-    J,
+    te,
     {
-      components: b,
-      definitions: s,
-      onDefinitionsChange: f
+      components: _,
+      definitions: h,
+      onDefinitionsChange: A
     }
   );
 }
 export {
-  Ae as H,
-  te as a,
-  Y as b
+  ve as H,
+  se as a,
+  X as b
 };

package/dist/features/list-har-entries/index.d.ts

@@ -2,7 +2,7 @@ import { HAREntry } from '../../utils/har';
 interface ListHAREntriesProps {
     id?: string;
     harEntries: HAREntry[];
-    onChange: (selectedHAREntry: HAREntry) => void;
+    onChange: (selectedHAREntries: HAREntry[]) => void;
 }
 export default function ListHAREntries({ id, harEntries, onChange, }: ListHAREntriesProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/list-har-entries.js

@@ -2118,11 +2118,8 @@ function tr({
       items: t,
       getRowId: Ue,
       empty: "No HAR entries found",
-      selectionType: "single",
-      onSelectionChange: (a) => {
-        const i = a[0];
-        i && n(i);
-      }
+      selectionType: "multi",
+      onSelectionChange: n
     }
   );
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@har-analyzer/components",
 	"type": "module",
-	"version": "0.0.11",
+	"version": "0.0.13",
 	"description": "Reusable React components for HAR Analyzer",
 	"author": "Allan Joshua",
 	"license": "MIT",

package/dist/hooks/board-preferences.d.ts

@@ -1,2 +0,0 @@
-import { EnhancedBoardProps } from '../components/enhanced-board';
-export default function useBoardDefinitionsPreference(boardId: string, defaultDefinitionsPreference: EnhancedBoardProps['definitions']): readonly [import('../components/enhanced-board/constants/i18n').EnhancedBoardDefinitions, (newPreference: import('../components/enhanced-board/constants/i18n').EnhancedBoardDefinitions) => void];