@imposium-hub/components 1.45.5 → 1.46.0

package/src/components/auth-gate/AuthGate.tsx

@@ -8,23 +8,23 @@ import { login } from '../../redux/actions/auth';
 import { cacheAccessData } from '../../redux/actions/access';
 
 interface IAuthGateProps {
-    auth0ClientId : string;
-    auth0Hash : string;
-    onAuthenticated : () => any;
-    baseUrl? : string;
-    login : (id : IIdentity) => any;
-    cacheAccessData : (accessData : any) => any;
+    auth0ClientId: string;
+    auth0Hash: string;
+    onAuthenticated: () => any;
+    baseUrl?: string;
+    login: (id: IIdentity) => any;
+    cacheAccessData: (accessData: any) => any;
 }
 
 class AuthGate extends React.PureComponent<IAuthGateProps> {
-    private static readonly LOADER_COLOR : string = '#2d8ceb';
+    private static readonly LOADER_COLOR: string = '#2d8ceb';
 
-    constructor(p : IAuthGateProps) {
+    constructor(p: IAuthGateProps) {
         super(p);
     }
 
-    public componentDidMount = () : void => {
-        const {auth0ClientId, auth0Hash, onAuthenticated, baseUrl} = this.props;
+    public componentDidMount = (): void => {
+        const { auth0ClientId, auth0Hash, onAuthenticated, baseUrl } = this.props;
 
         AuthService.bindToClient(auth0ClientId);
 
@@ -32,9 +32,9 @@ class AuthGate extends React.PureComponent<IAuthGateProps> {
             AuthService.login();
         } else {
             AuthService.parseIdFromHash(auth0Hash)
-                .then((freshIdentity : IIdentity) => {
+                .then((freshIdentity: IIdentity) => {
                     SessionService.getAccessData(freshIdentity.idToken, baseUrl)
-                        .then((freshAccess : any) => {
+                        .then((freshAccess: any) => {
                             this.props.login(freshIdentity);
                             this.props.cacheAccessData(freshAccess);
                             SessionService.buildFreshSession(freshIdentity, freshAccess);
@@ -48,21 +48,25 @@ class AuthGate extends React.PureComponent<IAuthGateProps> {
                     AuthService.login();
                 });
         }
-    }
+    };
 
-    public render = () : JSX.Element => {
+    public render = (): JSX.Element => {
         return (
             <div className='auth-gate'>
                 <ScaleLoader color={AuthGate.LOADER_COLOR} />
             </div>
         );
-    }
+    };
 }
 
 const mapDispatchToProps = (dispatch) => {
-    return bindActionCreators({
-        login, cacheAccessData
-    }, dispatch);
+    return bindActionCreators(
+        {
+            login,
+            cacheAccessData
+        },
+        dispatch
+    );
 };
 
 export default connect(null, mapDispatchToProps)(AuthGate);

package/src/components/button/Button.stories.tsx

@@ -7,195 +7,154 @@ export default { title: 'Button' };
 
 const handleClick = action('button-click');
 
-export const sizes = () =>
-<>
-    <Button
-        onClick = {handleClick}>
-        Default
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}>
-        {ICON_PLUS}
-    </Button>
-    <br/><br/>
-    <Button
-        onClick = {handleClick}
-        size  = 'large'>
-        Large
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        size  = 'large'>
-        {ICON_PLUS}
-    </Button>
-</>;
+export const sizes = () => (
+    <>
+        <Button onClick={handleClick}>Default</Button>
+        &nbsp;
+        <Button onClick={handleClick}>{ICON_PLUS}</Button>
+        <br />
+        <br />
+        <Button onClick={handleClick} size='large'>
+            Large
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} size='large'>
+            {ICON_PLUS}
+        </Button>
+    </>
+);
 
-export const styles = () =>
-<>
-      <Button
-          onClick = {handleClick}>
-          Default
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}>
-        {ICON_PLUS}
-    </Button>
-      <br/><br/>
-    <Button
-        onClick = {handleClick}
-        style = 'subtle'>
-        Subtle
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        style = 'subtle'>
-        {ICON_PLUS}
-    </Button>
-    <br/><br/>
-    <Button
-        onClick = {handleClick}
-        style = 'bold'>
-        Bold
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        style = 'bold'>
-        {ICON_PLUS}
-    </Button>
-</>;
+export const styles = () => (
+    <>
+        <Button onClick={handleClick}>Default</Button>
+        &nbsp;
+        <Button onClick={handleClick}>{ICON_PLUS}</Button>
+        <br />
+        <br />
+        <Button onClick={handleClick} style='subtle'>
+            Subtle
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} style='subtle'>
+            {ICON_PLUS}
+        </Button>
+        <br />
+        <br />
+        <Button onClick={handleClick} style='bold'>
+            Bold
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} style='bold'>
+            {ICON_PLUS}
+        </Button>
+    </>
+);
 
-export const colors = () =>
-<>
-    <p>Default</p>
-    <Button
-        onClick = {handleClick}>
-        {ICON_PLUS}
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        style = 'subtle'>
-        {ICON_PLUS}
-        </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        style = 'bold'>
-        {ICON_PLUS}
-        </Button>
-    <br/><br/>
-    <p>Primary</p>
-    <Button
-        onClick = {handleClick}
-        color = 'primary'>
-        {ICON_PLUS}
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        color = 'primary' style = 'subtle'>
-        {ICON_PLUS}
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        color = 'primary' style = 'bold'>
-        {ICON_PLUS}
-    </Button>
-    <br/><br/>
-    <p>Secondary</p>
-    <Button
-        onClick = {handleClick}
-        color = 'secondary'>
-        {ICON_PLUS}
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        color = 'secondary' style = 'subtle'>
-        {ICON_PLUS}
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        color = 'secondary' style = 'bold'>
-        {ICON_PLUS}
-    </Button>
-    <br/><br/>
-    <p>Danger</p>
-    <Button
-        onClick = {handleClick}
-        color = 'danger'>
-        {ICON_PLUS}
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        color = 'danger' style = 'subtle'>
-        {ICON_PLUS}
-    </Button>
-    &nbsp;
-    <Button
-        onClick = {handleClick}
-        color = 'danger' style = 'bold'>
-        {ICON_PLUS}
-    </Button>
-    <br/><br/>
-</>;
+export const colors = () => (
+    <>
+        <p>Default</p>
+        <Button onClick={handleClick}>{ICON_PLUS}</Button>
+        &nbsp;
+        <Button onClick={handleClick} style='subtle'>
+            {ICON_PLUS}
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} style='bold'>
+            {ICON_PLUS}
+        </Button>
+        <br />
+        <br />
+        <p>Primary</p>
+        <Button onClick={handleClick} color='primary'>
+            {ICON_PLUS}
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} color='primary' style='subtle'>
+            {ICON_PLUS}
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} color='primary' style='bold'>
+            {ICON_PLUS}
+        </Button>
+        <br />
+        <br />
+        <p>Secondary</p>
+        <Button onClick={handleClick} color='secondary'>
+            {ICON_PLUS}
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} color='secondary' style='subtle'>
+            {ICON_PLUS}
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} color='secondary' style='bold'>
+            {ICON_PLUS}
+        </Button>
+        <br />
+        <br />
+        <p>Danger</p>
+        <Button onClick={handleClick} color='danger'>
+            {ICON_PLUS}
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} color='danger' style='subtle'>
+            {ICON_PLUS}
+        </Button>
+        &nbsp;
+        <Button onClick={handleClick} color='danger' style='bold'>
+            {ICON_PLUS}
+        </Button>
+        <br />
+        <br />
+    </>
+);
 
