superdesk-ui-framework 6.1.0-dev1 → 7.0.0-dev-hg0

package/app-typescript/components/IconPicker.tsx

@@ -1,278 +0,0 @@
-import * as React from 'react';
-import {Button} from './Button';
-import {Icon} from './Icon';
-import {IItem, SelectGrid} from './SelectGrid';
-
-interface IProps {
-    label?: string;
-    filterPlaceholder?: string;
-    translateFunction?: (text: string) => string;
-    value: string;
-    onChange(icon: string): void;
-}
-
-interface IState {
-    icons: Array<IItem>;
-}
-
-export class IconPicker extends React.PureComponent<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {icons: []};
-    }
-
-    componentDidMount() {
-        const translateFunction = this.props.translateFunction
-            ? this.props.translateFunction
-            : (text: string): string => text;
-        this.setState({
-            icons: getIcons(translateFunction),
-        });
-    }
-
-    getItems = (searchString: string | null): Promise<Array<IItem>> => {
-        return new Promise((resolve) => {
-            let icons = [...this.state.icons];
-
-            if (searchString) {
-                icons = icons.filter(
-                    (icon) =>
-                        icon.value.toLowerCase().includes(searchString) ||
-                        icon.label.toLowerCase().includes(searchString),
-                );
-            }
-            resolve(icons);
-        });
-    };
-
-    onChange = (item: IItem) => {
-        this.props.onChange(item.value);
-    };
-
-    triggerTemplate = (props: {onClick: (e: React.SyntheticEvent) => void}) => (
-        <Button
-            icon={this.props.value}
-            text={this.props.value}
-            onClick={(e) => {
-                props.onClick(e);
-            }}
-            iconOnly={true}
-        />
-    );
-
-    itemTemplate = ({item}: {item: IItem | null}) =>
-        item && (
-            <>
-                <Icon name={item.value} />
-                <span className="sd-text--normal sd-padding-t--1">{item.label}</span>
-            </>
-        );
-
-    render() {
-        return (
-            <SelectGrid
-                label={this.props.label ?? 'Icon'}
-                filterPlaceholder={this.props.filterPlaceholder ?? 'Search...'}
-                getItems={this.getItems}
-                onChange={this.onChange}
-                itemTemplate={this.itemTemplate}
-                triggerTemplate={this.triggerTemplate}
-            />
-        );
-    }
-}
-
-const getIcons = (translateFunction: (text: string) => string): Array<IItem> => {
-    const translatedIconNameMap = {
-        'add-gallery': 'Add Gallery',
-        'add-image': 'Add Image',
-        adjust: 'Adjust',
-        'align-center': 'Align Center',
-        'align-justify': 'Align Justify',
-        'align-left': 'Align Left',
-        'align-right': 'Align Right',
-        amp: 'AMP',
-        analytics: 'Analytics',
-        archive: 'Archive',
-        'arrow-left': 'Arrow Left',
-        'arrow-right': 'Arrow Right',
-        'arrow-small': 'Arrow Small',
-        ascending: 'Ascending',
-        assign: 'Assign',
-        attachment: 'Attachment',
-        'attachment-large': 'Attachment Large',
-        audio: 'Audio',
-        'backward-thin': 'Backward Thin',
-        'ban-circle': 'Ban Circle',
-        bell: 'Bell',
-        bold: 'Bold',
-        broadcast: 'Broadcast',
-        'broadcast-create': 'Broadcast Create',
-        business: 'Business',
-        calendar: 'Calendar',
-        'calendar-list': 'Calendar List',
-        'chevron-down-thin': 'Chevron Down Thin',
-        'chevron-left-thin': 'Chevron Left Thin',
-        'chevron-right-thin': 'Chevron Right Thin',
-        'chevron-up-thin': 'Chevron Up Thin',
-        'clear-all': 'Clear All',
-        'clear-format': 'Clear Format',
-        'close-small': 'Close Small',
-        'close-thick': 'Close Thick',
-        code: 'Code',
-        collapse: 'Collapse',
-        comment: 'Comment',
-        composite: 'Composite',
-        copy: 'Copy',
-        crop: 'Crop',
-        cut: 'Cut',
-        descending: 'Descending',
-        dots: 'Dots',
-        'dots-vertical': 'Dots Vertical',
-        download: 'Download',
-        'download-alt': 'Download Alternate',
-        'edit-line': 'Edit Line',
-        envelope: 'Envelope',
-        event: 'Event',
-        'exclamation-sign': 'Exclamation Sign',
-        expand: 'Expand',
-        'expand-thin': 'Expand Thin',
-        external: 'External',
-        'eye-open': 'Eye Open',
-        facebook: 'Facebook',
-        'facebook-circle': 'Facebook Circle',
-        fast_forward: 'Fast Forward',
-        fast_rewind: 'Fast Rewind',
-        'fetch-as': 'Fetch As',
-        file: 'File',
-        'filter-large': 'Filter Large',
-        'flip-horizontal': 'Flip Horizontal',
-        'flip-vertical': 'Flip Vertical',
-        'folder-close': 'Folder Close',
-        'folder-open': 'Folder Open',
-        font: 'Font',
-        'forward-thin': 'Forward Thin',
-        fullscreen: 'Fullscreen',
-        globe: 'Globe',
-        graphic: 'Graphic',
-        'grid-view': 'Grid View',
-        'grid-view-large': 'Grid View Large',
-        'heading-1': 'Heading 1',
-        'heading-2': 'Heading 2',
-        'heading-3': 'Heading 3',
-        'heading-4': 'Heading 4',
-        'heading-5': 'Heading 5',
-        'heading-6': 'Heading 6',
-        heart: 'Heart',
-        'help-large': 'Help Large',
-        'highlight-package': 'Highlight Package',
-        home: 'Home',
-        'indent-left': 'Indent Left',
-        'indent-right': 'Indent Right',
-        'info-large': 'Info Large',
-        'info-sign': 'Info Sign',
-        ingest: 'Ingest',
-        instagram: 'Instagram',
-        italic: 'Italic',
-        'kanban-view': 'Kanban View',
-        kill: 'Kill',
-        link: 'Link',
-        'linked-in': 'LinkedIn',
-        'linked-in-circle': 'LinkedIn Circle',
-        'list-alt': 'List Alternate',
-        'list-menu': 'List Menu',
-        'list-plus': 'List Plus',
-        'list-view': 'List View',
-        lock: 'Lock',
-        'map-marker': 'Map Marker',
-        'minus-sign': 'Minus Sign',
-        'minus-small': 'Minus Small',
-        mobile: 'Mobile',
-        move: 'Move',
-        'multi-star': 'Multi Start',
-        multiedit: 'Multi Edit',
-        'new-doc': 'New Document',
-        ok: 'Okay',
-        'ordered-list': 'Ordered List',
-        'package-create': 'Package Create',
-        'package-plus': 'Package Plus',
-        paragraph: 'Paragraph',
-        paste: 'Paste',
-        pause: 'Pause',
-        paywall: 'Paywall',
-        pencil: 'Pencil',
-        phone: 'Phone',
-        photo: 'Photo',
-        pick: 'Pick',
-        picture: 'Picture',
-        pin: 'Pin',
-        play: 'Play',
-        'plus-large': 'Plus Large',
-        'plus-sign': 'Plus Sign',
-        'plus-small': 'Plus Small',
-        post: 'Post',
-        preformatted: 'Preformatted',
-        'preview-mode': 'Preview Mode',
-        print: 'Print',
-        'question-sign': 'Question Sign',
-        quote: 'Quote',
-        random: 'Random',
-        recurring: 'Recurring',
-        redo: 'Redo',
-        refresh: 'Refresh',
-        'remove-sign': 'Remove Sign',
-        repeat: 'Repeat',
-        retweet: 'Retweet',
-        revert: 'Revert',
-        'rotate-left': 'Rotate Left',
-        'rotate-right': 'Rotate Right',
-        search: 'Search',
-        settings: 'Settings',
-        'share-alt': 'Share Alternate',
-        signal: 'Signal',
-        skip_next: 'Skip Next',
-        skip_previous: 'Skip Previous',
-        slideshow: 'Slideshow',
-        star: 'Star',
-        'star-empty': 'Star Empty',
-        stop: 'Stop',
-        stream: 'Stream',
-        strikethrough: 'Strikethrough',
-        subscript: 'Subscript',
-        suggestion: 'Suggestion',
-        superscript: 'Superscript',
-        switches: 'Switches',
-        table: 'Table',
-        'takes-package': 'Takes Package',
-        tasks: 'Tasks',
-        text: 'Text',
-        'text-format': 'Text Format',
-        th: 'Table Header',
-        'th-large': 'Table Header Large',
-        'th-list': 'Table Header List',
-        time: 'Time',
-        'to-lowercase': 'To Lowercase',
-        'to-uppercase': 'To Uppercase',
-        trash: 'Trash',
-        twitter: 'Twitter',
-        'twitter-circle': 'Twitter Circle',
-        underline: 'Underline',
-        undo: 'Undo',
-        unlocked: 'Unlocked',
-        'unordered-list': 'Unordered List',
-        unspike: 'Unspike',
-        upload: 'Upload',
-        user: 'User',
-        video: 'Video',
-        'warning-sign': 'Warning Sign',
-        'zoom-in': 'Zoom In',
-        'zoom-out': 'Zoom Out',
-    };
-
-    return Object.keys(translatedIconNameMap)
-        .sort()
-        .map((icon) => ({
-            value: icon as keyof typeof translatedIconNameMap,
-            label: translateFunction(translatedIconNameMap[icon as keyof typeof translatedIconNameMap]),
-        }));
-};

