fix(ui): reorganize ui component to follow best pratices

[jolevesq]

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Fixes #2743

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

Hosted Feb 17, 16h30
https://jolevesq.github.io/geoview/demos-navigator.html?config=./configs/navigator/19-geojson.json

Need to play with many demo as ui components are used in many places

Checklist:

• I have build (rush build) and deploy (rush host) my PR
• I have connected the issues(s) to this PR
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have created new issue(s) related to the outcome of this PR is needed
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

---

This change is 

[jolevesq]

Reviewed 79 of 79 files at r1, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @Alex-NRCan and @DamonU2)

[Alex-NRCan]

Reviewed 1 of 79 files at r1, 5 of 10 files at r2, all commit messages.
Reviewable status: 74 of 79 files reviewed, 3 unresolved discussions (waiting on @DamonU2 and @jolevesq)

---

packages/geoview-core/src/ui/accordion/accordion.tsx line 51 at r2 (raw file):

// Define AccordionExpandIcon outside of the main component
const AccordionExpandIcon = memo(function AccordionExpandIcon({

I'm not sure how I feel about memoizing UI components meant to be reusable in the framework? In my mind, memo usage is more 'applicative' than 'framework' related.

---

packages/geoview-core/src/ui/accordion/accordion.tsx line 70 at r2 (raw file):

 * @returns {JSX.Element} the created Fade element
 */
export const Accordion = memo(function Accordion(props: AccordionProps): ReactNode {

Same comment

---

packages/geoview-core/src/ui/button/button.tsx line 98 at r2 (raw file):

// Export the Button  using forwardRef so that passing ref is permitted and functional in the react standards
export const Button = memo(forwardRef<HTMLButtonElement, ButtonProps>(MaterialBtn));

Same comment

[Alex-NRCan]

Reviewed 29 of 79 files at r1, 4 of 10 files at r2.
Reviewable status: 78 of 79 files reviewed, 5 unresolved discussions (waiting on @DamonU2 and @jolevesq)

---

packages/geoview-core/src/ui/paper/paper.tsx line 20 at r2 (raw file):

// Export the Paper using forwardRef so that passing ref is permitted and functional in the react standards
export const Paper = memo(forwardRef<HTMLDivElement, PaperProps>(MUIPaper));

Same comment, I'd remove the memo usage here and maybe revert the whole file.

---

packages/geoview-core/src/ui/panel/panel.tsx line 29 at r2 (raw file):

  // Callback when the user clicked the general close button
  handleGeneralClose?: () => void;
  // Callback when the panel has completed opened (and transitioned in)

The best practice is to use the 'on' prefix rather than 'handle' for callbacks sent as props in a component.
The handle prefix is to be used when defining a function inside a component. I'd leave them as 'on' and change 'handleKeyDown' to 'onKeyDown'.

[DamonU2]

Reviewed 69 of 79 files at r1, 10 of 10 files at r2, all commit messages.
Reviewable status: all files reviewed, 9 unresolved discussions (waiting on @jolevesq)

---

packages/geoview-core/src/ui/slider/slider.tsx line 241 at r2 (raw file):

  useEffect(() => {
    logger.logTraceUseEffect('UI.SLIDER - foscus when mount');

foscus > focus

---

packages/geoview-core/src/ui/modal/modal-api.ts line 49 at r2 (raw file):

   * Function that deletes the modal by the id specified
   *
   * @param { string } modalId of the modal that is to be deleted

modalId - ID of the...

---

packages/geoview-core/src/ui/modal/modal-api.ts line 58 at r2 (raw file):

   * Function that open the modal by the id specified
   *
   * @param { string } modalId of the modal that is to be deleted

modalId - ID of the...

---

packages/geoview-core/src/ui/modal/modal-api.ts line 69 at r2 (raw file):

   * Function that close the modal by the id specified
   *
   * @param { string } modalId of the modal that is to be deleted

modalId - ID of the...