mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.64k stars 32.22k forks source link

[Minor] CodeSandbox Demos has dependency errors #17049

Closed Erkin97-zz closed 5 years ago

Erkin97-zz commented 5 years ago

Current Behavior 😯

CodeSandbox demos for the date-pickers contain dependency errors. Demo

https://material-ui.com/components/pickers/#material-ui-pickers

oliviertassinari commented 5 years ago

@Erkin97 Good catch. What do you think of these changes?

diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js
index 8113a8815..4d60ac59f 100644
--- a/docs/src/modules/utils/helpers.js
+++ b/docs/src/modules/utils/helpers.js
@@ -99,18 +99,18 @@ function getDependencies(raw, options = {}) {
     jss: 'next',
     'jss-plugin-template': 'next',
   };
-  const re = /^import\s.*\sfrom\s+'([^']+)|import\s'([^']+)'/gm;
+  const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm;
   let m;
   // eslint-disable-next-line no-cond-assign
   while ((m = re.exec(raw))) {
     let name;

-    if (m[1]) {
+    if (m[2]) {
       // full import
       // handle scope names
-      name = m[1].charAt(0) === '@' ? m[1].split('/', 2).join('/') : m[1].split('/', 1)[0];
+      name = m[2].charAt(0) === '@' ? m[2].split('/', 2).join('/') : m[2].split('/', 1)[0];
     } else {
-      name = m[2];
+      name = m[1];
     }

     if (!deps[name]) {
diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js
index 168d214fa..a2bb7385c 100644
--- a/docs/src/modules/utils/helpers.test.js
+++ b/docs/src/modules/utils/helpers.test.js
@@ -1,7 +1,7 @@
 import { assert } from 'chai';
 import { getDependencies } from './helpers';

describe('docs getDependencies helpers', () => {
   const s1 = `
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -31,7 +31,7 @@ const styles = theme => ({
   });

   it('should handle * dependencies', () => {
-    const s2 = `
+    const source = `
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as _ from '@unexisting/thing';
@@ -45,7 +45,7 @@ import { withStyles } from '@material-ui/core/styles';
 const suggestions = [
 `;

-    assert.deepEqual(getDependencies(s2), {
+    assert.deepEqual(getDependencies(source), {
       '@material-ui/core': 'latest',
       '@unexisting/thing': 'latest',
       'autosuggest-highlight': 'latest',
@@ -67,7 +67,7 @@ const suggestions = [
   });

   it('should support direct import', () => {
-    const s3 = `
+    const source = `
 import 'date-fns';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -77,7 +77,7 @@ import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider, TimePicker, DatePicker } from '@material-ui/pickers';
 `;

-    assert.deepEqual(getDependencies(s3), {
+    assert.deepEqual(getDependencies(source), {
       'date-fns': 'next',
       '@date-io/date-fns': 'latest',
       '@material-ui/pickers': 'latest',
@@ -102,4 +102,23 @@ import { MuiPickersUtilsProvider, TimePicker, DatePicker } from '@material-ui/pi
       typescript: 'latest',
     });
   });
+
+  it('should handle multilines', () => {
+    const source = `
+import 'date-fns';
+import React from 'react';
+import {
+  MuiPickersUtilsProvider,
+  KeyboardTimePicker,
+  KeyboardDatePicker,
+} from '@material-ui/pickers';
+`;
+
+    assert.deepEqual(getDependencies(source), {
+      'date-fns': 'next',
+      '@material-ui/pickers': 'latest',
+      react: 'latest',
+      'react-dom': 'latest',
+    });
+  });
 });
Shubhamchinda commented 5 years ago

I'd like to take this.

oliviertassinari commented 5 years ago

@Shubhamchinda Feel free to go ahead :)