groundfloor-react-ui 1.2.8 → 1.2.10

package/components/Drawer/Drawer.js

@@ -1,84 +0,0 @@
-import PropTypes from 'prop-types';
-import React from "react";
-import styled from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-
-/**
- * Primary UI component for user interaction
- */
-
-// const StyledContainer = styled.div`
-// min-height: 100%;
-// overflow: hidden;
-// position: fixed;
-// width: 360px;
-// transition: transform ease 400ms;
-// display: flex;
-// flex-direction: column;
-// background: #FFFFFF;
-// box-sizing: border-box;
-// box-shadow: -20px 5px 37px rgba(56, 66, 100, 0.0880136);
-// top: 51px;
-// right: 0px;
-// z-index: 1001;
-// transform: translateX(${({ drawerOpen }) => drawerOpen ? '0px' : '360px'});
-// `;
-
-const StyledContainer = styled.div`
-//Set the styles from the default styles object
-${({ inBuiltCss, type, drawerOpen, customStyles }) => {
-    if (inBuiltCss) {
-      let tempObj = {};
-      if (inBuiltCss[type]) {
-        for (const property in inBuiltCss['common']) {
-          tempObj[property] = inBuiltCss['common'][property]
-        }
-        for (const property in inBuiltCss[type]) {
-          delete inBuiltCss.common[property]
-          tempObj[property] = inBuiltCss[type][property]
-        }
-        if (drawerOpen) {
-          tempObj = { ...tempObj, ...inBuiltCss['drawer-open'] }
-        } else {
-          tempObj = { ...tempObj, ...inBuiltCss['drawer-close'] }
-        }
-      }
-      return { ...tempObj, ...customStyles };
-    }
-  }}
-`;
-
-export const Drawer = ({
-  customStyles,
-  drawerOpen,
-  children,
-  ...props
-}) => {
-
-
-  // return ReactDom.createPortal(
-  return (
-    <StyledContainer
-      inBuiltCss={defaultStyles}
-      customStyles={customStyles}
-      type={'drawer'}
-      drawerOpen={drawerOpen}
-      {...props}
-    >
-      {children}
-    </StyledContainer>
-
-  );
-};
-
-Drawer.propTypes = {
-
-  /**
-   *	Custom style object
-   */
-  customStyles: PropTypes.object,
-  /**
-  *	Boolean value to to open and close the drawer
-  */
-  drawerOpen: PropTypes.bool,
-};

package/components/Drawer/index.js

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

package/components/ErrorBoundary/ErrorBoundary.js

@@ -1,44 +0,0 @@
-import PropTypes from "prop-types";
-import React, { Component, Fragment } from 'react';
-import { PrimaryButton } from '../Button';
-
-export class ErrorBoundary extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            hasError: false,
-        }
-        this.refreshPage = this.refreshPage.bind(this);
-    }
-
-    componentDidCatch(error, info) {
-        this.setState({ hasError: true });
-    }
-
-    refreshPage() {
-        window.location.reload();
-    }
-
-    render() {
-        const { hasError } = this.state;
-        var errMsg = (
-            <Fragment>
-                <h3>
-                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.12em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1856 1664"><path d="M1056 1375v-190q0-14-9.5-23.5t-22.5-9.5H832q-13 0-22.5 9.5T800 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19q-13-11-24-11H818q-11 0-24 11q-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126q-17 29-46.5 46t-63.5 17H160q-34 0-63.5-17T50 1601q-37-63-2-126L816 67q17-31 47-49t65-18t65 18t47 49z" fill="currentColor" /></svg>
-                    We have experienced an issue. We generated a support ticket on our end to investigate this issue We are sorry about the inconvenience.</h3>
-                <PrimaryButton onClick={() => this.refreshPage()}>
-                    Click to refresh
-                </PrimaryButton>
-            </Fragment>
-        );
-        var display = hasError ? errMsg : this.props.children;
-        return display;
-    }
-}
-
-ErrorBoundary.propTypes = {
-    /**
-     * Component that will be rendered if no error occurs
-     */
-    children: PropTypes.any
-}

package/components/ErrorBoundary/index.js

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

package/components/FilterChip/FilterChip.js

