@imposium-hub/components 2.14.1 → 2.14.2

package/dist/esm/services/Session.js

@@ -0,0 +1,107 @@
+import * as Cookies from 'js-cookie';
+import axios from 'axios';
+export default class SessionService {
+    static LOGIN_STORY_ID_CACHE = 'imp_hub_last_story_id';
+    static LOGIN_ORG_ID_CACHE = 'imp_hub_last_org_id';
+    static SESSION_COOKIE_NAME = 'auth_state';
+    static FRESH_COOKIE = {
+        sub: '',
+        organization_id: '',
+        story_id: ''
+    };
+    /*
+        Get list of accessible services with themes from Imposium API
+    */
+    static getAccessData = (idToken, baseUrl, getTotalRenders = false, accountId) => {
+        return new Promise((resolve, reject) => {
+            let accessUrl = baseUrl ? `${baseUrl}/access` : SessionService.determineAccessUrl();
+            const headers = { Authorization: `Bearer ${idToken}` };
+            if (getTotalRenders) {
+                accessUrl += '?include_total_renders=true';
+            }
+            if (accountId && accountId !== 'undefined') {
+                headers['X-Imposium-Account-Id'] = accountId;
+            }
+            axios
+                .get(accessUrl, { headers })
+                .then((res) => {
+                resolve(res.data ? res.data : []);
+            })
+                .catch((e) => {
+                reject(e);
+            });
+        });
+    };
+    static getSession = () => Cookies.getJSON(SessionService.SESSION_COOKIE_NAME);
+    static removeSession = () => {
+        const domain = SessionService.scrapeDomain();
+        Cookies.remove(SessionService.SESSION_COOKIE_NAME, { domain });
+        SessionService.clearCachedOrgId();
+        SessionService.clearCachedStoryId();
+    };
+    static buildFreshSession = (freshIdentity, orgId = null, storyId = null) => {
+        const { idTokenPayload: { sub, exp } } = freshIdentity;
+        const freshSession = {
+            sub
+        };
+        if (orgId) {
+            freshSession.organization_id = orgId;
+        }
+        if (storyId) {
+            freshSession.story_id = storyId;
+        }
+        SessionService.storeSession(freshSession, exp);
+    };
+    static storeSession = (values, auth0Expiry) => {
+        const cookieData = { ...SessionService.FRESH_COOKIE, ...values };
+        const domain = SessionService.scrapeDomain();
+        const expiry = new Date(auth0Expiry * 1000);
+        Cookies.set(SessionService.SESSION_COOKIE_NAME, cookieData, { domain, expires: expiry });
+    };
+    static cacheOrgId = (organizationId) => {
+        localStorage.setItem(SessionService.LOGIN_ORG_ID_CACHE, organizationId);
+    };
+    static clearCachedOrgId = () => {
+        localStorage.removeItem(SessionService.LOGIN_ORG_ID_CACHE);
+    };
+    static getCachedOrgId = () => {
+        return localStorage.getItem(SessionService.LOGIN_ORG_ID_CACHE);
+    };
+    static cacheStoryId = (storyId) => {
+        localStorage.setItem(SessionService.LOGIN_STORY_ID_CACHE, storyId);
+    };
+    static clearCachedStoryId = () => {
+        localStorage.removeItem(SessionService.LOGIN_STORY_ID_CACHE);
+    };
+    static getCachedStoryId = () => {
+        return localStorage.getItem(SessionService.LOGIN_STORY_ID_CACHE);
+    };
+    static updateSession = (values, auth0Expiry) => {
+        const prevCookieData = SessionService.getSession();
+        const nextCookieData = { ...prevCookieData, ...values };
+        SessionService.storeSession(nextCookieData, auth0Expiry);
+    };
+    /*
+        Determine which domain to assign cookie to
+     */
+    static scrapeDomain = () => {
+        const domainParts = window.location.host.split('.').reverse();
+        return domainParts.length > 2 ? `.${domainParts[1]}.${domainParts[0].split(':')[0]}` : null;
+    };
+    /*
+        Figure out which access endpoint to hit based on env
+    */
+    static determineAccessUrl = () => {
+        const { location: { hostname, host } } = window;
+        if (hostname === 'localhost') {
+            return 'https://api/access';
+        }
+        else if (host.includes('.staging.')) {
+            return 'https://api.staging.imposium.com/access';
+        }
+        else {
+            return 'https://api.imposium.com/access';
+        }
+    };
+}
+//# sourceMappingURL=Session.js.map

