initial commit

webapp/src/components/bottom_team_sidebar.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const BottomTeamSidebarComponent = () => (
+    <i
+        className='icon fa fa-plug'
+        style={{color: 'white'}}
+    />
+);
+
+export default BottomTeamSidebarComponent;

webapp/src/components/icons.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const MainMenuMobileIcon = () => (
+    <i className='icon fa fa-plug'/>
+);
+
+export const ChannelHeaderButtonIcon = () => (
+    <i className='icon fa fa-plug'/>
+);

webapp/src/components/left_sidebar_header/index.js

@@ -0,0 +1,11 @@
+import {connect} from 'react-redux';
+
+import {isEnabled} from 'selectors';
+
+import LeftSidebarHeader from './left_sidebar_header';
+
+const mapStateToProps = (state) => ({
+    enabled: isEnabled(state),
+});
+
+export default connect(mapStateToProps)(LeftSidebarHeader);

webapp/src/components/left_sidebar_header/left_sidebar_header.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// LeftSidebarHeader is a pure component, later connected to the Redux store so as to
+// show the plugin's enabled / disabled status.
+export default class LeftSidebarHeader extends React.PureComponent {
+    static propTypes = {
+        enabled: PropTypes.bool.isRequired,
+    }
+
+    render() {
+        const iconStyle = {
+            display: 'inline-block',
+            margin: '0 7px 0 1px',
+        };
+        const style = {
+            margin: '.5em 0 .5em',
+            padding: '0 12px 0 15px',
+            color: 'rgba(255,255,255,0.6)',
+        };
+
+        return (
+            <div style={style}>
+                <i
+                    className='icon fa fa-plug'
+                    style={iconStyle}
+                />
+                {'Sample Plugin: '} {this.props.enabled ? <span>{ 'Enabled' }</span> : <span>{ 'Disabled' }</span>}
+            </div>
+        );
+    }
+}

webapp/src/components/post_type.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const {formatText, messageHtmlToComponent} = window['post-utils'];
+
+export default class PostType extends React.PureComponent {
+    static propTypes = {
+        post: PropTypes.object.isRequired,
+        theme: PropTypes.object.isRequired,
+    }
+
+    render() {
+        const style = getStyle(this.props.theme);
+        const post = {...this.props.post};
+        const message = post.message || '';
+
+        const formattedText = messageHtmlToComponent(formatText(message));
+
+        return (
+            <div>
+                {formattedText}
+                <pre style={style.configuration}>
+                    {JSON.stringify(post.props, null, 4)}
+                </pre>
+            </div>
+        );
+    }
+}
+
+const getStyle = (theme) => ({
+    configuration: {
+        padding: '1em',
+        color: theme.centerChannelBg,
+        backgroundColor: theme.centerChannelColor,
+    },
+});

webapp/src/components/root/index.js

@@ -0,0 +1,17 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {closeRootModal} from 'actions';
+import {isRootModalVisible} from 'selectors';
+
+import Root from './root';
+
+const mapStateToProps = (state) => ({
+    visible: isRootModalVisible(state),
+});
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+    close: closeRootModal,
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(Root);

webapp/src/components/root/root.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Root = ({visible, close, theme}) => {
+    if (!visible) {
+        return null;
+    }
+
+    const style = getStyle(theme);
+
+    return (
+        <div
+            style={style.backdrop}
+            onClick={close}
+        >
+            <div style={style.modal}>
+                { 'You have triggered the root component of the sample plugin.' }
+                <br/>
+                <br/>
+                { 'Click anywhere to close.' }
+            </div>
+        </div>
+    );
+};
+
+Root.propTypes = {
+    visible: PropTypes.bool.isRequired,
+    close: PropTypes.func.isRequired,
+    theme: PropTypes.object.isRequired,
+};
+
+const getStyle = (theme) => ({
+    backdrop: {
+        position: 'absolute',
+        display: 'flex',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.50)',
+        zIndex: 2000,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    modal: {
+        height: '250px',
+        width: '400px',
+        padding: '1em',
+        color: theme.centerChannelColor,
+        backgroundColor: theme.centerChannelBg,
+    },
+});
+
+export default Root;

webapp/src/components/user_actions/index.js

@@ -0,0 +1,12 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {openRootModal} from 'actions';
+
+import UserActions from './user_actions';
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+    openRootModal,
+}, dispatch);
+
+export default connect(null, mapDispatchToProps)(UserActions);

webapp/src/components/user_actions/user_actions.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class UserActionsComponent extends React.PureComponent {
+    static propTypes = {
+        openRootModal: PropTypes.func.isRequired,
+        theme: PropTypes.object.isRequired,
+    }
+
+    onClick = () => {
+        this.props.openRootModal();
+    }
+
+    render() {
+        const style = getStyle(this.props.theme);
+
+        return (
+            <div>
+                { 'Sample Plugin: '}
+                <button
+                    style={style.button}
+                    onClick={this.onClick}
+                >
+                    {'Action'}
+                </button>
+            </div>
+        );
+    }
+}
+
+const getStyle = (theme) => ({
+    button: {
+        color: theme.buttonColor,
+        backgroundColor: theme.buttonBg,
+    },
+});

webapp/src/components/user_attributes.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default class UserAttributes extends React.PureComponent {
+    render() {
+        return (
+            <div>{'Sample Plugin: User Attributes'}</div>
+        );
+    }
+}
+