@imposium-hub/components 1.29.0 → 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/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/section/Section.stories.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import Section from './Section';
+import TextField from '../text-field/TextField';
+import NumberField from '../number-field/NumberField';
+import Button from '../button/Button';
+import ButtonMenu from '../button-menu/ButtonMenu';
+import ButtonMenuItem from '../button-menu/ButtonMenuItem';
+import Card from '../card/Card';
+import {ICON_COPY, ICON_BARS} from '../../constants/icons';
+
+export default {
+    title: 'Section',
+    component: Section
+};
+
+export const defaultSection = () => {
+
+    const menuItems = [
+        <ButtonMenuItem
+            key = 'duplicate'
+            label = {<span>{ICON_COPY}&nbsp;Button Duplicate Overlay</span>}
+            onClick = {action('CLICKED')}/>,
+        <ButtonMenuItem
+            key = 'delete'
+            label = {<span>{ICON_COPY}&nbsp;Button Duplicate Overlay</span>}
+            onClick = {action('CLICKED')}/>
+    ];
+
+    const menu = <ButtonMenu
+        position = 'left'
+        items  = {menuItems}
+        button = {<Button style = 'subtle'>
+        {ICON_BARS}
+    </Button>}/>;
+
+    return (
+        <Section
+            title = 'Section Title'
+            buttons = {menu}
+        >
+            <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>
+            <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>
+        </Section>
+    );
+};

package/components/select-field/SelectField.stories.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import SelectField from './SelectField';
+import { action } from '@storybook/addon-actions';
+import { IToolTipConfig } from '../Tooltip';
+
+export default {
+    title: 'SelectField',
+    components: SelectField
+};
+
+interface ISelectOption {
+    label : string;
+    value : string;
+}
+
+interface ISelectFieldProps {
+    buttons? : any;
+    label? : string;
+    selectRef? : any;
+    options : any;
+    disable ? : boolean;
+    tooltip ? : IToolTipConfig | string;
+    placeholder? : string;
+    value : any;
+    width? : string | number;
+    onChange(e) : void;
+    info? : string;
+    labelPosition? : string;
+}
+
+export const defaultSelectField = () => (
+    <SelectField
+        label = {'Select Field'}
+        value = {'value'}
+        width = '50%'
+        options = { ['Option1', 'Option2'] }
+        onChange = {action('CHANGED')}/>
+);