[core] Rename packages (mui#28049)

.circleci/config.yml

@@ -157,8 +157,8 @@ jobs:
 
             if [ $FOLDER_COMMIT = $LATEST_COMMIT ]; then
               echo "changes, let's run the tests"
-              yarn workspace @material-ui/icons build:typings
-              yarn workspace @material-ui/icons test:built-typings
+              yarn workspace @mui/icons-material build:typings
+              yarn workspace @mui/icons-material test:built-typings
             else
               echo "no changes"
             fi
@@ -248,8 +248,8 @@ jobs:
       - run:
           name: Test module augmenation
           command: |
-            yarn workspace @material-ui/core typescript:module-augmentation
-            yarn workspace @material-ui/unstyled typescript:module-augmentation
+            yarn workspace @mui/material typescript:module-augmentation
+            yarn workspace @mui/core typescript:module-augmentation
 
       - restore_cache:
           name: Restore generated declaration files
@@ -367,8 +367,8 @@ jobs:
           name: yarn test:e2e
           command: yarn test:e2e
       - run:
-          name: Can we generate the @material-ui/core umd build?
-          command: yarn workspace @material-ui/core build:umd
+          name: Can we generate the @mui/material umd build?
+          command: yarn workspace @mui/material build:umd
       - run:
           name: Test umd release
           command: yarn test:umd
@@ -422,7 +422,7 @@ jobs:
       - install_js
       - run:
           name: Build packages for fixtures
-          command: yarn lerna run --scope "@material-ui/*" build
+          command: yarn lerna run --scope "@mui/*" build
       - persist_to_workspace:
           root: packages
           paths:

.codesandbox/ci.json

@@ -17,18 +17,18 @@
     "packages/material-ui-styled-engine-sc"
   ],
   "publishDirectory": {
-    "@material-ui/codemod": "packages/material-ui-codemod/build",
-    "@material-ui/core": "packages/material-ui/build",
-    "@material-ui/icons": "packages/material-ui-icons/build",
-    "@material-ui/lab": "packages/material-ui-lab/build",
-    "@material-ui/styles": "packages/material-ui-styles/build",
-    "@material-ui/styled-engine": "packages/material-ui-styled-engine/build",
-    "@material-ui/styled-engine-sc": "packages/material-ui-styled-engine-sc/build",
-    "@material-ui/system": "packages/material-ui-system/build",
-    "@material-ui/private-theming": "packages/material-ui-private-theming/build",
-    "@material-ui/types": "packages/material-ui-types/build",
-    "@material-ui/utils": "packages/material-ui-utils/build",
-    "@material-ui/unstyled": "packages/material-ui-unstyled/build"
+    "@mui/codemod": "packages/material-ui-codemod/build",
+    "@mui/material": "packages/material-ui/build",
+    "@mui/icons-material": "packages/material-ui-icons/build",
+    "@mui/lab": "packages/material-ui-lab/build",
+    "@mui/styles": "packages/material-ui-styles/build",
+    "@mui/styled-engine": "packages/material-ui-styled-engine/build",
+    "@mui/styled-engine-sc": "packages/material-ui-styled-engine-sc/build",
+    "@mui/system": "packages/material-ui-system/build",
+    "@mui/private-theming": "packages/material-ui-private-theming/build",
+    "@mui/types": "packages/material-ui-types/build",
+    "@mui/utils": "packages/material-ui-utils/build",
+    "@mui/core": "packages/material-ui-unstyled/build"
   },
   "sandboxes": [
     "material-ui-issue-dh2yh",

.eslintrc.js

@@ -5,7 +5,7 @@ const forbidTopLevelMessage = [
   'See https://github.com/mui-org/material-ui/pull/24147 for the kind of win it can unlock.',
 ].join('\n');
 // This only applies to packages published from this monorepo.
-// If you build a library around `@material-ui/core` you can safely use `createStyles` without running into the same issue as we are.
+// If you build a library around `@mui/material` you can safely use `createStyles` without running into the same issue as we are.
 const forbidCreateStylesMessage =
   'Use `MuiStyles<ClassKey, Props>` instead if the styles are exported. Otherwise use `as const` assertions. ' +
   '`createStyles` will lead to inlined, at-compile-time-resolved type-imports. ' +
@@ -63,19 +63,19 @@ module.exports = {
       'error',
       {
         patterns: [
-          '@material-ui/*/*/*',
+          '@mui/*/*/*',
           // Begin block: Packages with files instead of packages in the top level
           // Importing from the top level pulls in CommonJS instead of ES modules
           // Allowing /icons as to reduce cold-start of dev builds significantly.
           // There's nothing to tree-shake when importing from /icons this way:
-          // '@material-ui/icons/*/',
-          '@material-ui/system/*',
-          '@material-ui/utils/*',
+          // '@mui/icons-material/*/',
+          '@mui/system/*',
+          '@mui/utils/*',
           // End block
           // Macros are fine since their import path is transpiled away
-          '!@material-ui/utils/macros',
-          '@material-ui/utils/macros/*',
-          '!@material-ui/utils/macros/*.macro',
+          '!@mui/utils/macros',
+          '@mui/utils/macros/*',
+          '!@mui/utils/macros/*.macro',
         ],
       },
     ],
@@ -262,9 +262,9 @@ module.exports = {
           {
             patterns: [
               // Allow deeper imports for TypeScript types. TODO?
-              '@material-ui/*/*/*/*',
+              '@mui/*/*/*/*',
               // Macros are fine since they're transpiled into something else
-              '!@material-ui/utils/macros/*.macro',
+              '!@mui/utils/macros/*.macro',
             ],
           },
         ],
@@ -281,25 +281,25 @@ module.exports = {
           {
             paths: [
               {
-                name: '@material-ui/core/styles',
+                name: '@mui/material/styles',
                 importNames: ['createStyles'],
                 message: forbidCreateStylesMessage,
               },
               {
-                name: '@material-ui/styles',
+                name: '@mui/styles',
                 importNames: ['createStyles'],
                 message: forbidCreateStylesMessage,
               },
               {
-                name: '@material-ui/styles/createStyles',
+                name: '@mui/styles/createStyles',
                 message: forbidCreateStylesMessage,
               },
             ],
             patterns: [
               // Allow deeper imports for TypeScript types. TODO?
-              '@material-ui/*/*/*/*',
+              '@mui/*/*/*/*',
               // Macros are fine since they're transpiled into something else
-              '!@material-ui/utils/macros/*.macro',
+              '!@mui/utils/macros/*.macro',
             ],
           },
         ],
@@ -360,11 +360,11 @@ module.exports = {
           {
             paths: [
               {
-                name: '@material-ui/core',
+                name: '@mui/material',
                 message: forbidTopLevelMessage,
               },
               {
-                name: '@material-ui/lab',
+                name: '@mui/lab',
                 message: forbidTopLevelMessage,
               },
             ],

.github/FUNDING.yml

@@ -4,5 +4,5 @@ github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, u
 patreon: # Replace with a single Patreon username
 open_collective: material-ui
 ko_fi: # Replace with a single Ko-fi username
-tidelift: npm/@material-ui/core
+tidelift: npm/@mui/material
 custom: # Replace with a single custom sponsorship URL

.github/ISSUE_TEMPLATE/1.bug.md

@@ -54,14 +54,14 @@ Steps:
 ## Your Environment 🌎
 
 <!--
-  Run `npx @material-ui/envinfo` and post the results.
+  Run `npx @mui/envinfo` and post the results.
   If you encounter issues with TypeScript please include the used tsconfig.
 -->
 <details>
-  <summary>`npx @material-ui/envinfo`</summary>
+  <summary>`npx @mui/envinfo`</summary>
 
 ```
   Don't forget to mention which browser you used.
-  Output from `npx @material-ui/envinfo` goes here.
+  Output from `npx @mui/envinfo` goes here.
 ```
 </details>

CONTRIBUTING.md

@@ -269,10 +269,10 @@ index 791a7da1f4..a5db13b414 100644
 @@ -61,7 +61,7 @@
    "dependencies": {
      "@babel/runtime": "^7.4.4",
-     "@material-ui/styled-engine": "^5.0.0-alpha.16",
--    "@material-ui/core": "^5.0.0-alpha.15",
-+    "@material-ui/core": "https://pkg.csb.dev/mui-org/material-ui/commit/371c952b/@material-ui/core",
-     "@material-ui/system": "^5.0.0-alpha.16",
+     "@mui/styled-engine": "^5.0.0-alpha.16",
+-    "@mui/material": "^5.0.0-alpha.15",
++    "@mui/material": "https://pkg.csb.dev/mui-org/material-ui/commit/371c952b/@mui/material",
+     "@mui/system": "^5.0.0-alpha.16",
 ```
 
 Alternatively, you can open the Netlify preview of the documentation, and open any demo in Codesandbox. The documentation automatically configures the dependencies to use the preview packages.

README.md

@@ -9,9 +9,9 @@
 Quickly build beautiful [React](https://reactjs.org/) apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with [Material Design](https://material.io/design/introduction/).
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui-org/material-ui/blob/master/LICENSE)
-[![npm latest package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core)
-[![npm next package](https://img.shields.io/npm/v/@material-ui/core/next.svg)](https://www.npmjs.com/package/@material-ui/core)
-[![npm downloads](https://img.shields.io/npm/dm/@material-ui/core.svg)](https://www.npmjs.com/package/@material-ui/core)
+[![npm latest package](https://img.shields.io/npm/v/@mui/material/latest.svg)](https://www.npmjs.com/package/@mui/material)
+[![npm next package](https://img.shields.io/npm/v/@mui/material/next.svg)](https://www.npmjs.com/package/@mui/material)
+[![npm downloads](https://img.shields.io/npm/dm/@mui/material.svg)](https://www.npmjs.com/package/@mui/material)
 [![CircleCI](https://img.shields.io/circleci/project/github/mui-org/material-ui/next.svg)](https://app.circleci.com/pipelines/github/mui-org/material-ui?branch=next)
 [![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/next.svg)](https://codecov.io/gh/mui-org/material-ui/branch/next)
 [![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI)
@@ -24,16 +24,16 @@ Quickly build beautiful [React](https://reactjs.org/) apps. Material-UI is a sim
 
 ## Installation
 
-Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core).
+Material-UI is available as an [npm package](https://www.npmjs.com/package/@mui/material).
 
 **[Stable channel v4](https://material-ui.com/)**
 
 ```sh
 // with npm
-npm install @material-ui/core
+npm install @mui/material
 
 // with yarn
-yarn add @material-ui/core
+yarn add @mui/material
 ```
 
 ⚠️ All ongoing work has moved to v5. The development of v4 is limited to important bug fixes, security patches and easing the upgrade path to v5.
@@ -42,10 +42,10 @@ yarn add @material-ui/core
 
 ```sh
 // with npm
-npm install @material-ui/core@next @emotion/react @emotion/styled
+npm install @mui/material@next @emotion/react @emotion/styled
 
 // with yarn
-yarn add @material-ui/core@next @emotion/react @emotion/styled
+yarn add @mui/material@next @emotion/react @emotion/styled
 ```
 
 <details>
@@ -107,7 +107,7 @@ Here is a quick example to get you started, **it's all you need**:
 ```jsx
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 function App() {
   return <Button variant="contained">Hello World</Button>;

TYPESCRIPT_CONVENTION.md

@@ -2,7 +2,7 @@
 
 ## Component
 
-> **Public components** are considered all components exported from `@material-ui/core` or `@material-ui/lab`.
+> **Public components** are considered all components exported from `@mui/material` or `@mui/lab`.
 >
 > **Internal components** are considered all components that are not exported from the packages, but only used in some public component. There is no need to have `sx` prop on these components
 

azure-pipelines.yml

@@ -70,15 +70,15 @@ jobs:
         displayName: Cache node_modules/.cache
 
       - script: |
-          yarn lerna run --ignore @material-ui/icons --parallel --scope "@material-ui/*" build
-        displayName: 'build @material-ui packages'
+          yarn lerna run --ignore @mui/icons-material --parallel --scope "@mui/*" build
+        displayName: 'build @mui packages'
 
       - script: |
           cd packages/material-ui/build
           npm version 0.0.0-canary.$(Build.SourceVersion) --no-git-tag-version
           npm pack
-          mv material-ui-core-0.0.0-canary.$(Build.SourceVersion).tgz ../../../material-ui-core.tgz
-        displayName: 'create @material-ui/core canary distributable'
+          mv mui-material-0.0.0-canary.$(Build.SourceVersion).tgz ../../../mui-material.tgz
+        displayName: 'create @mui/material canary distributable'
 
       - task: S3Upload@1
         inputs:
@@ -96,7 +96,7 @@ jobs:
       - task: PublishPipelineArtifact@1
         inputs:
           artifactName: 'canaries'
-          targetPath: 'material-ui-core.tgz'
+          targetPath: 'mui-material.tgz'
 
       - script: |
           yarn size:snapshot

babel.config.js

@@ -9,17 +9,17 @@ function resolveAliasPath(relativeToBabelConf) {
 }
 
 const defaultAlias = {
-  '@material-ui/core': resolveAliasPath('./packages/material-ui/src'),
-  '@material-ui/docs': resolveAliasPath('./packages/material-ui-docs/src'),
-  '@material-ui/icons': resolveAliasPath('./packages/material-ui-icons/lib'),
-  '@material-ui/lab': resolveAliasPath('./packages/material-ui-lab/src'),
-  '@material-ui/styled-engine': resolveAliasPath('./packages/material-ui-styled-engine/src'),
-  '@material-ui/styled-engine-sc': resolveAliasPath('./packages/material-ui-styled-engine-sc/src'),
-  '@material-ui/styles': resolveAliasPath('./packages/material-ui-styles/src'),
-  '@material-ui/system': resolveAliasPath('./packages/material-ui-system/src'),
-  '@material-ui/private-theming': resolveAliasPath('./packages/material-ui-private-theming/src'),
-  '@material-ui/unstyled': resolveAliasPath('./packages/material-ui-unstyled/src'),
-  '@material-ui/utils': resolveAliasPath('./packages/material-ui-utils/src'),
+  '@mui/material': resolveAliasPath('./packages/material-ui/src'),
+  '@mui/docs': resolveAliasPath('./packages/material-ui-docs/src'),
+  '@mui/icons-material': resolveAliasPath('./packages/material-ui-icons/lib'),
+  '@mui/lab': resolveAliasPath('./packages/material-ui-lab/src'),
+  '@mui/styled-engine': resolveAliasPath('./packages/material-ui-styled-engine/src'),
+  '@mui/styled-engine-sc': resolveAliasPath('./packages/material-ui-styled-engine-sc/src'),
+  '@mui/styles': resolveAliasPath('./packages/material-ui-styles/src'),
+  '@mui/system': resolveAliasPath('./packages/material-ui-system/src'),
+  '@mui/private-theming': resolveAliasPath('./packages/material-ui-private-theming/src'),
+  '@mui/core': resolveAliasPath('./packages/material-ui-unstyled/src'),
+  '@mui/utils': resolveAliasPath('./packages/material-ui-utils/src'),
 };
 
 const productionPlugins = [

benchmark/browser/README.md

@@ -39,7 +39,7 @@ Box Theme-UI:
   172 ±8%
 Box Chakra-UI:
   115 ±8%
-styled-components Box + @material-ui/system:
+styled-components Box + @mui/system:
   194 ±9%
 styled-components Box + styled-system:
   162 ±10%

benchmark/browser/scenarios/box-material-ui/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Box from '@mui/material/Box';
 
 export default function SxPropBoxMaterialUI() {
   return (

benchmark/browser/scenarios/make-styles/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { createTheme } from '@material-ui/core/styles';
-import { makeStyles } from '@material-ui/styles';
+import { createTheme } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 
 const defaultTheme = createTheme();
 

benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';
-import { spacing, palette, typography, compose } from '@material-ui/system';
+import { spacing, palette, typography, compose } from '@mui/system';
 
 const materialSystem = compose(palette, spacing, typography);
 const materialSystemTheme = createTheme();
@@ -20,7 +20,7 @@ export default function StyledComponentsBoxMaterialUISystem() {
           fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
           p={[2, 3, 4]}
         >
-          @material-ui/system
+          @mui/system
         </BoxMaterialSystem>
       ))}
     </StyledComponentsThemeProvider>

benchmark/browser/scenarios/styled-components-box-styled-system/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';

benchmark/browser/scenarios/styled-emotion/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
 import emotionStyled from '@emotion/styled';
 
 const Div = emotionStyled('div')(

benchmark/browser/scenarios/styled-material-ui/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 const Div = styled('div')(
   ({ theme }) => `