@har-analyzer/components 0.0.10 → 0.0.12

package/README.md

@@ -2,6 +2,16 @@
 
 Reusable React components for HAR Analyzer.
 
+## ✨ Features
+
+- 📦 **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) 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
 
 ```sh
@@ -12,7 +22,75 @@ yarn add @har-analyzer/components
 pnpm add @har-analyzer/components
 ```
 
-## Components & Hooks
+### Peer Dependencies
+
+This library relies heavily on [Cloudscape Design System](https://cloudscape.design/) and React. Consumers MUST install the following peer dependencies in their own workspace:
+
+```sh
+npm install react react-dom \
+  @cloudscape-design/components \
+  @cloudscape-design/board-components \
+  @cloudscape-design/code-view \
+  @cloudscape-design/collection-hooks \
+  @cloudscape-design/design-tokens \
+  @cloudscape-design/global-styles
+```
+
+## Usage & Setup
+
+Clients **must** wrap the components with `HARAnalyzerPreferencesProvider` (to handle user preferences like themes and table settings) and Cloudscape's `<I18nProvider>` (for localization).
+
+```jsx
+import enMessages from '@cloudscape-design/components/i18n/messages/all.en.js';
+import { I18nProvider } from '@cloudscape-design/components/i18n';
+import useLocalStorageState from 'use-local-storage-state';
+import HAREntriesViewer from '@har-analyzer/components/har-entries-viewer';
+import HARAnalyzerPreferencesProvider from '@har-analyzer/components/har-analyzer-preferences';
+
+// Provide a custom usePreference hook conforming to:
+// (key: string) => readonly [string | undefined, (preference: string) => void]
+const useWebStorage = (key) => useLocalStorageState(key);
+
+function App() {
+  return (
+    <I18nProvider locale="en" messages={[enMessages]}>
+      <HARAnalyzerPreferencesProvider usePreferenceStore={useWebStorage}>
+        <HAREntriesViewer harEntries={yourHarEntriesArray} />
+      </HARAnalyzerPreferencesProvider>
+    </I18nProvider>
+  );
+}
+```
+
+## Imports
+
+The library supports both **top-level** imports and **component-level** imports.
+
+**Top-level:**
+```javascript
+import {
+  HARAnalyzer,
+  HARAnalyzerPreferencesProvider,
+  HAREntriesViewer,
+  HARFileUploader,
+  ViewHAREntry,
+  ListHAREntries,
+  useHAREntriesFilters
+} from '@har-analyzer/components';
+```
+
+**Component-level:**
+```javascript
+import HARAnalyzer from '@har-analyzer/components/har-analyzer';
+import HARAnalyzerPreferencesProvider from '@har-analyzer/components/har-analyzer-preferences';
+import HAREntriesViewer from '@har-analyzer/components/har-entries-viewer';
+import HARFileUploader from '@har-analyzer/components/har-file-uploader';
+import ViewHAREntry from '@har-analyzer/components/view-har-entry';
+import ListHAREntries from '@har-analyzer/components/list-har-entries';
+import useHAREntriesFilters from '@har-analyzer/components/har-entries-filters';
+```
+
+## Components
 
 Below are the available exports and their usage examples:
 
@@ -30,22 +108,19 @@ function App() {
 
 | Name      | Type            | Required | Description                          |
 |-----------|-----------------|----------|--------------------------------------|
-| logo      | React.ReactNode | No       | A logo to display in the header.    |
-| appName   | string          | No       | The name of the application.        |
+| logo      | React.ReactNode | No       | A logo to display in the header.     |
+| appName   | string          | No       | The name of the application.         |
 
 ---
 
-### HARContentViewer
+### HAREntriesViewer
 
 ```jsx
-import HARContentViewer from '@har-analyzer/components/har-content-viewer';
+import HAREntriesViewer from '@har-analyzer/components/har-entries-viewer';
 
 function App() {
   return (
-    <HARContentViewer
-      harFileName="example.har"
-      harContent={yourHarContent}
-    />
+    <HAREntriesViewer harEntries={yourHarEntriesArray} />
   );
 }
 ```
@@ -54,18 +129,46 @@ function App() {
 
 | Name          | Type                          | Required | Description                                      |
 |---------------|-------------------------------|----------|--------------------------------------------------|
-| harFileName   | string                        | No       | The name of the HAR file being viewed.          |
-| harContent    | HarContent                    | No       | The HAR file content object.                    |
+| title         | string                        | no       | Title of the table displaying the HAR entries    |
+| harEntries    | HAREntry[]                    | Yes      | An array of HAR entries.                         |
 
 ---
 
-### HAREntryViewer
+### ListHAREntries
+
+Displays an enhanced table representing a list of HAR entries.
+
+```jsx
+import ListHAREntries from '@har-analyzer/components/list-har-entries';
+
+function App() {
+  return (
+    <ListHAREntries
+      harEntries={yourHarEntriesArray}
+      onChange={(entries) => console.log('Selected:', entries)}
+    />
+  );
+}
+```
+
+**Props:**
+
+| Name      | Type                                      | Required | Description                          |
+|-----------|-------------------------------------------|----------|--------------------------------------|
+| harEntries| HAREntry[]                                | Yes      | The entries to display in the table. |
+| onChange  | (selectedHAREntries: HAREntry[]) => void  | Yes      | Callback when entries are selected.  |
+
+---
+
+### ViewHAREntry
+
+Displays details for a single selected network entry.
 
 ```jsx
-import HAREntryViewer from '@har-analyzer/components/har-entry-viewer';
+import ViewHAREntry from '@har-analyzer/components/view-har-entry';
 
 function App() {
-  return <HAREntryViewer harEntry={yourHarEntry} />;
+  return <ViewHAREntry harEntry={yourHarEntry} />;
 }
 ```
 
@@ -75,6 +178,7 @@ function App() {
 |-----------|-----------|----------|--------------------------------------|
 | harEntry  | HAREntry  | Yes      | The HAR entry to display details for.|
 
+
 ---
 
 ### HARFileUploader
@@ -85,7 +189,7 @@ import HARFileUploader from '@har-analyzer/components/har-file-uploader';
 function App() {
   return (
     <HARFileUploader
-      onChange={({ harContent, harFileName }) => console.log(harContent, harFileName)}
+      onChange={({ harEntries, harFileName }) => console.log(harEntries, harFileName)}
     />
   );
 }
@@ -95,51 +199,30 @@ function App() {
 
 | Name      | Type                                                               | Required | Description                                      |
 |-----------|--------------------------------------------------------------------|----------|--------------------------------------------------|
-| onChange  | `(args: { harContent: HARContent; harFileName?: string }) => void` | Yes      | Callback when a HAR file is uploaded.           |
-
----
-
-### useHAREntriesFilters
-
-A custom React hook for filtering and searching HAR network entries.
-
-```jsx
-import { useHAREntriesFilters } from '@har-analyzer/components';
-
-function App() {
-  const { filteredEntries, HAREntriesFilters } = useHAREntriesFilters(entries);
-  // ...
-}
-```
+| onChange  | `(args: { harEntries: HAREntry[]; harFileName?: string }) => void` | Yes      | Callback when a HAR file is uploaded.             |
 
 ---
 
 ### HARAnalyzerPreferencesProvider
 
-Provides a persistent context for managing user preferences (like theme, content width, table preferences and board layouts). By default, preferences rely on browser storage. However, you can provide a custom async store (e.g., to save preferences to a backend database or external extension API) by wrapping your application in `HARAnalyzerPreferencesProvider`.
-
+Provides a persistent context for managing user preferences (like theme, content width, table preferences and board layouts). You must wrap your application in `HARAnalyzerPreferencesProvider` and provide a `usePreferenceStore` hook that bridges external storage (like browser storage or Chrome Extensions API) into the library.
 ```jsx
 import HARAnalyzerPreferencesProvider from '@har-analyzer/components/har-analyzer-preferences';
 
-// Optional: Custom external store
-const customStore = {
-  getPreference: async (key) => fetch(`/api/prefs/${key}`).then(res => res.text()),
-  setPreference: async (key, value) => { await fetch(`/api/prefs/${key}`, { method: 'POST', body: value }) }
-};
+const useWebStorage = (key) => useLocalStorageState(key);
 
 function App() {
   return (
-    <HARAnalyzerPreferencesProvider store={customStore}>
-      <HARAnalyzer appName="HAR Analyzer" />;
-    </HARAnalyzerPreferencesProvider>
+      <HARAnalyzerPreferencesProvider usePreferenceStore={useWebStorage}>
+        ...your HAR Analyzer components
+      </HARAnalyzerPreferencesProvider>
   );
 }
-
 ```
 
 ---
 
-### HAR Utilities
+## HAR Utilities
 
 Various types and utilities for working with HTTP Archive (.har) files are directly exported.
 

package/dist/chunks/har.js

@@ -1,43 +1,43 @@
-import { g as i } from "./content-type.js";
-function p(e) {
+import { g as a } from "./content-type.js";
+function u(e) {
   if (typeof e != "string")
     throw new TypeError("File contents are invalid. Expected contents to be a stringified JSON.");
   try {
     return JSON.parse(e);
-  } catch (r) {
-    const t = "Failed to JSON parse file content";
-    throw console.error(t, r), new Error(t);
+  } catch (t) {
+    const r = "Failed to JSON parse file content";
+    throw new Error(r, { cause: t });
   }
 }
-function u(e) {
-  return e?.log.entries ?? [];
-}
-function d(e, r) {
-  return r.length ? e.filter((n) => {
-    const s = n.response.content.mimeType, o = i(s);
-    return r.includes(o);
+function d(e, t) {
+  return t.length ? e.filter((n) => {
+    const s = n.response.content.mimeType, o = a(s);
+    return t.includes(o);
   }) : e;
 }
-function a(e) {
-  const r = e.response.status;
-  return r < 200 || r >= 400;
+function i(e) {
+  const t = e.response.status;
+  return t < 200 || t >= 400;
 }
-function f(e) {
-  return e.filter((r) => a(r));
+function p(e) {
+  return e.filter((t) => i(t));
 }
-function g(e, r) {
-  const t = /* @__PURE__ */ new Set();
+function f(e, t) {
+  const r = /* @__PURE__ */ new Set();
   return e.forEach((n) => {
-    n[r].headers.forEach((o) => {
-      t.add(o.name);
+    n[t].headers.forEach((o) => {
+      r.add(o.name);
     });
-  }), Array.from(t);
+  }), Array.from(r);
+}
+function m(e) {
+  return `${e.startedDateTime}_${e.time}_${e.request.url}`;
 }
 export {
-  u as a,
-  d as b,
+  d as a,
+  p as b,
   f as c,
-  g as d,
-  p as g,
-  a as i
+  m as d,
+  u as g,
+  i
 };

package/dist/chunks/index.js

@@ -1,67 +1,210 @@
-import { jsx as s, jsxs as R } from "react/jsx-runtime";
-import { useState as p, useMemo as a, useCallback as m } from "react";
-import u from "@cloudscape-design/components/space-between";
-import { c as T, b as F } from "./har.js";
-import C from "@cloudscape-design/components/multiselect";
-import { C as f } from "./content-type.js";
-import y from "@cloudscape-design/components/segmented-control";
-function A({ children: e, ...t }) {
-  return /* @__PURE__ */ s(u, { direction: "horizontal", size: "s", ...t, 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 d = f.map((e) => ({
+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 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 ee = {
+  liveAnnouncementDndStarted: (e) => e === "resize" ? "Resizing" : "Dragging",
+  liveAnnouncementDndItemReordered: (e) => {
+    const n = `column ${e.placement.x + 1}`, t = `row ${e.placement.y + 1}`;
+    return p(
+      `Item moved to ${e.direction === "horizontal" ? n : t}.`,
+      e.conflicts,
+      e.disturbed
+    );
+  },
+  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 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 p(`Item inserted to ${n}, ${t}.`, e.conflicts, e.disturbed);
+  },
+  liveAnnouncementDndCommitted: (e) => `${e} committed`,
+  liveAnnouncementDndDiscarded: (e) => `${e} discarded`,
+  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 te(e) {
+  const {
+    components: n,
+    definitions: t,
+    onDefinitionsChange: r,
+    empty: i
+  } = e;
+  return /* @__PURE__ */ o(
+    k,
+    {
+      i18nStrings: ee,
+      items: t,
+      renderItem: ({ id: s }, { removeItem: d }) => {
+        const {
+          title: h,
+          content: u,
+          actions: A,
+          counter: R,
+          canRemove: E
+        } = n[s] ?? {};
+        return /* @__PURE__ */ o(
+          U,
+          {
+            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
+          }
+        );
+      },
+      onItemsChange: ({ detail: { items: s } }) => {
+        r(s);
+      },
+      empty: i
+    }
+  );
+}
+function w() {
+  return H("shouldFilterErrors", !1);
+}
+const ne = [];
+function b() {
+  return H("contentTypeFilters", ne);
+}
+const S = K.map((e) => ({
   value: e,
   label: e
 }));
-function h({ contentTypeFilters: e, onChange: t }) {
-  const r = d.filter(
-    ({ value: o }) => e.includes(o)
-  ), n = (o) => {
-    const i = o.map(({ value: l }) => l);
-    t(i);
+function re({ contentTypeFilters: e, onChange: n }) {
+  const t = S.filter(
+    ({ value: i }) => e.includes(i)
+  ), r = (i) => {
+    const s = i.map(({ value: d }) => d);
+    n(s);
   };
-  return /* @__PURE__ */ s(
-    C,
+  return /* @__PURE__ */ o(
+    J,
     {
       placeholder: "Filter by content type",
-      selectedOptions: r,
-      onChange: ({ detail: o }) => {
-        n(o.selectedOptions);
+      selectedOptions: t,
+      onChange: ({ detail: i }) => {
+        r(i.selectedOptions);
       },
-      options: d
+      options: S
     }
   );
 }
-const c = "ERRORS", O = "ALL";
-function H({ shouldFilterErrors: e, onChange: t }) {
-  return /* @__PURE__ */ s(
-    y,
+const I = "ERRORS", oe = "ALL";
+function ie({ shouldFilterErrors: e, onChange: n }) {
+  return /* @__PURE__ */ o(
+    Q,
     {
       options: [
         { text: "All", id: "ALL" },
-        { text: "Errors", id: c }
+        { text: "Errors", id: I }
       ],
-      selectedId: e ? c : O,
-      onChange: ({ detail: r }) => {
-        const n = r.selectedId === c;
-        t(n);
+      selectedId: e ? I : oe,
+      onChange: ({ detail: t }) => {
+        const r = t.selectedId === I;
+        n(r);
       }
     }
   );
 }
-function P(e) {
-  const [t, r] = p([]), [n, o] = p(!1), i = a(() => T(e), [e]), l = a(() => F(n ? i : e, t), [n, i, e, t]), E = m(
-    () => /* @__PURE__ */ R(A, { children: [
-      /* @__PURE__ */ s(h, { contentTypeFilters: t, onChange: r }),
-      /* @__PURE__ */ s(H, { shouldFilterErrors: n, onChange: o })
-    ] }),
-    [t, n]
-  );
-  return {
-    filteredHAREntries: l,
-    HAREntriesFilters: E
+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 $ = {
+  rowSpan: 4,
+  columnSpan: 12
+}, T = "har-entries-viewer", ce = [
+  {
+    ...$,
+    id: T
+  }
+];
+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: `(${C.length}/${r.length})`,
+      actions: /* @__PURE__ */ o(se, {}),
+      content: /* @__PURE__ */ o(
+        Y,
+        {
+          harEntries: C,
+          onChange: R
+        }
+      )
+    },
+    ...L
   };
+  return /* @__PURE__ */ o(
+    te,
+    {
+      components: _,
+      definitions: h,
+      onDefinitionsChange: A
+    }
+  );
 }
 export {
-  A as H,
-  P as u
+  ve as H,
+  se as a,
+  X as b
 };

package/dist/chunks/json.js

@@ -0,0 +1,10 @@
+function o(e) {
+  try {
+    return [JSON.parse(e), void 0];
+  } catch (r) {
+    return console.warn("Failed to parse JSON string:", e, "Error:", r), [void 0, r];
+  }
+}
+export {
+  o as s
+};

package/dist/components/collapsible-key-value-list.d.ts

@@ -0,0 +1,9 @@
+interface CollapsibleKeyValueListProps {
+    title: string;
+    items: {
+        name: string;
+        value: string;
+    }[];
+}
+export default function CollapsibleKeyValueList({ title, items }: CollapsibleKeyValueListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/collapsible-section.d.ts

@@ -0,0 +1,5 @@
+type CollapsibleSectionProps = React.PropsWithChildren<{
+    title: string;
+}>;
+export default function CollapsibleSection({ title, children }: CollapsibleSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/enhanced-board/constants/i18n.d.ts

@@ -0,0 +1,21 @@
+import { BoardProps } from '@cloudscape-design/board-components';
+export type EnhancedBoardDefinition = Omit<BoardProps.Item, 'data'>;
+export type EnhancedBoardDefinitions = ReadonlyArray<EnhancedBoardDefinition>;
+export declare const boardItemI18nStrings: {
+    dragHandleAriaLabel: string;
+    dragHandleAriaDescription: string;
+    resizeHandleAriaLabel: string;
+    resizeHandleAriaDescription: string;
+};
+export declare const boardI18nStrings: {
+    liveAnnouncementDndStarted: (operationType: BoardProps.DndOperationType) => "Resizing" | "Dragging";
+    liveAnnouncementDndItemReordered: (operation: BoardProps.DndReorderState<undefined>) => string;
+    liveAnnouncementDndItemResized: (operation: BoardProps.DndResizeState<undefined>) => string;
+    liveAnnouncementDndItemInserted: (operation: BoardProps.DndInsertState<undefined>) => string;
+    liveAnnouncementDndCommitted: (operationType: BoardProps.DndOperationType) => string;
+    liveAnnouncementDndDiscarded: (operationType: BoardProps.DndOperationType) => string;
+    liveAnnouncementItemRemoved: (op: BoardProps.ItemRemovedState<undefined>) => string;
+    navigationAriaLabel: string;
+    navigationAriaDescription: string;
+    navigationItemAriaLabel: (item: BoardProps.Item<undefined> | null) => string;
+};

package/dist/components/enhanced-board/index.d.ts

@@ -0,0 +1,15 @@
+import { HeaderProps } from '@cloudscape-design/components/header';
+import { EnhancedBoardDefinitions } from './constants/i18n';
+export interface EnhancedBoardProps {
+    components: Record<string, {
+        title: string;
+        content: React.ReactNode;
+        counter?: string;
+        actions?: HeaderProps['actions'];
+        canRemove?: boolean;
+    }>;
+    definitions: EnhancedBoardDefinitions;
+    onDefinitionsChange: (definitions: EnhancedBoardDefinitions) => void;
+    empty?: React.ReactNode;
+}
+export default function EnhancedBoard(props: EnhancedBoardProps): import("react/jsx-runtime").JSX.Element;