groundfloor-react-ui 1.2.8 → 1.2.10

package/components/Loaders/Loader.js

@@ -1,179 +0,0 @@
-import PropTypes from 'prop-types';
-import React from "react";
-import styled, { css, keyframes } from "styled-components";
-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

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

package/components/Modal/ModalComp.js

@@ -1,216 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'react-modal';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-import { Icon } from '../Icon';
-
-const ModalClose = styled.button`
-  //Set the styles from the default styles object
-  ${({ theme, type }) => {
-    return getDefaultStyles(theme, type);
-  }}
-  // custom styles
-    ${({ customModalCloseStyle }) => customModalCloseStyle}
-  //Set the styles from the default styles object
-    &:focus {
-    outline: none;
-    border: none;
-  }
-`;
-
-const ModalHeader = styled.div`
-  margin-top: 10px;
-
-  // 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 ContentWrapper = styled.div`
-  max-height: 60vh;
-  overflow-y: auto;
-`;
-
-const ModalFooter = styled.div`
-  //Set the styles from the default styles object
-  ${({ theme, type }) => {
-    return getDefaultStyles(theme, type);
-  }}
-  // custom styles
-    ${({ customModalFooterStyle }) => customModalFooterStyle}
-`;
-
-const CommonDiv = styled.div`
-  padding: 0.5rem 3rem 0rem 3rem;
-`;
-
-const HeaderWrapper = styled.div`
-  position: sticky;
-  background-color: ${({ theme }) => theme.bgColor};
-  width: 100%;
-  top: 0px;
-  border-bottom: 1px solid ${({ theme }) => theme.border};
-`;
-
-try {
-  Modal.setAppElement('#root');
-} catch (error) {
-  Modal.setAppElement('#__next');
-}
-
-export const ModalComp = ({
-  modalIsOpen,
-  toggleModal,
-  closeOnOutsideClick,
-  headerContent,
-  bodyContent,
-  footerContent,
-  customModalCloseStyle,
-  customModalHeaderStyle,
-  customModalBodyStyle,
-  customModalFooterStyle,
-  customWidth,
-  customMinWidth,
-  customMaxWidth,
-  ...props
-}) => {
-  const activeTheme = useTheme() || defaultThemeColor;
-
-  const customStyles = {
-    overlay: {
-      zIndex: '999999',
-      backgroundColor: 'rgb(0 0 0 / 30%)',
-    },
-    content: {
-      borderColor: defaultThemeColor.border,
-      top: '50%',
-      left: '50%',
-      right: 'auto',
-      bottom: 'auto',
-      marginRight: '-50%',
-      padding: '0px',
-      transform: 'translate(-50%, -50%)',
-      minWidth: customMinWidth,
-      maxHeight: '85vh',
-      overflow: 'hidden',
-      width: customWidth && customWidth,
-      maxWidth: customMaxWidth && customMaxWidth,
-    },
-  };
-
-  return (
-    <Modal
-      isOpen={modalIsOpen}
-      onRequestClose={closeOnOutsideClick ? toggleModal : undefined}
-      style={customStyles}
-      contentLabel='Modal'
-      {...props}
-    >
-      <HeaderWrapper theme={activeTheme}>
-        <ModalClose
-          theme={defaultStyles}
-          type={'modalComp-modal-close'}
-          style={customModalCloseStyle}
-          onClick={toggleModal}
-        >
-          <Icon
-            icon='cross-icon'
-            color={defaultThemeColor.neutral['neutral-2']}
-            size={15}
-          />
-        </ModalClose>
-
-        <ModalHeader style={customModalHeaderStyle}>
-          <CommonDiv>{headerContent}</CommonDiv>
-        </ModalHeader>
-      </HeaderWrapper>
-      <ContentWrapper>
-        <ModalBody
-          theme={defaultStyles}
-          type={'modalComp-modal-body'}
-          style={customModalBodyStyle}
-        >
-          <CommonDiv> {bodyContent}</CommonDiv>
-        </ModalBody>
-
-        <ModalFooter
-          theme={defaultStyles}
-          type={'modalComp-modal-footer'}
-          style={customModalFooterStyle}
-        >
-          {footerContent}
-        </ModalFooter>
-      </ContentWrapper>
-    </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,
-  customMinWidth: PropTypes.string,
-};
-
-ModalComp.defaultProps = {
-  modalIsOpen: false,
-  toggleModal: () => { },
-  closeOnOutsideClick: false,
-  headerContent: '',
-  bodyContent: '',
-  footerContent: '',
-  customModalCloseStyle: {},
-  customModalHeaderStyle: {},
-  customModalBodyStyle: {},
-  customModalFooterStyle: {},
-  customMinWidth: '40vw',
-  customWidth: '',
-  customMaxWidth: '',
-};

package/components/Modal/index.js

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

package/components/Overlay/Overlay.js

@@ -1,158 +0,0 @@
-import PropTypes from 'prop-types';
-import React from "react";
-import { usePopperTooltip } from 'react-popper-tooltip';
-import styled from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-
-/**
- * Primary UI component for user interaction
- */
-const OverlayContainer = styled.div`
-${({ theme, type, customStyles }) => {
-        if (theme) {
-            let tempObj = {};
-            if (theme[type]) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
-                }
-                for (const property in theme[type]) {
-                    tempObj[property] = theme[type][property]
-                    delete theme.common[property]
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-    }
-`;
-
-export const Overlay = ({
-    theme,
-    toggleSimple,
-    contentTrigger,
-    contentOverlay,
-    popperOptionsP,
-    settingsP,
-    customStyles,
-    ...props
-}) => {
-
-    let popperOptions = {}
-    let settings = {}
-
-    if (toggleSimple) {
-        //Simple tooltip without arrow for text
-        popperOptions = {
-            ...popperOptions,
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [0, 5],
-                    },
-                },
-            ],
-            strategy: 'absolute'
-        }
-        settings = { ...settings }
-    } else {
-        //More styled overlay for other purpose
-        popperOptions = {
-            ...popperOptions,
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [0, 5],
-                    },
-                },
-            ],
-            strategy: 'absolute'
-        }
-        settings = {
-            ...settings,
-            trigger: 'click',
-            closeOnOutsideClick: true,
-            interactive: true,
-        }
-    }
-
-    popperOptions = { ...popperOptions, ...popperOptionsP }
-    settings = { ...settings, ...settingsP }
-
-    const {
-        getArrowProps,
-        getTooltipProps,
-        setTooltipRef,
-        setTriggerRef,
-        visible,
-    } = usePopperTooltip({
-        ...settings
-    }, popperOptions);
-
-    return (
-        <>
-            <div ref={setTriggerRef}
-                style={{ width: 'fit-content', height: 'fit-content' }}
-            >
-                {contentTrigger}
-            </div>
-            {visible && (
-                <OverlayContainer
-                    type={toggleSimple ? 'simple-overlay' : 'overlay'}
-                    theme={theme}
-                    ref={setTooltipRef}
-                    {...getTooltipProps({ className: 'tooltip-container' })}
-                    customStyles={customStyles}
-                >
-                    {contentOverlay}
-                </OverlayContainer>
-            )}
-        </>
-    );
-};
-
-Overlay.propTypes = {
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * The element where to attach the tooltip
-     */
-    contentTrigger: PropTypes.any,
-    /**
-     * The element to put inside the overlay
-     */
-    contentOverlay: PropTypes.any,
-    /**
-     * Object to customize the behaviour of the tooltip
-     * For more reference see: 
-     * https://github.com/mohsinulhaq/react-popper-tooltip#readme
-     * https://popper.js.org/docs/v2/tutorial/
-     */
-    popperOptionsP: PropTypes.object,
-    /**
-     * Object to customize the settings of the tooltip
-     * For more reference see: 
-     * https://github.com/mohsinulhaq/react-popper-tooltip#readme
-     * https://popper.js.org/docs/v2/tutorial/
-     */
-    settingsP: PropTypes.object,
-    /**
-     * Object to pass custom style to the Overlay container
-     */
-    customStyles: PropTypes.object,
-    /**
-     * If true display a simple tooltip without arrow when hover the trigger
-     * If false when clicking on the trigger display a more styled overlay 
-     */
-    toggleSimple: PropTypes.bool,
-};
-
-Overlay.defaultProps = {
-    theme: defaultStyles,
-    contentTrigger: <div>Trigger</div>,
-    contentOverlay: <div>I am the Overlay</div>,
-};
-

package/components/Overlay/index.js

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

package/components/Pagination/Pagination.js

@@ -1,59 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-const StyledPagination = styled.div`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.variant['neutral-2']};
-`;
-
-export const Pagination = ({ ...props }) => {
-  const activeTheme = useTheme() || defaultThemeColor;
-
-  return (
-    <StyledPagination theme={activeTheme}>{props.children}</StyledPagination>
-  );
-};
-
-const Item = styled.div`
-  font-size: 14px;
-  color: ${({ selected, theme }) =>
-    selected ? theme.variant['primary-1'] : null};
-
-  svg {
-    width: 14px;
-    height: 14px;
-    path {
-      fill: ${({ selected, theme }) =>
-    selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
-    }
-  }
-
-  cursor: pointer;
-  &:not(:first-child):not(:last-child) {
-    margin: 0 22px;
-  }
-`;
-
-Pagination.PageItem = function PageItem({ selected, ...props }) {
-  const activeTheme = useTheme() || defaultThemeColor;
-
-  return (
-    <Item selected={selected} theme={activeTheme} {...props}>
-      {props.children}
-    </Item>
-  );
-};
-
-Pagination.PageItem.propTypes = {
-  /**
-   *	Is Page selected?
-   */
-  selected: PropTypes.bool,
-};
-
-Pagination.PageItem.defaultProps = {
-  selected: false,
-};

package/components/Pagination/index.js

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