Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update documentation and correction of misspelled words #1126

Merged
merged 1 commit into from
Mar 8, 2024
Merged

docs: update documentation and correction of misspelled words #1126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 29 additions & 27 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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).
Expand All @@ -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
Expand All @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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

Expand Down
80 changes: 79 additions & 1 deletion MIGRATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 :

Expand Down Expand Up @@ -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.
Loading