[docs] Restrict docs markdown and demos to 80ch

docs/pages/blog/material-ui-v4-is-out.md

@@ -107,9 +107,7 @@ function MyComponent() {
   // Pass the props as the first argument of useStyles()
   const classes = useStyles(props);
 
-  return (
-    <div className={`${classes.foo} ${classes.bar}`} />
-  );
+  return <div className={`${classes.foo} ${classes.bar}`} />;
 }
 ```
 
@@ -257,8 +255,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
-    background:
-      'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
     border: 0,
     borderRadius: 3,
     boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',

docs/scripts/formattedTSDemos.js

@@ -31,10 +31,6 @@ const babelConfig = {
 
 const workspaceRoot = path.join(__dirname, '../../');
 
-const prettierConfig = prettier.resolveConfig.sync(process.cwd(), {
-  config: path.join(workspaceRoot, 'prettier.config.js'),
-});
-
 async function getFiles(root) {
   const files = [];
 
@@ -94,11 +90,18 @@ async function transpileFile(tsxPath, program, ignoreCache = false) {
     });
     const codeWithPropTypes = typescriptToProptypes.inject(propTypesAST, code);
 
-    const prettified = prettier.format(codeWithPropTypes, { ...prettierConfig, filepath: tsxPath });
+    const prettierConfig = prettier.resolveConfig.sync(jsPath, {
+      config: path.join(workspaceRoot, 'prettier.config.js'),
+    });
+    const prettierFormat = (jsSource) =>
+      prettier.format(jsSource, { ...prettierConfig, filepath: jsPath });
+
+    const prettified = prettierFormat(codeWithPropTypes);
     const formatted = fixBabelGeneratorIssues(prettified);
     const correctedLineEndings = fixLineEndings(source, formatted);
 
-    await fse.writeFile(jsPath, correctedLineEndings);
+    // removed blank lines change potential formatting
+    await fse.writeFile(jsPath, prettierFormat(correctedLineEndings));
     return TranspileResult.Success;
   } catch (err) {
     console.error('Something went wrong transpiling %s\n%s\n', tsxPath, err);

docs/src/pages/components/alert/IconAlerts.js

@@ -21,7 +21,11 @@ export default function IconAlerts() {
       <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
         This is a success alert — check it out!
       </Alert>
-      <Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize="inherit" /> }}>
+      <Alert
+        iconMapping={{
+          success: <CheckCircleOutlineIcon fontSize="inherit" />,
+        }}
+      >
         This is a success alert — check it out!
       </Alert>
       <Alert icon={false} severity="success">

docs/src/pages/components/alert/IconAlerts.tsx

@@ -23,7 +23,11 @@ export default function IconAlerts() {
       <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
         This is a success alert — check it out!
       </Alert>
-      <Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize="inherit" /> }}>
+      <Alert
+        iconMapping={{
+          success: <CheckCircleOutlineIcon fontSize="inherit" />,
+        }}
+      >
         This is a success alert — check it out!
       </Alert>
       <Alert icon={false} severity="success">

docs/src/pages/components/app-bar/BackToTop.js

@@ -33,10 +33,15 @@ function ScrollTop(props) {
   });
 
   const handleClick = (event) => {
-    const anchor = (event.target.ownerDocument || document).querySelector('#back-to-top-anchor');
+    const anchor = (event.target.ownerDocument || document).querySelector(
+      '#back-to-top-anchor',
+    );
 
     if (anchor) {
-      anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      anchor.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
     }
   };
 

docs/src/pages/components/app-bar/BackToTop.tsx

@@ -43,12 +43,15 @@ function ScrollTop(props: Props) {
   });
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    const anchor = ((event.target as HTMLDivElement).ownerDocument || document).querySelector(
-      '#back-to-top-anchor',
-    );
+    const anchor = (
+      (event.target as HTMLDivElement).ownerDocument || document
+    ).querySelector('#back-to-top-anchor');
 
     if (anchor) {
-      anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      anchor.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
     }
   };
 

docs/src/pages/components/app-bar/BottomAppBar.js

@@ -22,7 +22,8 @@ const messages = [
   {
     id: 1,
     primary: 'Brunch this week?',
-    secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat",
+    secondary:
+      "I'll be in the neighbourhood this week. Let's grab a bite to eat",
     person: '/static/images/avatar/5.jpg',
   },
   {
@@ -35,7 +36,8 @@ const messages = [
   {
     id: 3,
     primary: 'Recipe to try',
-    secondary: 'I am try out this new BBQ recipe, I think this might be amazing',
+    secondary:
+      'I am try out this new BBQ recipe, I think this might be amazing',
     person: '/static/images/avatar/2.jpg',
   },
   {
@@ -47,7 +49,8 @@ const messages = [
   {
     id: 5,
     primary: "Doctor's Appointment",
-    secondary: 'My appointment for the doctor was rescheduled for next Saturday.',
+    secondary:
+      'My appointment for the doctor was rescheduled for next Saturday.',
     person: '/static/images/avatar/4.jpg',
   },
   {
@@ -110,8 +113,18 @@ export default function BottomAppBar() {
         <List className={classes.list}>
           {messages.map(({ id, primary, secondary, person }) => (
             <React.Fragment key={id}>
-              {id === 1 && <ListSubheader className={classes.subheader}>Today</ListSubheader>}
-              {id === 3 && <ListSubheader className={classes.subheader}>Yesterday</ListSubheader>}
+              {id === 1 && (
+                <ListSubheader className={classes.subheader}>
+                  Today
+                </ListSubheader>
+              )}
+
+              {id === 3 && (
+                <ListSubheader className={classes.subheader}>
+                  Yesterday
+                </ListSubheader>
+              )}
+
               <ListItem button>
                 <ListItemAvatar>
                   <Avatar alt="Profile Picture" src={person} />

docs/src/pages/components/app-bar/BottomAppBar.tsx

@@ -22,7 +22,8 @@ const messages = [
   {
     id: 1,
     primary: 'Brunch this week?',
-    secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat",
+    secondary:
+      "I'll be in the neighbourhood this week. Let's grab a bite to eat",
     person: '/static/images/avatar/5.jpg',
   },
   {
@@ -35,7 +36,8 @@ const messages = [
   {
     id: 3,
     primary: 'Recipe to try',
-    secondary: 'I am try out this new BBQ recipe, I think this might be amazing',
+    secondary:
+      'I am try out this new BBQ recipe, I think this might be amazing',
     person: '/static/images/avatar/2.jpg',
   },
   {
@@ -47,7 +49,8 @@ const messages = [
   {
     id: 5,
     primary: "Doctor's Appointment",
-    secondary: 'My appointment for the doctor was rescheduled for next Saturday.',
+    secondary:
+      'My appointment for the doctor was rescheduled for next Saturday.',
     person: '/static/images/avatar/4.jpg',
   },
   {
@@ -112,8 +115,16 @@ export default function BottomAppBar() {
         <List className={classes.list}>
           {messages.map(({ id, primary, secondary, person }) => (
             <React.Fragment key={id}>
-              {id === 1 && <ListSubheader className={classes.subheader}>Today</ListSubheader>}
-              {id === 3 && <ListSubheader className={classes.subheader}>Yesterday</ListSubheader>}
+              {id === 1 && (
+                <ListSubheader className={classes.subheader}>
+                  Today
+                </ListSubheader>
+              )}
+              {id === 3 && (
+                <ListSubheader className={classes.subheader}>
+                  Yesterday
+                </ListSubheader>
+              )}
               <ListItem button>
                 <ListItemAvatar>
                   <Avatar alt="Profile Picture" src={person} />

docs/src/pages/components/app-bar/ButtonAppBar.js

@@ -26,7 +26,12 @@ export default function ButtonAppBar() {
     <div className={classes.root}>
       <AppBar position="static">
         <Toolbar>
-          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" className={classes.title}>

docs/src/pages/components/app-bar/ButtonAppBar.tsx

@@ -28,7 +28,12 @@ export default function ButtonAppBar() {
     <div className={classes.root}>
       <AppBar position="static">
         <Toolbar>
-          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" className={classes.title}>

docs/src/pages/components/app-bar/DenseAppBar.js

@@ -22,7 +22,12 @@ export default function DenseAppBar() {
     <div className={classes.root}>
       <AppBar position="static">
         <Toolbar variant="dense">
-          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" color="inherit">

docs/src/pages/components/app-bar/DenseAppBar.tsx

@@ -24,7 +24,12 @@ export default function DenseAppBar() {
     <div className={classes.root}>
       <AppBar position="static">
         <Toolbar variant="dense">
-          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" color="inherit">

docs/src/pages/components/app-bar/HideAppBar.js

@@ -14,7 +14,9 @@ function HideOnScroll(props) {
   // Note that you normally won't need to set the window ref as useScrollTrigger
   // will default to window.
   // This is only being set here because the demo is in an iframe.
-  const trigger = useScrollTrigger({ target: window ? window() : undefined });
+  const trigger = useScrollTrigger({
+    target: window ? window() : undefined,
+  });
 
   return (
     <Slide appear={false} direction="down" in={!trigger}>

docs/src/pages/components/app-bar/HideAppBar.tsx

@@ -22,7 +22,9 @@ function HideOnScroll(props: Props) {
   // Note that you normally won't need to set the window ref as useScrollTrigger
   // will default to window.
   // This is only being set here because the demo is in an iframe.
-  const trigger = useScrollTrigger({ target: window ? window() : undefined });
+  const trigger = useScrollTrigger({
+    target: window ? window() : undefined,
+  });
 
   return (
     <Slide appear={false} direction="down" in={!trigger}>

docs/src/pages/components/app-bar/MenuAppBar.js

@@ -46,13 +46,24 @@ export default function MenuAppBar() {
     <div className={classes.root}>
       <FormGroup>
         <FormControlLabel
-          control={<Switch checked={auth} onChange={handleChange} aria-label="login switch" />}
+          control={
+            <Switch
+              checked={auth}
+              onChange={handleChange}
+              aria-label="login switch"
+            />
+          }
           label={auth ? 'Logout' : 'Login'}
         />
       </FormGroup>
       <AppBar position="static">
         <Toolbar>
-          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" className={classes.title}>

docs/src/pages/components/app-bar/MenuAppBar.tsx

@@ -48,13 +48,24 @@ export default function MenuAppBar() {
     <div className={classes.root}>
       <FormGroup>
         <FormControlLabel
-          control={<Switch checked={auth} onChange={handleChange} aria-label="login switch" />}
+          control={
+            <Switch
+              checked={auth}
+              onChange={handleChange}
+              aria-label="login switch"
+            />
+          }
           label={auth ? 'Logout' : 'Login'}
         />
       </FormGroup>
       <AppBar position="static">
         <Toolbar>
-          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" className={classes.title}>

docs/src/pages/components/app-bar/PrimarySearchAppBar.js

@@ -108,10 +108,16 @@ export default function PrimarySearchAppBar() {
   const renderMenu = (
     <Menu
       anchorEl={anchorEl}
-      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
       id={menuId}
       keepMounted
-      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
       open={isMenuOpen}
       onClose={handleMenuClose}
     >
@@ -124,10 +130,16 @@ export default function PrimarySearchAppBar() {
   const renderMobileMenu = (
     <Menu
       anchorEl={mobileMoreAnchorEl}
-      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
       id={mobileMenuId}
       keepMounted
-      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
       open={isMobileMenuOpen}
       onClose={handleMobileMenuClose}
     >