@@ -1,70 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import { hexToRGB } from '../constants';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-// const border = `#F6F6F9;`;
-
-const selectedCss = css`
-  color: ${({ theme }) => theme.variant['primary-1']};
-  border: 1px solid ${({ theme }) => theme.variant['primary-1']};
-  background: ${({ theme }) => hexToRGB(theme.primary['primary-1'], 0.04)};
-`;
-
-const StyledButton = styled.button`
-  font-size: 14px;
-  color: ${({ theme }) => theme.variant['primary-2']};
-  background: ${({ theme }) => hexToRGB(theme.variant['neutral-5'], 0.7)};
-  border: 1px solid ${({ theme }) => hexToRGB(theme.variant['neutral-5'], 0.7)};
-  padding: 4px 24px;
-  border-radius: 999px;
-  outline: none;
-  cursor: pointer;
-
-  ${({ selected }) => (selected ? selectedCss : null)}
-
-  &:not(:first-child) {
-    margin-left: 8px;
-  }
-`;
-
-export const FilterChip = ({ options, selected, onClick, ...props }) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    const list = options.map((option, index) => {
-        return (
-            <StyledButton
-                theme={activeTheme}
-                key={`${option.label}_${index}_${option.value}`}
-                selected={selected === option.value}
-                onClick={() => {
-                    onClick(option.value);
-                }}
-            >
-                {option.label}
-            </StyledButton>
-        );
-    });
-    return <>{list}</>;
-};
-
-FilterChip.propTypes = {
-    /**
-     * Available tabs
-     */
-    options: PropTypes.array,
-    /**
-     * which option is selected?
-     */
-    selected: PropTypes.string,
-    /**
-     * click event
-     */
-    onClick: PropTypes.func,
-};
-
-FilterChip.defaultProps = {
-    options: [],
-    selected: '',
-};

package/components/FilterChip/index.js

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

package/components/Footer/Footer.js

@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from '../constants/utils';
-
-/**
- * Primary UI component for user interaction
- */
-const StyledFooter = styled.footer`
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-    // custom styles
-    ${({ customStyles }) => customStyles}
-`;
-
-export const Footer = forwardRef(({ theme, customStyles, ...props }, ref) => {
-
-    return (
-        <StyledFooter
-            ref={ref}
-            theme={theme}
-            type='footer'
-            customStyles={customStyles}
-            {...props}
-        >
-            {props.children}
-        </StyledFooter>
-    );
-});
-
-Footer.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-    /**
-     *	Custom style object
-     */
-    customStyles: PropTypes.object,
-    /**
-     *	Type of the component which define the default style
-     */
-    type: PropTypes.string,
-};
-
-StyledFooter.defaultProps = {
-    theme: PropTypes.object,
-}
-
-Footer.defaultProps = {
-    theme: defaultStyles,
-    customStyles: null,
-};
-

package/components/Footer/FooterContent.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-const StyledOutsideContainer = styled.div`
-    font-size: 14px;
-	background-color: transparent;
-    display: flex;
-    left: 0;
-    right: 0;
-    justify-content: space-between;
-    align-items: center;
-    color: #929EAC;
-    padding:28px 30.5px 28px 30.5px;
-    font-family: 'Averta', sans-serif;
-    cursor: default;
-    width:inherit;
-    ${({ footerWidth }) => {
-        if (footerWidth < 650) {
-            return css`
-            flex-direction: column;
-            `
-        }
-    }}
-`;
-
-const StyledInsideContainer = styled.div`
-    display: flex;
-    ${({ footerWidth }) => {
-        if (footerWidth < 650) {
-            return css`
-            margin-bottom: 5px;
-            `
-        }
-    }}
-    ${({ footerWidth }) => {
-        if (footerWidth < 350) {
-            return css`
-            flex-direction: column;
-                align-items: center;
-                margin-bottom: 0;
-            `
-        }
-    }}
-`;
-
-const StyledText = styled.div`
-    margin-top: inherit;
-    margin-bottom: inherit;
-    ${({ footerWidth }) => {
-        if (footerWidth < 350) {
-            return css`
-            margin-bottom: 5px;
-            `
-        }
-    }}
-`;
-
-const StyledSeparator = styled.div`
-    margin: 0 10px;
-    ${({ footerWidth }) => {
-        if (footerWidth < 350) {
-            return css`
-            display: none;
-            `
-        }
-    }}
-`;
-export const FooterContent = ({ variant, textColor, size, width, footerWidth, ...props }) => {
-    // const footerWidth = useContext(FooterContext)
-
-    return (
-        <StyledOutsideContainer variant={variant} textColor={textColor} footerWidth={footerWidth} {...props}>
-            <StyledInsideContainer footerWidth={footerWidth}>
-                <StyledText footerWidth={footerWidth}>
-                    Premise HQ
-                </StyledText>
-                <StyledSeparator footerWidth={footerWidth}>
-                    |
-                </StyledSeparator>
-                <StyledText footerWidth={footerWidth}>
-                    All Rights Restricted 2020 ©
-                </StyledText>
-            </StyledInsideContainer>
-            <StyledInsideContainer footerWidth={footerWidth}>
-                <StyledText footerWidth={footerWidth}>
-                    Terms of use
-                </StyledText>
-                <StyledSeparator footerWidth={footerWidth}>
-                    |
-                </StyledSeparator>
-                <StyledText footerWidth={footerWidth}>
-                    Privacy Policy
-                </StyledText>
-            </StyledInsideContainer>
-        </StyledOutsideContainer>
-    );
-};
-

