@har-analyzer/components 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +115 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# @har-analyzer/components
|
|
2
|
+
|
|
3
|
+
Reusable React components for HAR Analyzer.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install @har-analyzer/components
|
|
9
|
+
# or
|
|
10
|
+
yarn add @har-analyzer/components
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @har-analyzer/components
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Components
|
|
16
|
+
|
|
17
|
+
Below are the available components and their usage examples:
|
|
18
|
+
|
|
19
|
+
### HarAnalyzer
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import { HarAnalyzer } from '@har-analyzer/components';
|
|
23
|
+
|
|
24
|
+
function App() {
|
|
25
|
+
return <HarAnalyzer appName="HAR Analyzer" />;
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
**Props:**
|
|
30
|
+
|
|
31
|
+
| Name | Type | Required | Description |
|
|
32
|
+
|-----------|-----------------|----------|--------------------------------------|
|
|
33
|
+
| logo | React.ReactNode | No | A logo to display in the header. |
|
|
34
|
+
| appName | string | Yes | The name of the application. |
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
### HAREntriesViewer
|
|
39
|
+
|
|
40
|
+
```jsx
|
|
41
|
+
import { HAREntriesViewer } from '@har-analyzer/components';
|
|
42
|
+
|
|
43
|
+
function App() {
|
|
44
|
+
return (
|
|
45
|
+
<HAREntriesViewer
|
|
46
|
+
harFileName="example.har"
|
|
47
|
+
harContent={yourHarContent}
|
|
48
|
+
onChange={(selectedEntry) => console.log(selectedEntry)}
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Props:**
|
|
55
|
+
|
|
56
|
+
| Name | Type | Required | Description |
|
|
57
|
+
|---------------|-------------------------------|----------|--------------------------------------------------|
|
|
58
|
+
| harFileName | string | No | The name of the HAR file being viewed. |
|
|
59
|
+
| harContent | HarContent | No | The HAR file content object. |
|
|
60
|
+
| onChange | (entry: HAREntry) => void | Yes | Callback when a HAR entry is selected. |
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
### HAREntryViewer
|
|
65
|
+
|
|
66
|
+
```jsx
|
|
67
|
+
import { HAREntryViewer } from '@har-analyzer/components';
|
|
68
|
+
|
|
69
|
+
function App() {
|
|
70
|
+
return <HAREntryViewer harEntry={yourHarEntry} />;
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**Props:**
|
|
75
|
+
|
|
76
|
+
| Name | Type | Required | Description |
|
|
77
|
+
|-----------|-----------|----------|--------------------------------------|
|
|
78
|
+
| harEntry | HAREntry | Yes | The HAR entry to display details for.|
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
### HARFileUploader
|
|
83
|
+
|
|
84
|
+
```jsx
|
|
85
|
+
import { HARFileUploader } from '@har-analyzer/components';
|
|
86
|
+
|
|
87
|
+
function App() {
|
|
88
|
+
return (
|
|
89
|
+
<HARFileUploader
|
|
90
|
+
onChange={(harContent, fileName) => console.log(harContent, fileName)}
|
|
91
|
+
/>
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
**Props:**
|
|
97
|
+
|
|
98
|
+
| Name | Type | Required | Description |
|
|
99
|
+
|-----------|-------------------------------------------|----------|--------------------------------------------------|
|
|
100
|
+
| onChange | (harContent: HarContent, fileName?: string) => void | Yes | Callback when a HAR file is uploaded. |
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## Development
|
|
105
|
+
|
|
106
|
+
- Run `pnpm dev` to start development in watch mode.
|
|
107
|
+
- Run `pnpm build` to build the package.
|
|
108
|
+
|
|
109
|
+
## Contributing
|
|
110
|
+
|
|
111
|
+
Contributions are welcome! Please open issues or pull requests on [GitHub](https://github.com/theallanjoshua/har-analyzer).
|
|
112
|
+
|
|
113
|
+
## License
|
|
114
|
+
|
|
115
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@har-analyzer/components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Reusable React components for HAR Analyzer",
|
|
5
5
|
"author": "Allan Joshua",
|
|
6
6
|
"license": "MIT",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"url": "https://github.com/theallanjoshua/har-analyzer.git",
|
|
10
10
|
"directory": "packages/components"
|
|
11
11
|
},
|
|
12
|
-
"homepage": "https://github.com/theallanjoshua/har-analyzer#readme",
|
|
12
|
+
"homepage": "https://github.com/theallanjoshua/har-analyzer/tree/main/packages/components#readme",
|
|
13
13
|
"bugs": {
|
|
14
14
|
"url": "https://github.com/theallanjoshua/har-analyzer/issues"
|
|
15
15
|
},
|