feat(i18n): add i18n support

documentation-site/pages/getting-started/internationalization.mdx

@@ -0,0 +1,29 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Layout from '../../components/layout';
+
+export default Layout;
+
+# Internationalization
+
+Base UI supports English as the default language. Following the instructions below, you
+can use other languages too.
+
+```javascript
+import { LocaleProvider } from 'baseui';
+import {huHU} from '{YOUR_PROJECT}/hu.json';
+import App from '{YOUR_PROJECT}/app.js';
+
+return (
+  <LocaleProvider locale={huHU}>
+    <App />
+  </LocaleProvider>
+);
+```
+
+

documentation-site/routes.js

@@ -36,6 +36,10 @@ const routes = [
         text: 'Comparison with other component libraries',
         path: '/getting-started/comparison',
       },
+      {
+        text: 'Internationalization',
+        path: '/getting-started/internationalization',
+      },
     ],
   },
   {

src/datepicker/datepicker.js

@@ -11,6 +11,7 @@ import {Popover, PLACEMENT} from '../popover/index.js';
 import Calendar from './calendar.js';
 import {formatDate} from './utils/index.js';
 import {getOverrides} from '../helpers/overrides.js';
+import {LocaleContext} from '../locale/index.js';
 import type {DatepickerPropsT} from './types.js';
 
 export default class Datepicker extends React.Component<
@@ -138,58 +139,72 @@ export default class Datepicker extends React.Component<
       overrides.Popover,
       Popover,
     );
+
+    if (__DEV__ && this.props['aria-label']) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Providing i18n data through properties will be removed in the next major version. Please use the LocalProvider.`,
+      );
+    }
+
     return (
-      <React.Fragment>
-        <PopoverComponent
-          placement={PLACEMENT.bottom}
-          isOpen={this.state.isOpen}
-          onClickOutside={this.close}
-          onEsc={this.handleEsc}
-          content={
-            <Calendar
-              autoFocusCalendar={this.state.calendarFocused}
-              trapTabbing={true}
-              value={this.props.value}
-              {...this.props}
-              onChange={this.onChange}
-            />
-          }
-          {...popoverProps}
-        >
-          <InputComponent
-            aria-disabled={this.props.disabled}
-            aria-label={this.props['aria-label']}
-            aria-labelledby={this.props['aria-labelledby']}
-            aria-describedby={this.props['aria-describedby']}
-            aria-required={this.props.required || null}
-            disabled={this.props.disabled}
-            value={this.formatDisplayValue(this.props.value)}
-            onFocus={this.open}
-            onBlur={this.handleInputBlur}
-            onKeyDown={this.handleKeyDown}
-            placeholder={this.props.placeholder}
-            required={this.props.required}
-            {...inputProps}
-          />
-        </PopoverComponent>
-        <p
-          id="datepicker--screenreader--message--input"
-          style={{
-            position: 'absolute',
-            width: '1px',
-            height: '1px',
-            margin: '-1px',
-            border: '0px',
-            padding: '0px',
-            overflow: 'hidden',
-            clip: 'react(0px, 0px, 0px, 0px)',
-            clipPath: 'inset(100%)',
-          }}
-        >
-          Press the down arrow key to interact with the calendar and select a
-          date. Press the escape button to close the calendar.
-        </p>
-      </React.Fragment>
+      <LocaleContext.Consumer>
+        {locale => (
+          <React.Fragment>
+            <PopoverComponent
+              placement={PLACEMENT.bottom}
+              isOpen={this.state.isOpen}
+              onClickOutside={this.close}
+              onEsc={this.handleEsc}
+              content={
+                <Calendar
+                  autoFocusCalendar={this.state.calendarFocused}
+                  trapTabbing={true}
+                  value={this.props.value}
+                  {...this.props}
+                  onChange={this.onChange}
+                />
+              }
+              {...popoverProps}
+            >
+              <InputComponent
+                aria-disabled={this.props.disabled}
+                aria-label={
+                  locale.datepicker.ariaLabel || this.props['aria-label']
+                }
+                aria-labelledby={this.props['aria-labelledby']}
+                aria-describedby={this.props['aria-describedby']}
+                aria-required={this.props.required || null}
+                disabled={this.props.disabled}
+                value={this.formatDisplayValue(this.props.value)}
+                onFocus={this.open}
+                onBlur={this.handleInputBlur}
+                onKeyDown={this.handleKeyDown}
+                placeholder={this.props.placeholder}
+                required={this.props.required}
+                {...inputProps}
+              />
+            </PopoverComponent>
+            <p
+              id="datepicker--screenreader--message--input"
+              style={{
+                position: 'absolute',
+                width: '1px',
+                height: '1px',
+                margin: '-1px',
+                border: '0px',
+                padding: '0px',
+                overflow: 'hidden',
+                clip: 'react(0px, 0px, 0px, 0px)',
+                clipPath: 'inset(100%)',
+              }}
+            >
+              Press the down arrow key to interact with the calendar and select
+              a date. Press the escape button to close the calendar.
+            </p>
+          </React.Fragment>
+        )}
+      </LocaleContext.Consumer>
     );
   }
 }

src/index.js

@@ -6,6 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 export {styled, ThemeProvider} from './styles/index.js';
+import LocaleProvider from './locale/index.js';
+export {LocaleProvider};
 export {
   createTheme,
   lightThemePrimitives,

src/locale/en_US.js

@@ -0,0 +1,15 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+const en_US = {
+  datepicker: {
+    ariaLabel: 'Select a date',
+  },
+};
+
+export default en_US;

src/locale/index.js

@@ -0,0 +1,22 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import * as React from 'react';
+
+import type {LocaleT} from './types.js';
+import en_US from './en_US.js';
+
+export const LocaleContext: React.Context<LocaleT> = React.createContext(en_US);
+
+const LocaleProvider = (props: {locale: LocaleT, children: ?React.Node}) => {
+  const {locale, children} = props;
+  return (
+    <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>
+  );
+};
+
+export default LocaleProvider;

src/locale/types.js

@@ -0,0 +1,15 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+export type DatepickerLocaleT = {
+  ariaLabel: string,
+};
+
+export type LocaleT = {|
+  datepicker: DatepickerLocaleT,
+|};