-export const loading = () =>
-<>
-    <Button
-        onClick = {handleClick}
-        color = 'primary'
-        size = 'large'
-        loading = {true}>
-        Loading
-    </Button>
-</>;
+export const loading = () => (
+    <>
+        <Button onClick={handleClick} color='primary' size='large' loading={true}>
+            Loading
+        </Button>
+    </>
+);
 
-export const tooltips = () =>
-<>
-    <Button
-        onClick = {handleClick}
-        tooltip  = 'This is a default tooltip, automatically positioned'
-        color = 'primary'
-        size = 'large'>
-        Default
-    </Button>
-    <br/>
-    <Button
-        onClick = {handleClick}
-        customStyles = {{
-            marginLeft: '300px'
-        }}
-        tooltip  = {{
-            content : 'This is a custom tooltip, dark theme, left',
-            position : 'left',
-            theme: 'dark'
-        }}
-        color = 'primary'
-        size = 'large'>
-        Custom 1
-    </Button>
-    <br/>
-    <Button
-        onClick = {handleClick}
-        customStyles = {{
-            marginLeft: '200px'
-        }}
-        tooltip  = {{
-            content : 'This is another custom tooltip, bottom',
-            position : 'bottom'
-        }}
-        color = 'primary'
-        size = 'large'>
-        Custom 2
-    </Button>
-    <br/>
-</>;
+export const tooltips = () => (
+    <>
+        <Button
+            onClick={handleClick}
+            tooltip='This is a default tooltip, automatically positioned'
+            color='primary'
+            size='large'>
+            Default
+        </Button>
+        <br />
+        <Button
+            onClick={handleClick}
+            customStyles={{
+                marginLeft: '300px'
+            }}
+            tooltip={{
+                content: 'This is a custom tooltip, dark theme, left',
+                position: 'left',
+                theme: 'dark'
+            }}
+            color='primary'
+            size='large'>
+            Custom 1
+        </Button>
+        <br />
+        <Button
+            onClick={handleClick}
+            customStyles={{
+                marginLeft: '200px'
+            }}
+            tooltip={{
+                content: 'This is another custom tooltip, bottom',
+                position: 'bottom'
+            }}
+            color='primary'
+            size='large'>
+            Custom 2
+        </Button>
+        <br />
+    </>
+);

package/src/components/button/Button.tsx

