@har-analyzer/components 0.0.20 → 0.0.21

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { default as HAREntriesViewer } from './features/har-entries-viewer';
 export type * from './features/har-entries-viewer';
 export { default as HARFileUploader } from './features/har-file-uploader';
 export type * from './features/har-file-uploader';
-export { default as ListHAREntries } from './features/list-har-entries';
+export * from './features/list-har-entries';
 export type * from './features/list-har-entries';
 export { default as ViewHAREntry } from './features/view-har-entry';
 export type * from './features/view-har-entry';

package/dist/index.js

@@ -1,21 +1,29 @@
 import { default as t } from "./har-analyzer.js";
-import { U as o } from "./chunks/provider.js";
-import { default as n } from "./har-entries-viewer.js";
-import { default as A } from "./har-file-uploader.js";
-import { L as f } from "./chunks/index.js";
-import { V as H } from "./chunks/index2.js";
-import { g as m, a as d, b as E, d as x, c as g, i as y } from "./chunks/har.js";
+import { U as a } from "./chunks/provider.js";
+import { default as A } from "./har-entries-viewer.js";
+import { default as H } from "./har-file-uploader.js";
+import { L as n } from "./chunks/list-har-entries.js";
+import { L as f, a as l, b as p } from "./chunks/index.js";
+import { default as T } from "./view-har-entry.js";
+import { D as g, H as u, g as x, a as y, b as L, e as _, d as U, f as b, c as F, i as V } from "./chunks/har.js";
 export {
+  g as DEFAULT_HAR_ENTRY_ATTRIBUTES_TO_VALUE_MAP,
   t as HARAnalyzer,
-  o as HARAnalyzerPreferencesStore,
-  n as HAREntriesViewer,
-  A as HARFileUploader,
-  f as ListHAREntries,
-  H as ViewHAREntry,
-  m as getHARContentFromFile,
-  d as getHAREntriesFilteredByContentType,
-  E as getHAREntriesWithErrorResponse,
-  x as getHAREntryId,
-  g as getUniqueHeaderNames,
-  y as isErrorResponse
+  a as HARAnalyzerPreferencesStore,
+  A as HAREntriesViewer,
+  H as HARFileUploader,
+  u as HAR_HEADER_TYPES,
+  n as ListHAREntries,
+  f as ListHAREntriesProvider,
+  l as ListHAREntriesTable,
+  p as ListHAREntriesTableHeader,
+  T as ViewHAREntry,
+  x as getHARContentFromFile,
+  y as getHAREntriesFilteredByContentType,
+  L as getHAREntriesWithErrorResponse,
+  _ as getHAREntryAttributesToValuesMap,
+  U as getHAREntryHeadersToValuesMap,
+  b as getHAREntryId,
+  F as getUniqueHeaderNames,
+  V as isErrorResponse
 };

package/dist/list-har-entries.js

@@ -1,5 +1,8 @@
-import "react/jsx-runtime";
-import { L as a } from "./chunks/index.js";
+import { L as r } from "./chunks/list-har-entries.js";
+import { L as i, a, b as L } from "./chunks/index.js";
 export {
-  a as default
+  r as ListHAREntries,
+  i as ListHAREntriesProvider,
+  a as ListHAREntriesTable,
+  L as ListHAREntriesTableHeader
 };

package/dist/utils/array.d.ts

@@ -0,0 +1,7 @@
+interface SplitByResult<T> {
+    satisfies: T[];
+    misses: T[];
+}
+export declare function splitBy<T>(array: ReadonlyArray<T>, predicate: (item: T) => boolean): SplitByResult<T>;
+export declare function removeUndefined<T>(array: ReadonlyArray<T | undefined>): T[];
+export {};

package/dist/utils/har.d.ts

