S2 Translations (adobe#6878)

.storybook-s2/constants.js

@@ -0,0 +1,44 @@
+// Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
+export let locales = [
+  {label: 'Auto', value: ''},
+  // Tier 1
+  {label: 'French (France)', value: 'fr-FR'},
+  {label: 'French (Canada)', value: 'fr-CA'},
+  {label: 'German (Germany)', value: 'de-DE'},
+  {label: 'English (Great Britain)', value: 'en-GB'},
+  {label: 'English (United States)', value: 'en-US'},
+  {label: 'Japanese (Japan)', value: 'ja-JP'},
+  // // Tier 2
+  {label: 'Danish (Denmark)', value: 'da-DK'},
+  {label: 'Dutch (Netherlands)', value: 'nl-NL'},
+  {label: 'Finnish (Finland)', value: 'fi-FI'},
+  {label: 'Italian (Italy)', value: 'it-IT'},
+  {label: 'Norwegian (Norway)', value: 'nb-NO'},
+  {label: 'Spanish (Spain)', value: 'es-ES'},
+  {label: 'Swedish (Sweden)', value: 'sv-SE'},
+  {label: 'Portuguese (Brazil)', value: 'pt-BR'},
+  // // Tier 3
+  {label: 'Chinese (Simplified)', value: 'zh-CN'},
+  {label: 'Chinese (Traditional)', value: 'zh-TW'},
+  {label: 'Korean (Korea)', value: 'ko-KR'},
+  // // Tier 4
+  {label: 'Bulgarian (Bulgaria)', value: 'bg-BG'},
+  {label: 'Croatian (Croatia)', value: 'hr-HR'},
+  {label: 'Czech (Czech Republic)', value: 'cs-CZ'},
+  {label: 'Estonian (Estonia)', value: 'et-EE'},
+  {label: 'Hungarian (Hungary)', value: 'hu-HU'},
+  {label: 'Latvian (Latvia)', value: 'lv-LV'},
+  {label: 'Lithuanian (Lithuania)', value: 'lt-LT'},
+  {label: 'Polish (Poland)', value: 'pl-PL'},
+  {label: 'Romanian (Romania)', value: 'ro-RO'},
+  {label: 'Russian (Russia)', value: 'ru-RU'},
+  {label: 'Serbian (Serbia)', value: 'sr-SP'},
+  {label: 'Slovakian (Slovakia)', value: 'sk-SK'},
+  {label: 'Slovenian (Slovenia)', value: 'sl-SI'},
+  {label: 'Turkish (Turkey)', value: 'tr-TR'},
+  {label: 'Ukrainian (Ukraine)', value: 'uk-UA'},
+  // // Tier 5
+  {label: 'Arabic (United Arab Emirates)', value: 'ar-AE'}, // ar-SA??
+  {label: 'Greek (Greece)', value: 'el-GR'},
+  {label: 'Hebrew (Israel)', value: 'he-IL'}
+];

.storybook-s2/custom-addons/provider/index.js

@@ -0,0 +1,50 @@
+import React, {useEffect, useState} from 'react';
+import {addons} from '@storybook/preview-api';
+import {makeDecorator} from '@storybook/preview-api';
+import {getQueryParams} from '@storybook/preview-api';
+import {Provider} from '@react-spectrum/s2';
+
+document.body.style.margin = '0';
+
+const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
+  if (k.includes('providerSwitcher-')) {
+    return { ...acc, [k.replace('providerSwitcher-', '')]: v };
+  }
+  return acc;
+}, {});
+
+function ProviderUpdater(props) {
+  let [localeValue, setLocale] = useState(providerValuesFromUrl.locale || undefined);
+
+  useEffect(() => {
+    let channel = addons.getChannel();
+    let providerUpdate = (event) => {
+      setLocale(event.locale);
+    };
+
+    channel.on('provider/updated', providerUpdate);
+    channel.emit('rsp/ready-for-update');
+    return () => {
+      channel.removeListener('provider/updated', providerUpdate);
+    };
+  }, []);
+
+  return (
+    <Provider locale={localeValue}>
+      {props.children}
+    </Provider>
+  );
+}
+
+export const withProviderSwitcher = makeDecorator({
+  name: 'withProviderSwitcher',
+  parameterName: 'providerSwitcher',
+  wrapper: (getStory, context, {options, parameters}) => {
+    options = {...options, ...parameters};
+    return (
+      <ProviderUpdater options={options} context={context}>
+        {getStory(context)}
+      </ProviderUpdater>
+    );
+  }
+});