@@ -4,49 +4,51 @@ import { renderTooltipProps, renderTooltip, IToolTipConfig } from '../Tooltip';
 import { ICON_CIRCLE_NOTCH } from '../../constants/icons';
 
 interface IButtonProps {
-    active? : boolean;
-    buttonRef? : any;
-    children? : any;
-    color? : string;
-    customStyles? : any;
-    size? : string;
-    style? : string;
-    disabled? : boolean;
-    loading? : boolean;
-    width? : string;
-    tooltip? : IToolTipConfig | string;
-    onClick?(e : any) : void;
+    active?: boolean;
+    buttonRef?: any;
+    children?: any;
+    color?: string;
+    customStyles?: any;
+    size?: string;
+    style?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    width?: string;
+    tooltip?: IToolTipConfig | string;
+    onClick?(e: any): void;
 }
 
 class Button extends React.PureComponent<IButtonProps> {
-
-    private tooltipId : string;
+    private tooltipId: string;
 
     constructor(props) {
-
         super(props);
 
         this.tooltipId = `imposium-button-${generateUUID()}`;
     }
 
     private onClick(e) {
-
         if (this.props.onClick && !this.props.loading) {
             this.props.onClick(e);
         }
     }
 
     public render() {
+        let { style, color, size, customStyles } = this.props;
+        const { width, loading, tooltip } = this.props;
+        const { active, disabled, buttonRef } = this.props;
+        const activeClass = active ? 'active' : '';
+        const disabledClass = disabled ? 'disabled' : '';
 
-        let {style, color, size, customStyles} = this.props;
-        const {width, loading, tooltip} = this.props;
-        const {active, disabled, buttonRef} = this.props;
-        const activeClass = (active) ? 'active' : '';
-        const disabledClass = (disabled) ? 'disabled' : '';
-
-        if (!size) { size = ''; }
-        if (!style) { style = 'default'; }
-        if (!color) { color = ''; }
+        if (!size) {
+            size = '';
+        }
+        if (!style) {
+            style = 'default';
+        }
+        if (!color) {
+            color = '';
+        }
         if (width) {
             if (customStyles) {
                 customStyles['width'] = width;
@@ -57,19 +59,23 @@ class Button extends React.PureComponent<IButtonProps> {
             }
         }
 
-        const kids = (!loading)
-            ? this.props.children
-            : <span className = 'loading-icon'>{ICON_CIRCLE_NOTCH}</span>;
+        const kids = !loading ? (
+            this.props.children
+        ) : (
+            <span className='loading-icon'>{ICON_CIRCLE_NOTCH}</span>
+        );
 
-        const content = <div
-            {...renderTooltipProps(this.tooltipId, tooltip)}
-            ref = {buttonRef}
-            className = {`imposium-btn btn-${style} ${size} ${color} ${activeClass} ${disabledClass}`}
-            onClick = {(e) => this.onClick(e)}
-            style = {customStyles}>
-            {kids}
-            {renderTooltip(this.tooltipId, tooltip)}
-        </div>;
+        const content = (
+            <div
+                {...renderTooltipProps(this.tooltipId, tooltip)}
+                ref={buttonRef}
+                className={`imposium-btn btn-${style} ${size} ${color} ${activeClass} ${disabledClass}`}
+                onClick={(e) => this.onClick(e)}
+                style={customStyles}>
+                {kids}
+                {renderTooltip(this.tooltipId, tooltip)}
+            </div>
+        );
 
         return content;
     }

package/src/components/button-group-field/ButtonGroupField.stories.tsx

@@ -1,34 +1,12 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import ButtonGroupField from './ButtonGroupField';
-import { IToolTipConfig,  } from '../Tooltip';
 
 export default {
     title: 'ButtonGroupField',
-    component: ButtonGroupField,
+    component: ButtonGroupField
 };
 
-// Interfaces For Reference
-interface IButtonGroupOption {
-    value : string | boolean;
-    label : string;
-    bgColor? : string;
-    icon? : JSX.Element;
-    onDoubleClick? : (...args) => any;
-    tooltip? : IToolTipConfig | string;
-}
-
-interface IButtonGroupFieldProps {
-    label? : string;
-    width? : string | number;
-    value : string;
-    options : IButtonGroupOption[];
-    tooltip? : IToolTipConfig | string;
-    onChange(e) : void;
-    info? : string;
-    labelPosition? : string;
-}
-
 const OVERLAY_ENGINE_TYPES = {
     CHROMIUM: 'chromium',
     PHANTOM: ''
@@ -47,13 +25,13 @@ const SAMPLE_OPTIONS = [
 
 export const defaultField = () => (
     <ButtonGroupField
-        label = 'Button Group'
-        width = {'300px'}
-        value = 'Default Value'
-        options = {SAMPLE_OPTIONS}
-        tooltip = 'ButtonGroupField Tooltip'
-        onChange = {action('Field onChange')}
-        info = 'This is some additional information about the field'
-        labelPosition = 'center'
-        />
+        label='Button Group'
+        width={'300px'}
+        value='Default Value'
+        options={SAMPLE_OPTIONS}
+        tooltip='ButtonGroupField Tooltip'
+        onChange={action('Field onChange')}
+        info='This is some additional information about the field'
+        labelPosition='center'
+    />
 );