Merge pull request #2 from edx/kenclary-initial

feat: setup repo as NPM package with edX standards.

.eslintignore

@@ -0,0 +1,4 @@
+coverage
+dist
+example
+node_modules

.eslintrc.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('eslint');

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: Default CI
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs
+      uses: actions/setup-node@v2
+      with:
+        node-version: 12
+    - name: Install dependencies
+      run: npm ci
+    - name: Validate package-lock.json changes
+      run: make validate-no-uncommitted-package-lock-changes
+    - name: Lint
+      run: npm run lint
+    - name: Test
+      run: npm run test
+    - name: i18n_extract
+      run: npm run i18n_extract
+    - name: Coverage
+      uses: codecov/codecov-action@v2

.github/workflows/commitlint.yml

@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: edx/.github/.github/workflows/commitlint.yml@main

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+name: Release CI
+on:
+  push:
+    branches:
+      - main
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 12
+      - name: Install dependencies
+        run: npm ci
+      - name: Validate package-lock.json changes
+        run: make validate-no-uncommitted-package-lock-changes
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test
+      - name: i18n_extract
+        run: npm run i18n_extract
+      - name: Coverage
+        uses: codecov/codecov-action@v2
+      - name: Build
+        run: npm run build
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npx semantic-release

.tx/config

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

Makefile

@@ -0,0 +1,58 @@
+transifex_resource = frontend-lib-content-components
+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/fedx-scripts 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__
+
+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

babel.config.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('babel-preserve-modules');

codecov.yml

@@ -0,0 +1,10 @@
+coverage:
+  status:
+    project:
+      default:
+        target: auto
+        threshold: 10%
+    patch:
+      default:
+        target: auto
+        threshold: 10%

example/index.js

@@ -0,0 +1,42 @@
+import 'babel-polyfill';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+
+import './index.scss';
+
+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: null,
+        config: getConfig(),
+      }}>
+          {/* put stuff here? */}
+      </AppContext.Provider>
+      <h5 className="mt-2 mb-5">Logged out state</h5>
+
+      {/* We can fake out authentication by including another provider here with the data we want */}
+      <AppContext.Provider value={{
+        authenticatedUser: {
+          userId: '123abc',
+          username: 'testuser',
+          roles: [],
+          administrator: false,
+        },
+        config: getConfig(),
+      }}>
+        {/* put stuff here? */}
+      </AppContext.Provider>
+      <h5 className="mt-2">Logged in state</h5>
+    </AppProvider>,
+    document.getElementById('root'),
+  );
+});
+
+initialize({
+  messages: []
+});

example/index.scss

@@ -0,0 +1,6 @@
+@import "@edx/brand/paragon/fonts";
+@import "@edx/brand/paragon/variables";
+@import "@edx/paragon/scss/core/core";
+@import "@edx/brand/paragon/overrides";
+
+@import "@edx/frontend-lib-content-components/index";

jest.config.js

@@ -0,0 +1,7 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('jest', {
+  setupFiles: [
+    '<rootDir>/src/setupTest.js',
+  ],
+});

openedx.yaml

@@ -0,0 +1,8 @@
+# openedx.yaml
+
+---
+owner: edx/teaching-and-learning
+tags:
+  - library
+  - component
+  - react

package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@edx/frontend-component-header",
+  "version": "1.0.0-semantically-released",
+  "description": "The standard header for Open edX",
+  "main": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "make build",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "test": "fedx-scripts jest --coverage"
+  },
+  "files": [
+    "/dist"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/edx/frontend-component-header.git"
+  },
+  "author": "edX",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/edx/frontend-component-header/issues"
+  },
+  "homepage": "https://github.com/edx/frontend-component-header#readme",
+  "devDependencies": {
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-build": "5.6.14",
+    "@edx/frontend-platform": "1.14.0",
+    "@edx/paragon": "12.8.0",
+    "codecov": "3.8.3",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
+    "husky": "7.0.4",
+    "prop-types": "15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-redux": "7.2.6",
+    "react-router-dom": "5.3.0",
+    "react-test-renderer": "16.14.0",
+    "reactifex": "1.1.1",
+    "redux": "4.1.2",
+    "redux-saga": "1.1.3"
+  },
+  "dependencies": {
+    "babel-polyfill": "6.26.0",
+    "react-responsive": "8.2.0",
+    "react-transition-group": "4.4.2"
+  },
+  "peerDependencies": {
+    "@edx/frontend-platform": "^1.8.0",
+    "@edx/paragon": "^7.0.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  }
+}

public/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en-us" dir="ltr">
+  <head>
+      <title>Header</title>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

renovate.json

@@ -0,0 +1,28 @@
+{
+  "extends": [
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
+  ],
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    }
+  ],
+  "timezone": "America/New_York"
+}

src/Placeholder.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Placeholder() {
+  return (
+    <div className="Placeholder">
+      <h1>
+        Under Construction
+        <br />
+        Coming Soon
+      </h1>
+    </div>
+  );
+}
+
+export default Placeholder;

src/Placeholder.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import TestRenderer from 'react-test-renderer';
+import { AppContext } from '@edx/frontend-platform/react';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import Placeholder from './index';
+
+describe('<Placeholder />', () => {
+  it('renders correctly', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              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,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Placeholder />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

src/__snapshots__/Placeholder.test.jsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Placeholder /> renders correctly 1`] = `
+<div
+  className="Placeholder"
+>
+  <h1>
+    Under Construction
+    <br />
+    Coming Soon
+  </h1>
+</div>
+`;

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;

src/i18n/messages/ar.json

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

src/i18n/messages/es_419.json

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

src/i18n/messages/fr.json

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

src/i18n/messages/ko_KR.json

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

src/i18n/messages/pt_BR.json

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

src/i18n/messages/zh_CN.json

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

src/index.jsx

@@ -0,0 +1,6 @@
+import Placeholder from './Placeholder';
+import messages from './i18n/index';
+
+export { messages };
+
+export default Placeholder;

src/index.scss

@@ -0,0 +1 @@
+/* styles go here */

src/setupTest.js

@@ -0,0 +1,29 @@
+/* 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_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';
+process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
+process.env.LOGO_TRADEMARK_URL = 'https://edx-cdn.org/v3/default/logo-trademark.svg';
+process.env.LOGO_WHITE_URL = 'https://edx-cdn.org/v3/default/logo-white.svg';
+process.env.FAVICON_URL = 'https://edx-cdn.org/v3/default/favicon.ico';

webpack.dev.config.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('webpack-dev', {
+  entry: path.resolve(__dirname, 'example'),
+  output: {
+    path: path.resolve(__dirname, 'example/dist'),
+    publicPath: '/',
+  },
+  resolve: {
+    alias: {
+      '@edx/frontend-lib-content-components': path.resolve(__dirname, 'src'),
+    },
+  },
+});