@imposium-hub/components 1.28.3 → 1.30.0

package/.storybook/main.js

@@ -6,7 +6,7 @@ module.exports = {
 	
     	config.module.rules.push({
             test: /(\.ts|\.tsx)$/,
-            use: 'awesome-typescript-loader',
+            use: 'ts-loader',
             exclude: /node_modules/
         });
             

package/.storybook/preview-head.html

@@ -1 +1,6 @@
 <link rel="stylesheet" href="styles.css">
+<style>
+    .sb-show-main{
+        padding:25px;
+    }
+</style>

package/Entry.ts

@@ -32,6 +32,7 @@ import NoAccess from './components/no-access/NoAccess';
 import ServiceIcon from './components/service-icon/ServiceIcon';
 import DeterminateLoader from './components/determinate-loader/DeterminateLoader';
 import AssetsTableDateCell from './components/assets/AssetsTableDateCell';
+import AssetsTableDurationCell from './components/assets/AssetsTableDurationCell';
 import AssetField from './components/assets/AssetField';
 import AssetsTableDropzone from './components/assets/AssetsTableDropzone';
 import AssetsTableNameCell from './components/assets/AssetsTableNameCell';
@@ -163,6 +164,7 @@ export {
     AssetsTableStatusCell,
     AssetsTableNameFilter,
     AssetsTableNameCell,
+    AssetsTableDurationCell,
     AssetsTableTagsCell,
     AssetsTableTagsFilter,
     AssetsTableTagsPivot,

package/components/assets/AssetsTableDurationCell.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import NumberField from '../number-field/NumberField';
+import { updateAssetName } from '../../redux/actions/asset-list';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { IImposiumAPI } from '../../services/API';
+
+interface IAssetsTableDurationCell {
+    cell : any;
+    api : IImposiumAPI;
+}
+
+const AssetsTableDurationCell : React.FC<IAssetsTableDurationCell> = (props : IAssetsTableDurationCell) => {
+
+        const {cell: {row: {original: {duration, id}}}} = props;
+
+        if (duration !== null && duration !== undefined) {
+            return (
+                <div className = 'asset-duration-cell'>
+                    {secondsToTime(duration)}
+                </div>
+            );
+        } else {
+            return null;
+        }
+
+};
+
+export const  secondsToTime = (timeInSeconds) : string => {
+    const minutes : any = Math.floor(timeInSeconds / 60);
+    let seconds : any = Math.floor(timeInSeconds - minutes * 60);
+    if (seconds < 10) {
+        seconds = `0${seconds}`;
+    }
+    return `${minutes}:${seconds}`;
+};
+
+const mapDispatchToProps = (dispatch) : any => {
+    return bindActionCreators({updateAssetName}, dispatch);
+};
+
+const mapStateToProps = (state) : any => {
+    return {};
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AssetsTableDurationCell);

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

@@ -0,0 +1,59 @@
+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,
+};
+
+// 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: ''
+};
+
+const SAMPLE_OPTIONS = [
+    {
+        value: OVERLAY_ENGINE_TYPES.CHROMIUM,
+        label: 'Chromium'
+    },
+    {
+        value: OVERLAY_ENGINE_TYPES.PHANTOM,
+        label: 'Phantom'
+    }
+];
+
+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'
+        />
+);

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import ButtonMenu from './ButtonMenu';
+import Button from '../button/Button';
+import ButtonMenuItem from './ButtonMenuItem';
+import {ICON_COPY, ICON_BARS} from '../../constants/icons';
+
+// Interfaces For Reference
+interface IButtonMenuProps {
+    button : any;
+    items : any;
+    position : string;
+}
+
+interface IButtonMenuState {
+    open : boolean;
+}
+
+const menuItems = [
+    <ButtonMenuItem
+        key = 'duplicate'
+        label = {<span>{ICON_COPY}&nbsp;Duplicate</span>}
+        onClick = {action('CLICKED')}/>,
+    <ButtonMenuItem
+        key = 'delete'
+        label = {<span>{ICON_BARS}&nbsp;Trash</span>}
+        onClick = {action('CLICKED')}/>
+];
+
+export default {
+    title: 'ButtonMenu',
+    component: ButtonMenu
+};
+
+export const rightButtonMenuWithButtonMenuItem = () => (
+    <ButtonMenu
+        position = 'right'
+        items = {menuItems}
+        button = {<Button style = 'subtle'>{ICON_BARS}</Button>}
+        />
+);

