@unbxd-ui/unbxd-react-components 0.2.107-beta.2 → 0.2.108-beta.2

package/src/components/List/List.js

@@ -1,72 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const ListItem = (props) => {
-    let { itemData = {} } = props;
-    let { name } = itemData;
-
-    return (<li className="RCB-list-item">{name}</li>);
-};
-
-ListItem.propTypes = {
-    itemData: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired
-    }).isRequired
-};
-
-const List = (props) => {
-    const {
-        className = "",
-        items,
-        idAttribute,
-        ListItem,
-        showNoDataMsg,
-        noDataComponent,
-        ...restProps
-    } = props;
-
-    if (!items.length && showNoDataMsg) {
-        return noDataComponent;
-    }
-
-    return (<ul className={`RCB-list ${className}`}>
-        {items.map((itemData, index) => {
-            return (
-                <ListItem itemData={itemData} index={index} key={itemData[idAttribute]} idAttribute={idAttribute} {...restProps} />
-            )
-        })}
-    </ul>);
-}
-
-const DefaultNoDataComponent = () => {
-    return (
-        <div className="RCB-no-data">No data found</div>
-    )
-}
-
-List.propTypes = {
-    /** Pass any additional classNames to List component */
-    className: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        name: PropTypes.any
-    })).isRequired,
-    idAttribute: PropTypes.string,
-    /** Pass a custom ListItem component */
-    ListItem: PropTypes.oneOfType([
-        PropTypes.instanceOf(Element),
-        PropTypes.func
-    ]),
-    noDataComponent: PropTypes.any
-}
-
-List.defaultProps = {
-    className: "",
-    items: [],
-    idAttribute: "id",
-    ListItem,
-    noDataComponent: <DefaultNoDataComponent />
-}
-
-export default List;

package/src/components/List/index.js

@@ -1,3 +0,0 @@
-import List from "./List";
-
-export default List;

package/src/components/List/list.css

@@ -1 +0,0 @@
-.RCB-list{margin:0;padding:0}

package/src/components/List/list.stories.js

@@ -1,28 +0,0 @@
-import React from "react";
-
-import { FRUITS_LIST } from "../../../public/Constants";
-import List from "./List";
-
-export default {
-  title: "List",
-};
-
-export const SimpleUsage = () => {
-  return <List items={FRUITS_LIST} />;
-};
-
-export const CustomListItem = () => {
-  /* eslint-disable react/prop-types */
-  const ListItem = ({ itemData }) => {
-    let { name } = itemData;
-
-    return <li>{`Custom ListItem ---> ${name}`}</li>;
-  };
-  /* eslint-enable react/prop-types */
-
-  return <List items={FRUITS_LIST} ListItem={ListItem} />;
-};
-
-CustomListItem.story = {
-  name: "Custom ListItem",
-};

package/src/components/List/listCore.css

@@ -1 +0,0 @@
-.RCB-list{margin:0;padding:0}

package/src/components/List/listCore.scss

@@ -1,6 +0,0 @@
-.RCB {
-    &-list {
-        margin: 0;
-        padding: 0;
-    }
-}

package/src/components/Modal/Modal.js

