Compare commits

...

13 Commits

Author SHA1 Message Date
David Joy
2a8793d4ac fix: updating frontend-base to 3.0.0 (#7)
Also locking package.json versions and updating associated @edx libraries
2019-09-30 13:59:32 -04:00
David Joy
f9d173462d fix: upgrading to frontend-base 2.0.0 (#3) 2019-09-18 23:17:37 -04:00
Adam Butterworth
d36115f60b Update README.rst 2019-09-18 09:37:57 -04:00
Adam Butterworth
51740e5bdb docs: fix badges on readme 2019-09-18 09:33:53 -04:00
Adam Butterworth
925b79e0df Merge pull request #2 from edx/abutterworth/fix-i18n-messages-export
fix: export i18n messages properly
2019-09-18 09:22:22 -04:00
Adam Butterworth
fc5b02c28c fix: export i18n messages properly 2019-09-18 09:18:35 -04:00
Adam Butterworth
3bac6dda8c Merge pull request #1 from edx/abutterworth/add-i18n-pipeline-tools
feat: add i18n pipeline tools
2019-09-17 17:54:25 -04:00
Adam Butterworth
1ab3049fea fix package json 2019-09-17 17:33:41 -04:00
Adam Butterworth
146a8d5bdb add open edx yaml 2019-09-17 16:48:50 -04:00
Adam Butterworth
5d718d888e add analytics to dev deps 2019-09-17 16:45:08 -04:00
Adam Butterworth
aad7ba376d add frontend-base to dev dependencies 2019-09-17 14:50:59 -04:00
Adam Butterworth
e16ea7dcb2 Update package-lock.json 2019-09-17 13:00:54 -04:00
Adam Butterworth
94b3f19ed5 feat: add i18n pipeline tools 2019-09-17 11:37:26 -04:00
20 changed files with 382 additions and 148 deletions

2
.gitignore vendored
View File

@@ -3,3 +3,5 @@
coverage
dist
node_modules
temp
src/i18n/transifex_input.json

8
.tx/config Normal file
View File

@@ -0,0 +1,8 @@
[main]
host = https://www.transifex.com
[edx-platform.frontend-component-header]
file_filter = src/i18n/messages/<lang>.json
source_file = src/i18n/transifex_input.json
source_lang = en
type = KEYVALUEJSON

View File

@@ -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

View File

@@ -3,17 +3,19 @@ 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
.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
:target: https://travis-ci.com/edx/frontend-component-header
.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-header
:target: @edx/frontend-component-header
.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-header.svg-edx
.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-header.svg
:target: @edx/frontend-component-header
.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-header.svg-edx
.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-header.svg
:target: @edx/frontend-component-header
.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg-edx
.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
:target: @edx/frontend-component-header
.. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
:target: https://github.com/semantic-release/semantic-release

View File

@@ -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',

View File

@@ -1,35 +1,45 @@
import React from 'react';
import { render } from 'react-dom';
import { IntlProvider } from '@edx/frontend-i18n';
import { AuthenticationContext } from '@edx/frontend-base';
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { App, AppContext, APP_READY, AppProvider } from '@edx/frontend-base';
import { NewRelicLoggingService } from '@edx/frontend-logging';
import './index.scss';
import SiteHeader from '../src/';
const App = () => (
<div>
<IntlProvider locale="en">
<>
<AuthenticationContext.Provider value={{
App.subscribe(APP_READY, () => {
ReactDOM.render(
<AppProvider>
{/* We can fake out authentication by including another provider here with the data we want */}
<AppContext.Provider value={{
authenticatedUser: {
userId: null,
username: null,
roles: [],
administrator: false,
}}>
<SiteHeader />
</AuthenticationContext.Provider>
<h5 className="mt-2 mb-5">Logged out state</h5>
},
config: App.config
}}>
<SiteHeader />
</AppContext.Provider>
<h5 className="mt-2 mb-5">Logged out state</h5>
<AuthenticationContext.Provider value={{
{/* We can fake out authentication by including another provider here with the data we want */}
<AppContext.Provider value={{
authenticatedUser: {
userId: null,
username: 'testuser',
roles: [],
administrator: false,
}}>
<SiteHeader />
</AuthenticationContext.Provider>
<h5 className="mt-2">Logged in state</h5>
</>
</IntlProvider>
</div>
);
},
config: App.config
}}>
<SiteHeader />
</AppContext.Provider>
<h5 className="mt-2">Logged in state</h5>
</AppProvider>,
document.getElementById('root'),
);
});
render(<App />, document.getElementById('root'));
App.initialize({ messages: [], loggingService: NewRelicLoggingService });

8
openedx.yaml Normal file
View File

@@ -0,0 +1,8 @@
# openedx.yaml
---
owner: edx/fedx-team
tags:
- library
- component
- react

166
package-lock.json generated
View File

@@ -1426,9 +1426,9 @@
"dev": true
},
"@edx/frontend-analytics": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@edx/frontend-analytics/-/frontend-analytics-2.0.0.tgz",
"integrity": "sha512-dj01bUVFA0sIlxtMH1YhQrVjWdmmiUeDIR3QqSXAxU2vwX2F4bsYUm8t0kCyg+8CjfkTcuZvyHHfwvQwlFOx2g==",
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@edx/frontend-analytics/-/frontend-analytics-3.0.0.tgz",
"integrity": "sha512-+/4ILACcNBkscq4r+ZJvx/hsUqZu9c3Sqb4nm2TyAGqEKYSw010pE6Y4d6wi4tkXW6R6wc3VA2BnXdw5g7gsrA==",
"dev": true,
"requires": {
"form-urlencoded": "^3.0.0",
@@ -1436,9 +1436,9 @@
}
},
"@edx/frontend-auth": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/@edx/frontend-auth/-/frontend-auth-6.0.1.tgz",
"integrity": "sha512-wg1i2wPTnY5NUrRMaNeAYSkjaZxZ597p3Np57+8BckBI5JwDjzyaWAEMZmyc9jZR6X4xr5KCseD7nBOzpI9Ppw==",
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/@edx/frontend-auth/-/frontend-auth-7.0.1.tgz",
"integrity": "sha512-oElicVn8fbSAPEc79ivObiYgRTv62aNXP8y+utGBHQCNDi6N7bA4hXcKLjvz25hExmlzJdIR4v5IOLZiVMB5VQ==",
"dev": true,
"requires": {
"@edx/frontend-logging": "^2.0.1",
@@ -1460,14 +1460,16 @@
}
},
"@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": "3.0.0",
"resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-3.0.0.tgz",
"integrity": "sha512-mNswx2m74lydo66lAYvQm7z1BuP1FpdEjRpjy3S2oBaTw3ngtCzyvqEJrtNHpebIf4ZWiW3wXRu0cSexinKAYQ==",
"dev": true,
"requires": {
"babel-polyfill": "6.26.0",
"history": "4.9.0",
"lodash.memoize": "^4.1.2",
"lodash.pick": "^4.4.0",
"lodash.memoize": "4.1.2",
"lodash.merge": "4.6.2",
"lodash.pick": "4.4.0",
"pubsub-js": "1.7.0",
"redux-devtools-extension": "2.13.8",
"redux-logger": "3.0.6",
@@ -1475,9 +1477,9 @@
}
},
"@edx/frontend-i18n": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@edx/frontend-i18n/-/frontend-i18n-3.0.2.tgz",
"integrity": "sha512-K0jdSjwM3jO76HL3Dn8oGb15/40yr2IMcz5PVrHx7dxi6bvg9cWBf7C5Zbq4bZ515ZTUbZLrPMDk61lFkmcUzQ==",
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@edx/frontend-i18n/-/frontend-i18n-3.0.3.tgz",
"integrity": "sha512-1oBPba9xd/GK0hSBPhTdNGtHA+76j8sWJxRD9gQ+GsHLHF7Z75GsX+Ls6pB+fTNi9tjqaVWQLsA9rMGcj92hqQ==",
"dev": true,
"requires": {
"@cospired/i18n-iso-languages": "2.0.2",
@@ -1509,9 +1511,9 @@
"dev": true
},
"@edx/paragon": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-7.1.2.tgz",
"integrity": "sha512-XcjDRW+gFv4GK7XLLsX3jDwQf7dFzTYCoqI1rrOKSZQlsRWSgMR+YHkEQkU0bjVNb7SnvWS4gEO9KuGTOHCkcw==",
"version": "7.1.4",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-7.1.4.tgz",
"integrity": "sha512-lAOF+rPwC86xAkz78SanVWVYIv9jd7w00qt5iXpo+szsY5vkZvq48L/yCbjDfSEm6TvA6PqTgXopmJBpJ6ny6w==",
"dev": true,
"requires": {
"@fortawesome/fontawesome-svg-core": "^1.2.21",
@@ -1524,8 +1526,6 @@
"font-awesome": "^4.7.0",
"mailto-link": "^1.0.0",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-proptype-conditional-require": "^1.0.4",
"react-responsive": "^6.1.1",
"react-transition-group": "^4.0.0",
@@ -1546,36 +1546,35 @@
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.22",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.22.tgz",
"integrity": "sha512-QmEuZsipX5/cR9JOg0fsTN4Yr/9lieYWM8AQpmRa0eIfeOcl/HLYoEa366BCGRSrgNJEexuvOgbq9jnJ22IY5g==",
"version": "0.2.25",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz",
"integrity": "sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q==",
"dev": true
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.22",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.22.tgz",
"integrity": "sha512-Q941E4x8UfnMH3308n0qrgoja+GoqyiV846JTLoCcCWAKokLKrixCkq6RDBs8r+TtAWaLUrBpI+JFxQNX/WNPQ==",
"version": "1.2.25",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz",
"integrity": "sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==",
"dev": true,
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.22"
"@fortawesome/fontawesome-common-types": "^0.2.25"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.10.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.10.2.tgz",
"integrity": "sha512-9Os/GRUcy+iVaznlg8GKcPSQFpIQpAg14jF0DWsMdnpJfIftlvfaQCWniR/ex9FoOpSEOrlXqmUCFL+JGeciuA==",
"version": "5.11.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz",
"integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==",
"dev": true,
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.22"
"@fortawesome/fontawesome-common-types": "^0.2.25"
}
},
"@fortawesome/react-fontawesome": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz",
"integrity": "sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==",
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.5.tgz",
"integrity": "sha512-WYDKTgyAWOncujWhhzhW7k8sgO5Eo2pZTUL51yNzSQNBUwwr6rNKg/JUSE3iebaU1XShHw74aKc1kJ+jvtRNew==",
"dev": true,
"requires": {
"humps": "^2.0.1",
"prop-types": "^15.5.10"
}
},
@@ -3105,6 +3104,44 @@
"@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-polyfill": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
"integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
"requires": {
"babel-runtime": "^6.26.0",
"core-js": "^2.5.0",
"regenerator-runtime": "^0.10.5"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
}
}
},
"babel-preset-jest": {
"version": "24.9.0",
"resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
@@ -3119,7 +3156,6 @@
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"dev": true,
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
@@ -3128,8 +3164,7 @@
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
"dev": true
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
}
}
},
@@ -4173,8 +4208,7 @@
"core-js": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
"integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
"dev": true
"integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
},
"core-js-compat": {
"version": "3.2.1",
@@ -5162,6 +5196,36 @@
"string.prototype.trim": "^1.1.2"
}
},
"enzyme-adapter-react-16": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.14.0.tgz",
"integrity": "sha512-7PcOF7pb4hJUvjY7oAuPGpq3BmlCig3kxXGi2kFx0YzJHppqX1K8IIV9skT1IirxXlu8W7bneKi+oQ10QRnhcA==",
"dev": true,
"requires": {
"enzyme-adapter-utils": "^1.12.0",
"has": "^1.0.3",
"object.assign": "^4.1.0",
"object.values": "^1.1.0",
"prop-types": "^15.7.2",
"react-is": "^16.8.6",
"react-test-renderer": "^16.0.0-0",
"semver": "^5.7.0"
}
},
"enzyme-adapter-utils": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.0.tgz",
"integrity": "sha512-wkZvE0VxcFx/8ZsBw0iAbk3gR1d9hK447ebnSYBf95+r32ezBq+XDSAvRErkc4LZosgH8J7et7H7/7CtUuQfBA==",
"dev": true,
"requires": {
"airbnb-prop-types": "^2.13.2",
"function.prototype.name": "^1.1.0",
"object.assign": "^4.1.0",
"object.fromentries": "^2.0.0",
"prop-types": "^15.7.2",
"semver": "^5.6.0"
}
},
"error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -7199,9 +7263,9 @@
"dev": true
},
"handlebars": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.2.0.tgz",
"integrity": "sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==",
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.0.tgz",
"integrity": "sha512-xkRtOt3/3DzTKMOt3xahj2M/EqNhY988T+imYSlMgs5fVhLN2fmKVVj0LtEGmb+3UUYV5Qmm1052Mm3dIQxOvw==",
"dev": true,
"requires": {
"neo-async": "^2.6.0",
@@ -7509,12 +7573,6 @@
"debug": "^3.1.0"
}
},
"humps": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
"integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=",
"dev": true
},
"hyphenate-style-name": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
@@ -9182,6 +9240,12 @@
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true
},
"lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"lodash.mergewith": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
@@ -15099,6 +15163,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",

