diff --git a/.chromatic/constants.js b/.chromatic/constants.js
index 4de8bf70998..9fb082ad703 100644
--- a/.chromatic/constants.js
+++ b/.chromatic/constants.js
@@ -5,6 +5,7 @@ import themeDark from '@adobe/spectrum-css-temp/vars/spectrum-dark.css';
import themeDarkest from '@adobe/spectrum-css-temp/vars/spectrum-darkest.css';
import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
+import express from '@adobe/spectrum-css-temp/vars/express.css';
const THEME = {
global: themeGlobal,
@@ -20,7 +21,7 @@ export const scales = {
};
export let defaultTheme = {
- global: themeGlobal,
+ global: THEME.global,
light: THEME.light,
dark: THEME.darkest,
medium: scales.medium,
@@ -28,7 +29,7 @@ export let defaultTheme = {
};
export let altTheme = {
- global: themeGlobal,
+ global: THEME.global,
light: THEME.lightest,
dark: THEME.dark,
medium: scales.medium,
@@ -42,6 +43,25 @@ export let themes = {
darkest: defaultTheme
};
+export let expressThemes = {};
+for (let key in themes) {
+ expressThemes[key] = {
+ ...themes[key],
+ global: {
+ ...themes[key].global,
+ express: express.express
+ },
+ medium: {
+ ...themes[key].medium,
+ express: express.medium
+ },
+ large: {
+ ...themes[key].large,
+ express: express.large
+ }
+ };
+}
+
// Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
export let locales = [
{label: 'Auto', value: ''},
diff --git a/.chromatic/custom-addons/chromatic/disableAnimations.css b/.chromatic/custom-addons/chromatic/disableAnimations.css
new file mode 100644
index 00000000000..fa154115df4
--- /dev/null
+++ b/.chromatic/custom-addons/chromatic/disableAnimations.css
@@ -0,0 +1,3 @@
+.disableAnimations * {
+ transition: none !important;
+}
diff --git a/.chromatic/custom-addons/chromatic/index.js b/.chromatic/custom-addons/chromatic/index.js
index bab8d2934c0..f50b3c787ce 100644
--- a/.chromatic/custom-addons/chromatic/index.js
+++ b/.chromatic/custom-addons/chromatic/index.js
@@ -1,7 +1,8 @@
-import {locales, scales, themes} from '../../constants';
+import {expressThemes, locales, scales, themes} from '../../constants';
import {makeDecorator} from '@storybook/addons';
import {Provider, View} from '@adobe/react-spectrum';
import React, {useEffect} from 'react';
+import './disableAnimations.css';
export const withChromaticProvider = makeDecorator({
name: 'withChromaticProvider',
@@ -14,6 +15,8 @@ export const withChromaticProvider = makeDecorator({
} else {
selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US', 'ar-AE'];
}
+ let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes));
+ let scalesToRender = options.scales || Object.keys(scales);
let height;
let minHeight;
if(isNaN(options.height)) {
@@ -22,12 +25,17 @@ export const withChromaticProvider = makeDecorator({
height = options.height;
}
+ let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
+ let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
+ let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
+ let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
+
// do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
return (
- {(options.colorSchemes || Object.keys(themes)).map(colorScheme =>
- (options.scales || Object.keys(scales)).map(scale =>
+ {colorSchemes.map(colorScheme =>
+ scalesToRender.map(scale =>
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
@@ -38,6 +46,14 @@ export const withChromaticProvider = makeDecorator({
)
)
)}
+ {options.express !== false &&
+
+
+ express, {expressColorScheme}, {expressScale}, {expressLocale}
+ {getStory(context)}
+
+
+ }
)
diff --git a/.chromatic/main.js b/.chromatic/main.js
index f28b81130d1..f260356d41f 100644
--- a/.chromatic/main.js
+++ b/.chromatic/main.js
@@ -1,36 +1,15 @@
-const webpackconfig = require('./webpack-chromatic.config.js');
-
module.exports = {
- stories: ['../packages/**/chromatic/**/*.chromatic.@(js|jsx|ts|tsx)'],
- addons: [
+ core: {
+ builder: "storybook-builder-parcel",
+ },
+ stories: ['../packages/**/chromatic/**/*.chromatic.{js,jsx,ts,tsx}'],
+ addons: process.env.NODE_ENV === 'production' ? [] : [
'@storybook/addon-actions',
- '@storybook/addon-links',
- '@storybook/addon-a11y',
- '@storybook/addon-knobs'
+ '@storybook/addon-a11y'
],
typescript: {
check: false,
reactDocgen: false
- },
- webpackFinal: async (config) => {
- let custom = webpackconfig();
-
- let resultConfig = {
- ...config,
- plugins: config.plugins.concat(custom.plugins),
- parallelism: 1,
- module: {
- ...config.module,
- rules: custom.module.rules
- }
- };
-
- if (resultConfig.mode === 'production') {
- // see https://github.com/storybooks/storybook/issues/1570
- resultConfig.plugins = resultConfig.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
- }
-
- return resultConfig;
}
};
diff --git a/.chromatic/preview-head.html b/.chromatic/preview-head.html
index 9c9d6db567a..b55ba3dee9b 100644
--- a/.chromatic/preview-head.html
+++ b/.chromatic/preview-head.html
@@ -1,61 +1,151 @@
-
-
- {props.context.parameters.note && (
- Note
-
- {props.context.parameters.note}
- )}
-
- );
+ if (props.options.mainElement == null) {
+ return (
+
+
+ {storyReady && props.children}
+
+
+ );
+ } else {
+ return (
+
+ {storyReady && props.children}
+
+ );
+ }
}
export const withProviderSwitcher = makeDecorator({
diff --git a/.storybook/custom-addons/provider/register.js b/.storybook/custom-addons/provider/register.js
index 65189e1df77..6f6a42ec689 100644
--- a/.storybook/custom-addons/provider/register.js
+++ b/.storybook/custom-addons/provider/register.js
@@ -36,7 +36,7 @@ let TOAST_POSITIONS = [
];
function ProviderFieldSetter({api}) {
- let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined, theme: providerValuesFromUrl.theme || undefined, scale: providerValuesFromUrl.scale || undefined, toastPosition: providerValuesFromUrl.toastPosition || 'bottom'});
+ let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined, theme: providerValuesFromUrl.theme || undefined, scale: providerValuesFromUrl.scale || undefined, express: providerValuesFromUrl.express === 'true'});
let channel = addons.getChannel();
let onLocaleChange = (e) => {
let newValue = e.target.value || undefined;
@@ -62,10 +62,10 @@ function ProviderFieldSetter({api}) {
return next;
});
};
- let onToastPositionChange = (e) => {
- let newValue = e.target.value;
+ let onExpressChange = (e) => {
+ let newValue = e.target.checked;
setValues((old) => {
- let next = {...old, toastPosition: newValue};
+ let next = {...old, express: newValue};
channel.emit('provider/updated', next);
return next;
});
@@ -85,7 +85,7 @@ function ProviderFieldSetter({api}) {
'providerSwitcher-locale': values.locale || '',
'providerSwitcher-theme': values.theme || '',
'providerSwitcher-scale': values.scale || '',
- 'providerSwitcher-toastPosition': values.toastPosition || '',
+ 'providerSwitcher-express': String(values.express),
});
});
@@ -110,10 +110,8 @@ function ProviderFieldSetter({api}) {
- Toast Position:
-
- {TOAST_POSITIONS.map(position => {position.label} )}
-
+ Express:
+
)
diff --git a/.storybook/custom-addons/scrolling/index.js b/.storybook/custom-addons/scrolling/index.js
new file mode 100644
index 00000000000..3ab635e1d64
--- /dev/null
+++ b/.storybook/custom-addons/scrolling/index.js
@@ -0,0 +1,59 @@
+import {addons, makeDecorator} from '@storybook/addons';
+import clsx from 'clsx';
+import {getQueryParams} from '@storybook/client-api';
+import React, {useEffect, useState} from 'react';
+import {useViewportSize} from '@react-aria/utils';
+
+function ScrollingDecorator(props) {
+ let {children} = props;
+ let [isScrolling, setScrolling] = useState(getQueryParams()?.scrolling === 'true' || false);
+ let {height: minHeight} = useViewportSize();
+
+ useEffect(() => {
+ let channel = addons.getChannel();
+ let updateScrolling = (val) => {
+ setScrolling(val);
+ };
+ channel.on('scrolling/updated', updateScrolling);
+ return () => {
+ channel.removeListener('scrolling/updated', updateScrolling);
+ };
+ }, []);
+
+ let styles = {alignItems: 'center', boxSizing: 'border-box', display: 'flex', justifyContent: 'center'};
+ if (isScrolling) {
+ return (
+
+
+ {children}
+
+
+ );
+ } else {
+ return (
+
+ {children}
+
+ );
+ }
+}
+
+function StoryWrapper({children, className, style}) {
+ return (
+
+ {React.version}
+ {children}
+
+ );
+}
+
+export const withScrollingSwitcher = (Story) => {
+ return (
+
+
+ )
+}
diff --git a/.storybook/custom-addons/scrolling/register.js b/.storybook/custom-addons/scrolling/register.js
new file mode 100644
index 00000000000..bb238529d78
--- /dev/null
+++ b/.storybook/custom-addons/scrolling/register.js
@@ -0,0 +1,40 @@
+import {addons, types} from '@storybook/addons';
+import {getQueryParams} from '@storybook/client-api';
+import React, {useEffect, useState} from 'react';
+
+const ScrollingToolbar = ({api}) => {
+ let channel = addons.getChannel();
+ let [isScrolling, setScrolling] = useState(getQueryParams()?.scrolling === 'true' || false);
+ let onChange = () => {
+ setScrolling((old) => {
+ channel.emit('scrolling/updated', !old);
+ return !old;
+ })
+ };
+
+ useEffect(() => {
+ api.setQueryParams({
+ 'scrolling': isScrolling
+ });
+ });
+
+ return (
+
+ );
+};
+
+addons.register('ScrollingSwitcher', (api) => {
+ addons.add('ScrollingSwitcher', {
+ title: 'Scrolling switcher',
+ type: types.TOOL,
+ //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
+ match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+ render: () =>
+ {children}
+
+ ) : children;
+}
+
+export const withStrictModeSwitcher = makeDecorator({
+ name: 'withStrictModeSwitcher',
+ parameterName: 'strictModeSwitcher',
+ wrapper: (getStory, context) => {
+ return (
+
+ {getStory(context)}
+
+ );
+ }
+});
diff --git a/.storybook/custom-addons/strictmode/register.js b/.storybook/custom-addons/strictmode/register.js
new file mode 100644
index 00000000000..b226fe1e0b3
--- /dev/null
+++ b/.storybook/custom-addons/strictmode/register.js
@@ -0,0 +1,40 @@
+import {addons, types} from '@storybook/addons';
+import {getQueryParams} from '@storybook/client-api';
+import React, {useEffect, useState} from 'react';
+
+const StrictModeToolBar = ({api}) => {
+ let channel = addons.getChannel();
+ let [isStrict, setStrict] = useState(getQueryParams()?.strict === 'true' || false);
+ let onChange = () => {
+ setStrict((old) => {
+ channel.emit('strict/updated', !old);
+ return !old;
+ })
+ };
+
+ useEffect(() => {
+ api.setQueryParams({
+ 'strict': isStrict
+ });
+ });
+
+ return (
+
+ );
+};
+
+addons.register('StrictModeSwitcher', (api) => {
+ addons.add('StrictModeSwitcher', {
+ title: 'Strict mode switcher',
+ type: types.TOOL,
+ //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
+ match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+ render: () =>
- {REACT_VERSION}
- { children }
-
- );
-}
diff --git a/.storybook/main.js b/.storybook/main.js
index 5a44d19701e..0e0c71ae681 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,40 +1,22 @@
-const webpackconfig = require('./webpack-storybook.config.js');
-
module.exports = {
- stories: ['../packages/**/stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ core: {
+ builder: "storybook-builder-parcel",
+ },
+ stories: ['../packages/**/stories/*.stories.{js,jsx,ts,tsx}'],
addons: [
'@storybook/addon-actions',
- '@storybook/addon-links',
'@storybook/addon-a11y',
- '@storybook/addon-knobs',
+ '@storybook/addon-controls',
'storybook-dark-mode',
'./custom-addons/provider/register',
'./custom-addons/descriptions/register',
- './theme.register'
+ './custom-addons/theme/register',
+ './custom-addons/strictmode/register',
+ './custom-addons/scrolling/register'
],
typescript: {
check: false,
reactDocgen: false
- },
- webpackFinal: async (config) => {
- let custom = webpackconfig();
-
- let resultConfig = {
- ...config,
- plugins: config.plugins.concat(custom.plugins),
- parallelism: 1,
- module: {
- ...config.module,
- rules: custom.module.rules
- }
- };
-
- if (resultConfig.mode === 'production') {
- // see https://github.com/storybooks/storybook/issues/1570
- resultConfig.plugins = resultConfig.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
- }
-
- return resultConfig;
}
};
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 7569aabc587..072aca784fd 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1 +1,24 @@
-
- {story()}
-
- ),
+ withScrollingSwitcher,
+ withStrictModeSwitcher,
withProviderSwitcher
];
diff --git a/.storybook/webpack-storybook.config.js b/.storybook/webpack-storybook.config.js
deleted file mode 100644
index d11af83a5f6..00000000000
--- a/.storybook/webpack-storybook.config.js
+++ /dev/null
@@ -1,80 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const md5 = require('md5');
-const fs = require('fs');
-const reactVersion = require('react/package.json').version;
-
-const fileHashMemo = {};
-
-const getFileHash = (filepath) => {
- if (fileHashMemo[filepath]) {
- return fileHashMemo[filepath];
- }
- let contentHash = md5(fs.readFileSync(filepath, 'utf8'));
- fileHashMemo[filepath] = contentHash.substr(contentHash.length - 5);
- return fileHashMemo[filepath];
-};
-
-const generateScopedName = (localName, resourcePath) => {
- let componentName = resourcePath.split('/').slice(-2, -1);
- let contentHash = getFileHash(resourcePath);
-
- //let hash = md5(resourcePath);
- return `${componentName}_${localName}_${contentHash}`;
-};
-
-module.exports = () => {
- return {
- plugins: [new webpack.DefinePlugin({REACT_VERSION: JSON.stringify(reactVersion)})],
- parallelism: 1,
- module: {
- rules: [
- {
- test: /\.jsx?$/,
- include: [__dirname, path.resolve(__dirname + '/../src'), path.resolve(__dirname + '/../packages'), /collection-view/],
- loader: require.resolve('babel-loader')
- },
- {
- test: /\.(ts|tsx)$/,
- use: [
- { loader: require.resolve('babel-loader') },
- ]
- },
- {
- test: /packages[\\/].*\.css$/,
- use: [
- 'style-loader',
- {
- loader: 'css-loader',
- options: {
- modules: true,
- importLoaders: 1,
- getLocalIdent: (context, localIdentName, localName) => {
- return generateScopedName(localName, context.resourcePath);
- },
- }
- },
- {
- loader: 'postcss-loader',
- options: {
- ident: 'postcss',
- plugins: require('../postcss.config').plugins
- }
- }
- ],
- include: path.resolve(__dirname, '../')
- },
- {
- test: /\.css$/,
- loaders: ['style-loader', 'css-loader'],
- include: path.resolve(__dirname, '../'),
- exclude: /packages[\\/].*\.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/Makefile b/Makefile
index 5712b637777..ed5e2a8e375 100644
--- a/Makefile
+++ b/Makefile
@@ -68,6 +68,9 @@ storybook:
storybook-16:
yarn build:storybook-16
+storybook-17:
+ yarn build:storybook-17
+
# for now doesn't have deploy since v3 doesn't have a place for docs and stuff yet
ci:
$(MAKE) publish
@@ -79,7 +82,13 @@ publish-nightly: build
yarn publish:nightly
build:
- parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/*/ --no-optimize
+ parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/react-aria-components --no-optimize
+ yarn lerna run prepublishOnly
+ for pkg in packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/@adobe/react-spectrum/ packages/react-aria/ packages/react-stately/ packages/react-aria-components/; \
+ do cp $$pkg/dist/module.js $$pkg/dist/import.mjs; \
+ done
+ sed -i.bak s/\.js/\.mjs/ packages/@react-aria/i18n/dist/import.mjs
+ rm packages/@react-aria/i18n/dist/import.mjs.bak
website:
yarn build:docs --public-url /reactspectrum/$$(git rev-parse HEAD)/docs --dist-dir dist/$$(git rev-parse HEAD)/docs
@@ -87,3 +96,7 @@ website:
website-production:
node scripts/buildWebsite.js
cp packages/dev/docs/pages/robots.txt dist/production/docs/robots.txt
+
+check-examples:
+ node scripts/extractExamples.mjs
+ yarn tsc --project dist/docs-examples/tsconfig.json
diff --git a/README.md b/README.md
index 74319413f93..90701588f89 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,12 @@ A library of React Hooks that provides cross-platform state management for your
[More information about React Stately](https://react-spectrum.adobe.com/react-stately/index.html)
+### Internationalized
+
+A collection of framework-agnostic internationalization libraries for the web.
+
+[Internationalized Packages](https://react-spectrum.adobe.com/internationalized/index.html)
+
## Features
* ♿️ **[Accessible](https://react-spectrum.adobe.com/react-aria/accessibility.html)** – Accessibility and behavior is implemented 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.
diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js
index 77a69441a36..a61d56e160f 100644
--- a/__mocks__/fileMock.js
+++ b/__mocks__/fileMock.js
@@ -9,4 +9,4 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
-
+module.exports = '';
diff --git a/babel-esm.config.json b/babel-esm.config.json
new file mode 100644
index 00000000000..cb8c7529066
--- /dev/null
+++ b/babel-esm.config.json
@@ -0,0 +1,61 @@
+{
+ "presets": [
+ "@babel/preset-typescript",
+ "@babel/preset-react",
+ ["@babel/preset-env",
+ {
+ "loose": true,
+ "modules": false
+ }
+ ]
+ ],
+ "env": {
+ "storybook": {
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "loose": true,
+ "targets": {
+ "esmodules": true
+ }
+ }
+ ]
+ ]
+ },
+ "cover": {
+ "plugins": [
+ "istanbul"
+ ]
+ },
+ "production": {
+ "plugins": [
+ [
+ "react-remove-properties",
+ {
+ "properties": [
+ "data-testid"
+ ]
+ }
+ ]
+ ]
+ }
+ },
+ "plugins": [
+ [
+ "@babel/plugin-transform-runtime",
+ {
+ "version": "^7.6.2"
+ }
+ ],
+ [
+ "@babel/plugin-proposal-decorators",
+ {
+ "legacy": true
+ }
+ ],
+ "transform-glob-import",
+ "babel-plugin-macros"
+ ],
+ "sourceType": "unambiguous"
+}
diff --git a/bin/imports.js b/bin/imports.js
index 7569f5595f0..a0e0c4cdace 100644
--- a/bin/imports.js
+++ b/bin/imports.js
@@ -16,73 +16,78 @@ const fs = require('fs');
const Module = require('module');
const substrings = ['-', '+'];
-module.exports = function (context) {
- let processNode = (node) => {
- if (!node.source || node.importKind === 'type') {
- 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;
+module.exports = {
+ meta: {
+ fixable: 'code'
+ },
+ create: function (context) {
+ let processNode = (node) => {
+ if (!node.source || node.importKind === 'type') {
+ 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) && pkgName !== pkg.name) {
+ 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'));
+ let pkgVersion = substrings.some(v => depPkg.version.includes(v)) ? depPkg.version : `^${depPkg.version}`;
+
+ if (pkgName === '@react-spectrum/provider') {
+ pkg.peerDependencies = insertObject(pkg.peerDependencies, pkgName, pkgVersion);
+ } else {
+ pkg.dependencies = insertObject(pkg.dependencies, pkgName, pkgVersion);
+ }
+
+ fs.writeFileSync(pkgPath, JSON.stringify(pkg, false, 2) + '\n');
+
+ // Fake fix so eslint doesn't show the error.
+ return {
+ range: [0, 0],
+ text: ''
+ };
}
-
- let depPkg = JSON.parse(fs.readFileSync(depPath, 'utf8'));
- let pkgVersion = substrings.some(v => depPkg.version.includes(v)) ? depPkg.version : `^${depPkg.version}`;
-
- if (pkgName === '@react-spectrum/provider') {
- pkg.peerDependencies = insertObject(pkg.peerDependencies, pkgName, pkgVersion);
- } else {
- pkg.dependencies = insertObject(pkg.dependencies, pkgName, pkgVersion);
- }
-
- 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
- };
+ });
+ }
+ };
+
+ return {
+ ImportDeclaration: processNode,
+ ExportNamedDeclaration: processNode,
+ ExportAllDeclaration: processNode
+ };
+ }
};
function exists(deps, name) {
diff --git a/bin/sort-imports.js b/bin/sort-imports.js
index 8ac58e2613b..f37a8355cd9 100644
--- 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/rac-tailwind/.parcelrc b/examples/rac-tailwind/.parcelrc
new file mode 100644
index 00000000000..d931ed822ef
--- /dev/null
+++ b/examples/rac-tailwind/.parcelrc
@@ -0,0 +1,7 @@
+{
+ "extends": "@parcel/config-default",
+ "resolvers": ["@parcel/resolver-glob", "..."],
+ "transformers": {
+ "../../packages/*/*/intl/*.json": ["parcel-transformer-intl"]
+ }
+}
diff --git a/examples/rac-tailwind/.postcssrc b/examples/rac-tailwind/.postcssrc
new file mode 100644
index 00000000000..0985cb2aab0
--- /dev/null
+++ b/examples/rac-tailwind/.postcssrc
@@ -0,0 +1,5 @@
+{
+ "plugins": {
+ "tailwindcss": {}
+ }
+}
diff --git a/examples/rac-tailwind/package.json b/examples/rac-tailwind/package.json
new file mode 100644
index 00000000000..5bc335e9cf5
--- /dev/null
+++ b/examples/rac-tailwind/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "rac-tailwind-example",
+ "private": true,
+ "scripts": {
+ "start": "parcel src/index.html",
+ "build": "parcel build src/index.html"
+ },
+ "dependencies": {
+ "@heroicons/react": "^2.0.16",
+ "parcel": "^2.8.3",
+ "postcss": "^8.4.21",
+ "react": "^18.2.0",
+ "react-aria-components": "^1.0.0-alpha.0",
+ "react-dom": "^18.2.0",
+ "tailwindcss": "^3.3.0",
+ "tailwindcss-animate": "^1.0.5"
+ },
+ "devDependencies": {
+ "process": "^0.11.10"
+ }
+}
diff --git a/examples/rac-tailwind/src/App.js b/examples/rac-tailwind/src/App.js
new file mode 100644
index 00000000000..2aece522c88
--- /dev/null
+++ b/examples/rac-tailwind/src/App.js
@@ -0,0 +1,566 @@
+import { ArrowUpIcon, BellIcon, CheckCircleIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { ChatBubbleOvalLeftEllipsisIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { useMemo, useState } from 'react';
+import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Cell, Collection, Column, ComboBox, DateInput, DatePicker, DateSegment, Dialog, DialogTrigger, Group, Header, Heading, Input, Item, Label, ListBox, Menu, MenuTrigger, Modal, ModalOverlay, OverlayArrow, Popover, ProgressBar, Radio, RadioGroup, Row, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Tab, Table, TableBody, TableHeader, TabList, TabPanel, TabPanels, Tabs, Text } from 'react-aria-components';
+import { useAsyncList } from 'react-stately';
+import { people } from './people.js';
+import stocks from './stocks.json';
+
+export function App() {
+ return (
+ <>
+ React Aria Components 🤝 Tailwind CSS
+
+ Example code • Docs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ☰
+
+
+ New…
+ Open…
+ Save
+ Save as…
+ Print…
+
+
+
+
- `
+ group flex w-full items-center rounded-md px-3 py-2 sm:text-sm outline-none cursor-default
+ ${isFocused ? 'bg-violet-500 text-white' : 'text-gray-900'}
+ `} />;
+}
+
+function OverlayButton(props) {
+ return
+
+ Favorite Animal
+
+
+
+
+ Aardvark
+ Cat
+ Dog
+ Kangaroo
+ Panda
+
+
+
+
- `
+ relative group cursor-default select-none py-2 pl-10 pr-4 outline-none rounded
+ ${isFocused ? 'bg-[--focus-bg] text-white' : 'text-gray-900'}
+ `}>
+ {({ isSelected }) => (
+ <>
+
{props.children}
+ {isSelected &&
+
+
+ }
+
+ )}
+
+ );
+}
+
+function ComboBoxExample() {
+ return (
+
+
+ Favorite Animal
+
+
+
+
+
+
+ Aardvark
+ Cat
+ Dog
+ Kangaroo
+ Panda
+
+
+
+
+
+
+ Blog
+ Releases
+ Docs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`
+ w-full rounded-full py-2.5 sm:text-sm font-medium leading-5 text-center cursor-default ring-black outline-none transition-colors
+ ${isFocusVisible ? 'ring-2' : ''}
+ ${isSelected ? 'text-emerald-700 bg-white shadow' : 'text-lime-50 data-[hovered]:bg-white/[0.12] data-[hovered]:text-white data-[pressed]:bg-white/[0.12] data-[pressed]:text-white'}
+ `} />
+ );
+}
+
+function MyTabPanel(props) {
+ return
+ {title}
+ {summary}
+
+ );
+}
+
+function RadioGroupExample() {
+ return (
+
+
+ Shipping
+
+
+ );
+}
+
+function MyRadio({name, time, price}) {
+ return (
+ `
+ relative flex cursor-default rounded-lg px-4 py-3 shadow-lg focus:outline-none bg-clip-padding border border-transparent
+ ${isFocusVisible ? 'ring-2 ring-blue-600 ring-offset-1 ring-offset-white/80' : ''}
+ ${isSelected ? 'bg-blue-600 border-white/30 text-white' : ''}
+ ${isPressed && !isSelected ? 'bg-blue-50' : ''}
+ ${!isSelected && !isPressed ? 'bg-white' : ''}
+ `}>
+ {({isSelected}) => (
+
+ )}
+
+ );
+}
+
+function ModalExample() {
+ return (
+
+
+ Open dialog
+ `
+ fixed inset-0 z-10 overflow-y-auto bg-black bg-opacity-25 flex min-h-full items-center justify-center p-4 text-center backdrop-blur
+ ${isEntering ? 'animate-in fade-in duration-300 ease-out fill-mode-forwards' : ''}
+ ${isExiting ? 'animate-out fade-out duration-200 ease-in fill-mode-forwards' : ''}
+ `}>
+ `
+ w-full max-w-md overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl
+ ${isEntering ? 'animate-in fade-in zoom-in-95 ease-out duration-300 fill-mode-forwards' : ''}
+ ${isExiting ? 'animate-out fade-out zoom-out-95 ease-in duration-200 fill-mode-forwards' : ''}
+ `}>
+
+ {({ close }) => (<>
+ Delete folder
+
+ Are you sure you want to delete "Documents"? All contents will be permanently destroyed.
+
+
+
+ Cancel
+
+
+ Delete
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`
+ px-4 sm:px-0 rounded-lg drop-shadow-lg ring-1 ring-black/10 bg-white ${props.className || ''}
+ ${isEntering ? 'animate-in fade-in data-[placement=bottom]:slide-in-from-top-1 data-[placement=top]:slide-in-from-bottom-1 ease-out duration-200 fill-mode-forwards' : ''}
+ ${isExiting ? 'animate-out fade-out data-[placement=bottom]:slide-out-to-top-1 data-[placement=top]:slide-out-to-bottom-1 ease-in duration-150 fill-mode-forwards' : ''}
+ `} />
+ );
+}
+
+function Notification({avatar, name, time, text}) {
+ return (
+
+ {name}
+ Commented {time} ago
+ {text}
+
+ );
+}
+
+function SwitchExample() {
+ return (
+
+ );
+}
+
+function SliderExample() {
+ return (
+
+
+
+ Opacity
+
+
+ {(state) => <>
+
+
+
+
+
+
+ {({percentage, valueText}) => <>
+
+ Loading…
+ {valueText}
+
+
+ }
+
+
+
+ Date
+
+
+ {(segment) =>
+
+
+
+
+
+
+
+
+
+ {day => {day} }
+
+
+ {date =>
+
+
+
+
+
+
+ );
+}
+
+function ContactListExample() {
+ return (
+
+
+
+
+
+ {item =>
+
+
+ );
+}
+
+function ContactSection({title, children, items}) {
+ return (
+
+ );
+}
+
+function Contact({id, avatar, name, handle}) {
+ return (
+ -
+
{name}
+ {handle}
+
+
+ );
+}
+
+// TODO: we need a way to pass in a custom keyboard delegate so grid navigation works.
+function ImageGridExample() {
+ let list = useAsyncList({
+ async load({ signal, cursor }) {
+ let page = cursor || 1;
+ let res = await fetch(
+ `https://api.unsplash.com/photos?page=${page}&per_page=25&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
+ { signal }
+ );
+ let items = await res.json();
+ return { items, cursor: page + 1 };
+ }
+ });
+
+ return (
+
+
+ {item => (
+ -
+
{item.user.name}
+
+ )}
+
+
+
+
+
+ Symbol
+ Name
+ Market Cap
+ Sector
+ Industry
+
+
+ {item => (
+
+ ${item.symbol} {item.name}
+ {item.marketCap}
+ {item.sector}
+ {item.industry}
+
+ )}
+
+
+
+
+ {({allowsSorting, sortDirection}) => (
+
+ {props.children}
+ {allowsSorting && (
+
+ {sortDirection &&
+ )}
+
+ )}
+
+ );
+}
+
+function StockRow(props) {
+ return |
;
+}
+
+function StockCell(props) {
+ return | ;
+}
diff --git a/examples/rac-tailwind/src/index.html b/examples/rac-tailwind/src/index.html
new file mode 100644
index 00000000000..54cb0e92934
--- /dev/null
+++ b/examples/rac-tailwind/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+ React Aria Components 🤝 Tailwind CSS
+
+
+
+
diff --git a/examples/rac-tailwind/src/index.js b/examples/rac-tailwind/src/index.js
new file mode 100644
index 00000000000..49174fc2ea9
--- /dev/null
+++ b/examples/rac-tailwind/src/index.js
@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import { App } from './App';
+
+let root = createRoot(document.getElementById('root'));
+root.render(Starter App
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
diff --git a/examples/rsp-cra-18/public/logo192.png b/examples/rsp-cra-18/public/logo192.png
new file mode 100644
index 00000000000..fc44b0a3796
Binary files /dev/null and b/examples/rsp-cra-18/public/logo192.png differ
diff --git a/examples/rsp-cra-18/public/logo512.png b/examples/rsp-cra-18/public/logo512.png
new file mode 100644
index 00000000000..a4e47a6545b
Binary files /dev/null and b/examples/rsp-cra-18/public/logo512.png differ
diff --git a/examples/rsp-cra-18/public/manifest.json b/examples/rsp-cra-18/public/manifest.json
new file mode 100644
index 00000000000..080d6c77ac2
--- /dev/null
+++ b/examples/rsp-cra-18/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "React App",
+ "name": "Create React App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ },
+ {
+ "src": "logo192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/examples/rsp-cra-18/public/robots.txt b/examples/rsp-cra-18/public/robots.txt
new file mode 100644
index 00000000000..e9e57dc4d41
--- /dev/null
+++ b/examples/rsp-cra-18/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/examples/rsp-cra-18/src/App.css b/examples/rsp-cra-18/src/App.css
new file mode 100644
index 00000000000..b6b369d5d05
--- /dev/null
+++ b/examples/rsp-cra-18/src/App.css
@@ -0,0 +1,22 @@
+body{
+ height: 100%;
+}
+
+.no-bullets{
+ list-style-type: none;
+ padding: 0px;
+}
+
+#root{
+ padding: 0;
+ margin: 0;
+ height: 100%;
+}
+
+html {
+ height: 100%;
+}
+
+.content-padding{
+ padding: 50px;
+}
\ No newline at end of file
diff --git a/examples/rsp-cra-18/src/App.tsx b/examples/rsp-cra-18/src/App.tsx
new file mode 100644
index 00000000000..2569e1b55d2
--- /dev/null
+++ b/examples/rsp-cra-18/src/App.tsx
@@ -0,0 +1,22 @@
+import './App.css';
+import {Provider, defaultTheme} from '@adobe/react-spectrum'
+import Lighting from './Lighting';
+import {useState} from 'react'
+import BodyContent from './BodyContent';
+
+function App() {
+ let [selected, setSelection] = useState(false);
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/examples/rsp-cra-18/src/BodyContent.tsx b/examples/rsp-cra-18/src/BodyContent.tsx
new file mode 100644
index 00000000000..37402350ad3
--- /dev/null
+++ b/examples/rsp-cra-18/src/BodyContent.tsx
@@ -0,0 +1,108 @@
+import {useState, FormEvent, Key, useRef} from "react";
+import {Item, TabList, TabPanels, Tabs} from '@adobe/react-spectrum'
+import TodoList from './TodoList';
+import JournalList from './JournalList';
+import ToDo from './ToDo'
+import Journal from './Journal'
+
+
+function BodyContent(){
+
+ //states for the To-Do list
+ const [list, setList] = useState([]);
+ const [value, setValue] = useState('');
+ const [completed, setCompleted] = useState([]);
+ const count = useRef(0);
+
+ //states for journal entries
+ const [rating, setRating] = useState('');
+ const [entryList, setEntryList] = useState([]);
+ const [description, setDescription] = useState('');
+ const countJournals = useRef(0);
+
+ const options = [
+ {id: "Bad", name: "Bad"},
+ {id: "Okay", name: "Okay"},
+ {id: "Good", name: "Good"},
+ {id: "Great", name: "Great"}
+ ]
+
+ //functions for the To-Do list
+ function handleSubmitToDo(e: FormEvent){
+ e.preventDefault()
+
+ if (value.length > 0){
+ setList(prevListArray => {
+ return [
+ ...prevListArray,
+ {id: count.current, task: value}]
+ })
+
+ count.current = count.current + 1;
+ }
+ setValue(""); //clears text field on submit
+ }
+
+ function updateCompleted(complete : string){
+ setCompleted(prevListArray => {
+ return [
+ ...prevListArray,
+ {id: prevListArray.length, task: complete}]
+ });
+ }
+
+ function clearCompleted(){
+ setCompleted(() => {
+ return [];
+ })
+ }
+
+ //functions for journal entries
+ function handleSubmitJournals(e: FormEvent){
+ e.preventDefault()
+
+ countJournals.current = countJournals.current + 1; //used to determine key for each item in the entryList array
+
+ setEntryList(prevListArray => {
+ return [
+ ...prevListArray,
+ {rate: rating, description: description, id: countJournals.current}
+ ]
+ })
+
+ setValue('') //clears the text area when submitted
+ }
+
+ return(
+
+
+
+ - To-do List
+ - Daily Journal
+
+
+ -
+
+
+ -
+
+
+
+
+ )
+}
+
+export default BodyContent;
\ No newline at end of file
diff --git a/examples/rsp-cra-18/src/Completed.tsx b/examples/rsp-cra-18/src/Completed.tsx
new file mode 100644
index 00000000000..9376aa0fd0e
--- /dev/null
+++ b/examples/rsp-cra-18/src/Completed.tsx
@@ -0,0 +1,38 @@
+import Delete from '@spectrum-icons/workflow/Delete';
+import {AlertDialog, DialogTrigger, ActionButton} from '@adobe/react-spectrum'
+import {Checkbox} from '@adobe/react-spectrum'
+import {Flex} from '@adobe/react-spectrum'
+import ToDo from './ToDo'
+
+function Completed(props: {completed: ToDo[]; onDelete: any}){
+
+ const elements = props.completed.map(item => (
+ {item.task}
+ ))
+
+ let alertCancel = () => alert('Cancel button pressed.');
+
+ return (
+
+ {elements}
+
+
+
+
+ Are you sure you want to delete the completed tasks?
+
+
+
+
+ )
+}
+
+export default Completed;
diff --git a/examples/rsp-cra-18/src/Journal.tsx b/examples/rsp-cra-18/src/Journal.tsx
new file mode 100644
index 00000000000..99938fc1fcc
--- /dev/null
+++ b/examples/rsp-cra-18/src/Journal.tsx
@@ -0,0 +1,9 @@
+import {Key} from 'react'
+
+interface Journal{
+ rate: Key,
+ description: string,
+ id: number
+}
+
+export default Journal
\ No newline at end of file
diff --git a/examples/rsp-cra-18/src/JournalEntries.tsx b/examples/rsp-cra-18/src/JournalEntries.tsx
new file mode 100644
index 00000000000..a7a7c3c0ea1
--- /dev/null
+++ b/examples/rsp-cra-18/src/JournalEntries.tsx
@@ -0,0 +1,24 @@
+import {Flex, Divider} from '@adobe/react-spectrum'
+import Journal from './Journal'
+
+function JournalEntries(props : {list : Journal[]}){
+
+ const element = props.list.map(item => (
+
+ Your day was: {item.rate}
+ {item.description}
+
+
+ ))
+
+ return (
+
+
+
+ )
+}
+
+export default JournalEntries;
\ No newline at end of file
diff --git a/examples/rsp-cra-18/src/JournalList.tsx b/examples/rsp-cra-18/src/JournalList.tsx
new file mode 100644
index 00000000000..0b609883a5f
--- /dev/null
+++ b/examples/rsp-cra-18/src/JournalList.tsx
@@ -0,0 +1,40 @@
+import {Key} from 'react'
+import AddCircle from '@spectrum-icons/workflow/AddCircle';
+import {Flex, Text, Button, Form, TextArea, Picker, Item, Divider} from '@adobe/react-spectrum'
+import JournalEntries from './JournalEntries'
+import Journal from './Journal'
+
+function JournalList(props: {rating: Key;
+ setRating: any;
+ entryList: Journal[];
+ options: {id: string, name: string}[];
+ description: string;
+ setDescription: any;
+ handleSubmit: any}){
+ return(
+ <>
+ 
+