@imposium-hub/components 1.46.2 → 1.47.0

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

@@ -14,11 +14,15 @@ export const sizes = () => (
         <Button onClick={handleClick}>{ICON_PLUS}</Button>
         <br />
         <br />
-        <Button onClick={handleClick} size='large'>
+        <Button
+            onClick={handleClick}
+            size='large'>
             Large
         </Button>
         &nbsp;
-        <Button onClick={handleClick} size='large'>
+        <Button
+            onClick={handleClick}
+            size='large'>
             {ICON_PLUS}
         </Button>
     </>
@@ -31,20 +35,28 @@ export const styles = () => (
         <Button onClick={handleClick}>{ICON_PLUS}</Button>
         <br />
         <br />
-        <Button onClick={handleClick} style='subtle'>
+        <Button
+            onClick={handleClick}
+            style='subtle'>
             Subtle
         </Button>
         &nbsp;
-        <Button onClick={handleClick} style='subtle'>
+        <Button
+            onClick={handleClick}
+            style='subtle'>
             {ICON_PLUS}
         </Button>
         <br />
         <br />
-        <Button onClick={handleClick} style='bold'>
+        <Button
+            onClick={handleClick}
+            style='bold'>
             Bold
         </Button>
         &nbsp;
-        <Button onClick={handleClick} style='bold'>
+        <Button
+            onClick={handleClick}
+            style='bold'>
             {ICON_PLUS}
         </Button>
     </>
@@ -55,53 +67,81 @@ export const colors = () => (
         <p>Default</p>
         <Button onClick={handleClick}>{ICON_PLUS}</Button>
         &nbsp;
-        <Button onClick={handleClick} style='subtle'>
+        <Button
+            onClick={handleClick}
+            style='subtle'>
             {ICON_PLUS}
         </Button>
         &nbsp;
-        <Button onClick={handleClick} style='bold'>
+        <Button
+            onClick={handleClick}
+            style='bold'>
             {ICON_PLUS}
         </Button>
         <br />
         <br />
         <p>Primary</p>
-        <Button onClick={handleClick} color='primary'>
+        <Button
+            onClick={handleClick}
+            color='primary'>
             {ICON_PLUS}
         </Button>
         &nbsp;
-        <Button onClick={handleClick} color='primary' style='subtle'>
+        <Button
+            onClick={handleClick}
+            color='primary'
+            style='subtle'>
             {ICON_PLUS}
         </Button>
         &nbsp;
-        <Button onClick={handleClick} color='primary' style='bold'>
+        <Button
+            onClick={handleClick}
+            color='primary'
+            style='bold'>
             {ICON_PLUS}
         </Button>
         <br />
         <br />
         <p>Secondary</p>
-        <Button onClick={handleClick} color='secondary'>
+        <Button
+            onClick={handleClick}
+            color='secondary'>
             {ICON_PLUS}
         </Button>
         &nbsp;
-        <Button onClick={handleClick} color='secondary' style='subtle'>
+        <Button
+            onClick={handleClick}
+            color='secondary'
+            style='subtle'>
             {ICON_PLUS}
         </Button>
         &nbsp;
-        <Button onClick={handleClick} color='secondary' style='bold'>
+        <Button
+            onClick={handleClick}
+            color='secondary'
+            style='bold'>
             {ICON_PLUS}
         </Button>
         <br />
         <br />
         <p>Danger</p>
-        <Button onClick={handleClick} color='danger'>
+        <Button
+            onClick={handleClick}
+            color='danger'>
             {ICON_PLUS}
         </Button>
         &nbsp;
-        <Button onClick={handleClick} color='danger' style='subtle'>
+        <Button
+            onClick={handleClick}
+            color='danger'
+            style='subtle'>
             {ICON_PLUS}
         </Button>
         &nbsp;
-        <Button onClick={handleClick} color='danger' style='bold'>
+        <Button
+            onClick={handleClick}
+            color='danger'
+            style='bold'>
             {ICON_PLUS}
         </Button>
         <br />
@@ -111,7 +151,11 @@ export const colors = () => (
 
 export const loading = () => (
     <>
-        <Button onClick={handleClick} color='primary' size='large' loading={true}>
+        <Button
+            onClick={handleClick}
+            color='primary'
+            size='large'
+            loading={true}>
             Loading
         </Button>
     </>

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

@@ -24,6 +24,7 @@ interface IButtonGroupFieldProps {
 
 class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
     private clickTimeout: number;
+
     private clickCounter: number = 0;
 
     constructor(p: IButtonGroupFieldProps) {

package/src/components/button-menu/ButtonMenu.tsx

@@ -14,7 +14,9 @@ interface IButtonMenuState {
 
 class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState> {
     private evtHandlers: any;
+
     private toggleRef: any;
+
     private menuRef: any;
 
     constructor(props) {
@@ -129,7 +131,9 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
         });
 
         return (
-            <div ref={this.menuRef} className='button-menu'>
+            <div
+                ref={this.menuRef}
+                className='button-menu'>
                 {trigger}
                 {this.renderMenu()}
             </div>

package/src/components/card/Card.stories.tsx

@@ -10,7 +10,10 @@ export default {
 };
 
 export const defaultCard = () => (
-    <Card title='Card' open={true} collapsable={false}>
+    <Card
+        title='Card'
+        open={true}
+        collapsable={false}>
         <TextField
             label={'TextField'}
             tooltip={'TOOLTIP'}

package/src/components/card/Card.tsx

@@ -97,7 +97,9 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
 
         return (
             <div className={`card ${openClass} ${collapsableClass} ${styleClass}`}>
-                <div className='card-header' onClick={this.evtHandlers.toggleOpen}>
+                <div
+                    className='card-header'
+                    onClick={this.evtHandlers.toggleOpen}>
                     {this.renderTitle(styleClass)}
                     {this.renderButtons()}
                 </div>
@@ -114,7 +116,9 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
         if (collapsable) {
             return (
                 <div className='header-buttons'>
-                    <Button style='subtle' onClick={this.evtHandlers.toggleOpen}>
+                    <Button
+                        style='subtle'
+                        onClick={this.evtHandlers.toggleOpen}>
                         {buttonIcon}
                     </Button>
                 </div>

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

@@ -38,7 +38,9 @@ class CheckboxField extends React.PureComponent<ICheckboxFieldProps> {
                 info={info}
                 labelPosition={labelPosition}
                 width={width}>
-                <div className='checkbox' onClick={(e) => this.toggle(e)}>
+                <div
+                    className='checkbox'
+                    onClick={(e) => this.toggle(e)}>
                     {icon}
                 </div>
             </FieldWrapper>

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

@@ -25,7 +25,9 @@ interface IColorFieldState {
 
 class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState> {
     private clickOutsideHandler: any;
+
     private picker: any;
+
     private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center`;
 
     constructor(props) {
@@ -130,8 +132,14 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
                 info={info}
                 labelPosition={labelPosition}
                 width={width}>
-                <div className='swatch' style={swatchStyle} onClick={(e) => this.togglePicker(e)} />
-                <div className={`picker picker-${pickerPos}`} ref={this.picker}>
+                <div
+                    className='swatch'
+                    style={swatchStyle}
+                    onClick={(e) => this.togglePicker(e)}
+                />
+                <div
+                    className={`picker picker-${pickerPos}`}
+                    ref={this.picker}>
                     {picker}
                 </div>
             </FieldWrapper>

package/src/components/compositions/TextLayer.tsx

@@ -251,8 +251,13 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
         };
 
         return (
-            <div className='composition-text-layer' style={wrapperStyle}>
-                <div className='inner-text' style={innerTextStyle} ref={this.innerTextRef}>
+            <div
+                className='composition-text-layer'
+                style={wrapperStyle}>
+                <div
+                    className='inner-text'
+                    style={innerTextStyle}
+                    ref={this.innerTextRef}>
                     {this.formatContent()}
                 </div>
             </div>

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

@@ -11,7 +11,16 @@ export default {
 export const ControlledListWithTags = () => (
     <div style={{ width: '8%' }}>
         <ControlledList
-            items={[<Tag key={`tag1`} copy='Sample Tag' />, <Tag key={`tag2`} copy='Sample Tag' />]}
+            items={[
+                <Tag
+                    key={`tag1`}
+                    copy='Sample Tag'
+                />,
+                <Tag
+                    key={`tag2`}
+                    copy='Sample Tag'
+                />
+            ]}
             removable={true}
             onRemove={action('REMOVED')}
         />

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

@@ -10,6 +10,7 @@ interface IControlledListProps {
 
 class ControlledList extends React.PureComponent<IControlledListProps> {
     private inputRef: any;
+
     private submitHandler: any;
 
     public renderRemoveButton(index) {
@@ -36,7 +37,9 @@ class ControlledList extends React.PureComponent<IControlledListProps> {
         if (items) {
             buttons = items.map((item, i) => {
                 return (
-                    <div className='item' key={`item-${i}`}>
+                    <div
+                        className='item'
+                        key={`item-${i}`}>
                         {item}
                         {this.renderRemoveButton(i)}
                     </div>

package/src/components/data-table/DataTable.tsx

@@ -322,7 +322,9 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                     })}
                 </thead>
 
-                <tbody {...getTableBodyProps()} className='ip-table-body'>
+                <tbody
+                    {...getTableBodyProps()}
+                    className='ip-table-body'>
                     {rowData.map((row, i) => {
                         let selectedClass: string = '';
                         let activeRef: any;
@@ -387,7 +389,10 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                 )}
 
                                 {!props.dnd && (
-                                    <tr key={`row-${i}`} ref={activeRef} {...rowProps}>
+                                    <tr
+                                        key={`row-${i}`}
+                                        ref={activeRef}
+                                        {...rowProps}>
                                         {rowContent}
                                     </tr>
                                 )}

package/src/components/data-table/DataTablePaginator.tsx

@@ -17,6 +17,7 @@ interface IDataTablePaginatorProps {
 
 export default class DataTablePaginator extends React.PureComponent<IDataTablePaginatorProps> {
     private static readonly DEFAULT_TOTAL: number = 0;
+
     private static readonly DEFAULT_STEP: number = 25;
 
     constructor(p: IDataTablePaginatorProps) {

package/src/components/determinate-loader/DeterminateLoader.tsx

@@ -11,7 +11,10 @@ export const DeterminateLoader: React.FC<IDeterminateLoaderProps> = (
 
     return (
         <div className='determinate-loader'>
-            <div className='progress-bg' style={{ transform }} />
+            <div
+                className='progress-bg'
+                style={{ transform }}
+            />
             <div className='progress-copy'>{`${Math.round(p.progress)}%`}</div>
         </div>
     );

package/src/components/dropdown/dropdown.stories.tsx

@@ -27,7 +27,9 @@ export const defaultDropDown = () => {
 
     return (
         <>
-            <Button onClick={() => setToggle(!toggle)} ref={dropdownToggleRef}>
+            <Button
+                onClick={() => setToggle(!toggle)}
+                ref={dropdownToggleRef}>
                 Sample DropDown Toggle
             </Button>
             <ImposiumDropdown

package/src/components/dropdown/dropdown.tsx

@@ -21,8 +21,11 @@ export default class ImposiumDropdown extends React.PureComponent<
     private static readonly ESC_CODE: number = 27;
 
     private resizeHandler: any = () => this.onResize();
+
     private clickHandler: any = (e) => this.detectOutsideClick(e);
+
     private escHandler: any = (e) => this.onEsc(e);
+
     private dropdownRef: any = null;
 
     constructor(p) {
@@ -133,7 +136,10 @@ export default class ImposiumDropdown extends React.PureComponent<
         }
 
         return (
-            <div className='imposium-dropdown' style={dropdownStyle} ref={this.dropdownRef}>
+            <div
+                className='imposium-dropdown'
+                style={dropdownStyle}
+                ref={this.dropdownRef}>
                 {children}
             </div>
         );

package/src/components/field-wrapper/FieldWrapper.stories.tsx

@@ -9,7 +9,9 @@ export default {
 };
 
 export const defaultFieldWrapperWithSelectField = () => (
-    <FieldWrapper width='50%' label={'Field Wrapper'}>
+    <FieldWrapper
+        width='50%'
+        label={'Field Wrapper'}>
         <SelectField
             label={'SelectField'}
             value={'SelectField'}

package/src/components/field-wrapper/FieldWrapper.tsx

@@ -21,6 +21,7 @@ interface IFieldWrapperState {
 
 class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapperState> {
     private tooltipId: string;
+
     private toggleIDInfo: any;
 
     constructor(props) {
@@ -55,7 +56,10 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
         const iconInfo = showInfo ? ICON_TIMES_CIRCLE : ICON_INFO_CIRCLE;
 
         const btnInfo = info ? (
-            <Button onClick={this.toggleIDInfo} size='small' style='subtle'>
+            <Button
+                onClick={this.toggleIDInfo}
+                size='small'
+                style='subtle'>
                 {iconInfo}
             </Button>
         ) : null;
@@ -89,9 +93,13 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
         }
 
         return (
-            <div className={`form-field ${customClass} ${this.getLabelClass()}`} style={style}>
+            <div
+                className={`form-field ${customClass} ${this.getLabelClass()}`}
+                style={style}>
                 {labelJSX}
-                <div className={`form-field-content ${this.getLabelClass()}`} {...fieldProps}>
+                <div
+                    className={`form-field-content ${this.getLabelClass()}`}
+                    {...fieldProps}>
                     {this.props.children}
                     {this.renderButtons()}
                 </div>

package/src/components/header/Header.tsx

@@ -29,24 +29,41 @@ export interface IHeaderState {
 
 export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     private static readonly DEFAULT_TITLE: string = 'imposium';
+
     private static readonly SERVICE_MESH_ALIAS: string = 'services';
+
     private static readonly DOCS_HEADER: string = 'documentation';
+
     private static readonly PRIVATE_HEADER: string = 'admin';
+
     private static readonly API_DOCS_LINK_COPY: string = 'REST API';
+
     private static readonly SDK_DOCS_LINK_COPY: string = 'Javascript SDK';
+
     private static readonly API_DOCS_LINK: string = 'https://docs.imposium.com';
+
     private static readonly SDK_DOCS_LINK: string = 'https://docs.imposium.com/js-sdk/';
+
     private static readonly DEFAULT_SERVICE_TOGGLE_COPY: string = 'stories';
+
     private static readonly DEFAULT_ACCOUNT_TOGGLE_COLOR: string = 'royalblue';
+
     private static readonly NO_STORIES_COPY: string = 'No stories were found';
+
     private static readonly LOGOUT_COPY: string = 'logout';
+
     private static readonly UUID_LENGTH: number = 36;
+
     private static readonly UP: JSX.Element = ICON_CHEVRON_UP;
+
     private static readonly DOWN: JSX.Element = ICON_CHEVRON_DOWN;
+
     private static readonly PRIVATE_IDS: number[] = [9, 10, 11, 12];
 
     private readonly serviceToggleRef: any = null;
+
     private readonly storyToggleRef: any = null;
+
     private readonly orgsToggleRef: any = null;
 
     constructor(p: IHeaderProps) {
@@ -195,10 +212,15 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         activeOrganization: string,
         activeStory: string
     ): JSX.Element => (
-        <div className='anchor-wrapper' key={s.id}>
+        <div
+            className='anchor-wrapper'
+            key={s.id}>
             <a href={parameterizeServiceUrl(activeOrganization, activeStory, s.url, s.id)}>
                 <div className='icon-fixed'>
-                    <ServiceIcon iconName={s.icon} color={`#${s.color}`} />
+                    <ServiceIcon
+                        iconName={s.icon}
+                        color={`#${s.color}`}
+                    />
                 </div>
                 {s.name}
             </a>
@@ -277,7 +299,9 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
 
                         <div className='service-menu-anchors'>
                             <div className='anchor-wrapper doc'>
-                                <a target='__blank' href={ImposiumHeader.API_DOCS_LINK}>
+                                <a
+                                    target='__blank'
+                                    href={ImposiumHeader.API_DOCS_LINK}>
                                     <div className='icon-fixed'>
                                         <ServiceIcon iconName='FaCogs' />
                                     </div>
@@ -286,7 +310,9 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
                             </div>
 
                             <div className='anchor-wrapper doc'>
-                                <a target='__blank' href={ImposiumHeader.SDK_DOCS_LINK}>
+                                <a
+                                    target='__blank'
+                                    href={ImposiumHeader.SDK_DOCS_LINK}>
                                     <div className='icon-fixed'>
                                         <ServiceIcon iconName='FaJsSquare' />
                                     </div>
@@ -400,7 +426,10 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         }
 
         return (
-            <nav id='imposium-header' className='imposium-header' style={headerBorder}>
+            <nav
+                id='imposium-header'
+                className='imposium-header'
+                style={headerBorder}>
                 <div className='inner-content'>
                     <span className='inner-left'>
                         <a
@@ -420,7 +449,9 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
                     <span className='inner-right'>
                         {storyToggle}
                         {accountDropdownToggle}
-                        <a href='https://support.imposium.com' target='_blank'>
+                        <a
+                            href='https://support.imposium.com'
+                            target='_blank'>
                             <div className='btn-help'>{ICON_HELP}</div>
                         </a>
                     </span>
@@ -456,7 +487,9 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
 
                         <div className='orgs-menu-footer'>
                             <div className='email'>{email}</div>
-                            <button className='btn-logout' onClick={() => this.doLogout()}>
+                            <button
+                                className='btn-logout'
+                                onClick={() => this.doLogout()}>
                                 {ImposiumHeader.LOGOUT_COPY}
                             </button>
                         </div>

package/src/components/list-field/ListField.tsx

@@ -30,6 +30,7 @@ interface IListFieldState {
 
 class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
     private inputRef: any;
+
     private submitHandler: any;
 
     constructor(props) {

package/src/components/log-viewer/LogViewer.tsx

@@ -16,6 +16,7 @@ interface ILogViewerState {
 
 class LogViewer extends React.PureComponent<ILogViewerProps, ILogViewerState> {
     private videoNode: any;
+
     private ansi_up: any;
 
     constructor(props) {
@@ -82,7 +83,9 @@ class LogViewer extends React.PureComponent<ILogViewerProps, ILogViewerState> {
 
         return (
             <div className='log-viewer'>
-                <div className='log-html' dangerouslySetInnerHTML={{ __html: logHTML }}></div>
+                <div
+                    className='log-html'
+                    dangerouslySetInnerHTML={{ __html: logHTML }}></div>
             </div>
         );
     }

package/src/components/media-variable-field/MediaVariableField.tsx

@@ -21,6 +21,7 @@ class MediaVariableField extends React.PureComponent<
     IMediaVariableFieldState
 > {
     private input: any;
+
     private evtHandlers: any;
 
     constructor(props) {
@@ -108,11 +109,28 @@ class MediaVariableField extends React.PureComponent<
 
             switch (type.toLowerCase()) {
                 case VARIABLE_TYPES.IMAGE:
-                    return <img className='default-preview' src={src} />;
+                    return (
+                        <img
+                            className='default-preview'
+                            src={src}
+                        />
+                    );
                 case VARIABLE_TYPES.VIDEO:
-                    return <video className='default-preview' src={src} controls />;
+                    return (
+                        <video
+                            className='default-preview'
+                            src={src}
+                            controls
+                        />
+                    );
                 case VARIABLE_TYPES.AUDIO:
-                    return <audio className='default-preview' src={src} controls />;
+                    return (
+                        <audio
+                            className='default-preview'
+                            src={src}
+                            controls
+                        />
+                    );
             }
         } else {
             return null;
@@ -170,8 +188,12 @@ class MediaVariableField extends React.PureComponent<
                     ref={this.input}
                     onChange={this.evtHandlers.fileUpload}
                 />
-                <AssetsTableDropzone onDrop={this.evtHandlers.fileDrop} disable={processing}>
-                    <div className='variable-default-upload' onClick={this.evtHandlers.click}>
+                <AssetsTableDropzone
+                    onDrop={this.evtHandlers.fileDrop}
+                    disable={processing}>
+                    <div
+                        className='variable-default-upload'
+                        onClick={this.evtHandlers.click}>
                         {this.renderFields()}
                         <div className='btn-wrapper'>{this.renderClearButton()}</div>
                     </div>

package/src/components/modal/Modal.stories.tsx

@@ -17,7 +17,9 @@ export const defaultModal = () => {
 
     return (
         <>
-            <Button onClick={() => setOpen(!open)} ref={dropdownToggleRef}>
+            <Button
+                onClick={() => setOpen(!open)}
+                ref={dropdownToggleRef}>
                 Modal Button
             </Button>
             <Modal