package/app-typescript/components/IllustrationButton.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-interface IProps {
-    text: string;
-    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
-    children?: React.ReactNode;
-    disabled?: boolean;
-}
-
-export class IllustrationButton extends React.PureComponent<IProps> {
-    render() {
-        let classes = classNames('illustration-button', {
-            'illustration-button--disabled': this.props.disabled,
-        });
-        return (
-            <button className={classes} tabIndex={0} onClick={this.props.onClick}>
-                {this.props.children}
-                <span className="illustration-button__text-label">{this.props.text}</span>
-            </button>
-        );
-    }
-}

package/app-typescript/components/Input.tsx

@@ -1,94 +0,0 @@
-import * as React from 'react';
-import nextId from 'react-id-generator';
-import {IInputCommon, IInputWrapper, InputWrapper} from './Form/InputWrapper';
-
-interface IPropsBase extends IInputCommon {
-    maxLength?: number;
-    placeholder?: string;
-    size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
-    'data-test-id'?: string;
-    inputWrapper?: IInputWrapper['inputWrapper'];
-}
-
-interface IPropsText extends IPropsBase {
-    type: 'text';
-    value?: string;
-    onChange(newValue: string): void;
-}
-
-interface IPropsPassword extends IPropsBase {
-    type: 'password';
-    value?: string;
-    onChange(newValue: string): void;
-}
-
-interface IPropsNumber extends IPropsBase {
-    type: 'number';
-    value?: number;
-    onChange(newValue: number): void;
-}
-
-type IProps = IPropsText | IPropsNumber | IPropsPassword;
-
-export class Input extends React.Component<IProps> {
-    constructor(props: IProps) {
-        super(props);
-
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    htmlId = nextId();
-
-    handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-        if (this.props.type === 'number') {
-            this.props.onChange(Number(event.target.value));
-        } else {
-            this.props.onChange(event.target.value);
-        }
-    }
-
-    render() {
-        if (this.props.preview) {
-            return (
-                <div>
-                    <span>{this.props.value}</span>
-                </div>
-            );
-        }
-
-        return (
-            <InputWrapper
-                label={this.props.label}
-                required={this.props.required}
-                disabled={this.props.disabled}
-                value={this.props.value}
-                error={this.props.error}
-                invalid={this.props.error != null}
-                info={this.props.info}
-                maxLength={this.props.maxLength}
-                inlineLabel={this.props.inlineLabel}
-                labelHidden={this.props.labelHidden}
-                size={this.props.size ?? 'medium'}
-                fullWidth={this.props.fullWidth}
-                htmlId={this.htmlId}
-                boxedStyle={this.props.boxedStyle}
-                boxedLable={this.props.boxedLable}
-                tabindex={this.props.tabindex}
-                inputWrapper={this.props.inputWrapper}
-            >
-                <input
-                    className="sd-input__input"
-                    type={this.props.type ?? 'text'}
-                    id={this.htmlId}
-                    value={this.props.value}
-                    aria-describedby={this.htmlId + 'label'}
-                    tabIndex={this.props.tabindex}
-                    onChange={this.handleChange}
-                    placeholder={this.props.placeholder}
-                    disabled={this.props.disabled}
-                    data-test-id={this.props['data-test-id']}
-                />
-            </InputWrapper>
-        );
-    }
-}

