groundfloor-react-ui 1.0.0

package/components/Inputs/ToggleSwitch.js

@@ -0,0 +1,123 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from 'prop-types';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+const CheckBoxWrapper = styled.div`
+  ${({ theme, defaultCheckBoxWrapperStyle }) => {
+        return getDefaultStyles(theme, defaultCheckBoxWrapperStyle);
+    }}
+`;
+const CheckBoxLabel = styled.label`
+    //Set the styles from the default styles object
+    ${({ theme, defaultCheckBoxLabelStyle }) => {
+        return getDefaultStyles(theme, defaultCheckBoxLabelStyle);
+    }}
+    background-color: ${({ checked, backgroundColor, disabledColor }) => checked ?
+        backgroundColor : disabledColor};
+    // custom styles
+    ${({ customToggleBoxStyle }) => customToggleBoxStyle} 
+    &:before {
+        content: "";
+        display: block;
+        border-radius: 50%;
+        width: 16px;
+        height: 16px;
+        margin-top: 3px;
+        background: ${({ switchColor }) => switchColor};
+        transition: 0.2s;
+        margin-left: ${({ checked }) => checked ? '4px' : '25px'};
+        
+        // custom styles
+        ${({ customSwitchStyle }) => customSwitchStyle}
+    }
+`;
+
+
+
+const CheckBox = styled.input.attrs({ type: "checkbox" })`
+    opacity: 0;
+    z-index: 1;
+    border-radius: 31px;
+    width: 45px;
+    height: 22px;
+    cursor: pointer;
+`;
+
+const OptionText = styled.span`
+    //Set the styles from the default styles object
+    ${({ theme, defaultOptionTextStyle }) => {
+        return getDefaultStyles(theme, defaultOptionTextStyle);
+    }}
+    
+    // custom styles
+    ${({ optionStyle }) => optionStyle}
+`;
+
+export const ToggleSwitch = ({ checked, customSwitchStyle, customToggleBoxStyle, backgroundColor, disabledColor, switchColor, onClick, trueLabel, falseLabel, optionStyle, ...props }) => {
+    return (
+        <CheckBoxWrapper theme={defaultStyles} defaultCheckBoxWrapperStyle={'toggle-switch-wrapper'} {...props} >
+            <CheckBox {...props}
+                id="checkbox"
+                theme={defaultStyles}
+                defaultCheckBoxStyle={'toggle-switch-checkbox'}
+                onClick={() => { onClick(!checked) }}
+                isChecked={checked}
+            />
+            <CheckBoxLabel {...props}
+                htmlFor="checkbox"
+                customToggleBoxStyle={customToggleBoxStyle}
+                customSwitchStyle={customSwitchStyle}
+                disabledColor={disabledColor}
+                backgroundColor={backgroundColor}
+                switchColor={switchColor}
+                theme={defaultStyles}
+                defaultCheckBoxLabelStyle={'toggle-switch-checkbox-label'}
+                checked={checked}
+            />
+            <OptionText optionStyle={optionStyle}
+                theme={defaultStyles}
+                defaultOptionTextStyle={'toggle-switch-option-text'} {...props} >{checked ? trueLabel : falseLabel}</OptionText>
+        </CheckBoxWrapper>
+    );
+};
+
+ToggleSwitch.propTypes = {
+    /**
+     * Custom styles for the toggleBox
+     */
+    customToggleBoxStyle: PropTypes.object,
+    /**
+     * Custom styles for the toggleSwitch
+     */
+    customSwitchStyle: PropTypes.object,
+    /**
+     * Type of color on background of toggleSwitch
+     */
+    backgroundColor: PropTypes.string,
+    /**
+     *	 default Toggle State
+     */
+    checked: PropTypes.bool,
+    /**
+     *	 label when toggle state is checked
+    * */
+    trueLabel: PropTypes.string,
+    /**
+     *	 label when toggle state is not checked
+    * */
+    falseLabel: PropTypes.string,
+}
+
+ToggleSwitch.defaultProps = {
+    backgroundColor: `${defaultThemeColor.primary['primary-1']}`,
+    switchColor: `${defaultThemeColor.bgColor}`,
+    disabledColor: `${defaultThemeColor.neutral['neutral-2']}`,
+    checked: false,
+    trueLabel: 'Yes',
+    falseLabel: 'No',
+    customSwitchStyle: {},
+    customToggleBoxStyle: {}
+}

package/components/Inputs/index.js

