@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/InboxMessage/style.ts

@@ -1,189 +0,0 @@
-export const stylesheet = {
-    inboxStyles:{
-        display: 'flex',
-        width: '100%',
-        height: '75vh',
-        background: '#ffff',
-        '& .conversations': {
-            width: '100%',
-        },
-        '& .inbox-sidebar': {
-            borderRight: '1px solid #eaeaea',
-            width: '25%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            '& .add-conversations': {
-                padding: '20px',
-                width: '100%',
-                borderTop: '1px solid #eaeaea',
-                '& .conversation-btn': {
-                    width: '100%',
-                },
-            },
-        },
-        '& .inbox-sidebar-active': {
-            borderRight: '1px solid #eaeaea',
-            width: '20%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            '& .add-conversations': {
-                padding: '20px',
-                width: '100%',
-                borderTop: '1px solid #eaeaea',
-                '& .conversation-btn': {
-                    width: '100%',
-                },
-            },
-        },
-        '& .allmessage-header': {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '10px',
-            '& h3': {
-                marginLeft: '15px',
-                marginTop: '15px',
-                color: 'black',
-                fontWeight: 'bold',
-                fontSize: '1em !important',
-            },
-            '& .ant-btn': {
-                padding: '4px',
-            },
-            '& .ant-btn:hover': {
-                background: '#eaeaea',
-            },
-        },
-        '& .header-section': {
-            marginBottom: '20px',
-            paddingBottom: '7px',
-            borderBottom: '1px solid #eaeaea',
-            height: '55px',
-        },
-        '& .ant-btn-circle': {
-            marginTop: '17px',
-            marginRight: '5px',
-            textAlign: 'center',
-            '& .ant-btn-circle:hover': {
-                backgroundColor: '#eaeaea',
-            },
-        },
-        '& .ant-popover-inner-content': {
-            padding: '0',
-        },
-        '& .border': {
-            height: '55px',
-            width: '115%',
-            borderBottom: '1px solid #eaeaea',
-        },
-        '& .msg-container': {
-            width: '80%',
-        },
-        '& .msg-container-active': {
-            width: '60%',
-            '& .border': {
-                width: '100%',
-            },
-        },
-        '& .inbox-details': {
-            width: '20%',
-            borderLeft: '1px solid #eaeaea',
-            transition: '500ms',
-        },
-        '&  .inbox-details-active': {
-            width: '0',
-            transition: '500ms',
-            opacity: '0',
-            border: 'none',
-            overflow: 'hidden',
-        },
-    },
-    modelStyle: {
-        display: 'flex',
-        flexDirection: 'column',
-        height: 'calc(90vh - 120px)',
-        width: '100%',
-        overflowX: 'hidden',
-        padding: '10px 0 15px',
-        maxHeight: 'calc(90vh - 80px)',
-        overflow: 'auto',
-        '& .ant-comment-content-author-name': {
-            fontWeight: '600',
-            lineHeight: '18px',
-            color: '#3d3c40',
-            fontSize: '.9em',
-        },
-        '& .ant-comment-content-detail': {
-            fontWeight: '600',
-            lineHeight: '18px',
-            color: '#9a9a9c',
-            fontSize: '.9em',
-        },
-        '& .root_modal': {
-            display: 'flex',
-            flexDirection: 'column',
-            height: 'calc(90vh - 120px)',
-            width: '100%',
-            '& .root_first': {
-                margin: '5px 0 10px',
-                width: '100%',
-            },
-            '& .root_sec': {
-                display: 'flex',
-                flexDirection: 'column',
-                flexGrow: '500',
-                height: '1px',
-                flex: '1 1 auto',
-                '& .nest_root_sec': {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '1px',
-                    flexGrow: '500',
-                    '& .nest_loop': {
-                        minHeight: '100%',
-                        overflow: 'auto',
-                    },
-                },
-            },
-        },
-        '& .search_box': {
-            display: 'flex',
-            '> input': {
-                borderRadius: '4px',
-                borderStyle: 'solid',
-                borderWidth: '1px',
-                width: '100%',
-                height: '36px',
-                borderColor: '#3d3c4033',
-                padding: '0px 15px',
-                fontSize: '14px',
-            },
-            '> button': {
-                maxWidth: '70px',
-                width: '100%',
-                marginLeft: '15px',
-                background: 'rgb(22, 109, 224)',
-                border: 'none',
-                color: 'white',
-            },
-            '& .temp': {
-                width: '100%',
-            },
-        },
-        '& .mid_line': {
-            '> p': {
-                display: 'flex',
-                justifyContent: 'space-between',
-                width: '100%',
-                padding: '10px 0px 0',
-                color: '#3d3c40',
-                opacity: '.6',
-                fontSize: '14px',
-            },
-        },
-    },
-}as any;

