Implement React Aria Components (#4171)

Author: devongovett

.eslintrc.js

@@ -28,10 +28,10 @@ module.exports = {
       sourceType: 'module'
     },
     rules: {
-      'jsdoc/require-description-complete-sentence': [ERROR, {abbreviations: ['e.g', 'etc', 'i.e']}],
+      'jsdoc/require-description-complete-sentence': [ERROR, {abbreviations: ['e.g', 'i.e']}],
       'jsdoc/check-alignment': ERROR,
       'jsdoc/check-indentation': ERROR,
-      'jsdoc/check-tag-names': ERROR,
+      'jsdoc/check-tag-names': [ERROR, {definedTags: ['selector']}],
       // enable this rule to see literally everything missing jsdocs, this rule needs some refinement but is good as a sanity check.
       // 'jsdoc/require-jsdoc': [ERROR, {contexts:['TSInterfaceDeclaration TSPropertySignature', 'TSInterfaceDeclaration TSMethodSignature']}],
       'jsdoc/require-description': [ERROR, {exemptedBy: ['deprecated'], checkConstructors: false}],

.storybook/main.js

@@ -3,7 +3,7 @@ module.exports = {
   core: {
     builder: "storybook-builder-parcel",
   },
-  stories: ['../packages/*/*/stories/*.stories.{js,jsx,ts,tsx}'],
+  stories: ['../packages/**/stories/*.stories.{js,jsx,ts,tsx}'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-a11y',

package.json

@@ -17,8 +17,8 @@
     "build:storybook-17": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17",
     "start:chromatic": "CHROMATIC=1 NODE_ENV=storybook start-storybook -p 9004 --ci -c '.chromatic'",
     "build:chromatic": "CHROMATIC=1 build-storybook -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic",
-    "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
-    "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
+    "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
+    "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
     "test": "yarn jest",
     "test-strict": "cross-env STRICT_MODE=1 yarn jest",
     "build": "make build",
@@ -47,6 +47,7 @@
   "workspaces": [
     "packages/react-stately",
     "packages/react-aria",
+    "packages/react-aria-components",
     "packages/*/*"
   ],
   "devDependencies": {

packages/@adobe/spectrum-css-temp/components/table/skin.css

@@ -180,7 +180,7 @@ tbody.spectrum-Table-body {
   /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row. Can't omit the bottom border for last row unlike listview
    * due to how table rows always reserve 1px for the bottom border (results in a white gap on hover otherwise).
    */
-  &:after {
+  &:not(tr):after {
     box-shadow: inset 0 -1px 0 0 var(--spectrum-table-cell-border-color);
     content: '';
     display: block;

packages/@react-aria/dnd/docs/dnd.mdx

@@ -22,6 +22,7 @@ export default Layout;
 category: Drag and Drop
 keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
 navigationTitle: Introduction
+type: pattern
 ---
 
 # Drag and Drop

packages/@react-aria/dnd/docs/useClipboard.mdx

@@ -20,6 +20,7 @@ import {Keyboard} from '@react-spectrum/text';
 ---
 category: Drag and Drop
 keywords: [clipboard, copy, cut, paste, aria, accessibility]
+type: pattern
 ---
 
 # useClipboard

packages/@react-aria/dnd/docs/useDrag.mdx

@@ -20,6 +20,7 @@ import {Keyboard} from '@react-spectrum/text';
 ---
 category: Drag and Drop
 keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
+type: pattern
 ---
 
 # useDrag

packages/@react-aria/dnd/docs/useDraggableCollection.mdx

@@ -22,6 +22,7 @@ import {Keyboard} from '@react-spectrum/text';
 ---
 category: Drag and Drop
 keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
+type: pattern
 ---
 
 # useDraggableCollection

packages/@react-aria/dnd/docs/useDrop.mdx

@@ -20,6 +20,7 @@ import {Keyboard} from '@react-spectrum/text';
 ---
 category: Drag and Drop
 keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
+type: pattern
 ---
 
 # useDrop

packages/@react-aria/dnd/docs/useDroppableCollection.mdx

@@ -22,6 +22,7 @@ import {Keyboard} from '@react-spectrum/text';
 ---
 category: Drag and Drop
 keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
+type: pattern
 ---
 
 # useDroppableCollection

packages/@react-aria/gridlist/docs/useGridList.mdx

@@ -486,7 +486,7 @@ This behavior is slightly different when `selectionBehavior="replace"`, where si
 
 ### Asynchronous loading
 
-This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to handle loadiasynchronous loading of data from a server. You may additionally want to display a spinner to indicate the loading state to the user, or support features like infinite scroll to load more data.
+This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to handle asynchronous loading of data from a server. You may additionally want to display a spinner to indicate the loading state to the user, or support features like infinite scroll to load more data.
 
 ```tsx example
 import {useAsyncList} from '@react-stately/data';

packages/@react-spectrum/link/docs/Link.mdx

@@ -49,7 +49,7 @@ Actual navigation will be handled by the wrapped element.
 <Link><a href="https://www.adobe.com" target="_blank">Adobe.com</a></Link>
 ```
 
-To use in [React Router](https://reacttraining.com/react-router/)
+To use in [React Router](https://reactrouter.com/en/main)
 
 ```tsx
 import {Link} from '@react-spectrum/link';

packages/dev/docs/pages/assets/component-illustrations/Input.svg

@@ -11,6 +11,7 @@
  */
 
 import ChevronLeft from '@spectrum-icons/ui/ChevronLeftLarge';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 import clsx from 'clsx';
 import {Divider} from '@react-spectrum/divider';
 import docStyles from './docs.css';
@@ -36,6 +37,7 @@ import {ToC} from './ToC';
 import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';
 import {VersionBadge} from './VersionBadge';
 
+const ENABLE_PAGE_TYPES = false;
 const INDEX_RE = /^(?:[^/]+\/)?index\.html$/;
 const TLD = 'react-spectrum.adobe.com';
 const HERO = {
@@ -288,16 +290,29 @@ function Nav({currentPageName, pages}) {
   }
 
   // Key by category
-  let pageMap = {};
+  let pagesByType = {};
   let rootPages = [];
+  let pageCategories = new Set();
   pages.forEach(p => {
     let cat = p.category;
     if (cat) {
-      if (cat in pageMap) {
-        pageMap[cat].push(p);
+      let type = p.type || 'other';
+      if (!ENABLE_PAGE_TYPES && p.type !== 'component') {
+        type = 'other';
+      }
+      let pages = pagesByType[type];
+      if (!pages) {
+        pages = {};
+        pagesByType[type] = pages;
+      }
+
+      if (cat in pages) {
+        pages[cat].push(p);
       } else {
-        pageMap[cat] = [p];
+        pages[cat] = [p];
       }
+
+      pageCategories.add(cat);
     } else {
       rootPages.push(p);
     }
@@ -306,10 +321,10 @@ function Nav({currentPageName, pages}) {
   // Order categories so specific ones come first, then all the others in sorted order.
   let categories = [];
   for (let category of CATEGORY_ORDER) {
-    if (pageMap[category]) {
+    if (pageCategories.has(category)) {
       categories.push(category);
     } else if (category === '...') {
-      for (let category of Object.keys(pageMap).sort()) {
+      for (let category of [...pageCategories].sort()) {
         if (!CATEGORY_ORDER.includes(category)) {
           categories.push(category);
         }
@@ -343,6 +358,57 @@ function Nav({currentPageName, pages}) {
     );
   }
 
+  let isActive = (pageMap) => {
+    for (let key in pageMap) {
+      if (pageMap[key].some(p => p.name === currentPageName)) {
+        return true;
+      }
+    }
+  };
+
+  let sections = [];
+  if (currentPageName.startsWith('react-aria') && ENABLE_PAGE_TYPES) {
+    let {Introduction, Concepts, Interactions, Focus, Internationalization, 'Server Side Rendering': ssr, Utilities, ...hooks} = pagesByType.other;
+    sections.push({pages: {Introduction, Concepts}});
+    sections.push({
+      title: 'Components',
+      pages: pagesByType.component,
+      isActive: isActive(pagesByType.component)
+    });
+    sections.push({
+      title: 'Hooks',
+      pages: hooks,
+      isActive: isActive(hooks)
+    });
+    sections.push({
+      title: 'Patterns',
+      pages: pagesByType.pattern,
+      isActive: isActive(pagesByType.pattern)
+    });
+    sections.push({
+      title: 'Interactions',
+      pages: {Interactions, Focus},
+      isActive: isActive({Interactions, Focus})
+    });
+    sections.push({
+      title: 'Utilities',
+      pages: {Internationalization, 'Server Side Rendering': ssr, Utilities},
+      isActive: isActive({Internationalization, 'Server Side Rendering': ssr, Utilities})
+    });
+  } else {
+    sections.push({
+      pages: pagesByType.other
+    });
+
+    if (pagesByType.component) {
+      sections.push({
+        title: 'Components',
+        pages: pagesByType.component,
+        isActive: isActive(pagesByType.component)
+      });
+    }
+  }
+
   return (
     <nav className={docStyles.nav} aria-labelledby="nav-title-id">
       <header>
@@ -362,20 +428,33 @@ function Nav({currentPageName, pages}) {
           </h2>
         </a>
       </header>
-      <ul className={sideNavStyles['spectrum-SideNav']}>
-        {rootPages.map(p => <SideNavItem {...p} />)}
-        {categories.map(key => {
-          const headingId = `${key.trim().toLowerCase().replace(/\s+/g, '-')}-heading`;
+      {sections.map(section => {
+        let contents = categories.filter(c => section.pages[c]?.length).map(key => {
+          const headingId = `${section.title ? section.title.toLowerCase() + '-' : ''}${key.trim().toLowerCase().replace(/\s+/g, '-')}-heading`;
           return (
-            <li key={headingId} className={sideNavStyles['spectrum-SideNav-item']}>
+            <>
               <h3 className={sideNavStyles['spectrum-SideNav-heading']} id={headingId}>{key}</h3>
               <ul className={sideNavStyles['spectrum-SideNav']} aria-labelledby={headingId}>
-                {pageMap[key].sort((a, b) => (a.order || 0) < (b.order || 0) || a.title < b.title ? -1 : 1).map(p => <SideNavItem key={p.title} {...p} />)}
+                {section.pages[key].sort((a, b) => (a.order || 0) < (b.order || 0) || a.title < b.title ? -1 : 1).map(p => <SideNavItem {...p} preRelease={section.title === 'Components' ? '' : p.preRelease} />)}
               </ul>
-            </li>
+            </>
           );
-        })}
-      </ul>
+        });
+
+        if (section.title) {
+          return (
+            <details open={section.isActive}>
+              <summary style={{fontWeight: 'bold'}}>
+                <ChevronRight size="S" /> {section.title}
+                {section.title === 'Components' && <VersionBadge version={Object.values(section.pages)[0][0].preRelease} style={{marginLeft: 'auto', fontWeight: 'normal'}} />}
+              </summary>
+              {contents}
+            </details>
+          );
+        } else {
+          return <>{contents}</>;
+        }
+      })}
     </nav>
   );
 }

packages/dev/docs/pages/assets/component-illustrations/Label.svg

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+import clsx from 'clsx';
+import React from 'react';
+import {renderHTMLfromMarkdown} from './types';
+import styles from './docs.css';
+import tableStyles from '@adobe/spectrum-css-temp/components/table/vars.css';
+import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';
+
+export function StateTable({properties}) {
+  return (
+    <table className={`${tableStyles['spectrum-Table']} ${tableStyles['spectrum-Table--quiet']} ${styles.propTable}`}>
+      <thead>
+        <tr>
+          <td role="columnheader" className={tableStyles['spectrum-Table-headCell']}>Name</td>
+          <td role="columnheader" className={tableStyles['spectrum-Table-headCell']}>CSS Selector</td>
+          <td role="columnheader" className={tableStyles['spectrum-Table-headCell']}>Description</td>
+        </tr>
+      </thead>
+      <tbody className={tableStyles['spectrum-Table-body']}>
+        {Object.values(properties).map((prop, index) => (
+          <tr key={index} className={clsx(tableStyles['spectrum-Table-row'], styles.tableRow)}>
+            <td role="rowheader" className={clsx(tableStyles['spectrum-Table-cell'], styles.tableCell)} data-column="Name">
+              <code className={`${typographyStyles['spectrum-Code4']}`}>
+                <span className="token hljs-variable">{prop.name}</span>
+              </code>
+            </td>
+            <td role="rowheader" className={clsx(tableStyles['spectrum-Table-cell'], styles.tableCell)} data-column="CSS Selector">
+              <code className={`${typographyStyles['spectrum-Code4']}`}>
+                <span className={prop.selector ? 'token hljs-string' : null}>{prop.selector || '—'}</span>
+              </code>
+            </td>
+            <td className={clsx(tableStyles['spectrum-Table-cell'], styles.tableCell)}>{renderHTMLfromMarkdown(prop.description, {forceInline: false})}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

packages/dev/docs/src/Layout.js

@@ -555,6 +555,14 @@ details[open] > summary svg {
   transform: rotate(90deg);
 }
 
+.nav summary {
+  margin-left: -12px !important;
+}
+
+.nav details:last-child {
+  margin-bottom: 60px;
+}
+
 .headingAnchor {
   transition: all 125ms ease-in-out;
   margin-left: 4px;
@@ -914,3 +922,9 @@ h2.sectionHeader {
     gap: 24px;
   }
 }
+
+.cardGroup[data-size=small] {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+  max-width: 800px;
+}

packages/dev/docs/src/StateTable.js

@@ -23,3 +23,4 @@ export * from './TypeLink';
 export * from './ClassAPI';
 export * from './PostListing';
 export * from './PageDescription';
+export * from './StateTable';