groundfloor-react-ui 1.0.0

package/components/Drawer/Drawer.js

@@ -0,0 +1,93 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import styled, { css } 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
+${({ theme, type, drawerOpen, 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]) {
+                    delete theme.common[property]
+                    tempObj[property] = theme[type][property]
+                }
+                if (drawerOpen) {
+                    tempObj = { ...tempObj, ...theme['drawer-open'] }
+                } else {
+                    tempObj = { ...tempObj, ...theme['drawer-close'] }
+                }
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
+`;
+
+export const Drawer = ({
+    theme,
+    customStyles,
+    drawerOpen,
+    children,
+    ...props
+}) => {
+
+
+    // return ReactDom.createPortal(
+    return (
+        <StyledContainer
+            theme={theme}
+            customStyles={customStyles}
+            type={'drawer'}
+            drawerOpen={drawerOpen}
+            {...props}
+        >
+            {children}
+        </StyledContainer>
+
+    );
+};
+
+Drawer.propTypes = {
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     *	Custom style object
+     */
+    customStyles: PropTypes.object,
+    /**
+    *	Boolean value to to open and close the drawer
+    */
+    drawerOpen: PropTypes.bool,
+};
+
+Drawer.defaultProps = {
+    theme: defaultStyles,
+};
+

package/components/Drawer/index.js

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

package/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,44 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from "prop-types";
+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

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

package/components/FilterChip/FilterChip.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css, useTheme } from 'styled-components';
+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: #F3F5FF;
+`;
+
+const StyledButton = styled.button`
+    font-size: 14px;
+    color: ${({ theme }) => theme.variant['primary-2']};
+    background: ${border};
+    border: 1px solid ${border};
+    padding: 4px 24px;
+    border-radius: 999px;
+    outline: none;
+    cursor: pointer;
+
+    ${({ selected }) => selected ? selectedCss : null}
+
+    &:not(:first-child) {
+        margin-left: 8px;
+    }
+`;
+StyledButton.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+export const FilterChip = ({ options, selected, onClick, ...props }) => {
+    const list = options.map((option, index) => {
+        return (
+            <StyledButton 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

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

package/components/Footer/Footer.js

@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+// import { FooterContext } from '../../../routes/Level2';
+
+/**
+ * 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/FooterContentLev3.js

@@ -0,0 +1,96 @@
+import React, { useContext } from 'react';
+import styled, { css } from 'styled-components';
+// import { FooterContext } from '../../../routes/Level2'
+
+const StyledOutsideContainer = styled.div`
+    font-size: 14px;
+	background-color: transparent;
+    display: flex;
+    left: 0;
+    right: 0;
+    justify-content: space-between;
+    align-items: center;
+    color: red; 
+    cursor: default;
+    ${({ 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 FooterContentLev3 = ({ 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

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

package/components/Form/FormComponent.js

@@ -0,0 +1,273 @@
+import React, { Fragment } from 'react'
+import { FormContainer, FormWrapper, MultiColumnWrapper, MultiColumnDiv, SubmitButtonContainer } from './StyledComponent';
+import defaultThemeColor from '../constants/defaultThemeColor'
+import { Header } from '../Header';
+import { Label } from '../Label';
+import { CheckBoxInput, DateSelect, DropdownSelect, DropzoneInput, NumericInput, RadioInput, SearchInput, SignatureInput, TextArea, TextInput, ToggleSwitch } from '../Inputs';
+import { Rating } from '../Rating';
+import { PrimaryButton, SecondaryButton, TinyButton } from '../Button';
+
+
+
+export const FormComponent = ({ formData, ...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} />
+          </MultiColumnDiv>
+          <MultiColumnDiv>
+            <pre>
+              {JSON.stringify(item, null, 4)}
+            </pre>
+          </MultiColumnDiv>
+        </MultiColumnWrapper>
+      </Fragment>
+    )
+  }
+  const label = (item) => {
+    return (
+      <Label
+        {...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
+        {...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 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 "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)
+      default:
+        break;
+    }
+  }
+
+
+
+  return (
+    <Fragment>
+      <FormContainer defaultThemeColor={defaultThemeColor}>
+        <FormWrapper onSubmit={handleSubmit}>
+          {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

@@ -0,0 +1,39 @@
+import React, { Fragment, useState } from 'react'
+import { Label } from '../..';
+import { SubmitButtonContainer } from './StyledComponent';
+import defaultThemeColor from '../constants/defaultThemeColor'
+import userIcon from "../../assets/icons/users.svg";
+
+
+
+
+export const HeaderComponent = ({ title, subtitle, wrapperstyle }) => {
+
+    const titleStyle = {
+        'fontSize': '26px',
+        'fontWeight': 'bold',
+        'color': `${defaultThemeColor.textColor}`,
+        'lineHeight': '36px',
+        'display': 'flex',
+        'gap': '14px',
+        'alignItems': 'flex-start',
+        'paddingLeft': '25px'
+    }
+
+    const subtitleStyle = {
+        'fontSize': '13px',
+        'color': `${defaultThemeColor.neutral['neutral-2']}`,
+        'lineHeight': '24px',
+        'paddingLeft': '25px'
+    }
+
+    return <div style={wrapperstyle}>
+        <div style={titleStyle}>
+            <img src={userIcon} alt="userIcon" srcset="" />
+            <h4>{title}</h4>
+        </div>
+        <div style={subtitleStyle}>
+            <p>{subtitle}</p>
+        </div>
+    </div>
+}