package/src/components/NavBar.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Link } from '@remix-run/react';
-
-const NavBar = () => (
-    <div>
-        <div><Link to="/">Home</Link> <Link to="/hello">Hello</Link> <Link to="/counter">Counter</Link></div>
-    </div>
-);
-
-export { NavBar };

package/src/components/channel_view/DirectChannelView.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import {PostViewPage} from "../post";
-import {IntlProvider} from "react-intl";
-import {useNavigate, useLocation} from "@remix-run/react";
-import Messenger from "../../containers/Messenger";
-
-const DirectChannelView = () => {
-    const location = useLocation();
-    const navigate = useNavigate();
-    return (
-        <div className="main_wraper">
-            <IntlProvider locale="en">
-                {/*<h1>Direct Chall Working</h1>*/}
-                <div className='chat_head_mid'>
-                    <PostViewPage channel={location.state.channel}
-                                  currentUsrId={location.state.currentUser.id}/>
-                </div>
-                <Messenger channel={location.state.channel}
-                           currentUsrId={location.state.currentUser.id}/>
-            </IntlProvider>
-        </div>
-    )
-}
-
-export default DirectChannelView

package/src/components/channel_view/PublicChannelView.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import {PostViewPage} from "../post";
-import {IntlProvider} from "react-intl";
-import {useNavigate, useLocation} from "@remix-run/react";
-import Messenger from "../../containers/Messenger";
-
-const PublicChannelView = () => {
-    const location = useLocation();
-    const navigate = useNavigate();
-    return (
-        <div className="main_wraper">
-            <IntlProvider locale="en">
-                {/*<h1>Public Channel Working</h1>*/}
-                <div className='chat_head_mid'>
-                    <PostViewPage channel={location.state.channel}
-                                  currentUsrId={location.state.currentUser.id}/>
-                </div>
-                <Messenger channel={location.state.channel}
-                           currentUsrId={location.state.currentUser.id}/>
-            </IntlProvider>
-        </div>
-    )
-}
-
-export default PublicChannelView

package/src/components/dashboard/menu_header.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-import { styleSheet } from '../../style';
-import { css } from '@emotion/css';
-import { FiSearch } from 'react-icons/fi';
-import { VscMenu } from 'react-icons/vsc';
-
-export const MenuHeader = ({ clickedChannel, handleClass }) => {
-    const { t } = useTranslation();
-    return (
-        <div className={css(styleSheet.customStyle as any)}>
-            <div className="navbar_header">
-                <button type="button" className="navbar_toggle" onClick={handleClass}>
-                    <span className="sr-only">
-                        <span>{t('messenger_box_browser.toggle_sidebar')}</span>
-                    </span>
-                    <span className="style--none icon icon__menu icon--sidebarHeaderTextColor">
-                        <VscMenu />
-                    </span>
-                </button>
-                <div className="navbar_brand">
-                    <div className="menu_wrapper ">
-                        {clickedChannel.id ? (
-                            <a>
-                                <span className="heading">
-                                    <span className="status "></span>
-                                    <span>
-                                        {clickedChannel.type === 'DIRECT'
-                                            ? clickedChannel.displayName
-                                            : clickedChannel.title}
-                                    </span>
-                                </span>
-                                <span className="fa fa-angle-down header-dropdown__icon" title="Dropdown Icon"></span>
-                            </a>
-                        ) : (
-                            ''
-                        )}
-                    </div>
-                </div>
-                <button
-                    type="button"
-                    className="navbar-toggle navbar-right__icon navbar-search pull-right"
-                    aria-label="Search"
-                >
-                    <span className="icon icon__search" aria-hidden="true">
-                        <FiSearch />
-                    </span>
-                </button>
-                <button
-                    type="button"
-                    className="navbar-toggle navbar-right__icon menu-toggle pull-right"
-                    data-toggle="collapse"
-                    data-target="#sidebar-nav"
-                >
-                    <span>
-                        <VscMenu />
-                    </span>
-                </button>
-            </div>
-        </div>
-    );
-};

