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

package/src/components/List/List.js

@@ -0,0 +1,72 @@
+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

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

package/src/components/List/list.css

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

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

@@ -0,0 +1,28 @@
+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

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

package/src/components/List/listCore.scss

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

package/src/components/Modal/Modal.js

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,54 @@
+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

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

package/src/components/Modal/modal.css

@@ -0,0 +1 @@
+.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

@@ -0,0 +1 @@
+.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

@@ -0,0 +1,34 @@
+.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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,28 @@
+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

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

package/src/components/NotificationComponent/notificationComponent.css

@@ -0,0 +1 @@
+.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

@@ -0,0 +1 @@
+.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

@@ -0,0 +1,30 @@
+.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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,14 @@
+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

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

package/src/components/ProgressBar/progressBar.css

@@ -0,0 +1 @@
+.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

@@ -0,0 +1 @@
+.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

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