@automattic/jetpack-components 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.1.0] - 2025-06-04
+### Added
+- Add functionality to correctly display database threats in the Protect UI. [#43663]
+
+### Changed
+- Update package dependencies. [#43766]
+
 ## [1.0.0] - 2025-06-03
 ### Changed
 - Update package dependencies. [#43718] [#43734]
@@ -1415,6 +1422,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.1.0]: https://github.com/Automattic/jetpack-components/compare/1.0.0...1.1.0
 [1.0.0]: https://github.com/Automattic/jetpack-components/compare/0.73.4...1.0.0
 [0.73.4]: https://github.com/Automattic/jetpack-components/compare/0.73.3...0.73.4
 [0.73.3]: https://github.com/Automattic/jetpack-components/compare/0.73.2...0.73.3

package/build/components/details-viewer/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Component to display details data from database matches
+ *
+ * @param {object} props         - Component props
+ * @param {object} props.details - The details object containing optionValue and its value
+ * @return {import('react').ReactElement} React component
+ */
+declare const DetailsViewer: ({ details }: {
+    details: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DetailsViewer;

package/build/components/details-viewer/index.js

@@ -0,0 +1,46 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styles from './styles.module.scss';
+/**
+ * Converts a camelCase string to snake_case
+ *
+ * @param {string} str - The camelCase string to convert
+ * @return {string} The snake_case string
+ */
+const camelToSnakeCase = str => {
+    return str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
+};
+/**
+ * Recursively converts all keys in an object from camelCase to snake_case
+ *
+ * @param {object} obj - The object to convert
+ * @return {object} A new object with all keys converted to snake_case
+ */
+const convertObjectKeysToSnakeCase = obj => {
+    if (obj === null || typeof obj !== 'object') {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(item => convertObjectKeysToSnakeCase(item));
+    }
+    return Object.entries(obj).reduce((result, [key, value]) => {
+        const snakeKey = camelToSnakeCase(key);
+        result[snakeKey] = convertObjectKeysToSnakeCase(value);
+        return result;
+    }, {});
+};
+/**
+ * Component to display details data from database matches
+ *
+ * @param {object} props         - Component props
+ * @param {object} props.details - The details object containing optionValue and its value
+ * @return {import('react').ReactElement} React component
+ */
+const DetailsViewer = ({ details }) => {
+    if (!details || typeof details !== 'object') {
+        return null;
+    }
+    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
+                            ? JSON.stringify(convertObjectKeysToSnakeCase(value), null, 2)
+                            : String(value) }) })] }, key))) }));
+};
+export default DetailsViewer;

package/build/index.d.ts

@@ -62,4 +62,5 @@ export { default as RadioControl } from './components/radio-control/index.tsx';
 export { default as StatCard } from './components/stat-card/index.tsx';
 export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
+export { default as DetailsViewer } from './components/details-viewer/index.tsx';
 export * from './components/global-notices/index.ts';

package/build/index.js

@@ -76,4 +76,5 @@ export { default as RadioControl } from "./components/radio-control/index.js";
 export { default as StatCard } from "./components/stat-card/index.js";
 export { default as DiffViewer } from "./components/diff-viewer/index.js";
 export { default as MarkedLines } from "./components/marked-lines/index.js";
+export { default as DetailsViewer } from "./components/details-viewer/index.js";
 export * from "./components/global-notices/index.js";