package/src/components/dashboard/modals/direct_modal.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { Modal } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
-import { VscChromeClose } from 'react-icons/vsc';
-import Select from 'react-select';
-import { css } from '@emotion/css';
-import { styleSheet } from '../../../style';
-
-export const DirectModal = ({ showDirectChl, handleClose, selectedValues, handleSelect, options, handleGo }) => {
-    const { t } = useTranslation();
-    return (
-        <div className={css(styleSheet.customStyle as any)}>
-            <Modal show={showDirectChl} onHide={() => handleClose('directChannel')}>
-                <Modal.Header
-                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}
-                >
-                    <Modal.Title>{t('messenger_box_browser.direct_messages')}</Modal.Title>
-                    <VscChromeClose
-                        onClick={() => handleClose('dir ectChannel')}
-                        fontSize="16px"
-                        style={{ marginLeft: 'auto', cursor: 'pointer' }}
-                    />
-                </Modal.Header>
-                <Modal.Body>
-                    <div className={css(styleSheet.modelStyle as any)}>
-                        <div className="root_modal">
-                            <div className="root_first">
-                                <div className="search_box">
-                                    <Select
-                                        className="temp"
-                                        value={selectedValues.value}
-                                        onChange={handleSelect}
-                                        components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
-                                        autoFocus={true}
-                                        options={options}
-                                        isMulti={true}
-                                        menuIsOpen={true}
-                                    />
-                                    <button onClick={handleGo}>{t('messenger_box_browser.go')}</button>
-                                </div>
-                                <div className="mid_line">
-                                    <p>
-                                        {t('messenger_box_browser.use_browse_or_select')}
-                                        <span> </span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </Modal.Body>
-            </Modal>
-        </div>
-    );
-};

package/src/components/dashboard/modals.tsx