@@ -1,99 +0,0 @@
-import React, { forwardRef, useState, useImperativeHandle, useEffect } from "react";
-import ReactDOM from "react-dom";
-import PropTypes from "prop-types";
-
-const ModalContent = (props) => {
-    const {
-        className,
-        children,
-        title,
-        titleComponent,
-        showClose,
-        showHeader,
-        hideModal
-    } = props;
-
-    return (<div className={`RCB-modal ${className}`}>
-        <div className="RCB-modal-body">
-            {showHeader && <div className="RCB-modal-header">
-                <span className="RCB-modal-title">{titleComponent ? titleComponent : title}</span>
-                {showClose && <span className="RCB-modal-close" onClick={hideModal}></span>}
-            </div>}
-            <div className="RCB-modal-content">{children}</div>
-        </div>
-    </div>);
-};
-
-ModalContent.propTypes = {
-    /** Pass any additional classNames to Modal component */
-    className: PropTypes.string,
-    title: PropTypes.string,
-    titleComponent: PropTypes.element,
-    showClose: PropTypes.bool,
-    showHeader: PropTypes.bool,
-    hideModal: PropTypes.func
-};
-
-/** Displays a full screen modal */
-let Modal = (props, ref) => {
-    const { isOpen, onClose, ...restProps } = props;
-    const [ isModalOpen, setIsModalOpen ] = useState(isOpen);
-    const bodyElement = document.getElementsByTagName("body")[0];
-
-    const showModal = () => {
-        setIsModalOpen(true);
-    };
-
-    const hideModal = () => {
-        setIsModalOpen(false);
-        if (typeof(onClose) === "function") {
-            onClose();
-        }
-    };
-
-    useEffect(() => {
-        setIsModalOpen(isOpen);
-    }, [isOpen]);
-
-    /* add methods that can be accessed via this component's ref */
-    useImperativeHandle(ref, () => ({
-        showModal: showModal,
-        hideModal: hideModal
-    }));
-
-    return isModalOpen ? ReactDOM.createPortal(
-        <ModalContent {...restProps} hideModal={hideModal} />,
-        bodyElement
-    ) : null;
-};
-
-Modal = forwardRef(Modal);
-
-Modal.propTypes = {
-    /** Pass any additional classNames to Modal component */
-    className: PropTypes.string,
-    /** Header or title for the modal */
-    title: PropTypes.string,
-    /** Component to render as modal title. This will be given preference over "title" prop */
-    titleComponent: PropTypes.element,
-    /** indicates if the modal should be opened by default */
-    isOpen: PropTypes.bool,
-    /** indicates whether to show or hide the close button */
-    showClose: PropTypes.bool,
-    /** indicates whether to show or hide the modal header */
-    showHeader: PropTypes.bool,
-    /** callback function that gets called when the modal closes */
-    onClose: PropTypes.func
-};
-
-Modal.defaultProps = {
-    className: "",
-    title: "",
-    isOpen: false,
-    showClose: true,
-    showHeader: true
-};
-
-Modal.displayName = "Modal";
-
-export default Modal;

package/src/components/Modal/Modal.stories.js

@@ -1,54 +0,0 @@
-import React, { useRef } from "react";
-import Modal from "./Modal";
-
-const ModalExample = () => {
-  return (
-    <Modal isOpen={true} title="This is the header">
-      <div>From inside a modal</div>
-    </Modal>
-  );
-};
-
-const ModalClickExample = () => {
-  const modalRef = useRef();
-  const showModal = () => {
-    modalRef.current.showModal();
-  };
-
-  return (
-    <div>
-      <a href="javascript:void(0)" onClick={showModal}>
-        Show Modal
-      </a>
-      <Modal title="This is the header" ref={modalRef}>
-        <div>From inside a modal</div>
-      </Modal>
-    </div>
-  );
-};
-
-export const ActivateOnClick = () => {
-  return <ModalClickExample />;
-};
-
-ActivateOnClick.story = {
-  name: "Activate on click",
-};
-
-export const OpenByDefault = () => {
-  return <ModalExample />;
-};
-
-OpenByDefault.story = {
-  name: "Open by default",
-};
-
-export default {
-    title: "Modals|Page modal",
-    parameters: {
-      info: {
-        propTables: [Modal],
-        propTablesExclude: [ModalExample, ModalClickExample],
-      }
-    }
-};

package/src/components/Modal/index.js

@@ -1,3 +0,0 @@
-import Modal from "./Modal";
-
-export default Modal;

package/src/components/Modal/modal.css