package/components/details-viewer/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import styles from './styles.module.scss';
+
+/**
+ * Converts a camelCase string to snake_case
+ *
+ * @param {string} str - The camelCase string to convert
+ * @return {string} The snake_case string
+ */
+const camelToSnakeCase = str => {
+	return str.replace( /[A-Z]/g, letter => `_${ letter.toLowerCase() }` );
+};
+
+/**
+ * Recursively converts all keys in an object from camelCase to snake_case
+ *
+ * @param {object} obj - The object to convert
+ * @return {object} A new object with all keys converted to snake_case
+ */
+const convertObjectKeysToSnakeCase = obj => {
+	if ( obj === null || typeof obj !== 'object' ) {
+		return obj;
+	}
+
+	if ( Array.isArray( obj ) ) {
+		return obj.map( item => convertObjectKeysToSnakeCase( item ) );
+	}
+
+	return Object.entries( obj ).reduce( ( result, [ key, value ] ) => {
+		const snakeKey = camelToSnakeCase( key );
+		result[ snakeKey ] = convertObjectKeysToSnakeCase( value );
+		return result;
+	}, {} );
+};
+
+/**
+ * Component to display details data from database matches
+ *
+ * @param {object} props         - Component props
+ * @param {object} props.details - The details object containing optionValue and its value
+ * @return {import('react').ReactElement} React component
+ */
+const DetailsViewer = ( { details } ) => {
+	if ( ! details || typeof details !== 'object' ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles[ 'details-viewer' ] }>
+			{ Object.entries( details ).map( ( [ key, value ] ) => (
+				<div key={ key } className={ styles[ 'details-viewer__item' ] }>
+					<div className={ styles[ 'details-viewer__key' ] }>{ camelToSnakeCase( key ) }:</div>
+					<div className={ styles[ 'details-viewer__value' ] }>
+						<pre>
+							{ typeof value === 'object' && value !== null
+								? JSON.stringify( convertObjectKeysToSnakeCase( value ), null, 2 )
+								: String( value ) }
+						</pre>
+					</div>
+				</div>
+			) ) }
+		</div>
+	);
+};
+
+export default DetailsViewer;

package/components/details-viewer/styles.module.scss

@@ -0,0 +1,40 @@
+.details-viewer {
+	padding: 0;
+	background-color: var( --jp-gray-0 );
+	font-family: monospace;
+	display: flex;
+	flex-direction: column;
+	overflow-x: auto;
+	margin-bottom: var( --spacing-base ); // 8px
+}
+
+.details-viewer__item {
+	display: flex;
+	flex-direction: row;
+	padding: calc( var( --spacing-base ) / 2 ); // 4px
+	border-bottom: 1px solid var( --jp-gray-10 );
+
+	&:last-child {
+		border-bottom: none;
+	}
+}
+
+.details-viewer__key {
+	font-weight: 700;
+	padding-right: var( --spacing-base ); // 8px
+	color: var( --jp-gray-80 );
+	min-width: 120px;
+}
+
+.details-viewer__value {
+	flex: 1;
+	white-space: pre-wrap;
+	word-break: break-all;
+
+	pre {
+		margin: 0;
+		padding: 0;
+		font-family: monospace;
+		background-color: transparent;
+	}
+}

package/index.ts

@@ -83,4 +83,5 @@ export { default as RadioControl } from './components/radio-control/index.tsx';
 export { default as StatCard } from './components/stat-card/index.tsx';
 export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
+export { default as DetailsViewer } from './components/details-viewer/index.tsx';
 export * from './components/global-notices/index.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,10 +15,10 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^1.0.0",
+		"@automattic/jetpack-boost-score-api": "^1.0.1",
 		"@automattic/jetpack-api": "^1.0.0",
 		"@automattic/jetpack-script-data": "^0.4.2",
-		"@automattic/number-formatters": "^1.0.3",
+		"@automattic/number-formatters": "^1.0.4",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.24.0",
 		"@wordpress/components": "29.10.0",
@@ -33,7 +33,7 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.2.1",
+		"social-logos": "^3.2.2",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
@@ -59,7 +59,7 @@
 		"require-from-string": "2.0.2",
 		"storybook": "8.6.7",
 		"ts-dedent": "2.2.0",
-		"typescript": "5.8.2",
+		"typescript": "5.8.3",
 		"webpack": "5.94.0",
 		"webpack-cli": "6.0.1"
 	},