Merge branch 'adobe:main' into fix-ssr-on-react-18-strictmode

adobe · Oct 31, 2022 · 24e36e9 · 24e36e9
2 parents 925383e + 286dbcd
commit 24e36e9
Show file tree

Hide file tree

Showing 142 changed files with 5,645 additions and 3,411 deletions.
diff --git a/.circleci/comment.js b/.circleci/comment.js
@@ -1,4 +1,5 @@
 const Octokit = require('@octokit/rest');
+const fs = require('fs');
 
 const octokit = new Octokit({
   auth: `token ${process.env.GITHUB_TOKEN}`
@@ -64,6 +65,7 @@ async function run() {
   }
 
   if (pr != null) {
+    let diffs = fs.readFileSync('/tmp/dist/ts-diff.txt');
     await octokit.issues.createComment({
       owner: 'adobe',
       repo: 'react-spectrum',
@@ -75,5 +77,14 @@ async function run() {
   * [View the storybook-16](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-16/index.html)
   * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`
     });
+    if (diffs.length > 0) {
+      await octokit.issues.createComment({
+        owner: 'adobe',
+        repo: 'react-spectrum',
+        issue_number: pr,
+        body: `## API Changes
+${diffs}
+`});
+    }
   }
 }
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -216,6 +216,57 @@ jobs:
           name: lint
           command: yarn lint
 
+  ts-build-branch:
+    executor: rsp-large
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build branch apis
+          command: yarn build:api-branch
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - 'branch-api/'
+
+  ts-build-fork-point:
+    executor: rsp-large
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build fork-point apis
+          command: |
+            yarn build:api-branch --githash="origin/main" --output="base-api" && yarn build:api-branch && yarn compare:apis
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - 'base-api/'
+
+  ts-diff:
+    executor: rsp-large
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - attach_workspace:
+          at: /tmp/dist
+
+      - run:
+          name: compare api
+          command: |
+            mkdir -p dist
+            yarn --silent compare:apis --isCI --branch-api-dir="/tmp/dist/branch-api" --base-api-dir="/tmp/dist/base-api" | tee dist/ts-diff.txt
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - 'ts-diff.txt'
+
   storybook:
     executor: rsp-large
     steps:
@@ -349,6 +400,9 @@ jobs:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
+      - attach_workspace:
+          at: /tmp/dist
+
       - run:
           name: comment on pr
           command: |
@@ -398,6 +452,25 @@ workflows:
       - lint:
           requires:
             - install
+      - ts-build-fork-point:
+          requires:
+            - install
+          filters:
+            branches:
+              ignore: main
+      - ts-build-branch:
+          requires:
+            - install
+          filters:
+            branches:
+              ignore: main
+      - ts-diff:
+          requires:
+            - ts-build-fork-point
+            - ts-build-branch
+          filters:
+            branches:
+              ignore: main
       - storybook:
           requires:
             - install
@@ -410,12 +483,12 @@ workflows:
       - docs:
           requires:
             - install
-      - docs-production:
-          filters:
-            branches:
-              only: main
-          requires:
-            - install
+      # - docs-production:
+      #     filters:
+      #       branches:
+      #         only: main
+      #     requires:
+      #       - install
       - docs-verdaccio:
           filters:
             branches:
@@ -435,12 +508,12 @@ workflows:
             - storybook-16
             - storybook-17
             - docs
-      - deploy-production:
-          filters:
-            branches:
-              only: main
-          requires:
-            - docs-production
+      # - deploy-production:
+      #     filters:
+      #       branches:
+      #         only: main
+      #     requires:
+      #       - docs-production
       - deploy-verdaccio:
           requires:
             - docs-verdaccio
@@ -450,6 +523,7 @@ workflows:
             branches:
               ignore: main
           requires:
+            - ts-diff
             - deploy
       - comment:
           name: comment-verdaccio

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,7 +7,7 @@ rulesDirPlugin.RULES_DIR = './bin';
 module.exports = {
   plugins: ['react', 'rulesdir', 'jsx-a11y', 'react-hooks', 'jest', 'monorepo', 'eslint-plugin-rsp-rules'],
   extends: ['eslint:recommended'],
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaFeatures: {
       'legacyDecorators': true
@@ -149,7 +149,7 @@ module.exports = {
     'react/no-did-update-set-state': ERROR,
     'react/no-multi-comp': OFF,
     'react/no-set-state': OFF,
-    'react/no-unknown-property': ERROR,
+    'react/no-unknown-property': [ERROR, {ignore: ['prefix']}],
     'react/react-in-jsx-scope': ERROR,
     'react/require-extension': OFF,
     'react/jsx-equals-spacing': ERROR,

diff --git a/bin/sort-imports.js b/bin/sort-imports.js
@@ -10,77 +10,82 @@
  * governing permissions and limitations under the License.
  */
 
-module.exports = function (context) {
-  const sourceCode = context.getSourceCode();
-  let previousDeclaration = null;
+module.exports = {
+  meta: {
+    fixable: 'code'
+  },
+  create: function (context) {
+    const sourceCode = context.getSourceCode();
+    let previousDeclaration = null;
 
-  /**
-   * Gets the local name of the first imported module.
-   * @param {ASTNode} node - the ImportDeclaration node.
-   * @returns {?string} the local name of the first imported module.
-   */
-  function getFirstLocalMemberName(node) {
-    if (node.specifiers[0]) {
-      return node.specifiers[0].local.name.toLowerCase();
-    }
-    return null;
+    /**
+     * Gets the local name of the first imported module.
+     * @param {ASTNode} node - the ImportDeclaration node.
+     * @returns {?string} the local name of the first imported module.
+     */
+    function getFirstLocalMemberName(node) {
+      if (node.specifiers[0]) {
+        return node.specifiers[0].local.name.toLowerCase();
+      }
+      return null;
 
-  }
+    }
 
-  return {
-    ImportDeclaration(node) {
-      if (previousDeclaration) {
-        let currentLocalMemberName = getFirstLocalMemberName(node),
-          previousLocalMemberName = getFirstLocalMemberName(previousDeclaration);
+    return {
+      ImportDeclaration(node) {
+        if (previousDeclaration) {
+          let currentLocalMemberName = getFirstLocalMemberName(node),
+            previousLocalMemberName = getFirstLocalMemberName(previousDeclaration);
 
-        if (previousLocalMemberName &&
-          currentLocalMemberName &&
-          currentLocalMemberName < previousLocalMemberName
-        ) {
-          context.report({
-            node,
-            message: "Imports should be sorted alphabetically."
-          });
+          if (previousLocalMemberName &&
+            currentLocalMemberName &&
+            currentLocalMemberName < previousLocalMemberName
+          ) {
+            context.report({
+              node,
+              message: 'Imports should be sorted alphabetically.'
+            });
+          }
         }
-      }
 
-      const importSpecifiers = node.specifiers.filter(specifier => specifier.type === "ImportSpecifier");
-      const getSortableName = specifier => specifier.local.name.toLowerCase();
-      const firstUnsortedIndex = importSpecifiers.map(getSortableName).findIndex((name, index, array) => array[index - 1] > name);
+        const importSpecifiers = node.specifiers.filter(specifier => specifier.type === 'ImportSpecifier');
+        const getSortableName = specifier => specifier.local.name.toLowerCase();
+        const firstUnsortedIndex = importSpecifiers.map(getSortableName).findIndex((name, index, array) => array[index - 1] > name);
 
-      if (firstUnsortedIndex !== -1) {
-        context.report({
-          node: importSpecifiers[firstUnsortedIndex],
-          message: "Member '{{memberName}}' of the import declaration should be sorted alphabetically.",
-          data: { memberName: importSpecifiers[firstUnsortedIndex].local.name },
-          fix(fixer) {
-            return fixer.replaceTextRange(
-              [importSpecifiers[0].range[0], importSpecifiers[importSpecifiers.length - 1].range[1]],
-              importSpecifiers
-                // Clone the importSpecifiers array to avoid mutating it
-                .slice()
+        if (firstUnsortedIndex !== -1) {
+          context.report({
+            node: importSpecifiers[firstUnsortedIndex],
+            message: "Member '{{memberName}}' of the import declaration should be sorted alphabetically.",
+            data: {memberName: importSpecifiers[firstUnsortedIndex].local.name},
+            fix(fixer) {
+              return fixer.replaceTextRange(
+                [importSpecifiers[0].range[0], importSpecifiers[importSpecifiers.length - 1].range[1]],
+                importSpecifiers
+                  // Clone the importSpecifiers array to avoid mutating it
+                  .slice()
 
-                // Sort the array into the desired order
-                .sort((specifierA, specifierB) => {
-                  const aName = getSortableName(specifierA);
-                  const bName = getSortableName(specifierB);
-                  return aName > bName ? 1 : -1;
-                })
+                  // Sort the array into the desired order
+                  .sort((specifierA, specifierB) => {
+                    const aName = getSortableName(specifierA);
+                    const bName = getSortableName(specifierB);
+                    return aName > bName ? 1 : -1;
+                  })
 
-                // Build a string out of the sorted list of import specifiers and the text between the originals
-                .reduce((sourceText, specifier, index) => {
-                  const textAfterSpecifier = index === importSpecifiers.length - 1
-                    ? ""
-                    : sourceCode.getText().slice(importSpecifiers[index].range[1], importSpecifiers[index + 1].range[0]);
+                  // Build a string out of the sorted list of import specifiers and the text between the originals
+                  .reduce((sourceText, specifier, index) => {
+                    const textAfterSpecifier = index === importSpecifiers.length - 1
+                      ? ''
+                      : sourceCode.getText().slice(importSpecifiers[index].range[1], importSpecifiers[index + 1].range[0]);
 
-                  return sourceText + sourceCode.getText(specifier) + textAfterSpecifier;
-                }, "")
-            );
-          }
-        });
-      }
+                    return sourceText + sourceCode.getText(specifier) + textAfterSpecifier;
+                  }, '')
+              );
+            }
+          });
+        }
 
-      previousDeclaration = node;
-    }
-  };
+        previousDeclaration = node;
+      }
+    };
+  }
 };
diff --git a/examples/rsp-next-ts/components/ReorderableListView.tsx b/examples/rsp-next-ts/components/ReorderableListView.tsx
@@ -0,0 +1,59 @@
+import { Item, ListView, Text, useListData } from "@adobe/react-spectrum";
+import { useDragAndDrop } from "@react-spectrum/dnd";
+import Folder from "@spectrum-icons/illustrations/Folder";
+
+export default function ReorderableListView() {
+  let list = useListData({
+    initialItems: [
+      { id: "1", type: "file", name: "Adobe Photoshop" },
+      { id: "2", type: "file", name: "Adobe XD" },
+      { id: "3", type: "folder", name: "Documents", childNodes: [] },
+      { id: "4", type: "file", name: "Adobe InDesign" },
+      { id: "5", type: "folder", name: "Utilities", childNodes: [] },
+      { id: "6", type: "file", name: "Adobe AfterEffects" },
+    ],
+  });
+
+  // Append a generated key to the item type so they can only be reordered within this list and not dragged elsewhere.
+  let { dragAndDropHooks } = useDragAndDrop({
+    getItems(keys) {
+      return [...keys].map((key) => {
+        let item = list.getItem(key);
+        // Setup the drag types and associated info for each dragged item.
+        return {
+          "custom-app-type-reorder": JSON.stringify(item),
+          "text/plain": item.name,
+        };
+      });
+    },
+    acceptedDragTypes: ["custom-app-type-reorder"],
+    onReorder: async (e) => {
+      let { keys, target, dropOperation } = e;
+
+      if (target.dropPosition === "before") {
+        list.moveBefore(target.key, [...keys]);
+      } else if (target.dropPosition === "after") {
+        list.moveAfter(target.key, [...keys]);
+      }
+    },
+    getAllowedDropOperations: () => ["move"],
+  });
+
+  return (
+    <ListView
+      aria-label="Reorderable ListView"
+      selectionMode="multiple"
+      width="size-3600"
+      height="size-3600"
+      items={list.items}
+      dragAndDropHooks={dragAndDropHooks}
+    >
+      {(item) => (
+        <Item textValue={item.name}>
+          {item.type === "folder" && <Folder />}
+          <Text>{item.name}</Text>
+        </Item>
+      )}
+    </ListView>
+  );
+}
diff --git a/examples/rsp-next-ts/next.config.js b/examples/rsp-next-ts/next.config.js
@@ -13,6 +13,7 @@ const withTM = require("next-transpile-modules")([
   "@react-spectrum/datepicker",
   "@react-spectrum/dialog",
   "@react-spectrum/divider",
+  "@react-spectrum/dnd",
   "@react-spectrum/form",
   "@react-spectrum/icon",
   "@react-spectrum/illustratedmessage",