package/components/card/Card.stories.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import TextField from '../text-field/TextField';
+import NumberField from '../number-field/NumberField';
+import Card from './Card';
+
+interface ICardProps {
+    collapsable? : boolean;
+    open? : boolean;
+    style? : string;
+    title : string;
+    onToggle ? : (toggle : boolean) => any;
+}
+
+interface ICardState {
+    open : boolean;
+}
+
+export default {
+    title: 'Card',
+    component: Card
+};
+
+export const defaultCard = () => (
+    <Card
+    title = 'Card'
+    open = {true}
+    collapsable = {false}>
+        <TextField
+            label = {'TextField'}
+            tooltip = {'TOOLTIP'}
+            value = {'name'}
+            width = '33%'
+            onChange = {action('CLICKED')}/>
+        <NumberField
+            label = {'NumberField'}
+            tooltip = {'TOOLTIP'}
+            width = '33%'
+            readOnly = {true}
+            value = {1}
+            onChange = {action('CLICKED')}
+            />
+    </Card>
+);

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

@@ -0,0 +1,34 @@
+import * as React 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',
+    component: CheckBoxField
+};
+
+export const defaultCheckboxField = () => {
+    const [clicked, setClicked] = useState(true);
+
+    return (
+        <CheckBoxField
+            width = {'300px'}
+            label = {'Checkbox Field'}
+            tooltip = {'TOOLTIP'}
+            value = {clicked}
+            onChange = {() => setClicked(!clicked)}/>
+    );
+};

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

@@ -0,0 +1,39 @@
+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');
+
+    return (
+        <ColorField
+            label = {'Color Field'}
+            tooltip = {'TOOLTIP'}
+            width = {'300px'}
+            value = {color}
+            onChange = {action('CHANGED')}/>
+    );
+};

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import ControlledList from './ControlledList';
+import Tag from '../Tag/Tag';
+
+export default {
+    title: 'ControlledList',
+    componenet: ControlledList
+};
+
+// Interface For Reference
+interface IControlledListProps {
+    items? : any[];
+    removable? : boolean;
+    onRemove?(index) : void;
+}
+
+export const ControlledListWithTags = () => (
+    <div style={{width: '8%'}}>
+        <ControlledList
+            items = {[<Tag key = {`tag1`} copy = 'Sample Tag' />, <Tag key = {`tag2`} copy = 'Sample Tag' />]}
+            removable = {true}
+            onRemove = {action('REMOVED')}
+            />
+    </div>
+);

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import DeterminateLoader from './DeterminateLoader';
+
+export default {
+    title: 'DeterminateLoader',
+    component: DeterminateLoader
+};
+
+interface IDeterminateLoaderProps {
+    progress : number; // expects int 0-100 (%)
+}
+
+export const DeterminateLoader50Percent = () => (
+    <DeterminateLoader
+        progress = {50}
+        />
+);
+
+export const DeterminateLoader25Percent = () => (
+    <DeterminateLoader
+        progress = {25}
+    />
+);
+
+export const DeterminateLoaderLoading = () => {
+    const [percent, setPercent] = useState(0);
+
+    useEffect(() => {
+        setTimeout(() => {
+            if ( percent < 100) {
+                setPercent(percent + 1);
+            }
+        }, 10);
+
+    });
+
+    return (
+        <DeterminateLoader
+            progress = {percent}
+        />
+    );
+};

package/components/dropdown/dropdown.stories.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import ImposiumDropdown from './dropdown';
+import Button from '../button/Button';
+
+export default {
+    title: 'DropDown',
+    component: ImposiumDropdown
+};
+
+export interface IDropdownMenuProps {
+    toggleRef : any;
+    show : boolean;
+    fixed? : boolean;
+    children : React.ReactChild;
+    position : 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
+    onOutsideClick : (...args) => any;
+}
+
+export interface IDropdownMenuState {
+    build : any;
+    offset : any;
+}
+
+export const defaultDropDown = () => {
+    const dropdownToggleRef = React.useRef(undefined);
+    const [toggle, setToggle] = React.useState(false);
+
+    return (
+        <>
+            <Button onClick = {() => setToggle(!toggle)} ref = {dropdownToggleRef}>
+                Sample DropDown Toggle
+            </Button>
+            <ImposiumDropdown
+                toggleRef = {dropdownToggleRef}
+                show = {toggle}
+                fixed
+                position = 'bottomright'
+                onOutsideClick = {() => setToggle(!toggle)}>
+                Sample
+            </ImposiumDropdown>
+        </>
+    );
+};

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import {IToolTipConfig} from '../Tooltip';
+import FieldWrapper from './FieldWrapper';
+import SelectField from '../select-field/SelectField';
+
+export default {
+    title: 'FieldWrapper',
+    component: FieldWrapper
+};
+
+interface IFieldWrapperProps {
+    buttons? : any;
+    children : any;
+    customClass? : string;
+    label? : any;
+    tooltip? : IToolTipConfig | string;
+    info? : any;
+    width? : string | number;
+    labelPosition? : string;
+}
+
+interface IFieldWrapperState {
+    showInfo : boolean;
+}
+
+export const defaultFieldWrapperWithSelectField = () => (
+    <FieldWrapper
+        width = '50%'
+        label = {'Field Wrapper'}>
+        <SelectField
+            label = {'SelectField'}
+            value = {'SelectField'}
+            width = '50%'
+            options = {['Item1', 'Item2']}
+            onChange = {action('CLICKED')}/>
+        <SelectField
+            label = {'SelectField'}
+            value = {'SelectField'}
+            width = '50%'
+            options = {['Item1', 'Item2']}
+            onChange = {action('CLICKED')}/>
+    </FieldWrapper>
+);

