@gridsuite/commons-ui 0.242.0 → 0.244.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/index.js

@@ -65,6 +65,7 @@ import { ArrowsOutputIcon } from "./ui/icons/ArrowsOutputIcon.js";
 import { ArrowsInputIcon } from "./ui/icons/ArrowsInputIcon.js";
 import { LeftPanelCloseIcon } from "./ui/icons/LeftPanelCloseIcon.js";
 import { EditNoteIcon } from "./ui/icons/EditNoteIcon.js";
+import { VoltageUnitIcon } from "./ui/icons/VoltageUnitIcon.js";
 import { CustomMenuItem, CustomNestedMenuItem } from "./ui/menus/custom-nested-menu.js";
 import { ResizeHandle } from "./ui/resizablePanels/ResizeHandle.js";
 import { CsvExport } from "./ui/csvDownloader/csv-export.js";
@@ -331,6 +332,7 @@ export {
   UniqueNameInput,
   ValueEditor,
   ValueSelector,
+  VoltageUnitIcon,
   addToleranceToFilter,
   computeTolerance,
   countRules,

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/components/ui/icons/VoltageUnitIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from '@mui/material';
+export declare function VoltageUnitIcon(props: SvgIconProps): import("react").JSX.Element;

package/dist/components/ui/icons/VoltageUnitIcon.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+import * as React from "react";
+const SvgVoltageUnit = (props) => /* @__PURE__ */ React.createElement("svg", { width: 21, height: 21, viewBox: "-0.265 -0.266 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("rect", { x: 2.34576, y: 4.04986, width: 15.7794, height: 12.3676, rx: 1.06618, fill: "none", stroke: "currentColor", strokeWidth: 1.27941 }), /* @__PURE__ */ React.createElement("path", { d: "M6.1435 6.02734V13.4954H4.74414V6.02734H6.1435ZM9.45725 8.23813L7.17358 10.8425L5.94914 12.0815L5.43896 11.0709L6.41074 9.8367L7.77608 8.23813H9.45725ZM8.00445 13.4954L6.44961 11.066L7.41652 10.2206L9.61759 13.4954H8.00445Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M12.6981 12.0183L14.3647 6.42091H15.9876L13.5241 13.4954H12.4552L12.6981 12.0183ZM11.1627 6.42091L12.8245 12.0183L13.0771 13.4954H11.9984L9.54957 6.42091H11.1627Z", fill: "currentColor" }));
+function VoltageUnitIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { component: SvgVoltageUnit, inheritViewBox: true, ...props });
+}
+export {
+  VoltageUnitIcon
+};

package/dist/components/ui/icons/index.d.ts

@@ -9,3 +9,4 @@ export { ArrowsOutputIcon } from './ArrowsOutputIcon';
 export { ArrowsInputIcon } from './ArrowsInputIcon';
 export { LeftPanelCloseIcon } from './LeftPanelCloseIcon';
 export { EditNoteIcon } from './EditNoteIcon';
+export { VoltageUnitIcon } from './VoltageUnitIcon';

package/dist/components/ui/icons/index.js

@@ -3,10 +3,12 @@ import { ArrowsOutputIcon } from "./ArrowsOutputIcon.js";
 import { ArrowsInputIcon } from "./ArrowsInputIcon.js";
 import { LeftPanelCloseIcon } from "./LeftPanelCloseIcon.js";
 import { EditNoteIcon } from "./EditNoteIcon.js";
+import { VoltageUnitIcon } from "./VoltageUnitIcon.js";
 export {
   ArrowsInputIcon,
   ArrowsOutputIcon,
   EditNoteIcon,
   LeftPanelCloseIcon,
-  LeftPanelOpenIcon
+  LeftPanelOpenIcon,
+  VoltageUnitIcon
 };

package/dist/components/ui/index.js

@@ -65,6 +65,7 @@ import { ArrowsOutputIcon } from "./icons/ArrowsOutputIcon.js";
 import { ArrowsInputIcon } from "./icons/ArrowsInputIcon.js";
 import { LeftPanelCloseIcon } from "./icons/LeftPanelCloseIcon.js";
 import { EditNoteIcon } from "./icons/EditNoteIcon.js";
+import { VoltageUnitIcon } from "./icons/VoltageUnitIcon.js";
 import { CustomMenuItem, CustomNestedMenuItem } from "./menus/custom-nested-menu.js";
 import { ResizeHandle } from "./resizablePanels/ResizeHandle.js";
 import { CsvExport } from "./csvDownloader/csv-export.js";
@@ -155,6 +156,7 @@ export {
   TextInput,
   TreeViewFinder,
   UniqueNameInput,
+  VoltageUnitIcon,
   directoryItemSchema,
   doesNodeHasChildren,
   fetchCsvSeparator,

package/dist/index.js

@@ -66,6 +66,7 @@ import { ArrowsOutputIcon } from "./components/ui/icons/ArrowsOutputIcon.js";
 import { ArrowsInputIcon } from "./components/ui/icons/ArrowsInputIcon.js";
 import { LeftPanelCloseIcon } from "./components/ui/icons/LeftPanelCloseIcon.js";
 import { EditNoteIcon } from "./components/ui/icons/EditNoteIcon.js";
+import { VoltageUnitIcon } from "./components/ui/icons/VoltageUnitIcon.js";
 import { CustomMenuItem, CustomNestedMenuItem } from "./components/ui/menus/custom-nested-menu.js";
 import { ResizeHandle } from "./components/ui/resizablePanels/ResizeHandle.js";
 import { CsvExport } from "./components/ui/csvDownloader/csv-export.js";
@@ -454,7 +455,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 +485,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";
@@ -1121,6 +1120,7 @@ export {
   VoltageLevelCreationForm,
   VoltageLevelModificationForm,
   VoltageRegulationForm,
+  VoltageUnitIcon,
   WRITE_SLACK_BUS,
   YUP_DEFAULT,
   YUP_NOT_NULL,
@@ -1453,8 +1453,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.244.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
-};