(feat) Add CarbonMRS icon infrastructure and React components

packages/apps/esm-devtools-app/src/devtools/devtools-popup.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@carbon/react';
-import { Close } from '@carbon/react/icons';
+import { CloseIcon } from '@openmrs/esm-framework';
 import ImportMap from './import-map.component';
 import styles from './devtools-popup.styles.scss';
 
@@ -12,7 +12,7 @@ export default function DevToolsPopup(props: DevToolsPopupProps) {
         <Button
           className={styles.closeButton}
           kind="secondary"
-          renderIcon={(props) => <Close size={16} {...props} />}
+          renderIcon={() => <CloseIcon size={16} />}
           iconDescription="Close"
           onClick={props.close}
           hasIconOnly

packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx

@@ -1,11 +1,14 @@
 import React, { useMemo, useState } from 'react';
 import { Button, Column, FlexGrid, Row, TextInput, Toggle } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { ChevronDown, ChevronUp, Download, TrashCan } from '@carbon/react/icons';
 import cloneDeep from 'lodash-es/cloneDeep';
 import isEmpty from 'lodash-es/isEmpty';
 import type { Config } from '@openmrs/esm-framework/src/internal';
 import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  DownloadIcon,
+  TrashCanIcon,
   clearConfigErrors,
   getExtensionInternalStore,
   implementerToolsConfigStore,
@@ -50,7 +53,7 @@ interface OpenOrCloseButtonProps {
 const OpenOrCloseButton: React.FC<OpenOrCloseButtonProps> = ({ isConfigToolbarOpen, toggleIsToolbarOpen }) => (
   <Button
     hasIconOnly
-    renderIcon={isConfigToolbarOpen ? ChevronUp : ChevronDown}
+    renderIcon={isConfigToolbarOpen ? ChevronUpIcon : ChevronDownIcon}
     onClick={toggleIsToolbarOpen}
     kind="ghost"
     size="sm"
@@ -152,7 +155,7 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
                 <Button
                   kind="danger"
                   iconDescription="Clear local config"
-                  renderIcon={(props) => <TrashCan size={16} {...props} />}
+                  renderIcon={(props) => <TrashCanIcon size={16} {...props} />}
                   onClick={() => {
                     clearConfigErrors();
                     temporaryConfigStore.setState({ config: {} });
@@ -163,7 +166,7 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
                 <Button
                   kind="secondary"
                   iconDescription="Download config"
-                  renderIcon={(props) => <Download size={16} {...props} />}
+                  renderIcon={(props) => <DownloadIcon size={16} {...props} />}
                   onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
                     if ((event.target as HTMLAnchorElement).id != 'downloadConfigBtn')
                       document.getElementById('downloadConfigBtn')?.click();

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/editable-value.component.tsx

@@ -4,8 +4,8 @@ import unset from 'lodash-es/unset';
 import cloneDeep from 'lodash-es/cloneDeep';
 import styles from './editable-value.styles.scss';
 import { Button } from '@carbon/react';
-import { Edit, Reset } from '@carbon/react/icons';
 import type { ConfigValue, Validator, Type, Config } from '@openmrs/esm-framework/src/internal';
+import { EditIcon, ResetIcon } from '@openmrs/esm-framework';
 import { clearConfigErrors, temporaryConfigStore } from '@openmrs/esm-framework/src/internal';
 import type { CustomValueType } from './value-editor';
 import { ValueEditor } from './value-editor';
@@ -111,12 +111,12 @@ export default function EditableValue({ path, element, customType }: EditableVal
               iconDescription={t('editValueButtonText', 'Edit')}
               onClick={() => setEditing(true)}
               ref={activeConfigRef}
-              renderIcon={(props) => <Edit size={16} {...props} />}
+              renderIcon={(props) => <EditIcon size={16} {...props} />}
               hasIconOnly
             />
             {element._source == 'temporary config' ? (
               <Button
-                renderIcon={(props) => <Reset size={16} {...props} />}
+                renderIcon={(props) => <ResetIcon size={16} {...props} />}
                 size="sm"
                 kind="ghost"
                 iconDescription={t('resetToDefaultValueButtonText', 'Reset to default')}

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editor.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
-import { Close, Save } from '@carbon/react/icons';
-import type { Type } from '@openmrs/esm-framework';
+import { CloseIcon, SaveIcon, type Type } from '@openmrs/esm-framework';
 import type { ConfigValueDescriptor } from './editable-value.component';
 import { ValueEditorField } from './value-editors/value-editor-field';
 import styles from './value-editor.scss';
@@ -46,13 +45,13 @@ export function ValueEditor({ element, customType, path, handleSave, handleClose
       <ValueEditorField element={element} path={path} value={tmpValue} onChange={setTmpValue} valueType={valueType} />
       <div className={styles.valueEditorButtons}>
         <Button
-          renderIcon={(props) => <Save {...props} size={16} />}
+          renderIcon={(props) => <SaveIcon {...props} size={16} />}
           kind="primary"
           onClick={() => handleSave(JSON.stringify(tmpValue))}
         >
           {t('saveValueButtonText', 'Save')}
         </Button>
-        <Button renderIcon={(props) => <Close {...props} size={16} />} kind="secondary" onClick={handleClose}>
+        <Button renderIcon={(props) => <CloseIcon {...props} size={16} />} kind="secondary" onClick={handleClose}>
           {t('cancelButtonText', 'Cancel')}
         </Button>
       </div>

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/array-editor.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import cloneDeep from 'lodash-es/cloneDeep';
 import uniqueId from 'lodash-es/uniqueId';
-import { Type } from '@openmrs/esm-framework';
+import { AddIcon, TrashCanIcon, Type } from '@openmrs/esm-framework';
 import {
   Button,
   Tile,
@@ -10,7 +10,6 @@ import {
   StructuredListRow,
   StructuredListWrapper,
 } from '@carbon/react';
-import { Add, TrashCan } from '@carbon/react/icons';
 import { ValueEditorField } from './value-editor-field';
 import type { ConfigValueDescriptor } from '../editable-value.component';
 import styles from './array-editor.styles.scss';
@@ -47,7 +46,7 @@ export function ArrayEditor({ element, valueArray, setValue }: ArrayEditorProps)
               </StructuredListCell>
               <StructuredListCell className={styles.buttonCell}>
                 <Button
-                  renderIcon={(props) => <TrashCan {...props} size={16} />}
+                  renderIcon={(props) => <TrashCanIcon {...props} size={16} />}
                   size="sm"
                   kind="secondary"
                   iconDescription="Remove"
@@ -64,7 +63,7 @@ export function ArrayEditor({ element, valueArray, setValue }: ArrayEditorProps)
           <StructuredListRow>
             <StructuredListCell>
               <Button
-                renderIcon={(props) => <Add {...props} size={16} />}
+                renderIcon={(props) => <AddIcon {...props} size={16} />}
                 size="sm"
                 iconDescription="Add"
                 hasIconOnly

packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { ChevronUp, ChevronDown } from '@carbon/react/icons';
-import { UserHasAccess, useStore } from '@openmrs/esm-framework';
+import { ChevronDownIcon, ChevronUpIcon, UserHasAccess, useStore } from '@openmrs/esm-framework';
 import { implementerToolsStore, togglePopup } from './store';
 import styles from './implementer-tools.styles.scss';
 
@@ -11,7 +10,7 @@ const GlobalImplementerToolsButton: React.FC = () => {
     <UserHasAccess privilege="coreapps.systemAdministration">
       <div className={styles.chevronImplementerToolsButton} data-testid="globalImplementerToolsButton">
         <div onClick={togglePopup} role="button" tabIndex={0}>
-          {isOpen ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
+          {isOpen ? <ChevronDownIcon size={16} /> : <ChevronUpIcon size={16} />}
         </div>
       </div>
     </UserHasAccess>

packages/apps/esm-implementer-tools-app/src/implementer-tools.button.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { HeaderGlobalAction } from '@carbon/react';
-import { Close, Tools } from '@carbon/react/icons';
-import { UserHasAccess, useStore } from '@openmrs/esm-framework';
+import { CloseIcon, ToolsIcon, UserHasAccess, useStore } from '@openmrs/esm-framework';
 import { implementerToolsStore, togglePopup } from './store';
 import styles from './implementer-tools.styles.scss';
 
@@ -20,7 +19,7 @@ const ImplementerToolsButton: React.FC = () => {
         name="ImplementerToolsIcon"
         onClick={togglePopup}
       >
-        {isOpen ? <Close size={20} /> : <Tools size={20} />}
+        {isOpen ? <CloseIcon size={20} /> : <ToolsIcon size={20} />}
       </HeaderGlobalAction>
     </UserHasAccess>
   );

packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, useState } from 'react';
 import { Button, ContentSwitcher, Switch } from '@carbon/react';
-import { Close } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { Configuration } from '../configuration/configuration.component';
 import { FrontendModules } from '../frontend-modules/frontend-modules.component';
@@ -9,6 +8,7 @@ import { FeatureFlags } from '../feature-flags/feature-flags.component';
 import type { FrontendModule } from '../types';
 import type { ResolvedDependenciesModule } from '../backend-dependencies/openmrs-backend-dependencies';
 import styles from './popup.styles.scss';
+import { CloseIcon } from '@openmrs/esm-framework';
 
 interface DevToolsPopupProps {
   close(): void;
@@ -62,7 +62,7 @@ export default function Popup({
         <div>
           <Button
             kind="secondary"
-            renderIcon={(props) => <Close size={16} {...props} />}
+            renderIcon={(props) => <CloseIcon size={16} {...props} />}
             iconDescription="Close"
             onClick={close}
             hasIconOnly

packages/apps/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import styles from './styles.css';
 import {
+  CloseIcon,
   getExtensionInternalStore,
-  useAssignedExtensions,
   useStore,
   useStoreWithActions,
 } from '@openmrs/esm-framework/src/internal';
 import { Button } from '@carbon/react';
-import { Close } from '@carbon/react/icons';
 import { Portal } from './portal';
 import { ExtensionOverlay } from './extension-overlay.component';
 import { type ImplementerToolsStore, implementerToolsStore } from '../store';
@@ -90,7 +89,7 @@ export function ExitButton() {
       className={styles.exitButton}
       kind="danger"
       size="sm"
-      renderIcon={(props) => <Close {...props} size={16} />}
+      renderIcon={(props) => <CloseIcon {...props} size={16} />}
       iconDescription="Exit UI Editor"
       tooltipPosition="left"
       onClick={toggleIsUIEditorEnabled}

packages/apps/esm-implementer-tools-app/tsconfig.json

@@ -11,16 +11,7 @@
     "declaration": true,
     "declarationDir": "dist",
     "emitDeclarationOnly": true,
-    "lib": [
-      "dom",
-      "es5",
-      "scripthost",
-      "es2015",
-      "es2015.promise",
-      "es2016.array.include",
-      "es2018",
-      "esnext"
-    ]
+    "lib": ["dom", "es5", "scripthost", "es2015", "es2015.promise", "es2016.array.include", "es2018", "esnext"]
   },
   "include": ["src/**/*"]
 }

packages/apps/esm-login-app/src/change-location-link/change-location-link.extension.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { navigate, useSession } from '@openmrs/esm-framework';
+import { LocationIcon, navigate, useSession } from '@openmrs/esm-framework';
 import { Button } from '@carbon/react';
-import { Location } from '@carbon/react/icons';
 import styles from './change-location-link.scss';
 import { SwitcherItem } from '@carbon/react';
 
@@ -23,7 +22,7 @@ const ChangeLocationLink: React.FC = () => {
   return (
     <SwitcherItem aria-label="Change Location" className={styles.panelItemContainer}>
       <div>
-        <Location size={20} />
+        <LocationIcon size={20} />
         <p>{currentLocation}</p>
       </div>
       <Button kind="ghost" onClick={changeLocation}>

packages/apps/esm-login-app/src/location-picker/location-picker.component.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback, LegacyRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useLocation, type Location, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {

packages/apps/esm-login-app/src/login/login.component.tsx

@@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { type To, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button, InlineLoading, InlineNotification, PasswordInput, TextInput, Tile } from '@carbon/react';
-import { ArrowLeft, ArrowRight } from '@carbon/react/icons';
 import {
   useConfig,
   interpolateUrl,
@@ -11,6 +10,8 @@ import {
   useConnectivity,
   navigate as openmrsNavigate,
   getCoreTranslation,
+  ArrowLeftIcon,
+  ArrowRightIcon,
 } from '@openmrs/esm-framework';
 import { type ConfigSchema } from '../config-schema';
 import styles from './login.scss';
@@ -169,7 +170,7 @@ const Login: React.FC = () => {
                 iconDescription="Back to username"
                 kind="ghost"
                 onClick={() => navigate('/login')}
-                renderIcon={(props) => <ArrowLeft size={24} style={{ marginRight: '0.5rem' }} {...props} />}
+                renderIcon={(props) => <ArrowLeftIcon size={24} style={{ marginRight: '0.5rem' }} {...props} />}
               >
                 <span>{t('back', 'Back')}</span>
               </Button>
@@ -206,7 +207,7 @@ const Login: React.FC = () => {
                 {showPasswordOnSeparateScreen && (
                   <Button
                     className={styles.continueButton}
-                    renderIcon={(props) => <ArrowRight size={24} {...props} />}
+                    renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
                     type="submit"
                     iconDescription="Continue to login"
                     onClick={continueLogin}
@@ -245,7 +246,7 @@ const Login: React.FC = () => {
                 <Button
                   type="submit"
                   className={styles.continueButton}
-                  renderIcon={(props) => <ArrowRight size={24} {...props} />}
+                  renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
                   iconDescription="Log in"
                   disabled={!isLoginEnabled || isLoggingIn}
                 >

packages/apps/esm-offline-tools-app/src/components/overview-card.component.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import type { TileProps } from '@carbon/react';
 import { Button, Layer, Tile } from '@carbon/react';
-import { ArrowRight } from '@carbon/react/icons';
-import { navigate } from '@openmrs/esm-framework';
+import { ArrowRightIcon, navigate } from '@openmrs/esm-framework';
 import styles from './overview-card.styles.scss';
 
 export interface OverviewCardProps extends TileProps {
@@ -23,7 +22,7 @@ const OverviewCard: React.FC<OverviewCardProps> = ({ header, viewLink, children
           <Button
             className={styles.viewButton}
             kind="ghost"
-            renderIcon={(props) => <ArrowRight size={16} {...props} />}
+            renderIcon={(props) => <ArrowRightIcon size={16} {...props} />}
             size="sm"
             onClick={() => navigate({ to: `\${openmrsSpaBase}/${viewLink}` })}
           >

packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, SwitcherItem } from '@carbon/react';
-import { Language } from '@carbon/react/icons';
-import { showModal, useSession } from '@openmrs/esm-framework';
+import { TranslateIcon, showModal, useSession } from '@openmrs/esm-framework';
 import styles from './change-language-link.scss';
 
 /** The user menu item that shows the current language and has a button to change the language */
@@ -17,7 +16,7 @@ export function ChangeLanguageLink() {
   return (
     <SwitcherItem className={styles.panelItemContainer} aria-label={t('changeLanguage', 'Change language')}>
       <div>
-        <Language size={20} />
+        <TranslateIcon size={20} />
         <p>{languageNames.of(session?.locale)}</p>
       </div>
       <Button kind="ghost" onClick={launchChangeLanguageModal}>

packages/apps/esm-primary-navigation-app/src/components/logo/logo.component.tsx

@@ -7,16 +7,12 @@ const Logo: React.FC = () => {
   return (
     <>
       {logo?.src ? (
-        <img
-          className={styles.logo}
-          src={interpolateUrl(logo.src)}
-          alt={logo.alt}
-        />
+        <img className={styles.logo} src={interpolateUrl(logo.src)} alt={logo.alt} />
       ) : logo?.name ? (
         logo.name
       ) : (
         <svg role="img" width={110} height={40}>
-          <use xlinkHref="#omrs-logo-white"></use>
+          <use xlinkHref="#omrs-logo-white" />
         </svg>
       )}
     </>