docs: update documentation and correction of misspelled words

Youssef ELAMMARI · MartinWeb · commit 1f1cf6539b24 · 2024-03-08T16:42:19.000+01:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -13,7 +13,7 @@ You must use a version of Node.js respecting the following rule `>=10.14.2` or `
 
 ## Installation
 
-To get started, start by [forking the repository](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo) on your personnal github account.
+To get started, start by [forking the repository](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo) on your personal github account.
 
 Then, clone the forked repository:
 
@@ -50,7 +50,7 @@ npm run storybook
 
 ## Keeping your forked repository up-to-date
 
-Before you start developping, it is important to always keep your forked repository **up-to-date**.
+Before you start developing, it is important to always keep your forked repository **up-to-date**.
 
 ### Link your forked repository to the original project
 
@@ -81,10 +81,12 @@ Here's an example in JS:
 ```text
 ├── dist/ : contains the generated JS/CSS files (in the postinstall process).
 ├── src/
-|   ├── __snapshots__ : generated storybook snapshots used to test the component.
+|   ├── __tests__
+|   |   ├── GreatComponent.spec.js : all unit tests for the component.
+|   |   ├── __snapshots__ : generated storybook snapshots used to test the component.
+|   |   |   ├── GreatComponent.spec.js.snap
 |   ├── GreatComponent.js : the react component code.
 |   ├── GreatComponent.md : more documentation about the component (props, ...).
-|   ├── GreatComponent.spec.js : all unit tests for the component.
 |   ├── GreatComponent.stories.js : examples to be shown in the Storybook tool.
 |   ├── great-component.scss : Sass file, complying to BEM convention
 |   └── index.js : should export your component(s).
@@ -101,7 +103,7 @@ Into a terminal, to start to develop a component you can run
 npm run dev
 ```
 
-Or, if you want to run your component in watch mode, execting one of command below
+Or, if you want to run your component in watch mode, executing one of command below
 
 ```sh
 # If your component is in js
@@ -111,7 +113,7 @@ npm run dev:js -- --scope=@axa-fr/react-toolkit-action
 npm run dev:ts -- --scope=@axa-fr/react-toolkit-action
 ```
 
-_scope_ refer to package name of your component you are working on.
+_scope_ refers to package name of your component you are working on.
 
 And then if you want to work on it, in isolation mode, you can run storybook
 
@@ -151,7 +153,7 @@ npm test -- --coverage
 
 You can find the list of supported browser in the [List of supported browsers](./README.md#list-of-supported-browsers) section of the README.
 
-If you are developping on a Mac, you will find some Virtual Machines to help you test, on [Microsoft Edge Tools](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) webiste.
+If you are developing on a Mac, you will find some Virtual Machines to help you test, on [Microsoft Edge Tools](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) webiste.
 
 ### Documentation
 
@@ -165,29 +167,29 @@ There, do not forget to update the component status page, please!
 
 We are using the [Angular commit message format](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format), you are expected to follow it. This is very important because our changlog is generated using commit messages.
 
-Keep in mind, though, that your pull request will be squashed into master, so repository mainteners may use your commit message but are not entitled to use them as is.
+Keep in mind, though, that your pull request will be squashed into master, so repository maintainers may use your commit message but are not entitled to use them as is.
 
 ## Scripts
 
-| Script name          | Description                                                                                                 |
-| -------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `publish`            | Used by the CI to generate a new version.                                                                   |
-| `postinstall`        | Clean and build all compoents within the `packages` folder. It is ran just after the `npm install` command. |
-| `clean`              | Removes all the generated `dist` folders and `node_modules` folders within the `packages`.                  |
-| `clean:dist`         | Removes all the generated `dist` folders within the `packages` folder.                                      |
-| `clean:node_modules` | Removes all the `node_modules` folders within the `packages` folder (uses `lerna clean`).                   |
-| `style`              | Generates all `.css` file from the Sass `.scss` files.                                                      |
-| `storybook`          | Lauches the [Storybook](#storybook) tool.                                                                   |
-| `storybook:build`    | Builds the [Storybook](#storybook) tool.                                                                    |
-| `test`               | Builds the [Design System](#design-system) tool.                                                            |
-| `cover`              | Used by the CI to generate coverage files.                                                                  |
-| `lint`               | Launches both JS and TS linters                                                                             |
-| `lint:js`            | Launches JS linters, will fix whatever is possible to fix, for you.                                         |
-| `lint:ts`            | Launches TS linters, will fix whatever is possible to fix, for you.                                         |
-| `dev`                | Launches both JS and TS components in watch mode.                                                           |
-| `dev:js`             | Launches JS components in watch mode.                                                                       |
-| `dev:ts`             | Launches TS components in watch mode.                                                                       |
-| `changelog`          | Used by the CI to generate the changelog using commit messages                                              |
+| Script name          | Description                                                                                                  |
+| -------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `publish`            | Used by the CI to generate a new version.                                                                    |
+| `postinstall`        | Clean and build all components within the `packages` folder. It is ran just after the `npm install` command. |
+| `clean`              | Removes all the generated `dist` folders and `node_modules` folders within the `packages`.                   |
+| `clean:dist`         | Removes all the generated `dist` folders within the `packages` folder.                                       |
+| `clean:node_modules` | Removes all the `node_modules` folders within the `packages` folder (uses `lerna clean`).                    |
+| `style`              | Generates all `.css` file from the Sass `.scss` files.                                                       |
+| `storybook`          | Launches the [Storybook](#storybook) tool.                                                                   |
+| `storybook:build`    | Builds the [Storybook](#storybook) tool.                                                                     |
+| `test`               | Builds the [Design System](#design-system) tool.                                                             |
+| `cover`              | Used by the CI to generate coverage files.                                                                   |
+| `lint`               | Launches both JS and TS linters                                                                              |
+| `lint:js`            | Launches JS linters, will fix whatever is possible to fix, for you.                                          |
+| `lint:ts`            | Launches TS linters, will fix whatever is possible to fix, for you.                                          |
+| `dev`                | Launches both JS and TS components in watch mode.                                                            |
+| `dev:js`             | Launches JS components in watch mode.                                                                        |
+| `dev:ts`             | Launches TS components in watch mode.                                                                        |
+| `changelog`          | Used by the CI to generate the changelog using commit messages                                               |
 
 ## Troubleshooting
 
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -35,7 +35,7 @@ className={getComponentClassName(...)}
 
 ## Imports
 
-With the tree shaking and the separation between CommonJS and ECMAScript files, you should'n import the components from the component folder of the react-toolkit-all package.
+With the tree shaking and the separation between CommonJS and ECMAScript files, you shouldn't import the components from the component folder of the react-toolkit-all package.
 
 Before :
 
@@ -116,3 +116,81 @@ The component `Title` (from `@axa-fr/react-toolkit-layout-header`) has been rena
 - import { Title } from '@axa-fr/react-toolkit-all';
 + import { HeaderTitle } from '@axa-fr/react-toolkit-all';
 ```
