@nordicsemiconductor/pc-nrfconnect-shared 214.0.0 → 215.0.0

package/Changelog.md

@@ -7,6 +7,17 @@ This project does _not_ adhere to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html) but contrary to it
 every new version is a new major version.
 
+## 215.0.0 - 2025-06-27
+
+### Added
+
+-   `generateSystemReport` now includes relevant app information.
+
+### Changed
+
+-   StateSelector:Refactored with tailwind. Added `size` prop to control the
+    height of the selector.
+
 ## 214.0.0 - 2025-06-17
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nordicsemiconductor/pc-nrfconnect-shared",
-    "version": "214.0.0",
+    "version": "215.0.0",
     "description": "Shared commodities for developing pc-nrfconnect-* packages",
     "repository": {
         "type": "git",

package/src/StateSelector/StateSelector.tsx

@@ -5,13 +5,13 @@
  */
 
 import React from 'react';
-import { Button, ButtonGroup } from 'react-bootstrap';
 
-import './state-selector.scss';
+import classNames from '../utils/classNames';
 
 interface ComplexItem {
     key: string;
     renderItem: React.ReactNode;
+    title?: string;
 }
 
 type SelectItem = string | ComplexItem;
@@ -21,24 +21,60 @@ const convertToComplex = (item: SelectItem): ComplexItem => {
         return {
             key: item,
             renderItem: item,
+            title: undefined,
         } as ComplexItem;
     }
 
     return item as ComplexItem;
 };
+
+const SwitchButton: React.FC<{
+    variant: string;
+    onClick: () => void;
+    disabled: boolean;
+    children: React.ReactNode;
+    size?: 'sm' | 'md';
+    title?: string;
+}> = ({ variant, onClick, disabled, children, size = 'md', title }) => (
+    <button
+        type="button"
+        className={`${classNames(
+            'tw-relative tw-flex-auto tw-rounded-sm tw-text-sm',
+            size === 'sm' && 'tw-p-0',
+            size === 'md' && 'tw-p-1',
+            variant === 'set' &&
+                'tw-border-gray-700 tw-bg-white tw-text-gray-700',
+            variant === 'unset' &&
+                'tw-border-white tw-bg-gray-700 tw-text-white'
+        )}`}
+        onClick={onClick}
+        disabled={disabled}
+        title={title}
+    >
+        {children}
+    </button>
+);
+
 export interface Props {
     items: SelectItem[];
     onSelect: (index: number) => void;
     disabled?: boolean;
     selectedItem: SelectItem;
+    size?: 'sm' | 'md';
 }
 
