Merge branch 'master' into windows-ci

.circleci/config.yml

@@ -23,50 +23,57 @@ commands:
         description: 'Set to true if you intend to use any browser (e.g. with playwright).'
 
     steps:
-      - run:
-          name: View install environment
-          command: |
-            node --version
-            yarn --version
       - restore_cache:
-          name: Restore yarn cache
+          name: Restore pnpm Package Cache
           keys:
-            - v11-yarn-{{ checksum "yarn.lock" }}
-            - v0-next-{{ checksum "yarn.lock" }}
-      - run:
-          name: Set yarn cache folder
-          command: |
-            # Keep path in sync with `save_cache` for key "v8-yarn-"
-            yarn config set cache-folder /tmp/yarn-cache
-            # Debug information
-            yarn cache dir
-            yarn cache list
+            - pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
+
+      - when:
+          condition: << parameters.browsers >>
+          steps:
+            - run: corepack enable
+      - when:
+          condition:
+            not: << parameters.browsers >>
+          steps:
+            # See https://stackoverflow.com/a/73411601
+            - run: corepack enable --install-directory ~/bin
+
       - when:
           condition: << parameters.browsers >>
           steps:
             - run:
                 name: Prepare playwright hash
-                command: yarn --json list --pattern playwright > /tmp/playwright_info.json
+                command: pnpm list --json --filter playwright > /tmp/playwright_info.json
             - store_artifacts:
                 name: Debug playwright hash
                 path: /tmp/playwright_info.json
             - restore_cache:
                 name: Restore playwright cache
                 keys:
                   - v5-playwright-{{ arch }}-{{ checksum "/tmp/playwright_info.json" }}
+      - run:
+          name: View install environment
+          command: |
+            node --version
+            pnpm --version
       - run:
           name: Install js dependencies
-          command: yarn install
-          environment:
-            PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: <<# parameters.browsers >>0<</ parameters.browsers >><<^ parameters.browsers >>1<</ parameters.browsers >>
+          command: pnpm install
+      - when:
+          condition: << parameters.browsers >>
+          steps:
+            - run:
+                name: Install playwright browsers
+                command: pnpm playwright install --with-deps
+                environment:
+                  PLAYWRIGHT_BROWSERS_PATH: /tmp/pw-browsers
 
       - save_cache:
-          name: Save yarn cache
-          key: v11-yarn-{{ checksum "yarn.lock" }}
+          name: Save pnpm Package Cache
+          key: pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
           paths:
-            # Keep path in sync with "Set yarn cache folder"
-            # Can't use environment variables for `save_cache` paths (tested in https://app.circleci.com/pipelines/github/mui/material-ui/37813/workflows/5b1e207f-ac8b-44e7-9ba4-d0f9a01f5c55/jobs/223370)
-            - /tmp/yarn-cache
+            - node_modules
       - when:
           condition: << parameters.browsers >>
           steps:
@@ -89,7 +96,13 @@ jobs:
           command: git add -A && git diff --exit-code --staged
       - run:
           name: Check for duplicated packages
-          command: yarn deduplicate
+          command: |
+            if [[ $(git diff --name-status master | grep pnpm.lock) == "" ]];
+            then
+                echo "no changes to dependencies detected, skipping..."
+            else
+                pnpm dedupe --check
+            fi
 
   test_lint:
     <<: *defaults
@@ -98,47 +111,62 @@ jobs:
       - install_js
       - run:
           name: Eslint
-          command: yarn eslint
+          command: pnpm eslint
       - run:
           name: Lint JSON
-          command: yarn jsonlint
+          command: pnpm jsonlint
       - run:
           name: Lint Markdown
-          command: yarn markdownlint
+          command: pnpm markdownlint
   test_types:
     <<: *defaults
     steps:
       - checkout
       - install_js
       - run:
           name: Check Typescript types
-          command: yarn check-types
+          command: pnpm check-types
   test_static:
     <<: *defaults
     steps:
       - checkout
       - install_js
       - run:
