chore: update internal docs

twilio-labs · Sep 21, 2023 · 8a42175 · 8a42175
1 parent 12cd5b9
commit 8a42175
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/internal-docs/engineering/ci.md b/internal-docs/engineering/ci.md
@@ -7,7 +7,7 @@
     - [Lint](#lint)
     - [Test React 17](#test-react-17)
     - [Test React 16](#test-react-16)
-    - [Prettier checks](#prettier-checks)
+    - [Code formatting checks](#code-formatting-checks)
     - [Categorize the PR using labels](#categorize-the-pr-using-labels)
     - [Danger checks](#danger-checks)
     - [Check package sizes](#check-package-sizes)
@@ -55,9 +55,12 @@ This job downloads the build cache of the monorepo, and then runs our Jest test
 
 This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 16.
 
-### Prettier checks
+### Code formatting checks
+
+This job downloads the build cache of the monorepo, and then runs [BiomeJS](https://biomejs.dev/) and [Prettier](https://prettier.io/). BiomeJS runs on all TS(X) / JS(X) / JSON(C) / CSS files. Prettier runs on everything else, such as HTML, MDX, etc...
+
+Biome was selected due to its tremendous performance improvements over prettier to run on our main codebase. It lacks complete support for all file extensions, so prettier is still used where needed on unsupported file types.
 
-This job downloads the build cache of the monorepo, and then runs Prettier.
 
 ### Categorize the PR using labels
 

diff --git a/internal-docs/engineering/technologies.md b/internal-docs/engineering/technologies.md
@@ -118,4 +118,4 @@ Our icons are converted from SVG to React components at compile time using our o
 
 ## Code Style
 
-We use eslint (https://eslint.org/) and Prettier ([https://prettier.io/](https://prettier.io/)) to maintain a consistent, readable code style throughout the entire monorepo.
+We use eslint (https://eslint.org/), [BiomeJS](https://biomejs.dev/), and Prettier ([https://prettier.io/](https://prettier.io/)) to maintain a consistent, readable code style throughout the entire monorepo.
diff --git a/internal-docs/engineering/testing.md b/internal-docs/engineering/testing.md
@@ -9,7 +9,7 @@
   - [End-to-end testing](#end-to-end-testing)
   - [Visual Regression Testing (VRT)](#visual-regression-testing-vrt)
   - [Linting](#linting)
-    - [PrettierJS](#prettierjs)
+    - [BiomeJS and PrettierJS](#biomejs-and-prettierjs)
     - [Commit lint](#commit-lint)
   - [Running tests/checks](#running-testschecks)
     - [Locally](#locally)
@@ -98,11 +98,11 @@ Linting should be performed:
 
 If your code fails to meet the ESLint rules, you will “break the build”. This will prevent you from merging a PR or publishing new packages on `main`.
 
-### PrettierJS
+### BiomeJS and PrettierJS
 
-Manually formatting code can be tiresome so we use [PrettierJS](https://prettier.io/) (Prettier) to do the leg work for you. Prettier is an opinionated code formatter which is configured to respect our ESLint rules.
+Manually formatting code can be tiresome so we use [BiomeJS](https://biomejs.dev/) and [PrettierJS](https://prettier.io/) (Prettier) to do the leg work for you. They are both an opinionated code formatter which is configured to respect our ESLint rules.
 
-It is configured to format your code when you commit it to git automatically. If using an IDE or Code Editor it is also recommended, if your IDE or editor supports it, to set it to “format on save”. The setting is often found in the user settings of your editor, and may require a Prettier plugin or extension.
+It is configured to format your code when you commit it to git automatically. If using an IDE or Code Editor it is also recommended, if your IDE or editor supports it, to set it to “format on save”. The setting is often found in the user settings of your editor, and may require a plugin or extension.
 
 ### Commit lint
 

diff --git a/packages/paste-design-tokens/tokens/global/data-visualization.yml b/packages/paste-design-tokens/tokens/global/data-visualization.yml
@@ -9,79 +9,79 @@ props:
   # 3:1 contrast ratio to color-background-body
   # 2:1 contrast ratio to neighboring colors
   color-data-visualization-1:
-    value: '{!palette-blue-80}'
+    value: "{!palette-blue-80}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
     data_visualization_contrast_pairing:
       - color-data-visualization-10
       - color-data-visualization-2
   color-data-visualization-2:
-    value: '{!palette-green-70}'
+    value: "{!palette-green-70}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
     data_visualization_contrast_pairing:
       - color-data-visualization-1
       - color-data-visualization-3
   color-data-visualization-3:
-    value: '{!palette-green-90}'
+    value: "{!palette-green-90}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
     data_visualization_contrast_pairing:
       - color-data-visualization-2
       - color-data-visualization-4
   color-data-visualization-4:
-    value: '{!palette-blue-50}'
+    value: "{!palette-blue-50}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
     data_visualization_contrast_pairing:
       - color-data-visualization-3
       - color-data-visualization-5
   color-data-visualization-5:
-    value: '{!palette-gray-80}'
+    value: "{!palette-gray-80}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
     data_visualization_contrast_pairing:
       - color-data-visualization-4
       - color-data-visualization-6
   color-data-visualization-6:
-    value: '{!palette-purple-40}'
+    value: "{!palette-purple-40}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
     data_visualization_contrast_pairing:
       - color-data-visualization-5
       - color-data-visualization-7
   color-data-visualization-7:
-    value: '{!palette-purple-60}'
+    value: "{!palette-purple-60}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
     data_visualization_contrast_pairing:
       - color-data-visualization-6
       - color-data-visualization-8
   color-data-visualization-8:
-    value: '{!palette-gray-50}'
+    value: "{!palette-gray-50}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
     data_visualization_contrast_pairing:
       - color-data-visualization-7
       - color-data-visualization-9
   color-data-visualization-9:
-    value: '{!palette-red-80}'
+    value: "{!palette-red-80}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
     data_visualization_contrast_pairing:
       - color-data-visualization-8
       - color-data-visualization-10
   color-data-visualization-10:
-    value: '{!palette-red-50}'
+    value: "{!palette-red-50}"
     comment: Color used for data visualizations. Must be used in a sequence.
     uicontrol_contrast_pairing:
       - color-background-body
Original file line number	Diff line number	Diff line change
Expand Up		@@ -118,4 +118,4 @@ Our icons are converted from SVG to React components at compile time using our o

		## Code Style

		We use eslint (https://eslint.org/) and Prettier ([https://prettier.io/](https://prettier.io/)) to maintain a consistent, readable code style throughout the entire monorepo.
		We use eslint (https://eslint.org/), [BiomeJS](https://biomejs.dev/), and Prettier ([https://prettier.io/](https://prettier.io/)) to maintain a consistent, readable code style throughout the entire monorepo.