-export default ({ items, onSelect, disabled = false, selectedItem }: Props) => {
+export default ({
+    items,
+    onSelect,
+    disabled = false,
+    selectedItem,
+    size = 'md',
+}: Props) => {
     const selectionButton = (item: SelectItem, index: number) => {
         const complexItem = convertToComplex(item);
         const complexSelectedItem = convertToComplex(selectedItem);
         return (
-            <Button
+            <SwitchButton
                 key={complexItem.key}
                 variant={
                     complexSelectedItem.key === complexItem.key
@@ -48,17 +84,18 @@ export default ({ items, onSelect, disabled = false, selectedItem }: Props) => {
                 onClick={() => {
                     onSelect(index);
                 }}
-                active={complexSelectedItem.key === complexItem.key}
                 disabled={disabled}
+                size={size}
+                title={complexItem.title}
             >
                 {complexItem.renderItem}
-            </Button>
+            </SwitchButton>
         );
     };
 
     return (
-        <ButtonGroup className="w-100 d-flex channel-selection flex-row">
+        <div className="tw-preflight tw-flex tw-w-full tw-flex-row tw-justify-center tw-bg-gray-700 tw-p-1">
             {items.map((item, index) => selectionButton(item, index))}
-        </ButtonGroup>
+        </div>
     );
 };

package/src/utils/systemReport.ts

@@ -18,6 +18,7 @@ import {
 import { deviceInfo as getDeviceInfo } from '../Device/deviceInfo/deviceInfo';
 import { Device } from '../Device/deviceSlice';
 import logger from '../logging';
+import appDetails from './appDetails';
 import { getAppDataDir } from './appDirs';
 import { openFile } from './open';
 
@@ -120,6 +121,17 @@ const currentDeviceReport = (device?: Device, currentSerialNumber?: string) => {
     ];
 };
 
+const appInfoReport = () =>
+    appDetails()
+        .then(app => [
+            `- App: ${app.displayName}`,
+            `- Version: ${app.currentVersion}`,
+            `- Source: ${app.source}`,
+            `- Core version: ${app.coreVersion}`,
+            `- Engine version: ${app.engineVersion}`,
+        ])
+        .catch(() => []);
+
 export const generateSystemReport = async (
     timestamp: string,
     allDevices?: Device[],
@@ -129,6 +141,7 @@ export const generateSystemReport = async (
     [
         `# nRFConnect System Report - ${timestamp}`,
         '',
+        ...(await appInfoReport()),
         ...(await generalInfoReport()),
         ...allDevicesReport(allDevices),
         ...currentDeviceReport(currentDevice, currentSerialNumber),

package/typings/generated/src/StateSelector/StateSelector.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import './state-selector.scss';
 interface ComplexItem {
     key: string;
     renderItem: React.ReactNode;
+    title?: string;
 }
 type SelectItem = string | ComplexItem;
 export interface Props {
@@ -10,7 +10,8 @@ export interface Props {
     onSelect: (index: number) => void;
     disabled?: boolean;
     selectedItem: SelectItem;
+    size?: 'sm' | 'md';
 }
-declare const _default: ({ items, onSelect, disabled, selectedItem }: Props) => JSX.Element;
+declare const _default: ({ items, onSelect, disabled, selectedItem, size, }: Props) => JSX.Element;
 export default _default;
 //# sourceMappingURL=StateSelector.d.ts.map

package/typings/generated/src/StateSelector/StateSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StateSelector.d.ts","sourceRoot":"","sources":["../../../../src/StateSelector/StateSelector.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,uBAAuB,CAAC;AAE/B,UAAU,WAAW;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,KAAK,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;AAYvC,MAAM,WAAW,KAAK;IAClB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,UAAU,CAAC;CAC5B;sEAEoE,KAAK;AAA1E,wBA4BE"}
+{"version":3,"file":"StateSelector.d.ts","sourceRoot":"","sources":["../../../../src/StateSelector/StateSelector.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,WAAW;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;AAyCvC,MAAM,WAAW,KAAK;IAClB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,UAAU,CAAC;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;6EAQE,KAAK;AANR,wBAmCE"}

package/typings/generated/src/utils/systemReport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"systemReport.d.ts","sourceRoot":"","sources":["../../../../src/utils/systemReport.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAwG/C,eAAO,MAAM,oBAAoB,cAClB,MAAM,eACJ,MAAM,EAAE,kBACL,MAAM,wBACA,MAAM,oBAQjB,CAAC;qCAGA,MAAM,EAAE,uBACC,MAAM,kBACX,MAAM;AAH1B,wBAwBE"}
+{"version":3,"file":"systemReport.d.ts","sourceRoot":"","sources":["../../../../src/utils/systemReport.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAoH/C,eAAO,MAAM,oBAAoB,cAClB,MAAM,eACJ,MAAM,EAAE,kBACL,MAAM,wBACA,MAAM,oBASjB,CAAC;qCAGA,MAAM,EAAE,uBACC,MAAM,kBACX,MAAM;AAH1B,wBAwBE"}

package/src/StateSelector/state-selector.scss

@@ -1,40 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../variables';
-
-.channel-selection {
-    padding: 4px;
-    background-color: $gray-700;
-    button {
-        padding: 4px;
-        border-radius: 4px !important;
-    }
-    .btn-unset {
-        z-index: 0 !important;
-    }
-    .btn:disabled {
-        opacity: initial;
-    }
-    .dot {
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        width: 6px;
-        height: 6px;
-        border-radius: 3px;
-    }
-    .btn-set {
-        color: $gray-700;
-        background-color: $white;
-        border-color: $gray-700;
-    }
-    .btn-unset {
-        color: $white;
-        background-color: $gray-700;
-        border-color: $gray-700;
-    }
-}