Add React Support #3

As the editor and visualizer features of the project will require a significant amount of front-end work, we'll use the react framework and TypeScript to achieve our views.
This pull request adds TypeScript/React to the project, and a Continuous Deployment (CD) workflow to automatically deploy the website on our staging server (https://maxou.dev/IQBall/public) when the master branch gets new commits pushed.

Folder tree of the project

The Folder tree was updated, here are the goals of each directories.

.
├── ci            // CI/CD related directory. 
├── Documentation // Documentation directory.
├── front         // React code goes here.
│   ├── views     // React views goes here.
│   └── assets    // assets goes here (images, svg etc)
├── profiles      // PHP server environment profiles.
├── public        // index.php goes here
└── src           // php code goes here
    ├── Controller
    ├── Data
    └── ...

How does php sends react views to the client

As our views are now done using react (and defined under the front/views folder), we need to use the send_react_front($viewURI, $viewArguments) php function (located in the src/react-render.php file).
As there is nothing serious on the master branch regarding the project views, a sample controller (src/Controller/SampleFormController.php) with a form view (front/views/SampleForm.tsx) and a view that displays the information entered in the form (front/views/DisplayResult) has been made to let you understand how to use the send_react_front function to render the react views and how to bind data to the views.

React views conventions.

Conventions regarding our react views must be respected in order to be renderable.
If you look at the send_react_front($viewURI, $viewArguments) function, you'll see that is simply loads the file src/react-display-file.php with given arguments.
The file is a simple html5 template with a <script> block in the <body> section. The script block imports the requested view and will render it using a specific render(any) function. This function must figure in the imported view file in order to work.

The `render(any)` function

any react view file should export a function with signature render(arguments: any), which responsibility is to render the view.
The arguments parameter is used to pass data to the react component.

If you take a look at the front/views/SampleForm.tsx view, here's the definition of its render function :

/// Here's the definition of the view 
function SampleForm() {
	... react jsx code here
}

// the `SampleForm` does not inputs arguments but the parameter IS STILL REQUIRED
export function render(args: any) {
    const root = ReactDOM.createRoot(
        document.getElementById('root') as HTMLElement
    );
    root.render(
        <React.StrictMode>
            <SampleForm /> //here's our view component
        </React.StrictMode>
    );
}

Pass arguments to our react views

We'll take the example of the view in charge of displaying the SimpleForm's fields values.
First, let's take a look at its React Component definition :

function DisplayResults({password, username}: any) {
    return (
        <div>
            <p>username: {username}</p> //arguments are used heres
            <p>password: {password}</p>
        </div>
    )
}

The components takes two arguments, a username and password string.

Now, let's take a look at its render function :

export function render(args: any) {
    const root = ReactDOM.createRoot(
        document.getElementById('root') as HTMLElement
    );
    root.render(
        <React.StrictMode>
            <DisplayResults username={args.name} password={args.password} />
        </React.StrictMode>
    );
}

let's take a look at this line:

<DisplayResults username={args.name} password={args.password} />

DisplayResults is the name of our React Component (the function).
To pass arguments to the DisplayResults function, we use the syntax <function parameter name>={value}. (somewhat like regular html/xml components).
Use the render's function args parameter to access to the php's array values (see below).

So now we have defined our react view, let's send it to the user's browser from php.

To render the DisplayResults view, we'll use the send_react_front():

require_once "react-display.php";
...
send_react_front(
        "views/DisplayResults.tsx", // view file location, relative to the `/front` folder.
        array("name" => "samuel barion", "password" => "1234") //our function's arguments
)

NOTE: in the project, the $_POST is placed instead of the hardcoded array, as the $_POST is an array containing the "name" and "password" keys. (regarding the SampleForm's form inputs names)).

As the editor and visualizer features of the project will require a significant amount of front-end work, we'll use the react framework and TypeScript to achieve our views. This pull request adds TypeScript/React to the project, and a Continuous Deployment (CD) workflow to automatically deploy the website on our staging server (https://maxou.dev/IQBall/public) when the `master` branch gets new commits pushed. ## Folder tree of the project The Folder tree was updated, here are the goals of each directories. ```tree . ├── ci // CI/CD related directory. ├── Documentation // Documentation directory. ├── front // React code goes here. │ ├── views // React views goes here. │ └── assets // assets goes here (images, svg etc) ├── profiles // PHP server environment profiles. ├── public // index.php goes here └── src // php code goes here ├── Controller ├── Data └── ... ``` ### How does php sends react views to the client As our views are now done using react (and defined under the `front/views` folder), we need to use the `send_react_front($viewURI, $viewArguments)` php function (located in the `src/react-render.php` file). As there is nothing serious on the master branch regarding the project views, a sample controller (`src/Controller/SampleFormController.php`) with a form view (`front/views/SampleForm.tsx`) and a view that displays the information entered in the form (`front/views/DisplayResult`) has been made to let you understand how to use the `send_react_front` function to render the react views and how to bind data to the views. ### React views conventions. Conventions regarding our react views __must be respected in order to be renderable__. If you look at the `send_react_front($viewURI, $viewArguments)` function, you'll see that is simply loads the file `src/react-display-file.php` with given arguments. The file is a simple html5 template with a `<script>` block in the `<body>` section. The script block imports the requested view and will render it using a specific `render(any)` function. This function __must__ figure in the imported view file in order to work. #### The `render(any)` function __any react view file__ should __export__ a function with signature `render(arguments: any)`, which responsibility is to render the view. The `arguments` parameter is used to pass data to the react component. If you take a look at the `front/views/SampleForm.tsx` view, here's the definition of its render function : ```ts /// Here's the definition of the view function SampleForm() { ... react jsx code here } // the `SampleForm` does not inputs arguments but the parameter IS STILL REQUIRED export function render(args: any) { const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <SampleForm /> //here's our view component </React.StrictMode> ); } ``` ### Pass arguments to our react views We'll take the example of the view in charge of displaying the SimpleForm's fields values. First, let's take a look at its React Component definition : ```ts function DisplayResults({password, username}: any) { return ( <div> <p>username: {username}</p> //arguments are used heres <p>password: {password}</p> </div> ) } ``` The components takes two arguments, a `username` and `password` string. Now, let's take a look at its `render` function : ```ts export function render(args: any) { const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <DisplayResults username={args.name} password={args.password} /> </React.StrictMode> ); } ``` let's take a look at this line: ``` <DisplayResults username={args.name} password={args.password} /> ``` `DisplayResults` is the name of our React Component (the function). To pass arguments to the `DisplayResults` function, we use the syntax `<function parameter name>={value}`. (somewhat like regular html/xml components). Use the render's function `args` parameter to access to the php's array values (see below). So now we have defined our react view, let's send it to the user's browser from php. To render the `DisplayResults` view, we'll use the `send_react_front()`: ```php require_once "react-display.php"; ... send_react_front( "views/DisplayResults.tsx", // view file location, relative to the `/front` folder. array("name" => "samuel barion", "password" => "1234") //our function's arguments ) ``` NOTE: in the project, the `$_POST` is placed instead of the hardcoded array, as the `$_POST` is an array containing the "name" and "password" keys. (regarding the SampleForm's form inputs names)).

       "App\\": "src/"
     }
   },
   "include-path": ["src"],

     "@types/react-dom": "^18.2.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.9.5",

       "react-app/jest"
     ]
   },
   "browserslist": {

 /**
  * relative path of the index.php's directory from the server's document root.
  */
 global $basePath;

 if ($match == null) {
     // TODO redirect to a 404 not found page instead (issue #1)
     echo "page non trouvée";
     header('HTTP/1.1 404 Not Found');

 Conventions regarding our react views __must be respected in order to be renderable__.
 ### The `render(any)` function
 __any react view file__ should __export__ a function with signature `render(arguments: any)`, which responsibility is to render the view.

				`import ReactDOM from "react-dom/client";`
				`import React, {FunctionComponent} from "react";`

				`import ReactDOM from "react-dom/client";`
				`import React from "react";`

             }
         ?>
         window.__vite_plugin_react_preamble_installed__ = true

     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
 <body id="root">