Merged PR 16: Transform every single class components into functional component

This improve greatly the performance and the code cleaning.
It allows us to separate the inseparable class methods into modules functions

src/Components/Sidebar/Sidebar.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { describe, it, expect, vi } from 'vitest';
 import { fireEvent, render, screen } from '../../utils/test-utils';
-import Sidebar from './Sidebar';
+import { Sidebar } from './Sidebar';
 
 describe.concurrent('Sidebar', () => {
   it('Start default', () => {

src/Components/Sidebar/Sidebar.tsx

@@ -12,35 +12,33 @@ function handleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
   event.dataTransfer.setData('type', (event.target as HTMLButtonElement).id);
 }
 
-export default class Sidebar extends React.PureComponent<ISidebarProps> {
-  public render(): JSX.Element {
-    const listElements = this.props.componentOptions.map(componentOption =>
-      <button
-        className='justify-center transition-all sidebar-component'
-        key={componentOption.Type}
-        id={componentOption.Type}
-        title={componentOption.Type}
-        onClick={() => this.props.buttonOnClick(componentOption.Type)}
-        draggable={true}
-        onDragStart={(event) => handleDragStart(event)}
-      >
-        {truncateString(componentOption.Type, 5)}
-      </button>
-    );
+export const Sidebar: React.FC<ISidebarProps> = (props: ISidebarProps) => {
+  const listElements = props.componentOptions.map(componentOption =>
+    <button
+      className='justify-center transition-all sidebar-component'
+      key={componentOption.Type}
+      id={componentOption.Type}
+      title={componentOption.Type}
+      onClick={() => props.buttonOnClick(componentOption.Type)}
+      draggable={true}
+      onDragStart={(event) => handleDragStart(event)}
+    >
+      {truncateString(componentOption.Type, 5)}
+    </button>
+  );
 
-    const isOpenClasses = this.props.isOpen ? 'left-16' : '-left-64';
-    return (
-      <div className={`fixed z-10 bg-slate-200
+  const isOpenClasses = props.isOpen ? 'left-16' : '-left-64';
+  return (
+    <div className={`fixed z-10 bg-slate-200
       text-gray-700 transition-all h-screen w-64
       overflow-y-auto ${isOpenClasses}`}>
-        <div className='bg-slate-100 sidebar-title'>
+      <div className='bg-slate-100 sidebar-title'>
           Components
-        </div>
-        <div className='grid grid-cols-1 md:grid-cols-3 gap-2
-         m-2 md:text-xs font-bold'>
-          {listElements}
-        </div>
       </div>
-    );
-  }
-}
+      <div className='grid grid-cols-1 md:grid-cols-3 gap-2
+         m-2 md:text-xs font-bold'>
+        {listElements}
+      </div>
+    </div>
+  );
+};