View File

@@ -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",
@@ -28,45 +29,50 @@
},
"homepage": "https://github.com/edx/frontend-component-header#readme",
"devDependencies": {
"@babel/cli": "^7.6.0",
"@babel/core": "^7.6.0",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/preset-env": "^7.6.0",
"@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-i18n": "^3.0.2",
"@edx/frontend-logging": "^3.0.1",
"@edx/paragon": "^7.1.2",
"babel-eslint": "^10.0.3",
"dotenv": "^8.1.0",
"enzyme": "^3.10.0",
"eslint": "^6.3.0",
"eslint-config-edx": "^4.0.4",
"jest": "^24.9.0",
"parcel-bundler": "^1.12.3",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"react-router-dom": "^5.0.1",
"react-test-renderer": "^16.9.0",
"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-i18n": "^3.0.2",
"prop-types": "^15.7.2",
"react": "^16.9.0"
"@babel/cli": "7.6.0",
"@babel/core": "7.6.0",
"@babel/plugin-proposal-class-properties": "7.5.5",
"@babel/plugin-proposal-object-rest-spread": "7.5.5",
"@babel/preset-env": "7.6.0",
"@babel/preset-react": "7.0.0",
"@edx/frontend-analytics": "3.0.0",
"@edx/frontend-auth": "7.0.1",
"@edx/frontend-base": "3.0.0",
"@edx/frontend-i18n": "3.0.3",
"@edx/frontend-logging": "3.0.1",
"@edx/paragon": "7.1.4",
"babel-eslint": "10.0.3",
"babel-plugin-react-intl": "4.1.18",
"dotenv": "8.1.0",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0",
"eslint": "6.3.0",
"eslint-config-edx": "4.0.4",
"jest": "24.9.0",
"parcel-bundler": "1.12.3",
"prop-types": "15.7.2",
"react": "16.9.0",
"react-dom": "16.9.0",
"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"
},
"dependencies": {
"react-responsive": "^8.0.1",
"react-transition-group": "^4.3.0"
"babel-polyfill": "6.26.0",
"react-responsive": "8.0.1",
"react-transition-group": "4.3.0"
},
"peerDependencies": {
"@edx/frontend-analytics": "^3.0.0",
"@edx/frontend-base": "^3.0.0",
"@edx/frontend-i18n": "^3.0.3",
"prop-types": "^15.7.2",
"react": "^16.9.0"
},
"jest": {
"transform": {
@@ -84,6 +90,7 @@
"/node_modules/(?!@edx)"
],
"setupFiles": [
"./src/setupTest.js",
"dotenv/config"
]
}

