[charts] Setup the repository for charts-pro

.codesandbox/ci.json

@@ -11,6 +11,7 @@
     "packages/x-date-pickers",
     "packages/x-date-pickers-pro",
     "packages/x-charts",
+    "packages/x-charts-pro",
     "packages/x-tree-view"
   ],
   "publishDirectory": {
@@ -22,6 +23,7 @@
     "@mui/x-date-pickers": "packages/x-date-pickers/build",
     "@mui/x-date-pickers-pro": "packages/x-date-pickers-pro/build",
     "@mui/x-charts": "packages/x-charts/build",
+    "@mui/x-charts-pro": "packages/x-charts-pro/build",
     "@mui/x-tree-view": "packages/x-tree-view/build",
     "@mui/x-tree-view-pro": "packages/x-tree-view-pro/build"
   },

.eslintrc.js

@@ -55,6 +55,10 @@ const buildPackageRestrictedImports = (packageName, root, allowRootImports = tru
                     name: '@mui/x-charts',
                     message: 'Use deeper import instead',
                   },
+                  {
+                    name: '@mui/x-charts-pro',
+                    message: 'Use deeper import instead',
+                  },
                   {
                     name: '@mui/x-codemod',
                     message: 'Use deeper import instead',
@@ -207,6 +211,7 @@ module.exports = {
       },
     },
     ...buildPackageRestrictedImports('@mui/x-charts', 'x-charts', false),
+    ...buildPackageRestrictedImports('@mui/x-charts-pro', 'x-charts-pro', false),
     ...buildPackageRestrictedImports('@mui/x-codemod', 'x-codemod', false),
     ...buildPackageRestrictedImports('@mui/x-data-grid', 'x-data-grid'),
     ...buildPackageRestrictedImports('@mui/x-data-grid-pro', 'x-data-grid-pro'),

.mocharc.js

@@ -9,6 +9,7 @@ module.exports = {
     'docs/.next/**',
     // x-charts requires 'tsx/cjs' which conflict with the babel date-fns override for picker tests
     'packages/x-charts/**',
+    'packages/x-charts-pro/**',
   ],
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.

babel.config.js

@@ -15,6 +15,7 @@ const defaultAlias = {
   '@mui/x-date-pickers': resolveAliasPath('./packages/x-date-pickers/src'),
   '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'),
   '@mui/x-charts': resolveAliasPath('./packages/x-charts/src'),
+  '@mui/x-charts-pro': resolveAliasPath('./packages/x-charts-pro/src'),
   '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'),
   '@mui/x-tree-view-pro': resolveAliasPath('./packages/x-tree-view-pro/src'),
   '@mui/material-nextjs': '@mui/monorepo/packages/mui-material-nextjs/src',

docs/pages/_app.js

@@ -58,6 +58,7 @@ ponyfillGlobal.muiDocConfig = {
       '@mui/x-date-pickers': getMuiPackageVersion('x-date-pickers', muiCommitRef),
       '@mui/x-date-pickers-pro': getMuiPackageVersion('x-date-pickers-pro', muiCommitRef),
       '@mui/x-charts': getMuiPackageVersion('x-charts', muiCommitRef),
+      '@mui/x-charts-pro': getMuiPackageVersion('x-charts-pro', muiCommitRef),
       '@mui/x-tree-view': getMuiPackageVersion('x-tree-view', muiCommitRef),
       '@mui/x-tree-view-pro': getMuiPackageVersion('x-tree-view-pro', muiCommitRef),
       exceljs: 'latest',

docs/scripts/createXTypeScriptProjects.ts

@@ -317,6 +317,25 @@ export const createXTypeScriptProjects = () => {
     }),
   );
 
