@har-analyzer/components 0.0.5 → 0.0.9

package/dist/har-file-uploader.d.ts

@@ -1,13 +1,16 @@
-import type { Har } from 'har-format';
+import { Har } from 'har-format';
 import { JSX } from 'react/jsx-runtime';
 
-declare type HarContent = Har;
+declare type HARContent = Har;
 
 declare function HARFileUploader({ onChange }: HARFileUploaderProps): JSX.Element;
 export default HARFileUploader;
 
 declare interface HARFileUploaderProps {
-    onChange: (harContent: HarContent, harFileName?: string) => void;
+    onChange: (args: {
+        harContent: HARContent;
+        harFileName?: string;
+    }) => void;
 }
 
 export { }

package/dist/har-file-uploader.js

@@ -1,8 +1,75 @@
-import "./chunks/content-type.js";
-import "./chunks/vertical-gap.js";
-import { H as a } from "./chunks/index3.js";
-import "react";
-import "./chunks/index4.js";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import f from "@cloudscape-design/components/box";
+import p from "@cloudscape-design/components/file-dropzone";
+import g from "@cloudscape-design/components/file-input";
+import { useState as F } from "react";
+import { V as d } from "./chunks/vertical-gap.js";
+import { g as E } from "./chunks/har.js";
+import w from "@cloudscape-design/components/flashbar";
+const c = ".har";
+function C(r) {
+  return r ? r.name.toLowerCase().endsWith(c) : !1;
+}
+function A(r) {
+  return r.length !== 1;
+}
+function x(r) {
+  const o = [];
+  return A(r) && o.push("You can only upload one file at a time"), C(r[0]) || o.push(`Only files with the "${c}" extension are allowed`), o;
+}
+function y(r) {
+  return new Promise((o, e) => {
+    if (!r) {
+      e(new Error("No HAR file provided"));
+      return;
+    }
+    const i = new FileReader();
+    i.onload = (n) => {
+      try {
+        const s = n.target?.result;
+        o(s);
+      } catch (s) {
+        console.error("Failed to JSON parse file content:", s), e(new Error("errorMessage"));
+      }
+    }, i.onerror = () => {
+      e(new Error("Error reading HAR file"));
+    }, i.readAsText(r);
+  });
+}
+function R({ errors: r }) {
+  const o = r.map((e) => ({
+    type: "error",
+    content: e,
+    id: e
+  }));
+  return /* @__PURE__ */ a(w, { items: o });
+}
+function P({ onChange: r }) {
+  const [o, e] = F([]), i = async (n) => {
+    e([]);
+    const s = x(n);
+    if (s.length > 0) {
+      e(s);
+      return;
+    }
+    try {
+      const t = n[0], l = t?.name, h = await y(t), m = E(h);
+      r({ harContent: m, harFileName: l });
+    } catch (t) {
+      console.error("Error reading HAR file:", t);
+      const l = t instanceof Error ? t.message : "An unknown error occurred";
+      e([l]);
+    }
+  };
+  return /* @__PURE__ */ u(d, { children: [
+    /* @__PURE__ */ a(R, { errors: o }),
+    /* @__PURE__ */ a(p, { onChange: ({ detail: n }) => i(n.value), children: /* @__PURE__ */ u(d, { alignItems: "center", size: "s", children: [
+      /* @__PURE__ */ a(f, { color: "inherit", children: "Drop your .har file here" }),
+      /* @__PURE__ */ a(f, { color: "inherit", children: "or" }),
+      /* @__PURE__ */ a(g, { accept: c, value: [], onChange: ({ detail: n }) => i(n.value), children: "Choose file" })
+    ] }) })
+  ] });
+}
 export {
-  a as default
+  P as default
 };

package/dist/index.d.ts

@@ -1,29 +1,44 @@
-import type { Har } from 'har-format';
+import { Entry } from 'har-format';
+import { Har } from 'har-format';
 import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
 
-declare function getEntriesFromHAR(harContent?: Har) {
-    	return harContent?.log.entries || [];
-}
+declare const CONTENT_TYPE_GROUPS: readonly [...("JSON" | "XML" | "JS" | "CSS" | "HTML" | "Doc" | "Img" | "Font" | "Media")[], "Other"];
+
+declare type ContentTypeGroup = (typeof CONTENT_TYPE_GROUPS)[number];
+
+export declare function getEntriesFromHAR(harContent?: Har): Entry[];
+
+export declare function getHARContentFromFile(fileContent: unknown): HARContent;
+
+export declare function getHAREntriesFilteredByContentType(harEntries: HAREntry[], contentTypeFilters: ContentTypeGroup[]): HAREntry[];
+
+export declare function getHAREntriesWithErrorResponse(harEntries: HAREntry[]): HAREntry[];
+
+export declare function getUniqueHeaderNames(harEntries: HAREntry[], type: 'request' | 'response'): string[];
 
-export declare function HarAnalyzer({ logo, appName }: HarAnalyzerProps): JSX.Element;
+export declare function HARAnalyzer({ logo, appName }: HARAnalyzerProps): JSX.Element;
 
