Add monopackages for react-aria and react-stately (#1124)

devongovett · web-flow · commit 8c1fc6aa75bc · 2020-10-01T11:59:49.000-07:00
* Add monopackages for react-aria and react-stately

Also updates react-spectrum monopackage with new packages and exports and fixes the missing import linter for re-exports.

* Add docs
diff --git a/bin/imports.js b/bin/imports.js
@@ -16,63 +16,71 @@ const fs = require('fs');
 const Module = require('module');
 
 module.exports = function (context) {
-  return {
-    ImportDeclaration(node) {
-      let source = node.source.value.replace(/^[a-z]+:/, '');
-      if (source.startsWith('.') || Module.builtinModules.includes(source)) {
-        return;
-      }
-
-      // Split the import specifier on slashes. If it starts with an @ then it's
-      // a scoped package, otherwise just take the first part.
-      let parts = source.split('/');
-      let pkgName = source.startsWith('@') ? parts.slice(0, 2).join('/') : parts[0];
-
-      // Search for a package.json starting from the current filename
-      let pkgPath = findUp.sync('package.json', {cwd: path.dirname(context.getFilename())});
-      if (!pkgPath) {
-        return;
-      }
-
-      let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-
-      // The only dev dependency should be spectrum-css.
-      if (exists(pkg.devDependencies, pkgName) && pkgName === '@adobe/spectrum-css-temp') {
-        return;
-      }
-
-      if (!exists(pkg.dependencies, pkgName) && !exists(pkg.peerDependencies, pkgName)) {
-        context.report({
-          node,
-          message: `Missing dependency on ${pkgName}.`,
-          fix(fixer) {
-            // Attempt to find a package in the monorepo. If the dep is for an external library,
-            // then we cannot auto fix it because we don't know the version to add.
-            let depPath = __dirname + '/../packages/' + pkgName + '/package.json';
-            if (!fs.existsSync(depPath)) {
-              return;
-            }
-
-            let depPkg = JSON.parse(fs.readFileSync(depPath, 'utf8'));
-
-            if (pkgName === '@react-spectrum/provider') {
-              pkg.peerDependencies = insertObject(pkg.peerDependencies, pkgName, depPkg.version);
-            } else {
-              pkg.dependencies = insertObject(pkg.dependencies, pkgName, depPkg.version);
-            }
-
-            fs.writeFileSync(pkgPath, JSON.stringify(pkg, false, 2) + '\n');
-
-            // Fake fix so eslint doesn't show the error.
-            return {
-              range: [0, 0],
-              text: ''
-            };
+  let processNode = (node) => {
+    if (!node.source) {
+      return;
+    }
+
+    let source = node.source.value.replace(/^[a-z]+:/, '');
+    if (source.startsWith('.') || Module.builtinModules.includes(source)) {
+      return;
+    }
+
+    // Split the import specifier on slashes. If it starts with an @ then it's
+    // a scoped package, otherwise just take the first part.
+    let parts = source.split('/');
+    let pkgName = source.startsWith('@') ? parts.slice(0, 2).join('/') : parts[0];
+
+    // Search for a package.json starting from the current filename
+    let pkgPath = findUp.sync('package.json', {cwd: path.dirname(context.getFilename())});
+    if (!pkgPath) {
+      return;
+    }
+
+    let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+
+    // The only dev dependency should be spectrum-css.
+    if (exists(pkg.devDependencies, pkgName) && pkgName === '@adobe/spectrum-css-temp') {
+      return;
+    }
+
+    if (!exists(pkg.dependencies, pkgName) && !exists(pkg.peerDependencies, pkgName)) {
+      context.report({
+        node,
+        message: `Missing dependency on ${pkgName}.`,
+        fix(fixer) {
+          // Attempt to find a package in the monorepo. If the dep is for an external library,
+          // then we cannot auto fix it because we don't know the version to add.
+          let depPath = __dirname + '/../packages/' + pkgName + '/package.json';
+          if (!fs.existsSync(depPath)) {
+            return;
           }
-        });
-      }
+
+          let depPkg = JSON.parse(fs.readFileSync(depPath, 'utf8'));
+
+          if (pkgName === '@react-spectrum/provider') {
+            pkg.peerDependencies = insertObject(pkg.peerDependencies, pkgName, depPkg.version);
+          } else {
+            pkg.dependencies = insertObject(pkg.dependencies, pkgName, depPkg.version);
+          }
+
+          fs.writeFileSync(pkgPath, JSON.stringify(pkg, false, 2) + '\n');
+
+          // Fake fix so eslint doesn't show the error.
+          return {
+            range: [0, 0],
+            text: ''
+          };
+        }
+      });
     }
   };
+
+  return {
+    ImportDeclaration: processNode,
+    ExportNamedDeclaration: processNode,
+    ExportAllDeclaration: processNode
+  };
 };
 
 function exists(deps, name) {
diff --git a/package.json b/package.json
@@ -39,6 +39,8 @@
     "publish:nightly": "lerna publish -y --canary --preid nightly --dist-tag=nightly --exact --force-publish=* --no-push"
   },
   "workspaces": [
+    "packages/react-stately",
+    "packages/react-aria",
     "packages/*/*"
   ],
   "devDependencies": {
diff --git a/packages/@adobe/react-spectrum/package.json b/packages/@adobe/react-spectrum/package.json
@@ -50,6 +50,8 @@
     "@react-spectrum/textfield": "^3.1.2",
     "@react-spectrum/theme-dark": "^3.1.0",
     "@react-spectrum/theme-default": "^3.1.0",
+    "@react-spectrum/theme-light": "^3.1.0",
+    "@react-spectrum/tooltip": "^3.0.0-alpha.0",
     "@react-spectrum/view": "^3.1.0",
     "@react-spectrum/well": "^3.1.0",
     "@react-stately/collections": "^3.2.0",
diff --git a/packages/@adobe/react-spectrum/src/index.ts b/packages/@adobe/react-spectrum/src/index.ts
@@ -15,7 +15,7 @@ export {Breadcrumbs} from '@react-spectrum/breadcrumbs';
 export {ActionButton, Button, LogicButton, ToggleButton} from '@react-spectrum/button';
 export {ButtonGroup} from '@react-spectrum/buttongroup';
 export {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
-export {AlertDialog, Dialog, DialogTrigger} from '@react-spectrum/dialog';
+export {AlertDialog, Dialog, DialogTrigger, DialogContainer, useDialogContainer} from '@react-spectrum/dialog';
 export {Divider} from '@react-spectrum/divider';
 export {Form} from '@react-spectrum/form';
 export {Icon} from '@react-spectrum/icon';
@@ -38,6 +38,7 @@ export {TextArea, TextField} from '@react-spectrum/textfield';
 export {theme as darkTheme} from '@react-spectrum/theme-dark';
 export {theme as defaultTheme} from '@react-spectrum/theme-default';
 export {theme as lightTheme} from '@react-spectrum/theme-light';
+export {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 export {Content, Footer, Header, View} from '@react-spectrum/view';
 export {Well} from '@react-spectrum/well';
 export {Item, Section} from '@react-stately/collections';
diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -39,7 +39,7 @@ interface HiddenSelectProps<T> extends AriaHiddenSelectProps<T> {
  * can be used in combination with `useSelect` to support browser form autofill, mobile form
  * navigation, and native HTML form submission.
  */
-function useHiddenSelect<T>(props: AriaHiddenSelectProps<T>, state: SelectState<T>, triggerRef: RefObject<HTMLElement>) {
+export function useHiddenSelect<T>(props: AriaHiddenSelectProps<T>, state: SelectState<T>, triggerRef: RefObject<HTMLElement>) {
   let {name, isDisabled} = props;
   let modality = useInteractionModality();
   let {visuallyHiddenProps} = useVisuallyHidden();
diff --git a/packages/@react-spectrum/breadcrumbs/package.json b/packages/@react-spectrum/breadcrumbs/package.json
@@ -40,6 +40,7 @@
     "@react-spectrum/button": "^3.2.0",
     "@react-spectrum/menu": "^3.2.0",
     "@react-spectrum/utils": "^3.2.1",
+    "@react-stately/collections": "^3.2.0",
     "@react-types/breadcrumbs": "^3.1.0",
     "@react-types/shared": "^3.2.0",
     "@spectrum-icons/ui": "^3.1.0"
diff --git a/packages/@react-spectrum/combobox/package.json b/packages/@react-spectrum/combobox/package.json
@@ -44,6 +44,7 @@
     "@react-spectrum/overlays": "^3.1.0",
     "@react-spectrum/textfield": "^3.1.0",
     "@react-spectrum/utils": "^3.1.0",
+    "@react-stately/collections": "^3.2.0",
     "@react-stately/combobox": "^3.0.0-alpha.1",
     "@react-types/combobox": "^3.0.0-alpha.1",
     "@react-types/overlays": "^3.1.0",
diff --git a/packages/@react-spectrum/picker/package.json b/packages/@react-spectrum/picker/package.json
@@ -47,6 +47,7 @@
     "@react-spectrum/provider": "^3.1.1",
     "@react-spectrum/text": "^3.1.0",
     "@react-spectrum/utils": "^3.2.1",
+    "@react-stately/collections": "^3.2.0",
     "@react-stately/select": "^3.1.0",
     "@react-types/overlays": "^3.2.0",
     "@react-types/select": "^3.1.0",
diff --git a/packages/dev/docs/pages/react-aria/getting-started.mdx b/packages/dev/docs/pages/react-aria/getting-started.mdx
@@ -39,6 +39,8 @@ You can install any React Aria package using a package manager like [npm](https:
 yarn add @react-aria/button
 ```
 
+We also offer a single package containing all React Aria hooks. See [below](#mono-package) for details.
+
 ## Building a component
 
 React Aria provides behavior and accessibility through React Hooks. Since **it does not provide any rendering**,
@@ -121,6 +123,31 @@ function Checkbox(props) {
 
 See the [useCheckbox](useCheckbox.html) docs for a full example of a custom styled checkbox.
 
+## Mono-package
+
+In addition to individual packages, we also offer a mono-package containing all of the React Aria hooks in a single
+package. This ensures that all packages use compatible versions and are upgraded together. If you release all components
+in your component library in a single package, or just want to get started easily without installing a lot of packages,
+the mono-package may be the way to go. It is available as the [react-aria](https://npmjs.com/package/react-aria) package
+on npm.
+
+```
+yarn add react-aria
+```
+
+Once installed, all hooks work the same way as the individual packages, but are imported from the `react-aria` package
+instead of individual packages.
+
+```tsx
+// Individual packages
+import {useButton} from '@react-aria/button';
+```
+
+```tsx
+// Monopackage
+import {useButton} from 'react-aria';
+```
+
 ## Next steps
 
 Now that you understand how to use the hooks in React Aria to build your own components, you can read the documentation
diff --git a/packages/dev/docs/pages/react-stately/getting-started.mdx b/packages/dev/docs/pages/react-stately/getting-started.mdx
@@ -42,6 +42,8 @@ You can install any React Stately package using a package manager like [npm](htt
 yarn add @react-stately/radio
 ```
 
+We also offer a single package containing all React Stately hooks. See [below](#mono-package) for details.
+
 ## Building a component
 
 This example shows a very simple radio group component built with the [useRadioGroupState](useRadioGroupState.html) hook
@@ -86,6 +88,31 @@ If you're using React Stately on the web, see [useRadioGroup](../react-aria/useR
 handle more of this behavior and accessibility for you. To see an example of how React Stately manages more complex state,
 see [useSelectState](useSelectState.html).
 
+## Mono-package
+
+In addition to individual packages, we also offer a mono-package containing all of the React Stately hooks in a single
+package. This ensures that all packages use compatible versions and are upgraded together. If you release all components
+in your component library in a single package, or just want to get started easily without installing a lot of packages,
+the mono-package may be the way to go. It is available as the [react-stately](https://npmjs.com/package/react-stately) package
+on npm.
+
+```
+yarn add react-stately
+```
+
+Once installed, all hooks work the same way as the individual packages, but are imported from the `react-stately` package
+instead of individual packages.
+
+```tsx
+// Individual packages
+import {useRadioGroupState} from '@react-stately/radio';
+```
+
+```tsx
+// Monopackage
+import {useRadioGroupState} from 'react-stately';
+```
+
 ## Next steps
 
 Now that you understand how to use the hooks in React Stately to build your own components, you can read the documentation
diff --git a/packages/react-aria/README.md b/packages/react-aria/README.md
@@ -0,0 +1,40 @@
+# [React Aria](https://react-spectrum.adobe.com/react-aria/index.html)
+
+A library of React Hooks that provides accessible UI primitives for your design system.
+
+## Features
+
+* ♿️ **Accessible** – React Aria provides accessibility and behavior according to [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/), including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.
+* 📱 **Adaptive** – React Aria ensures consistent behavior, no matter the UI. It supports mouse, touch, keyboard, and screen reader interactions that have been tested across a wide variety of browsers, devices, and platforms.
+* 🌍 **International** – React Aria supports over 30 languages, including right-to-left-specific behavior, internationalized date and number formatting, and more.
+* 🎨 **Fully customizable** – React Aria doesn’t implement any rendering or impose a DOM structure, styling methodology, or design-specific details. It provides behavior, accessibility, and interactions and lets you focus on your design.
+
+## Getting started
+
+The easiest way to start building a component library with React Aria is by following our [getting started](https://react-spectrum.adobe.com/react-aria/getting-started.html) guide. It walks through all of the steps needed to install the hooks from npm, and create your first component.
+
+### Example
+
+Here is a very basic example of using React Aria.
+
+```jsx
+import {useButton} from '@react-aria/button';
+
+function Button(props) {
+  let ref = React.useRef();
+  let {buttonProps} = useButton(props, ref);
+
+  return (
+    <button {...buttonProps} ref={ref}>
+      {props.children}
+    </button>
+  );
+}
+
+<Button onPress={() => alert('Button pressed!')}>Press me</Button>
+```
+
+## Learn more
+
+React Aria is part of a family of libraries that help you build adaptive, accessible, and robust user experiences.
+Learn more about [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/index.html) and [React Stately](https://react-spectrum.adobe.com/react-stately/index.html) on [our website](https://react-spectrum.adobe.com/index.html).
diff --git a/packages/react-aria/index.ts b/packages/react-aria/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './src';
diff --git a/packages/react-aria/package.json b/packages/react-aria/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "react-aria",
+  "version": "3.3.0",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "prepublishOnly": "mkdir -p dist; cp src/index.ts dist/types.d.ts; cp src/index.ts dist/module.js; babel --root-mode upward src/index.ts -o dist/main.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/breadcrumbs": "^3.1.0",
+    "@react-aria/button": "^3.2.1",
+    "@react-aria/checkbox": "^3.2.0",
+    "@react-aria/dialog": "^3.1.1",
+    "@react-aria/focus": "^3.2.1",
+    "@react-aria/i18n": "^3.1.1",
+    "@react-aria/interactions": "^3.2.0",
+    "@react-aria/label": "^3.1.0",
+    "@react-aria/link": "^3.1.1",
+    "@react-aria/listbox": "^3.2.0",
+    "@react-aria/menu": "^3.1.1",
+    "@react-aria/meter": "^3.1.0",
+    "@react-aria/overlays": "^3.3.0",
+    "@react-aria/progress": "^3.1.0",
+    "@react-aria/radio": "^3.1.1",
+    "@react-aria/searchfield": "^3.1.0",
+    "@react-aria/select": "^3.2.0",
+    "@react-aria/separator": "^3.1.0",
+    "@react-aria/ssr": "^3.0.0",
+    "@react-aria/switch": "^3.1.0",
+    "@react-aria/textfield": "^3.2.0",
+    "@react-aria/tooltip": "^3.0.0-alpha.0",
+    "@react-aria/utils": "^3.2.1",
+    "@react-aria/visually-hidden": "^3.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/react-aria/src/index.ts b/packages/react-aria/src/index.ts
diff --git a/packages/react-stately/README.md b/packages/react-stately/README.md
diff --git a/packages/react-stately/index.ts b/packages/react-stately/index.ts
diff --git a/packages/react-stately/package.json b/packages/react-stately/package.json
diff --git a/packages/react-stately/src/index.ts b/packages/react-stately/src/index.ts
