[docs] Demo codesandbox deps (mui#10158)

.eslintrc.js

@@ -55,6 +55,10 @@ module.exports = {
     'import/unambiguous': 'off', // scripts
     'import/namespace': ['error', { allowComputed: true }],
     'import/no-extraneous-dependencies': 'off',
+    'import/order': ['error', {
+      'groups': [['index', 'sibling', 'parent', 'internal', 'external', 'builtin']],
+      'newlines-between': 'never'
+    }],
 
     'react/jsx-indent': 'off', // Incompatible with prettier
     'react/jsx-closing-bracket-location': 'off', // Incompatible with prettier

docs/src/modules/components/Demo.js

@@ -9,6 +9,7 @@ import CodeIcon from 'material-ui-icons/Code';
 import Tooltip from 'material-ui/Tooltip';
 import Github from 'docs/src/modules/components/GitHub';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { getDependencies } from 'docs/src/modules/utils/helpers';
 
 const styles = theme => ({
   root: {
@@ -69,24 +70,6 @@ function compress(object) {
     .replace(/=+$/, ''); // Remove ending '='
 }
 
-function conditionalDependencies(raw) {
-  const dependencies = [
-    'react-autosuggest',
-    'autosuggest-highlight',
-    'downshift',
-    'react-select',
-    'react-text-mask',
-    'react-number-format',
-  ];
-
-  return dependencies.reduce((acc, dependency) => {
-    if (raw.indexOf(`from '${dependency}`) !== -1) {
-      acc[dependency] = 'latest';
-    }
-    return acc;
-  }, {});
-}
-
 class Demo extends React.Component {
   state = {
     codeOpen: false,
@@ -105,13 +88,7 @@ class Demo extends React.Component {
       files: {
         'package.json': {
           content: {
-            dependencies: {
-              react: 'latest',
-              'react-dom': 'latest',
-              'material-ui': 'next',
-              'material-ui-icons': 'latest',
-              ...conditionalDependencies(this.props.raw),
-            },
+            dependencies: getDependencies(this.props.raw),
           },
         },
         'demo.js': {

docs/src/modules/utils/helpers.js

@@ -10,11 +10,7 @@ export function titleize(string) {
 
   return string
     .split('-')
-    .map(word => word.split(''))
-    .map(letters => {
-      const first = letters.shift();
-      return [first.toUpperCase(), ...letters].join('');
-    })
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
 }
 
@@ -31,3 +27,20 @@ export function pageToTitle(page) {
 
   return titleize(name);
 }
+
+export function getDependencies(raw) {
+  const deps = {
+    react: 'latest',
+    'react-dom': 'latest',
+    'material-ui': 'next',
+  };
+  const re = /^import\s.*\sfrom\s+'([^']+)'/gm;
+  let m;
+  // eslint-disable-next-line no-cond-assign
+  while ((m = re.exec(raw))) {
+    // handle scope names
+    const name = m[1].charAt(0) === '@' ? m[1].split('/', 2).join('/') : m[1].split('/', 1)[0];
+    deps[name] = deps[name] || 'latest';
+  }
+  return deps;
+}

docs/src/modules/utils/helpers.spec.js

@@ -0,0 +1,52 @@
+import { assert } from 'chai';
+import { getDependencies } from './helpers';
+
+const s1 = `import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Input, { InputLabel } from 'material-ui/Input';
+import { FormControl, FormHelperText } from 'material-ui/Form';
+import Select from 'material-ui/Select';
+import FooBar, { Qux } from '@foo-bar/bip';
+
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formContro
+`;
+
+const s2 = `import React from 'react';
+import PropTypes from 'prop-types';
+import * as _ from '@unexisting/thing';
+import Autosuggest from 'react-autosuggest';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
+import TextField from 'material-ui/TextField';
+import Paper from 'material-ui/Paper';
+import { MenuItem } from 'material-ui/Menu';
+import { withStyles } from 'material-ui/styles';
+
+const suggestions = [`;
+
+describe('docs getDependencies helpers', () => {
+  it('generate the right npm dependencies', () => {
+    assert.deepEqual(getDependencies(s1), {
+      react: 'latest',
+      'react-dom': 'latest',
+      'material-ui': 'next',
+      'prop-types': 'latest',
+      '@foo-bar/bip': 'latest',
+    });
+    assert.deepEqual(getDependencies(s2), {
+      react: 'latest',
+      'react-dom': 'latest',
+      'material-ui': 'next',
+      'prop-types': 'latest',
+      '@unexisting/thing': 'latest',
+      'react-autosuggest': 'latest',
+      'autosuggest-highlight': 'latest',
+    });
+  });
+});

docs/src/modules/utils/prism.js

@@ -4,11 +4,8 @@ import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-diff';
 import 'prismjs/components/prism-jsx';
-
-/* eslint-disable import/no-webpack-loader-syntax */
 import lightTheme from 'prismjs/themes/prism.css';
 import darkTheme from 'prismjs/themes/prism-okaidia.css';
-/* eslint-enable import/no-webpack-loader-syntax */
 
 export { lightTheme, darkTheme };
 

examples/.eslintrc.js

@@ -8,5 +8,6 @@ module.exports = {
     'import/no-named-as-default': 'off',
     'import/default': 'off',
     'import/no-named-as-default-member': 'off',
+    'import/order': 'off',
   },
 };

package.json

@@ -46,7 +46,7 @@
     "size:overhead:why": "size-limit --why ./test/size/overhead.js",
     "spellcheck": "eslint . --config .eslintrc.spellcheck.js && echo \"eslint: no lint errors\"",
     "test": "yarn lint && yarn flow && yarn typescript && yarn test:unit",
-    "test:unit": "cross-env NODE_ENV=test mocha test/**/*.spec.js src/{,**/}*.spec.js",
+    "test:unit": "cross-env NODE_ENV=test mocha test/**/*.spec.js src/{,**/}*.spec.js docs/src/**/*.spec.js",
     "test:watch": "yarn test:unit -w",
     "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha test/**/*.spec.js src/{,**/}*.spec.js && nyc report -r lcovonly",
     "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha test/**/*.spec.js src/{,**/}*.spec.js && nyc report --reporter=html",