@automattic/jetpack-components 0.73.4 → 1.1.0
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/CHANGELOG.md +13 -0
- package/build/components/details-viewer/index.d.ts +11 -0
- package/build/components/details-viewer/index.js +46 -0
- package/build/index.d.ts +1 -0
- package/build/index.js +1 -0
- package/components/details-viewer/index.tsx +66 -0
- package/components/details-viewer/styles.module.scss +40 -0
- package/index.ts +1 -0
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [1.1.0] - 2025-06-04
|
|
6
|
+
### Added
|
|
7
|
+
- Add functionality to correctly display database threats in the Protect UI. [#43663]
|
|
8
|
+
|
|
9
|
+
### Changed
|
|
10
|
+
- Update package dependencies. [#43766]
|
|
11
|
+
|
|
12
|
+
## [1.0.0] - 2025-06-03
|
|
13
|
+
### Changed
|
|
14
|
+
- Update package dependencies. [#43718] [#43734]
|
|
15
|
+
|
|
5
16
|
## [0.73.4] - 2025-06-02
|
|
6
17
|
### Added
|
|
7
18
|
- Added className prop to AdminPage component. [#43592]
|
|
@@ -1411,6 +1422,8 @@
|
|
|
1411
1422
|
### Changed
|
|
1412
1423
|
- Update node version requirement to 14.16.1
|
|
1413
1424
|
|
|
1425
|
+
[1.1.0]: https://github.com/Automattic/jetpack-components/compare/1.0.0...1.1.0
|
|
1426
|
+
[1.0.0]: https://github.com/Automattic/jetpack-components/compare/0.73.4...1.0.0
|
|
1414
1427
|
[0.73.4]: https://github.com/Automattic/jetpack-components/compare/0.73.3...0.73.4
|
|
1415
1428
|
[0.73.3]: https://github.com/Automattic/jetpack-components/compare/0.73.2...0.73.3
|
|
1416
1429
|
[0.73.2]: https://github.com/Automattic/jetpack-components/compare/0.73.1...0.73.2
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Component to display details data from database matches
|
|
3
|
+
*
|
|
4
|
+
* @param {object} props - Component props
|
|
5
|
+
* @param {object} props.details - The details object containing optionValue and its value
|
|
6
|
+
* @return {import('react').ReactElement} React component
|
|
7
|
+
*/
|
|
8
|
+
declare const DetailsViewer: ({ details }: {
|
|
9
|
+
details: any;
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default DetailsViewer;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import styles from './styles.module.scss';
|
|
3
|
+
/**
|
|
4
|
+
* Converts a camelCase string to snake_case
|
|
5
|
+
*
|
|
6
|
+
* @param {string} str - The camelCase string to convert
|
|
7
|
+
* @return {string} The snake_case string
|
|
8
|
+
*/
|
|
9
|
+
const camelToSnakeCase = str => {
|
|
10
|
+
return str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Recursively converts all keys in an object from camelCase to snake_case
|
|
14
|
+
*
|
|
15
|
+
* @param {object} obj - The object to convert
|
|
16
|
+
* @return {object} A new object with all keys converted to snake_case
|
|
17
|
+
*/
|
|
18
|
+
const convertObjectKeysToSnakeCase = obj => {
|
|
19
|
+
if (obj === null || typeof obj !== 'object') {
|
|
20
|
+
return obj;
|
|
21
|
+
}
|
|
22
|
+
if (Array.isArray(obj)) {
|
|
23
|
+
return obj.map(item => convertObjectKeysToSnakeCase(item));
|
|
24
|
+
}
|
|
25
|
+
return Object.entries(obj).reduce((result, [key, value]) => {
|
|
26
|
+
const snakeKey = camelToSnakeCase(key);
|
|
27
|
+
result[snakeKey] = convertObjectKeysToSnakeCase(value);
|
|
28
|
+
return result;
|
|
29
|
+
}, {});
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Component to display details data from database matches
|
|
33
|
+
*
|
|
34
|
+
* @param {object} props - Component props
|
|
35
|
+
* @param {object} props.details - The details object containing optionValue and its value
|
|
36
|
+
* @return {import('react').ReactElement} React component
|
|
37
|
+
*/
|
|
38
|
+
const DetailsViewer = ({ details }) => {
|
|
39
|
+
if (!details || typeof details !== 'object') {
|
|
40
|
+
return null;
|
|
41
|
+
}
|
|
42
|
+
return (_jsx("div", { className: styles['details-viewer'], children: Object.entries(details).map(([key, value]) => (_jsxs("div", { className: styles['details-viewer__item'], children: [_jsxs("div", { className: styles['details-viewer__key'], children: [camelToSnakeCase(key), ":"] }), _jsx("div", { className: styles['details-viewer__value'], children: _jsx("pre", { children: typeof value === 'object' && value !== null
|
|
43
|
+
? JSON.stringify(convertObjectKeysToSnakeCase(value), null, 2)
|
|
44
|
+
: String(value) }) })] }, key))) }));
|
|
45
|
+
};
|
|
46
|
+
export default DetailsViewer;
|
package/build/index.d.ts
CHANGED
|
@@ -62,4 +62,5 @@ export { default as RadioControl } from './components/radio-control/index.tsx';
|
|
|
62
62
|
export { default as StatCard } from './components/stat-card/index.tsx';
|
|
63
63
|
export { default as DiffViewer } from './components/diff-viewer/index.tsx';
|
|
64
64
|
export { default as MarkedLines } from './components/marked-lines/index.tsx';
|
|
65
|
+
export { default as DetailsViewer } from './components/details-viewer/index.tsx';
|
|
65
66
|
export * from './components/global-notices/index.ts';
|
package/build/index.js
CHANGED
|
@@ -76,4 +76,5 @@ export { default as RadioControl } from "./components/radio-control/index.js";
|
|
|
76
76
|
export { default as StatCard } from "./components/stat-card/index.js";
|
|
77
77
|
export { default as DiffViewer } from "./components/diff-viewer/index.js";
|
|
78
78
|
export { default as MarkedLines } from "./components/marked-lines/index.js";
|
|
79
|
+
export { default as DetailsViewer } from "./components/details-viewer/index.js";
|
|
79
80
|
export * from "./components/global-notices/index.js";
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styles from './styles.module.scss';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Converts a camelCase string to snake_case
|
|
6
|
+
*
|
|
7
|
+
* @param {string} str - The camelCase string to convert
|
|
8
|
+
* @return {string} The snake_case string
|
|
9
|
+
*/
|
|
10
|
+
const camelToSnakeCase = str => {
|
|
11
|
+
return str.replace( /[A-Z]/g, letter => `_${ letter.toLowerCase() }` );
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Recursively converts all keys in an object from camelCase to snake_case
|
|
16
|
+
*
|
|
17
|
+
* @param {object} obj - The object to convert
|
|
18
|
+
* @return {object} A new object with all keys converted to snake_case
|
|
19
|
+
*/
|
|
20
|
+
const convertObjectKeysToSnakeCase = obj => {
|
|
21
|
+
if ( obj === null || typeof obj !== 'object' ) {
|
|
22
|
+
return obj;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if ( Array.isArray( obj ) ) {
|
|
26
|
+
return obj.map( item => convertObjectKeysToSnakeCase( item ) );
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
return Object.entries( obj ).reduce( ( result, [ key, value ] ) => {
|
|
30
|
+
const snakeKey = camelToSnakeCase( key );
|
|
31
|
+
result[ snakeKey ] = convertObjectKeysToSnakeCase( value );
|
|
32
|
+
return result;
|
|
33
|
+
}, {} );
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Component to display details data from database matches
|
|
38
|
+
*
|
|
39
|
+
* @param {object} props - Component props
|
|
40
|
+
* @param {object} props.details - The details object containing optionValue and its value
|
|
41
|
+
* @return {import('react').ReactElement} React component
|
|
42
|
+
*/
|
|
43
|
+
const DetailsViewer = ( { details } ) => {
|
|
44
|
+
if ( ! details || typeof details !== 'object' ) {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<div className={ styles[ 'details-viewer' ] }>
|
|
50
|
+
{ Object.entries( details ).map( ( [ key, value ] ) => (
|
|
51
|
+
<div key={ key } className={ styles[ 'details-viewer__item' ] }>
|
|
52
|
+
<div className={ styles[ 'details-viewer__key' ] }>{ camelToSnakeCase( key ) }:</div>
|
|
53
|
+
<div className={ styles[ 'details-viewer__value' ] }>
|
|
54
|
+
<pre>
|
|
55
|
+
{ typeof value === 'object' && value !== null
|
|
56
|
+
? JSON.stringify( convertObjectKeysToSnakeCase( value ), null, 2 )
|
|
57
|
+
: String( value ) }
|
|
58
|
+
</pre>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
) ) }
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export default DetailsViewer;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
.details-viewer {
|
|
2
|
+
padding: 0;
|
|
3
|
+
background-color: var( --jp-gray-0 );
|
|
4
|
+
font-family: monospace;
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
overflow-x: auto;
|
|
8
|
+
margin-bottom: var( --spacing-base ); // 8px
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.details-viewer__item {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: row;
|
|
14
|
+
padding: calc( var( --spacing-base ) / 2 ); // 4px
|
|
15
|
+
border-bottom: 1px solid var( --jp-gray-10 );
|
|
16
|
+
|
|
17
|
+
&:last-child {
|
|
18
|
+
border-bottom: none;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.details-viewer__key {
|
|
23
|
+
font-weight: 700;
|
|
24
|
+
padding-right: var( --spacing-base ); // 8px
|
|
25
|
+
color: var( --jp-gray-80 );
|
|
26
|
+
min-width: 120px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.details-viewer__value {
|
|
30
|
+
flex: 1;
|
|
31
|
+
white-space: pre-wrap;
|
|
32
|
+
word-break: break-all;
|
|
33
|
+
|
|
34
|
+
pre {
|
|
35
|
+
margin: 0;
|
|
36
|
+
padding: 0;
|
|
37
|
+
font-family: monospace;
|
|
38
|
+
background-color: transparent;
|
|
39
|
+
}
|
|
40
|
+
}
|
package/index.ts
CHANGED
|
@@ -83,4 +83,5 @@ export { default as RadioControl } from './components/radio-control/index.tsx';
|
|
|
83
83
|
export { default as StatCard } from './components/stat-card/index.tsx';
|
|
84
84
|
export { default as DiffViewer } from './components/diff-viewer/index.tsx';
|
|
85
85
|
export { default as MarkedLines } from './components/marked-lines/index.tsx';
|
|
86
|
+
export { default as DetailsViewer } from './components/details-viewer/index.tsx';
|
|
86
87
|
export * from './components/global-notices/index.ts';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@automattic/format-currency": "1.0.1",
|
|
18
|
-
"@automattic/jetpack-boost-score-api": "^0.1
|
|
19
|
-
"@automattic/jetpack-api": "^0.
|
|
18
|
+
"@automattic/jetpack-boost-score-api": "^1.0.1",
|
|
19
|
+
"@automattic/jetpack-api": "^1.0.0",
|
|
20
20
|
"@automattic/jetpack-script-data": "^0.4.2",
|
|
21
|
-
"@automattic/number-formatters": "^1.0.
|
|
21
|
+
"@automattic/number-formatters": "^1.0.4",
|
|
22
22
|
"@babel/runtime": "^7",
|
|
23
23
|
"@wordpress/browserslist-config": "6.24.0",
|
|
24
24
|
"@wordpress/components": "29.10.0",
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
"prop-types": "^15.7.2",
|
|
34
34
|
"qrcode.react": "4.2.0",
|
|
35
35
|
"react-slider": "2.0.5",
|
|
36
|
-
"social-logos": "^3.2.
|
|
36
|
+
"social-logos": "^3.2.2",
|
|
37
37
|
"uplot": "1.6.31",
|
|
38
38
|
"uplot-react": "1.1.4"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@automattic/jetpack-base-styles": "^0.
|
|
42
|
-
"@babel/core": "7.
|
|
43
|
-
"@babel/preset-react": "7.
|
|
41
|
+
"@automattic/jetpack-base-styles": "^1.0.0",
|
|
42
|
+
"@babel/core": "7.27.4",
|
|
43
|
+
"@babel/preset-react": "7.27.1",
|
|
44
44
|
"@jest/globals": "29.7.0",
|
|
45
45
|
"@storybook/addon-actions": "8.6.7",
|
|
46
46
|
"@storybook/blocks": "8.6.7",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@testing-library/react": "16.2.0",
|
|
50
50
|
"@testing-library/user-event": "14.6.1",
|
|
51
51
|
"@types/jest": "29.5.14",
|
|
52
|
-
"@types/react": "18.3.
|
|
53
|
-
"@types/react-dom": "18.3.
|
|
52
|
+
"@types/react": "18.3.23",
|
|
53
|
+
"@types/react-dom": "18.3.7",
|
|
54
54
|
"@types/react-slider": "1.3.6",
|
|
55
55
|
"jest": "29.7.0",
|
|
56
56
|
"jest-environment-jsdom": "29.7.0",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"require-from-string": "2.0.2",
|
|
60
60
|
"storybook": "8.6.7",
|
|
61
61
|
"ts-dedent": "2.2.0",
|
|
62
|
-
"typescript": "5.8.
|
|
62
|
+
"typescript": "5.8.3",
|
|
63
63
|
"webpack": "5.94.0",
|
|
64
64
|
"webpack-cli": "6.0.1"
|
|
65
65
|
},
|