@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/checkbox-field/CheckboxField.stories.tsx

@@ -1,19 +1,6 @@
 import * as React from 'react';
-import {useState} from 'react';
+import { useState } from 'react';
 import CheckBoxField from './CheckboxField';
-import { IToolTipConfig } from '../Tooltip';
-
-// Interface For Reference
-interface ICheckboxFieldProps {
-    label? : string;
-    value : boolean;
-    width? : string | number;
-    tooltip? : IToolTipConfig | string;
-    propagate ? : boolean;
-    onChange(v, e) : void;
-    info? : string;
-    labelPosition? : string;
-}
 
 export default {
     title: 'CheckBoxField',
@@ -25,10 +12,11 @@ export const defaultCheckboxField = () => {
 
     return (
         <CheckBoxField
-            width = {'300px'}
-            label = {'Checkbox Field'}
-            tooltip = {'TOOLTIP'}
-            value = {clicked}
-            onChange = {() => setClicked(!clicked)}/>
+            width={'300px'}
+            label={'Checkbox Field'}
+            tooltip={'TOOLTIP'}
+            value={clicked}
+            onChange={() => setClicked(!clicked)}
+        />
     );
 };

package/src/components/checkbox-field/CheckboxField.tsx

@@ -4,20 +4,18 @@ import { IToolTipConfig } from '../Tooltip';
 import { ICON_CHECK } from '../../constants/icons';
 
 interface ICheckboxFieldProps {
-    label? : string;
-    value : boolean;
-    width? : string | number;
-    tooltip? : IToolTipConfig | string;
-    propagate ? : boolean;
-    onChange(v, e) : void;
-    info? : string;
-    labelPosition? : string;
+    label?: string;
+    value: boolean;
+    width?: string | number;
+    tooltip?: IToolTipConfig | string;
+    propagate?: boolean;
+    onChange(v, e): void;
+    info?: string;
+    labelPosition?: string;
 }
 
 class CheckboxField extends React.PureComponent<ICheckboxFieldProps> {
-
     constructor(props) {
-
         super(props);
     }
 
@@ -29,21 +27,22 @@ class CheckboxField extends React.PureComponent<ICheckboxFieldProps> {
     }
 
     public render() {
-
-        const {value, label, width, tooltip, info, labelPosition} = this.props;
-        const icon = (value === true) ? ICON_CHECK : null;
-
-        return <FieldWrapper
-            customClass = 'checkbox-field'
-            label = {label}
-            tooltip = {tooltip}
-            info = {info}
-            labelPosition = {labelPosition}
-            width = {width}>
-            <div className = 'checkbox' onClick = {(e) => this.toggle(e)}>
-                {icon}
-            </div>
-        </FieldWrapper>;
+        const { value, label, width, tooltip, info, labelPosition } = this.props;
+        const icon = value === true ? ICON_CHECK : null;
+
+        return (
+            <FieldWrapper
+                customClass='checkbox-field'
+                label={label}
+                tooltip={tooltip}
+                info={info}
+                labelPosition={labelPosition}
+                width={width}>
+                <div className='checkbox' onClick={(e) => this.toggle(e)}>
+                    {icon}
+                </div>
+            </FieldWrapper>
+        );
     }
 }
 

package/src/components/color-field/ColorField.tsx

@@ -4,37 +4,35 @@ import { IToolTipConfig } from '../Tooltip';
 import { SketchPicker } from 'react-color';
 
 interface IColorFieldProps {
-    buttons? : any;
-    label? : string;
-    placeholder? : string;
-    readOnly? : boolean;
-    value : string;
-    tooltip? : IToolTipConfig | string;
-    enableAlpha? : boolean;
-    presetColors? : any[];
-    width? : string | number;
-    onChange(e) : void;
-    info? : string;
-    labelPosition? : string;
-    pickerPosition? : string;
+    buttons?: any;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value: string;
+    tooltip?: IToolTipConfig | string;
+    enableAlpha?: boolean;
+    presetColors?: any[];
+    width?: string | number;
+    onChange(e): void;
+    info?: string;
+    labelPosition?: string;
+    pickerPosition?: string;
 }
 
 interface IColorFieldState {
-    pickerOpen : boolean;
+    pickerOpen: boolean;
 }
 
 class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState> {
-
-    private clickOutsideHandler : any;
-    private picker : any;
+    private clickOutsideHandler: any;
+    private picker: any;
     private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center`;
 
     constructor(props) {
-
         super(props);
 
         this.state = {
-            pickerOpen : false
+            pickerOpen: false
         };
 
         this.picker = React.createRef();
@@ -43,25 +41,26 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
     }
 
     private togglePicker(e) {
-
         e.preventDefault();
         e.stopPropagation();
 
         const newState = !this.state.pickerOpen;
 
-        this.setState({
-            pickerOpen: newState
-        }, () => {
-            if (this.state.pickerOpen) {
-                document.addEventListener('click', this.clickOutsideHandler);
-            } else {
-                document.removeEventListener('click', this.clickOutsideHandler);
+        this.setState(
+            {
+                pickerOpen: newState
+            },
+            () => {
+                if (this.state.pickerOpen) {
+                    document.addEventListener('click', this.clickOutsideHandler);
+                } else {
+                    document.removeEventListener('click', this.clickOutsideHandler);
+                }
             }
-        });
+        );
     }
 
     private handleClickOutside(e) {
-
         let targetElement = e.target;
         const ref = this.picker.current;
 
@@ -80,52 +79,63 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
     }
 
     private handleChangeComplete(color, e) {
-
         return this.props.onChange(color);
     }
 
     public render() {
-
-        const {label, placeholder, width, readOnly, buttons, tooltip, value, enableAlpha, presetColors, info, labelPosition, pickerPosition} = this.props;
+        const {
+            label,
+            width,
+            buttons,
+            tooltip,
+            value,
+            enableAlpha,
+            presetColors,
+            info,
+            labelPosition,
+            pickerPosition
+        } = this.props;
         const { pickerOpen } = this.state;
         const disableAlpha = !enableAlpha;
         const pickerPos = pickerPosition || 'left';
 
-        const picker = (pickerOpen) ? <SketchPicker
-                color={ value }
-                disableAlpha = {disableAlpha}
-                presetColors = {presetColors}
-                onChangeComplete={ (c, e) => this.handleChangeComplete(c, e) }/> : null;
+        const picker = pickerOpen ? (
+            <SketchPicker
+                color={value}
+                disableAlpha={disableAlpha}
+                presetColors={presetColors}
+                onChangeComplete={(c, e) => this.handleChangeComplete(c, e)}
+            />
+        ) : null;
 
         let swatchStyle;
         if (value === 'transparent') {
-
             swatchStyle = {
                 background: this.transparentBg,
                 border: '1px solid #1d1d1d',
                 boxSizing: 'border-box'
             };
-
         } else {
-
             swatchStyle = {
                 backgroundColor: value
             };
         }
 
-        return <FieldWrapper
-            customClass = 'color-field'
-            label = {label}
-            tooltip = {tooltip}
-            buttons = {buttons}
-            info = {info}
-            labelPosition = {labelPosition}
-            width = {width}>
-            <div className = 'swatch' style = {swatchStyle} onClick = {(e) => this.togglePicker(e)}/>
-            <div className = {`picker picker-${pickerPos}`} ref = {this.picker}>
-                {picker}
-            </div>
-        </FieldWrapper>;
+        return (
+            <FieldWrapper
+                customClass='color-field'
+                label={label}
+                tooltip={tooltip}
+                buttons={buttons}
+                info={info}
+                labelPosition={labelPosition}
+                width={width}>
+                <div className='swatch' style={swatchStyle} onClick={(e) => this.togglePicker(e)} />
+                <div className={`picker picker-${pickerPos}`} ref={this.picker}>
+                    {picker}
+                </div>
+            </FieldWrapper>
+        );
     }
 }
 

package/src/components/color-field/ColorFiled.stories.tsx

@@ -2,38 +2,22 @@ import * as React from 'react';
 import { useState } from 'react';
 import ColorField from './ColorField';
 import { action } from '@storybook/addon-actions';
-import { IToolTipConfig } from '../Tooltip';
 
 export default {
     title: 'ColorField',
     component: ColorField
 };
 
-// Interface For Reference
-interface IColorFieldProps {
-    buttons? : any;
-    label? : string;
-    placeholder? : string;
-    readOnly? : boolean;
-    value : string;
-    tooltip? : IToolTipConfig | string;
-    enableAlpha? : boolean;
-    presetColors? : any[];
-    width? : string | number;
-    onChange(e) : void;
-    info? : string;
-    labelPosition? : string;
-}
-
 export const defaultColorField = () => {
-    const [color, setColor] = useState('red');
+    const [color] = useState('red');
 
     return (
         <ColorField
-            label = {'Color Field'}
-            tooltip = {'TOOLTIP'}
-            width = {'300px'}
-            value = {color}
-            onChange = {action('CHANGED')}/>
+            label={'Color Field'}
+            tooltip={'TOOLTIP'}
+            width={'300px'}
+            value={color}
+            onChange={action('CHANGED')}
+        />
     );
 };

package/src/components/compositions/TextLayer.tsx

@@ -1,26 +1,23 @@
-
 import * as React from 'react';
 import { ASSET_DISTRO, ASSET_ORIGIN } from '../../constants/assets';
-import { ITextLayer, FONT_TYPES} from '../../constants/compositions';
+import { ITextLayer, FONT_TYPES } from '../../constants/compositions';
 import { s3Url } from '../../Util';
 
 interface ITextLayerProps {
-    inventory? : any;
-    onReady?() : void;
-    options : ITextLayer;
+    inventory?: any;
+    onReady?(): void;
+    options: ITextLayer;
 }
 
 interface ITextLayerState {
-    fontLoaded : boolean;
-    fontError : boolean;
+    fontLoaded: boolean;
+    fontError: boolean;
 }
 
 export default class TextLayer extends React.PureComponent<ITextLayerProps, ITextLayerState> {
-
-    private innerTextRef : any;
+    private innerTextRef: any;
 
     constructor(props) {
-
         super(props);
 
         this.state = {
@@ -32,17 +29,19 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
     }
 
     public componentDidMount() {
-
         this.loadFont();
     }
 
     public componentDidUpdate(prevProps) {
-
-        const {fontLoaded} = this.state;
-        const {options: {font, custom_font_id, content}} = this.props;
-
-        if (prevProps.options.font !== font ||
-            prevProps.options.custom_font_id !== custom_font_id) {
+        const { fontLoaded } = this.state;
+        const {
+            options: { font, custom_font_id, content }
+        } = this.props;
+
+        if (
+            prevProps.options.font !== font ||
+            prevProps.options.custom_font_id !== custom_font_id
+        ) {
             this.loadFont();
         }
 
@@ -52,7 +51,6 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
     }
 
     private fitElement(element, targWidth, targHeight) {
-
         const computedStyle = window.getComputedStyle(element, null);
 
         let fSize = parseFloat(computedStyle.getPropertyValue('font-size'));
@@ -68,7 +66,6 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
         let h = element.offsetHeight;
 
         while (w > targWidth || h > targHeight) {
-
             fSize--;
             lSpace = Math.round(fSize * lSpaceRatio);
             lHeight = Math.round(fSize * lHeightRatio);
@@ -85,11 +82,11 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
     }
 
     private loadFont() {
-
-        const {options: {font, font_size, font_type, custom_font_url}} = this.props;
+        const {
+            options: { font, font_size, font_type, custom_font_url }
+        } = this.props;
 
         if (font_type === FONT_TYPES.CUSTOM && font_size && custom_font_url) {
-
             const fontOrigin = s3Url(custom_font_url, ASSET_DISTRO, ASSET_ORIGIN);
             let fontLoaded = false;
             // Not sure why you need to pass the size in here, but .check() throws an error without it.
@@ -100,33 +97,41 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
             }
 
             if (!fontLoaded) {
-                this.setState({
-                    fontLoaded: false
-                }, () => {
-                    const fontObj = new FontFace(font, `url(${fontOrigin})`, { style: 'normal', weight: 'normal' });
-                    fontObj.load().then((e) => {
-                        const fonts : any = document.fonts; // to get rid of "Property 'add' does not exist on type 'FontFaceSet'." TSC error.
-                        fonts.add(fontObj);
-                        this.fontReady();
-                    }).catch((e) => {
-                        this.errorLoadingFont();
-                    });
-                });
-
+                this.setState(
+                    {
+                        fontLoaded: false
+                    },
+                    () => {
+                        const fontObj = new FontFace(font, `url(${fontOrigin})`, {
+                            style: 'normal',
+                            weight: 'normal'
+                        });
+                        fontObj
+                            .load()
+                            .then((e) => {
+                                const fonts: any = document.fonts; // to get rid of "Property 'add' does not exist on type 'FontFaceSet'." TSC error.
+                                fonts.add(fontObj);
+                                this.fontReady();
+                            })
+                            .catch((e) => {
+                                this.errorLoadingFont();
+                            });
+                    }
+                );
             } else {
                 this.fontReady();
             }
-
         } else if (font_type === FONT_TYPES.STANDARD) {
-
             // TODO: check this?
             this.fontReady();
         }
     }
 
-    private formatContent() : any[] {
-
-        const {options: {content}, inventory} = this.props;
+    private formatContent(): any[] {
+        const {
+            options: { content },
+            inventory
+        } = this.props;
         let contentStr = content || '';
 
         if (inventory) {
@@ -146,16 +151,15 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
         const pieces = contentStr.split('\n');
         const sections = [];
         for (let i = 0; i < pieces.length; i++) {
-            sections.push(<span key = {`s-${i}`}>{pieces[i]}</span>);
+            sections.push(<span key={`s-${i}`}>{pieces[i]}</span>);
             if (pieces[i + 1]) {
-                sections.push(<br key = {`b-${i}`}/>);
+                sections.push(<br key={`b-${i}`} />);
             }
         }
         return sections;
     }
 
     private fitText() {
-
         if (this.props.options.text_fit) {
             const text = this.innerTextRef.current;
             if (text) {
@@ -165,49 +169,67 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
     }
 
     private errorLoadingFont() {
-
-        this.setState({
-            fontError: true
-        }, () => {
-            this.fontReady();
-        });
+        this.setState(
+            {
+                fontError: true
+            },
+            () => {
+                this.fontReady();
+            }
+        );
     }
 
     private fontReady() {
-
-        this.setState({
-            fontLoaded: true
-        }, () => {
-            this.fitText();
-            if (this.props.onReady) {
-                this.props.onReady();
+        this.setState(
+            {
+                fontLoaded: true
+            },
+            () => {
+                this.fitText();
+                if (this.props.onReady) {
+                    this.props.onReady();
+                }
             }
-        });
+        );
     }
 
     private getFlexStart(hAlign) {
-
         switch (hAlign) {
-            case 'left': return 'flex-start';
-            case 'center': return 'center';
-            case 'right' : return 'flex-end';
+            case 'left':
+                return 'flex-start';
+            case 'center':
+                return 'center';
+            case 'right':
+                return 'flex-end';
         }
     }
 
     public render() {
+        const {
+            options: {
+                color,
+                background_color,
+                line_height,
+                word_spacing,
+                letter_spacing,
+                font_size,
+                font_weight,
+                font,
+                horizontal_alignment,
+                vertical_alignment,
+                text_wrap
+            }
+        } = this.props;
 
-        const {options: {color, background_color, line_height, word_spacing,
-            letter_spacing, font_size, font_weight, font, horizontal_alignment, vertical_alignment, text_wrap}} = this.props;
-
-        const {fontError} = this.state;
+        const { fontError } = this.state;
 
-        const whiteSpace = (text_wrap) ? 'normal' : 'nowrap';
-        const lS = (letter_spacing) ? `${letter_spacing}px` : 'normal';
-        const wS = (word_spacing) ? `${word_spacing}px` : 'normal';
-        const lH = (line_height) ? `${line_height}px` : 'normal';
-        const fS = (font_size) ? `${font_size}px` : '0px';
+        const whiteSpace = text_wrap ? 'normal' : 'nowrap';
+        const lS = letter_spacing ? `${letter_spacing}px` : 'normal';
+        const wS = word_spacing ? `${word_spacing}px` : 'normal';
+        const lH = line_height ? `${line_height}px` : 'normal';
+        const fS = font_size ? `${font_size}px` : '0px';
 
-        const fontWeight : number = (font_weight) ? font_weight : 400;
+        const fontWeight: number = font_weight ? font_weight : 400;
 
         const innerTextStyle = {
             color,
@@ -217,7 +239,7 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
             fontSize: fS,
             fontWeight,
             whiteSpace: whiteSpace as any,
-            fontFamily: (!fontError) ? font : 'Arial, helvetica, sans-serif'
+            fontFamily: !fontError ? font : 'Arial, helvetica, sans-serif'
         };
 
         const wrapperStyle = {
@@ -228,10 +250,12 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
             backgroundColor: background_color as any
         };
 
-        return <div className = 'composition-text-layer' style = {wrapperStyle}>
-            <div className = 'inner-text' style = {innerTextStyle} ref = {this.innerTextRef}>
-                {this.formatContent()}
+        return (
+            <div className='composition-text-layer' style={wrapperStyle}>
+                <div className='inner-text' style={innerTextStyle} ref={this.innerTextRef}>
+                    {this.formatContent()}
+                </div>
             </div>
-        </div>;
+        );
     }
 }

package/src/components/controlled-list/ControlledList.stories.tsx

@@ -8,19 +8,12 @@ export default {
     componenet: ControlledList
 };
 
-// Interface For Reference
-interface IControlledListProps {
-    items? : any[];
-    removable? : boolean;
-    onRemove?(index) : void;
-}
-
 export const ControlledListWithTags = () => (
-    <div style={{width: '8%'}}>
+    <div style={{ width: '8%' }}>
         <ControlledList
-            items = {[<Tag key = {`tag1`} copy = 'Sample Tag' />, <Tag key = {`tag2`} copy = 'Sample Tag' />]}
-            removable = {true}
-            onRemove = {action('REMOVED')}
-            />
+            items={[<Tag key={`tag1`} copy='Sample Tag' />, <Tag key={`tag2`} copy='Sample Tag' />]}
+            removable={true}
+            onRemove={action('REMOVED')}
+        />
     </div>
 );