Add prettier config (mui#116)

Co-authored-by: Olivier Tassinari <[email protected]>
michelengelen · Aug 8, 2023 · f17f449 · f17f449
1 parent 7cf9c99
commit f17f449
Show file tree

Hide file tree

Showing 24 changed files with 2,797 additions and 406 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+/tools-public/toolpad/**/*.yml
+/tools-public/toolpad/.generated/
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
-build/
+/tools-public/toolpad/**/*.yml
+/tools-public/toolpad/.generated/
diff --git a/README.md b/README.md
@@ -4,6 +4,7 @@ Mono-repository for the MUI organization with code that can be public.
 See https://github.com/mui/mui-private for code that needs to be private.
 
 ## Link to the app
+
 ### [/tools-public/](https://tools-public.mui.com/)
 
 Internal public Toolpad apps that run the operations of MUI, built using https://github.com/mui/mui-toolpad.
diff --git a/contributor-dashboard-legacy/src/components/ForkRibbon.js b/contributor-dashboard-legacy/src/components/ForkRibbon.js
@@ -3,82 +3,82 @@ import styled from "@emotion/styled";
 // port of https://github.com/simonwhitaker/github-fork-ribbon-css/blob/gh-pages/gh-fork-ribbon.css
 // for @emotion/styled
 const Ribbon = styled.a`
-  width: 12.1em;
-  height: 12.1em;
-  position: absolute;
-  overflow: hidden;
-  top: 0;
-  right: 0;
-  z-index: 9999;
-  pointer-events: none;
-  font-size: 13px;
-  text-decoration: none;
-  text-indent: -999999px;
-
-  &:hover,
-  &:active {
-    background-color: rgba(0, 0, 0, 0);
-  }
-
-  &:before,
-  &:after {
-    position: absolute;
-    display: block;
-    width: 15.38em;
-    height: 1.54em;
-
-    top: 3.23em;
-    right: -3.23em;
-
-    box-sizing: content-box;
-
-    transform: rotate(45deg);
-  }
-
-  &:before {
-    content: "";
-
-    /* Add a bit of padding to give some substance outside the "stitching" */
-    padding: 0.38em 0;
-
-    /* Set the base colour */
-    background-color: #333;
-
-    /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.15)
-    );
-
-    /* Add a drop shadow */
-    box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
-
-    pointer-events: auto;
-  }
-
-  &:after {
-    content: "${(props) => props.children}";
-
-    /* Set the text properties */
-    color: #fff;
-    font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
-    line-height: 1.54em;
-    text-decoration: none;
-    text-shadow: 0 -0.08em rgba(0, 0, 0, 0.5);
-    text-align: center;
-    text-indent: 0;
-
-    /* Set the layout properties */
-    padding: 0.15em 0;
-    margin: 0.15em 0;
-
-    /* Add "stitching" effect */
-    border-width: 0.08em 0;
-    border-style: dotted;
-    border-color: #fff;
-    border-color: rgba(255, 255, 255, 0.7);
-  }
+	width: 12.1em;
+	height: 12.1em;
+	position: absolute;
+	overflow: hidden;
+	top: 0;
+	right: 0;
+	z-index: 9999;
+	pointer-events: none;
+	font-size: 13px;
+	text-decoration: none;
+	text-indent: -999999px;
+
+	&:hover,
+	&:active {
+		background-color: rgba(0, 0, 0, 0);
+	}
+
+	&:before,
+	&:after {
+		position: absolute;
+		display: block;
+		width: 15.38em;
+		height: 1.54em;
+
+		top: 3.23em;
+		right: -3.23em;
+
+		box-sizing: content-box;
+
+		transform: rotate(45deg);
+	}
+
+	&:before {
+		content: "";
+
+		/* Add a bit of padding to give some substance outside the "stitching" */
+		padding: 0.38em 0;
+
+		/* Set the base colour */
+		background-color: #333;
+
+		/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+		background-image: linear-gradient(
+			to bottom,
+			rgba(0, 0, 0, 0),
+			rgba(0, 0, 0, 0.15)
+		);
+
+		/* Add a drop shadow */
+		box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
+
+		pointer-events: auto;
+	}
+
+	&:after {
+		content: "${(props) => props.children}";
+
+		/* Set the text properties */
+		color: #fff;
+		font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
+		line-height: 1.54em;
+		text-decoration: none;
+		text-shadow: 0 -0.08em rgba(0, 0, 0, 0.5);
+		text-align: center;
+		text-indent: 0;
+
+		/* Set the layout properties */
+		padding: 0.15em 0;
+		margin: 0.15em 0;
+
+		/* Add "stitching" effect */
+		border-width: 0.08em 0;
+		border-style: dotted;
+		border-color: #fff;
+		border-color: rgba(255, 255, 255, 0.7);
+	}
 `;
 
 export default function ForkRibbon() {

diff --git a/contributor-dashboard-legacy/src/pages/SizeComparison.tsx b/contributor-dashboard-legacy/src/pages/SizeComparison.tsx
@@ -451,13 +451,8 @@ function ComparisonErrorFallback({ prNumber }: { prNumber: number }) {
 }
 
 export default function SizeComparison() {
-	const {
-		buildId,
-		baseRef,
-		baseCommit,
-		circleCIBuildNumber,
-		prNumber,
-	} = useComparisonParams();
+	const { buildId, baseRef, baseCommit, circleCIBuildNumber, prNumber } =
+		useComparisonParams();
 
 	return (
 		<Fragment>

diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "mui-public",
+  "private": true,
+  "scripts": {
+    "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
+    "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
+    "deduplicate": "node scripts/deduplicate.mjs",
+    "prettier": "pretty-quick --ignore-path .eslintignore",
+    "prettier:all": "prettier --write . --ignore-path .eslintignore"
+  },
+  "devDependencies": {
+    "@mui/monorepo": "https://github.com/mui/material-ui.git#master",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@typescript-eslint/parser": "^4.11.1",
+    "babel-eslint": "^9.0.0",
+    "eslint": "^7.4.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-mocha": "^9.0.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "prettier": "^2.0.5",
+    "pretty-quick": "^3.1.3",
+    "typescript": "^4.6.4",
+    "yarn-deduplicate": "^6.0.2"
+  },
+  "dependencies": {},
+  "workspaces": {
+    "packages": []
+  }
+}
diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,6 @@
+const baseline = require('@mui/monorepo/prettier.config');
+
+module.exports = {
+  ...baseline,
+  overrides: [...baseline.overrides],
+};
diff --git a/tools-public/toolpad/components/Chart.tsx b/tools-public/toolpad/components/Chart.tsx
@@ -1,5 +1,5 @@
-import * as React from "react";
-import { createComponent } from "@mui/toolpad/browser";
+import * as React from 'react';
+import { createComponent } from '@mui/toolpad/browser';
 import {
   ResponsiveContainer,
   LineChart,
@@ -9,20 +9,20 @@ import {
   CartesianGrid,
   Tooltip,
   Legend,
-} from "recharts";
-import CircularProgress from "@mui/material/CircularProgress";
+} from 'recharts';
+import CircularProgress from '@mui/material/CircularProgress';
 
 // Copied from https://wpdatatables.com/data-visualization-color-palette/
 const COLORS = [
-  "#87bc45",
-  "#27aeef",
-  "#ea5545",
-  "#f46a9b",
-  "#ef9b20",
-  "#edbf33",
-  "#ede15b",
-  "#bdcf32",
-  "#b33dc6",
+  '#87bc45',
+  '#27aeef',
+  '#ea5545',
+  '#f46a9b',
+  '#ef9b20',
+  '#edbf33',
+  '#ede15b',
+  '#bdcf32',
+  '#b33dc6',
 ];
 
 export interface PieChartProps {
@@ -33,7 +33,7 @@ export interface PieChartProps {
 
 function ChartExport({ loading, data, series }: PieChartProps) {
   return (
-    <div style={{ position: "relative", width: "100%", height: 300 }}>
+    <div style={{ position: 'relative', width: '100%', height: 300 }}>
       <ResponsiveContainer>
         <LineChart data={data}>
           <CartesianGrid strokeDasharray="3 3" />
@@ -54,11 +54,11 @@ function ChartExport({ loading, data, series }: PieChartProps) {
       {!data || loading ? (
         <div
           style={{
-            position: "absolute",
-            inset: "0 0 0 0",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            position: 'absolute',
+            inset: '0 0 0 0',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
         >
           <CircularProgress />
@@ -69,16 +69,16 @@ function ChartExport({ loading, data, series }: PieChartProps) {
 }
 
 export default createComponent(ChartExport, {
-  loadingProp: "loading",
-  loadingPropSource: ["data", "series"],
+  loadingProp: 'loading',
+  loadingPropSource: ['data', 'series'],
   argTypes: {
     data: {
-      type: "array",
+      type: 'array',
       default: [],
     },
     series: {
-      type: "array",
-      default: ["pr_community_count", "pr_maintainers_count"],
+      type: 'array',
+      default: ['pr_community_count', 'pr_maintainers_count'],
     },
   },
 });
diff --git a/tools-public/toolpad/components/Diff.tsx b/tools-public/toolpad/components/Diff.tsx
@@ -1,13 +1,13 @@
-import * as React from "react";
-import { createComponent } from "@mui/toolpad/browser";
+import * as React from 'react';
+import { createComponent } from '@mui/toolpad/browser';
 
 const bytesFormat = new Intl.NumberFormat(undefined, {
-  style: "unit",
+  style: 'unit',
   maximumSignificantDigits: 3,
-  notation: "compact",
-  unit: "byte",
-  unitDisplay: "narrow",
-  signDisplay: "always",
+  notation: 'compact',
+  unit: 'byte',
+  unitDisplay: 'narrow',
+  signDisplay: 'always',
 });
 
 function prettyBytes(value: number) {
@@ -20,10 +20,10 @@ export interface ParsedProps {
 
 function formatDiff(value: number): string {
   if (!value) {
-    return "";
+    return '';
   }
 
-  const trendIcon = value < 0 ? "▼" : "🔺";
+  const trendIcon = value < 0 ? '▼' : '🔺';
 
   return `${prettyBytes(value)} ${trendIcon}`;
 }
@@ -35,7 +35,7 @@ function Diff({ value }: ParsedProps) {
 export default createComponent(Diff, {
   argTypes: {
     value: {
-      type: "string",
+      type: 'string',
     },
   },
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/tools-public/toolpad/*/.yml
		/tools-public/toolpad/.generated/