@@ -1 +0,0 @@
-.RCB-modal{position:absolute;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center}.RCB-modal-body{background:#FFF;padding:20px}.RCB-modal-header{display:flex;margin-bottom:10px}.RCB-modal-title{flex:1}.RCB-modal-close{cursor:pointer}

package/src/components/Modal/modalCore.css

@@ -1 +0,0 @@
-.RCB-modal{position:fixed;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center;z-index:2}.RCB-modal-body{background:#FFF;padding:20px}.RCB-modal-header{display:flex;margin-bottom:10px}.RCB-modal-title{flex:1}.RCB-modal-close{cursor:pointer}.RCB-modal-close:before{content:"X"}

package/src/components/Modal/modalCore.scss

@@ -1,34 +0,0 @@
-.RCB {
-    &-modal {
-        position: fixed;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.8);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 2;
-    }
-
-    &-modal-body {
-        background: #FFF;
-        padding: 20px;
-    }
-
-    &-modal-header {
-        display: flex;
-        margin-bottom: 10px;
-    }
-
-    &-modal-title {
-        flex: 1;
-    }
-
-    &-modal-close {
-        cursor: pointer;
-        &:before { 
-            content: "X";
-        }
-    }
-}

package/src/components/NotificationComponent/NotificationComponent.js

@@ -1,58 +0,0 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-
-const NotificationComponent = (props) => {
-    const [ hideMessage, setHideMessage ] = useState(false);
-    const { appearance, children, messageId, fadeOut, fadeOutTime, className } = props;
-    let fadeOutMessage = typeof(fadeOut) !== "undefined" ? fadeOut : appearance === "success";
-    let timerID;
-
-    const clearMessage = () => {
-        setHideMessage(true);
-    };
-
-    const setClearMessageTimeout = () => {
-        if (fadeOutMessage) {
-            timerID && clearTimeout(timerID);
-            timerID = setTimeout(clearMessage, fadeOutTime);
-        }
-    }
-
-    useEffect(() => {
-        /* RUN ONCE */
-        setClearMessageTimeout();
-    }, []);
-
-    useEffect(() => {
-        /* RUN when message ID changes */
-        setHideMessage(false);
-        setClearMessageTimeout();
-    }, [messageId]);
-
-    if (hideMessage) {
-        return null;
-    } else {
-        return (<div className={`RCB-notif RCB-notif-${appearance} ${className}`}>{children}</div>);
-    }
-};
-
-NotificationComponent.propTypes = {
-    /** Pass any additional classNames to Notification component */
-    className: PropTypes.string,
-    /* Unique ID to represent this particular message */
-    messageId: PropTypes.number,
-    /* Appearance of the notification message */
-    appearance: PropTypes.oneOf(["error", "warning", "success", "info"]),
-    /* Should the message fadeout after (fadeOutTime)ms or not. Default true for success messages only. */
-    fadeOut: PropTypes.bool,
-    /* fadeout timer, in milliseconds */
-    fadeOutTime: PropTypes.number
-};
-
-NotificationComponent.defaultProps = {
-    className: "",
-    appearance: "success",
-    fadeOutTime: 3000
-};
-
-export default NotificationComponent;

package/src/components/NotificationComponent/NotificationComponent.stories.js

@@ -1,28 +0,0 @@
-import React from "react";
-import NotificationComponent from "./NotificationComponent";
-
-export default {
-  title: "NotificationComponent",
-};
-
-export const SimpleUsage = () => {
-  return (
-    <div>
-      <NotificationComponent appearance="success" messageId={1}>
-        Data loaded successfully
-      </NotificationComponent>
-      <br />
-      <NotificationComponent appearance="error" messageId={2}>
-        Some error occured
-      </NotificationComponent>
-      <br />
-      <NotificationComponent appearance="warning" messageId={3}>
-        Doing this operation will erase all your data
-      </NotificationComponent>
-      <br />
-      <NotificationComponent appearance="info" messageId={4}>
-        The job is scheduled. You will get a notification once it is completed.
-      </NotificationComponent>
-    </div>
-  );
-};

package/src/components/NotificationComponent/index.js

@@ -1,3 +0,0 @@
-import NotificationComponent from "./NotificationComponent";
-
-export default NotificationComponent;

package/src/components/NotificationComponent/notificationComponent.css

@@ -1 +0,0 @@
-.RCB-notif{padding:10px}.RCB-notif-success{color:#129274;border:1px solid #2cb292;background-color:#b7d2cb}.RCB-notif-error{color:#d25b5b;border:solid 1px #e75190;background-color:#fff9fc}.RCB-notif-warning{color:#445870;border:solid 1px #f09c0a;background-color:#fffaf2}.RCB-notif-info{color:#509DB9;border:solid 1px #509DB9;background-color:#DFF6FF}

package/src/components/NotificationComponent/notificationTheme.css

@@ -1 +0,0 @@
-.RCB-notif{padding:10px;border-radius:3px}.RCB-notif-success{color:#129274;border:solid 1px #2cb191;background-color:#edfffb}.RCB-notif-error{color:#d25b5b;border:solid 1px #e75178;background-color:#fff3f6}.RCB-notif-warning{color:#445870;border:solid 1px #efbf6a;background-color:#fffaf2}.RCB-notif-info{color:#509DB9;border:solid 1px #45b5c1;background-color:#f4fcff}

package/src/components/NotificationComponent/notificationTheme.scss

@@ -1,30 +0,0 @@
-.RCB {
-    &-notif {
-        padding: 10px;
-        border-radius: 3px;
-
-        &-success {
-            color: #129274;
-            border: solid 1px #2cb191;
-            background-color: #edfffb;
-        }
-
-        &-error {
-            color: #d25b5b;
-            border: solid 1px #e75178;
-            background-color: #fff3f6;
-        }
-
-        &-warning {
-            color: #445870;
-            border: solid 1px #efbf6a;
-            background-color: #fffaf2;
-        }
-
-        &-info {
-            color: #509DB9;
-            border: solid 1px #45b5c1;
-            background-color: #f4fcff;
-        }
-    }
-}

package/src/components/ProgressBar/ProgressBar.js

@@ -1,45 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const ProgressBar = (props) => {
-    const { progress, height, className } = props;
-
-    return (<div className={`RCB-progress-bar ${className}`} style={{height: height}}>
-        <div className="RCB-progress-value" style={{width: `${progress}%`}}></div>
-    </div>);
-};
-
-ProgressBar.propTypes = {
-    /** Pass any additional classNames to ProgressBar component */
-    className: PropTypes.string,
-    /** Progress value, must be a value between 1 to 100 */
-    progress: function(props, propName, componentName) {
-        if (typeof(props[propName]) === "undefined") {
-            return new Error(
-                "Prop `" + propName + "` is required"
-            );
-        }
-
-        if (typeof(props[propName]) !== "number") {
-            return new Error(
-                "Prop `" + propName + "` must be a number"
-            );
-        }
-
-        if (props[propName] < 0 || props[propName] > 100) {
-            return new Error(
-                "Invalid prop `" + propName + "` supplied to" +
-                " `" + componentName + "`. Value must be between 0 to 100."
-            );
-        }
-    },
-    /** Height of the progress bar. Values must be valid CSS height values like 40px or 20% etc. */
-    height: PropTypes.string
-};
-
-ProgressBar.defaultProps = {
-    className: "",
-    height: "40px"
-};
-
-export default ProgressBar;

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -1,14 +0,0 @@
-import React from "react";
-import ProgressBar from "./ProgressBar";
-
-export default {
-  title: "ProgressBar",
-};
-
-export const SimpleUsage = () => {
-  return (
-    <div className="progress-container">
-      <ProgressBar progress={40} />
-    </div>
-  );
-};

package/src/components/ProgressBar/index.js

@@ -1,3 +0,0 @@
-import ProgressBar from "./ProgressBar";
-
-export default ProgressBar;

package/src/components/ProgressBar/progressBar.css

@@ -1 +0,0 @@
-.RCB-progress-bar{width:100%;position:relative;background:#ccc}.RCB-progress-value{height:100%;position:absolute;top:0;background:#3d9565}

package/src/components/ProgressBar/progressBarCore.css

@@ -1 +0,0 @@
-.RCB-progress-bar{width:100%;position:relative;background:#ccc}.RCB-progress-value{height:100%;position:absolute;top:0;background:#3d9565}

package/src/components/ProgressBar/progressBarCore.scss

@@ -1,14 +0,0 @@
-.RCB {
-    &-progress-bar {
-        width: 100%;
-        position: relative;
-        background: #ccc;
-    }
-
-    &-progress-value {
-        height: 100%;
-        position: absolute;
-        top: 0;
-        background: #3d9565;
-    }
-}