Update to example apps to support React 17 testing (#4698)

* partial progress

* adding ability to switch between react 17 and 18 in the CRA apps

* adding nextjs react 17 test app

* test react 17 setup in original next example

* test react 17 setup in tailwind example

* fix nextjs config for 17

* fixing more typos

* pushing temp progress for tailwind and react 17 nextjs app

* removing console.log

* testing that circleci still builds the apps

* Revert "testing that circleci still builds the apps"

This reverts commit fde37cd.

Author: LFDanLu

examples/rac-tailwind/package.json

@@ -3,7 +3,8 @@
   "private": true,
   "scripts": {
     "start": "parcel src/index.html",
-    "build": "parcel build src/index.html"
+    "build": "parcel build src/index.html",
+    "install-17": "yarn add -W react@^17 react-dom@^17"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.16",

examples/rac-tailwind/src/index.js

@@ -3,3 +3,10 @@ import { App } from './App';
 
 let root = createRoot(document.getElementById('root'));
 root.render(<App />);
+
+// TODO: check on react-dom's version didn't work, figure out later
+// The below is for when react 17 is installed
+// import ReactDOM from 'react-dom';
+// ReactDOM.render(
+//   <App />, document.getElementById("root")
+// )

examples/rsp-cra-18/package.json

@@ -5,7 +5,6 @@
   "homepage": ".",
   "dependencies": {
     "@adobe/react-spectrum": "latest",
-    "@react-spectrum/tag": "^3.0.0-rc.0",
     "@spectrum-icons/workflow": "latest",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
@@ -24,7 +23,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "install-17": "yarn add -W react@^17 react-dom@^17"
   },
   "eslintConfig": {
     "extends": [

examples/rsp-cra-18/src/App.tsx

@@ -1,9 +1,8 @@
 import './App.css';
-import {Provider, defaultTheme, Item} from '@adobe/react-spectrum'
+import {Provider, defaultTheme, Item, TagGroup} from '@adobe/react-spectrum'
 import Lighting from './Lighting';
 import {useState} from 'react'
 import BodyContent from './BodyContent';
-import {TagGroup} from '@react-spectrum/tag';
 
 function App() {
   let [selected, setSelection] = useState(false);

examples/rsp-cra-18/src/index.tsx

@@ -1,10 +1,17 @@
-import ReactDOM from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-    <App />
-);
+if (ReactDOM.version.startsWith('18')) {
+  let ReactDOMClient = require('react-dom/client');
+  const root = ReactDOMClient.createRoot(
+    document.getElementById('root') as HTMLElement
+  );
+  root.render(
+      <App />
+  );
+} else {
+  ReactDOM.render(
+    <App />, document.getElementById("root")
+  )
+}

examples/rsp-next-ts-17/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["next", "next/core-web-vitals"]
+}

examples/rsp-next-ts-17/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/rsp-next-ts-17/README.md

@@ -0,0 +1,21 @@
+# Next.js Typescript example with React Spectrum
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) and [React Spectrum](https://react-spectrum.adobe.com/index.html).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.tsx`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

examples/rsp-next-ts-17/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>
+  );
+}

examples/rsp-next-ts-17/components/Section.tsx

@@ -0,0 +1,20 @@
+import { View, Heading, Divider } from "@adobe/react-spectrum";
+import React from "react";
+
+interface SectionProps {
+  title: string;
+  children: JSX.Element | JSX.Element[];
+}
+
+export default function Section(props: SectionProps) {
+  let { title, children } = props;
+  return (
+    <View marginBottom="size-200">
+      <Heading id={title.toLowerCase()} level={2}>
+        {title}
+      </Heading>
+      <Divider marginBottom="size-100" />
+      {children}
+    </View>
+  );
+}