@imposium-hub/components 2.9.0-9 → 2.10.0-0

package/dist/esm/services/Session.d.ts

@@ -1,26 +0,0 @@
-import { IIdentity } from './Auth0';
-export interface IHubSession {
-    sub: string;
-    organization_id: string;
-    story_id: string;
-}
-export default class SessionService {
-    private static readonly LOGIN_STORY_ID_CACHE;
-    private static readonly LOGIN_ORG_ID_CACHE;
-    private static readonly SESSION_COOKIE_NAME;
-    private static readonly FRESH_COOKIE;
-    static getAccessData: (idToken: string, baseUrl?: string, getTotalRenders?: boolean, accountId?: string) => Promise<any[]>;
-    static getSession: () => IHubSession;
-    static removeSession: () => void;
-    static buildFreshSession: (freshIdentity: IIdentity, orgId?: string, storyId?: string) => void;
-    static storeSession: (values: any, auth0Expiry: number) => void;
-    static cacheOrgId: (organizationId: string) => void;
-    static clearCachedOrgId: () => void;
-    static getCachedOrgId: () => string;
-    static cacheStoryId: (storyId: string) => void;
-    static clearCachedStoryId: () => void;
-    static getCachedStoryId: () => string;
-    static updateSession: (values: any, auth0Expiry: number) => void;
-    private static scrapeDomain;
-    private static determineAccessUrl;
-}

package/dist/esm/services/Session.js

@@ -1,107 +0,0 @@
-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

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

package/src/components/edit-guide-modal/EditGuideModal.tsx

@@ -1,110 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import Modal from '../modal/Modal';
-import Button from '../button/Button';
-import Section from '../section/Section';
-import NumberField from '../number-field/NumberField';
-
-export interface IEditGuideModalProps {
-    guide: number;
-    onClose: () => any;
-    onContinue: (e) => any;
-    isHorizontal: boolean;
-}
-
-export const EditGuideModal = () => {
-    const [props, setProps] = useState<IEditGuideModalProps>(null);
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const [guide, setGuide] = useState<number>(null);
-
-    const onOpen = (event) => {
-        setProps({
-            ...event.detail
-        });
-        setIsOpen(true);
-    };
-
-    const onClose = () => setIsOpen(false);
-
-    useEffect(() => {
-        window.addEventListener('openeditguidemodal', onOpen);
-        return () => {
-            window.removeEventListener('openeditguidemodal', onOpen);
-        };
-    }, []);
-
-    useEffect(() => {
-        if (props?.guide) {
-            setGuide(props.guide);
-        }
-    }, [props?.guide]);
-
-    const onKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            onContinue(guide);
-        }
-    };
-
-    useEffect(() => {
-        if (isOpen) {
-            window.addEventListener('keypress', onKeyDown);
-        } else {
-            window.removeEventListener('keypress', onKeyDown);
-        }
-        return () => {
-            window.removeEventListener('keypress', onKeyDown);
-        };
-    }, [isOpen, onKeyDown]);
-
-    const onContinue = useCallback(
-        (e) => {
-            if (e) {
-                props.onContinue(e);
-                onClose();
-            }
-        },
-        [isOpen]
-    );
-
-    const modal = isOpen && (
-        <Modal
-            onRequestClose={onClose}
-            style={{
-                width: '200px',
-                height: '110px',
-                top: '25%',
-                left: '55%'
-            }}
-            isOpen={true}>
-            <Section
-                title={`Edit ${props.isHorizontal ? 'Horizontal Guide' : 'Vertical Guide'}`}
-                style={{ padding: '10px' }}>
-                <NumberField
-                    label={'Guide Position'}
-                    labelPosition='top'
-                    onChange={(e) => setGuide(Number(e))}
-                    focusOnMount={true}
-                    value={guide}
-                />
-                <Button
-                    onClick={onClose}
-                    style='bold'
-                    color='secondary'>
-                    Cancel
-                </Button>
-                <Button
-                    onClick={() => onContinue(guide)}
-                    style='bold'
-                    color='primary'>
-                    Ok
-                </Button>
-            </Section>
-        </Modal>
-    );
-
-    const PortalContextComponent = () =>
-        ReactDOM.createPortal(modal, document.querySelector('#react-root'));
-
-    return <PortalContextComponent />;
-};

package/src/components/replace-files-modal/ReplaceFilesModal.tsx