View File

@@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import Responsive from 'react-responsive';
import { injectIntl, intlShape } from '@edx/frontend-i18n';
import { App, AuthenticationContext } from '@edx/frontend-base';
import { App, AppContext } from '@edx/frontend-base';
import DesktopHeader from './DesktopHeader';
import MobileHeader from './MobileHeader';
@@ -17,20 +17,13 @@ App.requireConfig([
'SITE_NAME',
], 'Header component');
const {
LMS_BASE_URL,
LOGOUT_URL,
LOGIN_URL,
SITE_NAME,
} = App.config;
function SiteHeader({ intl }) {
const { username, avatar } = useContext(AuthenticationContext);
const { authenticatedUser, config } = useContext(AppContext);
const mainMenu = [
{
type: 'item',
href: `${LMS_BASE_URL}/dashboard`,
href: `${config.LMS_BASE_URL}/dashboard`,
content: intl.formatMessage(messages['header.links.courses']),
},
];
@@ -38,22 +31,22 @@ function SiteHeader({ intl }) {
const userMenu = [
{
type: 'item',
href: `${LMS_BASE_URL}/dashboard`,
href: `${config.LMS_BASE_URL}/dashboard`,
content: intl.formatMessage(messages['header.user.menu.dashboard']),
},
{
type: 'item',
href: `${LMS_BASE_URL}/u/${username}`,
href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
content: intl.formatMessage(messages['header.user.menu.profile']),
},
{
type: 'item',
href: `${LMS_BASE_URL}/account/settings`,
href: `${config.LMS_BASE_URL}/account/settings`,
content: intl.formatMessage(messages['header.user.menu.account.settings']),
},
{
type: 'item',
href: LOGOUT_URL,
href: config.LOGOUT_URL,
content: intl.formatMessage(messages['header.user.menu.logout']),
},
];
@@ -61,24 +54,24 @@ function SiteHeader({ intl }) {
const loggedOutItems = [
{
type: 'item',
href: LOGIN_URL,
href: config.LOGIN_URL,
content: intl.formatMessage(messages['header.user.menu.login']),
},
{
type: 'item',
href: `${LMS_BASE_URL}/register`,
href: `${config.LMS_BASE_URL}/register`,
content: intl.formatMessage(messages['header.user.menu.register']),
},
];
const props = {
logo: LogoSVG,
logoAltText: SITE_NAME,
siteName: SITE_NAME,
logoDestination: `${LMS_BASE_URL}/dashboard`,
loggedIn: !!username,
username,
avatar,
logoAltText: config.SITE_NAME,
siteName: config.SITE_NAME,
logoDestination: `${config.LMS_BASE_URL}/dashboard`,
loggedIn: !!authenticatedUser.username,
username: authenticatedUser.username,
avatar: authenticatedUser.avatar,
mainMenu,
userMenu,
loggedOutItems,

View File

@@ -2,7 +2,7 @@
import React from 'react';
import { IntlProvider } from '@edx/frontend-i18n';
import TestRenderer from 'react-test-renderer';
import { AuthenticationContext } from '@edx/frontend-base';
import { AppContext } from '@edx/frontend-base';
import { Context as ResponsiveContext } from 'react-responsive';
import SiteHeader from './index';
@@ -12,15 +12,23 @@ describe('<SiteHeader />', () => {
const component = (
<ResponsiveContext.Provider value={{ width: 1280 }}>
<IntlProvider locale="en" messages={{}}>
<AuthenticationContext.Provider
value={{
<AppContext.Provider value={{
authenticatedUser: {
userId: null,
username: null,
roles: [],
administrator: false,
},
config: {
LMS_BASE_URL: process.env.LMS_BASE_URL,
SITE_NAME: process.env.SITE_NAME,
LOGIN_URL: process.env.LOGIN_URL,
LOGOUT_URL: process.env.LOGOUT_URL,
},
}}
>
<SiteHeader />
</AuthenticationContext.Provider>
</AppContext.Provider>
</IntlProvider>
</ResponsiveContext.Provider>
);
@@ -34,15 +42,23 @@ describe('<SiteHeader />', () => {
const component = (
<ResponsiveContext.Provider value={{ width: 500 }}>
<IntlProvider locale="en" messages={{}}>
<AuthenticationContext.Provider
value={{
<AppContext.Provider value={{
authenticatedUser: {
userId: null,
username: null,
roles: [],
administrator: false,
},
config: {
LMS_BASE_URL: process.env.LMS_BASE_URL,
SITE_NAME: process.env.SITE_NAME,
LOGIN_URL: process.env.LOGIN_URL,
LOGOUT_URL: process.env.LOGOUT_URL,
},
}}
>
<SiteHeader />
</AuthenticationContext.Provider>
</AppContext.Provider>
</IntlProvider>
</ResponsiveContext.Provider>
);

18
src/i18n/index.js Normal file
View File

@@ -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;

View File

@@ -0,0 +1,2 @@
{
}

View File

@@ -0,0 +1,2 @@
{
}

View File

@@ -0,0 +1,2 @@
{
}

View File

@@ -0,0 +1,2 @@
{
}

View File

@@ -0,0 +1,2 @@
{
}

View File

@@ -0,0 +1,2 @@
{
}

View File

@@ -1,5 +1,5 @@
import SiteHeader from './SiteHeader';
import messages from './SiteHeader.messages';
import messages from './i18n/index';
export { messages };

26
src/setupTest.js Normal file
View File

@@ -0,0 +1,26 @@
/* eslint-disable import/no-extraneous-dependencies */
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'babel-polyfill';
Enzyme.configure({ adapter: new Adapter() });
// These configuration values are usually set in webpack's EnvironmentPlugin however
// Jest does not use webpack so we need to set these so for testing
process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
process.env.BASE_URL = 'localhost:1995';
process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
process.env.CSRF_COOKIE_NAME = 'csrftoken';
process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
process.env.ECOMMERCE_BASE_URL = 'http://localhost:18130';
process.env.LANGUAGE_PREFERENCE_COOKIE_NAME = 'openedx-language-preference';
process.env.LMS_BASE_URL = 'http://localhost:18000';
process.env.LOGIN_URL = 'http://localhost:18000/login';
process.env.LOGOUT_URL = 'http://localhost:18000/login';
process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
process.env.SEGMENT_KEY = 'segment_whoa';
process.env.SITE_NAME = 'edX';
process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';