I18n debug

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 - Created `EuiDualRange` using components from modularized, refactored `EuiRange`. New util service `isWithinRange` is the first in the number category. ([#1485](https://github.com/elastic/eui/pull/1485))
 - Upgraded `lodash` to v4, taking advantage of modular imports. ([#1534](https://github.com/elastic/eui/pull/1534))
+- Added pseudo-localization mode to docs ([#1541](https://github.com/elastic/eui/pull/1541))
+- New docs page listing localization tokens ([#1541](https://github.com/elastic/eui/pull/1541))
 
 **Bug fixes**
 

package.json

@@ -13,7 +13,8 @@
     "test-docker": "docker pull $npm_package_docker_image && docker run --rm -i -e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test --user=$(id -u):$(id -g) -e HOME=/tmp -v $(pwd):/app -w /app $npm_package_docker_image bash -c 'npm config set spin false && /opt/yarn*/bin/yarn && npm run test && npm run build'",
     "sync-docs": "node ./scripts/docs-sync.js",
     "build-docs": "webpack --config=src-docs/webpack.config.js",
-    "build": "node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js",
+    "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js",
+    "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
     "lint": "yarn lint-es && yarn lint-ts && yarn lint-sass && yarn lint-framer",
     "lint-fix": "yarn lint-es-fix && yarn lint-ts-fix",
     "lint-es": "eslint --cache --ignore-pattern \"**/*.snap.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",

scripts/babel/fetch-i18n-strings.js

@@ -0,0 +1,121 @@
+const babel = require('@babel/core');
+const babelOptions = require('../../.babelrc');
+const fs = require('fs');
+const { promisify } = require('util');
+const { basename, join, relative } = require('path');
+const glob = require('glob');
+
+const rootDir = join(__dirname, '..', '..');
+const srcDir = join(rootDir, 'src');
+
+const tokenMappings = [];
+
+function getCodeForExpression(expressionNode) {
+  return babel.transformFromAst(babel.types.program([
+    babel.types.expressionStatement(
+      babel.types.removeComments(babel.types.cloneDeep(expressionNode))
+    )
+  ])).code;
+}
+
+function handleJSXPath(path) {
+  const symbols = [];
+
+  const attributes = path.node.attributes.reduce(
+    (attributes, node) => {
+      attributes[node.name.name] = node.value;
+      return attributes;
+    },
+    {}
+  );
+
+  if (attributes.hasOwnProperty('token') && attributes.hasOwnProperty('default')) {
+    const tokenNode = attributes.token;
+    const defStringNode = attributes.default;
+
+    let defString;
+    let highlighting;
+    if (defStringNode.type === 'StringLiteral') {
+      defString = defStringNode.value;
+      highlighting = 'string';
+    } else if (defStringNode.type === 'JSXExpressionContainer') {
+      defString = getCodeForExpression(defStringNode.expression);
+      highlighting = 'code';
+    }
+    symbols.push({
+      token: tokenNode.value,
+      defString,
+      highlighting,
+      loc: path.node.loc
+    });
+  }
+
+  return symbols;
+}
+
+function traverseFile(filepath) {
+  const source = fs.readFileSync(filepath);
+  const ast = babel.parse(
+    source,
+    {
+      ...babelOptions,
+      filename: basename(filepath),
+      ast: true
+    }
+  );
+
+  babel.traverse(
+    ast,
+    {
+      JSXOpeningElement(path) {
+        if (path.node.name.name === 'EuiI18n') {
+          const symbols = handleJSXPath(path);
+          for (let i = 0; i < symbols.length; i++) {
+            tokenMappings.push(
+              { ...symbols[i], filepath: relative(rootDir, filepath) }
+            );
+          }
+        }
+      }
+    }
+  );
+}
+
+const files = glob.sync(
+  '**/*.@(js|ts|tsx)',
+  { cwd: srcDir, realpath: true },
+).filter(filepath => {
+  if (filepath.endsWith('index.d.ts')) return false;
+  if (filepath.endsWith('test.ts')) return false;
+  if (filepath.endsWith('test.tsx')) return false;
+  if (filepath.endsWith('test.js')) return false;
+
+  return true;
+});
+
+// extract tokens from source files
+files.forEach(filename => traverseFile(filename));
+
+// validate tokens
+tokenMappings.reduce(
+  (mappings, symbol) => {
+    const { token, defString } = symbol;
+
+    if (mappings.hasOwnProperty(token)) {
+      if (mappings[token] !== defString) {
+        console.error(`Token ${token} has two differing defaults:\n${defString}\n${mappings[token]}`);
+        process.exit(1);
+      }
+    } else {
+      mappings[token] = defString;
+    }
+
+    return mappings;
+  },
+  {}
+);
+
+fs.writeFileSync(
+  join(rootDir, 'src-docs', 'src', 'i18ntokens.json'),
+  JSON.stringify(tokenMappings, null, 2)
+);

src-docs/src/actions/action_types.js

@@ -7,4 +7,7 @@ export default keyMirror({
 
   // Theme actions
   TOGGLE_THEME: null,
+
+  // Locale actions
+  TOGGLE_LOCALE: null,
 });

src-docs/src/actions/index.js

@@ -1,3 +1,7 @@
 export {
   toggleTheme,
 } from './theme_actions';
+
+export {
+  toggleLocale,
+} from './locale_actions';

src-docs/src/actions/locale_actions.js

@@ -0,0 +1,8 @@
+import ActionTypes from './action_types';
+
+export const toggleLocale = locale => ({
+  type: ActionTypes.TOGGLE_LOCALE,
+  data: {
+    locale,
+  },
+});

src-docs/src/components/guide_locale_selector/guide_locale_selector.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiSwitch,
+} from '../../../../src/components';
+
+export class GuideLocaleSelector extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isLocalePopoverOpen: false,
+    };
+  }
+
+  onLocaleButtonClick = () => {
+    this.setState({
+      isLocalePopoverOpen: !this.state.isLocalePopoverOpen,
+    });
+  };
+
+  closeLocalePopover = () => {
+    this.setState({
+      isLocalePopoverOpen: false,
+    });
+  };
+
+  render() {
+    const otherLocale = this.props.selectedLocale === 'en' ? 'en-xa' : 'en';
+
+    return (
+      <EuiSwitch
+        label="pseudo translation"
+        checked={this.props.selectedLocale === 'en-xa'}
+        onChange={() => this.props.onToggleLocale(otherLocale)}
+        compressed={true}
+      />
+    );
+  }
+}
+
+GuideLocaleSelector.propTypes = {
+  onToggleLocale: PropTypes.func.isRequired,
+  selectedLocale: PropTypes.string.isRequired,
+};

src-docs/src/components/guide_locale_selector/index.js

@@ -0,0 +1 @@
+export { GuideLocaleSelector } from './guide_locale_selector';

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -16,6 +16,9 @@ import {
   EuiText,
 } from '../../../../src/components';
 
+import {
+  GuideLocaleSelector,
+} from '../guide_locale_selector';
 import {
   GuideThemeSelector,
 } from '../guide_theme_selector';
@@ -78,7 +81,7 @@ export class GuidePageChrome extends Component {
     );
 
     return (
-      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
         <EuiFlexItem grow={false}>
           {homeLink}
         </EuiFlexItem>
@@ -89,6 +92,18 @@ export class GuidePageChrome extends Component {
             selectedTheme={this.props.selectedTheme}
           />
         </EuiFlexItem>
+        {
+          location.host === 'localhost:8030' // eslint-disable-line no-restricted-globals
+            ? (
+              <EuiFlexItem grow={false}>
+                <GuideLocaleSelector
+                  onToggleLocale={this.props.onToggleLocale}
+                  selectedLocale={this.props.selectedLocale}
+                />
+              </EuiFlexItem>
+            )
+            : null
+        }
       </EuiFlexGroup>
     );
   }
@@ -198,5 +213,7 @@ GuidePageChrome.propTypes = {
   currentRouteName: PropTypes.string,
   onToggleTheme: PropTypes.func.isRequired,
   selectedTheme: PropTypes.string.isRequired,
+  onToggleLocale: PropTypes.func.isRequired,
+  selectedLocale: PropTypes.string.isRequired,
   navigation: PropTypes.array.isRequired,
 };