tools: run prettier on mdx (#92308)

Execute and run prettier on mdx files.

Author: JonasBa

.pre-commit-config.yaml

@@ -121,9 +121,9 @@ repos:
         entry: ./node_modules/.bin/stylelint --quiet
 
       - id: prettier
-        name: prettier (yaml, markdown, ts, tsx, js, jsx, css)
+        name: prettier (yaml, ts, tsx, js, jsx, css, mdx, markdown)
         language: system
-        types_or: [yaml, markdown, ts, tsx, javascript, jsx, css]
+        types_or: [yaml, ts, tsx, javascript, jsx, css, mdx, markdown]
         entry: ./node_modules/.bin/prettier --log-level=error --write
         # https://pre-commit.com/#regular-expressions
         exclude: |

package.json

@@ -257,10 +257,10 @@
     "lint": "yarn lint:prettier && yarn lint:js && yarn lint:css",
     "lint:js": "eslint",
     "lint:css": "stylelint '**/*.[jt]sx'",
-    "lint:prettier": "prettier \"**/*.md\" \"**/*.yaml\" \"**/*.[jt]s(x)?\" --check --log-level=error",
+    "lint:prettier": "prettier \"**/*.md(x)?\" \"**/*.yaml\" \"**/*.[jt]s(x)?\" --check --log-level=error",
     "fix": "yarn fix:prettier && yarn fix:eslint",
     "fix:eslint": "eslint --fix",
-    "fix:prettier": "prettier \"**/*.md\" \"**/*.yaml\" \"**/*.[jt]s(x)?\" --write --log-level=error",
+    "fix:prettier": "prettier \"**/*.md(x)?\" \"**/*.yaml\" \"**/*.[jt]s(x)?\" --write --log-level=error",
     "dev": "(yarn check --verify-tree || yarn install --check-files) && sentry devserver",
     "dev-ui": "yarn dev-ui-rspack",
     "dev-ui-webpack": "SENTRY_UI_DEV_ONLY=1 SENTRY_WEBPACK_PROXY_PORT=7999 SENTRY_UI_HOT_RELOAD=1 webpack serve",

static/app/styles/colors.mdx

@@ -77,9 +77,9 @@ export const SideBySide = styled('ul')`
     margin-bottom: 0;
   }
 
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: ${space(2)};
+display: grid;
+grid-template-columns: 1fr 1fr;
+gap: ${space(2)};
 `;
 
 export const PalettePanel = styled(Panel)`
@@ -90,18 +90,18 @@ export const PalettePanelItem = styled(PanelItem)`
   flex-direction: column;
   gap: ${space(0.5)};
 
-  &:first-child {
-    border-radius: ${p => p.theme.borderRadius} ${p => p.theme.borderRadius} 0 0;
-  }
-  &:last-child {
-    border-radius: 0 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius};
-  }
-  &:first-child:last-child {
-    border-radius: ${p => p.theme.borderRadius};
-  }
+&:first-child {
+border-radius: ${p => p.theme.borderRadius} ${p => p.theme.borderRadius} 0 0;
+}
+&:last-child {
+border-radius: 0 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius};
+}
+&:first-child:last-child {
+border-radius: ${p => p.theme.borderRadius};
+}
 
-  background: ${p => p.theme[p.color]};
-  color: ${p => p.theme[p.text]};
+background: ${p => p.theme[p.color]};
+color: ${p => p.theme[p.text]};
 `;
 
 export const ExampleImg = styled('img')`
@@ -147,41 +147,41 @@ export const ExampleCardGrid = styled('figcaption')`
 export const ExampleCard = ({imgSrc, text, isPositive}) => (
   <figure>
     <ExampleImg src={imgSrc} />
-      <ExampleCardGrid>
-        {isPositive ? <PositiveLabel /> : <NegativeLabel />}
-        <span>{text}</span>
-      </ExampleCardGrid>
-    </figure>
+    <ExampleCardGrid>
+      {isPositive ? <PositiveLabel /> : <NegativeLabel />}
+      <span>{text}</span>
+    </ExampleCardGrid>
+  </figure>
 );
 
 export const ColorPalette = ({name, palette}) => {
   const theme = useTheme();
 
-  return (
-    <SideBySide>
-      {palette.map((section, i) => {
-        return (
-          <li key={`${name}-${i}`}>
-            <PalettePanel typeof="ul">
-              {section.map((color, index) => {
-                return (
-                  <PalettePanelItem
-                    key={`${name}-${color.color}-${index}`}
-                    color={color.color}
-                    text={color.text}
-                  >
-                    <strong>{color.color}</strong>
-                    {theme[color.color]}
-                  </PalettePanelItem>
-                );
-              })}
-            </PalettePanel>
-          </li>
-        );
-      })}
-    </SideBySide>
-  );
-}
+return (
+
+<SideBySide>
+  {palette.map((section, i) => {
+    return (
+      <li key={`${name}-${i}`}>
+        <PalettePanel typeof="ul">
+          {section.map((color, index) => {
+            return (
+              <PalettePanelItem
+                key={`${name}-${color.color}-${index}`}
+                color={color.color}
+                text={color.text}
+              >
+                <strong>{color.color}</strong>
+                {theme[color.color]}
+              </PalettePanelItem>
+            );
+          })}
+        </PalettePanel>
+      </li>
+    );
+  })}
+</SideBySide>
+); }
 
 # Colors
 
@@ -199,7 +199,7 @@ Here are the recommended use cases:
 - **Gray 400:** body text, input values & labels.
 - **Gray 300:** input placeholders, inactive/disabled inputs and buttons, chart labels, supplemental and non-essential text
 - **Gray 200:** borders around large elements (cards, panels, dialogs, tables).
-- **Gray 100:** dividers and borders around small elements (buttons, form inputs). */}
+- **Gray 100:** dividers and borders around small elements (buttons, form inputs). \*/}
 
 <Storybook.ThemeToggle>
   <ColorPalette name="grays" palette={GRAY_PALETTES} />