@har-analyzer/components 0.0.15 → 0.0.17

package/README.md

@@ -13,7 +13,7 @@ Reusable React components for HAR Analyzer.
 - ⚖️ **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 />`.
+- 🛠️ **Persistent Preferences**: Context providers remember user preferences like themes (dark/light mode) and table column layouts effortlessly via the `<HARAnalyzerPreferencesStore />`.
 - 🎨 **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.
 
@@ -43,25 +43,28 @@ npm install react react-dom \
 
 ## Usage & Setup
 
-Clients **must** wrap the components with `HARAnalyzerPreferencesProvider` (to handle user preferences like themes and table settings) and Cloudscape's `<I18nProvider>` (for localization).
+Clients **must** wrap the components with `HARAnalyzerPreferencesStore` (to handle user preferences like themes and table settings) and Cloudscape's `<I18nProvider>` (for localization).
 
-```jsx
+```tsx
 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';
+import HARAnalyzerPreferencesStore, { type UserPreferencesStore } from '@har-analyzer/components/har-analyzer-preferences-store';
 
-// Provide a custom usePreference hook conforming to:
-// (key: string) => readonly [string | undefined, (preference: string) => void]
-const useWebStorage = (key) => useLocalStorageState(key);
+// Provide a store conforming to the UserPreferencesStore interface:
+// getPreference: (key: string) => Promise<string | undefined>
+// setPreference: (key: string, value: string) => Promise<void>
+const myStorage: UserPreferencesStore = {
+  getPreference: async (key) => localStorage.getItem(key) || undefined,
+  setPreference: async (key, value) => localStorage.setItem(key, value),
+};
 
 function App() {
   return (
     <I18nProvider locale="en" messages={[enMessages]}>
-      <HARAnalyzerPreferencesProvider usePreferenceStore={useWebStorage}>
-        <HAREntriesViewer harEntries={yourHarEntriesArray} />
-      </HARAnalyzerPreferencesProvider>
+      <HARAnalyzerPreferencesStore userPreferencesStore={myStorage}>
+        <HAREntriesViewer tableTitle="My HAR Entries" harEntries={yourHarEntriesArray} />
+      </HARAnalyzerPreferencesStore>
     </I18nProvider>
   );
 }
@@ -75,7 +78,7 @@ The library supports both **top-level** imports and **component-level** imports.
 ```javascript
 import {
   HARAnalyzer,
-  HARAnalyzerPreferencesProvider,
+  HARAnalyzerPreferencesStore,
   HAREntriesViewer,
   HARFileUploader,
   ListHAREntries,
@@ -86,7 +89,7 @@ import {
 **Component-level:**
 ```javascript
 import HARAnalyzer from '@har-analyzer/components/har-analyzer';
-import HARAnalyzerPreferencesProvider from '@har-analyzer/components/har-analyzer-preferences';
+import HARAnalyzerPreferencesStore from '@har-analyzer/components/har-analyzer-preferences-store';
 import HAREntriesViewer from '@har-analyzer/components/har-entries-viewer';
 import HARFileUploader from '@har-analyzer/components/har-file-uploader';
 import ListHAREntries from '@har-analyzer/components/list-har-entries';
@@ -123,7 +126,7 @@ import HAREntriesViewer from '@har-analyzer/components/har-entries-viewer';
 
 function App() {
   return (
-    <HAREntriesViewer harEntries={yourHarEntriesArray} />
+    <HAREntriesViewer tableTitle="Requests" harEntries={yourHarEntriesArray} />
   );
 }
 ```
@@ -132,8 +135,8 @@ function App() {
 
 | Name          | Type                          | Required | Description                                      |
 |---------------|-------------------------------|----------|--------------------------------------------------|
-| title         | string                        | no       | Title of the table displaying the HAR entries    |
 | harEntries    | HAREntry[]                    | Yes      | An array of HAR entries.                         |
+| tableTitle    | string                        | No       | Title of the table displaying the HAR entries.   |
 
 ---
 
@@ -147,8 +150,10 @@ import ListHAREntries from '@har-analyzer/components/list-har-entries';
 function App() {
   return (
     <ListHAREntries
+      title="Requests"
       harEntries={yourHarEntriesArray}
-      onChange={(entries) => console.log('Selected:', entries)}
+      selectedHAREntries={[]}
+      onSelectionChange={(entries) => console.log('Selected:', entries)}
     />
   );
 }
@@ -156,10 +161,12 @@ function App() {
 
 **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.  |
+| Name                | Type                                      | Required | Description                              |
+|---------------------|-------------------------------------------|----------|------------------------------------------|
+| title               | string                                    | No       | Optional title for the list.             |
+| harEntries          | HAREntry[]                                | Yes      | The entries to display in the table.     |
+| selectedHAREntries  | HAREntry[]                                | Yes      | Entries to remain selected in the table. |
+| onSelectionChange   | (selectedHAREntries: HAREntry[]) => void  | Yes      | Callback when entries are selected.      |
 
 ---
 
@@ -206,19 +213,23 @@ function App() {
 
 ---
 
-### HARAnalyzerPreferencesProvider
+### HARAnalyzerPreferencesStore
 
-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';
+Provides a persistent context for managing user preferences (like theme, content width, table preferences, and board layouts). You must wrap your application in `HARAnalyzerPreferencesStore` and provide a `userPreferencesStore` object that bridges external async storage (like browser storage APIs or Chrome Extensions API) into the library.
 
-const useWebStorage = (key) => useLocalStorageState(key);
+```tsx
+import HARAnalyzerPreferencesStore, { type UserPreferencesStore } from '@har-analyzer/components/har-analyzer-preferences-store';
+
+const myStorage: UserPreferencesStore = {
+  getPreference: async (key) => localStorage.getItem(key) || undefined,
+  setPreference: async (key, value) => { localStorage.setItem(key, value); }
+};
 
 function App() {
   return (
-      <HARAnalyzerPreferencesProvider usePreferenceStore={useWebStorage}>
+      <HARAnalyzerPreferencesStore userPreferencesStore={myStorage}>
         ...your HAR Analyzer components
-      </HARAnalyzerPreferencesProvider>
+      </HARAnalyzerPreferencesStore>
   );
 }
 ```
@@ -232,11 +243,31 @@ Various types and utilities for working with HTTP Archive (.har) files are direc
 ```typescript
 import {
   getHARContentFromFile,
+  getHAREntriesFilteredByContentType,
+  getHAREntriesWithErrorResponse,
+  getHAREntryId,
+  isErrorResponse,
   type HARContent,
-  type HAREntry
+  type HAREntry,
+  type ContentTypeGroup
 } from '@har-analyzer/components';
 ```
 
+### `getHARContentFromFile(fileContent: unknown): HARContent`
+Parses a JSON string into a structured `HARContent` object. Throws an error if the content is not a valid JSON string.
+
+### `getHAREntriesFilteredByContentType(harEntries: HAREntry[], contentTypeFilters: ContentTypeGroup[]): HAREntry[]`
+Filters an array of HAR entries by their response MIME types mapped to high-level content type groups (e.g., `'JSON'`, `'XML'`, `'JS'`, `'CSS'`, `'HTML'`, `'Doc'`, `'Img'`, `'Font'`, `'Media'`, `'Other'`).
+
+### `isErrorResponse(harEntry: HAREntry): boolean`
+Returns `true` if the HAR entry's response has a status code less than 200 or greater than or equal to 400.
+
+### `getHAREntriesWithErrorResponse(harEntries: HAREntry[]): HAREntry[]`
+Returns a filtered array of HAR entries containing only those that resulted in an error (based on `isErrorResponse`).
+
+### `getHAREntryId(harEntry: HAREntry): string`
+Generates a unique deterministic ID for a given HAR entry using a combination of `startedDateTime`, `time`, and `request.url`.
+
 ---
 
 ## Development

package/dist/chunks/collapsible-key-value-list.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import n from "@cloudscape-design/components/box";
+import p from "@cloudscape-design/components/column-layout";
+import { C as a } from "./collapsible-section.js";
+import s from "@cloudscape-design/components/copy-to-clipboard";
+function u(i) {
+  const { textToCopy: t, textToDisplay: r } = i;
+  return /* @__PURE__ */ o(
+    s,
+    {
+      variant: "inline",
+      textToCopy: t,
+      textToDisplay: r,
+      copyErrorText: "Failed to copy",
+      copySuccessText: "Copied!"
+    }
+  );
+}
+function x({ title: i, items: t = [] }) {
+  return /* @__PURE__ */ o(a, { variant: "inline", title: i, children: /* @__PURE__ */ o(p, { borders: "horizontal", columns: 2, disableGutters: !0, children: t.reduce((r, { name: l, value: e }) => (r.push(/* @__PURE__ */ o(n, { variant: "awsui-key-label", children: l })), r.push(e ? /* @__PURE__ */ o(u, { textToCopy: e }) : /* @__PURE__ */ o(n, { variant: "span", children: "-" })), r), []) }) });
+}
+export {
+  x as C
+};

package/dist/chunks/collapsible-section.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import a from "@cloudscape-design/components/expandable-section";
+import { H as n } from "./index2.js";
+function p({
+  title: t,
+  children: o,
+  variant: r = "default"
+}) {
+  return /* @__PURE__ */ e(
+    a,
+    {
+      variant: r,
+      headerText: t,
+      defaultExpanded: !0,
+      disableContentPaddings: !0,
+      children: /* @__PURE__ */ e(n, { children: o })
+    }
+  );
+}
+export {
+  p as C
+};