@capillarytech/creatives-library 0.0.1

package/components/Sidebar/index.js

@@ -0,0 +1,231 @@
+import React, { PropTypes } from 'react';
+// import styled from 'styled-components';
+import { Accordion, Icon, Input, Button } from 'semantic-ui-react';
+import { Select } from 'antd';
+import { FormattedMessage } from 'react-intl';
+import _ from 'lodash';
+import { Link } from 'react-router';
+import messages from './messages';
+import './_sidebar.scss';
+
+const Option = Select.Option;
+
+class Sidebar extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      activeItem: '',
+      activeIndex: 0,
+      menuItems: this.props.menuData,
+      searchText: '',
+      visible: true,
+    };
+    this.handleItemClick = this.handleItemClick.bind(this);
+    this.handleTitleClick = this.handleTitleClick.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
+    this.toggleSideNav = this.toggleSideNav.bind(this);
+    this.getLinkElement = this.getLinkElement.bind(this);
+    this.selectActiveLinkFromUrl = this.selectActiveLinkFromUrl.bind(this);
+    this.onProductChange = this.onProductChange.bind(this);
+  }
+
+  componentWillMount() {
+    this.selectActiveLinkFromUrl(this.props);
+  }
+
+  componentWillReceiveProps(nextProp) {
+    this.selectActiveLinkFromUrl(nextProp);
+    this.setState({ menuItems: nextProp.menuData });
+  }
+
+  onProductChange(value) {
+    const selectedProductIndex = _.findIndex(this.props.productMenuData, {value: value.toLowerCase()});
+    window.location = this.props.productMenuData[selectedProductIndex].url;
+    // console.log('On Product selected ', value, selectedProductIndex);
+  }
+
+  getAccordian(content, keyValue) {
+    return (<Accordion key={keyValue}>{content}</Accordion>);
+  }
+
+  getAccordionTitle(title) {
+    return (<Accordion.Title>
+      <div className="header item">
+        <Icon name="dropdown" /> {title}
+      </div>
+    </Accordion.Title>);
+  }
+
+  getAccordionContent(links, keyValue) {
+    return (<Accordion.Content key={keyValue}>{links}</Accordion.Content>);
+  }
+
+  getLinkElement(to, text, value) {
+    const selectedItem = (value && value.trim().toLowerCase() === this.state.activeItem) ? 'selected' : '';
+    if (text.toLowerCase().includes(this.state.searchText.toLowerCase())) {
+      return (
+          (text.toLowerCase().includes(this.state.searchText.toLowerCase())) ?
+            <Link to={to} className={`item menu-item ${selectedItem}`} onClick={this.handleItemClick} key={to} title={text}>{text}</Link>
+              : ''
+      );
+    }
+    return '';
+  }
+
+  selectActiveLinkFromUrl(props) {
+    const activeRoute = props.router.routes[props.router.routes.length - 1];
+    const activeRouteName = (activeRoute.name && activeRoute.name.trim().toLowerCase()) || '';
+    let selectedItem = '';
+    let selectedIndex = -1;
+    _.forEach(props.menuData, (menuItem, menuIndex) => {
+      if (menuItem.items && typeof menuItem.items === 'object') {
+        _.forEach(menuItem.items, (menuData) => {
+          // console.log('Menua Data ', menuData, activeRouteName, menuItem);
+          if ((menuItem.id && menuData.id.toLowerCase() === activeRouteName.toLowerCase()) || (menuData.value.toLowerCase() === activeRouteName.toLowerCase())) {
+            selectedIndex = menuIndex;
+            selectedItem = activeRouteName.toLowerCase();
+          } else if (activeRouteName === 'assets') {
+            selectedIndex = menuIndex;
+            selectedItem = 'gallery';
+          }
+        });
+      } else if (menuItem.value.toLowerCase() === activeRouteName.toLowerCase()) {
+        selectedIndex = menuIndex;
+        selectedItem = activeRouteName.toLowerCase();
+      }
+    });
+    this.setState({ activeIndex: selectedIndex, activeItem: selectedItem });
+  }
+
+  toggleSideNav(e) {
+    e.preventDefault();
+    this.setState({ visible: !this.state.visible }, () => {
+      window.dispatchEvent(new Event('resize'));
+      if (!this.state.visible) {
+        document.getElementById('cap-sidebar').classList.add('sidebar-collapse');
+      } else {
+        document.getElementById('cap-sidebar').classList.remove('sidebar-collapse');
+      }
+    });
+  }
+
+  createAccordianElements(title, contentItems) {
+    const accordian = [];
+    accordian.push(this.getAccordionTitle(title));
+    const contentLink = contentItems.map((key) =>
+      this.getLinkElement(key.link, key.text, key.value),
+    );
+    accordian.push(this.getAccordionContent(contentLink));
+    return accordian;
+  }
+
+  createNavigationElement(menuItems) {
+    const navArray = [];
+    _.forEach(menuItems, (key, index) => {
+      const headerTitle = key.group;
+      const isCategory = Object.prototype.hasOwnProperty.call(key, 'categories');
+      if (isCategory) { // attach nested Accordion
+        const accordian = [];
+        const nestedAcordian = [];
+        accordian.push(this.getAccordionTitle(headerTitle));
+        const contentAccordian = this.getAccordian(this.createNavigationElement(key.categories), `nestedAccordian-${index}`);
+        nestedAcordian.push(contentAccordian);
+        const content = this.getAccordionContent(nestedAcordian, `content-${index}`);
+        accordian.push(content);
+        navArray.push(accordian);
+      } else { // attach items to existing accordian
+        const accordianElem = this.createAccordianElements(headerTitle, key.items);
+        navArray.push(accordianElem);
+      }
+    });
+    // const selectedItem = (this.state.activeItem === 'gallery') ? 'selected' : '';
+    // navArray.push(
+    //   <Link
+    //     to={'/assets'}
+    //     className={`item menu-item ${selectedItem} assetItem`}
+    //     key={'assets'}
+    //     title={'Gallery'}
+    //     onClick={(e) => this.handleItemClick(e)}
+    //   >Gallery</Link>
+    // );
+    return navArray;
+  }
+
+  handleOpen() {
+    this.setState({ isOpen: true });
+  }
+
+  handleClose() {
+    this.setState({ isOpen: false });
+  }
+
+  handleItemClick(e) {
+    this.setState({ activeItem: (e.target.text && e.target.text.trim().toLowerCase()) || '' });
+  }
+
+  handleTitleClick(e, i) {
+    this.setState({ activeIndex: this.state.activeIndex === i ? -1 : i });
+  }
+
+  handleSearch(e) {
+    this.setState({ searchText: e.target.value });
+  }
+
+
+  render() {
+    const visible = this.state.visible;
+    const push = !visible ? 'push' : '';
+    const collapse = !visible ? 'collapse' : '';
+    const toggle = visible ? 'hide' : '';
+
+    // const types = [{ text: 'Creatives', value: 'Creatives' }];
+    const productOptions = [];
+    if (this.props.productMenuData.length > 1) {
+      _.forEach(this.props.productMenuData, (product) => {
+        productOptions.push(
+          <Option key={product.text} value={product.text}>{product.text}</Option>
+        );
+      });
+    }
+    return (
+      <div className="sidebar-container">
+        <div className={`sidebar sidebar-width ${collapse}`}>
+          <div className="searchbar">
+            <FormattedMessage {...messages.inputPlaceholder}>{(message) => <Input icon="search" className="sidebar-search" placeholder={message} fluid onChange={this.handleSearch} />}</FormattedMessage>
+            <a href="" onClick={this.toggleSideNav}><i className="material-icons control-arrow">arrow_back</i></a>
+          </div>
+
+          { this.props.productMenuData.length > 1 ?
+            <Select className="icon product-select-menu" defaultValue={'CAMPAIGNS'} onChange={this.onProductChange}>
+              {productOptions}
+            </Select>
+            :
+            <div className="module-menu-header">{this.props.productMenuData[0].text}</div>
+          }
+
+          <div className="menu-header">
+            <span className="menu-title"><FormattedMessage {...messages.menuTitle} /> </span>
+            {this.props.actionComponents}
+          </div>
+          <Accordion className="sidebar-accordian" activeIndex={this.state.activeIndex} onTitleClick={this.handleTitleClick}>
+            {this.props.menuData && this.createNavigationElement(this.props.menuData)}
+          </Accordion>
+        </div>
+        <div className={`togglebar ${toggle} ${push}`}>
+          <Button icon className="btn-toggle" onClick={this.toggleSideNav}>
+            <Icon name="bars" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+Sidebar.propTypes = {
+  menuData: PropTypes.array.isRequired,
+  productMenuData: PropTypes.array.isRequired,
+  actionComponents: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+};
+
+export default Sidebar;

package/components/Sidebar/messages.js

@@ -0,0 +1,21 @@
+/*
+ * Sidebar Messages
+ *
+ * This contains all the text for the Sidebar component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  inputPlaceholder: {
+    id: 'app.components.Sidebar.input.placeholder',
+    defaultMessage: 'Search...',
+  },
+  menuTitle: {
+    id: 'app.components.Sidebar.menuTitle',
+    defaultMessage: 'Menu',
+  },
+  creatives: {
+    id: 'app.components.Sidebar.creatives',
+    defaultMessage: 'Creatives',
+  },
+});

package/components/Sidebar/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import Sidebar from '../index';
+
+// describe('<Sidebar />', () => {
+//   it('Expect to have unit tests specified', () => {
+//     expect(true).toEqual(false);
+//   });
+// });

package/components/SlideBox/_slideBox.scss

@@ -0,0 +1,63 @@
+.modal-slidebox-wrapper {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0.56);
+  z-index: 10002;
+
+  #slidebox-container {
+    position: relative;
+    left: 40vw;
+    width: 60vw;
+    height: 100vh;
+    background: rgba(255,255,255,1);
+    // padding: 0 24px 0 24px;
+    overflow-y: auto;
+    // font-family: 'proxima-nova';
+
+    .slidebox-header {
+      display: inline-flex;
+      width: 100%;
+      padding: 16px 24px;
+      -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      margin-bottom: 6px;
+      height: 56px;
+      align-items: center;
+      .heading-title {
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 600;
+        width: 97%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &:first-letter{
+          text-transform: capitalize;
+        }
+      }
+      .close-slidebox{
+        cursor: pointer;
+      }
+    }
+
+    #slidebox-content {
+      padding: 0 0px 0 24px;
+    }
+  }
+}
+
+.show-slidebox {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 1s linear 0.33s, opacity 0.33s linear;
+}
+.hide-slidebox {
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: 0s;
+}

package/components/SlideBox/index.js

@@ -0,0 +1,47 @@
+import React, { PropTypes } from 'react';
+import './_slideBox.scss';
+
+class SlideBox extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={this.props.show ? "modal-slidebox-wrapper show-slidebox" : "modal-slidebox-wrapper hide-slidebox"}>
+        <div id="slidebox-container" style={{ width: `${this.props.width}vw`, left: `${100 - this.props.width}vw`}}>
+          <div className="slidebox-header">
+            <div className="heading-title">
+              {this.props.header}
+            </div>
+            <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
+              <i className="material-icons close-slidebox">close</i>
+            </div>
+          </div>
+
+          <div id="slidebox-content">
+            {this.props.isLoading ? <div style={{height: '100%', lineHeight: '90vh', textAlign: 'center', fontSize: '18px', fontFamily: "open-sans"}}>{this.props.loadingText}</div> : this.props.content}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+SlideBox.defaultProps = {
+  show: false,
+  width: 40,
+  loadingText: 'loading',
+  isLoading: false,
+};
+
+SlideBox.propTypes = {
+  header: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]).isRequired,
+  content: PropTypes.element.isRequired,
+  show: PropTypes.bool,
+  handleClose: PropTypes.func.isRequired,
+  width: PropTypes.number,
+  loadingText: PropTypes.string,
+  isLoading: PropTypes.bool,
+};
+
+export default SlideBox;

package/components/SlideBox/tests/index.test.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import SlideBox from '../index';
+
+describe('<SlideBox />', () => {
+  let props;
+  let mountedSlideBox;
+
+  const slideBox = () => {
+    if (!mountedSlideBox) {
+      mountedSlideBox = mount(
+        <SlideBox {...props} />
+      );
+    }
+    return mountedSlideBox;
+  };
+
+  beforeEach(() => {
+    props = {
+      header: <h1>Header</h1>,
+      content: <p>Content</p>,
+      show: undefined,
+      handleClose: jest.fn(),
+    };
+    mountedSlideBox = undefined;
+  });
+
+  it('always renders a wrapping div', () => {
+    const divs = slideBox().find("div");
+    expect(divs.length).toBeGreaterThan(0);
+  });
+
+  describe('the rendered div', () => {
+    it('contains everything else that gets rendered', () => {
+      const divs = slideBox().find("div");
+      const wrappingDiv = divs.first();
+      expect(wrappingDiv.children()).toEqual(slideBox().children());
+    });
+
+    it('has a className of show-slidebox if "show" props is true', () => {
+      props.show = true;
+      const divs = slideBox().find("div");
+      const wrappingDiv = divs.first();
+      expect(wrappingDiv.props().className).toBe('modal-slidebox-wrapper show-slidebox');
+    });
+
+    it('has a className of hide-slidebox if "show" props is false', () => {
+      props.show = false;
+      const divs = slideBox().find("div");
+      const wrappingDiv = divs.first();
+      expect(wrappingDiv.props().className).toBe('modal-slidebox-wrapper hide-slidebox');
+    });
+
+    it('should render a div with class heading-title', () => {
+      const divs = slideBox().find("div");
+      const header = divs.find('.heading-title');
+      expect(header.length).toBe(1);
+    });
+
+    it('should render a div with id box-actions', () => {
+      const divs = slideBox().find("div");
+      const header = divs.find('#box-actions');
+      expect(header.length).toBe(1);
+    });
+  });
+
+  describe('Slidebox header', () => {
+    it('renders the element passed as header prop', () => {
+      const renderedComponent = shallow(<SlideBox {...props}/>);
+      expect(renderedComponent.find('.heading-title').contains(props.header)).toBe(true);
+    });
+  });
+
+  describe('Slidebox Content', () => {
+    it('renders the element passed as content prop', () => {
+      const renderedComponent = shallow(<SlideBox {...props}/>);
+      expect(renderedComponent.find('#slidebox-content').contains(props.content)).toBe(true);
+    });
+  });
+
+  describe('when handleClose is defined', () => {
+    it('sets onClick action of action box to be same as handleClose ', () => {
+      const actionBox = slideBox().find('#box-actions');
+      expect(actionBox.props().onClick).toBe(props.handleClose);
+    });
+  });
+
+  describe('Box Actions Div', () => {
+    it('renders one icon', () => {
+      const renderedComponent = shallow(<SlideBox {...props}/>);
+      const boxActionDiv = renderedComponent.find('#box-actions').first();
+      const icon = boxActionDiv.find('i');
+      expect(icon.length).toBe(1);
+    });
+
+    it('has close as the content for rendered icon', () => {
+      const renderedComponent = shallow(<SlideBox {...props}/>);
+      const boxActionDiv = renderedComponent.find('#box-actions').first();
+      const icon = boxActionDiv.find('i');
+      expect(icon.node.props.children).toBe('close');
+    });
+  });
+});

package/components/SmsEditor/index.js

@@ -0,0 +1,53 @@
+/**
+*
+* SmsEditor
+*
+*/
+
+import React, {PropTypes} from 'react';
+// import styled from 'styled-components';
+import {TextArea} from 'semantic-ui-react';
+
+
+class SmsEditor extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    if (this.props.content) {
+      this.state = {
+        content: this.props.content,
+      };
+    } else {
+      this.state = {
+        content: '',
+      };
+    }
+    this.onContentChange = this.onContentChange.bind(this);
+  }
+
+  onContentChange(e, data) {
+    this.props.onDataChange(data);
+    this.setState({
+      content: data,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <TextArea
+          autoHeight
+          style={{minHeight: 100}}
+          value={this.props.content}
+          onChange={(e, data) => { this.onContentChange(e, data); }}
+        />
+      </div>
+    );
+  }
+}
+
+SmsEditor.propTypes = {
+  content: PropTypes.string,
+  onDataChange: PropTypes.func,
+};
+
+export default SmsEditor;

package/components/SmsEditor/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import SmsEditor from '../index';
+
+// describe('<SmsEditor />', () => {
+//   it('Expect to have unit tests specified', () => {
+//     expect(true).toEqual(false);
+//   });
+// });

package/components/SmsTest/index.js

@@ -0,0 +1,115 @@
+/**
+*
+* SmsTest
+*
+*/
+
+import React from 'react';
+// import styled from 'styled-components';
+
+// import { FormattedMessage } from 'react-intl';
+// import messages from './messages';
+import FormBuilder from '../FormBuilder';
+
+class SmsTest extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.saveFormData = this.saveFormData.bind(this);
+    this.onFormDataChange = this.onFormDataChange.bind(this);
+    this.onTemplateNameChange = this.onTemplateNameChange.bind(this);
+    this.onTemplateContentChange = this.onTemplateContentChange.bind(this);
+  }
+
+  onTemplateNameChange(name) {
+    console.log('Template name changed to ', name);
+  }
+
+  onTemplateContentChange(content) {
+    console.log('Template content changed to ', content);
+  }
+
+  onFormDataChange(formData) {
+    console.log('Form data changed is ', formData);
+  }
+
+  saveFormData(formData) {
+    //Logic to save in db etc
+    console.log('Saving form data', formData);
+  }
+  render() {
+    const schema = {
+      inputFields: [
+        {
+          id: "template-name",
+          label: "Template Name",
+          type: "input",  //Resembles component to be used
+          metaType: "text",
+          datatype: "string",
+          required: true,
+          placeholder: "Please input template name.",
+          fluid: true,
+          styling: "semantic",
+          order: 1,
+          customComponent: false,
+          supportedEvents: {
+            onChange: this.onTemplateNameChange,
+          },
+        },
+        {
+          id: "sms-editor",
+          label: "Template Content",
+          type: "SmsEditor",
+          metaType: "text",
+          datatype: "string",
+          required: true,
+          placeholder: "Please input sms template content.",
+          fluid: false,
+          styling: "custom",
+          order: 2,
+          customComponent: true,
+          supportedEvents: {
+            onChange: this.onTemplateContentChange,
+          },
+        },
+      ],
+      actionFields: [
+        {
+          id: "submit-button",
+          metaType: "submit-button",
+          type: "button",
+          value: "Create Template",
+          customComponent: false,
+          styling: "semantic",
+          order: 3,
+          fluid: false,
+          supportedEvents: {
+            onClick: this.saveFormData,
+          },
+        },
+      ],
+      channel: "SMS",
+      module: "Campaigns",
+    };
+    const json = {
+      "sms-editor": "asa121s",
+      "template-name": "台北",
+    };
+    return (
+      <div>
+        <FormBuilder
+          formData={json}
+          schema={schema}
+          onSubmit={this.saveFormData}
+          onChange={this.onFormDataChange}
+          usingTabContainer
+         />
+      </div>
+    );
+  }
+}
+
+SmsTest.propTypes = {
+
+};
+
+export default SmsTest;

package/components/SmsTest/messages.js

@@ -0,0 +1,13 @@
+/*
+ * SmsTest Messages
+ *
+ * This contains all the text for the SmsTest component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.SmsTest.header',
+    defaultMessage: 'This is the SmsTest component !',
+  },
+});

package/components/SmsTest/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import SmsTest from '../index';
+
+// describe('<SmsTest />', () => {
+//   it('Expect to have unit tests specified', () => {
+//     expect(true).toEqual(false);
+//   });
+// });