[docs] Migrate batch of demos to hooks/typescript (#16334)

* customization/themes/CustomStyles

* customization/themes/ThemeNesting

* customization/themes/ThemeNestingExtend

* customization/themes/WithTheme

* customization/typography/FontSizeTheme

* guides/composition/Composition

* guides/right-to-left/Direction

* styles/advanced/GlobalClassName

* styles/advanced/GlobalCss

* styles/advanced/HybridGlobalCss

* styles/advanced/ThemeNesting

* styles/advanced/Theming

* styles/advanced/UseTheme

* styles/basics/HigherOrderComponent

* styles/basics/Hook

* styles/basics/StressTest

* system/display/Block

* system/display/Hiding

* system/display/Inline

* system/display/Print

* system/display/Overflow

* system/display/TextOverflow

* system/display/Visibility

* system/display/WhiteSpace

* system/flexbox/AlignContent

* system/flexbox/AlignItems

* system/flexbox/AlignSelf

* system/flexbox/Display

* system/flexbox/FlexDirection

* system/flexbox/FlexGrow

* system/flexbox/FlexShrink

* system/flexbox/FlexWrap

* system/flexbox/JustifyContent

* system/flexbox/Order

* system/palette/BackgroundColor

* system/palette/Color

* system/positions/ZIndex

* system/shadows/Demo

* system/sizing/Height

* system/sizing/Values

* system/sizing/Width

* system/spacing/Demo

* system/spacing/HorizontalCentering

* customization/themes/CustomStyles - Alias to AugmentedTheme

* Prefer ThemeProvider<ThemeType>

docs/src/pages/customization/themes/CustomStyles.js

@@ -1,49 +1,43 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Checkbox from '@material-ui/core/Checkbox';
-import { createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import { orange } from '@material-ui/core/colors';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     color: theme.status.danger,
     '&$checked': {
       color: theme.status.danger,
     },
   },
   checked: {},
-});
-
-let CustomCheckbox = props => (
-  <Checkbox
-    defaultChecked
-    classes={{
-      root: props.classes.root,
-      checked: props.classes.checked,
-    }}
-  />
-);
+}));
 
-CustomCheckbox.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
+function CustomCheckbox() {
+  const classes = useStyles();
 
-CustomCheckbox = withStyles(styles)(CustomCheckbox);
+  return (
+    <Checkbox
+      defaultChecked
+      classes={{
+        root: classes.root,
+        checked: classes.checked,
+      }}
+    />
+  );
+}
 
 const theme = createMuiTheme({
   status: {
-    // My business variables
     danger: orange[500],
   },
 });
 
-function CustomStyles() {
+export default function CustomStyles() {
   return (
     <ThemeProvider theme={theme}>
       <CustomCheckbox />
     </ThemeProvider>
   );
 }
-
-export default CustomStyles;

docs/src/pages/customization/themes/CustomStyles.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import {
+  createMuiTheme,
+  makeStyles,
+  createStyles,
+  Theme as AugmentedTheme,
+} from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+import { orange } from '@material-ui/core/colors';
+
+declare module '@material-ui/core/styles/createMuiTheme' {
+  interface Theme {
+    status: {
+      danger: string;
+    };
+  }
+  // allow configuration using `createMuiTheme`
+  interface ThemeOptions {
+    status?: {
+      danger?: string;
+    };
+  }
+}
+
+const useStyles = makeStyles((theme: AugmentedTheme) =>
+  createStyles({
+    root: {
+      color: theme.status.danger,
+      '&$checked': {
+        color: theme.status.danger,
+      },
+    },
+    checked: {},
+  }),
+);
+
+function CustomCheckbox() {
+  const classes = useStyles();
+
+  return (
+    <Checkbox
+      defaultChecked
+      classes={{
+        root: classes.root,
+        checked: classes.checked,
+      }}
+    />
+  );
+}
+
+const theme = createMuiTheme({
+  status: {
+    danger: orange[500],
+  },
+});
+
+export default function CustomStyles() {
+  return (
+    <ThemeProvider theme={theme}>
+      <CustomCheckbox />
+    </ThemeProvider>
+  );
+}

docs/src/pages/customization/themes/ThemeNesting.js

@@ -20,7 +20,7 @@ const innerTheme = createMuiTheme({
   },
 });
 