-declare interface HarAnalyzerProps {
+export declare function HARAnalyzerPreferencesProvider({ store, children }: PropsWithChildren<{
+    store: UserPreferenceStore;
+}>): JSX.Element;
+
+declare interface HARAnalyzerProps {
     logo?: React.ReactNode;
-    appName: string;
+    appName?: string;
 }
 
-declare type HarContent = Har;
+export declare type HARContent = Har;
 
-export declare function HAREntriesViewer({ harFileName, harContent, onChange }: HAREntriesViewerProps): JSX.Element | undefined;
+export declare function HARContentViewer(props: HARContentViewerProps): JSX.Element;
 
-declare interface HAREntriesViewerProps {
-    harFileName?: string;
-    harContent?: HarContent;
-    onChange: (selectedHAREntry: HAREntry) => void;
+declare interface HARContentViewerProps {
+    harFileName: string;
+    harContent: HARContent;
 }
 
-declare type HAREntry = Omit<HAREntryWithoutError, 'response'> & {
-    	response: HARResponseWithError;
+export declare type HAREntry = Omit<HAREntryWithoutError, 'response'> & {
+    response: HARResponseWithError;
 };
 
 export declare function HAREntryViewer({ harEntry }: HAREntryViewerProps): JSX.Element;
@@ -37,9 +52,26 @@ declare type HAREntryWithoutError = ReturnType<typeof getEntriesFromHAR>[number]
 export declare function HARFileUploader({ onChange }: HARFileUploaderProps): JSX.Element;
 
 declare interface HARFileUploaderProps {
-    onChange: (harContent: HarContent, harFileName?: string) => void;
+    onChange: (args: {
+        harContent: HARContent;
+        harFileName?: string;
+    }) => void;
 }
 
-declare type HARResponseWithError = HAREntryWithoutError['response'] & { _error?: string };
+declare type HARResponseWithError = HAREntryWithoutError['response'] & {
+    _error?: string;
+};
+
+export declare function isErrorResponse(harEntry: HAREntry): boolean;
+
+export declare function useHAREntriesFilters(harEntries: HAREntry[]): {
+    filteredHAREntries: HAREntry[];
+    HAREntriesFilters: () => JSX.Element;
+};
+
+declare interface UserPreferenceStore {
+    getPreference: (key: string) => Promise<string | undefined>;
+    setPreference: (key: string, value: string) => Promise<void>;
+}
 
 export { }

package/dist/index.js

@@ -1,10 +1,21 @@
-import { default as o } from "./har-analyzer.js";
-import { H as t } from "./chunks/index.js";
-import { H as f } from "./chunks/index2.js";
-import { H as s } from "./chunks/index3.js";
+import { default as t } from "./har-analyzer.js";
+import { default as s } from "./har-analyzer-preferences.js";
+import { default as n } from "./har-content-viewer.js";
+import { u as f } from "./chunks/index.js";
+import { default as A } from "./har-entry-viewer.js";
+import { default as p } from "./har-file-uploader.js";
+import { a as d, g as m, b as u, c as x, d as E, i as g } from "./chunks/har.js";
 export {
-  t as HAREntriesViewer,
-  f as HAREntryViewer,
-  s as HARFileUploader,
-  o as HarAnalyzer
+  t as HARAnalyzer,
+  s as HARAnalyzerPreferencesProvider,
+  n as HARContentViewer,
+  A as HAREntryViewer,
+  p as HARFileUploader,
+  d as getEntriesFromHAR,
+  m as getHARContentFromFile,
+  u as getHAREntriesFilteredByContentType,
+  x as getHAREntriesWithErrorResponse,
+  E as getUniqueHeaderNames,
+  g as isErrorResponse,
+  f as useHAREntriesFilters
 };

package/package.json

@@ -1,15 +1,16 @@
 {
 	"name": "@har-analyzer/components",
-	"version": "0.0.5",
+	"type": "module",
+	"version": "0.0.9",
 	"description": "Reusable React components for HAR Analyzer",
 	"author": "Allan Joshua",
 	"license": "MIT",
+	"homepage": "https://github.com/theallanjoshua/har-analyzer/tree/main/packages/components#readme",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/theallanjoshua/har-analyzer.git",
 		"directory": "packages/components"
 	},
-	"homepage": "https://github.com/theallanjoshua/har-analyzer/tree/main/packages/components#readme",
 	"bugs": {
 		"url": "https://github.com/theallanjoshua/har-analyzer/issues"
 	},
@@ -20,39 +21,35 @@
 		"har file viewer"
 	],
 	"publishConfig": {
-    "access": "public"
-  },
-	"type": "module",
-	"files": [
-		"dist"
-	],
-	"main": "dist/index.js",
-	"types": "dist/index.d.ts",
+		"access": "public"
+	},
 	"exports": {
 		".": {
-			"import": "./dist/index.js",
-			"types": "./dist/index.d.ts"
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
 		},
 		"./*": {
-			"import": "./dist/*.js",
-			"types": "./dist/*.d.ts"
+			"types": "./dist/*.d.ts",
+			"import": "./dist/*.js"
 		}
 	},
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
 	"scripts": {
-		"lint": "biome check",
-		"dev": "concurrently -k \"tsc --emitDeclarationOnly --watch\" \"vite build --watch\"",
-		"build": "tsc && vite build",
-		"prepublishOnly": "pnpm run lint && pnpm run build"
-	},
-	"dependencies": {
-		"buffer": "^6.0.3",
-		"date-fns": "^4.1.0",
-		"date-fns-tz": "^3.2.0",
-		"pretty-bytes": "^7.0.0",
-		"react-error-boundary": "^6.0.0",
-		"use-local-storage-state": "^19.5.0"
+		"clean": "rm -rf dist",
+		"lint": "eslint",
+		"lint:fix": "eslint --fix",
+		"check-types": "tsc --noEmit",
+		"dev": "vite build --watch",
+		"build": "vite build",
+		"validate": "pnpm clean && pnpm lint && pnpm check-types && pnpm build",
+		"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",
@@ -60,5 +57,13 @@
 		"@cloudscape-design/global-styles": "^1.0.44",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0"
+	},
+	"dependencies": {
+		"buffer": "^6.0.3",
+		"date-fns": "^4.1.0",
+		"date-fns-tz": "^3.2.0",
+		"local-db-storage": "^2.0.0",
+		"pretty-bytes": "^7.0.0",
+		"react-error-boundary": "^6.0.0"
 	}
 }