@@ -0,0 +1,13 @@
+export * from './TextInput';
+export * from './CheckBoxInput';
+export * from './TimeInput';
+export * from './ToggleSwitch';
+export * from './RadioInput';
+export * from './DropzoneInput';
+export * from './DateSelect';
+export * from './Signature';
+export * from './TextArea';
+export * from './NumericInput';
+export * from './DropdownSelect';
+export * from './SearchInput';
+

package/components/Label/Label.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+
+ const LabelLayout = styled.label`
+    //Set the styles from the default styles object
+    ${ ({ theme, type }) => {
+        return getDefaultStyles(theme, type);
+        }}
+        
+    // custom styles
+    ${({customStyles})=>customStyles}
+`;
+
+export const Label = ({ customStyles, text, className,required, ...props }) => {
+    const theme = defaultStyles;
+    return (
+        <LabelLayout required={required} theme={theme} customStyles={customStyles} type={'label'} {...props}>
+            {text}
+            {required && <div style={{
+                marginLeft: '4px',
+                color: `${defaultThemeColor.variant['error']}`
+            }} >*</div>}
+        </LabelLayout>
+    )
+}
+
+
+
+Label.propTypes = {
+    /**
+     *	Custom style object
+     */
+    customStyles: PropTypes.object,
+    /**
+     *	Title Content
+     */
+    text: PropTypes.string,
+}
+
+Label.defaultProps = {
+    text:''
+}
+
+

package/components/Label/index.js

@@ -0,0 +1 @@
+export * from './Label';

package/components/Loaders/Loader.js

@@ -0,0 +1,179 @@
+import React from "react";
+import styled, { keyframes, css } from "styled-components";
+import PropTypes from 'prop-types';
+import defaultStyles from '../constants/defaultStyle';
+
+const ldsSpinner = keyframes`
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+`;
+
+const Spinner = styled.div`
+    ${({ size, thickness, propellerHeight }) => {
+        return css`
+            display: inline-block;
+            position: relative;
+            width: ${size}px;
+            height: ${size}px;
+
+            div{
+                transform-origin: 0px ${size / 2}px;
+                animation: ${ldsSpinner} 1s linear infinite;
+                width: fit-content;
+
+                ::after {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    top: 0px;
+                    left: 0px;
+                    width: ${thickness}px; //2px;
+                    height: calc(${size}px*${propellerHeight}/100);
+                    border-radius: 20%;
+                    ${({ theme, type, customStyles }) => {
+                if (theme) {
+                    let tempArr = [];
+                    if (theme[type]) {
+                        for (const property in theme[type]) {
+                            tempArr.push(`${property}:${theme[type][property]};`)
+                        }
+                    }
+                    if (customStyles) {
+                        for (const property in customStyles) {
+                            tempArr.push(`${property}:${customStyles[property]};`)
+                        }
+                    }
+                    return [...tempArr];
+                }
+            }}
+                }
+            }
+
+            div:nth-child(1) {
+                transform: translate(${size / 2}px, 0px) rotate(0deg);
+                animation-delay: -0.875s;
+                ::after{
+                    transform: translate(-${thickness / 2}px, 0px) //-1
+                }
+            }
+
+            div:nth-child(2) {
+                transform: translate(${size / 2}px, 0px) rotate(45deg);
+                animation-delay: -0.75s;
+                ::after{
+                    transform: translate(-${thickness / 2}px, 0px) //-1
+                }
+            }
+
+            div:nth-child(3) {
+                transform: translate(${size / 2}px, 0px) rotate(90deg) ;
+                animation-delay: -0.625s;
+                ::after{
+                    transform: translate(-${thickness / 2}px, 0px) //-1
+                }
+            }
+
+            div:nth-child(4) {
+                transform: translate(${size / 2}px, 0px) rotate(135deg);
+                animation-delay: -0.5s;
+                ::after{
+                    transform: translate(-${thickness / 2}px, 0px) //-1
+                }
+            }
+
+            div:nth-child(5) {
+                transform: translate(${size / 2}px, 0px) rotate(180deg);
+                animation-delay: -0.375s;
+                ::after{
+                    transform: translate(-${thickness / 2}px, 0px) //-1
+                }
+            }
+
+            div:nth-child(6) {
+                transform: translate(${size / 2}px, 0px) rotate(225deg);
+                animation-delay: -0.25s;
+                ::after{
+                    transform: translate(-${thickness / 2}px, 0px) //-1
+                }
+            }
+            
+            div:nth-child(7) {
+                transform: translate(${size / 2}px, 0px) rotate(270deg);
+                animation-delay: -0.125s;
+                ::after{
+                    transform: translate(-${thickness / 2}px, 0px)
+                }
+            }
+            
+            div:nth-child(8) {
+                transform: translate(${size / 2}px, 0px) rotate(315deg);
+                animation-delay: 0s;
+                ::after{
+                    transform: translate(-${thickness / 2}px, 0px)
+                }
+            }
+            
+            div:nth-child(9) {
+                transform: translate(${size / 2}px, 0px) rotate(0deg);
+                ::after{
+                    transform: translate(-${thickness / 2}px, 0px)
+                }
+            }
+        `
+    }
+    }
+`
+
+export const Loader = ({  size, thickness, propellerHeight, customStyles }) => {
+    const theme = defaultStyles;
+
+    return (
+        <Spinner theme={theme} size={size} thickness={thickness} propellerHeight={propellerHeight} customStyles={customStyles} type='spinner'>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </Spinner>
+    );
+}
+
+Spinner.defaultProps = {
+    theme: defaultStyles,
+}
+
+Loader.propTypes = {
+    /**
+     * Diameter of the spinner in px
+     */
+    size: PropTypes.number,
+    /**
+     * Thickness of the propeller
+     */
+    thickness: PropTypes.number,
+    /**
+     * Heightof the propeller in percentage of the size (eg 100 = size, 50 = size/2).
+     */
+    propellerHeight: PropTypes.number,
+    /**
+     * CustomStyles is an object to apply custom style to the ::after pseudo element.
+     * But mainly only used to apply a custom background-color
+     */
+    customStyles: PropTypes.object,
+}
+
+Loader.defaultProps = {
+    size: 20,
+    thickness: 2,
+    propellerHeight: 25,
+    customStyles: null,
+}
+