package/components/Footer/index.js

@@ -1,3 +0,0 @@
-export * from './Footer';
-export * from './FooterContent';
-

package/components/Form/FormComponent.js

@@ -1,244 +0,0 @@
-import React, { Fragment } from 'react';
-import { PrimaryButton, SecondaryButton, TinyButton } from '../Button';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import {
-  FormContainer,
-  FormWrapper,
-  MultiColumnDiv,
-  MultiColumnWrapper
-} from '../DesignComponent';
-import { Header } from '../Header';
-import {
-  CheckBoxInput,
-  DateSelect,
-  DropdownSelect,
-  DropzoneInput,
-  NumericInput,
-  PasswordInput,
-  RadioInput,
-  SearchInput,
-  SignatureInput,
-  TextArea,
-  TextInput,
-  ToggleSwitch
-} from '../Inputs';
-import { Label } from '../Label';
-import { Rating } from '../Rating';
-import { Table } from '../Tables';
-import { HeaderComponent } from './HeaderComponent';
-
-
-export const FormComponent = ({ formData, customStyles, ...props }) => {
-  const header = (item) => {
-    return (
-      <Fragment>
-        <Header {...item} {...props}>
-          {item.children}
-        </Header>
-        {item}
-      </Fragment>
-    );
-  };
-
-  const labelWithJSon = (item) => {
-    return (
-      <Fragment>
-        <MultiColumnWrapper>
-          <MultiColumnDiv cols={1}>
-            <Label
-              customStyles={item.customStyles}
-              text={item.text}
-              {...props}
-              style={{
-                marginBottom: '7px',
-                paddingBottom: '0',
-              }}
-            />
-          </MultiColumnDiv>
-          <MultiColumnDiv>
-            <pre>{JSON.stringify(item, null, 4)}</pre>
-          </MultiColumnDiv>
-        </MultiColumnWrapper>
-      </Fragment>
-    );
-  };
-  const label = (item) => {
-    return (
-      <Label
-        style={{ marginBottom: '7px', paddingBottom: '0' }}
-        {...item}
-        {...props}
-      />
-    );
-  };
-  const textInput = (item) => {
-    return <TextInput {...item} {...props} />;
-  };
-
-  const textAreaInput = (item) => {
-    return <TextArea {...item} {...props} />;
-  };
-
-  const NumberInput = (item) => {
-    return <NumericInput {...item} {...props} />;
-  };
-
-  const radioInput = (item) => {
-    return <RadioInput key={(Math.random() * 101) | 0} {...item} {...props} />;
-  };
-
-  const checkBoxInput = (item) => {
-    return <CheckBoxInput {...item} {...props} />;
-  };
-
-  const SingleDropdownInput = (item) => {
-    return (
-      <DropdownSelect dropdownType={'singleSelect'} {...item} {...props} />
-    );
-  };
-
-  const MultiDropdownInput = (item) => {
-    return <DropdownSelect dropdownType={'multiSelect'} {...item} {...props} />;
-  };
-
-  const AsyncMultiDropdownInput = (item) => {
-    return (
-      <DropdownSelect dropdownType={'asyncMultiSelect'} {...item} {...props} />
-    );
-  };
-
-  const AsyncSingleDropdownInput = (item) => {
-    return (
-      <DropdownSelect dropdownType={'asyncSingleSelect'} {...item} {...props} />
-    );
-  };
-
-  const signatureInput = (item) => {
-    return <SignatureInput {...item} {...props} />;
-  };
-
-  const fileUploadInput = (item) => {
-    return <DropzoneInput {...item} {...props} />;
-  };
-
-  const dateInput = (item) => {
-    return <DateSelect {...item} {...props} />;
-  };
-
-  const toggleSwitch = (item) => {
-    return <ToggleSwitch {...item} {...props} />;
-  };
-
-  const ratingInput = (item) => {
-    return <Rating {...item} {...props} />;
-  };
-
-  const primaryButton = (item) => {
-    return <PrimaryButton {...item} {...props} />;
-  };
-
-  const secondaryButton = (item) => {
-    return <SecondaryButton {...item} {...props} />;
-  };
-
-  const tinyButton = (item) => {
-    return <TinyButton {...item} {...props} />;
-  };
-
-  const searchInput = (item) => {
-    return <SearchInput {...item} {...props} />;
-  };
-
-  const tableInput = (item) => {
-    return <Table {...item} {...props} />;
-  };
-
-  const passwordInput = (item) => {
-    return <PasswordInput {...item} {...props} />;
-  };
-  const headerComponentInput = (item) => {
-    return <HeaderComponent {...item} {...props} />;
-  };
-  const handleSubmit = () => {
-    console.log('form submit');
-  };
-
-  const returnComponent = (item) => {
-    switch (item.type) {
-      case 'header':
-        return header(item);
-      case 'label':
-        return label(item);
-      case 'text':
-        return textInput(item);
-      case 'textArea':
-        return textAreaInput(item);
-      case 'number':
-        return NumberInput(item);
-      case 'radio':
-        return radioInput(item);
-      case 'checkBox':
-        return checkBoxInput(item);
-      case 'singleSelect':
-        return SingleDropdownInput(item);
-      case 'multiSelect':
-        return MultiDropdownInput(item);
-      case 'asyncSingleSelect':
-        return AsyncSingleDropdownInput(item);
-      case 'asyncMultiSelect':
-        return AsyncMultiDropdownInput(item);
-      case 'signature':
-        return signatureInput(item);
-      case 'fileUpload':
-        return fileUploadInput(item);
-      case 'date':
-        return dateInput(item);
-      case 'toggle':
-        return toggleSwitch(item);
-      case 'rating':
-        return ratingInput(item);
-      case 'buttonPrimary':
-        return primaryButton(item);
-      case 'buttonSecondary':
-        return secondaryButton(item);
-      case 'buttonTiny':
-        return tinyButton(item);
-      case 'search':
-        return searchInput(item);
-      case 'table':
-        return tableInput(item);
-      case 'passwordInput':
-        return passwordInput(item);
-      case 'headerComponent':
-        return headerComponentInput(item);
-      default:
-        break;
-    }
-  };
-
-  return (
-    <Fragment>
-      <FormContainer defaultThemeColor={defaultThemeColor}>
-        <FormWrapper onSubmit={handleSubmit} customStyles={customStyles}>
-          {formData.map((row, i) => {
-            if (row.length > 1) {
-              return (
-                <MultiColumnWrapper>
-                  {row.map((item, j) => {
-                    return (
-                      <MultiColumnDiv cols={row.length}>
-                        {returnComponent(item)}
-                      </MultiColumnDiv>
-                    );
-                  })}
-                </MultiColumnWrapper>
-              );
-            } else {
-              return returnComponent(row[0]);
-            }
-          })}
-        </FormWrapper>
-      </FormContainer>
-    </Fragment>
-  );
-};