package/app-typescript/components/Label.tsx

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import {getTextColor} from '../helpers';
-
-interface IProps {
-    text: string;
-    link?: string;
-    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
-    color?: string; //  https://ui-framework.superdesk.org/#/components/colors
-    size?: 'small' | 'normal' | 'large'; // defaults to 'normal'
-    onClick?(): void;
-    noTransform?: boolean;
-    hexColor?: string;
-    style?: 'filled' | 'hollow' | 'translucent'; // defaults to 'filled'
-    'data-test-id'?: string;
-}
-export class Label extends React.PureComponent<IProps> {
-    render() {
-        let classes = classNames('label', {
-            [`label--${this.props.size}`]: this.props.size !== 'normal' && this.props.size !== undefined,
-            'label--no-transform': this.props.noTransform,
-            [`label--${this.props.type}`]: this.props.type !== undefined && !this.props.color,
-            [`${this.props.color}`]: this.props.color !== undefined && !this.props.type && !this.props.style,
-            [`label--${this.props.style}`]: this.props.style !== 'filled' && this.props.style !== undefined,
-            [`hollow-${this.props.color}`]: this.props.color && this.props.style === 'hollow',
-        });
-
-        if (this.props.link || this.props.onClick) {
-            if (this.props.style === 'hollow') {
-                return (
-                    <a
-                        className={classes}
-                        href={this.props.link}
-                        onClick={this.props.onClick}
-                        style={{color: this.props.hexColor, borderColor: this.props.hexColor}}
-                        data-test-id={this.props['data-test-id']}
-                    >
-                        {this.props.text}
-                    </a>
-                );
-            } else if (this.props.style === 'translucent') {
-                return (
-                    <a
-                        className={classes}
-                        href={this.props.link}
-                        onClick={this.props.onClick}
-                        style={{color: this.props.hexColor, backgroundColor: `${this.props.hexColor}33`}}
-                        data-test-id={this.props['data-test-id']}
-                    >
-                        {this.props.text}
-                    </a>
-                );
-            } else {
-                return (
-                    <a
-                        className={classes}
-                        href={this.props.link}
-                        onClick={this.props.onClick}
-                        style={{backgroundColor: this.props.hexColor}}
-                        data-test-id={this.props['data-test-id']}
-                    >
-                        {this.props.text}
-                    </a>
-                );
-            }
-        } else {
-            if (this.props.style === 'hollow') {
-                return (
-                    <span
-                        className={classes}
-                        style={{color: this.props.hexColor, borderColor: this.props.hexColor}}
-                        data-test-id={this.props['data-test-id']}
-                    >
-                        {this.props.text}
-                    </span>
-                );
-            } else if (this.props.style === 'translucent') {
-                return (
-                    <span
-                        className={classes}
-                        style={{color: this.props.hexColor, backgroundColor: `${this.props.hexColor}33`}}
-                        data-test-id={this.props['data-test-id']}
-                    >
-                        {this.props.text}
-                    </span>
-                );
-            } else {
-                return (
-                    <span
-                        className={classes}
-                        style={
-                            this.props.hexColor
-                                ? {backgroundColor: this.props.hexColor, color: getTextColor(this.props.hexColor)}
-                                : undefined
-                        }
-                        data-test-id={this.props['data-test-id']}
-                    >
-                        {this.props.text}
-                    </span>
-                );
-            }
-        }
-    }
-}