@@ -13,5 +13,16 @@ export type HAREntry = Omit<HAREntryWithoutError, 'response'> & {
 export declare function getHAREntriesFilteredByContentType(harEntries: HAREntry[], contentTypeFilters: ContentTypeGroup[]): HAREntry[];
 export declare function isErrorResponse(harEntry: HAREntry): boolean;
 export declare function getHAREntriesWithErrorResponse(harEntries: HAREntry[]): HAREntry[];
-export declare function getUniqueHeaderNames(harEntries: HAREntry[], type: 'request' | 'response'): string[];
+export declare const HAR_HEADER_TYPES: readonly ["request", "response"];
+export declare function getUniqueHeaderNames(harEntries: HAREntry[], type: (typeof HAR_HEADER_TYPES)[number]): string[];
+type HAREntryAttributesToValueMap = Record<string, (harEntry: HAREntry) => string | number | string[]>;
+export declare const DEFAULT_HAR_ENTRY_ATTRIBUTES_TO_VALUE_MAP: {
+    'request.shortUrl': (harEntry: HAREntry) => string;
+    'request.url': (harEntry: HAREntry) => string;
+    'request.method': (harEntry: HAREntry) => string;
+    'response.status': (harEntry: HAREntry) => number;
+};
+type HAREntryHeadersToValueMap = Record<string, (harEntry: HAREntry) => string[]>;
+export declare function getHAREntryHeadersToValuesMap(harEntries: HAREntry[]): HAREntryHeadersToValueMap;
+export declare function getHAREntryAttributesToValuesMap(harEntries: HAREntry[]): HAREntryAttributesToValueMap;
 export declare function getHAREntryId(harEntry: HAREntry): string;

package/dist/view-har-entry.js

@@ -1,8 +1,60 @@
-import "react/jsx-runtime";
-import "@cloudscape-design/components/tabs";
-import "react";
-import { D, V as E } from "./chunks/index2.js";
+import { jsx as e } from "react/jsx-runtime";
+import m from "@cloudscape-design/components/tabs";
+import { Suspense as u, lazy as a, useState as y, useMemo as T } from "react";
+import h from "@cloudscape-design/components/spinner";
+function f({ children: n }) {
+  return /* @__PURE__ */ e(u, { fallback: /* @__PURE__ */ e(h, { size: "large" }), children: n });
+}
+const R = a(() => import("./chunks/request-headers.js")), I = a(() => import("./chunks/request-payload.js")), A = a(() => import("./chunks/response-headers.js")), E = a(() => import("./chunks/response-payload.js")), g = a(() => import("./chunks/content-viewer.js"));
+function o({ children: n }) {
+  return /* @__PURE__ */ e(f, { children: n });
+}
+const i = "request-headers";
+function L(n) {
+  const {
+    harEntry: t,
+    initialSelectedTabId: d = i,
+    onSelectedTabIdChange: s
+  } = n, [c, l] = y(d), p = T(() => JSON.stringify(t), [t]);
+  return /* @__PURE__ */ e(
+    m,
+    {
+      activeTabId: c,
+      onChange: ({ detail: b }) => {
+        const { activeTabId: r } = b;
+        l(r), s && s(r);
+      },
+      tabs: [
+        {
+          label: "Request Headers",
+          id: i,
+          content: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(R, { harEntry: t }) })
+        },
+        {
+          label: "Request Payload",
+          id: "request-payload",
+          content: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(I, { harEntry: t }) })
+        },
+        {
+          label: "Response Headers",
+          id: "response-headers",
+          content: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(A, { harEntry: t }) })
+        },
+        {
+          label: "Response Payload",
+          id: "response-payload",
+          content: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(E, { harEntry: t }) })
+        },
+        {
+          label: "HAR Entry",
+          id: "har-entry",
+          content: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(g, { content: p, mimeType: "json" }) })
+        }
+      ]
+    }
+  );
+}
 export {
-  D as DEFAULT_SELECTED_TAB_ID,
-  E as default
+  i as DEFAULT_SELECTED_TAB_ID,
+  L as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@har-analyzer/components",
 	"type": "module",
-	"version": "0.0.20",
+	"version": "0.0.21",
 	"description": "Reusable React components for HAR Analyzer",
 	"author": "Allan Joshua",
 	"license": "MIT",
@@ -49,6 +49,7 @@
 		"prepublishOnly": "pnpm validate"
 	},
 	"peerDependencies": {
+		"@cloudscape-design/board-components": "^3.0.150",
 		"@cloudscape-design/code-view": "^3.0.66",
 		"@cloudscape-design/collection-hooks": "^1.0.73",
 		"@cloudscape-design/components": "^3.0.1022",
@@ -62,7 +63,6 @@
 		"buffer": "^6.0.3",
 		"date-fns": "^4.1.0",
 		"date-fns-tz": "^3.2.0",
-		"fast-grid-layout": "^0.1.0",
 		"pretty-bytes": "^7.0.0",
 		"react-error-boundary": "^6.0.0"
 	}

package/dist/assets/har-entries-viewer.css

@@ -1 +0,0 @@
-:root{--fast-grid-layout-outline: 3px solid rgba(30, 120, 255, .55)}.fast-grid-layout{position:relative;transition:height .18s ease-out;-webkit-touch-callout:none;touch-action:manipulation}.fast-grid-layout>.item{position:absolute;transition:width .18s ease,height .18s ease,transform .18s ease,outline .1s ease-out}.fast-grid-layout>.item.-selected{outline:var(--fast-grid-layout-outline);z-index:1;-webkit-user-select:none;user-select:none;touch-action:none}.fast-grid-layout>.item img{-webkit-user-select:none;user-select:none}.fast-grid-layout>.item .content{cursor:auto}.fast-grid-layout.-editable>.item.-dynamic{cursor:pointer}.fast-grid-layout.-moving>.item,.fast-grid-layout.-resizing>.item{will-change:width,height,transform}.fast-grid-layout.-moving>.item.-selected,.fast-grid-layout.-resizing>.item.-selected{opacity:.67}._hide-selection *::selection{all:inherit}._force-cursor *{cursor:var(--force-cursor)!important}

