[DatePicker] Migrate to the lab

.eslintrc.js

@@ -64,8 +64,7 @@ module.exports = {
           '!@material-ui/utils/macros',
           '@material-ui/utils/macros/*',
           '!@material-ui/utils/macros/*.macro',
-          // public API: https://next.material-ui-pickers.dev/getting-started/installation#peer-library
-          '!@material-ui/pickers/adapter/*',
+          '!@material-ui/lab/dateAdapter/*',
         ],
       },
     ],

.gitignore

@@ -4,6 +4,7 @@
 .idea
 .vscode
 *.log
+*.tsbuildinfo
 /.eslintcache
 /.nyc_output
 /benchmark/**/dist

docs/next.config.js

@@ -71,9 +71,7 @@ module.exports = {
 
       config.externals = [
         (context, request, callback) => {
-          const hasDependencyOnRepoPackages = ['notistack', '@material-ui/pickers'].includes(
-            request,
-          );
+          const hasDependencyOnRepoPackages = ['notistack'].includes(request);
 
           if (hasDependencyOnRepoPackages) {
             return callback(null);
@@ -108,7 +106,7 @@ module.exports = {
           // transpile 3rd party packages with dependencies in this repository
           {
             test: /\.(js|mjs|jsx)$/,
-            include: /node_modules(\/|\\)(notistack|@material-ui(\/|\\)pickers)/,
+            include: /node_modules(\/|\\)notistack/,
             use: {
               loader: 'babel-loader',
               options: {

docs/package.json

@@ -32,7 +32,6 @@
     "@material-ui/docs": "^5.0.0-alpha.1",
     "@material-ui/icons": "^5.0.0-alpha.1",
     "@material-ui/lab": "^5.0.0-alpha.1",
-    "@material-ui/pickers": "^4.0.0-alpha.11",
     "@material-ui/styled-engine": "^5.0.0-alpha.1",
     "@material-ui/styled-engine-sc": "^5.0.0-alpha.1",
     "@material-ui/styles": "^5.0.0-alpha.1",
@@ -69,7 +68,7 @@
     "create-emotion-server": "^10.0.27",
     "cross-env": "^7.0.0",
     "css-mediaquery": "^0.1.2",
-    "date-fns": "^2.15.0",
+    "date-fns": "^2.0.0",
     "docsearch.js": "^2.6.3",
     "doctrine": "^3.0.0",
     "emotion-theming": "^10.0.27",

docs/pages/components/date-picker.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'components/date-picker';
+const requireDemo = require.context('docs/src/pages/components/date-picker', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/date-picker',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/components/date-range-picker.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'components/date-range-picker';
+const requireDemo = require.context(
+  'docs/src/pages/components/date-range-picker',
+  false,
+  /\.(js|tsx)$/,
+);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/date-range-picker',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/components/date-time-picker.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'components/date-time-picker';
+const requireDemo = require.context(
+  'docs/src/pages/components/date-time-picker',
+  false,
+  /\.(js|tsx)$/,
+);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/date-time-picker',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/components/time-picker.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'components/time-picker';
+const requireDemo = require.context('docs/src/pages/components/time-picker', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/time-picker',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/scripts/buildApi.ts

@@ -281,6 +281,10 @@ async function buildDocs(options: {
     prettierConfigPath,
     theme,
   } = options;
+  if (componentObject.filename.indexOf('internal') !== -1) {
+    return;
+  }
+
   const src = readFileSync(componentObject.filename, 'utf8');
 
   if (src.match(/@ignore - internal component\./) || src.match(/@ignore - do not document\./)) {

docs/src/modules/utils/helpers.js

@@ -83,7 +83,6 @@ function includePeerDependencies(deps, versions) {
 
   if (
     deps['@material-ui/lab'] ||
-    deps['@material-ui/pickers'] ||
     deps['@material-ui/x'] ||
     deps['@material-ui/x-grid'] ||
     deps['@material-ui/x-pickers'] ||
@@ -98,10 +97,6 @@ function includePeerDependencies(deps, versions) {
     deps['@material-ui/icons'] = versions['@material-ui/icons'];
     deps['@material-ui/lab'] = versions['@material-ui/lab'];
   }
-
-  if (deps['@material-ui/pickers']) {
-    deps['date-fns'] = 'latest';
-  }
 }
 
 /**
@@ -131,8 +126,10 @@ function getDependencies(raw, options = {}) {
 
   const deps = {};
   const versions = {
-    'react-dom': reactVersion,
     react: reactVersion,
+    'react-dom': reactVersion,
+    '@emotion/core': 'latest',
+    '@emotion/styled': 'latest',
     '@material-ui/core': getMuiPackageVersion('core', muiCommitRef),
     '@material-ui/icons': getMuiPackageVersion('icons', muiCommitRef),
     '@material-ui/lab': getMuiPackageVersion('lab', muiCommitRef),
@@ -142,9 +139,6 @@ function getDependencies(raw, options = {}) {
     '@material-ui/system': getMuiPackageVersion('system', muiCommitRef),
     '@material-ui/unstyled': getMuiPackageVersion('unstyled', muiCommitRef),
     '@material-ui/utils': getMuiPackageVersion('utils', muiCommitRef),
-    '@material-ui/pickers': 'next',
-    '@emotion/core': 'latest',
-    '@emotion/styled': 'latest',
   };
 
   const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm;
@@ -164,6 +158,12 @@ function getDependencies(raw, options = {}) {
     if (!deps[name]) {
       deps[name] = versions[name] ? versions[name] : 'latest';
     }
+
+    // e.g date-fns
+    const dateAdapter = /^@material-ui\/lab\/dateAdapter\/(.*)/;
+    if (dateAdapter.test(m[2])) {
+      deps[dateAdapter.exec(m[2])[1]] = 'latest';
+    }
   }
 
   includePeerDependencies(deps, versions);

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

@@ -22,13 +22,13 @@ const styles = theme => ({
 
   it('should handle @ dependencies', () => {
     expect(getDependencies(s1)).to.deep.equal({
+      react: 'latest',
+      'react-dom': 'latest',
       '@emotion/core': 'latest',
       '@emotion/styled': 'latest',
       '@foo-bar/bip': 'latest',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
-      'react-dom': 'latest',
-      react: 'latest',
     });
   });
 
@@ -48,27 +48,27 @@ const suggestions = [
 `;
 
     expect(getDependencies(source)).to.deep.equal({
+      react: 'latest',
+      'react-dom': 'latest',
       '@emotion/core': 'latest',
       '@emotion/styled': 'latest',
       '@material-ui/core': 'next',
       '@unexisting/thing': 'latest',
       'autosuggest-highlight': 'latest',
       'prop-types': 'latest',
       'react-draggable': 'latest',
-      'react-dom': 'latest',
-      react: 'latest',
     });
   });
 
   it('should support next dependencies', () => {
     expect(getDependencies(s1, { reactVersion: 'next' })).to.deep.equal({
+      react: 'next',
+      'react-dom': 'next',
       '@emotion/core': 'latest',
       '@emotion/styled': 'latest',
       '@foo-bar/bip': 'latest',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
-      'react-dom': 'next',
-      react: 'next',
     });
   });
 
@@ -78,31 +78,31 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
-import DateFnsAdapter from "@material-ui/pickers/adapter/date-fns";
-import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePicker, KeyboardDatePicker } from '@material-ui/pickers';
+import DateFnsAdapter from '@material-ui/lab/dateAdapter/date-fns';
+import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePicker, KeyboardDatePicker } from '@material-ui/lab';
 `;
 
     expect(getDependencies(source)).to.deep.equal({
-      'date-fns': 'latest',
+      react: 'latest',
+      'react-dom': 'latest',
+      'prop-types': 'latest',
       '@emotion/core': 'latest',
       '@emotion/styled': 'latest',
-      '@material-ui/pickers': 'next',
       '@material-ui/core': 'next',
-      'prop-types': 'latest',
-      'react-dom': 'latest',
-      react: 'latest',
+      '@material-ui/lab': 'next',
+      'date-fns': 'latest',
     });
   });
 
   it('can collect required @types packages', () => {
     expect(getDependencies(s1, { codeLanguage: 'TS' })).to.deep.equal({
+      react: 'latest',
+      'react-dom': 'latest',
+      'prop-types': 'latest',
       '@emotion/core': 'latest',
       '@emotion/styled': 'latest',
       '@foo-bar/bip': 'latest',
       '@material-ui/core': 'next',
-      'prop-types': 'latest',
-      'react-dom': 'latest',
-      react: 'latest',
       '@types/foo-bar__bip': 'latest',
       '@types/prop-types': 'latest',
       '@types/react-dom': 'latest',
@@ -114,22 +114,22 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic
   it('should handle multilines', () => {
     const source = `
 import * as React from 'react';
-import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns';
+import DateFnsAdapter from '@material-ui/lab/dateAdapter/date-fns';
 import {
   LocalizationProvider as MuiPickersLocalizationProvider,
   KeyboardTimePicker,
   KeyboardDatePicker,
-} from '@material-ui/pickers';
+} from '@material-ui/lab';
     `;
 
     expect(getDependencies(source)).to.deep.equal({
-      'date-fns': 'latest',
+      react: 'latest',
+      'react-dom': 'latest',
       '@emotion/core': 'latest',
       '@emotion/styled': 'latest',
       '@material-ui/core': 'next',
-      '@material-ui/pickers': 'next',
-      react: 'latest',
-      'react-dom': 'latest',
+      '@material-ui/lab': 'next',
+      'date-fns': 'latest',
     });
   });
 
@@ -139,12 +139,12 @@ import lab from '@material-ui/lab';
     `;
 
     expect(getDependencies(source)).to.deep.equal({
+      react: 'latest',
+      'react-dom': 'latest',
       '@emotion/core': 'latest',
       '@emotion/styled': 'latest',
       '@material-ui/core': 'next',
       '@material-ui/lab': 'next',
-      react: 'latest',
-      'react-dom': 'latest',
     });
   });
 
@@ -156,6 +156,8 @@ import { useDemoData } from '@material-ui/x-grid-data-generator';
     `;
 
     expect(getDependencies(source, { codeLanguage: 'TS' })).to.deep.equal({
+      react: 'latest',
+      'react-dom': 'latest',
       '@emotion/core': 'latest',
       '@emotion/styled': 'latest',
       '@material-ui/core': 'next',
@@ -165,8 +167,6 @@ import { useDemoData } from '@material-ui/x-grid-data-generator';
       '@material-ui/x-grid-data-generator': 'latest',
       '@types/react': 'latest',
       '@types/react-dom': 'latest',
-      react: 'latest',
-      'react-dom': 'latest',
       typescript: 'latest',
     });
   });