[DatePicker] Squash compat commits

Move picker sources into lab (mui#4)

Update README.md

[DatePicker] Refactor pickers tests to testing-library and mocha (mui#5)

[TimePicker] Migrate tests to testing library (mui#8)

[DateTimePicker] Migrate tests  (mui#9)

Fix all pickers linter errors (mui#10)

Fix all circular dependencies (mui#11)

* Fix all circular dependencies

* Enable mocha eslint rules for typescript tests

[test] The last step to a green CI (mui#15)

Migrate pickers docs (mui#12)

Downgrade to withStyles for pickers sources (mui#16)

Add public api exports for pickers components (mui#17)

Consolidate component namespace and theme augmentation  (mui#18)

Describe conformance for pickers sub-components (mui#19)

Autogenerate proptypes for typescript sources  (mui#20)

Proper build output (mui#21)

Clear migration artifacts  (mui#23)

Eslint rule for lower-case test name convention  (mui#24)

DateRangePicker  (mui#25)

yarn deduplicate

Remove GridListTile

[DateTimePicker] Fix migration unit tests

Fix types

Fix typescript types migration issues

Fix yarn lerna build (mui#33)

Fix karma tests

use window.Touch for CI karma tests

Remove more outdated diff noise (mui#34)

Replace not valid formats with valid ISO strings

Try to fix CI touch tests

Skip tests if Touch events are not supported

Fix merge conflicts

Actually type-check

Fix safari tests

Remove lowercase test name rule

The casing is up to the test author.
We're not the grammar police in tests.

Fix lint

Format

Remove overzealous eslint-disable*

Debug failing tests

Better debugging

Timezones are fun

was isoString th efix?

Let's find out what's failing and then skip it

Branch for safari

Skip DateRangePicker in browsers

review

Matt's review

Co-authored-by: Matt <github@nospam.33m.co>

format

docs:i18n

.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',
     });
   });