Migrate last parts of the project to TS

README.md

@@ -1,11 +1,11 @@
 # GridXXX-App
 
-Template app that bootstraps the creation of gridsuite apps.
-The template setup the authentication mechanism and provide a configured empty application.
+Template app that bootstraps the creation of GridSuite apps.
+This template setup the authentication mechanism and provides a configured empty application.
 
 To customize this repository for an app, search and replace the string XXX with the name of the app. For example, GridXXX -> GridFoo, gridXXX-app -> gridfoo-app.
 
 ## Typescript config
 
 Files tsconfig.json and src/react-app-env.d.ts both results from create-react-app typescript template (version 5).
-Some property values have been changed to meet the project needs (ex: target, baseUrl,...).
+Some property values have been changed to meet the project needs (ex: target, baseUrl, ...).

src/index.js → src/index.tsx

@@ -4,17 +4,19 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import 'core-js/es/array/flat-map';
 
+import 'core-js/es/array/flat-map';
 import 'typeface-roboto';
-
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-
 import './index.css';
-
 import AppWrapper from './components/app-wrapper';
 
 const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(<AppWrapper />);
+if (container) {
+    const root = createRoot(container);
+    root.render(<AppWrapper />);
+} else {
+    document.write("<b>Can't start the application...</b>");
+    throw new Error('No root container found');
+}

src/plugins/README.md

@@ -3,16 +3,16 @@
 
 Add a plugin component or object in the corresponding group represented as folders.
 
-plugins/myPluginGroup/myNewPlugin.js
-```js
+```ts
+// plugins/myPluginGroup/myNewPlugin.ts
 const MyNewPlugin = {
     ...
 };
 export default MyNewPlugin;
 ```
 
-Edit index.js to export your new plugin in the corresponding group
-```js
+Edit `index.ts` to export your new plugin in the corresponding group
+```ts
 import MyNewPlugin from './myPluginGroup/myNewPlugin';
 ...
 export const MyPluginGroupPlugins = [
@@ -23,13 +23,15 @@ export const MyPluginGroupPlugins = [
 ];
 ```
 
-Defining and adding a group a group of plugins needs to add some code in the target component
-```js
+Defining and adding a group of plugins needs to add some code in the target component
+
+```tsx
+import { FunctionComponent } from 'react';
 // Plugins
 import { MyPluginGroupPlugins } from '../plugins';
 //...
 
-const MyPluggableComponent = () => {
+const MyPluggableComponent: FunctionComponent = () => {
     //...
     return (
         <>
@@ -46,6 +48,5 @@ const MyPluggableComponent = () => {
 # How to overwrite translations
 
 Add your private translations to the following files to complete or overwrite existing translations
-
-* src/plugins/translations/en.json
-* src/plugins/translations/fr.json
+* `src/plugins/translations/en.json`
+* `src/plugins/translations/fr.json`

src/plugins/index.ts

@@ -0,0 +1 @@
+// This file will contain exported plugin collections