package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export class AuthorinInnerSideBar extends React.PureComponent<IProps> {
-    render() {
-        return <div className="sd-editor-content__authoring-bookmark-bar ">{this.props.children}</div>;
-    }
-}

package/app-typescript/components/Layouts/AuthoringContainer.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-interface IProps {
-    children?: React.ReactNode;
-    side?: 'left' | 'right';
-    background?: 'transparent' | 'light' | 'grey' | 'dark';
-    open?: boolean;
-    large?: boolean;
-}
-
-export class AuthoringContainer extends React.PureComponent<IProps> {
-    render() {
-        let classes = classNames('sd-content-wrapper__authoring-content-area', {
-            [`sd-content-wrapper__authoring-content-area--${this.props.side}`]: this.props.side,
-            [`sd-content-wrapper__authoring-content-area--${this.props.background}`]:
-                this.props.background !== 'light' && this.props.background !== undefined,
-            'open-editor': this.props.open,
-        });
-
-        let classesContainerInner = classNames('sd-editor__container', {
-            [`sd-editor__container--large`]: this.props.large,
-        });
-
-        return (
-            <div className={classes}>
-                <div className="sd-editor__container-wrapper">
-                    <div className={classesContainerInner}>{this.props.children}</div>
-                </div>
-            </div>
-        );
-    }
-}