package/dist/chunks/headers-viewer.js

@@ -1,32 +0,0 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { C as t } from "./collapsible-key-value-list.js";
-import { V as i } from "./vertical-gap.js";
-function u({ harEntry: e }) {
-  return /* @__PURE__ */ a(i, { size: "xxxs", children: [
-    /* @__PURE__ */ s(
-      t,
-      {
-        title: "General",
-        items: [
-          {
-            name: "URL",
-            value: e.request.url
-          },
-          {
-            name: "Method",
-            value: e.request.method
-          },
-          {
-            name: "Status",
-            value: `${e.response.status}`
-          }
-        ]
-      }
-    ),
-    /* @__PURE__ */ s(t, { title: "Request Headers", items: e.request.headers }),
-    /* @__PURE__ */ s(t, { title: "Response Headers", items: e.response.headers })
-  ] });
-}
-export {
-  u as default
-};

package/dist/chunks/payload-viewer.js

@@ -1,15 +0,0 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { C as s } from "./collapsible-key-value-list.js";
-import { C as a } from "./collapsible-section.js";
-import { V as m } from "./vertical-gap.js";
-import l from "./content-viewer.js";
-function d({ harEntry: e }) {
-  const o = e.request.postData?.text ?? "", r = e.request.postData?.mimeType;
-  return /* @__PURE__ */ i(m, { children: [
-    /* @__PURE__ */ t(s, { title: "Query Parameters", items: e.request.queryString }),
-    /* @__PURE__ */ t(a, { title: "Request Payload", children: /* @__PURE__ */ t(l, { content: o, mimeType: r }) })
-  ] });
-}
-export {
-  d as default
-};

package/dist/chunks/response-viewer.js

@@ -1,10 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { C as i } from "./collapsible-section.js";
-import c from "./content-viewer.js";
-function l({ harEntry: e }) {
-  const o = e.response.content.text ?? "", t = e.response.content.encoding, s = e.response.content.mimeType;
-  return /* @__PURE__ */ n(i, { title: "Response", children: /* @__PURE__ */ n(c, { content: o, encoding: t, mimeType: s }) });
-}
-export {
-  l as default
-};

package/dist/components/r2-layout/fgl.d.ts

@@ -1,10 +0,0 @@
-import { GridLayoutItem } from 'fast-grid-layout';
-import { PropsWithChildren } from 'react';
-export type FGLProps = PropsWithChildren<{
-    layout: GridLayoutItem[];
-    onChange: (newLayout: GridLayoutItem[]) => void;
-    totalColumns?: number;
-    gap?: number;
-    rowHeight?: number;
-}>;
-export default function FGL(props: FGLProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/r2-layout/index.d.ts

@@ -1,22 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-interface CellDefinition<T> {
-    id: string;
-    w: number;
-    h: number;
-    x: number;
-    y: number;
-    props: T;
-}
-export interface R2LayoutProps<T> {
-    layoutDefinitions: CellDefinition<T>[];
-    onRender: (id: string, props: T) => ReactNode;
-    onChange: (newLayoutDefinitions: CellDefinition<T>[]) => void;
-    layoutItemStyle?: CSSProperties;
-    totalColumns?: number;
-    gap?: number;
-}
-/**
- * Provides a re-arrangeable & re-sizeable layout
- */
-export default function R2Layout<T>(props: R2LayoutProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/features/list-har-entries/components/har-entries-table.d.ts

@@ -1,8 +0,0 @@
-import { HAREntry } from '../../../utils/har';
-export interface HAREntriesTableProps {
-    title?: string;
-    harEntries: HAREntry[];
-    selectedHAREntries: HAREntry[];
-    onSelectionChange: (selectedHAREntries: HAREntry[]) => void;
-}
-export default function HAREntriesTable({ title, harEntries, selectedHAREntries, onSelectionChange, }: HAREntriesTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/view-har-entry/components/headers-viewer.d.ts

@@ -1,6 +0,0 @@
-import { HAREntry } from '../../../utils/har';
-interface HeadersViewerProps {
-    harEntry: HAREntry;
-}
-export default function HeadersViewer({ harEntry }: HeadersViewerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/features/view-har-entry/components/payload-viewer.d.ts

@@ -1,6 +0,0 @@
-import { HAREntry } from '../../../utils/har';
-interface PayloadViewerProps {
-    harEntry: HAREntry;
-}
-export default function PayloadViewer({ harEntry }: PayloadViewerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/features/view-har-entry/components/response-viewer.d.ts

@@ -1,6 +0,0 @@
-import { HAREntry } from '../../../utils/har';
-interface ResponseViewerProps {
-    harEntry: HAREntry;
-}
-export default function ResponseViewer({ harEntry }: ResponseViewerProps): import("react/jsx-runtime").JSX.Element;
-export {};