package/components/h-rule/HRule.stories.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import HRule from './HRule';
+
+export default {
+    title: 'HRule',
+    component: HRule
+};
+
+// This is hard to see
+export const defaultHRule = () => (
+    <>
+        <HRule  />
+        <HRule style = 'subtle' />
+        <HRule  />
+        <HRule style = 'subtle' />
+    </>
+);

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import ListField from './ListField';
+import { action } from '@storybook/addon-actions';
+import { IToolTipConfig } from '../Tooltip';
+
+export default {
+    title: 'ListFIeld',
+    component: ListField
+};
+
+interface IListFieldProps {
+    buttons? : any;
+    disabled? : boolean;
+    label? : string;
+    options : any;
+    placeholder? : string;
+    tooltip ? : IToolTipConfig | string;
+    tooltipAdd? : IToolTipConfig | string;
+    width? : string | number;
+    onChange(e) : void;
+    onError(e) : void;
+    info? : string;
+    labelPosition? : string;
+}
+
+interface IListFieldState {
+    textInputValue : string;
+}
+
+export const defaultListFIeld = () => (
+    <div style={{width: '25%'}}>
+        <ListField
+            options = {['Option1', 'Option2']}
+            label = {'ListField'}
+            tooltip = {'TOOLTIP'}
+            tooltipAdd = {'TOOLTIP ADD'}
+            onError = {action('ERROR')}
+            onChange = {action('CHANGE')}/>
+    </div>
+);

package/components/modal/Modal.stories.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Modal from './Modal';
+import Button from '../button/Button';
+
+export default {
+    title: 'Modal',
+    component: Modal
+};
+
+interface IModalProps {
+    children? : any;
+    isOpen : boolean;
+    style? : any;
+    wrapperStyle? : any;
+    onRequestClose(e) : void;
+}
+
+export const defaultModal = () => {
+    const [open, setOpen] = React.useState(false);
+    const dropdownToggleRef = React.useRef(null);
+
+    const handleModalOpen = () => {
+        setOpen(!open);
+    };
+
+    return (
+        <>
+            <Button onClick = {() => setOpen(!open)} ref = {dropdownToggleRef}>
+                    Modal Button
+            </Button>
+            <Modal
+                onRequestClose= {handleModalOpen}
+                wrapperStyle = {{
+                    top: '50px',
+                    left: '0px',
+                    width: '100%',
+                    height: `calc(100% - 50px)`
+                }}
+                style = {{
+                    width: '600px',
+                    height: '70%',
+                    top: '10%',
+                    left: 'calc((100% - 600px) / 2)'
+                }}
+                isOpen = {open}
+            >
+                Modal Content
+            </Modal>
+        </>
+    );
+};

package/components/number-field/NumberField.stories.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import NumberField from './NumberField';
+import { IToolTipConfig } from '../Tooltip';
+
+export default {
+    title: 'NumberField',
+    component: NumberField
+};
+
+interface INumberFieldProps {
+    buttons? : any;
+    label? : string;
+    placeholder? : string;
+    readOnly? : boolean;
+    value : number;
+    tooltip? : IToolTipConfig | string;
+    width? : string | number;
+    onChange(e) : void;
+    info? : string;
+    labelPosition? : string;
+    min? : number;
+    max? : number;
+}
+
+export const defaultNumberField = () => {
+    const [ number, setNumber ] = React.useState(0);
+
+    const handleChange = (e) => {
+        if (e.target.value) {
+            setNumber(e.target.value);
+        }
+    };
+
+    return (
+        <NumberField
+            label = {'Number Field'}
+            tooltip = {'TOOLTIP'}
+            width = '33%'
+            value = {number}
+            onChange = {handleChange}
+            />
+    );
+};

package/components/number-field/NumberField.tsx

@@ -10,7 +10,7 @@ interface INumberFieldProps {
     value : number;
     tooltip? : IToolTipConfig | string;
     width? : string | number;
-    onChange(e) : void;
+    onChange?(e) : void;
     info? : string;
     labelPosition? : string;
     min? : number;