@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { Button, Modal } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
-import { VscChromeClose } from 'react-icons/vsc';
-import { css } from '@emotion/css';
-import { styleSheet } from '../../style';
-
-export const Modals = ({ directMoreModal, publicChlModal, handleClose, handleChange, handleCreate }) => {
-    const { t } = useTranslation();
-    return (
-        <div className={css(styleSheet.customStyle as any)}>
-            <Modal show={directMoreModal.showDirectMore} onHide={() => handleClose('publicMore')}>
-                <Modal.Header
-                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}
-                >
-                    <Modal.Title>{t('messenger_box_browser.direct_messages')}</Modal.Title>
-                    <div className={css(styleSheet.directMoreStyle as any)}>
-                        <button onClick={() => directMoreModal.handleShow('publicChannel', 'Public Channel')}>
-                            {t('messenger_box_browser.create_channel')}
-                        </button>
-                        <VscChromeClose
-                            onClick={() => handleClose('publicMore')}
-                            fontSize="16px"
-                            style={{ marginLeft: 'auto', cursor: 'pointer' }}
-                        />
-                    </div>
-                </Modal.Header>
-                <Modal.Body className={css(styleSheet.directMoreStyle as any)}>
-                    <div className="public_more_body">
-                        <input placeholder="Search Channels" />
-                        {directMoreModal.modalPublicChannels.length > 0 ? (
-                            <div className="loop_style">
-                                {directMoreModal.modalPublicChannels.map((chl, index) => {
-                                    return (
-                                        <div className="loop_div">
-                                            <h5 onClick={() => directMoreModal.handleJoin(chl.id)}>{chl.title}</h5>
-                                            <button onClick={() => directMoreModal.handleJoin(chl.id)}>
-                                                {t('messenger_box_browser.join')}
-                                            </button>
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                        ) : (
-                            <div className="no_channel_message">
-                                <p className="primary_message">
-                                    <span>{t('messenger_box_browser.no_more_channels_to_join')}</span>
-                                </p>
-                                <p className="secondary_message">
-                                    <span>{t('messenger_box_browser.click_create_new_channel')}</span>
-                                </p>
-                            </div>
-                        )}
-                    </div>
-                </Modal.Body>
-            </Modal>
-            <Modal show={publicChlModal.show} onHide={() => handleClose('publicChannel')}>
-                <Modal.Header
-                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}
-                >
-                    <Modal.Title>{t('messenger_box_browser.create_public_channel')}</Modal.Title>
-                    <VscChromeClose
-                        onClick={() => handleClose('publicChannel')}
-                        fontSize="16px"
-                        style={{ marginLeft: 'auto', cursor: 'pointer' }}
-                    />
-                </Modal.Header>
-                <Modal.Body>
-                    <div className="modal_div" style={{ textAlign: 'center' }}>
-                        <label
-                            style={{
-                                width: '20%',
-                                fontSize: '15px',
-                                fontWeight: 500,
-                                marginRight: '5px',
-                            }}
-                        >
-                            {t('messenger_box_browser.channel_name')}
-                        </label>
-                        <input
-                            type="text"
-                            name="name"
-                            style={{
-                                width: '62%',
-                                height: '35px',
-                                border: '1px solid gray',
-                            }}
-                            onChange={(e) => handleChange(e)}
-                        />
-                        <label
-                            style={{
-                                width: '20%',
-                                fontSize: '15px',
-                                fontWeight: 500,
-                                marginRight: '5px',
-                            }}
-                        >
-                            {t('messenger_box_browser.channel_description')}
-                        </label>
-                        <input
-                            type="text"
-                            name="description"
-                            style={{
-                                width: '62%',
-                                height: '35px',
-                                border: '1px solid gray',
-                            }}
-                            onChange={(e) => handleChange(e)}
-                        />
-                    </div>
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button onClick={() => handleClose('publicChannel')}>{t('messenger_box_browser.close')}</Button>
-                    <Button onClick={handleCreate} style={{ backgroundColor: '#2b5ebf', color: 'white' }}>
-                        {t('messenger_box_browser.create_channel')}
-                    </Button>
-                </Modal.Footer>
-            </Modal>
-        </div>
-    );
-};

package/src/components/messenger/avatar/index.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { css } from '@emotion/css';
-import { styleSheet } from './style';
-
-type IAvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-
-type IProps = {
-    text?: string;
-    url?: string | any;
-    size?: IAvatarSize;
-    username: string;
-    time:  any;
-};
-
-export const Avatar = ({ url, size = 'md', text, username, time }: IProps) => {
-    const classes = classNames(`Avatar Avatar-${size}`);
-
-    if (text) {
-        return (
-            <div className={css(styleSheet.avatarStyles)}>
-                <div className={classes + ` Avatar-plain`} data-content={text} />
-            </div>
-        );
-    }
-    return (
-        <div className={css(styleSheet.avatarStyles as any)}>
-            <a href="">
-                <img src={url} className={classes} alt="" />
-            </a>
-            <div className="username">
-                <a href="">
-                    <h4>{username}</h4>
-                </a>
-                <p>{time}</p>
-            </div>
-        </div>
-    );
-};

package/src/components/messenger/avatar/style.ts

@@ -1,86 +0,0 @@
-export const styleSheet = {
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    avatarStyles: {
-        display: 'flex',
-        alignItems: 'center',
-        '& .Avatar': {
-            '-webkit-user-select': 'none',
-            /* Chrome all / Safari all */
-            '-moz-user-select': 'none',
-            /* Firefox all */
-            '-ms-user-select': 'none',
-            /* IE 10+ */
-            'user-select': 'none',
-            verticalAlign: 'sub',
-        },
-        '& .Avatar, .Avatar:focus, .Avatar.a11y--focused': {
-            borderRadius: '50%',
-        },
-        '& .Avatar.Avatar-xs': {
-            width: '20px',
-            minWidth: '20px',
-            height: '20px',
-            fontSize: '9.5px',
-        },
-        '& .Avatar.Avatar-sm': {
-            width: '24px',
-            minWidth: '24px',
-            height: '24px',
-            fontSize: '10px',
-        },
-        '& .Avatar.Avatar-md': {
-            width: '32px',
-            minWidth: '32px',
-            height: '32px',
-            fontSize: '12px',
-        },
-        '& .Avatar.Avatar-lg': {
-            width: '36px',
-            minWidth: '36px',
-            height: '36px',
-            fontSize: '14px',
-        },
-        '& .Avatar.Avatar-xl': {
-            width: '50px',
-            minWidth: '50px',
-            height: '50px',
-            fontSize: '18px',
-        },
-        '& .Avatar.Avatar-xxl': {
-            width: '128px',
-            minWidth: '128px',
-            height: '128px',
-            fontSize: '44px',
-        },
-        '& .Avatar.Avatar-plain': {
-            position: 'relative',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: 'red',
-        },
-        '& .Avatar.Avatar-plain::before': {
-            position: 'absolute',
-            display: 'inline-flex',
-            width: '100%',
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: '50%',
-            color: 'rgba(0, 1, 0, )',
-            content: 'attr(data-content)',
-        },
-        '& .username': {
-            display: 'flex',
-            marginLeft: '10px',
-        },
-        '& .username a': {
-            color : 'black',
-            textDecoration : 'none'
-        },
-        '& .username p': {
-            marginTop: '8px',
-            marginLeft: '10px',
-        },
-    },
-} as any;