package/dist/esm/services/Session.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Session.js","sourceRoot":"","sources":["../../../src/services/Session.ts"],"names":[],"mappings":"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"}

package/dist/esm/utils/routing.d.ts

@@ -1,3 +1,5 @@
-export declare const pushRoute: (route: any) => void;
-export declare const replaceRoute: (route: any) => void;
+import { ICompatibleHistory } from '../components/app-wrapper/AppWrapper';
+export declare const configureHistory: (history: ICompatibleHistory) => void;
+export declare const pushRoute: (route: string) => void;
+export declare const replaceRoute: (route: string) => void;
 export declare const getDemoURL: () => string;

package/dist/esm/utils/routing.js

@@ -1,9 +1,12 @@
-import { browserHistory } from 'react-router';
+let historySingleton = null;
+export const configureHistory = (history) => {
+    historySingleton = history;
+};
 export const pushRoute = (route) => {
-    browserHistory.push(route);
+    historySingleton?.push(route);
 };
 export const replaceRoute = (route) => {
-    browserHistory.replace(route);
+    historySingleton?.replace(route);
 };
 export const getDemoURL = () => {
     const { location: { href } } = window;

package/dist/esm/utils/routing.js.map

@@ -1 +1 @@
-{"version":3,"file":"routing.js","sourceRoot":"","sources":["../../../src/utils/routing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAK,EAAQ,EAAE;IACrC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAK,EAAQ,EAAE;IACxC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE;IACnC,MAAM,EACF,QAAQ,EAAE,EAAE,IAAI,EAAE,EACrB,GAAG,MAAM,CAAC;IAEX,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACnC,OAAO,uBAAuB,CAAC;IACnC,CAAC;SAAM,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACxC,OAAO,mCAAmC,CAAC;IAC/C,CAAC;SAAM,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACnC,OAAO,8BAA8B,CAAC;IAC1C,CAAC;SAAM,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACpC,OAAO,+BAA+B,CAAC;IAC3C,CAAC;SAAM,CAAC;QACJ,OAAO,2BAA2B,CAAC;IACvC,CAAC;AACL,CAAC,CAAC"}
+{"version":3,"file":"routing.js","sourceRoot":"","sources":["../../../src/utils/routing.ts"],"names":[],"mappings":"AAEA,IAAI,gBAAgB,GAA8B,IAAI,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAA2B,EAAQ,EAAE;IAClE,gBAAgB,GAAG,OAAO,CAAC;AAC/B,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAa,EAAQ,EAAE;IAC7C,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AAClC,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAQ,EAAE;IAChD,gBAAgB,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE;IACnC,MAAM,EACF,QAAQ,EAAE,EAAE,IAAI,EAAE,EACrB,GAAG,MAAM,CAAC;IAEX,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACnC,OAAO,uBAAuB,CAAC;IACnC,CAAC;SAAM,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACxC,OAAO,mCAAmC,CAAC;IAC/C,CAAC;SAAM,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACnC,OAAO,8BAA8B,CAAC;IAC1C,CAAC;SAAM,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACpC,OAAO,+BAA+B,CAAC;IAC3C,CAAC;SAAM,CAAC;QACJ,OAAO,2BAA2B,CAAC;IACvC,CAAC;AACL,CAAC,CAAC"}

package/dist/styles.less

@@ -462,7 +462,7 @@ body{
         align-items: center;
 
         .jump-to-page {
-            .inputMixin;
+            .inputMixin();
             width: 30px;
             margin: 0 3px;
         }
@@ -653,7 +653,7 @@ body{
     background-color: @background;
 
     &.transparent {
-        .chess;
+        .chess();
     }
 
     &.hidden {
@@ -679,7 +679,7 @@ body{
 }
 
 .auth-gate {
-  .layer;
+  .layer();
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1323,7 +1323,7 @@ body{
     }
 
     .ip-table-loader {
-        .layer;
+        .layer();
         display: flex;
         align-items: center;
         justify-content: center;
@@ -1375,7 +1375,7 @@ body{
         }
         
         .paginator-input {
-            .inputMixin;
+            .inputMixin();
             width: 60px;
         }
 
@@ -1410,7 +1410,7 @@ body{
     border-radius: 5px;
 
     .progress-bg {
-        .layer;
+        .layer();
         background-color: @backgroundHighlight;
         transform-origin: left;
         border-radius: 5px;
@@ -1418,7 +1418,7 @@ body{
     }
 
     .progress-copy {
-        .layer;
+        .layer();
         text-align: center;
         line-height: 20px;
         border-radius: 5px;
@@ -1442,7 +1442,7 @@ body{
 
 
 .font-preview{
-	.layer;
+	.layer();
 	text-align: center;
 	background: white;
 	color:black;
@@ -1504,7 +1504,7 @@ body{
 
 	input,
 	textarea {
-		.inputMixin;
+		.inputMixin();
 		padding: 4px;
 	}
 
@@ -1513,7 +1513,7 @@ body{
 	}
 
 	select {
-		.inputMixin;
+		.inputMixin();
 		padding: 4px 15px 4px 4px;
 	}
 
@@ -1596,7 +1596,7 @@ body{
 .checkbox-field {
 
 	.checkbox {
-		.inputMixin;
+		.inputMixin();
 		display: flex;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
@@ -1640,7 +1640,7 @@ body{
 
 	.button-group {
 
-		.inputMixin;
+		.inputMixin();
 
 		&:hover {
 			background: @inputBackground;
@@ -1737,7 +1737,7 @@ body{
 	}
 
 	.checkbox {
-		.inputMixin;
+		.inputMixin();
 		line-height: 10px;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
@@ -1903,7 +1903,7 @@ body{
 }
 
 .anchor {
-    .font-style;
+    .font-style();
     cursor: pointer;
     font-size: @fontSizeDefault;
     text-decoration: none;
@@ -1918,7 +1918,7 @@ body{
 }
 
 .circle-style {
-    .no-select;
+    .no-select();
     border-radius: 50%;
     width: 28px;
     height: 28px;
@@ -1936,12 +1936,12 @@ body{
     cursor: pointer;
     outline: none;
     box-sizing: border-box;
-    .no-select;
-    .font-style;
+    .no-select();
+    .font-style();
 }
 
 .faux-select {
-    .btn-reset;
+    .btn-reset();
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -1959,7 +1959,7 @@ body{
 }
 
 .imposium-header {
-    .flex-row;
+    .flex-row();
     z-index: 100000;
     position: absolute;
     top: 0px;
@@ -1972,17 +1972,17 @@ body{
     line-height: 1.5;
 
     .inner-content {
-        .flex-row;
+        .flex-row();
         width: 100%;
         max-width: @defaultMaxWidth;
         justify-content: space-between;
         margin: 0px 15px;
 
         .inner-left {
-            .flex-row;
+            .flex-row();
 
             .title {
-                .flex-row;
+                .flex-row();
                 margin-right: 20px;
                 text-decoration: none;
 
@@ -2005,7 +2005,7 @@ body{
                 }
 
                 .heading {
-                    .font-style;
+                    .font-style();
                     margin: 0;
                     font-size: 20px;
                     font-weight: normal;
@@ -2013,12 +2013,12 @@ body{
             }
 
             .btn-toggle-services {
-                .faux-select;
+                .faux-select();
             }
         }
 
         .inner-right {
-            .flex-row;
+            .flex-row();
 
             a{
                 border:none;
@@ -2035,22 +2035,22 @@ body{
             }
             
             .btn-help {
-                .circle-style;
+                .circle-style();
                 margin-left: 15px;
                 font-size:28px;
             }
             
             .btn-toggle-orgs {
-                .btn-reset;
-                .circle-style;
+                .btn-reset();
+                .circle-style();
                 margin-left: 15px;
             }
             
             .btn-toggle-story {
-                .faux-select;
+                .faux-select();
 
                 .story-name {
-                    .ellipsis;
+                    .ellipsis();
                     text-transform: none;
                     font-size: 17px;
                     max-width: 220px;
@@ -2058,7 +2058,7 @@ body{
             }
 
             .btn-logout {
-                .btn-reset;
+                .btn-reset();
                 padding: 10px 0px;
                 font-size: 14px;
             }
@@ -2079,7 +2079,7 @@ body{
             box-sizing: border-box;
 
             .service-menu-heading {
-                .secondary-font-style;
+                .secondary-font-style();
                 font-size: @fontSizeDefault;
                 text-transform: uppercase;
                 color: #b1b1b1;
@@ -2104,7 +2104,7 @@ body{
                     }
 
                     a {
-                        .anchor;
+                        .anchor();
                         display: flex;
                         align-items: center;
                         color: white;
@@ -2165,14 +2165,14 @@ body{
             color: white
         }
         .orgs-menu-active-org {
-            .font-style;
-            .flex-row;
+            .font-style();
+            .flex-row();
             padding: 10px;
             border-bottom: 1px solid @defaultBorderColor;
             background-color: @defaultBorderColor;
 
             .active-first-char {
-                .circle-style;
+                .circle-style();
                 width: 40px;
                 height: 40px;
                 font-size: 18px;
@@ -2184,7 +2184,7 @@ body{
             color: white;
         }
         .menu-item, .react-select__option {
-            .btn-reset;
+            .btn-reset();
             width: 100%;
             padding: 10px;
             font-size: 12px;
@@ -2194,12 +2194,12 @@ body{
                 background-color: #494949
             }
             .inactive-first-char {
-               .circle-style;
+               .circle-style();
                margin-right: 10px;
             }
 
             &.inactive-org-button {
-                .flex-row;
+                .flex-row();
                 box-sizing: border-box;
                 padding: 10px;
             }
@@ -2210,13 +2210,13 @@ body{
         }
 
         .orgs-menu-footer {
-            .flex-row;
+            .flex-row();
             justify-content: space-between;
             border-top: 1px solid @defaultBorderColor;
 
             .email {
-                .secondary-font-style;
-                .ellipsis;
+                .secondary-font-style();
+                .ellipsis();
                 color: #b1b1b1;
                 font-size: 12px;
                 text-transform: lowercase;
@@ -2224,7 +2224,7 @@ body{
             }
 
             .btn-logout {
-                .btn-reset;
+                .btn-reset();
                 font-size: 12px;
                 padding: 10px 15px;
             }
@@ -2259,10 +2259,10 @@ body{
 .modal{
 	
 	z-index:10000;
-	.layer;
+	.layer();
 
 	.modal-bg{
-		.layer;
+		.layer();
 		background: fadeout(@backgroundDark, 20%);
 	}
 
@@ -2327,7 +2327,7 @@ body{
 
 .media-player{
 
-	.layer;
+	.layer();
 
 	.inner-viewer{
 		position:absolute;
@@ -2336,7 +2336,7 @@ body{
 			width:100%;
 			height:100%;
 			outline:1px solid darken(@backgroundDark, 10%);
-			.chess
+			.chess()
 		}
 
 		video{
@@ -2600,7 +2600,7 @@ body{
 @headerPadding:2px;
 
 .section{
-	.layer;
+	.layer();
 
 	.section-header{
 		background:lighten(@backgroundLight, 10%);
@@ -2659,7 +2659,7 @@ body{
 	}
 
 	.section-content{
-		.layer;
+		.layer();
 		top:@sectionHeaderHeight;
 		height:calc(100% - @sectionHeaderHeight);
 		padding:@sectionPadding;
@@ -2760,7 +2760,7 @@ body{
 
 .static-composition-editor{
 
-	.layer;
+	.layer();
 
 	.composition-config{
 		position: absolute;
@@ -2775,14 +2775,14 @@ body{
 	}
 
 	.composition-preview{
-		.layer;
+		.layer();
 		left:@compConfigWidth;
 		width:calc(100% - @compConfigWidth);
 	}
 }
 
 .static-composition-renderer{
-	.layer;
+	.layer();
 	font-family:'Arial';
 	border:2px solid @backgroundLight;
 }
@@ -2794,7 +2794,7 @@ body{
 
 .composition-text-layer{
 	will-change:transform;
-	.layer;
+	.layer();
 
 	.inner-text{
 		display: inline-block;
@@ -2962,7 +2962,7 @@ body{
 
 .story-viewer{
     
-    .layer;
+    .layer();
     
     background:@backgroundDark;
 
@@ -2978,7 +2978,7 @@ body{
     }
     
     .log{
-        .layer;
+        .layer();
         overflow-y: scroll;
         padding:10px;
         box-sizing:border-box;
@@ -3018,7 +3018,7 @@ body{
         width:calc(100% - @storyViewerVarWidth);
 
         .content-header{
-            .layer;
+            .layer();
             box-sizing: border-box;
             padding-top:4px;
             padding-left:4px;
@@ -3054,7 +3054,7 @@ body{
         }
 
         .content-wrapper{
-            .layer;
+            .layer();
             background-color: rgb(35,35,35);
             top:@storyViewerHeaderHeight;
             height:calc(100% - @storyViewerHeaderHeight);
@@ -3067,7 +3067,7 @@ body{
 @tabWidth:80px;
 
 .tabs{
-    .layer;
+    .layer();
     .tab-header{
         white-space: nowrap;
         position: absolute;
@@ -3113,12 +3113,12 @@ body{
     }
     .tab-content{
         overflow-y: auto;
-        .layer;
+        .layer();
         top:@tabHeight;
         height:calc(100% - @tabHeight);
 
         .tab-content-wrapper{
-            .layer;
+            .layer();
         }
     }
 }

package/less/components/assets.less

@@ -216,7 +216,7 @@
         align-items: center;
 
         .jump-to-page {
-            .inputMixin;
+            .inputMixin();
             width: 30px;
             margin: 0 3px;
         }
@@ -407,7 +407,7 @@
     background-color: @background;
 
     &.transparent {
-        .chess;
+        .chess();
     }
 
     &.hidden {

package/less/components/auth-gate.less

@@ -1,5 +1,5 @@
 .auth-gate {
-  .layer;
+  .layer();
   display: flex;
   align-items: center;
   justify-content: center;

package/less/components/data-table.less

@@ -161,7 +161,7 @@
     }
 
     .ip-table-loader {
-        .layer;
+        .layer();
         display: flex;
         align-items: center;
         justify-content: center;
@@ -213,7 +213,7 @@
         }
         
         .paginator-input {
-            .inputMixin;
+            .inputMixin();
             width: 60px;
         }
 

package/less/components/determinate-loader.less

@@ -6,7 +6,7 @@
     border-radius: 5px;
 
     .progress-bg {
-        .layer;
+        .layer();
         background-color: @backgroundHighlight;
         transform-origin: left;
         border-radius: 5px;
@@ -14,7 +14,7 @@
     }
 
     .progress-copy {
-        .layer;
+        .layer();
         text-align: center;
         line-height: 20px;
         border-radius: 5px;

package/less/components/font-preview.less

@@ -1,6 +1,6 @@
 
 .font-preview{
-	.layer;
+	.layer();
 	text-align: center;
 	background: white;
 	color:black;