-function ThemeNesting() {
+export default function ThemeNesting() {
   return (
     <ThemeProvider theme={outerTheme}>
       <Checkbox defaultChecked />
@@ -30,5 +30,3 @@ function ThemeNesting() {
     </ThemeProvider>
   );
 }
-
-export default ThemeNesting;

docs/src/pages/customization/themes/ThemeNesting.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+import Checkbox from '@material-ui/core/Checkbox';
+import { green, orange } from '@material-ui/core/colors';
+
+const outerTheme = createMuiTheme({
+  palette: {
+    secondary: {
+      main: orange[500],
+    },
+  },
+});
+
+const innerTheme = createMuiTheme({
+  palette: {
+    secondary: {
+      main: green[500],
+    },
+  },
+});
+
+export default function ThemeNesting() {
+  return (
+    <ThemeProvider theme={outerTheme}>
+      <Checkbox defaultChecked />
+      <ThemeProvider theme={innerTheme}>
+        <Checkbox defaultChecked />
+      </ThemeProvider>
+    </ThemeProvider>
+  );
+}

docs/src/pages/customization/themes/ThemeNestingExtend.js

@@ -12,7 +12,7 @@ const outerTheme = createMuiTheme({
   },
 });
 
-function ThemeNestingExtend() {
+export default function ThemeNestingExtend() {
   return (
     <ThemeProvider theme={outerTheme}>
       <Checkbox defaultChecked />
@@ -35,5 +35,3 @@ function ThemeNestingExtend() {
     </ThemeProvider>
   );
 }
-
-export default ThemeNestingExtend;

docs/src/pages/customization/themes/ThemeNestingExtend.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { createMuiTheme, Theme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+import Checkbox from '@material-ui/core/Checkbox';
+import { green, orange } from '@material-ui/core/colors';
+
+const outerTheme = createMuiTheme({
+  palette: {
+    secondary: {
+      main: orange[500],
+    },
+  },
+});
+
+export default function ThemeNestingExtend() {
+  return (
+    <ThemeProvider theme={outerTheme}>
+      <Checkbox defaultChecked />
+      <ThemeProvider
+        theme={(theme: Theme) =>
+          createMuiTheme({
+            ...theme,
+            palette: {
+              ...theme.palette,
+              primary: {
+                main: green[500],
+              },
+            },
+          })
+        }
+      >
+        <Checkbox defaultChecked color="primary" />
+        <Checkbox defaultChecked color="secondary" />
+      </ThemeProvider>
+    </ThemeProvider>
+  );
+}

docs/src/pages/customization/themes/WithTheme.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@material-ui/core/Typography';
+import { withTheme, Theme } from '@material-ui/core/styles';
+
+function WithTheme(props: { theme: Theme }) {
+  const { theme } = props;
+  const primaryText = theme.palette.text.primary;
+  const primaryColor = theme.palette.primary.main;
+
+  const styles = {
+    primaryText: {
+      backgroundColor: theme.palette.background.default,
+      padding: theme.spacing(1, 2),
+      color: primaryText,
+    },
+    primaryColor: {
+      backgroundColor: primaryColor,
+      padding: theme.spacing(1, 2),
+      color: theme.palette.common.white,
+    },
+  };
+
+  return (
+    <div style={{ width: 300 }}>
+      <Typography style={styles.primaryColor}>{`Primary color ${primaryColor}`}</Typography>
+      <Typography style={styles.primaryText}>{`Primary text ${primaryText}`}</Typography>
+    </div>
+  );
+}
+
+(WithTheme as any).propTypes = {
+  theme: PropTypes.object.isRequired,
+};
+
+export default withTheme(WithTheme); // Let's get the theme as a property

docs/src/pages/customization/typography/FontSizeTheme.js

@@ -10,12 +10,10 @@ const theme = createMuiTheme({
   },
 });
 
-function FontSizeTheme() {
+export default function FontSizeTheme() {
   return (
     <ThemeProvider theme={theme}>
       <Typography>body1</Typography>
     </ThemeProvider>
   );
 }
-
-export default FontSizeTheme;

docs/src/pages/customization/typography/FontSizeTheme.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+import Typography from '@material-ui/core/Typography';
+
+const theme = createMuiTheme({
+  typography: {
+    // Tell Material-UI what the font-size on the html element is.
+    htmlFontSize: 10,
+  },
+});
+
+export default function FontSizeTheme() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Typography>body1</Typography>
+    </ThemeProvider>
+  );
+}

docs/src/pages/guides/composition/Composition.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import Icon, { IconProps } from '@material-ui/core/Icon';
+
+const WrappedIcon = (props: IconProps) => <Icon {...props} />;
+WrappedIcon.muiName = 'Icon';
+
+export default function Composition() {
+  return (
+    <div>
+      <IconButton>
+        <Icon>alarm</Icon>
+      </IconButton>
+      <IconButton>
+        <WrappedIcon>alarm</WrappedIcon>
+      </IconButton>
+    </div>
+  );
+}

docs/src/pages/guides/right-to-left/Direction.js

@@ -7,7 +7,7 @@ const theme = createMuiTheme({
   direction: 'rtl', // Both here and <body dir="rtl">
 });
 
-function Direction() {
+export default function Direction() {
   return (
     <ThemeProvider theme={theme}>
       <div dir="rtl">
@@ -17,5 +17,3 @@ function Direction() {
     </ThemeProvider>
   );
 }
-
-export default Direction;

docs/src/pages/guides/right-to-left/Direction.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+import TextField from '@material-ui/core/TextField';
+
+const theme = createMuiTheme({
+  direction: 'rtl', // Both here and <body dir="rtl">
+});
+
+export default function Direction() {
+  return (
+    <ThemeProvider theme={theme}>
+      <div dir="rtl">
+        <TextField placeholder="Name" />
+        <input type="text" placeholder="Name" />
+      </div>
+    </ThemeProvider>
+  );
+}

docs/src/pages/styles/advanced/GlobalClassName.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { TextField, NoSsr } from '@material-ui/core';
+
+const StyledTextField = styled(TextField)`
+  label.Mui-focused {
+    color: green;
+  }
+  .MuiOutlinedInput-root {
+    fieldset {
+      border-color: red;
+    }
+    &:hover fieldset {
+      border-color: yellow;
+    }
+    &.Mui-focused fieldset {
+      border-color: green;
+    }
+  }
+`;
+
+export default function GlobalClassName() {
+  return (
+    <NoSsr>
+      <StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
+    </NoSsr>
+  );
+}