-          name: '`yarn prettier:all` changes committed?'
+          name: '`pnpm prettier:all` changes committed?'
           command: |
-            yarn prettier:all
-            yarn check-changes
+            pnpm prettier:all
+            pnpm check-changes
       - run:
-          name: '`yarn jsonSchemas` changes committed?'
+          name: '`pnpm jsonSchemas` changes committed?'
           command: |
-            yarn jsonSchemas
-            yarn check-changes
+            pnpm jsonSchemas
+            pnpm check-changes
       - run:
-          name: '`yarn docs:build:api` changes committed?'
+          name: '`pnpm docs:build:api` changes committed?'
           command: |
-            yarn docs:build:api
-            yarn check-changes
+            pnpm docs:build:api
+            pnpm check-changes
 
   test_unit:
     <<: *defaults
+
+    steps:
+      - checkout
+      - install_js:
+          browsers: false
+      - run:
+          name: 'Build packages'
+          command: pnpm release:build
+      - run:
+          name: Tests fake browser
+          command: pnpm test
+
+  test_integration:
+    <<: *defaults
     resource_class: 'large'
+    parallelism: 2
     docker:
-      - image: mcr.microsoft.com/playwright:v1.38.1-focal
+      - image: mcr.microsoft.com/playwright:v1.41.2-focal
         environment:
           NODE_ENV: test
           TOOLPAD_TEST_RETRIES: 1
@@ -149,23 +177,17 @@ jobs:
           browsers: true
       - run:
           name: 'Build packages'
-          command: yarn release:build
-      - save_cache:
-          name: Save Next.js cache
-          key: v0-next-{{ checksum "yarn.lock" }}
-          paths:
-            - packages/toolpad-app/.next/cache
-      - run:
-          name: Tests fake browser
-          command: yarn test
+          command: pnpm release:build
       - run:
           name: Tests real browser
-          command: yarn test:integration
+          command: pnpm test:integration
+      - store_test_results:
+          path: test/test-results/junit.xml
       - run:
           name: Upload screenshots to Argos CI
-          command: yarn test:argos
+          command: ARGOS_PARALLEL_TOTAL=${CIRCLE_NODE_TOTAL} pnpm test:argos
       - store_artifacts:
-          path: test-results
+          path: test/test-results
           destination: playwright-test-results
 
 workflows:
@@ -184,3 +206,6 @@ workflows:
       - test_unit:
           requires:
             - checkout
+      - test_integration:
+          requires:
+            - checkout

.codesandbox/ci.json