.storybook-s2/custom-addons/provider/register.js

@@ -0,0 +1,63 @@
+
+import {addons, types} from '@storybook/manager-api';
+import {getQueryParams} from '@storybook/preview-api';
+import {locales} from '../../constants';
+import React, {useEffect, useState} from 'react';
+
+const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
+  if (k.includes('providerSwitcher-')) {
+    return { ...acc, [k.replace('providerSwitcher-', '')]: v };
+  }
+  return acc;
+}, {});
+
+function ProviderFieldSetter({api}) {
+  let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined});
+  let channel = addons.getChannel();
+  let onLocaleChange = (e) => {
+    let newValue = e.target.value || undefined;
+    setValues((old) => {
+      let next = {...old, locale: newValue};
+      channel.emit('provider/updated', next);
+      return next;
+    });
+  };
+  useEffect(() => {
+    let storySwapped = () => {
+      channel.emit('provider/updated', values);
+    };
+    channel.on('rsp/ready-for-update', storySwapped);
+    return () => {
+      channel.removeListener('rsp/ready-for-update', storySwapped);
+    };
+  });
+
+  useEffect(() => {
+    api.setQueryParams({
+      'providerSwitcher-locale': values.locale || ''
+    });
+  });
+
+  return (
+    <div style={{display: 'flex', alignItems: 'center', fontSize: '12px'}}>
+      <div style={{marginRight: '10px'}}>
+        <label htmlFor="locale">Locale: </label>
+        <select id="locale" name="locale" onChange={onLocaleChange} value={values.locale}>
+          {locales.map(locale => <option key={locale.label} value={locale.value}>{locale.label}</option>)}
+        </select>
+      </div>
+    </div>
+  )
+}
+
+addons.register('ProviderSwitcher', (api) => {
+  addons.add('ProviderSwitcher', {
+    title: 'viewport',
+    type: types.TOOL,
+    match: ({ viewMode }) => {
+      console.log('viewMode', viewMode);
+      return viewMode === 'story' || viewMode === 'docs'
+    },
+    render: () => <ProviderFieldSetter api={api} />,
+  });
+});

.storybook-s2/main.ts

@@ -23,6 +23,7 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    './custom-addons/provider/register',
     // "@storybook/addon-styling-webpack",
     "storybook-dark-mode"
   ],

.storybook-s2/preview.tsx

@@ -5,6 +5,7 @@ import { store } from 'storybook-dark-mode/dist/esm/Tool';
 import { addons } from '@storybook/preview-api';
 import { DocsContainer } from '@storybook/addon-docs';
 import React, { useEffect, useState } from 'react';
+import {withProviderSwitcher} from './custom-addons/provider';
 import './global.css';
 
 const channel = addons.getChannel();
@@ -103,4 +104,10 @@ export const parameters = {
   layout: 'fullscreen',
 };
 
+
+
+export const decorators = [
+  withProviderSwitcher
+];
+
 export default preview;

packages/@react-spectrum/s2/intl/ar-AE.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.help": "مساعدة",
+  "contextualhelp.info": "معلومات",
+  "dialog.alert": "تنبيه",
+  "dialog.dismiss": "تجاهل",
+  "dropzone.replaceMessage": "للاستبدال، قم بإفلات الملف",
+  "inlinealert.informative": "معلومات",
+  "inlinealert.negative": "خطأ",
+  "inlinealert.notice": "تحذير",
+  "inlinealert.positive": "تم بنجاح",
+  "label.(optional)": "(اختياري)",
+  "label.(required)": "(مطلوب)",
+  "menu.moreActions": "المزيد من الإجراءات",
+  "picker.placeholder": "حدد خيارًا...",
+  "slider.maximum": "أقصى",
+  "slider.minimum": "أدنى",
+  "tag.noTags": "بدون"
+}

