[docs] Fix demo links for new util components

.circleci/config.yml

@@ -63,6 +63,10 @@ jobs:
           command: bash <(curl -s https://codecov.io/bash)
   test_build:
     <<: *defaults
+    # This isn't user facing code.
+    # Let's take advantage of the most up to date node version.
+    docker:
+      - image: circleci/node:9.4
     steps:
       - *restore_repo
       - run:

.eslintignore

@@ -3,8 +3,6 @@ node_modules
 /tmp
 coverage
 /.next
-/next.config.js
-/docs/src/modules/utils/find.js
 /docs/export
 flow
 flow-typed

docs/scripts/buildApi.js

@@ -29,15 +29,15 @@ const docsApiDirectory = path.resolve(rootDirectory, 'pages/api');
 const theme = createMuiTheme();
 
 function buildDocs(options) {
-  const { componentPath, pagesMarkdown } = options;
-  const src = readFileSync(componentPath, 'utf8');
+  const { component: componentObject, pagesMarkdown } = options;
+  const src = readFileSync(componentObject.filename, 'utf8');
 
   if (src.match(/@ignore - internal component\./) || src.match(/@ignore - do not document\./)) {
     return;
   }
 
   // eslint-disable-next-line global-require, import/no-dynamic-require
-  const component = require(componentPath);
+  const component = require(componentObject.filename);
   const styles = {
     classes: [],
     name: null,
@@ -55,26 +55,26 @@ function buildDocs(options) {
   try {
     reactAPI = reactDocgen.parse(src);
   } catch (err) {
-    console.log('Error parsing src for', componentPath);
+    console.log('Error parsing src for', componentObject.filename);
     throw err;
   }
 
-  reactAPI.name = path.parse(componentPath).name;
+  reactAPI.name = path.parse(componentObject.filename).name;
   reactAPI.styles = styles;
   reactAPI.pagesMarkdown = pagesMarkdown;
   reactAPI.src = src;
 
-  // if (reactAPI.name !== 'Backdrop') {
+  // if (reactAPI.name !== 'Zoom') {
   //   return;
   // }
 
   // Relative location in the file system.
-  reactAPI.filename = componentPath.replace(rootDirectory, '');
+  reactAPI.filename = componentObject.filename.replace(rootDirectory, '');
   let markdown;
   try {
     markdown = generateMarkdown(reactAPI);
   } catch (err) {
-    console.log('Error generating markdown for', componentPath);
+    console.log('Error generating markdown for', componentObject.filename);
     throw err;
   }
 
@@ -100,26 +100,20 @@ export default withRoot(Page);
 `,
     );
 
-    console.log('Built markdown docs for', componentPath);
+    console.log('Built markdown docs for', componentObject.filename);
   });
 }
 
 const pagesMarkdown = findPagesMarkdown()
   .map(markdown => {
     const markdownSource = readFileSync(markdown.filename, 'utf8');
-
     return {
       ...markdown,
       components: getHeaders(markdownSource).components,
     };
   })
   .filter(markdown => markdown.components.length > 0);
 
-const components = findComponents();
-
-components.forEach(component => {
-  buildDocs({
-    componentPath: component.filename,
-    pagesMarkdown,
-  });
+findComponents().forEach(component => {
+  buildDocs({ component, pagesMarkdown });
 });

docs/src/modules/components/withRoot.js

@@ -38,7 +38,8 @@ const pages = [
         pathname: '/getting-started/example-projects',
       },
       {
-        pathname: '/getting-started/frequently-asked-questions',
+        pathname: '/getting-started/faq',
+        title: 'Frequently Asked Questions',
       },
       {
         pathname: '/getting-started/comparison',

docs/src/modules/utils/find.js

@@ -4,9 +4,13 @@ const path = require('path');
 const markdownRegex = /\.md$/;
 
 // Returns the markdowns of the documentation in a flat array.
+// {
+//   pathname: String,
+//   filename: String,
+// }
 function findPagesMarkdown(
   directory = path.resolve(__dirname, '../../../src/pages'),
-  pagesMarkdown = []
+  pagesMarkdown = [],
 ) {
   const items = fs.readdirSync(directory);
 
@@ -21,11 +25,17 @@ function findPagesMarkdown(
     if (!markdownRegex.test(item)) {
       return;
     }
-    let pathname = itemPath.replace(new RegExp(`\\${path.sep}`, 'g'), '/').replace(/^.*\/pages/, '').replace('.md', '');
 
-    if (pathname.indexOf('/demos') === 0) {
-      pathname = pathname.split('/').slice(0, 3).join('/');
-    }
+    let pathname = itemPath
+      .replace(new RegExp(`\\${path.sep}`, 'g'), '/')
+      .replace(/^.*\/pages/, '')
+      .replace('.md', '');
+
+    // Remove the last pathname segment.
+    pathname = pathname
+      .split('/')
+      .slice(0, 3)
+      .join('/');
 
     pagesMarkdown.push({
       // Relative location in the path (URL) system.
@@ -71,11 +81,14 @@ const blackList = ['/.eslintrc', '/_document'];
 function findPages(
   options = {},
   directory = path.resolve(__dirname, '../../../../pages'),
-  pages = []
+  pages = [],
 ) {
   fs.readdirSync(directory).forEach(item => {
     const itemPath = path.resolve(directory, item);
-    const pathname = itemPath.replace(new RegExp(`\\${path.sep}`, 'g'), '/').replace(/^.*\/pages/, '').replace('.js', '');
+    const pathname = itemPath
+      .replace(new RegExp(`\\${path.sep}`, 'g'), '/')
+      .replace(/^.*\/pages/, '')
+      .replace('.js', '');
 
     if (options.front && pathname.indexOf('/demos') === -1 && pathname.indexOf('/api') === -1) {
       return;

docs/src/modules/utils/generateMarkdown.js

@@ -272,7 +272,7 @@ ${pagesMarkdown.map(page => `- [${pageToTitle(page)}](${page.pathname})`).join('
 `;
 }
 
-export default function generateMarkdown(reactAPI: Object) {
+export default function generateMarkdown(reactAPI) {
   return [
     generateHeader(reactAPI),
     '',

docs/src/pages/customization/css-in-js.md → docs/src/pages/customization/css-in-js/css-in-js.md

@@ -17,7 +17,7 @@ So, you may have noticed in the demos how this *CSS-in-JS* looks.
 We use the higher-order component created by [`withStyles`](#api)
 to inject an array of styles into the DOM as CSS, using JSS. Here's an example:
 
-{{"demo": "pages/customization/CssInJs.js"}}
+{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
 
 ## JSS
 
@@ -38,7 +38,7 @@ When rendering on the server, you will need to get all rendered styles as a CSS
 The `SheetsRegistry` class allows you to manually aggregate and stringify them.
 Read more about [Server Rendering](/guides/server-rendering).
 
-{{"demo": "pages/customization/JssRegistry.js", "hideEditButton": true}}
+{{"demo": "pages/customization/css-in-js/JssRegistry.js", "hideEditButton": true}}
 
 ## Sheets manager
 
@@ -373,7 +373,7 @@ function RenderProps() {
 }
 ```
 
-{{"demo": "pages/customization/RenderProps.js"}}
+{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
 
 You can access the theme the same way you would do it with `withStyles`:
 ```
@@ -406,7 +406,7 @@ function StyledComponents() {
 }
 ```
 
-{{"demo": "pages/customization/StyledComponents.js"}}
+{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
 
 You can access the theme the same way you would do it with `withStyles`:
 ```

docs/src/pages/customization/OverridesClassNames.js → docs/src/pages/customization/overrides/ClassNames.js

@@ -16,17 +16,17 @@ const styles = {
   },
 };
 
-function OverridesClassNames(props) {
+function ClassNames(props) {
   return (
     <Button className={props.classes.button}>
       {props.children ? props.children : 'class names'}
     </Button>
   );
 }
 
-OverridesClassNames.propTypes = {
+ClassNames.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(OverridesClassNames);
+export default withStyles(styles)(ClassNames);

docs/src/pages/customization/OverridesClasses.js → docs/src/pages/customization/overrides/Classes.js

@@ -18,22 +18,22 @@ const styles = {
   },
 };
 
-function OverridesClasses(props) {
+function Classes(props) {
   return (
     <Button
       classes={{
-        root: props.classes.root, // className, e.g. `OverridesClasses-root-X`
-        label: props.classes.label, // className, e.g. `OverridesClasses-label-X`
+        root: props.classes.root, // className, e.g. `Classes-root-X`
+        label: props.classes.label, // className, e.g. `Classes-label-X`
       }}
     >
       {props.children ? props.children : 'classes'}
     </Button>
   );
 }
 
-OverridesClasses.propTypes = {
+Classes.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(OverridesClasses);
+export default withStyles(styles)(Classes);

docs/src/pages/customization/overrides/Component.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ClassNames from 'docs/src/pages/customization/overrides/ClassNames';
+
+// We can use ClassNames over and over.
+function Component() {
+  return <ClassNames>Component</ClassNames>;
+}
+
+export default Component;

docs/src/pages/customization/OverridesInlineStyle.js → docs/src/pages/customization/overrides/InlineStyle.js

@@ -12,8 +12,8 @@ const style = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
 };
 
-function OverridesInlineStyle() {
+function InlineStyle() {
   return <Button style={style}>inline-style</Button>;
 }
 
-export default OverridesInlineStyle;
+export default InlineStyle;

docs/src/pages/customization/overrides.md → docs/src/pages/customization/overrides/overrides.md

@@ -23,7 +23,7 @@ consider the [CSS injection order](/customization/css-in-js#css-injection-order)
 by Material-UI to style a component has the highest specificity possible since the `<link>` is injected at the bottom
 of the `<head />` to ensure the components always render correctly.
 
-{{"demo": "pages/customization/OverridesClassNames.js"}}
+{{"demo": "pages/customization/overrides/ClassNames.js"}}
 
 ### Overriding with classes
 
@@ -40,7 +40,7 @@ you wish to add or override.
 
 Notice that in addition to the button styling, the button label's capitalization has been changed:
 
-{{"demo": "pages/customization/OverridesClasses.js"}}
+{{"demo": "pages/customization/overrides/Classes.js"}}
 
 ### Overriding with inline-style
 
@@ -50,15 +50,15 @@ These properties are always applied to the root element.
 
 You don't have to worry about CSS specificity as the inline-style takes precedence over the regular CSS.
 
-{{"demo": "pages/customization/OverridesInlineStyle.js"}}
+{{"demo": "pages/customization/overrides/InlineStyle.js"}}
 
 ## 2. Specific variation of a component
 
 You might need to create a variation of a component and use it in different contexts, for instance a colorful button on your product page, however you probably want to keep your code [*DRY*](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself).
 
 The best approach is to follow option 1 and then take advantage of the composition power of React by exporting your customized component to use wherever you need it.
 
-{{"demo": "pages/customization/OverridesComponent.js", "hideEditButton": true}}
+{{"demo": "pages/customization/overrides/Component.js", "hideEditButton": true}}
 
 ## 3. Material Design variations
 

docs/src/pages/customization/WithTheme.js → docs/src/pages/customization/themes/WithTheme.js

@@ -17,7 +17,7 @@ function WithTheme(props) {
     primaryColor: {
       backgroundColor: primaryColor,
       padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
-      color: '#fff',
+      color: theme.palette.common.white,
     },
   };