[core] Create @mui/material-next package (mui#28200)

.codesandbox/ci.json

@@ -14,7 +14,8 @@
     "packages/mui-utils",
     "packages/mui-core",
     "packages/mui-styled-engine",
-    "packages/mui-styled-engine-sc"
+    "packages/mui-styled-engine-sc",
+    "packages/mui-material-next"
   ],
   "publishDirectory": {
     "@mui/codemod": "packages/mui-codemod/build",
@@ -28,7 +29,8 @@
     "@mui/private-theming": "packages/mui-private-theming/build",
     "@mui/types": "packages/mui-types/build",
     "@mui/utils": "packages/mui-utils/build",
-    "@mui/core": "packages/mui-core/build"
+    "@mui/core": "packages/mui-core/build",
+    "@mui/material-next": "packages/mui-material-next/build"
   },
   "sandboxes": [
     "material-ui-issue-dh2yh",

babel.config.js

@@ -20,6 +20,7 @@ const defaultAlias = {
   '@mui/private-theming': resolveAliasPath('./packages/mui-private-theming/src'),
   '@mui/core': resolveAliasPath('./packages/mui-core/src'),
   '@mui/utils': resolveAliasPath('./packages/mui-utils/src'),
+  '@mui/material-next': resolveAliasPath('./packages/mui-material-next/src'),
 };
 
 const productionPlugins = [

docs/babel.config.js

@@ -27,6 +27,7 @@ const alias = {
   '@mui/private-theming': '../packages/mui-private-theming/src',
   '@mui/utils': '../packages/mui-utils/src',
   '@mui/core': '../packages/mui-core/src',
+  '@mui/material-next': '../packages/mui-material-next/src',
   docs: './',
   modules: '../modules',
   pages: './pages',

docs/next.config.js

@@ -129,6 +129,7 @@ module.exports = {
                         '@mui/private-theming': '../packages/mui-private-theming/src',
                         '@mui/utils': '../packages/mui-utils/src',
                         '@mui/core': '../packages/mui-core/src',
+                        '@mui/material-next': '../packages/mui-material-next/src',
                         // all legacy package names in this monorepo
                         '@material-ui/core': '../packages/mui-material/src',
                         '@material-ui/docs': '../packages/mui-docs/src',

docs/src/modules/utils/helpers.ts

@@ -170,6 +170,7 @@ export function getDependencies(
     '@mui/private-theming': getMuiPackageVersion('theming', muiCommitRef),
     '@mui/core': getMuiPackageVersion('core', muiCommitRef),
     '@mui/utils': getMuiPackageVersion('utils', muiCommitRef),
+    '@mui/material-next': getMuiPackageVersion('material-next', muiCommitRef),
   };
 
   // TODO: Where is this coming from and why does it need to be injected this way.

packages/mui-material-next/README.md

@@ -0,0 +1,5 @@
+# @mui/material-next
+
+Material Design components built using @mui/core.
+
+This package is a nursery for components that will ultimately replace the @mui/material ones.

packages/mui-material-next/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@mui/material-next",
+  "version": "6.0.0-alpha.0",
+  "private": false,
+  "author": "Material-UI Team",
+  "description": "Material Design components built using @mui/core.",
+  "main": "./src/index.ts",
+  "keywords": [
+    "react",
+    "react-component",
+    "material-ui",
+    "material design"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui-org/material-ui.git",
+    "directory": "packages/mui-material-next"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui-org/material-ui/issues"
+  },
+  "homepage": "https://material-ui.com/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/material-ui"
+  },
+  "scripts": {
+    "build": "yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files",
+    "build:modern": "node ../../scripts/build modern",
+    "build:node": "node ../../scripts/build node",
+    "build:stable": "node ../../scripts/build stable",
+    "build:copy-files": "node ../../scripts/copy-files.js",
+    "build:types": "node ../../scripts/buildTypes",
+    "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
+    "release": "yarn build && npm publish build --tag next",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material-next/**/*.test.{js,ts,tsx}'",
+    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json",
+    "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@types/react": "^16.8.6 || ^17.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@emotion/react": {
+      "optional": true
+    },
+    "@emotion/styled": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.14.8",
+    "@mui/core": "5.0.0-alpha.45",
+    "@mui/system": "5.0.0-rc.0",
+    "@mui/types": "7.0.0-rc.0",
+    "@mui/utils": "5.0.0-rc.0",
+    "@popperjs/core": "^2.4.4",
+    "@types/react-transition-group": "^4.2.0",
+    "clsx": "^1.1.1",
+    "csstype": "^3.0.8",
+    "hoist-non-react-statics": "^3.3.2",
+    "prop-types": "^15.7.2",
+    "react-is": "^17.0.2",
+    "react-transition-group": "^4.4.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}

packages/mui-material-next/src/index.test.js

@@ -0,0 +1,20 @@
+/* eslint import/namespace: ['error', { allowComputed: true }] */
+/**
+ * Important: This test also serves as a point to
+ * import the entire lib for coverage reporting
+ */
+
+import { expect } from 'chai';
+import * as materialNext from './index';
+
+describe('@mui/material-next', () => {
+  it('should have exports', () => {
+    expect(typeof materialNext).to.equal('object');
+  });
+
+  it('should not have undefined exports', () => {
+    Object.keys(materialNext).forEach((exportKey) =>
+      expect(Boolean(materialNext[exportKey])).to.equal(true),
+    );
+  });
+});

packages/mui-material-next/src/index.ts

@@ -0,0 +1 @@
+export default () => {};

packages/mui-material-next/tsconfig.build.json

@@ -0,0 +1,19 @@
+{
+  // This config is for emitting declarations (.d.ts) only
+  // Actual .ts source files are transpiled via babel
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "outDir": "build",
+    "rootDir": "./src"
+  },
+  "include": ["./src/**/*.ts*"],
+  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
+  "references": [
+    { "path": "../mui-core/tsconfig.build.json" },
+    { "path": "../mui-system/tsconfig.build.json" }
+  ]
+}

packages/mui-material-next/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src/**/*"]
+}

scripts/generateProptypes.ts

@@ -307,6 +307,7 @@ async function run(argv: HandlerArgv) {
       path.resolve(__dirname, '../packages/mui-core/src'),
       path.resolve(__dirname, '../packages/mui-material/src'),
       path.resolve(__dirname, '../packages/mui-lab/src'),
+      path.resolve(__dirname, '../packages/mui-material-next/src'),
     ].map((folderPath) =>
       glob('+([A-Z])*/+([A-Z])*.*@(d.ts|ts|tsx)', {
         absolute: true,

scripts/sizeSnapshot/webpack.config.js

@@ -52,6 +52,18 @@ async function getWebpackEntries() {
     },
   );
 
+  const materialNextPackagePath = path.join(workspaceRoot, 'packages/mui-material-next/build');
+  const materialNextComponents = (
+    await glob(path.join(materialNextPackagePath, '([A-Z])*/index.js'))
+  ).map((componentPath) => {
+    const componentName = path.basename(path.dirname(componentPath));
+
+    return {
+      name: componentName,
+      path: path.relative(workspaceRoot, path.dirname(componentPath)),
+    };
+  });
+
   return [
     {
       // WARNING: Changing the name will break tracking of bundle size over time
@@ -125,6 +137,11 @@ async function getWebpackEntries() {
       name: '@material-ui/core.legacy',
       path: path.join(path.relative(workspaceRoot, materialPackagePath), 'legacy/index.js'),
     },
+    {
+      name: '@mui/material-next',
+      path: path.join(path.relative(workspaceRoot, materialNextPackagePath), 'index.js'),
+    },
+    ...materialNextComponents,
   ];
 }
 

test/karma.tests.js

@@ -40,3 +40,10 @@ coreContext.keys().forEach(coreContext);
 
 const utilsContext = require.context('../packages/mui-utils/src/', true, /\.test\.(js|ts|tsx)$/);
 utilsContext.keys().forEach(utilsContext);
+
+const materialNextContext = require.context(
+  '../packages/mui-material-next/src/',
+  true,
+  /\.test\.(js|ts|tsx)$/,
+);
+materialNextContext.keys().forEach(materialNextContext);

tsconfig.json

@@ -33,6 +33,8 @@
       "@mui/core/*": ["./packages/mui-core/src/*"],
       "@mui/docs": ["./packages/mui-docs/src"],
       "@mui/docs/*": ["./packages/mui-docs/src/*"],
+      "@mui/material-next": ["./packages/mui-material-next/src"],
+      "@mui/material-next/*": ["./packages/mui-material-next/src/*"],
       "test/*": ["./test/*"],
       "typescript-to-proptypes": ["./packages/typescript-to-proptypes/src"]
     },

webpackBaseConfig.js

@@ -20,6 +20,7 @@ module.exports = {
       '@mui/private-theming': path.resolve(__dirname, './packages/mui-private-theming/src'),
       '@mui/core': path.resolve(__dirname, './packages/mui-core/src'),
       '@mui/utils': path.resolve(__dirname, './packages/mui-utils/src'),
+      '@mui/material-next': path.resolve(__dirname, './packages/mui-material-next/src'),
       'typescript-to-proptypes': path.resolve(__dirname, './packages/typescript-to-proptypes/src'),
       docs: path.resolve(__dirname, './docs'),
     },