- );
-}
-
-export class StoryWrapper extends React.Component {
- state= {
- theme: 'light',
- scale: 'medium',
- toastPlacement: 'top'
- };
-
- componentWillMount() {
- // add lang attribute to html element
- document.documentElement.lang = getLocale();
-
- }
-
- render() {
- return (
-
-
-
- {this.props.children}
-
-
- );
- }
-}
diff --git a/.storybook-v2/theme.js b/.storybook-v2/theme.js
deleted file mode 100644
index 692e187a4ed..00000000000
--- a/.storybook-v2/theme.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import {themes} from '@storybook/theming';
-import addons from '@storybook/addons';
-import {FORCE_RE_RENDER} from '@storybook/core-events';
-// temporary until we have a better place to grab it from
-import * as packageJSON from '../src/package.json';
-
-// Automatically switch light/dark theme based on system pref.
-addons.register('theme-switcher', api => {
- let query = window.matchMedia('(prefers-color-scheme: dark)');
- let update = () => {
- let theme = query.matches ? themes.dark : themes.normal;
- theme.brandTitle = `React Spectrum v${packageJSON.version}`;
- theme.brandUrl = 'https://react-spectrum.corp.adobe.com';
- api.setOptions({theme});
- addons.getChannel().emit(FORCE_RE_RENDER);
- };
-
- addons.getChannel().on('storiesConfigured', update);
- query.addListener(update);
-});
diff --git a/.storybook-v2/webpack.config.js b/.storybook-v2/webpack.config.js
deleted file mode 100644
index 65519935b5c..00000000000
--- a/.storybook-v2/webpack.config.js
+++ /dev/null
@@ -1,81 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = ({config}, env) => {
- // Hack to get icons loading in the storybook without copying them over
- config.plugins.push(new webpack.NormalModuleReplacementPlugin(/Icon\/(core\/)?([^\/\.]+)$/, function (resource) {
- resource.request = '@react/react-spectrum-icons/dist/' + (/core/.test(resource.request) ? 'core/' : '') + path.basename(resource.request);
- }));
- config.plugins.push(new webpack.NormalModuleReplacementPlugin(/\.\/js\/Icon/, path.resolve(__dirname + '/../src/Icon/js/Icon.js')));
- config.plugins.push(new webpack.NormalModuleReplacementPlugin(/\.\/focus-ring-polyfill/, '@adobe/focus-ring-polyfill'));
-
- if (env === 'PRODUCTION') {
- // see https://github.com/storybooks/storybook/issues/1570
- config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
- }
-
- // config.resolve.symlinks = false;
-
- // enable both scales for the storybook
- config.plugins.push(new webpack.DefinePlugin({
- 'process.env.SCALE_MEDIUM': 'true',
- 'process.env.SCALE_LARGE': 'true'
- }));
-
- return Object.assign(config, {
- module: {
- rules: [
- {
- test: /\.jsx?$/,
- include: [__dirname, path.resolve(__dirname + '/../src'), path.resolve(__dirname + '/../stories'), /collection-view/],
- loader: require.resolve('babel-loader')
- },
- {
- test: /\.styl$/,
- use: [
- 'style-loader',
- 'css-loader',
- {
- loader: 'stylus-loader',
- options: {
- paths: [__dirname + '/../node_modules'],
- define: {
- 'embedurl': require('stylus').url()
- },
- 'resolve url': true,
- set: {
- 'include css': true
- },
- use: [require('svg-stylus')(), require('nib')()]
- }
- }
- ],
- include: path.resolve(__dirname, '../')
- },
- {
- test: /@adobe\/spectrum-css-temp\/.*\.css$/,
- use: [
- 'style-loader',
- {
- loader: 'css-loader',
- options: {
- modules: true
- }
- }
- ],
- include: path.resolve(__dirname, '../')
- },
- {
- test: /\.css$/,
- loaders: ['style-loader', 'css-loader'],
- include: path.resolve(__dirname, '../'),
- exclude: /@adobe\/spectrum-css-temp\/.*\.css$/
- },
- {
- test: /\.(ttf|woff|woff2|svg|gif|cur|eot|png|jpg)(\?[a-f0-9]{32})?$/,
- loader: 'url-loader?limit=8192'// limit inlining base64 URLs to <=8k images, direct URLs for the rest
- }
- ]
- }
- });
-};
diff --git a/.storybook-v3/webpack.config.js b/.storybook-v3/webpack.config.js
index 7cac4dca067..136decc4bd1 100644
--- a/.storybook-v3/webpack.config.js
+++ b/.storybook-v3/webpack.config.js
@@ -23,14 +23,6 @@ const generateScopedName = (localName, resourcePath) => {
};
module.exports = ({config}, env) => {
- // Hack to get icons loading in the storybook without copying them over, these need to stay in for as long as we are using V2 components
- // in the v3 storybook. only use right now is the Provider selection menus in the top right for scale, theme, etc
- config.plugins.push(new webpack.NormalModuleReplacementPlugin(/Icon\/(core\/)?([^\/\.]+)$/, function (resource) {
- resource.request = '@react/react-spectrum-icons/dist/' + (/core/.test(resource.request) ? 'core/' : '') + path.basename(resource.request);
- }));
- config.plugins.push(new webpack.NormalModuleReplacementPlugin(/\.\/js\/Icon/, path.resolve(__dirname + '/../src/Icon/js/Icon.js')));
- config.plugins.push(new webpack.NormalModuleReplacementPlugin(/\.\/focus-ring-polyfill/, '@adobe/focus-ring-polyfill'));
-
if (env === 'PRODUCTION') {
// see https://github.com/storybooks/storybook/issues/1570
config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
@@ -69,7 +61,7 @@ module.exports = ({config}, env) => {
set: {
'include css': true
},
- use: [require('svg-stylus')(), require('nib')()]
+ use: [require('svg-stylus')()]
}
}
],
diff --git a/Makefile b/Makefile
index 906fda3a259..d9aa1cfee9c 100644
--- a/Makefile
+++ b/Makefile
@@ -17,9 +17,6 @@ install_no_postinstall:
# --ci keeps it from opening the browser tab automatically
run:
- NODE_ENV=storybook start-storybook -p 9002 --ci -c ".storybook-v2"
-
-run_3:
NODE_ENV=storybook start-storybook -p 9003 --ci -c ".storybook-v3"
clean:
@@ -56,61 +53,16 @@ clean_docs_node_modules:
rm -rf documentation/node_modules
lint:
- npm run check-types
- eslint src test stories
+ yarn check-types
eslint packages --ext .js,.ts,.tsx
- $(MAKE) lint_packages
-
-lint_packages:
- @if [ "$$(lerna list)" != "@react/react-spectrum" ]; then \
- echo "Some packages should be marked as private."; \
- lerna list | grep -v "@react/react-spectrum"; \
- false; \
- fi
test:
- NODE_ENV=test mocha
-
-jest_test:
- NODE_ENV=test NODE_ICU_DATA=node_modules/full-icu jest
-
-cover:
- NODE_ENV=test BABEL_ENV=cover nyc mocha
-
-jenkins_test: lint
- NODE_ENV=test NODE_ICU_DATA=node_modules/full-icu jest
- # Test in React 15
- NOYARNPOSTINSTALL=1 yarn install-peerdeps --yarn enzyme-adapter-react-15 --extra-args "--ignore-workspace-root-check"
- NODE_ENV=test mocha
-
- # Test latest and generate coverage report
- yarn install-peerdeps --yarn enzyme-adapter-react-16 --extra-args "--ignore-workspace-root-check"
- NODE_ENV=test BABEL_ENV=cover nyc --reporter cobertura --report-dir . mocha $(MOCHA_OPTS) --reporter mocha-junit-reporter; \
- find ./node_modules/ -name coverage.json -exec rm {} \; ;\
-
-build:
- rm -rf dist src/dist
- cp -R src dist
- cp -R node_modules/@adobe/spectrum-css/dist/components dist/spectrum-css
- cp -R spectrum-css-overrides dist/spectrum-css-overrides
- find dist/spectrum-css -name colorStops -exec rm -rf {} +;
- BUILD_ENV=production NODE_ENV=production babel dist -d dist
- find dist \( -name index.styl -o -name "Shell*.styl" \) -exec bash -c 'f="{}"; o=$$(dirname $${f%.styl}.css); stylus --use ./bin/compile-stylus.js $$f -o $$o' \;
- find dist -name "*.styl" -delete
- find dist -name "*.js" -exec sed -i.bak 's/index.styl/index.css/g' {} \;
- find dist -name "*.js" -exec sed -i.bak -E 's/(Shell.*\.)styl/\1css/g' {} \;
- find dist -name "*.bak" -delete
- cp -R node_modules/@adobe/focus-ring-polyfill dist/focus-ring-polyfill
- cp -R node_modules/@react/react-spectrum-icons/dist/* dist/Icon/.
- cp src/package.json dist/package.json
- cp README.md dist/README.md
+ yarn jest
+
+ci-test: lint test
storybook:
- npm run build-storybook
- npm run build-storybook-v3
- mkdir -p public
- mv storybook-static public/storybook
- mv storybook-static-v3 public/storybook3
+ yarn build-storybook
deploy: storybook docs
ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null $(SERVER) mkdir -p "~/rsp"
diff --git a/babel.config.js b/babel.config.js
index e23f8325186..4195dd4fe15 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -51,8 +51,7 @@ module.exports = {
'@babel/plugin-syntax-object-rest-spread',
'@babel/plugin-transform-async-to-generator',
'transform-glob-import',
- 'babel-plugin-macros',
- './bin/import-css.js'
+ 'babel-plugin-macros'
],
sourceType: 'unambiguous'
};
diff --git a/bin/compile-stylus.js b/bin/compile-stylus.js
deleted file mode 100644
index 41dc0cd675e..00000000000
--- a/bin/compile-stylus.js
+++ /dev/null
@@ -1,29 +0,0 @@
-var nib = require('nib');
-var stylus = require('stylus');
-var svg = require('svg-stylus');
-
-var BASE_URL = 'https://cdn.livefyre.com/libs/react-spectrum/v' + require('../package.json').version + '/';
-
-/**
- * This is a stylus plugin that sets things up the way we need
- */
-module.exports = function () {
- return function (style) {
- style
- .include(__dirname + '/../node_modules')
- .use(svg())
- .use(nib())
- .define('embedurl', stylus.url())
- .define('url', resolver)
- .set('include css', true);
- };
-};
-
-function resolver(v) {
- var url = v.val;
- if (!/^data:/.test(url)) {
- url = BASE_URL + url;
- }
-
- return new stylus.nodes.Literal('url("' + url + '")');
-}
diff --git a/bin/import-css.js b/bin/import-css.js
deleted file mode 100644
index c8a91ed4842..00000000000
--- a/bin/import-css.js
+++ /dev/null
@@ -1,109 +0,0 @@
-const template = require('babel-template');
-const fs = require('fs');
-const Path = require('path');
-
-const THEMES = ['light', 'dark', 'lightest', 'darkest'];
-
-const notThemeTemplate = template('!process.env.THEME_NAME');
-const themeTemplate = template('if (NO_THEMES || process.env.THEME_NAME) require(PATH);');
-const scaleTemplate = template(`
- if (process.env.SCALE_MEDIUM && process.env.SCALE_LARGE) {
- require(INDEX_PATH);
- require(DIFF_PATH);
- } else if (process.env.SCALE_LARGE) {
- require(LARGE_PATH);
- } else {
- require(INDEX_PATH);
- }
-`);
-
-module.exports = function ({types: t}) {
- // Produce an && chain to check if none of the theme variables are set.
- function noThemes() {
- let left = null;
- for (let theme of THEMES) {
- let right = notThemeTemplate({THEME_NAME: t.identifier(`THEME_${theme.toUpperCase()}`)}).expression;
- if (left) {
- left = t.logicalExpression('&&', left, right);
- } else {
- left = right;
- }
- }
-
- return left;
- }
-
- // Get the path to a CSS file for the component + theme.
- function getCSS(component, theme, filename) {
- let dir = Path.dirname(filename);
-
- // When building for production, we copy spectrum-css into react-spectrum.
- let base = process.env.BUILD_ENV === 'production'
- ? Path.relative(dir, 'dist/spectrum-css')
- : '@adobe/spectrum-css/dist/components';
-
- let path = `${component}/`;
- if (theme) {
- path += `multiStops/${theme}.css`;
- } else {
- path += 'index.css';
- }
-
- // Check if an override exists for this component
- if (fs.existsSync(Path.join(__dirname, '..', 'spectrum-css-overrides', path))) {
- let overrideBase = process.env.BUILD_ENV === 'production'
- ? Path.relative(dir, 'dist/spectrum-css-overrides')
- : Path.relative(dir, 'spectrum-css-overrides');
-
- return Path.join(overrideBase, path);
- }
-
- let realpath = process.env.BUILD_ENV === 'production'
- ? Path.resolve(dir, base, path)
- : Path.join(__dirname, '..', 'node_modules', base, path);
-
- if (fs.existsSync(realpath)) {
- return Path.join(base, path);
- } else if (!theme) {
- console.error('Could not find Spectrum CSS import: ', realpath);
- }
- }
-
- return {
- visitor: {
- CallExpression(path) {
- if (!t.isIdentifier(path.node.callee, {name: 'importSpectrumCSS'})) {
- return;
- }
-
- let component = path.node.arguments[0].value;
- let statements = [];
-
- // Get index.css
- let main = getCSS(component, null, path.hub.file.opts.filename);
- if (main) {
- statements.push(scaleTemplate({
- INDEX_PATH: t.stringLiteral(main),
- DIFF_PATH: t.stringLiteral(main.replace('index.css', 'index-diff.css')),
- LARGE_PATH: t.stringLiteral(main.replace('index.css', 'index-lg.css'))
- }));
- }
-
- // Get css files for each theme.
- for (let theme of THEMES) {
- let css = getCSS(component, theme, path.hub.file.opts.filename);
- if (css) {
- statements.push(themeTemplate({
- NO_THEMES: noThemes(),
- THEME_NAME: t.identifier(`THEME_${theme.toUpperCase()}`),
- PATH: t.stringLiteral(css)
- }));
- }
- }
-
- path.getStatementParent().insertBefore(statements);
- path.remove();
- }
- }
- };
-};
diff --git a/documentation/.env.production b/documentation/.env.production
deleted file mode 100644
index 665c4fb3a8d..00000000000
--- a/documentation/.env.production
+++ /dev/null
@@ -1,6 +0,0 @@
-SCALE_MEDIUM=true
-SCALE_LARGE=false
-THEME_LIGHT=false
-THEME_LIGHTEST=false
-THEME_DARK=true
-THEME_DARKEST=false
diff --git a/documentation/.gitignore b/documentation/.gitignore
deleted file mode 100644
index 6c4a628e5f7..00000000000
--- a/documentation/.gitignore
+++ /dev/null
@@ -1,62 +0,0 @@
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-
-# Build Files
-public/
-.cache/
-
-# Gatsby context
-.gatsby-context.js
-
-# Bundle stats
-bundle-stats.json
-
-.idea/*
-.idea
diff --git a/documentation/.npmrc b/documentation/.npmrc
deleted file mode 100644
index f86c4c7eea9..00000000000
--- a/documentation/.npmrc
+++ /dev/null
@@ -1,3 +0,0 @@
-@mapbox:registry=https://registry.npmjs.org/
-
-package-lock=false
diff --git a/documentation/README.md b/documentation/README.md
deleted file mode 100644
index 199741090ac..00000000000
--- a/documentation/README.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Contributing Documentation
-
-The react-spectrum documentation website includes documentation about each component, along with guides about various topics. It uses [Gatsby](https://www.gatsbyjs.org/) as a framework, which allows us to do GraphQL queries for data about files on the filesystem, extract data from each component's source files, import markdown and more. The [code](https://git.corp.adobe.com/React/react-spectrum/tree/master/documentation) lives in the same repo as the rest of react-spectrum, under the `documentation` folder.
-
-There are two main sections of the site: guides, component documentation.
-
-## Guides
-
-Guides are general tutorials about react-spectrum. They live in `documentation/content/guides`, and are MDX files, which are markdown but allow allow inline React elements so you can include running examples. There is a table of contents in `guides.json` which lists the title and filename of each page. If you are adding a guide, make sure to add it there as well.
-
-The guides generally shouldn't be about a specific component - that information should live in the component level overview. But information about setting up projects, migrating from other frameworks, how to use multiple components together, etc. should live in guides.
-
-## Component Documentation
-
-For each component in react-spectrum, we have API documentation, which lists the available props and methods for the component, along with an overview with some description about how the component works along with some examples.
-
-### Adding API documentation
-
-We would like for all props and public methods of the components to be documented. This is done using a combination of React PropTypes, and JSDoc-style comments before each prop and method. These will be automatically extracted when building the site. Here's an example.
-
-```javascript
-import PropTypes from 'prop-types';
-import React from 'react';
-
-class SomeComponent extends React.Component {
- static propTypes = {
- /** Here is a description for the className prop */
- className: PropTypes.string,
-
- /** Here is a description for the size prop */
- size: PropTypes.number
- };
-
- /**
- * Here is a description for the somePublicMethod method.
- * @param {string} foo
- * @return {number}
- */
- somePublicMethod(foo) {
- return 4;
- }
-
- render() {
- return
Hello world
;
- }
-}
-```
-
-If you want to mark a method as private, but still document it for internal use, you can add the `@private` tag.
-
-### Adding a component overview
-
-In addition to API docs, we also have component level overviews, which provide more description about how to use each component, along with some code examples. These are MDX files which live in the `documentation/content/components` folder.
-
-The content of each overview will depend on the component its documenting, but in general there should be a few sections:
-
-1. A highlevel description about what the component does, and what you would use it for. These can be found on the main [spectrum design website](http://spectrum.corp.adobe.com) as well.
-2. An example, showing some code that demonstrates clearly how to use that component, along with its output running inline.
-3. Some description about each of the variants, states, and events that the component supports, along with how to provide data/content to the component. For components with datasources, some description about how to set up and use the datasources would also be helpful.
-4. Information about internationalization and accessibility requirements that clients will need to worry about.
diff --git a/documentation/content/community.mdx b/documentation/content/community.mdx
deleted file mode 100644
index 03998d30a9d..00000000000
--- a/documentation/content/community.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-# Community
-
-react-spectrum is not built by a centralized team but by an active community all around Adobe, across many products and groups.
-
-If you have questions about using react-spectrum, it is likely that someone in the community can help. Join us in #react-spectrum on Slack! It's also possible that your question has already been answered in our [FAQ](/guides/faq).
-
-If you would like to contribute, please check out our [contributing](/guides/contributing) guide! 🙏
-
-## Resources
-
-* Slack Channel: #react-spectrum
-* Email group: react-spectrum@adobe.com (subscribe to grp-react-spectrum)
-* [List of teams using react-spectrum](https://wiki.corp.adobe.com/display/RSP/Teams+using+react+spectrum) (add yourself!)
-* [Issues](https://github.com/adobe/react-spectrum/issues) - file bugs here!
-* [JIRA Board](https://jira.corp.adobe.com/secure/RapidBoard.jspa?rapidView=21015&projectKey=RSP&view=planning) - track what we're up to here.
-* [Github](https://github.com/adobe/react-spectrum)
diff --git a/documentation/content/components/Accordion.mdx b/documentation/content/components/Accordion.mdx
deleted file mode 100644
index 3c9d5c1a53b..00000000000
--- a/documentation/content/components/Accordion.mdx
+++ /dev/null
@@ -1,255 +0,0 @@
-import {Accordion,AccordionItem} from '@react/react-spectrum/Accordion';
-import FieldLabel from '@react/react-spectrum/FieldLabel';
-import Heading from '@react/react-spectrum/Heading';
-import RadioGroup from '@react/react-spectrum/RadioGroup';
-import Radio from '@react/react-spectrum/Radio';
-
-## Overview
-
-An Accordion is a list of expandable and collapsible sections. Accordion items can be toggled by clicking or tapping.
-
-### Example
-
-
-
- Item 1
-
-
-
-```jsx
-
-
- Item 1
-
-
-```
-
-### Default State
-
-
-
- Item 1
-
-
-
-```jsx
-
-
- Item 1
-
-
-```
-
-### Multi Selection
-`multiselectable` allows multiple open accordion items at same time.
-
-
-
- Item 1
-
-
- Item 2
-
-
-
-```jsx
-
-
- Item 1
-
-
- Item 2
-
-
-```
-
-### Default Selected Index
-`defaultSelectedIndex` will render the Accordion with the specified item open. The Accordion will be uncontrolled.
-
-
-
- Item 1
-
-
- Item 2
-
-
-
-```jsx
-
-
- Item 1
-
-
- Item 2
-
-
-```
-
-### Selected Index
-`selectedIndex` will put the Accordion in a controlled state and render with the specified item open. AccordionItems can be opened or closed only by changing selectedIndex prop value.
-
-
-
- Item 1
-
-
- Item 2
-
-
-
-```jsx
-
-
- Item 1
-
-
- Item 2
-
-
-```
-
-### ariaLevel
-
-An Accordion 'arialLevel' prop handles the heading level for 'Accordion item' headings, allowing a developer to place Accordion headings within the heading hierarchy of the application.
-
-
-
- Item 1
-
-
- Item 2
-
-
-
-```jsx
-
-
- Item 1
-
-
- Item 2
-
-
-```
-
-
-### Handling Events
-
-Events handlers onChange and other user actions can be registered on a `Accordion`. `onChange` is a function that will be called when an AccordionItem is selected (opened) or deselected (closed). It will be passed the updated selected index into the callback.
-
- console.log('Accordion clicked!', e)}>
-
- Item 1
-
-
- Item 2
-
-
-
-```jsx
- console.log('Accordion clicked!', e)}>
-
- Item 1
-
-
- Item 2
-
-
-```
-
-### Component Nesting
-
-This is an Accordion containing a nested radio group to demonstrate that keyboard selection of RadioGroup items does not propagate to ancestor Accordion element.
-
-
-
- Item 1
-
-
-
-
-
-
-
-
-
-
-
-```jsx
-
-
- Item 1
-
-
-
-
-
-
-
-
-
-
-```
-
-## Accessibility
-
-### WAI-ARIA Design Pattern
-
-The Accordion implements the Accordion design pattern, per [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion). Accordion headings are accessible via the TAB key as well as navigable using the arrow keys.
-
-
-### Labelling
-
-The group of Accordion headings and panels can be labelled, using either the `aria-label` or `aria-labelledby` attribute, to provide context for Accessibility.
-
-
- Checkout Steps
-
-
-
- Cart Confirmation Form
-
-
- Billing Information Form
-
-
- Shipping Information Form
-
-
- Shipping Method Form
-
-
- Payment Information Form
-
-
- Order Review Form
-
-
-
-```jsx
-
- Checkout Steps
-
-
-
- Cart Confirmation Form
-
-
- Billing Information Form
-
-
- Shipping Information Form
-
-
- Shipping Method Form
-
-
- Payment Information Form
-
-
- Order Review Form
-
-
-```
-
diff --git a/documentation/content/components/Alert.mdx b/documentation/content/components/Alert.mdx
deleted file mode 100644
index c9adcb3a588..00000000000
--- a/documentation/content/components/Alert.mdx
+++ /dev/null
@@ -1,138 +0,0 @@
-import Alert from '@react/react-spectrum/Alert';
-
-## Overview
-
-An **Alert** in Spectrum has several variations for different uses and multiple levels of loudness for various attention-getting needs.
-
-## Example
-
-Alerts have a number of props for controlling their visual state. This is the basic usage of the Alert.
-
-
-This is a React Spectrum alert
-
-
-```jsx
-
-This is a React Spectrum alert
-
-```
-## Variants
-
-There are many Alert variants to choose from in Spectrum. The `variant` prop controls the main variant of the alert.
-
-### Info Variant
-
-
- This is a React Spectrum alert
-
-
-```jsx
-
- This is a React Spectrum alert
-
-```
-
-### Help Variant
-
-
- This is a React Spectrum alert
-
-
-```jsx
-
- This is a React Spectrum alert
-
-```
-
-### Success Variant
-
-
- This is a React Spectrum alert
-
-
-```jsx
-
- This is a React Spectrum alert
-
-```
-### Warning Variant
-
-
- This is a React Spectrum alert
-
-
-```jsx
-
- This is a React Spectrum alert
-
-```
-
-### Error Variant
-
-
- This is a React Spectrum alert
-
-
-```jsx
-
- This is a React Spectrum alert
-
-```
-
-## Header
-Spectrum Alert with header prop.
-
-
- This is a React Spectrum alert
-
-
-```jsx
-
- This is a React Spectrum alert
-
-```
-## Accessibility
-
-### WAI-ARIA Design Pattern
-
-The Alert component implements the Alert design pattern, per
-[WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-practices/#alert).
-By default it uses `role` `alert` and will announce as an
-`assertive` live region. The `role` or `aria-live` politeness
-setting can be overridden to use, for example, `aria-live="polite"`
-or `aria-live="off"` rather than the implicit `assertive` politeness
-setting.
-
-
- This is a React Spectrum alert that should announce politely.
-
-
-
- This is a React Spectrum alert that should not announce.
-
-
-```jsx
-
- This is a React Spectrum alert that should announce politely
-
-
-
- This is a React Spectrum alert that should not announce.
-
-```
-
-### Custom `alt` text for Icon
-
-The Alert component uses a localized string derived on the `variant` prop to provide `alt` text to the Alert Icon, but this can be overridden by providing an `alt` prop.
-
-
-
- This is a React Spectrum alert where the Icon uses custom alt text.
-
-
-```jsx
-
- This is a React Spectrum alert where the Icon uses custom alt text.
-
-```
diff --git a/documentation/content/components/Asset.mdx b/documentation/content/components/Asset.mdx
deleted file mode 100644
index adcd41aa4e2..00000000000
--- a/documentation/content/components/Asset.mdx
+++ /dev/null
@@ -1,145 +0,0 @@
-import {Asset} from '@react/react-spectrum/Asset';
-
-An **Asset** represents a preview of an item in a file system or collection, such as an image, file, or folder. Asset previews support
-smart sizing to ensure that items of any aspect ratio look balanced as part of a collection. Assets also support advanced image loading
-and caching to enable a better experience when displayed in a virtual scroller such as GridView or TableView.
-
-## Images
-
-Here is an example of an Asset that displays an image.
-
-```jsx
-import {Asset} from '@react/react-spectrum/Asset';
-
-
-```
-
-
-
-
-
-## Files
-
-Here is an example of an Asset that displays a file.
-
-```jsx
-import {Asset} from '@react/react-spectrum/Asset';
-
-
-```
-
-
-
-
-
-## Folders
-
-Here is an example of an Asset that displays a folder.
-
-```jsx
-import {Asset} from '@react/react-spectrum/Asset';
-
-
-```
-
-
-
-
-
-## Smart Sizing
-
-By default, Asset enables smart sizing, which adjusts the size of the asset preview within its container based on its aspect
-ratio. This ensures that items of varying aspect ratios look balanced as part of a grid or list, rather than wide or tall items looking
-smaller by comparison. This behavior can be controlled using the `smartness` prop, which is a factor between 0 and 1. Setting it to 0 disables
-smartness, so that the asset can occupy the full size of its container.
-
-```jsx
-
-```
-
-## Image Caching
-
-By default, image assets are displayed using the standard browser `img` tag and browser caching sematics. However, when used as part of a virtual scroller
-such as GridView or TableView, it is useful to control this behavior more carefully in order to avoid reloading images more than necessary as they
-scroll in and out of view. In addition, since not all assets will be displayed initially, preloading images in advance of them scrolling into view
-can make for a better experience.
-
-In order to support this, the Asset component has a built in image cache. It is turned off by default because it requires CORS headers to be enabled
-on images by the server. If your backend supports CORS, you can enable image caching using the `cache` prop.
-
-```jsx
-
-```
-
-In addition to this, Asset supports the `placeholder` prop, which if already in the cache, will display while the full size image in the `src` prop
-is loading. This is useful if you preload small size images in advance and only load the large size ones when they scroll into view, for example.
-Or perhaps in a grid view, you display a lower resolution image than on your detail page that you can display while the full size image is loading.
-
-```jsx
-
-```
-
-## Headers and Authentication
-
-Sometimes images require authentication in order to fetch them from a server. Unless this is cookie or query string based, there is no way to do this
-using a standard `img` tag, for example using an `Authorization` header. The Asset component supports a `headers` prop to add headers to the
-request using the same infrastructure as the image cache. Therefore, assets requested with headers are implictly cached the same way as using the `cache`
-prop, and require CORS headers to be enabled as well.
-
-```jsx
-
-```
-
-## Internationalization
-
-To internationalize an Asset, a localized string should be passed to the `alt` prop of the asset.
-
-## Accessibility
-
-The `alt` prop should be used to specify alternate content for screen readers.
-
-### Images
-
-All images that are neither decorative nor having alternative text that would be redundant with displayed text,
-must use the `alt` prop to provide alternate content for screen readers.
-
-```jsx
-
-```
-
-## Folders and files
-
-By default, an Asset that displays a folder or file uses a default localized string as the accessibility label.
-Use the `alt` prop to override it with a custom label.
-
-```jsx
-
-```
-
-### Decorative
-
-Use the `decorative` prop to indicate that an asset is decorative, or redundant with displayed text, and should not announced by screen readers.
-
-```jsx
-
-```
-
-## Events
-
-### onLoad
-
-Function fired when an asset image is loaded.
-
- console.log(e)} />
-
-```jsx
- console.log(e)} />
-```
diff --git a/documentation/content/components/Autocomplete.mdx b/documentation/content/components/Autocomplete.mdx
deleted file mode 100644
index 855e2edb214..00000000000
--- a/documentation/content/components/Autocomplete.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
-import Autocomplete from '@react/react-spectrum/Autocomplete';
-import Checkbox from '@react/react-spectrum/Checkbox';
-import FieldLabel from '@react/react-spectrum/FieldLabel';
-import Textfield from '@react/react-spectrum/Textfield';
-
-## Overview
-An Autocomplete relies on a method, `getCompletions`, to predict the string a user will want. `getCompletions` can implement
-any kind of predictive algorithm, could be based on past strings, could be a predefined list. A user must select a string
-from the list by default. Using allowCreate we can allow the user to enter any string, regardless of its existence in
-the list.
-
-### Default
-
- ['Chocolate', 'Vanilla']}>
-
-
-
-```jsx
- ['Chocolate', 'Vanilla']}>
-
-
-```
-
-
-## Autocomplete with allowCreate
-Try typing 'puppy' and hitting enter on the above example and this one.
-
- ['Chocolate', 'Vanilla']}>
-
-
-
-
-```jsx
- ['Chocolate', 'Vanilla']}>
-
-
-```
-
-### renderItem
-
-You can use the `renderItem` prop to customize the rendering of the items displayed in the dropdown.
-This is useful in case custom props are needed for styling or accessibility, or using a semantic
-element for the type of data being displayed (e.g. `