+  // TODO x-charts-pro uncomment when making the package public
+  // projects.set(
+  //   'x-charts-pro',
+  //   createXTypeScriptProject({
+  //     name: 'x-charts-pro',
+  //     rootPath: path.join(workspaceRoot, 'packages/x-charts-pro'),
+  //     entryPointPath: 'src/index.ts',
+  //     documentationFolderName: 'charts',
+  //     getComponentsWithPropTypes: getComponentPaths({
+  //       folders: ['src'],
+  //       includeUnstableComponents: true,
+  //     }),
+  //     getComponentsWithApiDoc: getComponentPaths({
+  //       folders: ['src'],
+  //       includeUnstableComponents: true,
+  //     }),
+  //   }),
+  // );
+
   projects.set(
     'x-tree-view',
     createXTypeScriptProject({

packages/x-charts-pro/.mocharc.js

@@ -0,0 +1,34 @@
+// We can't import the `.mocharc.js` of the monorepo, otherwise we trigger its `setupBabel`.
+module.exports = {
+  extension: ['js', 'ts', 'tsx'],
+  ignore: [
+    '**/build/**',
+    '**/node_modules/**',
+    // Mocha seems to ignore .next anyway (maybe because dotfiles?).
+    // We're leaving this to make sure.
+    'docs/.next/**',
+  ],
+  recursive: true,
+  timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.
+  reporter: 'dot',
+  require: [
+    require.resolve('../../test/utils/setupBabel'),
+    // Not strictly necessary, but just to keep the babel plugins in the loop for the tests
+    // For compiling pure ESM modules that @babel/register can't handle.
+    // See https://babeljs.io/docs/babel-register#experimental-babel-8-implementation
+    //   Note: @babel/register does not support compiling native Node.js ES modules on the fly,
+    //   since currently there is no stable API for intercepting ES modules loading.
+    require.resolve('tsx/cjs'),
+    require.resolve('../../test/utils/setupJSDOM'),
+  ],
+  'watch-ignore': [
+    // default
+    '.git',
+    // node_modules can be nested with workspaces
+    '**/node_modules/**',
+    // Unrelated directories with a large number of files
+    '**/build/**',
+    'docs/.next/**',
+  ],
+  spec: ['packages/x-charts/**/*.test.{js,ts,tsx}'],
+};

packages/x-charts-pro/LICENSE

@@ -0,0 +1,11 @@
+Commercial License
+
+Copyright (c) 2020 Material-UI SAS
+
+MUI X Pro (https://mui.com/pricing/) is commercial software. You MUST agree to the
+End User License Agreement (EULA: https://mui.com/r/x-license-eula) to be able to
+use the software.
+
+This means that you either need to purchase a commercial license at
+https://mui.com/r/x-get-license?scope=pro or be eligible for the Evaluation (trial)
+licenses detailed at https://mui.com/r/x-license-trial.

packages/x-charts-pro/README.md

@@ -0,0 +1,26 @@
+# MUI X Pro
+
+This package is the Pro plan edition of the chart components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+
+## Installation
+
+Install the package in your project directory with:
+
+```bash
+npm install @mui/x-charts-pro
+```
+
+This component has the following peer dependencies that you will need to install as well.
+
+```json
+"peerDependencies": {
+  "@mui/material": "^5.15.14",
+  "react": "^17.0.0 || ^18.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0"
+},
+```
+
+## Documentation
+
+Visit [https://mui.com/x/react-charts/](https://mui.com/x/react-charts/) to view the full documentation.

packages/x-charts-pro/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@mui/x-charts-pro",
+  "version": "7.5.0",
+  "description": "The community edition of the Charts components (MUI X).",
+  "author": "MUI Team",
+  "main": "./src/index.ts",
+  "license": "SEE LICENSE IN LICENSE",
+  "bugs": {
+    "url": "https://github.com/mui/mui-x/issues"
+  },
+  "homepage": "https://mui.com/x/react-charts/",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "directory": "build"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "mui",
+    "mui-x",
+    "material-ui",
+    "material design",
+    "charts"
+  ],
+  "scripts": {
+    "typescript": "tsc -p tsconfig.json",
+    "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files ",
+    "build:modern": "node ../../scripts/build.mjs modern",
+    "build:node": "node ../../scripts/build.mjs node",
+    "build:stable": "node ../../scripts/build.mjs stable",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:types": "node ../../scripts/buildTypes.mjs",
+    "prebuild": "rimraf build tsconfig.build.tsbuildinfo"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui/mui-x.git",
+    "directory": "packages/x-charts-pro"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.24.5",
+    "@mui/base": "^5.0.0-beta.40",
+    "@mui/system": "^5.15.14",
+    "@mui/utils": "^5.15.14",
+    "@mui/x-charts": "workspace:*",
+    "@mui/x-license": "workspace:*",
+    "@react-spring/rafz": "^9.7.3",
+    "@react-spring/web": "^9.7.3",
+    "clsx": "^2.1.1",
+    "d3-color": "^3.1.0",
+    "d3-delaunay": "^6.0.4",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "prop-types": "^15.8.1"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.15.14",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@emotion/react": {
+      "optional": true
+    },
+    "@emotion/styled": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@react-spring/core": "^9.7.3",
+    "@react-spring/shared": "^9.7.3",
+    "@types/d3-color": "^3.1.3",
+    "@types/d3-delaunay": "^6.0.4",
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-shape": "^3.1.6",
+    "@types/prop-types": "^15.7.12",
+    "csstype": "^3.1.3",
+    "rimraf": "^5.0.5"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./esm/index.js",
+      "default": "./esm/index.js"
+    },
+    "./*": {
+      "types": "./*/index.d.ts",
+      "import": "./esm/*/index.js",
+      "default": "./esm/*/index.js"
+    }
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

packages/x-charts-pro/src/index.ts

@@ -0,0 +1,8 @@
+import { LicenseInfo as LicenseInfoExport } from '@mui/x-license';
+/**
+ * @deprecated Use `@mui/x-license` package instead:
+ * @example import { LicenseInfo } from '@mui/x-license';
+ */
+export class LicenseInfo extends LicenseInfoExport {}
+
+export * from '@mui/x-charts';

packages/x-charts-pro/tsconfig.build.json

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

packages/x-charts-pro/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["mocha", "node", "@mui/material/themeCssVarsAugmentation"],
+    "noImplicitAny": false
+  },
+  "include": ["src/**/*", "../../test/utils/addChaiAssertions.ts"]
+}

packages/x-charts/src/ChartsText/ChartsText.tsx

@@ -41,7 +41,7 @@ function ChartsText(props: ChartsTextProps) {
       break;
   }
 
-  const transforms = [];
+  const transforms: string[] = [];
   // if (scaleToFit) {
   //   const lineWidth = wordsByLines[0].width;
   //   transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`);

packages/x-license/src/useLicenseVerifier/useLicenseVerifier.ts

@@ -17,7 +17,8 @@ export type MuiCommercialPackageName =
   | 'x-data-grid-pro'
   | 'x-data-grid-premium'
   | 'x-date-pickers-pro'
-  | 'x-tree-view-pro';
+  | 'x-tree-view-pro'
+  | 'x-charts-pro';
 
 export const sharedLicenseStatuses: {
   [packageName in MuiCommercialPackageName]?: {