+
+## File Upload Data Handling
+
+In 1.X
+
+- Direct iteration over files and appending them to FormData.
+
+```diff
+- const data = new FormData();
+- files.forEach(({ file, fieldname, referentialName, type }) => {
+-  data.append('Files', file, cleanFileName(file.name));
+-  data.append('FieldName', fieldname);
+-  data.append('Referential', referentialName);
+-  type && data.append('Type', type);
+-});
+```
+
+In 2.0.x
+
+- Asynchronous handling of files.
+- Files fetched as blobs.
+- Metadata such as field name and type appended to FormData.
+
+```diff
++ const data = new FormData();
++ await Promise.all(
++   files.map(async ({ file, fieldname, referentialName, type }) => {
++    const blob = await fetch(file.preview).then((response) => response.blob());
++    data.append('Files', blob, cleanFileName(file.name));
++    data.append('FieldName', fieldname);
++    data.append('Referential', referentialName);
++    type && data.append('Type', type);
++  })
++);
+```
+
+## CheckboxItem
+
+There has been a change in the representation of boolean values in the events associated with checkbox state changes. In 1.x, boolean values were directly used in events, but after in 2.0.x, these values are now represented as strings indicating the boolean state.
+
+Here is an exemple to adapt to this change :
+
+```diff
+-export const handleChange = (e) => {
+-  const newValue = !e.value;
+-  // Rest of the logic
+-}
+
++export const handleChange = (e) => {
++  const newValue = e.value === 'true';
++  // Rest of the logic
++}
+```
+
+## Input Components
+
+There has been a requirement change regarding the label attribute for all types of inputs. In the 1.x version, providing a label for the TextInput component was optional. However, in the 2.0.x version, a label is mandatory for all input components.
+
+Here's an example demonstrating how to adapt to this change:
+
+```diff
+- <TextInput
+-   name="textInputName"
+-   id="textInputId"
+-   value="textInputValue"
+-   onChange={e => handleChange(e)}
+- />
+
++ <TextInput
++   name="textInputName"
++   id="textInputId"
++   value="textInputValue"
++   onChange={e => handleChange(e)}
++   label=""
++ />
+```
+
+In this example, the TextInput component previously didn't have a label specified, which now causes an issue. To resolve this, an empty label attribute has been added to comply with the new requirement.
