@twreporter/universal-header
Advanced tools
Comparing version 2.0.5 to 2.1.0
{ | ||
"name": "@twreporter/universal-header", | ||
"version": "2.0.5", | ||
"version": "2.1.0", | ||
"description": "Universal header of TWReporter sites", | ||
"main": "dist/index.js", | ||
"main": "lib/index.js", | ||
"scripts": { | ||
"lint": "eslint -c .eslintrc src", | ||
"test": "echo \"Error: no test specified\" && exit 1", | ||
"build": "npm run lint && make build" | ||
"build": "make build", | ||
"dev": "make dev" | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "git+https://github.com/twreporter/universal-header.git" | ||
}, | ||
"repository": "https://github.com/twreporter/twreporter-npm-packages.git", | ||
"author": "twreporter <developer@twreporter.org>", | ||
"keywords": [ | ||
@@ -20,62 +17,18 @@ "twreporter", | ||
], | ||
"author": "developers@twreporter.org", | ||
"license": "MIT", | ||
"bugs": { | ||
"url": "https://github.com/twreporter/universal-header/issues" | ||
}, | ||
"homepage": "https://github.com/twreporter/universal-header#readme", | ||
"peerDependencies": { | ||
"react": "^16.3.0", | ||
"react-dom": "^16.3.0", | ||
"styled-components": "^4.0.0" | ||
}, | ||
"dependencies": { | ||
"axios": "^0.18.0", | ||
"@twreporter/core": "^1.1.0", | ||
"@twreporter/redux": "^5.0.4", | ||
"lodash": "^4.17.11", | ||
"lodash.get": "^4.4.2", | ||
"prop-types": "^15.6.2", | ||
"querystring": "^0.2.0", | ||
"react": "^16.3.0", | ||
"react-dom": "^16.3.0", | ||
"react-redux": "^6.0.0", | ||
"react-router-dom": "^4.3.1", | ||
"react-transition-group": "^1.2.1", | ||
"redux": "^4.0.1", | ||
"redux-devtools-extension": "^2.13.7", | ||
"redux-thunk": "^2.3.0", | ||
"smoothscroll": "^0.4.0", | ||
"styled-components": "^4.0.0" | ||
}, | ||
"devDependencies": { | ||
"@babel/cli": "^7.1.5", | ||
"@babel/core": "^7.0.0", | ||
"@babel/preset-env": "^7.1.6", | ||
"@babel/preset-react": "^7.0.0", | ||
"babel-eslint": "^10.0.1", | ||
"babel-loader": "^8.0.4", | ||
"babel-plugin-inline-react-svg": "^1.0.1", | ||
"babel-plugin-styled-components": "^1.8.0", | ||
"babel-plugin-transform-class-properties": "^6.24.1", | ||
"eslint": "^5.9.0", | ||
"eslint-plugin-babel": "^5.3.0", | ||
"eslint-plugin-react": "^7.11.1", | ||
"pre-commit": "^1.2.2", | ||
"rimraf": "^2.6.2", | ||
"webpack": "^3.0.0" | ||
}, | ||
"pre-commit": [ | ||
"lint" | ||
], | ||
"files": [ | ||
"/dist/actions", | ||
"/dist/components", | ||
"/dist/constants", | ||
"/dist/containers", | ||
"/dist/contexts", | ||
"/dist/index.js", | ||
"/dist/reducers", | ||
"/dist/standalone-header.js", | ||
"/dist/store.js", | ||
"/dist/utils" | ||
"lib" | ||
] | ||
} |
# TWReporter Universal Header | ||
Universal header(UH) is aimed to provide the consistent user experience | ||
Universal header(UH) is aimed to provide the consistent user experience | ||
whicherver twreporter sites the users visit. | ||
Universal header has two different ways to render both on client side | ||
Universal header has two different ways to render both on client side | ||
and server side. | ||
For client side rendering, we call it *STANDALONE* header, which is | ||
For client side rendering, we call it _STANDALONE_ header, which is | ||
along with redux store, requesting authentication and authorization after | ||
`componentDidMount` on the page. | ||
For server side rendering, we call it *DEPENDENT* header, which is a | ||
For server side rendering, we call it _DEPENDENT_ header, which is a | ||
container component(see https://redux.js.org/basics/usage-with-react for information). | ||
Because the *DEPENDENT* header is a container component, the redux store | ||
needs to be prepared by clients. | ||
Because the _DEPENDENT_ header is a container component, the redux store | ||
needs to be prepared by clients. | ||
@@ -21,10 +22,13 @@ See the following example codes to understand how to use UH in different | ||
### Dependencies of UH | ||
Make sure you have the following dependencies installed. | ||
- react@^16.3.0 (Required) | ||
- styled-components@^4.0.0 (Required) | ||
- react-router-dom@^4.0.0 (Required by *DEPENDENT* header) | ||
- react-redux@^6.0.0 (Required by *DEPENDENT* header) | ||
- redux and redux-thunk (Required by *DEPENDENT* header) | ||
- react-router-dom@^4.0.0 (Required by _DEPENDENT_ header) | ||
- react-redux@^6.0.0 (Required by _DEPENDENT_ header) | ||
- redux and redux-thunk (Required by _DEPENDENT_ header) | ||
### Standalone Header | ||
To use standalone header is easy, see the following example. | ||
@@ -42,5 +46,3 @@ | ||
<React.Fragment> | ||
<StandaloneHeader | ||
releaseBranch={releaseBranch} | ||
/> | ||
<StandaloneHeader releaseBranch={releaseBranch} /> | ||
</React.Fragment> | ||
@@ -53,8 +55,9 @@ ) | ||
### Dependent Header | ||
Dependent header is more complicated to setup than standalone header. | ||
There are three parts(reducer, store and server side data dispatching) | ||
There are three parts(reducer, store and server side data dispatching) | ||
need to be configured by clients. | ||
```javascript | ||
// src/reducers/index.js of clients | ||
// src/reducers/index.js of clients | ||
import authReducer from '@twreporter/universal-header/dist/reducers/auth' | ||
@@ -73,3 +76,3 @@ import { combineReducers } from 'redux' | ||
import reducer from './reducers/index' | ||
import thunkMiddleware from 'redux-thunk' | ||
import thunkMiddleware from 'redux-thunk' | ||
import { createStore, applyMiddleware } from 'redux' | ||
@@ -108,3 +111,3 @@ | ||
<Provider store={store}> | ||
<HeaderConatiner | ||
<HeaderConatiner | ||
releaseBranch={releaseBranch} | ||
@@ -145,5 +148,5 @@ isLinkExternal={false} | ||
const releaseBranch = process.env.RELEASE_BRANCH | ||
const isLinkExternal = false | ||
const isLinkExternal = false | ||
ReactDOM.hydrate(( | ||
ReactDOM.hydrate( | ||
<Provider store={reduxStore}> | ||
@@ -154,9 +157,11 @@ <HeaderContainer | ||
/> | ||
</Provider> | ||
), document.getElementById('app')) | ||
</Provider>, | ||
document.getElementById('app') | ||
) | ||
``` | ||
### isLinkExternal, releaseBranch and theme | ||
#### isLinkExternal | ||
`isLinkExternal` is a bool. | ||
@@ -167,6 +172,7 @@ | ||
If `isLinkExternal={true}`, all the links in the header would be `href`s, | ||
If `isLinkExternal={true}`, all the links in the header would be `href`s, | ||
handled by normal `<a>` HTML tag. | ||
#### releaseBranch | ||
Currently, `releaseBranch` works with `isLinkExternal={true}`. | ||
@@ -177,3 +183,3 @@ | ||
and each would generate corresponding links. | ||
EX: | ||
EX: | ||
If you pass `releaseBranch="master"`, then the logo link would be `http://localhost:3000`. | ||
@@ -186,2 +192,3 @@ If you pass `releaseBranch="test"`, then the logo link would be `http://localhost:3000`. | ||
#### theme | ||
You can pass `theme` prop into standalone and dependent header to have different styles. | ||
@@ -217,4 +224,6 @@ So far, `theme` supports the following values, including `normal`, `index`, `photography` and `transparent`. | ||
#### TODO for theme customization | ||
So far, the clients can not customize `fontColor`, `backgroundColor` and `logo` by themeselves. | ||
However, we could support `theme` either to be string or to be an object like the following spec. | ||
```javascript | ||
@@ -226,2 +235,1 @@ @typedef {Object} theme | ||
``` | ||
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
10
0
1
224
143275
26
2520
5
1
+ Added@twreporter/core@^1.1.0
+ Added@twreporter/redux@^5.0.4
+ Added@emotion/is-prop-valid@1.2.2(transitive)
+ Added@emotion/memoize@0.8.1(transitive)
+ Added@emotion/unitless@0.8.1(transitive)
+ Added@twreporter/core@1.24.0(transitive)
+ Added@twreporter/redux@5.0.8(transitive)
+ Added@types/stylis@4.2.5(transitive)
+ Addedaxios@0.19.2(transitive)
+ Addedcall-bind@1.0.7(transitive)
+ Addedcss-to-react-native@3.2.0(transitive)
+ Addedcsstype@3.1.3(transitive)
+ Addeddefine-data-property@1.1.4(transitive)
+ Addedencoding@0.1.13(transitive)
+ Addedes-define-property@1.0.0(transitive)
+ Addedes-errors@1.3.0(transitive)
+ Addedes6-error@4.1.1(transitive)
+ Addedfunction-bind@1.1.2(transitive)
+ Addedget-intrinsic@1.2.4(transitive)
+ Addedgopd@1.2.0(transitive)
+ Addedhas-property-descriptors@1.0.2(transitive)
+ Addedhas-proto@1.1.0(transitive)
+ Addedhas-symbols@1.1.0(transitive)
+ Addedhasown@2.0.2(transitive)
+ Addedhumps@0.6.0(transitive)
+ Addediconv-lite@0.6.3(transitive)
+ Addedimmediate@3.0.6(transitive)
+ Addedis-stream@1.1.0(transitive)
+ Addedisomorphic-fetch@2.2.1(transitive)
+ Addedlie@3.1.1(transitive)
+ Addedlocalforage@1.10.0(transitive)
+ Addednanoid@3.3.8(transitive)
+ Addednode-fetch@1.7.3(transitive)
+ Addednormalizr@3.6.2(transitive)
+ Addedobject-inspect@1.13.3(transitive)
+ Addedpostcss@8.4.38(transitive)
+ Addedpostcss-value-parser@4.2.0(transitive)
+ Addedqs@6.13.1(transitive)
+ Addedreact@18.3.1(transitive)
+ Addedreact-dom@18.3.1(transitive)
+ Addedsafer-buffer@2.1.2(transitive)
+ Addedscheduler@0.23.2(transitive)
+ Addedset-function-length@1.2.2(transitive)
+ Addedshallowequal@1.1.0(transitive)
+ Addedside-channel@1.0.6(transitive)
+ Addedsource-map-js@1.2.1(transitive)
+ Addedstyled-components@6.1.13(transitive)
+ Addedstylis@4.3.2(transitive)
+ Addedtslib@2.6.2(transitive)
+ Addedwhatwg-fetch@3.6.20(transitive)
- Removedaxios@^0.18.0
- Removedlodash.get@^4.4.2
- Removedreact-dom@^16.3.0
- Removedredux@^4.0.1
- Removedredux-devtools-extension@^2.13.7
- Removedredux-thunk@^2.3.0
- Removedsmoothscroll@^0.4.0
- Removedaxios@0.18.1(transitive)
- Removedis-buffer@2.0.5(transitive)
- Removedlodash.get@4.4.2(transitive)
- Removedredux-devtools-extension@2.13.9(transitive)
- Removedsmoothscroll@0.4.0(transitive)