add a new muiComponent() helper

Author: oliviertassinari

docs/scripts/buildApi.js

@@ -73,6 +73,9 @@ function getInheritance(src) {
   };
 }
 
+const stylesRegexp = /const styles.*[\r\n](.*[\r\n])*};[\r\n][\r\n]/;
+const styleRegexp = /\/\* (.*) \*\/[\r\n]\s*(\w*)/g;
+
 function buildDocs(options) {
   const { component: componentObject, pagesMarkdown } = options;
   const src = readFileSync(componentObject.filename, 'utf8');
@@ -92,11 +95,11 @@ function buildDocs(options) {
     descriptions: {},
   };
 
-  if (component.styles && component.default.options) {
+  if ((component.styles && component.default.options) || component.default.stylesOrCreator) {
     // Collect the customization points of the `classes` property.
-    styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter(
-      className => !className.match(/^(@media|@keyframes)/),
-    );
+    styles.classes = Object.keys(
+      getStylesCreator(component.styles || component.default.stylesOrCreator).create(theme),
+    ).filter(className => !className.match(/^(@media|@keyframes)/));
     styles.name = component.default.options.name;
 
     let styleSrc = src;
@@ -111,12 +114,7 @@ function buildDocs(options) {
       );
     }
 
-    /**
-     * Collect classes comments from the source
-     */
-    const stylesRegexp = /export const styles.*[\r\n](.*[\r\n])*};[\r\n][\r\n]/;
-    const styleRegexp = /\/\* (.*) \*\/[\r\n]\s*(\w*)/g;
-    // Extract the styles section from the source
+    // Extract the styles section from the source.
     const stylesSrc = stylesRegexp.exec(styleSrc);
 
     if (stylesSrc) {

packages/material-ui-styles/src/makeStyles/makeStyles.js

@@ -207,7 +207,8 @@ function makeStyles(stylesOrCreator, options = {}) {
   };
   const listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
 
-  return (props = {}) => {
+  const useStyles = (props = {}) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = (listenToTheme ? useTheme() : null) || defaultTheme;
     const stylesOptions = {
       ...React.useContext(StylesContext),
@@ -244,6 +245,15 @@ function makeStyles(stylesOrCreator, options = {}) {
 
     return getClasses(instance.current, props.classes, Component);
   };
+
+  useStyles.options = options;
+
+  if (process.env.NODE_ENV !== 'production') {
+    // For the markdown generation
+    useStyles.stylesOrCreator = stylesOrCreator;
+  }
+
+  return useStyles;
 }
 
 export default makeStyles;

packages/material-ui/src/Table/Table.js

@@ -4,8 +4,9 @@ import clsx from 'clsx';
 import makeStyles from '../styles/makeStyles';
 import useThemeProps from '../styles/useThemeProps';
 import TableContext from './TableContext';
+import muiComponent from '../utils/muiComponent';
 
-export const styles = {
+const styles = {
   /* Styles applied to the root element. */
   root: {
     display: 'table',
@@ -15,17 +16,18 @@ export const styles = {
   },
 };
 
-export const useStyles = makeStyles(styles, { name: 'MuiTable' });
+const options = { name: 'MuiTable' };
+const useStyles = makeStyles(styles, options);
 
 const Table = React.forwardRef(function Table(props, ref) {
   const {
     classes: classesProp,
     className,
-    component: Component,
-    padding,
-    size,
+    component: Component = 'table',
+    padding = 'default',
+    size = 'medium',
     ...other
-  } = useThemeProps(props, { name: 'MuiTable' });
+  } = useThemeProps(props, options);
   const classes = useStyles(props);
   const table = React.useMemo(() => ({ padding, size }), [padding, size]);
 
@@ -70,15 +72,12 @@ Table.propTypes = {
   size: PropTypes.oneOf(['small', 'medium']),
 };
 
-Table.defaultProps = {
-  component: 'table',
-  padding: 'default',
-  size: 'medium',
-};
-
-Table.useStyles = useStyles;
-Table.options = {
-  name: 'MuiTable',
-};
+if (process.env.NODE_ENV !== 'production') {
+  Table.defaultProps = {
+    component: 'table',
+    padding: 'default',
+    size: 'medium',
+  };
+}
 
-export default Table;
+export default muiComponent(useStyles, Table);

packages/material-ui/src/TableBody/TableBody.js

@@ -4,24 +4,29 @@ import clsx from 'clsx';
 import makeStyles from '../styles/makeStyles';
 import useThemeProps from '../styles/useThemeProps';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
+import muiComponent from '../utils/muiComponent';
 
 const tablelvl2 = {
   variant: 'body',
 };
 
-export const styles = {
+const styles = {
   /* Styles applied to the root element. */
   root: {
     display: 'table-row-group',
   },
 };
 
-const useStyles = makeStyles(styles, { name: 'MuiTableBody' });
+const options = { name: 'MuiTableBody' };
+const useStyles = makeStyles(styles, options);
 
 const TableBody = React.forwardRef(function TableBody(props, ref) {
-  const { classes: classesProp, className, component: Component, ...other } = useThemeProps(props, {
-    name: 'MuiTableBody',
-  });
+  const {
+    classes: classesProp,
+    className,
+    component: Component = 'tbody',
+    ...other
+  } = useThemeProps(props, options);
   const classes = useStyles(props);
 
   return (
@@ -52,13 +57,10 @@ TableBody.propTypes = {
   component: PropTypes.elementType,
 };
 
-TableBody.defaultProps = {
-  component: 'tbody',
-};
-
-TableBody.useStyles = useStyles;
-TableBody.options = {
-  name: 'MuiTableBody',
-};
+if (process.env.NODE_ENV !== 'production') {
+  TableBody.defaultProps = {
+    component: 'tbody',
+  };
+}
 
-export default TableBody;
+export default muiComponent(useStyles, TableBody);

packages/material-ui/src/TableCell/TableCell.js

@@ -7,8 +7,9 @@ import { capitalize } from '../utils/helpers';
 import { darken, fade, lighten } from '../styles/colorManipulator';
 import TableContext from '../Table/TableContext';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
+import muiComponent from '../utils/muiComponent';
 
-export const styles = theme => ({
+const styles = theme => ({
   /* Styles applied to the root element. */
   root: {
     ...theme.typography.body2,
@@ -99,11 +100,12 @@ export const styles = theme => ({
   },
 });
 
-const useStyles = makeStyles(styles, { name: 'MuiTableCell' });
+const options = { name: 'MuiTableCell' };
+const useStyles = makeStyles(styles, options);
 
 const TableCell = React.forwardRef(function TableCell(props, ref) {
   const {
-    align,
+    align = 'inherit',
     children,
     classes: classesProp,
     className,
@@ -114,7 +116,7 @@ const TableCell = React.forwardRef(function TableCell(props, ref) {
     sortDirection,
     variant,
     ...other
-  } = useThemeProps(props, { name: 'MuiTableCell' });
+  } = useThemeProps(props, options);
 
   const classes = useStyles(props);
   const table = React.useContext(TableContext);
@@ -216,13 +218,10 @@ TableCell.propTypes = {
   variant: PropTypes.oneOf(['head', 'body', 'footer']),
 };
 
-TableCell.defaultProps = {
-  align: 'inherit',
-};
-
-TableCell.useStyles = useStyles;
-TableCell.options = {
-  name: 'MuiTableCell',
-};
+if (process.env.NODE_ENV !== 'production') {
+  TableCell.defaultProps = {
+    align: 'inherit',
+  };
+}
 
-export default TableCell;
+export default muiComponent(useStyles, TableCell);

packages/material-ui/src/TableFooter/TableFooter.js

@@ -4,24 +4,29 @@ import clsx from 'clsx';
 import makeStyles from '../styles/makeStyles';
 import useThemeProps from '../styles/useThemeProps';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
+import muiComponent from '../utils/muiComponent';
 
 const tablelvl2 = {
   variant: 'footer',
 };
 
-export const styles = {
+const styles = {
   /* Styles applied to the root element. */
   root: {
     display: 'table-footer-group',
   },
 };
 
-const useStyles = makeStyles(styles, { name: 'MuiTableFooter' });
+const options = { name: 'MuiTableFooter' };
+const useStyles = makeStyles(styles, options);
 
 const TableFooter = React.forwardRef(function TableFooter(props, ref) {
-  const { classes: classesProp, className, component: Component, ...other } = useThemeProps(props, {
-    name: 'MuiTableFooter',
-  });
+  const {
+    classes: classesProp,
+    className,
+    component: Component = 'tfoot',
+    ...other
+  } = useThemeProps(props, options);
   const classes = useStyles(props);
 
   return (
@@ -52,13 +57,10 @@ TableFooter.propTypes = {
   component: PropTypes.elementType,
 };
 
-TableFooter.defaultProps = {
-  component: 'tfoot',
-};
-
-TableFooter.useStyles = useStyles;
-TableFooter.options = {
-  name: 'MuiTableFooter',
-};
+if (process.env.NODE_ENV !== 'production') {
+  TableFooter.defaultProps = {
+    component: 'tfoot',
+  };
+}
 
-export default TableFooter;
+export default muiComponent(useStyles, TableFooter);

packages/material-ui/src/TableHead/TableHead.js

@@ -4,24 +4,29 @@ import clsx from 'clsx';
 import makeStyles from '../styles/makeStyles';
 import useThemeProps from '../styles/useThemeProps';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
+import muiComponent from '../utils/muiComponent';
 
 const tablelvl2 = {
   variant: 'head',
 };
 
-export const styles = {
+const styles = {
   /* Styles applied to the root element. */
   root: {
     display: 'table-header-group',
   },
 };
 
-const useStyles = makeStyles(styles, { name: 'MuiTableHead' });
+const options = { name: 'MuiTableHead' };
+const useStyles = makeStyles(styles, options);
 
 const TableHead = React.forwardRef(function TableHead(props, ref) {
-  const { classes: classesProp, className, component: Component, ...other } = useThemeProps(props, {
-    name: 'MuiTableHead',
-  });
+  const {
+    classes: classesProp,
+    className,
+    component: Component = 'thead',
+    ...other
+  } = useThemeProps(props, options);
   const classes = useStyles(props);
 
   return (
@@ -52,13 +57,10 @@ TableHead.propTypes = {
   component: PropTypes.elementType,
 };
 
-TableHead.defaultProps = {
-  component: 'thead',
-};
-
-TableHead.useStyles = useStyles;
-TableHead.options = {
-  name: 'MuiTableHead',
-};
+if (process.env.NODE_ENV !== 'production') {
+  TableHead.defaultProps = {
+    component: 'thead',
+  };
+}
 
-export default TableHead;
+export default muiComponent(useStyles, TableHead);

packages/material-ui/src/TableRow/TableRow.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import makeStyles from '../styles/makeStyles';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
+import muiComponent from '../utils/muiComponent';
 
-export const styles = theme => ({
+const styles = theme => ({
   /* Styles applied to the root element. */
   root: {
     color: 'inherit',
@@ -45,9 +46,9 @@ const TableRow = React.forwardRef(function TableRow(props, ref) {
   const {
     classes: classesProp,
     className,
-    component: Component,
-    hover,
-    selected,
+    component: Component = 'tr',
+    hover = false,
+    selected = false,
     ...other
   } = props;
   const tablelvl2 = React.useContext(Tablelvl2Context);
@@ -100,15 +101,12 @@ TableRow.propTypes = {
   selected: PropTypes.bool,
 };
 
-TableRow.defaultProps = {
-  component: 'tr',
-  hover: false,
-  selected: false,
-};
-
-TableRow.useStyles = useStyles;
-TableRow.options = {
-  name: 'MuiTableRow',
-};
+if (process.env.NODE_ENV !== 'production') {
+  TableRow.defaultProps = {
+    component: 'tr',
+    hover: false,
+    selected: false,
+  };
+}
 
-export default TableRow;
+export default muiComponent(useStyles, TableRow);