[lab] Create lab package, add SpeedDial

.babelrc

@@ -27,10 +27,11 @@
           "module-resolver",
           {
             "alias": {
-              "pages": "./pages",
+              "@material-ui/lab": "./packages/material-ui-lab/src",
+              "docs": "./docs",
               "material-ui": "./src",
               "material-ui-icons": "./packages/material-ui-icons/src",
-              "docs": "./docs"
+              "pages": "./pages"
             }
           }
         ],
@@ -47,10 +48,11 @@
           "module-resolver",
           {
             "alias": {
-              "pages": "./pages",
+              "@material-ui/lab": "./packages/material-ui-lab/src",
+              "docs": "./docs",
               "material-ui": "./src",
               "material-ui-icons": "./packages/material-ui-icons/src",
-              "docs": "./docs"
+              "pages": "./pages"
             }
           }
         ],
@@ -92,7 +94,16 @@
     "test": {
       "sourceMaps": "both",
       "plugins": [
-        "transform-flow-strip-types"
+        "transform-flow-strip-types",
+        [
+          "module-resolver",
+          {
+            "alias": {
+              "material-ui": "./src",
+              "material-ui-icons": "./packages/material-ui-icons/src"
+            }
+          }
+        ],
       ]
     }
   }

.circleci/config.yml

@@ -1,7 +1,7 @@
 defaults: &defaults
   working_directory: /tmp/material-ui
   docker:
-    - image: circleci/node:6.11
+    - image: circleci/node:9.5
 restore_repo: &restore_repo
   restore_cache:
     keys:
@@ -26,7 +26,10 @@ jobs:
           key: v1-yarn-sha-{{ checksum "yarn.lock" }}
       - run:
           name: Install js dependencies
-          command: yarn install --frozen-lockfile
+          command: yarn
+      - run:
+          name: Should not have any git not staged
+          command: git diff --exit-code
       - save_cache:
           key: v1-yarn-sha-{{ checksum "yarn.lock" }}
           paths:
@@ -66,7 +69,7 @@ jobs:
     # This isn't user facing code.
     # Let's take advantage of the most up to date node version.
     docker:
-      - image: circleci/node:9.4
+      - image: circleci/node:9.5
     steps:
       - *restore_repo
       - run:
@@ -94,8 +97,8 @@ jobs:
   test_regressions:
     <<: *defaults
     docker:
-      - image: circleci/node:6.11
-      - image: selenium/standalone-chrome:3.4.0
+      - image: circleci/node:9.5
+      - image: selenium/standalone-chrome:3.9.0
     steps:
       - *restore_repo
       - run:

.eslintignore

@@ -1,18 +1,17 @@
-node_modules
-/build
-/tmp
-coverage
+/.git
 /.next
+/coverage
 /docs/export
-flow
-flow-typed
-/packages/*/lib
-/packages/material-ui-icons/test/fixtures
+/examples/create-react-app-with-flow/flow
+/examples/create-react-app-with-flow/flow-typed
+/examples/gatsby/public
+/flow
+/flow-typed
+/packages/material-ui-codemod/lib
+/packages/material-ui-codemod/src/*/*.spec*
 /packages/material-ui-icons/src
+/packages/material-ui-icons/test/fixtures
 /packages/material-ui-icons/tpl