packages/@react-spectrum/s2/intl/bg-BG.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.help": "Помощ",
+  "contextualhelp.info": "Информация",
+  "dialog.alert": "Сигнал",
+  "dialog.dismiss": "Отхвърляне",
+  "dropzone.replaceMessage": "Пуснете файл за замяна",
+  "inlinealert.informative": "Информация",
+  "inlinealert.negative": "Грешка",
+  "inlinealert.notice": "Предупреждение",
+  "inlinealert.positive": "Успешно",
+  "label.(optional)": "(незадължително)",
+  "label.(required)": "(задължително)",
+  "menu.moreActions": "Повече действия",
+  "picker.placeholder": "Изберете опция",
+  "slider.maximum": "Максимум",
+  "slider.minimum": "Минимум",
+  "tag.noTags": "Нито един"
+}

packages/@react-spectrum/s2/intl/cs-CZ.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.help": "Nápověda",
+  "contextualhelp.info": "Informace",
+  "dialog.alert": "Výstraha",
+  "dialog.dismiss": "Odstranit",
+  "dropzone.replaceMessage": "Přetáhněte soubor k nahrazení",
+  "inlinealert.informative": "Informace",
+  "inlinealert.negative": "Chyba",
+  "inlinealert.notice": "Varování",
+  "inlinealert.positive": "Úspěch",
+  "label.(optional)": "(volitelně)",
+  "label.(required)": "(požadováno)",
+  "menu.moreActions": "Další akce",
+  "picker.placeholder": "Vyberte vhodnou možnost...",
+  "slider.maximum": "Maximum",
+  "slider.minimum": "Minimum",
+  "tag.noTags": "Žádný"
+}

packages/@react-spectrum/s2/intl/da-DK.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.help": "Hjælp",
+  "contextualhelp.info": "Oplysninger",
+  "dialog.alert": "Advarsel",
+  "dialog.dismiss": "Luk",
+  "dropzone.replaceMessage": "Drop fil for at erstatte",
+  "inlinealert.informative": "Oplysninger",
+  "inlinealert.negative": "Fejl",
+  "inlinealert.notice": "Advarsel",
+  "inlinealert.positive": "Fuldført",
+  "label.(optional)": "(valgfrit)",
+  "label.(required)": "(obligatorisk)",
+  "menu.moreActions": "Flere handlinger",
+  "picker.placeholder": "Vælg en mulighed ...",
+  "slider.maximum": "Maksimum",
+  "slider.minimum": "Minimum",
+  "tag.noTags": "Ingen"
+}

packages/@react-spectrum/s2/intl/de-DE.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.help": "Hilfe",
+  "contextualhelp.info": "Informationen",
+  "dialog.alert": "Warnhinweis",
+  "dialog.dismiss": "Schließen",
+  "dropzone.replaceMessage": "Datei zum Ersetzen ablegen",
+  "inlinealert.informative": "Informationen",
+  "inlinealert.negative": "Fehler",
+  "inlinealert.notice": "Warnung",
+  "inlinealert.positive": "Erfolg",
+  "label.(optional)": "(optional)",
+  "label.(required)": "(erforderlich)",
+  "menu.moreActions": "Mehr Aktionen",
+  "picker.placeholder": "Option auswählen...",
+  "slider.maximum": "Maximum",
+  "slider.minimum": "Minimum",
+  "tag.noTags": "Keine"
+}

