front: use new osrd ui-icons project

OpenRailAssociation · Jan 31, 2024 · e3e37d3 · e3e37d3
1 parent ff17ab1
commit e3e37d3
Show file tree

Hide file tree

Showing 36 changed files with 107 additions and 101 deletions.
diff --git a/front/package.json b/front/package.json
@@ -9,6 +9,7 @@
     "@nivo/line": "^0.80.0",
     "@nivo/tooltip": "^0.80.0",
     "@openapi-contrib/openapi-schema-to-json-schema": "^4.0.4",
+    "@osrd-project/ui-icons": "^0.0.8",
     "@redux-devtools/extension": "^3.2.3",
     "@reduxjs/toolkit": "^1.9.0",
     "@rjsf/core": "^4.2.3",

diff --git a/front/src/applications/editor/nav.tsx b/front/src/applications/editor/nav.tsx
@@ -5,7 +5,7 @@ import { NavigateFunction } from 'react-router-dom';
 import { IconType } from 'react-icons';
 import { GiRailway } from 'react-icons/gi';
 import { FaRegCompass } from 'react-icons/fa';
-import { GoSearch, GoZoomIn, GoZoomOut } from 'react-icons/go';
+import { GenericIconType, Search, ZoomIn, ZoomOut } from '@osrd-project/ui-icons';
 import { BsExclamationOctagon, BsSliders2 } from 'react-icons/bs';
 import { isNil } from 'lodash';
 