package/components/Form/HeaderComponent.js

@@ -1,64 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import { Icon } from '../Icon';
-
-export const HeaderComponent = ({
-    title,
-    subtitle,
-    wrapperStyle,
-    imgLink,
-    imgStyle,
-    iconSize,
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    const titleStyle = {
-        fontSize: '26px',
-        fontWeight: 'bold',
-        color: `${activeTheme.textColor}`,
-        lineHeight: '36px',
-        display: 'flex',
-        gap: '14px',
-        alignItems: 'flex-start',
-        paddingLeft: '25px',
-    };
-
-    const subtitleStyle = {
-        fontSize: '13px',
-        color: `${activeTheme.neutral['neutral-2']}`,
-        lineHeight: '24px',
-        paddingLeft: '25px',
-    };
-
-    return (
-        <div style={wrapperStyle}>
-            <div style={titleStyle}>
-                {imgLink ? (
-                    <img src={imgLink} alt='userIcon' srcset='' style={imgStyle} />
-                ) : (
-                    <Icon
-                        icon='user-icon'
-                        size={iconSize}
-                        color={activeTheme.primary['primary-1']}
-                    />
-                )}{' '}
-                <h4>{title}</h4>
-            </div>
-            <div style={subtitleStyle}>
-                <p>{subtitle}</p>
-            </div>
-        </div>
-    );
-};
-
-HeaderComponent.propTypes = {
-    /**
-     * How large should the default icon be?
-     */
-    size: PropTypes.number,
-};
-HeaderComponent.defaultProps = {
-    iconSize: 23,
-};