groundfloor-react-ui 1.0.6 → 1.0.9

package/components/Button/PrimaryButton.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
-// import { Loader } from '../Loaders';
-import getDefaultStyles, { hexToRGB } from "../constants/utils";
+import { Loader } from '../Loaders';
+import getDefaultStyles, { hexToRGB } from '../constants/utils';
 
 /**
  * Primary UI component for user interaction
@@ -12,61 +12,85 @@ import getDefaultStyles, { hexToRGB } from "../constants/utils";
 const sizes = {
     sm: {
         fontSize: '14px',
-        padding: '5px 15px'
+        padding: '5px 15px',
     },
     md: {
         fontSize: '16px',
-        padding: '5.5px 15px'
+        padding: '5.5px 15px',
     },
     lg: {
         fontSize: '18px',
-        padding: '8px 20px'
+        padding: '8px 20px',
     },
-}
+};
 
-const buttonDisabledBg = ({ theme, variant }) => hexToRGB(theme.variant[variant], 0.6);
+const buttonDisabledBg = ({ theme, variant }) =>
+    hexToRGB(theme.variant[variant], 0.6);
 const fontColor = defaultThemeColor.bgColor;
 
 const StyledButton = styled.button`
-    background: ${({ theme, variant }) => theme.variant[variant]};
+  background: ${({ theme, variant }) => theme.variant[variant]};
+  color: ${fontColor};
+  padding: ${({ size }) => sizes[size].padding};
+  border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+  border-radius: 5px;
+  font-size: ${({ size }) => sizes[size].fontSize};
+  display: flex;
+  align-items: center;
+  width: ${({ block }) => (block ? '100%' : 'auto')};
+  cursor: pointer;
+  line-height: 18px;
+  &:disabled {
     color: ${fontColor};
-    padding: ${({ size }) => sizes[size].padding};
-    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
-    border-radius: 5px;
-    font-size: ${({ size }) => sizes[size].fontSize};
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    cursor: pointer;
-    line-height: 18px;
-    &:disabled {
-      color: ${fontColor};
-      background: ${buttonDisabledBg};
-        border: 1px solid ${buttonDisabledBg};
-        cursor: not-allowed;
-    }
+    background: ${buttonDisabledBg};
+    border: 1px solid ${buttonDisabledBg};
+    cursor: not-allowed;
+  }
 
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultStyle }) => {
         return getDefaultStyles(theme, defaultStyle);
     }}
-`;
-// console.log(fontColor)
 
-export const PrimaryButton = ({ block, size, style, variant, disabled, isLoading, type, ...props }) => {
+  // custom styles
+  ${({ btnStyle }) => btnStyle}
+`;
 
+export const PrimaryButton = ({
+    btnStyle,
+    block,
+    size,
+    style,
+    variant,
+    disabled,
+    isLoading,
+    type,
+    ...props
+}) => {
     return (
         <StyledButton
             block={block}
             variant={variant}
-            defaultStyle="button"
+            defaultStyle='button'
             type={type}
             style={style}
             size={size}
             disabled={disabled}
+            btnStyle={btnStyle}
             {...props}
         >
-            {/* {isLoading && <div style={{ paddingRight: '10px', marginTop: '6px' }}><Loader customStyles={{ 'background-color': fontColor }} size={16} /></div>} */}
+            {isLoading && (
+                <div
+                    style={{
+                        paddingRight: '10px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
+                </div>
+            )}
             {props.children}
         </StyledButton>
     );
@@ -102,14 +126,18 @@ PrimaryButton.propTypes = {
      */
     theme: PropTypes.object,
     /**
-    * Type of the btn i.e: button or submit etc.
-    */
+     * Type of the btn i.e: button or submit etc.
+     */
     type: PropTypes.string,
+    /**
+     * custome style of button
+     */
+    btnStyle: PropTypes.object,
 };
 
 StyledButton.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 PrimaryButton.defaultProps = {
     theme: defaultThemeColor,
@@ -119,4 +147,5 @@ PrimaryButton.defaultProps = {
     disabled: false,
     size: 'md',
     onClick: undefined,
-};
+    btnStyle: {},
+};

package/components/Button/SecondaryButton.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
+import { Loader } from '../Loaders';
 
 /**
  * Secondary UI component for user interaction
@@ -10,60 +11,87 @@ import getDefaultStyles from '../constants/utils';
 
 const sizes = {
     sm: {
-        fontSize: '14px',
-        padding: '5px 15px'
+        fontSize: '14',
+        padding: '5px 15px',
     },
     md: {
-        fontSize: '16px',
-        padding: '5.5px 15px'
+        fontSize: '16',
+        padding: '5.5px 15px',
     },
     lg: {
-        fontSize: '18px',
-        padding: '8px 20px'
+        fontSize: '18',
+        padding: '8px 20px',
     },
-}
+};
 
 const buttonDisabledBg = '#BBC4CF';
+const fontColor = defaultThemeColor.primary['primary-1'];
 
 const StyledButton = styled.button`
-    color: ${({ theme, variant }) => theme.variant[variant]};
-    background: ${({ theme }) => theme.bgColor};
-    padding: ${({ size }) => sizes[size].padding};
-    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
-    font-size: ${({ size }) => sizes[size].fontSize};
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    cursor: pointer;
-    line-height: 18px;
-    &:disabled {
-        color: #929EAC;
-        border: 1px solid ${buttonDisabledBg};
-        cursor: not-allowed;
-    }
+  color: ${({ theme, variant }) => theme.variant[variant]};
+  background: ${({ theme }) => theme.bgColor};
+  padding: ${({ size }) => sizes[size].padding};
+  border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+  font-size: ${({ size }) => sizes[size].fontSize};
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  width: ${({ block }) => (block ? '100%' : 'auto')};
+  cursor: pointer;
+  line-height: 18px;
+  &:disabled {
+    color: #929eac;
+    border: 1px solid ${buttonDisabledBg};
+    cursor: not-allowed;
+  }
 
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultStyle }) => {
         return getDefaultStyles(theme, defaultStyle);
     }}
+  // custom styles
+    ${({ btnStyle }) => btnStyle}
 `;
 
-export const SecondaryButton = ({ block, size, style, variant, disabled, type, ...props }) => {
+export const SecondaryButton = ({
+    btnStyle,
+    isLoading,
+    block,
+    size,
+    style,
+    variant,
+    disabled,
+    type,
+    ...props
+}) => {
     const theme = useTheme() || defaultThemeColor;
 
     return (
         <StyledButton
             block={block}
             variant={variant}
-            defaultStyle="button"
+            defaultStyle='button'
             style={style}
             size={size}
             disabled={disabled}
             type={type}
+            btnStyle={btnStyle}
+            isLoading={isLoading}
             {...props}
         >
-            {props.children}
+            {isLoading && (
+                <div
+                    style={{
+                        paddingRight: '10px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
+                </div>
+            )}
+            {props.children}{' '}
         </StyledButton>
     );
 };
@@ -94,14 +122,18 @@ SecondaryButton.propTypes = {
      */
     theme: PropTypes.object,
     /**
-    * Type of the btn i.e: button or submit etc.
-    */
+     * Type of the btn i.e: button or submit etc.
+     */
     type: PropTypes.string,
+    /**
+     * custome style of button
+     */
+    btnStyle: PropTypes.object,
 };
 
 StyledButton.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 SecondaryButton.defaultProps = {
     theme: defaultThemeColor,
@@ -110,4 +142,5 @@ SecondaryButton.defaultProps = {
     disabled: false,
     size: 'md',
     onClick: undefined,
+    btnStyle: {},
 };

package/components/Form/FormComponent.js

@@ -8,6 +8,7 @@ import {
   DropdownSelect,
   DropzoneInput,
   NumericInput,
+  PasswordInput,
   RadioInput,
   SearchInput,
   SignatureInput,
@@ -23,6 +24,7 @@ import {
   MultiColumnWrapper,
   MultiColumnDiv,
 } from '../DesignComponent';
+import { Table } from '../Tables';
 
 export const FormComponent = ({ formData, ...props }) => {
   const header = (item) => {
@@ -133,6 +135,14 @@ export const FormComponent = ({ formData, ...props }) => {
     return <SearchInput {...item} {...props} />;
   };
 
+  const tableInput = (item) => {
+    return <Table {...item} {...props} />;
+  };
+
+  const passwordInput = (item) => {
+    return <PasswordInput {...item} {...props} />;
+  };
+
   const handleSubmit = () => {
     console.log('form submit');
   };
@@ -175,6 +185,10 @@ export const FormComponent = ({ formData, ...props }) => {
         return tinyButton(item);
       case 'search':
         return searchInput(item);
+      case 'table':
+        return tableInput(item);
+      case 'passwordInput':
+        return passwordInput(item);
       default:
         break;
     }

package/components/Inputs/CheckBoxInput.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
@@ -6,137 +6,196 @@ import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
 // import tick from '../../assets/icons/checkmark.svg';
-import { Icon } from '../Icon'
+import { Icon } from '../Icon';
 
 const CheckBoxOuter = styled.div`
+  box-sizing: initial;
 
-    box-sizing:initial;
-
-    //Set the styles from the default styles object
-    ${({ theme, defaultCheckBoxOuterStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultCheckBoxOuterStyle }) => {
         return getDefaultStyles(theme, defaultCheckBoxOuterStyle);
     }}
-    
-    border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) => checked ? checkedCheckBoxColor : defaultBorderColor};
-    
-    // custom styles
-    ${({ checkBoxOuterStyle }) => checkBoxOuterStyle}
+
+  border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) =>
+        checked ? checkedCheckBoxColor : defaultBorderColor};
+
+  // custom styles
+  ${({ checkBoxOuterStyle }) => checkBoxOuterStyle}
 `;
 
 const CheckBoxInner = styled.div`
-    
-    box-sizing:initial;
+  box-sizing: initial;
 
-    //Set the styles from the default styles object
-    ${({ theme, defaultCheckBoxInnerStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultCheckBoxInnerStyle }) => {
         return getDefaultStyles(theme, defaultCheckBoxInnerStyle);
     }}
-    
-    // background-image: url(${({ signCheck }) => signCheck});
-    background-color: ${({ checked, checkedCheckBoxColor }) => checked ? checkedCheckBoxColor : defaultThemeColor.bgColor};
-    border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) => checked ? checkedCheckBoxColor : defaultBorderColor};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    // custom styles
-    ${({ checkBoxInnerStyle }) => checkBoxInnerStyle}
-    
+
+  // background-image: url(${({ signCheck }) => signCheck});
+    background-color: ${({ checked, checkedCheckBoxColor }) =>
+        checked ? checkedCheckBoxColor : defaultThemeColor.bgColor};
+  border: 2px solid
+    ${({ checkedCheckBoxColor, defaultBorderColor, checked }) =>
+        checked ? checkedCheckBoxColor : defaultBorderColor};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // custom styles
+  ${({ checkBoxInnerStyle }) => checkBoxInnerStyle}
 `;
 CheckBoxInner.defaultProps = {
     themeColor: defaultThemeColor,
     // signCheck: `${tick}`
-}
+};
 
 const OptionText = styled.span`
-
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
+  //Set the styles from the default styles object
+  ${({ theme, type }) => {
         return getDefaultStyles(theme, type);
     }}
-    
-    color: ${({ checked, defaultTextColor, checkedTextColor }) => checked ? checkedTextColor : defaultTextColor};
-    
-    margin-right: ${({ inline }) => inline ? '30px' : '0px'};
-    
-    // custom styles
-    ${({ optionTextStyle }) => optionTextStyle}
+
+  color: ${({ checked, defaultTextColor, checkedTextColor }) =>
+        checked ? checkedTextColor : defaultTextColor};
+
+  margin-right: ${({ inline }) => (inline ? '30px' : '0px')};
+
+  // custom styles
+  ${({ optionTextStyle }) => optionTextStyle}
 `;
 
 const WrapperDiv = styled.label`
-    width: fit-content;
-    margin-bottom: ${({ inline }) => !inline ? '18px !important' : ''};
-    cursor: pointer;
-    align-items: center;
-    display: flex;
-    gap: 10px;
-
-`
+  width: fit-content;
+  margin-bottom: ${({ inline }) => (!inline ? '18px !important' : '')};
+  cursor: pointer;
+  align-items: center;
+  display: flex;
+  gap: 10px;
+`;
 
 const ParentDiv = styled.div`
-    flex-direction: ${({ inline }) => inline ? "row" : "column"};
-    width: ${({ inline }) => !inline ? "auto" : "initial"};
-`
+  flex-direction: ${({ inline }) => (inline ? 'row' : 'column')};
+  width: ${({ inline }) => (!inline ? 'auto' : 'initial')};
+`;
 
+export const CheckBoxInput = ({
+    getCheckedArr,
+    checkBoxOuterStyle,
+    checkBoxInnerStyle,
+    optionTextStyle,
+    defaultBorderColor,
+    defaultTextColor,
+    checkedTextColor,
+    checkedCheckBoxColor,
+    labelStyle,
+    label,
+    options,
+    setOptions,
+    inline,
+    wrapperStyle,
+    ...props
+}) => {
+    useEffect(() => {
+        filterCheckedOptions(options);
+    }, []);
 
-export const CheckBoxInput = ({ checkBoxOuterStyle, checkBoxInnerStyle, optionTextStyle, defaultBorderColor, defaultTextColor, checkedTextColor, checkedCheckBoxColor, labelStyle, label, options, setOptions, inline, wrapperStyle, ...props }) => {
     const checkBox = (item, i) => {
-        let newOptions = [...options]
+        let newOptions = [...options];
         newOptions[i].checked = !item.checked;
         setOptions(newOptions);
-    }
+        filterCheckedOptions(newOptions);
+    };
+
+    const filterCheckedOptions = (newOptions) => {
+        let filteredOptions = newOptions.filter(
+            (option) => option.checked !== false
+        );
+        getCheckedArr(filteredOptions);
+    };
 
     const defaultStyleForWrapper = {
         display: 'flex',
         flexDirection: 'column',
-        flexWrap: 'wrap'
-    }
+        flexWrap: 'wrap',
+    };
     const returnedTarget = Object.assign(defaultStyleForWrapper, wrapperStyle);
 
-
     return (
-        <div style={returnedTarget}  {...props}>
+        <div style={returnedTarget} {...props}>
             <Label
                 themeColor={defaultThemeColor}
                 customStyles={labelStyle}
                 type={'check-label'}
                 text={label}
-                {...props} />
-            <ParentDiv style={{ display: 'flex', flexWrap: 'wrap' }} inline={inline} {...props}>
+                {...props}
+            />
+            <ParentDiv
+                style={{ display: 'flex', flexWrap: 'wrap' }}
+                inline={inline}
+                {...props}
+            >
                 {options?.map((item, i) => {
-                    return <WrapperDiv inline={inline} key={`${item.name}-${i}`}
-                        onClick={() => { checkBox(item, i) }}  {...props}>
-                        {item.checked ?
-                            <CheckBoxInner
-                                theme={defaultStyles}
-                                defaultCheckBoxInnerStyle={'checkBox-inner'}
-                                checkBoxInnerStyle={{ ...checkBoxInnerStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', borderColor: item?.disabled && item?.disabledColor }}
-                                defaultBorderColor={defaultBorderColor}
-                                checkedCheckBoxColor={checkedCheckBoxColor}
-                                checked={!item?.disabled && item.checked} {...props} >
-                                <Icon icon='check-icon' size={18} color='white' />
-                            </CheckBoxInner>
-                            : <CheckBoxOuter
-                                theme={defaultStyles}
-                                defaultCheckBoxOuterStyle={'checkBox-outer'}
-                                checkBoxOuterStyle={{ ...checkBoxOuterStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', borderColor: item?.disabledColor }}
-                                defaultBorderColor={defaultBorderColor}
-                                {...props} />}
-                        <OptionText
+                    return (
+                        <WrapperDiv
                             inline={inline}
-                            optionTextStyle={{ ...optionTextStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', color: item?.disabledColor }}
-                            checked={item.checked}
-                            defaultTextColor={defaultTextColor}
-                            checkedTextColor={checkedTextColor}>{item.label}</OptionText>
-                    </WrapperDiv>
+                            key={`${item.name}-${i}`}
+                            onClick={() => {
+                                checkBox(item, i);
+                            }}
+                            {...props}
+                        >
+                            {item.checked ? (
+                                <CheckBoxInner
+                                    theme={defaultStyles}
+                                    defaultCheckBoxInnerStyle={'checkBox-inner'}
+                                    checkBoxInnerStyle={{
+                                        ...checkBoxInnerStyle,
+                                        cursor: item?.disabled ? 'not-allowed ' : ' pointer',
+                                        borderColor: item?.disabled && item?.disabledColor,
+                                    }}
+                                    defaultBorderColor={defaultBorderColor}
+                                    checkedCheckBoxColor={checkedCheckBoxColor}
+                                    checked={!item?.disabled && item.checked}
+                                    {...props}
+                                >
+                                    <Icon icon='check-icon' size={18} color='white' />
+                                </CheckBoxInner>
+                            ) : (
+                                <CheckBoxOuter
+                                    theme={defaultStyles}
+                                    defaultCheckBoxOuterStyle={'checkBox-outer'}
+                                    checkBoxOuterStyle={{
+                                        ...checkBoxOuterStyle,
+                                        cursor: item?.disabled ? 'not-allowed ' : ' pointer',
+                                        borderColor: item?.disabledColor,
+                                    }}
+                                    defaultBorderColor={defaultBorderColor}
+                                    {...props}
+                                />
+                            )}
+                            <OptionText
+                                inline={inline}
+                                optionTextStyle={{
+                                    ...optionTextStyle,
+                                    cursor: item?.disabled ? 'not-allowed ' : ' pointer',
+                                    color: item?.disabledColor,
+                                }}
+                                checked={item.checked}
+                                defaultTextColor={defaultTextColor}
+                                checkedTextColor={checkedTextColor}
+                            >
+                                {item.label}
+                            </OptionText>
+                        </WrapperDiv>
+                    );
                 })}
             </ParentDiv>
         </div>
-    )
-}
+    );
+};
 
 CheckBoxInput.propTypes = {
     /**
-     *	Style Custom for whole Checkbox Block 
+     *	Style Custom for whole Checkbox Block
      */
     wrapperStyle: PropTypes.object,
     /**
@@ -187,13 +246,18 @@ CheckBoxInput.propTypes = {
      *	CheckBox value changeHandler
      */
     setOptions: PropTypes.func,
-}
+    /**
+     *	CheckBox checked value changeHandler
+     */
+    getCheckedArr: PropTypes.func,
+};
 
 CheckBoxInput.defaultProps = {
     label: '',
     inline: false,
     options: [],
     setOptions: () => { },
+    getCheckedArr: () => { },
     labelStyle: {},
     checkBoxOuterStyle: {},
     checkBoxInnerStyle: {},
@@ -201,4 +265,4 @@ CheckBoxInput.defaultProps = {
     checkedTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
     defaultBorderColor: '#D4D7E3',
     checkedCheckBoxColor: `${defaultThemeColor.primary['primary-1']}`,
-}
+};