package/app-typescript/components/Layouts/AuthoringFrame.tsx

@@ -1,57 +0,0 @@
-// External Modules
-import * as React from 'react';
-
-import {
-    AuthoringFrameContainer,
-    AuthoringFrameMain,
-    AuthoringFrameNavBar,
-    AuthoringFrameLeftBar,
-    AuthoringFrameRightBar,
-    AuthoringFrameSidePanel,
-    AuthoringFrameSidePanelOverlay,
-    AuthoringFrameOverlay,
-} from '.';
-
-interface IProps {
-    header?: React.ReactNode;
-    main?: React.ReactNode;
-    sideBar?: React.ReactNode;
-    sideBarClosed?: boolean;
-    sidePanel?: React.ReactNode;
-    sideOverlay?: React.ReactNode;
-    sideOverlayOpen?: boolean;
-    sidePanelPinned?: boolean;
-    sidePanelOpen?: boolean;
-    leftPanel?: React.ReactNode;
-    rightPanelOpen?: boolean;
-    overlayPanel?: React.ReactNode;
-}
-
-export class AuthoringFrame extends React.PureComponent<IProps> {
-    render() {
-        return (
-            <AuthoringFrameContainer>
-                {this.props.header && <AuthoringFrameNavBar>{this.props.header}</AuthoringFrameNavBar>}
-                {this.props.leftPanel && <AuthoringFrameLeftBar>{this.props.leftPanel}</AuthoringFrameLeftBar>}
-                {this.props.main && <AuthoringFrameMain>{this.props.main}</AuthoringFrameMain>}
-                {this.props.sidePanel && (
-                    <AuthoringFrameSidePanel opened={this.props.sidePanelOpen} pinned={this.props.sidePanelPinned}>
-                        {this.props.sidePanel}
-                    </AuthoringFrameSidePanel>
-                )}
-                {this.props.sideOverlay && (
-                    <AuthoringFrameSidePanelOverlay opened={this.props.sideOverlayOpen}>
-                        {this.props.sideOverlay}
-                    </AuthoringFrameSidePanelOverlay>
-                )}
-                {this.props.sideBar && (
-                    <AuthoringFrameRightBar closed={this.props.sideBarClosed}>
-                        {this.props.sideBar}
-                    </AuthoringFrameRightBar>
-                )}
-
-                {this.props.overlayPanel && <AuthoringFrameOverlay>{this.props.overlayPanel}</AuthoringFrameOverlay>}
-            </AuthoringFrameContainer>
-        );
-    }
-}

package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export class AuthoringFrameContainer extends React.PureComponent<IProps> {
-    render() {
-        return <div className="sd-editor-grid">{this.props.children}</div>;
-    }
-}

package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export class AuthoringFrameLeftBar extends React.PureComponent<IProps> {
-    render() {
-        return <div className="sd-editor-grid__sidebar-left">{this.props.children}</div>;
-    }
-}

package/app-typescript/components/Layouts/AuthoringFrameMain.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export class AuthoringFrameMain extends React.PureComponent<IProps> {
-    render() {
-        return <div className="sd-editor-grid__editor-content">{this.props.children}</div>;
-    }
-}

package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export class AuthoringFrameNavBar extends React.PureComponent<IProps> {
-    render() {
-        return <div className="sd-editor-grid__editor-subnav">{this.props.children}</div>;
-    }
-}

package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export class AuthoringFrameOverlay extends React.PureComponent<IProps> {
-    render() {
-        return <div className="sd-editor-grid__editor-overlay">{this.props.children}</div>;
-    }
-}