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',
+      },
     ],
   },
   {

package.json

@@ -130,6 +130,7 @@
   "dependencies": {
     "date-fns": "2.0.0-alpha.27",
     "focus-trap": "^4.0.2",
+    "just-extend": "^4.0.2",
     "memoize-one": "^5.0.0",
     "popper.js": "^1.14.3",
     "react-dropzone": "^9.0.0",

src/datepicker/calendar-header.js

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import {ArrowLeft, ArrowRight} from '../icon/index.js';
 import {Select} from '../select/index.js';
+import {LocaleContext} from '../locale/index.js';
 import {
   StyledCalendarHeader,
   StyledPrevButton,
@@ -59,7 +60,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     this.props.onMonthChange({date: subMonths(this.props.date, 1)});
   };
 
-  renderPreviousMonthButton = () => {
+  renderPreviousMonthButton = ({locale}) => {
     const {date, overrides = {}} = this.props;
     const allPrevDaysDisabled = monthDisabledBefore(date, this.props);
 
@@ -81,7 +82,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     }
     return (
       <PrevButton
-        aria-label="Previous month"
+        aria-label={locale.datepicker.previousMonth}
         tabIndex={0}
         onClick={clickHandler}
         {...prevButtonProps}
@@ -98,7 +99,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     );
   };
 
-  renderNextMonthButton = () => {
+  renderNextMonthButton = ({locale}) => {
     const {date, overrides = {}} = this.props;
     const allNextDaysDisabled = monthDisabledAfter(date, this.props);
 
@@ -126,7 +127,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     }
     return (
       <NextButton
-        aria-label="Next month"
+        aria-label={locale.datepicker.nextMonth}
         tabIndex={0}
         onClick={clickHandler}
         {...nextButtonProps}
@@ -273,12 +274,16 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
       StyledCalendarHeader,
     );
     return (
-      <CalendarHeader {...calendarHeaderProps}>
-        {this.renderPreviousMonthButton()}
-        {this.renderMonthDropdown()}
-        {this.renderYearDropdown()}
-        {this.renderNextMonthButton()}
-      </CalendarHeader>
+      <LocaleContext.Consumer>
+        {locale => (
+          <CalendarHeader {...calendarHeaderProps}>
+            {this.renderPreviousMonthButton({locale})}
+            {this.renderMonthDropdown()}
+            {this.renderYearDropdown()}
+            {this.renderNextMonthButton({locale})}
+          </CalendarHeader>
+        )}
+      </LocaleContext.Consumer>
     );
   }
 }

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<
@@ -23,7 +24,6 @@ export default class Datepicker extends React.Component<
   },
 > {
   static defaultProps = {
-    'aria-label': 'Select a date',
     'aria-labelledby': null,
     'aria-describedby': 'datepicker--screenreader--message--input',
     disabled: false,
@@ -138,58 +138,64 @@ export default class Datepicker extends React.Component<
       overrides.Popover,
       Popover,
     );
+
     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={
+                  this.props['aria-label'] || locale.datepicker.ariaLabel
+                }
+                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%)',
+              }}
+            >
+              {locale.datepicker.screenReaderMessageInput}
+            </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,19 @@
+/*
+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',
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    screenReaderMessageInput:
+      'Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.',
+  },
+};
+
+export default en_US;

src/locale/index.js

@@ -0,0 +1,25 @@
+/*
+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 extend from 'just-extend';
+
+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={extend(en_US, locale)}>
+      {children}
+    </LocaleContext.Provider>
+  );
+};
+
+export default LocaleProvider;

src/locale/types.js

@@ -0,0 +1,18 @@
+/*
+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,
+  nextMonth: string,
+  prevMonth: string,
+  screenReaderMessageInput: string,
+|};
+
+export type LocaleT = {|
+  datepicker: DatepickerLocaleT,
+|};

yarn.lock

@@ -8997,6 +8997,11 @@ junk@^1.0.1:
   resolved "https://registry.yarnpkg.com/junk/-/junk-1.0.3.tgz#87be63488649cbdca6f53ab39bec9ccd2347f592"
   integrity sha1-h75jSIZJy9ym9Tqzm+yczSNH9ZI=
 
+just-extend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.0.2.tgz#f3f47f7dfca0f989c55410a7ebc8854b07108afc"
+  integrity sha512-FrLwOgm+iXrPV+5zDU6Jqu4gCRXbWEQg2O3SKONsWE4w7AXFRkryS53bpWdaL9cNol+AmR3AEYz6kn+o0fCPnw==
+
 kefir@^3.7.3:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/kefir/-/kefir-3.8.3.tgz#8e0ab10084ed8a01cbb5d4f7f18a0b859f7b9bd9"