CODE_OF_CONDUCT.md

Code Of Conduct

1. Make sure that all of your application code should be placed inside the imports/ directory. See Meteor - File structure

2. Use absolute imports e.g. import { App } from '/imports/ui/App' instead of relative imports ../../../imports/ui/App when you need to import files across hierarchies.

3. SCSS files must not have the same name as their corresponding TSX files.

   // ❌ Bad
   // SomeComponent.scss
   .selector { ... }
   // SomeComponent.tsx
   import './SomeComponent.scss'
   
   // ✅ Good
   // SomeComponent.style.scss
   .selector { ... }
   // SomeComponent.tsx
   import './SomeComponent.style.scss'

   Since meteor has bugs with it, see meteor/meteor#10708.

4. Follow BEM methodology to write your CSS/SCSS selectors

   /* Block: layer-ui Element: __wrapper__footer Modifiers: --transition-bottom */
   .layer-ui__wrapper__footer-left--transition-bottom {
   }
   /* Block layer-ui Element: __wrapper_footer Modifiers: --center */
   .layer-ui__wrapper__footer-center {
   }
   /* Block: /  Element: disable-zen-mode Modifiers: --visible */
   .disable-zen-mode--visible {
   }

5. Use excalidraw i18n solution to support multiple languages

   import { t, defaultLang, setLanguage } from '/imports/i18n'

6. Use Command Pattern to manipulate canvas, check code under folder /imports/excalidraw/actions

   • We have manager.ts#ActionManager to registerAction, executeActio and renderAction into the canvas.

7. Use jotai as our state management solution. The jotai is superior to recoil, both of them are atomic-oritented state management tools. It has proven success in the Excalidraw app, we could follow this pattern to scale it across the entire project.

8. Create a module “whitelist” that can be read by the build process, but does not actually run to make dynamic expressions work with import.

   • See imports/i18n/declare-imports.ts for reference.
   • See Meteor - Using import() with dynamic expressions

9. Avoid Using Meteor.wrapAsync to convert callback-style function call into async/await function. It might be causing performance issues. See Rocket.Chat/Rocket.Chat#23079

10. Use /imports/excalidraw/components/icons.tsx to declare SVG icons and customize them.

11. Avoid using Meteor.call, use Meteor.callAsync instead

12 Make use of Tree-Shaking Import the component only you need

```typescript
// ✅ Good
import Form from 'react-bootstrap/Form'
// ❌ Bad
import { Form } from 'react-bootstrap'
```