diff --git a/.gitignore b/.gitignore index 4acc796..4f5273e 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ coverage dist node_modules +temp +src/i18n/transifex_input.json diff --git a/.tx/config b/.tx/config new file mode 100644 index 0000000..fd20ef2 --- /dev/null +++ b/.tx/config @@ -0,0 +1,8 @@ +[main] +host = https://www.transifex.com + +[edx-platform.frontend-component-header] +file_filter = src/i18n/messages/.json +source_file = src/i18n/transifex_input.json +source_lang = en +type = KEYVALUEJSON diff --git a/Makefile b/Makefile index f6a5301..2016d4d 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,58 @@ +transifex_resource = frontend-component-header +transifex_langs = "ar,fr,es_419,zh_CN" + +transifex_utils = ./node_modules/.bin/transifex-utils.js +i18n = ./src/i18n +transifex_input = $(i18n)/transifex_input.json +tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/ +tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/ + +# This directory must match .babelrc . +transifex_temp = ./temp/babel-plugin-react-intl + build: rm -rf ./dist ./node_modules/.bin/babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files - # --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want. - rm -rf dist/**/*.test.jsx - rm -rf dist/**/__snapshots__ - rm -rf dist/__mocks__ + @# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want. + @rm -rf dist/**/*.test.jsx + @rm -rf dist/**/__snapshots__ + @rm -rf dist/__mocks__ + +requirements: + npm install + +i18n.extract: + # Pulling display strings from .jsx files into .json files... + rm -rf $(transifex_temp) + npm run-script i18n_extract + +i18n.concat: + # Gathering JSON messages into one file... + $(transifex_utils) $(transifex_temp) $(transifex_input) + +extract_translations: | requirements i18n.extract i18n.concat + +# Despite the name, we actually need this target to detect changes in the incoming translated message files as well. +detect_changed_source_translations: + # Checking for changed translations... + git diff --exit-code $(i18n) + +# Pushes translations to Transifex. You must run make extract_translations first. +push_translations: + # Pushing strings to Transifex... + tx push -s + # Fetching hashes from Transifex... + ./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1) + # Writing out comments to file... + $(transifex_utils) $(transifex_temp) --comments + # Pushing comments to Transifex... + ./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2) + +# Pulls translations from Transifex. +pull_translations: + tx pull -f --mode reviewed --language=$(transifex_langs) + +# This target is used by Travis. +validate-no-uncommitted-package-lock-changes: + # Checking for package-lock.json changes... + git diff --exit-code package-lock.json diff --git a/README.rst b/README.rst index a2c671e..a2b7627 100644 --- a/README.rst +++ b/README.rst @@ -3,7 +3,9 @@ frontend-component-header |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release| -This repository is a work in progress. Nothing found here is at all production-ready. +This is the standard Open edX header for use in React applications. It has two exports: + - **default**: The Header Component + - **messages**: for i18n in the form of ``{ locale: { key: translatedString } }`` .. |Build Status| image:: https://api.travis-ci.org/edx/frontend-component-header.svg?branch=master-edx :target: https://travis-ci.org/edx/frontend-component-header diff --git a/babel.config.js b/babel.config.js index 9172900..89cf18a 100644 --- a/babel.config.js +++ b/babel.config.js @@ -13,6 +13,17 @@ module.exports = { '@babel/plugin-proposal-class-properties', ], env: { + i18n: { + plugins: [ + [ + 'react-intl', + { + messagesDir: './temp/babel-plugin-react-intl', + moduleSourceName: '@edx/frontend-i18n', + }, + ], + ], + }, test: { presets: [ '@babel/preset-env', diff --git a/openedx.yaml b/openedx.yaml new file mode 100644 index 0000000..26f244d --- /dev/null +++ b/openedx.yaml @@ -0,0 +1,8 @@ +# openedx.yaml + +--- +owner: edx/fedx-team +tags: + - library + - component + - react diff --git a/package-lock.json b/package-lock.json index 26259cc..02c5b75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "@edx/frontend-component-header", + "name": "@edx/frontend-component-header-edx", "version": "1.0.0-semantically-released", "lockfileVersion": 1, "requires": true, @@ -1460,9 +1460,9 @@ } }, "@edx/frontend-base": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-1.1.0.tgz", - "integrity": "sha512-V46BKNltEKe20bbFBU79uwVSwk914LZXvoOHQx/vJORok/+37ysq3etIP52dxku/3c942sA6ZXmMskE0POP8pQ==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-1.1.1.tgz", + "integrity": "sha512-YWbjaygt16oG9KJuIukl7FC8P46Brhje/nV+zH6+d/WbQTdp8IKtuBnrgXoypvR2unJiaFUsHcaESp9gFdOE/w==", "dev": true, "requires": { "history": "4.9.0", @@ -3105,6 +3105,27 @@ "@types/babel__traverse": "^7.0.6" } }, + "babel-plugin-react-intl": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-4.1.18.tgz", + "integrity": "sha512-Vg83Y8zv8DWyOsO6bmLNs94ulZzxsJ5uWKvSEc6EvrBihcnUpVRSYSiWEra0kAGxZjIYXO0a7G3/JmimQapguw==", + "dev": true, + "requires": { + "@babel/core": "^7.4.5", + "@babel/helper-plugin-utils": "^7.0.0", + "@types/babel__core": "^7.1.2", + "fs-extra": "^8.0.1", + "intl-messageformat-parser": "^3.1.1" + }, + "dependencies": { + "intl-messageformat-parser": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-3.1.1.tgz", + "integrity": "sha512-rp28ut8Xj/R0IN3wcvJqtVTKWDNaBk9Z5R+D/mSB7rpycc1jsE3vn5ShZa//zN7NpYXF3rkl8A6mZVhWNlMUJA==", + "dev": true + } + } + }, "babel-preset-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz", @@ -15099,6 +15120,12 @@ "prop-types": "^15.6.2" } }, + "reactifex": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/reactifex/-/reactifex-1.1.1.tgz", + "integrity": "sha512-HH2N/b5tRxh7ypIgCRsiBl/CTxRkTEPf9DhIstaM6hne4WiwM5/bBbWuvVlRZc/i3FdqZED3pZ//6n4mtxma4w==", + "dev": true + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", diff --git a/package.json b/package.json index 39b2e4c..6e365e0 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "main": "dist/index.js", "scripts": { "build": "make build", + "i18n_extract": "BABEL_ENV=i18n babel src --quiet > /dev/null", "lint": "eslint --ext .js --ext .jsx .", "semantic-release": "semantic-release", "start": "parcel ./example/index.html --no-source-maps --out-dir example/dist", @@ -36,11 +37,12 @@ "@babel/preset-react": "^7.0.0", "@edx/frontend-analytics": "^2.0.0", "@edx/frontend-auth": "^6.0.1", - "@edx/frontend-base": "^1.1.0", + "@edx/frontend-base": "^1.1.1", "@edx/frontend-i18n": "^3.0.2", "@edx/frontend-logging": "^3.0.1", "@edx/paragon": "^7.1.2", "babel-eslint": "^10.0.3", + "babel-plugin-react-intl": "^4.1.18", "dotenv": "^8.1.0", "enzyme": "^3.10.0", "eslint": "^6.3.0", @@ -53,13 +55,15 @@ "react-redux": "^7.1.1", "react-router-dom": "^5.0.1", "react-test-renderer": "^16.9.0", + "reactifex": "^1.1.1", "redux": "^4.0.4", "redux-saga": "^1.0.5", "sass": "^1.22.12", "semantic-release": "^15.13.24" }, "peerDependencies": { - "@edx/frontend-base": "^1.1.0", + "@edx/frontend-analytics": "^2.0.0", + "@edx/frontend-base": "^1.1.1", "@edx/frontend-i18n": "^3.0.2", "prop-types": "^15.7.2", "react": "^16.9.0" diff --git a/src/i18n/index.js b/src/i18n/index.js new file mode 100644 index 0000000..b9352f5 --- /dev/null +++ b/src/i18n/index.js @@ -0,0 +1,18 @@ +import arMessages from './messages/ar.json'; +// no need to import en messages-- they are in the defaultMessage field +import es419Messages from './messages/es_419.json'; +import frMessages from './messages/fr.json'; +import kokrMessages from './messages/ko_KR.json'; +import ptbrMessages from './messages/pt_BR.json'; +import zhcnMessages from './messages/zh_CN.json'; + +const messages = { + ar: arMessages, + 'es-419': es419Messages, + fr: frMessages, + 'zh-cn': zhcnMessages, + 'ko-kr': kokrMessages, + 'pt-br': ptbrMessages, +}; + +export default messages; diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json new file mode 100644 index 0000000..2c63c08 --- /dev/null +++ b/src/i18n/messages/ar.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/es_419.json b/src/i18n/messages/es_419.json new file mode 100644 index 0000000..2c63c08 --- /dev/null +++ b/src/i18n/messages/es_419.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json new file mode 100644 index 0000000..2c63c08 --- /dev/null +++ b/src/i18n/messages/fr.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/ko_KR.json b/src/i18n/messages/ko_KR.json new file mode 100644 index 0000000..2c63c08 --- /dev/null +++ b/src/i18n/messages/ko_KR.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/pt_BR.json b/src/i18n/messages/pt_BR.json new file mode 100644 index 0000000..2c63c08 --- /dev/null +++ b/src/i18n/messages/pt_BR.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/zh_CN.json b/src/i18n/messages/zh_CN.json new file mode 100644 index 0000000..2c63c08 --- /dev/null +++ b/src/i18n/messages/zh_CN.json @@ -0,0 +1,2 @@ +{ +}