front: use new osrd ui-icons project

OpenRailAssociation · Feb 7, 2024 · cc6ad95 · cc6ad95
1 parent 70f63aa
commit cc6ad95
Show file tree

Hide file tree

Showing 59 changed files with 193 additions and 220 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.9",
     "@redux-devtools/extension": "^3.2.3",
     "@reduxjs/toolkit": "^1.9.0",
     "@rjsf/core": "^4.2.3",

diff --git a/front/src/applications/editor/Home.tsx b/front/src/applications/editor/Home.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes } from 'react-router-dom';
-import { FaLock } from 'react-icons/fa6';
+import { Lock } from '@osrd-project/ui-icons';
 
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
@@ -35,7 +35,7 @@ export default function HomeEditorUnplugged() {
                 <span>{t('referenceMap:infrastructure', { name: infra.name })}</span>
                 {infra.locked && (
                   <span className="ml-2 text-yellow">
-                    <FaLock />
+                    <Lock />
                   </span>
                 )}
               </span>

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 { UiIcon, 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 | UiIcon;
   labelTranslationKey: string;
   shortcut?: Omit<Shortcut, 'handler'>;
 
@@ -62,7 +62,7 @@ const NavButtons: NavButton[][] = [
   [
     {
       id: 'zoom-in',
-      icon: GoZoomIn,
+      icon: ZoomIn as UiIcon,
       labelTranslationKey: 'common.zoom-in',
       onClick({ setViewport, viewport }) {
         setViewport({
@@ -73,7 +73,7 @@ const NavButtons: NavButton[][] = [
     },
     {
       id: 'zoom-out',
-      icon: GoZoomOut,
+      icon: ZoomOut as UiIcon,
       labelTranslationKey: 'common.zoom-out',
       onClick({ setViewport, viewport }) {
         setViewport({
@@ -96,7 +96,7 @@ const NavButtons: NavButton[][] = [
     },
     {
       id: 'search',
-      icon: GoSearch,
+      icon: Search as UiIcon,
       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';
@@ -115,7 +115,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());
@@ -125,7 +125,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 { ConfirmModal } from 'common/BootstrapSNCF/ModalSNCF';
 import { save } from 'reducers/editor';
@@ -154,7 +154,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());
@@ -164,7 +164,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/SelectionLeftPanel.tsx b/front/src/applications/editor/tools/selection/components/SelectionLeftPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 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';
@@ -75,7 +75,7 @@ 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>
@@ -114,7 +114,7 @@ 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';
@@ -93,7 +93,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({
@@ -107,7 +107,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({
@@ -169,7 +169,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) {
@@ -186,7 +186,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/components/BreadCrumbs.tsx b/front/src/applications/operationalStudies/components/BreadCrumbs.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { ChevronRight } from '@osrd-project/ui-icons';
 import { Project, Study, Scenario } from 'common/api/osrdEditoastApi';
 
 type Props = {
@@ -20,7 +21,9 @@ export default function BreadCrumbs({ project, study, scenario }: Props) {
           <div>
             <Link to="/operational-studies/projects">{t('projectsList')}</Link>{' '}
           </div>
-          <i className="icons-arrow-next icons-size-x75 text-muted" />
+          <span className="text-muted">
+            <ChevronRight />
+          </span>
         </>
       )}
 
@@ -31,7 +34,9 @@ export default function BreadCrumbs({ project, study, scenario }: Props) {
           <div className="text-truncate" title={project.name}>
             <Link to={`/operational-studies/projects/${project.id}`}> {project.name}</Link>
           </div>
-          <i className="icons-arrow-next icons-size-x75 text-muted" />
+          <span className="text-muted">
+            <ChevronRight />
+          </span>
         </>
       )}
       {project && study && !scenario && (
@@ -47,7 +52,9 @@ export default function BreadCrumbs({ project, study, scenario }: Props) {
               {study.name}
             </Link>
           </div>
-          <i className="icons-arrow-next icons-size-x75 text-muted" />
+          <span className="text-muted">
+            <ChevronRight />
+          </span>
           <div className="text-truncate" title={scenario.name}>
             {scenario.name}
           </div>

diff --git a/front/src/applications/operationalStudies/components/Project/PictureUploader.tsx b/front/src/applications/operationalStudies/components/Project/PictureUploader.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useCallback, ChangeEvent } from 'react';
-import { AiOutlinePicture } from 'react-icons/ai';
+import { Image, XCircle } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
-import { TiDelete } from 'react-icons/ti';
 import logoCheese from 'assets/pictures/misc/cheese.svg';
 import logoDog from 'assets/pictures/misc/dog.svg';
 import logoCat from 'assets/pictures/misc/cat.svg';
@@ -40,7 +39,7 @@ const IMAGE_MAX_SIZE = 2 * 1024 * 1024; // 2MiB
 function displayNoImageMessages(isValid: boolean, t: (arg0: string) => string) {
   return (
     <>
-      <AiOutlinePicture />
+      <Image />
       {isValid ? (
         <div className="project-edition-modal-picture-placeholder-text">{t('noImage')}</div>
       ) : (
@@ -176,7 +175,7 @@ function PicturePlaceholderButtons({ setTempProjectImage, safeWord }: PropsButto
         <img src={logoSNCF} alt="SNCF LOGO" />
       </button>
       <button className="remove" type="button" onClick={() => setTempProjectImage(null)}>
-        <TiDelete />
+        <XCircle variant="fill" />
       </button>
     </div>
   );