-/packages/material-ui-icons/build
-/packages/material-ui-codemod/src/*/*.spec*
-/examples/create-react-app/build
-/examples/create-react-app-with-jss/build
-/examples/gatsby/public
-/.git
+/tmp
+build
+node_modules

.eslintrc.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   // So parent files don't get applied
   root: true,
@@ -20,7 +22,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       webpack: {
-        config: './docs/webpackBaseConfig.js',
+        config: path.join(__dirname, './docs/webpackBaseConfig.js'),
       },
     },
   },

.gitignore

@@ -1,27 +1,21 @@
-# Exclude compiled files
-build
-/lib
-/.next
-/.eslintcache
-/docs/export
-/tmp
-/coverage
-/.nyc_output
-
-# OS files
-.DS_STORE
+# The best pattern people should follow is ignoring the editors' files in their
+# global .gitignore configuration file.
+# However, in order to prevent issues. We also ignore editors' files here.
+.idea
+.vscode
 
 # Screenshors generated for Argos-CI
+*.log
+.DS_STORE
+/.eslintcache
+/.next
+/.nyc_output
+/coverage
+/docs/export
+/packages/material-ui-codemod/lib
 /test/regressions/screenshots
 /test/selenium-output
-
-# npm files
+/tmp
+build
 node_modules
 package-lock.json
-*.log
-
-# The best pattern people should follow is ignoring the editors' files in their
-# global .gitignore configuration file.
-# However, in order to prevent issues. We also ignore editors' files here.
-.idea
-.vscode

docker-compose.yml

@@ -1,8 +1,8 @@
 hub:
-  image: selenium/hub:3.4.0
+  image: selenium/hub:3.9.0
   ports:
     - 4444:4444
 chrome:
-  image: selenium/node-chrome:3.4.0
+  image: selenium/node-chrome:3.9.0
   links:
     - hub

docs/scripts/buildApi.js

@@ -24,8 +24,21 @@ function ensureExists(pat, mask, cb) {
   });
 }
 
+// Read the command-line args
+const args = process.argv;
+
+// Exit with a message
+function exit(error) {
+  console.log(error, '\n');
+  process.exit();
+}
+
+if (args.length < 4) {
+  exit('\nERROR: syntax: buildApi source target');
+}
+
 const rootDirectory = path.resolve(__dirname, '../../');
-const docsApiDirectory = path.resolve(rootDirectory, 'pages/api');
+const docsApiDirectory = path.resolve(rootDirectory, args[3]);
 const theme = createMuiTheme();
 
 function buildDocs(options) {
@@ -104,16 +117,21 @@ export default withRoot(Page);
   });
 }
 
-const pagesMarkdown = findPagesMarkdown()
-  .map(markdown => {
-    const markdownSource = readFileSync(markdown.filename, 'utf8');
-    return {
-      ...markdown,
-      components: getHeaders(markdownSource).components,
-    };
-  })
-  .filter(markdown => markdown.components.length > 0);
-
-findComponents().forEach(component => {
-  buildDocs({ component, pagesMarkdown });
-});
+function run() {
+  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(path.resolve(rootDirectory, args[2]));
+
+  components.forEach(component => {
+    buildDocs({ component, pagesMarkdown });
+  });
+}
+
+run();

docs/src/modules/components/AppDrawer.js

@@ -19,6 +19,7 @@ const styles = theme => ({
   },
   title: {
     color: theme.palette.text.secondary,
+    marginBottom: theme.spacing.unit / 2,
     '&:hover': {
       color: theme.palette.primary.main,
     },
@@ -38,39 +39,39 @@ const styles = theme => ({
   },
 });
 
-function renderNavItems(props, pages, activePage) {
-  let navItems = null;
-
-  if (pages && pages.length) {
-    // eslint-disable-next-line no-use-before-define
-    navItems = pages.reduce(reduceChildRoutes.bind(null, props, activePage), []);
-  }
-
-  return <List>{navItems}</List>;
+// eslint-disable-next-line react/prop-types
+function renderNavItems({ pages, ...params }) {
+  return (
+    <List>
+      {pages.reduce(
+        // eslint-disable-next-line no-use-before-define
+        (items, page) => reduceChildRoutes({ items, page, ...params }),
+        [],
+      )}
+    </List>
+  );
 }
 
-function reduceChildRoutes(props, activePage, items, childPage, index) {
-  if (childPage.children && childPage.children.length > 1) {
-    const openImmediately = activePage.pathname.indexOf(childPage.pathname) !== -1 || false;
+function reduceChildRoutes({ props, activePage, items, page, depth }) {
+  if (page.children && page.children.length > 1) {
+    const title = pageToTitle(page);
+    const openImmediately = activePage.pathname.indexOf(page.pathname) === 0;
 
     items.push(
-      <AppDrawerNavItem
-        key={index}
-        openImmediately={openImmediately}
-        title={pageToTitle(childPage)}
-      >
-        {renderNavItems(props, childPage.children, activePage)}
+      <AppDrawerNavItem depth={depth} key={title} openImmediately={openImmediately} title={title}>
+        {renderNavItems({ props, pages: page.children, activePage, depth: depth + 1 })}
       </AppDrawerNavItem>,
     );
-  } else if (childPage.title !== false) {
-    childPage =
-      childPage.children && childPage.children.length === 1 ? childPage.children[0] : childPage;
+  } else if (page.title !== false) {
+    const title = pageToTitle(page);
+    page = page.children && page.children.length === 1 ? page.children[0] : page;
 
     items.push(
       <AppDrawerNavItem
-        key={index}
-        title={pageToTitle(childPage)}
-        href={childPage.pathname}
+        depth={depth}
+        key={title}
+        title={title}
+        href={page.pathname}
         onClick={props.onClose}
       />,
     );
@@ -104,7 +105,7 @@ function AppDrawer(props, context) {
           <Divider absolute />
         </Toolbar>
       </div>
-      {renderNavItems(props, context.pages, context.activePage)}
+      {renderNavItems({ props, pages: context.pages, activePage: context.activePage, depth: 0 })}
     </div>
   );