package/components/Loaders/index.js

@@ -0,0 +1,2 @@
+export * from './Loader';
+

package/components/Modal/Modal.js

@@ -0,0 +1,116 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+import PropTypes from "prop-types";
+
+
+const Background = styled.div`
+    //Set the styles from the default styles object
+    ${({ theme, type }) => {
+        return getDefaultStyles(theme, type);
+    }}
+    
+    // custom styles
+    ${({ customBackgroundStyle }) => customBackgroundStyle}
+`;
+
+const ModalWrapper = styled.div`
+    
+    //Set the styles from the default styles object
+    ${({ theme, type }) => {
+        return getDefaultStyles(theme, type);
+    }}
+    
+    // custom styles
+    ${({ customWrapperStyle }) => customWrapperStyle}
+`;
+
+const CloseModalButton = styled.div`
+    //Set the styles from the default styles object
+    ${({ theme, type }) => {
+        return getDefaultStyles(theme, type);
+    }}
+    
+    // custom styles
+    ${({ closeModalButtonStyle }) => closeModalButtonStyle}
+`;
+
+export const Modal = ({ showModal, setShowModal, customBackgroundStyle, customWrapperStyle, modalCloseButton, closeModalButtonStyle, children,...props }) => {
+    const modalRef = useRef();
+
+    const closeModal = e => {
+        if (modalRef.current === e.target) {
+            setShowModal(false);
+        }
+    };
+
+    const keyPress = useCallback(
+        e => {
+            if (e.key === 'Escape' && showModal) {
+                setShowModal(false);
+            }
+        },
+        [setShowModal, showModal]
+    );
+
+    useEffect(
+        () => {
+            document.addEventListener('keydown', keyPress);
+            return () => document.removeEventListener('keydown', keyPress);
+        },
+        [keyPress]
+    );
+
+    return (
+        <div>
+            {showModal ? (
+                <Background 
+                    theme={defaultStyles}
+                    type={'modal-background'} 
+                    onClick={closeModal} 
+                    ref={modalRef} 
+                    customBackgroundStyle={customBackgroundStyle} {...props}>
+                    <ModalWrapper 
+                        theme={defaultStyles}
+                        type={'modal-wrapper'} 
+                        showModal={showModal} 
+                        customWrapperStyle={customWrapperStyle} {...props}>
+                            {modalCloseButton && 
+                                <CloseModalButton 
+                                    onClick={() => setShowModal(prev => !prev)}
+                                    theme={defaultStyles}
+                                    type={'modal-close-button'}
+                                    closeModalButtonStyle={closeModalButtonStyle}>
+                                X
+                            </CloseModalButton>}
+                            
+                                {children}
+                    </ModalWrapper>
+                </Background>
+            ) : null}
+        </div>
+    );
+};
+
+Modal.propTypes = {
+    /**
+     *	Show modal
+     */
+    showModal: PropTypes.bool.isRequired,
+    /**
+     *	Show modal function
+     */
+    setShowModal: PropTypes.func.isRequired,
+    /**
+     *	Show modal close button or not
+     */
+    modalCloseButton: PropTypes.bool,
+}
+
+Modal.defaultProps = {
+    showModal: false,
+    setShowModal: ()=>{},
+    modalCloseButton: true,
+}
+