packages/@react-spectrum/s2/intl/el-GR.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.help": "Βοήθεια",
+  "contextualhelp.info": "Πληροφορίες",
+  "dialog.alert": "Ειδοποίηση",
+  "dialog.dismiss": "Απόρριψη",
+  "dropzone.replaceMessage": "Απόθεση αρχείου για αντικατάσταση",
+  "inlinealert.informative": "Πληροφορίες",
+  "inlinealert.negative": "Σφάλμα",
+  "inlinealert.notice": "Προειδοποίηση",
+  "inlinealert.positive": "Επιτυχία",
+  "label.(optional)": "(προαιρετικό)",
+  "label.(required)": "(απαιτείται)",
+  "menu.moreActions": "Περισσότερες ενέργειες",
+  "picker.placeholder": "Επιλέξτε…",
+  "slider.maximum": "Μέγιστο",
+  "slider.minimum": "Ελάχιστο",
+  "tag.noTags": "Κανένα"
+}

packages/@react-spectrum/s2/intl/en-US.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.info": "Information",
+  "contextualhelp.help": "Help",
+  "dialog.dismiss": "Dismiss",
+  "dialog.alert": "Alert",
+  "dropzone.replaceMessage": "Drop file to replace",
+  "inlinealert.negative": "Error",
+  "inlinealert.notice": "Warning",
+  "inlinealert.informative": "Information",
+  "inlinealert.positive": "Success",
+  "label.(required)": "(required)",
+  "label.(optional)": "(optional)",
+  "menu.moreActions": "More actions",
+  "picker.placeholder": "Select…",
+  "slider.minimum": "Minimum",
+  "slider.maximum": "Maximum",
+  "tag.noTags": "None"
+}

packages/@react-spectrum/s2/intl/es-ES.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.help": "Ayuda",
+  "contextualhelp.info": "Información",
+  "dialog.alert": "Alerta",
+  "dialog.dismiss": "Descartar",
+  "dropzone.replaceMessage": "Suelte el archivo para reemplazar",
+  "inlinealert.informative": "Información",
+  "inlinealert.negative": "Error",
+  "inlinealert.notice": "Advertencia",
+  "inlinealert.positive": "Éxito",
+  "label.(optional)": "(opcional)",
+  "label.(required)": "(obligatorio)",
+  "menu.moreActions": "Más acciones",
+  "picker.placeholder": "Seleccione una opción…",
+  "slider.maximum": "Máximo",
+  "slider.minimum": "Mínimo",
+  "tag.noTags": "Ninguno"
+}

packages/@react-spectrum/s2/intl/et-EE.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.help": "Spikker",
+  "contextualhelp.info": "Teave",
+  "dialog.alert": "Teade",
+  "dialog.dismiss": "Lõpeta",
+  "dropzone.replaceMessage": "Kukuta fail asendamiseks",
+  "inlinealert.informative": "Teave",
+  "inlinealert.negative": "Tõrge",
+  "inlinealert.notice": "Hoiatus",
+  "inlinealert.positive": "Valmis",
+  "label.(optional)": "(valikuline)",
+  "label.(required)": "(nõutav)",
+  "menu.moreActions": "Veel toiminguid",
+  "picker.placeholder": "Valige valikuline...",
+  "slider.maximum": "Maksimaalne",
+  "slider.minimum": "Minimaalne",
+  "tag.noTags": "Puudub"
+}

packages/@react-spectrum/s2/intl/fi-FI.json

@@ -0,0 +1,18 @@
+{
+  "contextualhelp.help": "Ohje",
+  "contextualhelp.info": "Tiedot",
+  "dialog.alert": "Hälytys",
+  "dialog.dismiss": "Hylkää",
+  "dropzone.replaceMessage": "Pudota korvaava tiedosto",
+  "inlinealert.informative": "Tiedot",
+  "inlinealert.negative": "Virhe",
+  "inlinealert.notice": "Varoitus",
+  "inlinealert.positive": "Onnistui",
+  "label.(optional)": "(valinnainen)",
+  "label.(required)": "(pakollinen)",
+  "menu.moreActions": "Lisää toimintoja",
+  "picker.placeholder": "Valitse vaihtoehto...",
+  "slider.maximum": "Maksimi",
+  "slider.minimum": "Minimi",
+  "tag.noTags": "Ei mitään"
+}