diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b105d7c22b..5c3ea94838 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -4,6 +4,10 @@ When contributing to this repository, please first discuss the change you wish t Please note we have a Code of Conduct (see below), please follow it in all your interactions with the project. +## Code Style + +More information [here](./docs/code-style.md) + ## CLA It is a requirement for all contributors to sign the [Contributor License Agreement (CLA)](https://safe.global/cla) in order to proceed with their contribution. diff --git a/apps/mobile/CONTRIBUTING.md b/apps/mobile/CONTRIBUTING.md deleted file mode 100644 index 691c29345b..0000000000 --- a/apps/mobile/CONTRIBUTING.md +++ /dev/null @@ -1,69 +0,0 @@ -# React Native Code Guidelines - -## Code Structure - -### General Components - -- Components that are used across multiple features should reside in the `src/components/` folder. -- Each component should have its own folder, structured as follows: - ``` - Alert/ - - Alert.tsx - - Alert.test.tsx - - Alert.stories.tsx - - index.tsx - ``` -- The main component implementation should be in a named file (e.g., `Alert.tsx`), and `index.tsx` should only be used for exporting the component. -- **Reason**: Using `index.tsx` allows for cleaner imports, e.g., - ``` - import { Alert } from 'src/components/Alert'; - ``` - instead of: - ``` - import { Alert } from 'src/components/Alert/Alert'; - ``` - -### Exporting Components - -- **Always prefer named exports over default exports.** - - Named exports make it easier to refactor and identify exports in a codebase. - -### Features and Screens - -- Feature-specific components and screens should be implemented inside the `src/features/` folder. - -#### Example: Feature File Structure - -For a feature called **Assets**, the file structure might look like this: - -``` -// src/features/Assets -- Assets.container.tsx -- index.tsx -``` - -- `index.tsx` should only export the **Assets** component/container. - -#### Subcomponents for Features - -- If a feature depends on multiple subcomponents unique to that feature, place them in a `components` subfolder. For example: - -``` -// src/features/Assets/components/AssetHeader -- AssetHeader.tsx -- AssetHeader.container.tsx -- index.tsx -``` - -### Presentation vs. Container Components - -- **Presentation Components**: - - - Responsible only for rendering the UI. - - Receive data and callbacks via props. - - Avoid direct manipulation of business logic. - - Simple business logic can be included but should generally be extracted into hooks. - -- **Container Components**: - - Handle business logic (e.g., state management, API calls, etc.). - - Pass necessary data and callbacks to the corresponding Presentation component.