@@ -26,7 +26,7 @@ const ZOOM_DELTA = 1.5;
 
 export interface NavButton {
   id: string;
-  icon: IconType;
+  icon: IconType | GenericIconType;
   labelTranslationKey: string;
   shortcut?: Omit<Shortcut, 'handler'>;
 
@@ -62,7 +62,7 @@ const NavButtons: NavButton[][] = [
   [
     {
       id: 'zoom-in',
-      icon: GoZoomIn,
+      icon: ZoomIn as GenericIconType,
       labelTranslationKey: 'common.zoom-in',
       onClick({ setViewport, viewport }) {
         setViewport({
@@ -73,7 +73,7 @@ const NavButtons: NavButton[][] = [
     },
     {
       id: 'zoom-out',
-      icon: GoZoomOut,
+      icon: ZoomOut as GenericIconType,
       labelTranslationKey: 'common.zoom-out',
       onClick({ setViewport, viewport }) {
         setViewport({
@@ -96,7 +96,7 @@ const NavButtons: NavButton[][] = [
     },
     {
       id: 'search',
-      icon: GoSearch,
+      icon: Search as GenericIconType,
       labelTranslationKey: 'common.search',
       onClick({ setIsSearchToolOpened }) {
         setIsSearchToolOpened((state) => !state);

diff --git a/front/src/applications/editor/tools/pointEdition/tool-factory.tsx b/front/src/applications/editor/tools/pointEdition/tool-factory.tsx
@@ -3,7 +3,7 @@ import { cloneDeep, isEqual, omit } from 'lodash';
 import { IconType } from 'react-icons';
 import { BiReset } from 'react-icons/bi';
 import { AiFillSave } from 'react-icons/ai';
-import { GoPlusCircle, GoTrash } from 'react-icons/go';
+import { PlusCircle, Trash } from '@osrd-project/ui-icons';
 import { Map } from 'maplibre-gl';
 import { Feature, LineString, Point } from 'geojson';
 import nearestPointOnLine from '@turf/nearest-point-on-line';
@@ -114,7 +114,7 @@ function getPointEditionTool<T extends EditorPoint>({
       [
         {
           id: 'new-entity',
-          icon: GoPlusCircle,
+          icon: PlusCircle,
           labelTranslationKey: `Editor.tools.${id}-edition.actions.new-entity`,
           onClick({ setState }) {
             setState(getInitialState());
@@ -124,7 +124,7 @@ function getPointEditionTool<T extends EditorPoint>({
       [
         {
           id: 'delete-entity',
-          icon: GoTrash,
+          icon: Trash,
           labelTranslationKey: `Editor.tools.${id}-edition.actions.delete-entity`,
           // Show button only if we are editing
           isDisabled({ state }) {

diff --git a/front/src/applications/editor/tools/rangeEdition/speedSection/PslSignCard.tsx b/front/src/applications/editor/tools/rangeEdition/speedSection/PslSignCard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { TFunction } from 'i18next';
 import { PSLSign } from 'types';
 import SelectImprovedSNCF from 'common/BootstrapSNCF/SelectImprovedSNCF';
-import { GoTrash } from 'react-icons/go';
+import { Trash } from '@osrd-project/ui-icons';
 import { isNil } from 'lodash';
 import { RiDragMoveLine } from 'react-icons/ri';
 import InputSNCF from 'common/BootstrapSNCF/InputSNCF';
@@ -173,7 +173,7 @@ const PslSignCard = ({
                 removeSign(signInfo as Exclude<PslSignInformation, { signType: PSL_SIGN_TYPES.Z }>)
               }
             >
-              <GoTrash />
+              <Trash />
             </button>
           </div>
         )}

diff --git a/front/src/applications/editor/tools/rangeEdition/tool-factory.tsx b/front/src/applications/editor/tools/rangeEdition/tool-factory.tsx
@@ -4,7 +4,7 @@ import { cloneDeep, isEqual } from 'lodash';
 import { IconType } from 'react-icons';
 import { BiReset } from 'react-icons/bi';
 import { AiFillSave } from 'react-icons/ai';
-import { GoPlusCircle, GoTrash } from 'react-icons/go';
+import { PlusCircle, Trash } from '@osrd-project/ui-icons';
 
 import { save } from 'reducers/editor';
 import { ConfirmModal } from 'common/BootstrapSNCF/ModalSNCF';
@@ -153,7 +153,7 @@ function getRangeEditionTool<T extends EditorRange>({
       [
         {
           id: `new-${objectTypeAction}`,
-          icon: GoPlusCircle,
+          icon: PlusCircle,
           labelTranslationKey: `Editor.tools.${objectTypeEdition}-edition.actions.new-${objectTypeAction}`,
           onClick({ setState }) {
             setState(getInitialState());
@@ -163,7 +163,7 @@ function getRangeEditionTool<T extends EditorRange>({
       [
         {
           id: 'delete-entity',
-          icon: GoTrash,
+          icon: Trash,
           labelTranslationKey: `Editor.tools.${objectTypeEdition}-edition.actions.delete-${objectTypeAction}`,
           // Show button only if we are editing
           isDisabled({ state }) {

diff --git a/front/src/applications/editor/tools/routeEdition/components/SearchRoute.tsx b/front/src/applications/editor/tools/routeEdition/components/SearchRoute.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { GoSearch } from 'react-icons/go';
+import { Search } from '@osrd-project/ui-icons';
 
 import { LoaderFill } from 'common/Loaders';
 import { SearchRouteItem } from './SearchRouteItem';
@@ -35,7 +35,7 @@ export const SearchRoute: FC<SearchRouteProps> = ({
         type="button"
         onClick={searchFn}
       >
-        <GoSearch /> {t(`Editor.tools.routes-edition.search-routes${!isNew ? '-alt' : ''}`)}
+        <Search /> {t(`Editor.tools.routes-edition.search-routes${!isNew ? '-alt' : ''}`)}
       </button>
 
       {state.type === 'loading' && <LoaderFill />}

diff --git a/front/src/applications/editor/tools/routeEdition/components/WayPointInput.tsx b/front/src/applications/editor/tools/routeEdition/components/WayPointInput.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
-import { GoPencil } from 'react-icons/go';
+import { Pencil } from '@osrd-project/ui-icons';
 import { FaMapMarkedAlt, FaTimesCircle } from 'react-icons/fa';
 import { isNil } from 'lodash';
 
@@ -78,7 +78,7 @@ const WayPointInput: FC<WayPointInputProps> = ({ endPoint, wayPoint, onChange })
   }, [endPoint, isPicking, setState, state]);
 
   const getButtonIcon = () => {
-    if (!isPicking && isWayPointSelected) return <GoPencil />;
+    if (!isPicking && isWayPointSelected) return <Pencil />;
     return isPicking ? <FaTimesCircle /> : <FaMapMarkedAlt />;
   };
 

diff --git a/front/src/applications/editor/tools/routeEdition/tool.tsx b/front/src/applications/editor/tools/routeEdition/tool.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { isEqual } from 'lodash';
 import { GiPathDistance } from 'react-icons/gi';
 import { AiFillSave } from 'react-icons/ai';
-import { GoPlusCircle, GoTrash } from 'react-icons/go';
+import { PlusCircle, Trash } from '@osrd-project/ui-icons';
 import { BiReset } from 'react-icons/bi';
 
 import { WayPointEntity } from 'types';
@@ -50,7 +50,7 @@ const RouteEditionTool: Tool<RouteEditionState> = {
     [
       {
         id: 'new-route',
-        icon: GoPlusCircle,
+        icon: PlusCircle,
         labelTranslationKey: 'Editor.tools.routes-edition.actions.new-route',
         onClick({ setState }) {
           setState(getRouteEditionState());
@@ -60,7 +60,7 @@ const RouteEditionTool: Tool<RouteEditionState> = {
     [
       {
         id: 'delete-route',
-        icon: GoTrash,
+        icon: Trash,
         labelTranslationKey: 'Editor.tools.routes-edition.actions.delete-route',
         // Show button only if we are editing
         isDisabled({ state: { entity } }) {

diff --git a/front/src/applications/editor/tools/selection/components.tsx b/front/src/applications/editor/tools/selection/components.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
 import { Layer, Popup, Source } from 'react-map-gl/maplibre';
 import { useSelector } from 'react-redux';
 import { groupBy, map } from 'lodash';
-import { GoNoEntry } from 'react-icons/go';
+import { NoEntry } from '@osrd-project/ui-icons';
 import { RiFocus3Line } from 'react-icons/ri';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
@@ -169,7 +169,7 @@ export const SelectionLeftPanel = () => {
                     setState({ ...state, selection: selection.filter((i) => i.objType !== type) })
                   }
                 >
-                  <GoNoEntry /> {t('Editor.tools.select-items.unselect')}
+                  <NoEntry /> {t('Editor.tools.select-items.unselect')}
                 </button>
               </div>
             </li>
@@ -208,7 +208,7 @@ export const SelectionLeftPanel = () => {
                   })
                 }
               >
-                <GoNoEntry /> {t('Editor.tools.select-items.unselect')}
+                <NoEntry /> {t('Editor.tools.select-items.unselect')}
               </button>
             </div>
           </li>

diff --git a/front/src/applications/editor/tools/selection/tool.tsx b/front/src/applications/editor/tools/selection/tool.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FiEdit } from 'react-icons/fi';
-import { GoTrash } from 'react-icons/go';
+import { Trash } from '@osrd-project/ui-icons';
 import { BsCursor } from 'react-icons/bs';
 import { FaDrawPolygon } from 'react-icons/fa';
 import { BiLoader, BiSelection } from 'react-icons/bi';
@@ -110,7 +110,7 @@ const SelectionTool: Tool<SelectionState> = {
       },
       {
         id: 'delete-selection',
-        icon: GoTrash,
+        icon: Trash,
         labelTranslationKey: 'Editor.tools.select-items.actions.delete-selection',
         isDisabled({ state }) {
           return !state.selection.length;

diff --git a/front/src/applications/editor/tools/switchEdition/tool.tsx b/front/src/applications/editor/tools/switchEdition/tool.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { TbSwitch2 } from 'react-icons/tb';
 import { AiFillSave } from 'react-icons/ai';
-import { GoPlusCircle, GoTrash } from 'react-icons/go';
+import { PlusCircle, Trash } from '@osrd-project/ui-icons';
 
 import { save } from 'reducers/editor';
 import { SwitchEntity, SwitchType } from 'types';
@@ -74,7 +74,7 @@ const SwitchEditionTool: Tool<SwitchEditionState> = {
     [
       {
         id: 'new-switch',
-        icon: GoPlusCircle,
+        icon: PlusCircle,
         labelTranslationKey: 'Editor.tools.switch-edition.actions.new-switch',
         onClick({ setState, switchTypes }) {
           if (!switchTypes?.length) throw new Error('There is no switch type yet.');
@@ -93,7 +93,7 @@ const SwitchEditionTool: Tool<SwitchEditionState> = {
     [
       {
         id: 'delete-switch',
-        icon: GoTrash,
+        icon: Trash,
         labelTranslationKey: `Editor.tools.switch-edition.actions.delete-switch`,
         // Show button only if we are editing
         isDisabled({ state }) {

diff --git a/front/src/applications/editor/tools/trackEdition/tool.tsx b/front/src/applications/editor/tools/trackEdition/tool.tsx
@@ -4,7 +4,7 @@ import { cloneDeep, isEmpty, isEqual } from 'lodash';
 import { MdShowChart } from 'react-icons/md';
 import { RiDragMoveLine } from 'react-icons/ri';
 import { AiFillSave } from 'react-icons/ai';
-import { GoNoEntry, GoPlusCircle, GoTrash, GoXCircle } from 'react-icons/go';
+import { NoEntry, PlusCircle, Trash, XCircle } from '@osrd-project/ui-icons';
 import { BiAnchor, BiArrowFromLeft, BiArrowToRight, BiReset } from 'react-icons/bi';
 import getNearestPoint from '@turf/nearest-point';
 import { featureCollection } from '@turf/helpers';
@@ -98,7 +98,7 @@ const TrackEditionTool: Tool<TrackEditionState> = {
       },
       {
         id: 'mode-add-point',
-        icon: GoPlusCircle,
+        icon: PlusCircle,
         labelTranslationKey: 'Editor.tools.track-edition.actions.mode-add-point',
         onClick({ setState, state }) {
           setState({
@@ -112,7 +112,7 @@ const TrackEditionTool: Tool<TrackEditionState> = {
       },
       {
         id: 'mode-delete-point',
-        icon: GoXCircle,
+        icon: XCircle,
         labelTranslationKey: 'Editor.tools.track-edition.actions.mode-delete-point',
         onClick({ setState, state }) {
           setState({
@@ -174,7 +174,7 @@ const TrackEditionTool: Tool<TrackEditionState> = {
       },
       {
         id: 'cancel-line',
-        icon: GoNoEntry,
+        icon: NoEntry,
         labelTranslationKey: 'Editor.tools.track-edition.actions.cancel-line',
         onClick({ setState, state }) {
           if (state.track.geometry.coordinates.length) {
@@ -191,7 +191,7 @@ const TrackEditionTool: Tool<TrackEditionState> = {
     [
       {
         id: 'delete-line',
-        icon: GoTrash,
+        icon: Trash,
         labelTranslationKey: 'Editor.tools.track-edition.actions.delete-line',
         // Show button only if we are editing
         isDisabled({ state }) {

diff --git a/front/src/applications/operationalStudies/views/Project.tsx b/front/src/applications/operationalStudies/views/Project.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BiTargetLock } from 'react-icons/bi';
-import { GoPencil } from 'react-icons/go';
+import { Pencil } from '@osrd-project/ui-icons';
 import nextId from 'react-id-generator';
 import ReactMarkdown from 'react-markdown';
 import { useParams } from 'react-router-dom';
@@ -202,7 +202,7 @@ export default function Project() {
                           <span className="project-details-title-modify-button-text">
                             {t('modifyProject')}
                           </span>
-                          <GoPencil />
+                          <Pencil />
                         </button>
                       </div>
                       <div className="row">

diff --git a/front/src/applications/operationalStudies/views/Scenario.tsx b/front/src/applications/operationalStudies/views/Scenario.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useSelector, useDispatch } from 'react-redux';
-import { GoPencil } from 'react-icons/go';
+import { Pencil } from '@osrd-project/ui-icons';
 import { GiElectric } from 'react-icons/gi';
 import { FaEye, FaEyeSlash } from 'react-icons/fa';
 
@@ -240,7 +240,7 @@ export default function Scenario() {
                         }
                         title={t('editScenario')}
                       >
-                        <GoPencil />
+                        <Pencil />
                       </button>
                       <button
                         type="button"

diff --git a/front/src/applications/operationalStudies/views/Study.tsx b/front/src/applications/operationalStudies/views/Study.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { GoPencil } from 'react-icons/go';
+import { Pencil } from '@osrd-project/ui-icons';
 import nextId from 'react-id-generator';
 import { useParams } from 'react-router-dom';
 
@@ -234,7 +234,7 @@ export default function Study() {
                     }
                   >
                     <span className="study-details-modify-button-text">{t('modifyStudy')}</span>
-                    <GoPencil />
+                    <Pencil />
                   </button>
                 </div>
                 {study.study_type && (

diff --git a/front/src/applications/referenceMap/Home.tsx b/front/src/applications/referenceMap/Home.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes } from 'react-router-dom';
-import { GoLock } from 'react-icons/go';
+import { Lock } from '@osrd-project/ui-icons';
 
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
@@ -34,7 +34,7 @@ const HomeReferenceMap = () => {
             {infra ? (
               <span className="ml-2 text-muted">
                 {t('referenceMap:infrastructure', { name: infra.name })}
-                <span className="ml-2">{infra.locked && <GoLock />}</span>
+                <span className="ml-2">{infra.locked && <Lock />}</span>
               </span>
             ) : (
               <span className="ml-2 text-orange">{t('referenceMap:mapNoInfraSelected')}</span>

diff --git a/front/src/common/Map/Buttons/ButtonMapSearch.tsx b/front/src/common/Map/Buttons/ButtonMapSearch.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { GoSearch } from 'react-icons/go';
+import { Search } from '@osrd-project/ui-icons';
 import Tipped from 'applications/editor/components/Tipped';
 
 type ButtonMapSearchProps = {
@@ -17,7 +17,7 @@ const ButtonMapSearch = ({ toggleMapSearch }: ButtonMapSearchProps) => {
         onClick={toggleMapSearch}
       >
         <span className="sr-only">Search</span>
-        <GoSearch />
+        <Search />
       </button>
       <span>{t('common.search')}</span>
     </Tipped>