@@ -1,4 +1,5 @@
 {
+  "installCommand": "install:codesandbox",
   "buildCommand": "release:build",
   "node": "18",
   "packages": [

.eslintignore

@@ -1,5 +1,6 @@
 .next
 .yarn
+pnpm-lock.yaml
 /docs/export
 /docs/schemas
 /packages/**/dist

.eslintrc.js

@@ -1,10 +1,19 @@
 const baseline = require('@mui/monorepo/.eslintrc');
 const lodash = require('lodash');
+const path = require('path');
 
 const ALLOWED_LODASH_METHODS = new Set(['throttle', 'debounce', 'set']);
 
 module.exports = {
   ...baseline,
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: path.join(__dirname, './eslintWebpackResolverConfig.js'),
+      },
+      exports: {},
+    },
+  },
   extends: [
     ...baseline.extends,
     // Motivation: https://github.com/shian15810/eslint-plugin-typescript-enum#motivations
@@ -34,6 +43,10 @@ module.exports = {
             message:
               'Avoid kitchensink libraries like lodash-es. We prefer a slightly more verbose, but more universally understood javascript style',
           },
+          {
+            name: 'react-query',
+            message: 'deprecated package, use @tanstack/react-query instead.',
+          },
         ],
         patterns: [
           {
@@ -61,21 +74,39 @@ module.exports = {
         skipShapeProps: true,
       },
     ],
+    'import/no-unresolved': [
+      'error',
+      {
+        // https://github.com/import-js/eslint-plugin-import/issues/1739
+        ignore: ['\\.md\\?@mui/markdown$'],
+      },
+    ],
     'import/no-restricted-paths': [
-      // Disabling this rule for now, still need a few more refactors for it to pass
-      'off',
+      'error',
       {
         zones: [
           {
+            // Don't leak the internal runtime abstraction. It's on its way to be moved towards a separate package
             target: './packages/toolpad-app/src/runtime',
             from: './packages/toolpad-app/src/',
-            except: ['./runtime', './appDom', './types.ts'],
+            except: ['./runtime'],
           },
         ],
       },
     ],
   },
   overrides: [
+    {
+      files: ['examples/**/*'],
+      rules: {
+        // We use it for demonstration purposes
+        'no-console': 'off',
+        // Personal preference
+        'no-underscore-dangle': 'off',
+        // no node_modules in examples as they are not installed
+        'import/no-unresolved': 'off',
+      },
+    },
     {
       files: [
         'packages/create-toolpad-app/**/*',
@@ -99,7 +130,6 @@ module.exports = {
         'packages/toolpad-app/src/components/**/*',
         'packages/toolpad-app/src/toolpad/**/*',
         'packages/toolpad-app/src/runtime/**/*',
-        'packages/toolpad-app/reactDevtools/**/*',
       ],
       excludedFiles: ['*.spec.ts', '*.spec.tsx'],
       rules: {

.github/ISSUE_TEMPLATE/1.bug.yml

@@ -1,20 +1,18 @@
 name: Bug report 🐛
 description: Create a bug report for MUI Toolpad.
-labels: ['status: needs triage']
+labels: ['status: waiting for maintainer']
 body:
   - type: markdown
     attributes:
-      value: |
-        Please provide a searchable summary of the issue in the title above ⬆️.
-
-        Thanks for contributing by creating an issue! ❤️
-  - type: checkboxes
+      value: Thanks for contributing by creating an issue! ❤️ Please provide a searchable summary of the issue in the title above ⬆️.
+  - type: input
     attributes:
-      label: Duplicates
-      description: Please [search the history](https://github.com/mui/mui-toolpad/issues) to see if an issue already exists for the same problem.
-      options:
-        - label: I have searched the existing issues
-          required: true
+      label: Search keywords
+      description: |
+        Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/mui-toolpad/issues).
+        If your issue isn't a duplicate, great! Please list the keywords you used so people in the future can find this one more easily:
+    validations:
+      required: true
   - type: checkboxes
     attributes:
       label: Latest version
@@ -24,33 +22,33 @@ body:
           required: true
   - type: textarea
     attributes:
-      label: Steps to reproduce 🕹
+      label: Steps to reproduce
       description: |
-        Provide a link to a live example and an unambiguous set of steps to reproduce this bug.
-        Include code to reproduce, if relevant.
+        **⚠️ Issues that we can't reproduce can't be fixed.**
 
-        Issues that we can't reproduce will be closed.
+        Provide a link to a live example and an unambiguous set of steps to reproduce this bug. Include code to reproduce, if relevant.
       value: |
-        Steps:
+        Link to live example: (required)
 
+        Steps:
         1.
         2.
         3.
   - type: textarea
     attributes:
-      label: Current behavior 😯
+      label: Current behavior
       description: Describe what happens instead of the expected behavior.
   - type: textarea
     attributes:
-      label: Expected behavior 🤔
+      label: Expected behavior
       description: Describe what should happen.
   - type: textarea
     attributes:
-      label: Context 🔦
-      description: What are you trying to accomplish? How has this issue affected you? Providing context helps us come up with a solution that is more useful in the real world.
+      label: Context
+      description: What are you trying to accomplish? Providing context helps us come up with a solution that is more useful in the real world.
   - type: textarea
     attributes:
-      label: Your environment 🌎
+      label: Your environment
       description: Run `npx @mui/envinfo` and post the results. If you encounter issues with TypeScript please include the used tsconfig.
       value: |
         <details>