@coders-tokyo/app-wrapper - npm Package Compare versions

Comparing version 0.1.7-canary.1 to 0.2.0-canary.1

dist/components/header/index.js

@@ -36,2 +36,3 @@ "use strict";
 var navigation_1 = require("../navigation");
+var notification_1 = require("../notification");
 var messages_1 = require("./messages");
@@ -60,6 +61,11 @@ var constants_1 = require("./constants");
     Header.prototype.renderRightPanel = function () {
+        return (React.createElement("div", { className: "AppWrapper-right-header" },
+            React.createElement(notification_1.Notification, null),
+            this.renderUser()));
+    };
+    Header.prototype.renderUser = function () {
         var user = this.props.user;
-        return (user && (React.createElement("div", { className: "AppWrapper-right-header" },
+        return user ? (React.createElement(React.Fragment, null,
             React.createElement("img", { className: "AppWrapper-user-avatar-header", alt: user.name, title: user.name, src: user.picture || constants_1.DEFAULT_AVATAR }),
-            React.createElement("span", { className: "AppWrapper-user-name-header" }, user.name))));
+            React.createElement("span", { className: "AppWrapper-user-name-header" }, user.name))) : null;
     };
@@ -66,0 +72,0 @@ Header.defaultProps = {

dist/style/constants.js

@@ -9,3 +9,7 @@ "use strict";
 exports.grayLighter = '#bdc3c7';
+exports.customGray1 = '#e4e7e8';
+exports.customGray2 = '#ebedee';
+/** shadows */
 exports.shadowDepth1 = '0 1px 3px rgba(0, 0, 0, .05)';
+exports.shadowDepth2 = '0 3px 10px rgba(0, 0, 0, .05)';
 //# sourceMappingURL=constants.js.map

dist/style/index.js

 
   "use strict";
   Object.defineProperty(exports, "__esModule", { value: true });
-  exports.appWrapperStyle = ".AppWrapper-header{-webkit-box-sizing:border-box;box-sizing:border-box;height:60px;width:100%;margin:0 auto;background:#fff;padding:10px 15px;position:fixed;top:0;left:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.05);box-shadow:0 1px 3px rgba(0,0,0,.05);z-index:3}.AppWrapper-header,.AppWrapper-left-header,.AppWrapper-right-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.AppWrapper-left-header,.AppWrapper-right-header{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.AppWrapper-right-header{margin-left:auto}.AppWrapper-user-avatar-header{width:40px;height:40px;border-radius:100%;margin-right:5px}.AppWrapper-user-name-header{display:none;color:#627182}.AppWrapper-logo-header-anchor{height:26px}.AppWrapper-logo-header{height:26px;position:absolute;left:55px}.AppWrapper-welcome-header{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-right:12px;text-align:right}.AppWrapper-welcome-header small{color:rgba(0,0,0,.4);font-size:12px}.AppWrapper-welcome-header span{color:rgba(50,50,50,.8);font-size:14px}@media (min-width:768px){.AppWrapper-logo-header-anchor{height:30px}.AppWrapper-logo-header{height:30px;position:static;margin-right:30px}}@media (min-width:768px){.AppWrapper-user-name-header{display:block}}.AppWrapper-menu-wrapper{background-color:#fff}.bm-burger-button{position:fixed;width:20px;height:15px;left:15px;top:23px}.bm-burger-bars{background-color:#627182}.bm-cross-button{height:24px;width:24px}.bm-cross{background:#bdc3c7}.bm-menu-wrap{position:fixed;height:100%;top:62px;left:0}.bm-menu{background:#fff;font-size:1.15em}.bm-item-list{color:#627182}.bm-item{display:inline-block}.bm-item:focus{outline:none}.bm-overlay{left:0;top:62px}.AppWrapper-mobile-menu-item{display:block;padding:15px;text-decoration:none;color:#627182}.AppWrapper-mobile-menu-item.active{border-left:5px solid #be1313}@media (min-width:768px){.AppWrapper-mobile-menu{display:none}}.AppWrapper-desktop-menu{display:none}.AppWrapper-desktop-menu-item{color:#627182;display:inline-block;height:55px;margin-right:30px;text-decoration:none}.AppWrapper-desktop-menu-item:hover{color:#000}.AppWrapper-desktop-menu-item.active{border-bottom:5px solid #be1313}.AppWrapper-desktop-menu-item-text{line-height:55px}@media (min-width:768px){.AppWrapper-desktop-menu{display:block}}";
+  exports.appWrapperStyle = ".AppWrapper-header-link{text-decoration:none}.AppWrapper-header-link.bold{font-weight:700}.AppWrapper-header-link.underline{font-style:underline}.AppWrapper-header-link.italic{font-style:italic}.AppWrapper-header-link.gray{color:#627182}.AppWrapper-header{-webkit-box-sizing:border-box;box-sizing:border-box;height:60px;width:100%;margin:0 auto;background:#fff;padding:10px 15px;position:fixed;top:0;left:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.05);box-shadow:0 1px 3px rgba(0,0,0,.05);z-index:3}.AppWrapper-header,.AppWrapper-left-header,.AppWrapper-right-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.AppWrapper-left-header,.AppWrapper-right-header{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.AppWrapper-right-header{margin-left:auto}.AppWrapper-user-avatar-header{width:40px;height:40px;border-radius:100%;margin-right:5px}.AppWrapper-user-name-header{display:none;color:#627182}.AppWrapper-logo-header-anchor{height:26px}.AppWrapper-logo-header{height:26px;position:absolute;left:55px}.AppWrapper-welcome-header{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-right:12px;text-align:right}.AppWrapper-welcome-header small{color:rgba(0,0,0,.4);font-size:12px}.AppWrapper-welcome-header span{color:rgba(50,50,50,.8);font-size:14px}@media (min-width:768px){.AppWrapper-logo-header-anchor{height:30px}.AppWrapper-logo-header{height:30px;position:static;margin-right:30px}}@media (min-width:768px){.AppWrapper-user-name-header{display:block}}.AppWrapper-header-nav-item{margin-right:15px}.AppWrapper-menu-wrapper{background-color:#fff}.bm-burger-button{position:fixed;width:20px;height:15px;left:15px;top:23px}.bm-burger-bars{background-color:#627182}.bm-cross-button{height:24px;width:24px}.bm-cross{background:#bdc3c7}.bm-menu-wrap{position:fixed;height:100%;top:62px;left:0}.bm-menu{background:#fff;font-size:1.15em}.bm-item-list{color:#627182}.bm-item{display:inline-block}.bm-item:focus{outline:none}.bm-overlay{left:0;top:62px}.AppWrapper-mobile-menu-item{display:block;padding:15px;text-decoration:none;color:#627182}.AppWrapper-mobile-menu-item.active{border-left:5px solid #be1313}@media (min-width:768px){.AppWrapper-mobile-menu{display:none}}.AppWrapper-desktop-menu{display:none}.AppWrapper-desktop-menu-item{color:#627182;display:inline-block;height:55px;margin-right:30px;text-decoration:none}.AppWrapper-desktop-menu-item:hover{color:#000}.AppWrapper-desktop-menu-item.active{border-bottom:5px solid #be1313}.AppWrapper-desktop-menu-item-text{line-height:55px}@media (min-width:768px){.AppWrapper-desktop-menu{display:block}}.AppWrapper-header-notification{padding:0 15px;position:relative}.AppWrapper-header-notification-bell:focus,.AppWrapper-header-notification-bell:hover{color:#be1313}.AppWrapper-header-notification-bell{cursor:pointer;outline:none;border:0;background:transparent;height:60px}.AppWrapper-header-dropdown .NotificationListItem,.AppWrapper-header-notification .NotificationListItem{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:7px 15px;border-bottom:1px solid #ebedee},.AppWrapper-header-dropdown .NotificationListItem.active,.AppWrapper-header-dropdown .NotificationListItem:hover,.AppWrapper-header-notification .NotificationListItem.active,.AppWrapper-header-notification .NotificationListItem:hover{background-color:#ebedee}.AppWrapper-header-dropdown .NotificationListItem-avatar-container,.AppWrapper-header-notification .NotificationListItem-avatar-container{margin-right:8px}.AppWrapper-header-dropdown .NotificationListItem-text,.AppWrapper-header-notification .NotificationListItem-text{font-size:15px;margin-bottom:3px}.AppWrapper-header-dropdown .NotificationListItem-time,.AppWrapper-header-notification .NotificationListItem-time{font-size:12px;color:#bdc3c7}.AppWrapper-header-dropdown{position:absolute;top:60px;right:0;min-height:100px;background:#fff;-webkit-box-shadow:0 3px 10px rgba(0,0,0,.05);box-shadow:0 3px 10px rgba(0,0,0,.05);max-height:500px;overflow:auto;-webkit-overflow-scrolling:touch}.AppWrapper-header-dropdown-empty{text-align:center;font-size:15px;color:#bdc3c7}.AppWrapper-header-dropdown-item{padding:15px 10px;cursor:pointer}.AppWrapper-header-dropdown-item:hover{background:#ebedee}.AppWrapper-header-dropdown-item.active{background:#e4e7e8}.AppWrapper-header-dropdown.sp{display:block;min-width:auto;width:100%;min-height:auto;max-height:calc(100vh - 60px)}.AppWrapper-header-dropdown.pc{display:none;min-width:400px}@media (min-width:768px){.AppWrapper-header-dropdown.sp{display:none}.AppWrapper-header-dropdown.pc{display:block}}.AppWrapper-header-avatar{border-radius:50%;-webkit-background-size:cover;background-size:cover;background-position:50%}.AppWrapper-header-avatar.size-small{width:32px;height:32px}.AppWrapper-header-avatar.size-medium{width:48px;height:48px}";
   

package.json

 {
   "name": "@coders-tokyo/app-wrapper",
-  "version": "0.1.7-canary.1",
+  "version": "0.2.0-canary.1",
   "main": "./dist/index.js",
   "dependencies": {
+    "@types/js-cookie": "^2.2.2",
     "@types/react-burger-menu": "^2.2.3",
+    "js-cookie": "^2.2.0",
     "react-burger-menu": "^2.6.5"
@@ -30,2 +32,3 @@ },
     "autoprefixer": "^9.5.0",
+    "axios": "^0.18.0",
     "cssnano": "^4.1.10",
@@ -32,0 +35,0 @@ "gulp": "^4.0.0",

src/app-wrapper/models/user.ts

 export interface User {
   name: string;
   picture?: string;
+  city?: string;
+  createdAt?: string;
+  dob?: string;
+  email?: string;
+  id?: string;
+  phone?: string;
+  role?: string;
 }

src/app-wrapper/style/constants.ts

@@ -8,2 +8,7 @@ /** colors */
 
+export const customGray1 = '#e4e7e8';
+export const customGray2 = '#ebedee';
+
+/** shadows */
 export const shadowDepth1 = '0 1px 3px rgba(0, 0, 0, .05)';
+export const shadowDepth2 = '0 3px 10px rgba(0, 0, 0, .05)';

src/app-wrapper/style/index.ts

 import { headerStyle } from '../components/header/style';
+import { navigationItemStyle } from '../components/navigation-item/style';
 import { navigationStyle } from '../components/navigation/style';
+import { notificationStyle } from '../components/notification/style';
+import { dropDownStyle } from '../components/dropdown/style';
+import { linkStyle } from '../components/link/style';
+import { avatarStyle } from '../components/avatar/style';
 
 export const appWrapperStyle: string = `
+  ${linkStyle}
   ${headerStyle}
+  ${navigationItemStyle}
   ${navigationStyle}
+  ${notificationStyle}
+  ${dropDownStyle}
+  ${avatarStyle}
 `;

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

122559

increased by113.18%

Number of package files

119

increased by70%

Lines of code

2283

increased by128.99%

Worsened metrics

Dependency count

6

increased by50%

Dev dependency count

14

increased by7.69%

Number of low quality alerts

6

increased by50%

Dependency changes

• + Added@types/js-cookie@^2.2.2

• + Addedjs-cookie@^2.2.0

• + Added@types/js-cookie@2.2.7(transitive)

• + Addedjs-cookie@2.2.1(transitive)