@gridsuite/commons-ui 0.242.0 → 0.243.0

package/README.md

@@ -20,8 +20,12 @@ Components are organized as follows:
 
 #### For developers
 
-The commons-ui library have a demo app in which you can call your components to test them.
-The `npm start` command install the library's dependencies then launches the demo app.
+The commons-ui library has a demo app in which you can call your components to test them.
+The `npm start` command installs the library's dependencies then launches the demo app.
+
+The commons-ui Storybook is also available at https://www.gridsuite.org/commons-ui/.
+It is the reference place to document and preview reusable UI components from `src/components/ui`.
+When you add a new component under `src/components/ui`, also add the corresponding story so it is available in Storybook.
 
 ##### Development Scripts
 

package/dist/components/composite/filter/explicitNaming/ExplicitNamingFilterForm.js

@@ -227,7 +227,7 @@ function ExplicitNamingFilterForm({
             CsvPicker,
             {
               label: "UploadCSV",
-              header: csvFileHeaders,
+              requiredColumns: csvFileHeaders,
               language: language ?? LANG_SYSTEM,
               disabled: !watchEquipmentType,
               selectedFile,

package/dist/components/ui/csvPicker/csv-picker.d.ts

@@ -10,7 +10,12 @@ type CsvPickerCallbacks<TData> = {
 };
 export type CsvPickerProps<TData = unknown> = {
     label: string;
-    header: string[];
+    /**
+     * Columns that must be present in the imported file. The file is accepted as soon as it
+     * contains every column listed here, in any order; any column that matches none of them is
+     * ignored (not rejected). Pass an empty array to accept any header.
+     */
+    requiredColumns: string[];
     maxLineNumber?: number;
     disabled?: boolean;
     language: string;
@@ -20,5 +25,5 @@ export type CsvPickerProps<TData = unknown> = {
     onFileError: (error: string | undefined) => void;
     getTableData?: () => unknown[];
 } & CsvPickerCallbacks<TData>;
-export declare function CsvPicker<TData = unknown>({ label, header, maxLineNumber, disabled, language, parseConfig, selectedFile, onFileChange, onFileError, onComplete, onAppend, onReplace, getTableData, }: CsvPickerProps<TData>): import("react").JSX.Element;
+export declare function CsvPicker<TData = unknown>({ label, requiredColumns, maxLineNumber, disabled, language, parseConfig, selectedFile, onFileChange, onFileError, onComplete, onAppend, onReplace, getTableData, }: CsvPickerProps<TData>): import("react").JSX.Element;
 export {};

package/dist/components/ui/csvPicker/csv-picker.js

@@ -3,7 +3,6 @@ import { useState, useCallback } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { Button } from "@mui/material";
 import { useCSVReader } from "react-papaparse";
-import { equalsArrayAnyOrder } from "../../../utils/algos.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
 import { hasNonEmptyRows } from "../../../utils/functions.js";
@@ -12,7 +11,7 @@ import "@mui/icons-material";
 import { CsvPickerConfirmationDialog } from "./csv-picker-confirmation-dialog.js";
 function CsvPicker({
   label,
-  header,
+  requiredColumns,
   maxLineNumber,
   disabled = false,
   language,
@@ -30,12 +29,14 @@ function CsvPicker({
   const [pendingImport, setPendingImport] = useState(null);
   const handleUploadAccepted = useCallback(
     (results, acceptedFile) => {
+      const actualHeader = Object.keys(results.data[0] ?? {});
+      const isHeaderValid = requiredColumns.every((column) => actualHeader.includes(column));
       if (results.data.length === 0) {
         onFileError(intl.formatMessage({ id: "noDataInCsvFile" }, { filename: acceptedFile.name }));
-      } else if (!equalsArrayAnyOrder(header, Object.keys(results.data[0]))) {
+      } else if (!isHeaderValid) {
         console.warn("Wrong CSV headers");
-        console.warn("Expected:", header);
-        console.warn("Actual:", Object.keys(results.data[0]));
+        console.warn("Required:", requiredColumns);
+        console.warn("Actual:", actualHeader);
         onFileError(intl.formatMessage({ id: "wrongCsvHeadersError" }, { filename: acceptedFile.name }));
       } else if (maxLineNumber && results.data.length > maxLineNumber) {
         onFileError(
@@ -59,7 +60,7 @@ function CsvPicker({
         }
       }
     },
-    [header, intl, maxLineNumber, onAppend, onComplete, onFileChange, onFileError, onReplace, getTableData]
+    [requiredColumns, intl, maxLineNumber, onAppend, onComplete, onFileChange, onFileError, onReplace, getTableData]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(

package/dist/index.js

@@ -454,7 +454,6 @@ import { errorsEn } from "./translations/en/errorsEn.js";
 import { filterEn } from "./translations/en/filterEn.js";
 import { filterExpertEn } from "./translations/en/filterExpertEn.js";
 import { flatParametersEn } from "./translations/en/flatParametersEn.js";
-import { inputsEn } from "./translations/en/inputsEn.js";
 import { loginEn } from "./translations/en/loginEn.js";
 import { multipleSelectionDialogEn } from "./translations/en/multipleSelectionDialogEn.js";
 import { reportViewerEn } from "./translations/en/reportViewerEn.js";
@@ -485,7 +484,6 @@ import { errorsFr } from "./translations/fr/errorsFr.js";
 import { filterExpertFr } from "./translations/fr/filterExpertFr.js";
 import { filterFr } from "./translations/fr/filterFr.js";
 import { flatParametersFr } from "./translations/fr/flatParametersFr.js";
-import { inputsFr } from "./translations/fr/inputsFr.js";
 import { loginFr } from "./translations/fr/loginFr.js";
 import { multipleSelectionDialogFr } from "./translations/fr/multipleSelectionDialogFr.js";
 import { reportViewerFr } from "./translations/fr/reportViewerFr.js";
@@ -1453,8 +1451,6 @@ export {
   initializeAuthenticationProd,
   initializeDirectory,
   initializedProperty,
-  inputsEn,
-  inputsFr,
   intlInitialVoltageProfileMode,
   intlPredefinedParametersOptions,
   isBlankOrEmpty,

package/dist/translations/en/index.d.ts

@@ -21,7 +21,6 @@ export * from './errorsEn';
 export * from './filterEn';
 export * from './filterExpertEn';
 export * from './flatParametersEn';
-export * from './inputsEn';
 export * from './loginEn';
 export * from './multipleSelectionDialogEn';
 export * from './reportViewerEn';

package/dist/translations/en/index.js

@@ -15,7 +15,6 @@ import { errorsEn } from "./errorsEn.js";
 import { filterEn } from "./filterEn.js";
 import { filterExpertEn } from "./filterExpertEn.js";
 import { flatParametersEn } from "./flatParametersEn.js";
-import { inputsEn } from "./inputsEn.js";
 import { loginEn } from "./loginEn.js";
 import { multipleSelectionDialogEn } from "./multipleSelectionDialogEn.js";
 import { reportViewerEn } from "./reportViewerEn.js";
@@ -50,7 +49,6 @@ export {
   filterExpertEn,
   flatParametersEn,
   importParamsEn,
-  inputsEn,
   loginEn,
   multipleSelectionDialogEn,
   networkModificationsEn,

package/dist/translations/fr/index.d.ts

@@ -21,7 +21,6 @@ export * from './errorsFr';
 export * from './filterExpertFr';
 export * from './filterFr';
 export * from './flatParametersFr';
-export * from './inputsFr';
 export * from './loginFr';
 export * from './multipleSelectionDialogFr';
 export * from './reportViewerFr';

package/dist/translations/fr/index.js

@@ -15,7 +15,6 @@ import { errorsFr } from "./errorsFr.js";
 import { filterExpertFr } from "./filterExpertFr.js";
 import { filterFr } from "./filterFr.js";
 import { flatParametersFr } from "./flatParametersFr.js";
-import { inputsFr } from "./inputsFr.js";
 import { loginFr } from "./loginFr.js";
 import { multipleSelectionDialogFr } from "./multipleSelectionDialogFr.js";
 import { reportViewerFr } from "./reportViewerFr.js";
@@ -50,7 +49,6 @@ export {
   filterFr,
   flatParametersFr,
   importParamsFr,
-  inputsFr,
   loginFr,
   multipleSelectionDialogFr,
   networkModificationsFr,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.242.0",
+    "version": "0.243.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",

package/dist/translations/en/inputsEn.d.ts

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) 2022, RTE (http://www.rte-france.com)
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-export declare const inputsEn: {
-    'inputs/kiki': string;
-    'inputs/ney': string;
-    'inputs/lapulga': string;
-    'inputs/ibra': string;
-    'inputs/float': string;
-    'inputs/integer': string;
-    'inputs/radio': string;
-    'inputs/select': string;
-    'inputs/slider': string;
-    'inputs/text': string;
-    'inputs/description': string;
-    'inputs/autocomplete': string;
-    'inputs/boolean': string;
-    'inputs/checkbox': string;
-    'inputs/switch': string;
-    'inputs/directory-items': string;
-};

package/dist/translations/en/inputsEn.js

@@ -1,21 +0,0 @@
-const inputsEn = {
-  "inputs/kiki": "Kylian Mbappe",
-  "inputs/ney": "Neymar",
-  "inputs/lapulga": "Lionel Messi",
-  "inputs/ibra": "Zlatan Ibrahimovic",
-  "inputs/float": "Float",
-  "inputs/integer": "Integer",
-  "inputs/radio": "Radio",
-  "inputs/select": "Select",
-  "inputs/slider": "Slider",
-  "inputs/text": "Text",
-  "inputs/description": "Description",
-  "inputs/autocomplete": "Autocomplete",
-  "inputs/boolean": "Boolean",
-  "inputs/checkbox": "Checkbox",
-  "inputs/switch": "Switch",
-  "inputs/directory-items": "Directory items"
-};
-export {
-  inputsEn
-};

package/dist/translations/fr/inputsFr.d.ts

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) 2022, RTE (http://www.rte-france.com)
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-export declare const inputsFr: {
-    'inputs/kiki': string;
-    'inputs/ney': string;
-    'inputs/lapulga': string;
-    'inputs/ibra': string;
-    'inputs/float': string;
-    'inputs/integer': string;
-    'inputs/radio': string;
-    'inputs/select': string;
-    'inputs/slider': string;
-    'inputs/text': string;
-    'inputs/description': string;
-    'inputs/autocomplete': string;
-    'inputs/boolean': string;
-    'inputs/checkbox': string;
-    'inputs/switch': string;
-    'inputs/directory-items': string;
-};

package/dist/translations/fr/inputsFr.js

@@ -1,21 +0,0 @@
-const inputsFr = {
-  "inputs/kiki": "Kylian Mbappe",
-  "inputs/ney": "Neymar",
-  "inputs/lapulga": "Lionel Messi",
-  "inputs/ibra": "Zlatan Ibrahimovic",
-  "inputs/float": "Float",
-  "inputs/integer": "Integer",
-  "inputs/radio": "Radio",
-  "inputs/select": "Select",
-  "inputs/slider": "Slider",
-  "inputs/text": "Text",
-  "inputs/description": "Description",
-  "inputs/autocomplete": "Autocomplete",
-  "inputs/boolean": "Boolean",
-  "inputs/checkbox": "Checkbox",
-  "inputs/switch": "Switch",
-  "inputs/directory-items": "Éléments du répertoire"
-};
-export {
-  inputsFr
-};