@@ -1,217 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import Modal from '../modal/Modal';
-import Button from '../button/Button';
-import CheckboxField from '../checkbox-field/CheckboxField';
-import Section from '../section/Section';
-import { assets as copy } from '../../constants/copy';
-import { replaceFilesModalEvent } from '../../utils/modal';
-
-export interface IReplaceFilesModalProps {
-    onUpload: (f) => any;
-    onInstantUpload: (f) => any;
-    onApplyToAll: (e) => any;
-    onClose: () => void;
-    applyToAll: boolean;
-    existedAssets: any[];
-    existedAssetIds: any[];
-}
-
-export const ReplaceFilesModal = () => {
-    const [props, setProps] = useState<IReplaceFilesModalProps>(null);
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const [applyToAll, setApplyToAll] = useState<boolean>();
-    const [height, setHeight] = useState(200);
-    const [index, setIndex] = useState<number>(0);
-
-    const replaceFileModalRef = useRef(null);
-
-    useEffect(() => {
-        if (replaceFileModalRef.current) {
-            const {
-                current: { clientHeight }
-            } = replaceFileModalRef;
-            setHeight(clientHeight + 40);
-        }
-    });
-
-    const onOpen = (event) => {
-        setProps({
-            ...event.detail
-        });
-        setIsOpen(true);
-    };
-
-    const onClose = () => {
-        props.onClose();
-        setIsOpen(false);
-    };
-
-    const onReplaceHandler = (curApplyToAll, curIndex, file, assetId) => {
-        const newIndex = curIndex + 1;
-
-        if (curApplyToAll && curIndex === 0) {
-            const updatedAssets = props.existedAssets.map((asset, i) => {
-                const updatefile = asset;
-                updatefile['assetId'] = props.existedAssetIds[i];
-                return updatefile;
-            });
-
-            props.onInstantUpload(updatedAssets);
-            setIndex(0);
-            setIsOpen(false);
-        } else if (curApplyToAll) {
-            const updatedAssets = [];
-
-            for (let i = 0; i < props.existedAssets.length; i++) {
-                const updateFile =
-                    curIndex === 0
-                        ? props.existedAssets[i]
-                        : [
-                              ...props.existedAssets.slice(0, curIndex - 1),
-                              ...props.existedAssets.slice(curIndex)
-                          ][i];
-
-                if (updateFile) {
-                    updateFile['assetId'] =
-                        curIndex === 0
-                            ? props.existedAssetIds[i]
-                            : [
-                                  ...props.existedAssetIds.slice(0, curIndex - 1),
-                                  ...props.existedAssetIds.slice(curIndex)
-                              ][i];
-                    updatedAssets.push(updateFile);
-                    props.onInstantUpload(updatedAssets);
-                    setIndex(0);
-                    onClose();
-                }
-            }
-        } else {
-            if (newIndex === props.existedAssets.length) {
-                setIndex(0);
-                onClose();
-            } else {
-                setIndex(newIndex);
-            }
-
-            const updateFile = file;
-            updateFile['assetId'] = assetId;
-            props.onUpload([updateFile]);
-        }
-    };
-
-    const onAsNewHandler = (curApplyToAll, curIndex, file) => {
-        const newIndex = curIndex + 1;
-
-        if (curApplyToAll) {
-            props.onUpload(
-                curIndex === 0 ? props.existedAssets : props.existedAssets.slice(curIndex)
-            );
-
-            setIndex(0);
-            onClose();
-        } else {
-            if (newIndex === props.existedAssets.length) {
-                setIndex(0);
-                onClose();
-            } else {
-                setIndex(newIndex);
-            }
-
-            props.onUpload([file]);
-        }
-    };
-
-    const onApplyToAllHandler = (e) => {
-        setApplyToAll(e);
-        props.onApplyToAll(e);
-    };
-
-    const onReplace = useCallback(
-        (curApplyToAll, curIndex, file, assetId) =>
-            onReplaceHandler(curApplyToAll, curIndex, file, assetId),
-        [isOpen]
-    );
-
-    const onApplyToAll = useCallback((e) => onApplyToAllHandler(e), [isOpen]);
-
-    const onAsNew = useCallback(
-        (curApplyToAll, curIndex, file) => onAsNewHandler(curApplyToAll, curIndex, file),
-        [isOpen]
-    );
-
-    useEffect(() => {
-        window.addEventListener(replaceFilesModalEvent, onOpen);
-        return () => {
-            window.removeEventListener(replaceFilesModalEvent, onOpen);
-        };
-    }, []);
-
-    const modal = () => {
-        if (isOpen) {
-            const file = props.existedAssets[index];
-            const assetId = props.existedAssetIds[index];
-            const name = file.name.slice(0, file.name.lastIndexOf('.'));
-            return (
-                <Modal
-                    onRequestClose={onClose}
-                    wrapperStyle={{
-                        left: '0px',
-                        width: '100%'
-                    }}
-                    style={{
-                        width: '400px',
-                        height: `${height}px`,
-                        top: 'calc(50% - 150px)',
-                        left: 'calc((100% - 400px) / 2)'
-                    }}
-                    isOpen={true}>
-                    <Section>
-                        <div
-                            className='replace-files-modal'
-                            ref={replaceFileModalRef}>
-                            <p>{copy.uploads.title.replace('[name]', name)}</p>
-                            <div className='replace-files-buttons'>
-                                <div className='checkbox'>
-                                    <CheckboxField
-                                        label={copy.uploads.applyAll}
-                                        value={applyToAll}
-                                        onChange={onApplyToAll}
-                                    />
-                                </div>
-                                <div className='buttons'>
-                                    <Button
-                                        onClick={() => onAsNew(applyToAll, index, file)}
-                                        size='large'
-                                        style='bold'
-                                        color='primary'>
-                                        {copy.uploads.keepBoth}
-                                    </Button>
-                                    <Button
-                                        onClick={() => onReplace(applyToAll, index, file, assetId)}
-                                        size='large'
-                                        style='bold'
-                                        color='primary'>
-                                        {copy.uploads.replace}
-                                    </Button>
-                                    <Button
-                                        onClick={onClose}
-                                        size='large'
-                                        style='bold'
-                                        color='default'>
-                                        {copy.uploads.cancelButton}
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-                    </Section>
-                </Modal>
-            );
-        }
-    };
-
-    const PortalContextComponent = () =>
-        ReactDOM.createPortal(modal(), document.querySelector('#react-root'));
-
-    return <PortalContextComponent />;
-};