package/components/Modal/ModalComp.js

@@ -0,0 +1,158 @@
+import React, { useState } from 'react'
+import Modal from "react-modal";
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+import PropTypes from "prop-types";
+import { Icon } from '../Icon';
+
+const customStyles = {
+  overlay: {
+    zIndex: '999'
+  },
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    padding: '3rem 3rem 0.8rem 3rem',
+    transform: 'translate(-50%, -50%)',
+  },
+};
+
+const ModalClose = styled.button`
+    //Set the styles from the default styles object
+    ${({ theme, type }) => {
+    return getDefaultStyles(theme, type);
+  }}
+    // custom styles
+    ${({ customModalCloseStyle }) => customModalCloseStyle}
+    ${'' /* background: transparent; */}
+`
+
+const ModalHeader = styled.div`
+  .header-title{
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  .header-description{
+    margin-top: 5px;
+  }
+  h4 {
+    margin-bottom: 0;
+  }
+  // custom styles
+    ${({ customModalHeaderStyle }) => customModalHeaderStyle}
+`
+const ModalBody = styled.div`
+  //Set the styles from the default styles object
+    ${({ theme, type }) => {
+    return getDefaultStyles(theme, type);
+  }}
+    // custom styles
+    ${({ customModalBodyStyle }) => customModalBodyStyle}
+`
+
+const ModalFooter = styled.div`
+  //Set the styles from the default styles object
+    ${({ theme, type }) => {
+    return getDefaultStyles(theme, type);
+  }}
+    // custom styles
+    ${({ customModalFooterStyle }) => customModalFooterStyle}
+`
+
+Modal.setAppElement("#root");
+
+
+export const ModalComp = ({ modalIsOpen, toggleModal, closeOnOutsideClick, headerContent, bodyContent, footerContent, customModalCloseStyle, customModalHeaderStyle, customModalBodyStyle, customModalFooterStyle, ...props }) => {
+
+  return (
+    <Modal
+      isOpen={modalIsOpen}
+      // onAfterOpen={afterOpenModal}
+      onRequestClose={closeOnOutsideClick ? toggleModal : undefined}
+      style={customStyles}
+      contentLabel="Example Modal"
+      {...props}
+    >
+      <ModalClose theme={defaultStyles}
+        type={'modalComp-modal-close'} style={customModalCloseStyle} onClick={toggleModal}>
+        <Icon icon='cross-icon' />
+      </ModalClose>
+
+      <ModalHeader style={customModalHeaderStyle}>
+        {headerContent}
+      </ModalHeader>
+      <ModalBody theme={defaultStyles}
+        type={'modalComp-modal-body'} style={customModalBodyStyle}>
+        {bodyContent}
+      </ModalBody>
+
+      <ModalFooter theme={defaultStyles}
+        type={'modalComp-modal-footer'} style={customModalFooterStyle}>
+        {/* <hr /> */}
+        {footerContent}
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+ModalComp.propTypes = {
+  /**
+   *	Show modal
+   */
+  modalIsOpen: PropTypes.bool,
+  /**
+   *	Show modal function
+   */
+  toggleModal: PropTypes.func,
+  /**
+   *	Close modal on clicking outside
+  */
+  closeOnOutsideClick: PropTypes.bool,
+  /**
+   *	Modal Header Content
+   */
+  headerContent: PropTypes.any,
+  /**
+   *	Modal Body Content
+   */
+  bodyContent: PropTypes.any,
+  /**
+   *	Modal Footer Content
+   */
+  footerContent: PropTypes.any,
+  /**
+   *	Modal Close icon custom styles
+  */
+  customModalCloseStyle: PropTypes.object,
+  /**
+   *	Modal Header custom styles
+  */
+  customModalHeaderStyle: PropTypes.object,
+  /**
+   *	Modal Body custom styles
+  */
+  customModalBodyStyle: PropTypes.object,
+  /**
+   *	Modal Footer custom styles
+  */
+  customModalFooterStyle: PropTypes.object
+}
+
+ModalComp.defaultProps = {
+  modalIsOpen: false,
+  toggleModal: () => { },
+  closeOnOutsideClick: false,
+  headerContent: '',
+  bodyContent: '',
+  footerContent: '',
+  customModalCloseStyle: {},
+  customModalHeaderStyle: {},
+  customModalBodyStyle: {},
+  customModalFooterStyle: {}
+}
+

package/components/Modal/index.js

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './ModalComp';