Merge pull request #42 from denniskigen/updated-file-naming-conventions

Add new file extension suffixes to naming conventions guide

pages/docs/coding-conventions.en-US.mdx

@@ -10,9 +10,13 @@ This is a compendium of the coding conventions we use in O3. The purpose of this
 - Use `camelCase` for variables, functions, methods, and class names.
 - Use `kebab-case` for file names and folder names.
 - Components should contain the `.component` suffix in their name (e.g. `user.component.tsx`). This nomenclature is used to distinguish components from other files such as resources, stylesheets, and tests, and determines where translation keys and strings should be extracted from. Translation keys and strings will not be extracted from files that do not match this convention.
+- Components may also contain different types of suffixes to indicate their purpose. These custom suffixes should be used in addition to the `.component` suffix. They include:
+  - `.extension` for components that render extensions e.g. [lab-order-basket-panel.extension.tsx](https://github.com/openmrs/openmrs-esm-patient-chart/blob/main/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx#L21) for the Lab Order Basket panel extension.
+  - `.modal` for components that render modals e.g. [delete-condition.modal.tsx](https://github.com/openmrs/openmrs-esm-patient-chart/blob/main/packages/esm-patient-conditions-app/src/conditions/delete-condition.modal.tsx) for the Delete Conditions modal.
+  - `.workspace` for components that render forms in the workspace e.g. [order-basket.workspace.tsx](https://github.com/openmrs/openmrs-esm-patient-chart/blob/main/packages/esm-patient-orders-app/src/order-basket/order-basket.workspace.tsx#L4) for the Order Basket workspace.
 - Unit and integration test files should contain the `.test` suffix in their name (e.g. `user.test.tsx`). Do not include the word `component` in the test file name.
 - Playwright e2e tests should contain the '.spec' suffix in their name (e.g. `user.spec.ts`).
-- Stylesheets should not contain `.component` suffix in their name (e.g. `user.component.scss`). This is because stylesheets are not components, and are not translated. Instead, stylesheets should be named after the component they are styling (e.g. `user.scss`).
+- Stylesheets should not contain `.component` suffix in their name (e.g. `user.component.scss`). This is because stylesheets are not components, and are not translated by the translation system. Instead, stylesheets should be named after the component they are styling (e.g. `user.scss`).
 - Resource files that encapsulate data fetching logic should contain the `.resource` suffix in their name (e.g. `user.resource.ts`). This is to distinguish them from other files such as components, stylesheets, and tests.
 - Name TypeScript files that contain JSX with the `.tsx` extension (e.g. `user.component.tsx`). Name TypeScript files that do not contain JSX with the `.ts` extension (e.g. `user.resource.ts`). In most cases, you shouldn't need to use the `.tsx` extension for files outside the `src` directory.
 - Follow the extension system [nomenclature guide](/docs/extension-system#nomenclature) when naming your extensions and extension slots.
@@ -93,7 +97,7 @@ This is a compendium of the coding conventions we use in O3. The purpose of this
 
 ## Event handlers
 
-- Ensure that your event handlers properly define their cleanup logic. Event handlers in useEffect callbacks should always *return* a cleanup function to prevent unexpected behaviour. For example, do this:
+- Ensure that your event handlers properly define their cleanup logic. Event handlers in useEffect callbacks should always _return_ a cleanup function to prevent unexpected behaviour. For example, do this:
 
   ```tsx {8-10}
   useEffect(() => {
@@ -108,8 +112,8 @@ This is a compendium of the coding conventions we use in O3. The purpose of this
     };
   }, []);
   ```
-  
-  Instead of this:  
+
+  Instead of this:
 
   ```tsx {9}
   useEffect(() => {
@@ -124,7 +128,6 @@ This is a compendium of the coding conventions we use in O3. The purpose of this
   }, []);
   ```
 
-
 ## Type annotations
 
 - Follow the guidelines outlined in [React TypeScript Cheatsheets](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example/).

pages/docs/coding-conventions.fr-FR.mdx

@@ -9,6 +9,10 @@ Il s'agit d'un recueil des conventions de codage que nous utilisons dans O3. L'o
 - Suivez les lignes directrices de cette [fiche d'information sur le nommage](https://github.com/kettanaito/naming-cheatsheet).
 - Utilisez `camelCase` pour les variables, les fonctions, les méthodes et les noms de classes.
 - Les composants doivent contenir le suffixe `.component` dans leur nom (par exemple `user.component.tsx`). Cette nomenclature est utilisée pour distinguer les composants des autres fichiers tels que les ressources, les feuilles de style et les tests, et détermine où les clés de traduction et les chaînes de caractères doivent être extraites. Les clés et chaînes de traduction ne seront pas extraites des fichiers qui ne correspondent pas à cette convention.
+- Les composants peuvent également contenir différents types de suffixes pour indiquer leur objectif. Ces suffixes personnalisés doivent être utilisés en plus du suffixe `.component`. Ils incluent:
+  - `.extension` pour les composants qui rendent des extensions, par exemple [lab-order-basket-panel.extension.tsx](https://github.com/openmrs/openmrs-esm-patient-chart/blob/main/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx#L21) pour l'extension du panneau de panier de commande de laboratoire.
+  - `.modal` pour les composants qui affichent des modaux, par exemple [delete-condition.modal.tsx](https://github.com/openmrs/openmrs-esm-patient-chart/blob/main/packages/esm-patient-conditions-app/src/conditions/delete-condition.modal.tsx) pour le modal de Suppression de Conditions.
+  - `.workspace` pour les composants qui rendent des formulaires dans l'espace de travail, par exemple [order-basket.workspace.tsx](https://github.com/openmrs/openmrs-esm-patient-chart/blob/main/packages/esm-patient-orders-app/src/order-basket/order-basket.workspace.tsx#L4) pour l'espace de travail du panier de commande.
 - Les fichiers de tests unitaires et d'intégration doivent contenir le suffixe `.test` dans leur nom (par exemple `user.test.tsx`). N'incluez pas le mot "composant" dans le nom du fichier de test.
 - Les tests Playwright e2e doivent contenir le suffixe '.spec' dans leur nom (par exemple `user.spec.ts`).
 - Les feuilles de style ne doivent pas contenir le suffixe `.component` dans leur nom (par exemple `user.component.scss`). En effet, les feuilles de style ne sont pas des composants et ne sont pas traduites. Au lieu de cela, les feuilles de style doivent être nommées d'après le composant qu'elles corrigent (par exemple, `user.scss`).