.circleci/comment.js

@@ -57,7 +57,8 @@ async function run() {
       [Publish stats](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/publish.json)
       [Size diff since last release](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/size-diff.txt)
       [Docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/docs/index.html)
-      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)`
+      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
+      [RAC Starter Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/starter-storybook/index.html)`
         });
       }
     } catch (error) {

.eslintignore

@@ -9,4 +9,6 @@ packages/react-aria/dist
 packages/react-aria-components/dist
 packages/react-stately/dist
 packages/dev/storybook-builder-parcel/preview.js
+packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts
 examples/**
+starters/**

.eslintrc.js

@@ -67,7 +67,23 @@ module.exports = {
       'jsdoc/require-description': OFF
     }
   }, {
-    files: ['packages/@react-aria/interactions/**/*.ts', 'packages/@react-aria/interactions/**/*.tsx'],
+    files: ['packages/@react-aria/focus/src/**/*.ts', 'packages/@react-aria/focus/src/**/*.tsx'],
+    rules: {
+      'no-restricted-globals': [
+        ERROR,
+        {
+          'name': 'window',
+          'message': 'Use getOwnerWindow from @react-aria/utils instead.'
+        },
+        {
+          'name': 'document',
+          'message': 'Use getOwnerDocument from @react-aria/utils instead.'
+        }
+      ]
+    }
+  },
+  {
+    files: ['packages/@react-aria/interactions/src/**/*.ts', 'packages/@react-aria/interactions/src/**/*.tsx'],
     rules: {
       'no-restricted-globals': [
         WARN,

.parcelrc

@@ -9,7 +9,7 @@
     "bundle-text:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"],
     "*.{md,mdx}": ["parcel-transformer-mdx-docs"],
     "*.svg": ["@parcel/transformer-svg-react"],
-    "*.global.css": ["parcel-transformer-css-global", "..."],
+    "packages/@react-aria/example-theme/**/*.css": ["@parcel/transformer-css"],
     "*.css": ["...", "parcel-transformer-css-env"],
     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
       "@parcel/transformer-js",

.parcelrc-build

@@ -0,0 +1,17 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-build", "..."],
+  "transformers": {
+    "packages/**/intl/*.json": ["parcel-transformer-intl"],
+    "bundle-text:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"],
+    "*.svg": ["@parcel/transformer-svg-react"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  },
+  "namers": ["parcel-namer-intl", "..."],
+  "optimizers": {
+    "{main,module}.js": ["...", "parcel-optimizer-react-client"]
+  }
+}

Makefile

@@ -92,10 +92,10 @@ publish-nightly: build
 	yarn publish:nightly
 
 build:
-	parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/react-aria-components --no-optimize
+	parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/react-aria-components --no-optimize --config .parcelrc-build
 	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; \
+		do node scripts/buildEsm.js $$pkg; \
 	done
 	sed -i.bak s/\.js/\.mjs/ packages/@react-aria/i18n/dist/import.mjs
 	sed -i.bak 's/@react-aria\/i18n/.\/real-main.js/' packages/@react-aria/i18n/dist/useMessageFormatter.js
@@ -105,14 +105,22 @@ build:
 	rm packages/@react-aria/i18n/dist/useMessageFormatter.js.bak
 	rm packages/@react-aria/i18n/dist/useMessageFormatter.module.js.bak
 	rm packages/@react-aria/i18n/dist/useMessageFormatter.module.mjs.bak
+	node scripts/buildI18n.js
 
 website:
 	yarn build:docs --public-url /reactspectrum/$$(git rev-parse HEAD)/docs --dist-dir dist/$$(git rev-parse HEAD)/docs
 
 website-production:
-	node scripts/buildWebsite.js
+	node scripts/buildWebsite.js $$PUBLIC_URL
 	cp packages/dev/docs/pages/robots.txt dist/production/docs/robots.txt
+	$(MAKE) starter
+	cd starters/docs && zip -r react-aria-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
+	mv starters/docs/react-aria-starter.zip dist/production/docs/react-aria-starter.$$(git rev-parse --short HEAD).zip
 
 check-examples:
 	node scripts/extractExamples.mjs
 	yarn tsc --project dist/docs-examples/tsconfig.json
+
+starter:
+	node scripts/extractStarter.mjs
+	cd starters/docs && yarn && yarn tsc

README.md

@@ -10,7 +10,7 @@ A React implementation of Spectrum, Adobe’s design system. Spectrum provides a
 
 ### React Aria
 
-A library of React Hooks that provides accessible UI primitives for your design system.
+A library of unstyled React components and hooks that helps you build accessible, high quality UI components for your application or design system.
 
 [Learn more about React Aria](https://react-spectrum.adobe.com/react-aria/index.html)
 
@@ -38,7 +38,7 @@ A collection of framework-agnostic internationalization libraries for the web.
 React Spectrum includes several libraries, which you can choose depending on your usecase.
 
 * [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/getting-started.html) is an implementation of Adobe's design system. If you’re integrating with Adobe software or would like a complete component library to use in your project, look no further!
-* [React Aria](https://react-spectrum.adobe.com/react-aria/getting-started.html) is a collection of React Hooks that provides accessible UI primitives for use in your own design system. If you're building a component library for the web from scratch with your own styling, start here.
+* [React Aria](https://react-spectrum.adobe.com/react-aria/getting-started.html) is a collection of unstyled React components and hooks that helps you build accessible, high quality UI components for your own application or design system. If you're building a component library for the web from scratch with your own styling, start here.
 * [React Stately](https://react-spectrum.adobe.com/react-stately/getting-started.html) is a library of state management hooks for use in your component library. If you're using React Aria, you'll likely also use React Stately, but it can also be used independently (e.g. on other platforms like React Native).
 
 [Read more about our architecture](https://react-spectrum.adobe.com/architecture.html).

examples/next-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/next-app/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/next-app/app/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from 'next'
+import {LocalizedStringProvider, createLocalizedStringDictionary} from '@adobe/react-spectrum/i18n';
+
+const dictionary = createLocalizedStringDictionary(['@react-spectrum/datepicker']);
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <LocalizedStringProvider locale="en" dictionary={dictionary} />
+        {children}
+      </body>
+    </html>
+  )
+}

examples/next-app/app/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import {Provider, defaultTheme, DatePicker} from '@adobe/react-spectrum';
+
+export default function Home() {
+  return (
+    <Provider theme={defaultTheme} locale="en">
+      <DatePicker label="Date" />
+    </Provider>
+  )
+}

examples/next-app/next.config.js

@@ -0,0 +1,69 @@
+const localesPlugin = require('@react-aria/optimize-locales-plugin');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack(config, {isServer}) {
+    if (!isServer) {
+      // Don't include any locale strings in the client JS bundle.
+      config.plugins.push(localesPlugin.webpack({locales: []}));
+    }
+    return config;
+  },
+  transpilePackages: [
+    '@adobe/react-spectrum',
+    '@react-spectrum/actionbar',
+    '@react-spectrum/actiongroup',
+    '@react-spectrum/avatar',
+    '@react-spectrum/badge',
+    '@react-spectrum/breadcrumbs',
+    '@react-spectrum/button',
+    '@react-spectrum/buttongroup',
+    '@react-spectrum/calendar',
+    '@react-spectrum/checkbox',
+    '@react-spectrum/combobox',
+    '@react-spectrum/contextualhelp',
+    '@react-spectrum/datepicker',
+    '@react-spectrum/dialog',
+    '@react-spectrum/divider',
+    '@react-spectrum/dnd',
+    '@react-spectrum/form',
+    '@react-spectrum/icon',
+    '@react-spectrum/illustratedmessage',
+    '@react-spectrum/inlinealert',
+    '@react-spectrum/image',
+    '@react-spectrum/label',
+    '@react-spectrum/labeledvalue',
+    '@react-spectrum/layout',
+    '@react-spectrum/link',
+    '@react-spectrum/list',
+    '@react-spectrum/listbox',
+    '@react-spectrum/menu',
+    '@react-spectrum/meter',
+    '@react-spectrum/numberfield',
+    '@react-spectrum/overlays',
+    '@react-spectrum/picker',
+    '@react-spectrum/progress',
+    '@react-spectrum/provider',
+    '@react-spectrum/radio',
+    '@react-spectrum/slider',
+    '@react-spectrum/searchfield',
+    '@react-spectrum/statuslight',
+    '@react-spectrum/switch',
+    '@react-spectrum/table',
+    '@react-spectrum/tabs',
+    '@react-spectrum/tag',
+    '@react-spectrum/text',
+    '@react-spectrum/textfield',
+    '@react-spectrum/theme-dark',
+    '@react-spectrum/theme-default',
+    '@react-spectrum/theme-light',
+    '@react-spectrum/tooltip',
+    '@react-spectrum/view',
+    '@react-spectrum/well',
+    '@spectrum-icons/illustrations',
+    '@spectrum-icons/ui',
+    '@spectrum-icons/workflow'
+  ]
+}
+
+module.exports = nextConfig

examples/next-app/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.0.3"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18"
+  },
+  "workspaces": [
+    "../../packages/react-aria-components",
+    "../../packages/react-aria",
+    "../../packages/react-stately",
+    "../../packages/*/*"
+  ],
+  "resolutions": {
+    "react": "link:../../node_modules/react",
+    "react-dom": "link:../../node_modules/react-dom"
+  }
+}

examples/next-app/postcss.config.json

@@ -0,0 +1,3 @@
+{
+  "plugins": []
+}

examples/next-app/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

examples/rac-tailwind/.parcelrc

@@ -1,7 +1,7 @@
 {
   "extends": "@parcel/config-default",
-  "resolvers": ["@parcel/resolver-glob", "..."],
+  "resolvers": ["@react-aria/parcel-resolver-optimize-locales", "@parcel/resolver-glob", "..."],
   "transformers": {
-    "../../packages/*/*/intl/*.json": ["parcel-transformer-intl"]
+    "**/intl/*.json": ["parcel-transformer-intl"]
   }
 }

examples/rac-tailwind/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.16",
+    "@react-aria/parcel-resolver-optimize-locales": "^1.0.0",
     "framer-motion": "^10.12.16",
     "parcel": "^2.10.2",
     "postcss": "^8.4.21",
@@ -20,5 +21,6 @@
   },
   "devDependencies": {
     "process": "^0.11.10"
-  }
+  },
+  "locales": ["en"]
 }