Create @internationalized scope (#1563)

* Move NumberParser and NumberFormatter into @spectrum-i18n scope

* Move message formatter into @spectrum-i18n/message-formatter

* Move channel name localizations and value formatting to @react-stately/color

Supports different formatting depending on the channel, and adds default aria-label for color slider and color wheel based on channel name

* Polyfill degree unit formatting for Safari

https://bugs.webkit.org/show_bug.cgi?id=218139

* lint

* Rename @spectrum-i18n/message-formatter to just @spectrum-i18n/message

* Rename scope to @internationalized

* Fix lint

Author: devongovett

Makefile

@@ -83,7 +83,7 @@ publish-nightly: build
 	yarn publish:nightly
 
 build:
-	parcel build packages/@react-{spectrum,aria,stately}/*/ --no-minify
+	parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/*/ --no-minify
 
 website:
 	yarn build:docs --public-url /reactspectrum/$$(git rev-parse HEAD)/docs --dist-dir dist/$$(git rev-parse HEAD)/docs

packages/@internationalized/message/README.md

@@ -0,0 +1,3 @@
+# @internationalized/message
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

packages/@react-stately/i18n/index.ts renamed to packages/@internationalized/message/index.ts

@@ -0,0 +1,27 @@
+{
+  "name": "@internationalized/message",
+  "version": "3.0.0-alpha.1",
+  "private": true,
+  "description": "Internationalized message formatting and locale negotiation",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "intl-messageformat": "^2.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@internationalized/message/package.json

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export type LocalizedStrings = {
+  [lang: string]: {
+    [key: string]: string
+  }
+};
+
+/**
+ * Stores a mapping of localized strings. Can be used to find the
+ * closest available string for a given locale.
+ */
+export class MessageDictionary {
+  private messages: LocalizedStrings;
+  private defaultLocale: string;
+
+  constructor(messages: LocalizedStrings, defaultLocale: string = 'en-US') {
+    // Clone messages so we don't modify the original object.
+    this.messages = {...messages};
+    this.defaultLocale = defaultLocale;
+  }
+
+  getStringForLocale(key: string, locale: string) {
+    let strings = this.messages[locale];
+    if (!strings) {
+      strings = getStringsForLocale(locale, this.messages, this.defaultLocale);
+      this.messages[locale] = strings;
+    }
+
+    let string = strings[key];
+    if (!string) {
+      throw new Error(`Could not find intl message ${key} in ${locale} locale`);
+    }
+
+    return string;
+  }
+}
+
+function getStringsForLocale(locale: string, strings: LocalizedStrings, defaultLocale = 'en-US') {
+  // If there is an exact match, use it.
+  if (strings[locale]) {
+    return strings[locale];
+  }
+
+  // Attempt to find the closest match by language.
+  // For example, if the locale is fr-CA (French Canadian), but there is only
+  // an fr-FR (France) set of strings, use that.
+  // This could be replaced with Intl.LocaleMatcher once it is supported.
+  // https://github.com/tc39/proposal-intl-localematcher
+  let language = getLanguage(locale);
+  for (let key in strings) {
+    if (key.startsWith(language + '-')) {
+      return strings[key];
+    }
+  }
+
+  // Nothing close, use english.
+  return strings[defaultLocale];
+}
+
+function getLanguage(locale: string) {
+  // @ts-ignore
+  if (Intl.Locale) {
+    // @ts-ignore
+    return new Intl.Locale(locale).language;
+  }
+
+  return locale.split('-')[0];
+}

packages/@internationalized/message/src/MessageDictionary.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 IntlMessageFormat from 'intl-messageformat';
+import {MessageDictionary} from './MessageDictionary';
+
+/**
+ * Formats ICU Message strings to create localized strings from a MessageDictionary.
+ */
+export class MessageFormatter {
+  private locale: string;
+  private messages: MessageDictionary;
+  private cache: {[key: string]: IntlMessageFormat};
+
+  constructor(locale: string, messages: MessageDictionary) {
+    this.locale = locale;
+    this.messages = messages;
+    this.cache = {};
+  }
+
+  format(key: string, variables: object) {
+    let message = this.cache[key];
+    if (!message) {
+      let msg = this.messages.getStringForLocale(key, this.locale);
+      if (!msg) {
+        throw new Error(`Could not find intl message ${key} in ${this.locale} locale`);
+      }
+
+      message = new IntlMessageFormat(msg, this.locale);
+      this.cache[key] = message;
+    }
+
+    return message.format(variables);
+  }
+}

packages/@internationalized/message/src/MessageFormatter.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './MessageDictionary';
+export * from './MessageFormatter';

packages/@internationalized/message/src/index.ts

@@ -1,3 +1,3 @@
-# @react-stately/i18n
+# @internationalized/number
 
 This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

packages/@react-stately/i18n/README.md renamed to packages/@internationalized/number/README.md

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './src';

packages/@internationalized/number/index.ts

@@ -1,7 +1,7 @@
 {
-  "name": "@react-stately/i18n",
+  "name": "@internationalized/number",
   "version": "3.0.0-alpha.1",
-  "description": "Spectrum UI components in React",
+  "description": "Internationalized number formatting and parsing utilities",
   "license": "Apache-2.0",
   "private": true,
   "main": "dist/main.js",
@@ -20,9 +20,6 @@
   "dependencies": {
     "@babel/runtime": "^7.6.2"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
-  },
   "publishConfig": {
     "access": "public"
   }