From 5a292565c1290583cf803906aa7d55317be29a1c Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Sat, 11 Nov 2023 00:10:10 +0300 Subject: [PATCH 01/10] doc: add react.md --- docs/react.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 docs/react.md diff --git a/docs/react.md b/docs/react.md new file mode 100644 index 0000000..dbb0c02 --- /dev/null +++ b/docs/react.md @@ -0,0 +1,22 @@ +# React + +## Contributing to React Components + +**Components should aim to meet these requirements:** + +- [ ] Written in TypeScript +- [ ] Include Storybook page +- [ ] Include unit tests +- [ ] Include relevant e2e tests +- [ ] Avoid unnecessary re-renders +- [ ] Avoid overloading components +- [ ] Strive for SRP (Single responsibility principle) + +**Components should aim to support these features:** + +- [ ] Accessibility +- [ ] Dark-mode +- [ ] Dynamic text length +- [ ] Internationalization (i18n) translations including right-to-left languages +- [ ] Responsive UI/UX (support mobile, fullscreen, and pop-up views) +- [ ] Tab / Keyboard support \ No newline at end of file From 6ab3a3977faea9bb45fe804b26b7be9b81ca0248 Mon Sep 17 00:00:00 2001 From: Ariella Vu <20778143+digiwand@users.noreply.github.com> Date: Sat, 11 Nov 2023 00:28:54 +0300 Subject: [PATCH 02/10] docs: update "Contributing to React Components" --- docs/react.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/react.md b/docs/react.md index dbb0c02..6f11e76 100644 --- a/docs/react.md +++ b/docs/react.md @@ -4,13 +4,12 @@ **Components should aim to meet these requirements:** -- [ ] Written in TypeScript +- [ ] Use TypeScript - [ ] Include Storybook page - [ ] Include unit tests - [ ] Include relevant e2e tests - [ ] Avoid unnecessary re-renders -- [ ] Avoid overloading components -- [ ] Strive for SRP (Single responsibility principle) +- [ ] Strive for the single-responsibility principle (SRP) **Components should aim to support these features:** @@ -19,4 +18,4 @@ - [ ] Dynamic text length - [ ] Internationalization (i18n) translations including right-to-left languages - [ ] Responsive UI/UX (support mobile, fullscreen, and pop-up views) -- [ ] Tab / Keyboard support \ No newline at end of file +- [ ] Tab / Keyboard support From 9168601814054f67cdd3c121cd241b97e7acb832 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 15 Feb 2024 20:30:54 -0700 Subject: [PATCH 03/10] docs: update "Contributing to React Components" -> "React Guidelines" --- docs/react.md | 55 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 39 insertions(+), 16 deletions(-) diff --git a/docs/react.md b/docs/react.md index 6f11e76..510c55c 100644 --- a/docs/react.md +++ b/docs/react.md @@ -1,21 +1,44 @@ -# React +# React Guidelines -## Contributing to React Components +## Purpose -**Components should aim to meet these requirements:** +This document provides guidelines for contributing new components or updating existing components in our React codebases. -- [ ] Use TypeScript -- [ ] Include Storybook page -- [ ] Include unit tests -- [ ] Include relevant e2e tests -- [ ] Avoid unnecessary re-renders -- [ ] Strive for the single-responsibility principle (SRP) +## Guidelines for React Components -**Components should aim to support these features:** +The following guidelines are not strictly required, but are considered best practices that contribute to higher quality components. Not all guidelines will be applicable depending on the specific React repo's support. -- [ ] Accessibility -- [ ] Dark-mode -- [ ] Dynamic text length -- [ ] Internationalization (i18n) translations including right-to-left languages -- [ ] Responsive UI/UX (support mobile, fullscreen, and pop-up views) -- [ ] Tab / Keyboard support +If certain requirements cannot be met due to time constraints, legacy code, or other factors, contributors should use their best judgement on which requirements are most important or feasible to implement. + +### Component Structure + +- Follow consistent file structure +- Use functional components with hooks instead of class components +- Separate container and presentational components when appropriate +- Avoid large, complex components - break into reusable pieces + +### Component User Interface Features (If applicable) + +- Accessibility (A11y) +- Dark-mode +- Dynamic text length +- Internationalization (i18n) translations including right-to-left languages +- Responsive UI/UX (support mobile, fullscreen, and pop-up views) + +### Code Quality + +- Prefer TypeScript for static typing +- Follow linting rules and formatting guidelines +- Name props and state values descriptively +- Extract reusable logic into custom hooks +- Avoid unnecessary rerenders + +### Testing + +- Strive for full test coverage +- Write unit tests +- Write e2e tests (If applicable) + +### Documentation + +- Support Storybook pages for interactive component docs (If applicable) \ No newline at end of file From 589657f67d4775b5b92d7c47cbb0794775d6adbc Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 15 Feb 2024 20:39:40 -0700 Subject: [PATCH 04/10] doc: React Guidelines - "Please refer to the respective repository" --- docs/react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react.md b/docs/react.md index 510c55c..d927989 100644 --- a/docs/react.md +++ b/docs/react.md @@ -6,7 +6,7 @@ This document provides guidelines for contributing new components or updating ex ## Guidelines for React Components -The following guidelines are not strictly required, but are considered best practices that contribute to higher quality components. Not all guidelines will be applicable depending on the specific React repo's support. +The following guidelines are not strictly required, but are considered best practices that contribute to higher quality components. Not all guidelines will be applicable depending on the specific React repository's support. Please refer to the respective repository for additional guidelines and further details. If certain requirements cannot be met due to time constraints, legacy code, or other factors, contributors should use their best judgement on which requirements are most important or feasible to implement. From b7fd7639ab1f7e22d2652f853f5d3e40da06a185 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 15 Feb 2024 20:40:37 -0700 Subject: [PATCH 05/10] doc: add React Guidelines to README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 680f7d4..6e26d05 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ This is a living repository — nothing is set in stone! If you're member of Met - [Engineering Principles](./docs/engineering-principles.md) - [Guide to Pull Requests](./docs/pull-requests.md) - [JavaScript Guidelines](./docs/javascript.md) +- [React Guidelines](./docs/react.md) - [Secure Development Lifecycle Policy](./docs/sdlc.md) - [Secure Coding Guidelines](./docs/secure-coding-guidelines.md) - [TypeScript Guidelines](./docs/typescript.md) From 86a92d606ce8027ca694dd972a4d1ac548896325 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 15 Feb 2024 21:13:39 -0700 Subject: [PATCH 06/10] doc: React Guidelines add "Avoid unnecessary rerenders" examples --- docs/react.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/react.md b/docs/react.md index d927989..aab7d63 100644 --- a/docs/react.md +++ b/docs/react.md @@ -32,6 +32,11 @@ If certain requirements cannot be met due to time constraints, legacy code, or o - Name props and state values descriptively - Extract reusable logic into custom hooks - Avoid unnecessary rerenders + - Examples: + - Blog: [5 Ways to Optimize Your Functional React Components +](https://javascript.plainenglish.io/5-ways-to-optimize-your-functional-react-components-cb3cf6c7bd68) + - React Doc: https://react.dev/learn/render-and-commit#optimizing-performance + ### Testing From b279ef610e102e10865f22a063e286ff2288fe93 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 15 Feb 2024 21:35:33 -0700 Subject: [PATCH 07/10] fix:lint: react.md EOL / line updates --- docs/react.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/react.md b/docs/react.md index aab7d63..065702a 100644 --- a/docs/react.md +++ b/docs/react.md @@ -8,7 +8,7 @@ This document provides guidelines for contributing new components or updating ex The following guidelines are not strictly required, but are considered best practices that contribute to higher quality components. Not all guidelines will be applicable depending on the specific React repository's support. Please refer to the respective repository for additional guidelines and further details. -If certain requirements cannot be met due to time constraints, legacy code, or other factors, contributors should use their best judgement on which requirements are most important or feasible to implement. +If certain requirements cannot be met due to time constraints, legacy code, or other factors, contributors should use their best judgement on which requirements are most important or feasible to implement. ### Component Structure @@ -37,7 +37,6 @@ If certain requirements cannot be met due to time constraints, legacy code, or o ](https://javascript.plainenglish.io/5-ways-to-optimize-your-functional-react-components-cb3cf6c7bd68) - React Doc: https://react.dev/learn/render-and-commit#optimizing-performance - ### Testing - Strive for full test coverage @@ -46,4 +45,4 @@ If certain requirements cannot be met due to time constraints, legacy code, or o ### Documentation -- Support Storybook pages for interactive component docs (If applicable) \ No newline at end of file +- Support Storybook pages for interactive component docs (If applicable) From d5910c9df29df9408b441cd7089ead1022dde108 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 15 Feb 2024 21:39:19 -0700 Subject: [PATCH 08/10] fix:lint: yarn fix:lint - react.md bulletpoint /s --- docs/react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react.md b/docs/react.md index 065702a..fa66b3d 100644 --- a/docs/react.md +++ b/docs/react.md @@ -34,7 +34,7 @@ If certain requirements cannot be met due to time constraints, legacy code, or o - Avoid unnecessary rerenders - Examples: - Blog: [5 Ways to Optimize Your Functional React Components -](https://javascript.plainenglish.io/5-ways-to-optimize-your-functional-react-components-cb3cf6c7bd68) + ](https://javascript.plainenglish.io/5-ways-to-optimize-your-functional-react-components-cb3cf6c7bd68) - React Doc: https://react.dev/learn/render-and-commit#optimizing-performance ### Testing From bc41f20a9b24b0564f65646e74d678ba8ff71c43 Mon Sep 17 00:00:00 2001 From: Ariella Vu <20778143+digiwand@users.noreply.github.com> Date: Fri, 16 Feb 2024 16:30:12 -0700 Subject: [PATCH 09/10] react.md: add design-tokens w/ link Co-authored-by: George Marshall --- docs/react.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/react.md b/docs/react.md index fa66b3d..a7bc23b 100644 --- a/docs/react.md +++ b/docs/react.md @@ -24,6 +24,7 @@ If certain requirements cannot be met due to time constraints, legacy code, or o - Dynamic text length - Internationalization (i18n) translations including right-to-left languages - Responsive UI/UX (support mobile, fullscreen, and pop-up views) +- Use of [design tokens](https://github.com/MetaMask/design-tokens) for color and typography to ensure brand consistency and uphold accessibility standards ### Code Quality From a269d93d7c268889f3c9bb7cbcc88243185e6873 Mon Sep 17 00:00:00 2001 From: Ariella Vu <20778143+digiwand@users.noreply.github.com> Date: Fri, 16 Feb 2024 16:38:47 -0700 Subject: [PATCH 10/10] react.md: update Storybook guide Co-authored-by: George Marshall --- docs/react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react.md b/docs/react.md index a7bc23b..0f88db0 100644 --- a/docs/react.md +++ b/docs/react.md @@ -46,4 +46,4 @@ If certain requirements cannot be met due to time constraints, legacy code, or o ### Documentation -- Support Storybook pages for interactive component docs (If applicable) +- Implement Storybook for interactive documentation of UI components (If applicable). Storybook serves as a powerful tool for showcasing components in isolation, allowing developers and designers to interact with, test, and explore components in various states. This interactive environment not only enhances understanding and collaboration but also significantly streamlines future UI iterations.