groundfloor-react-ui 1.0.0

package/components/Inputs/SearchInput.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from '../Icon';
+import { TextInput } from './TextInput';
+
+export const SearchInput = ({ label, placeholder, handleSearch, searchInput, customStylesForm, customStyleObject, textBoxStyle, ...props }) => {
+
+    return <TextInput
+        iconAfter={<Icon icon='magnifier-icon' />}
+        label={label}
+        textBoxStyle={textBoxStyle}
+        placeholder={placeholder}
+        ref={searchInput}
+        onChange={handleSearch}
+        {...props}
+    />
+}
+
+

package/components/Inputs/Signature.js

@@ -0,0 +1,278 @@
+import React, { useState, useRef, useEffect } from "react";
+import SignaturePad from 'react-signature-pad-wrapper'
+import styled from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import defaultStyle from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+import PropTypes from "prop-types";
+
+import { Icon } from "../Icon";
+
+const ParentDiv = styled.div`
+
+    //Set the styles from the default styles object
+    ${({ theme, defaultParentDivStyle }) => {
+        return getDefaultStyles(theme, defaultParentDivStyle);
+    }}
+    
+    border: 1px solid ${({ isMyInputFocused, activeColor, defaultColor }) => isMyInputFocused ? activeColor : defaultColor};
+    
+    &:focus-within{
+        border-color:  ${({ activeColor }) => activeColor};
+    }
+`;
+
+const WrapperDiv = styled.div`
+    
+    //Set the styles from the default styles object
+    ${({ theme, defaultWrapperDivStyle }) => {
+        return getDefaultStyles(theme, defaultWrapperDivStyle);
+    }}
+
+    flex-direction: ${({ signIcon }) => signIcon ? 'column' : 'initial'};
+    width: ${({ signIcon }) => signIcon ? 'min-content' : 'calc(100% - 50px) !important'};
+    max-width: ${({ signIcon }) => signIcon ? '42px' : '490px'};
+    border-right: 1px solid 
+        ${({ activeColor, defaultColor, isMyInputFocused, signIcon }) =>
+        signIcon ? isMyInputFocused ? activeColor : defaultColor : 'none'};
+    border-left: ${({ signIcon }) => !signIcon ? 'none' : ''};
+    margin-left: ${({ signIcon }) => !signIcon ? '42px' : ''};
+    position:${({ signIcon }) => !signIcon ? '' : 'absolute'};
+    
+`;
+
+const ControllerDiv = styled.div`
+    width: 39px;
+    height:44px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border-bottom:  ${({ penIcon, isMyInputFocused, activeColor, defaultColor, }) =>
+        penIcon ? isMyInputFocused ? "1px solid " + activeColor : "1px solid " + defaultColor : ''};
+    background-color:rgba(255, 255, 255, 0.05);
+    cursor:pointer;
+`;
+
+
+const InputText = styled.input`
+    ${({ theme, defaultInputStyle }) => {
+        return getDefaultStyles(theme, defaultInputStyle);
+    }}
+    
+    border-bottom:  ${({ value, defaultColor, }) =>
+        value.length > 0 ? 'none' : "1px solid " + defaultColor};
+    
+    &::placeholder{
+        font-size: 17px;
+        text-align: center;
+        color: ${({ placeholderColor }) => placeholderColor};
+        font-family: "Averta";
+        font-style: normal;
+        font-weight: normal;
+        line-height: 22px;
+    }
+    &:focus-within {
+		border: none;
+        outline: none;
+        
+        ::placeholder {
+            color: transparent;
+        }
+    }
+    
+    // custom styles
+    ${({ customInputStyle }) => customInputStyle}
+`;
+
+const SignaturePadDiv = styled.div`
+    position: relative;
+    width: inherit;
+    display: flex;
+    margin: 4px;
+`;
+
+const IconDiv = styled.div`
+    padding-left: 2px;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    margin-left: ${({ selected }) => selected === 'sign' ? '' : 'auto'};
+`;
+
+
+export const SignatureInput = ({ onChange, activeColor, defaultColor, placeholderColor, placeholderText, customInputStyle, pointsArray, setPointsArray, value, setValue, valueForSignatureDrawing, setValueForSignatureDrawing, imageURL, setImageURL, ...props }) => {
+    const [selected, setSelected] = useState('default');
+    const [isMyInputFocused, setIsMyInputFocused] = useState(false);
+    const [dirty, setDirty] = useState(false);
+    const pad = useRef(null);
+
+    // const theme = defaultStyle;
+
+    useEffect(() => {
+        if (dirty) {
+            save();
+            setValueForSignatureDrawing(pad.current);
+        }
+    }, [dirty === true])
+
+    const onClear = () => {
+        setValue('');
+        setValueForSignatureDrawing(pad.current);
+        if (pad.current) {
+            pad.current.clear();
+        }
+        setIsMyInputFocused(false);
+        setDirty(false);
+    }
+
+    const save = () => {
+        setPointsArray(pad.current.toData());
+        setImageURL(pad.current.toDataURL("image/png"));
+        return [imageURL, pointsArray];
+    }
+
+    return (
+        <ParentDiv
+            theme={defaultStyle}
+            defaultParentDivStyle={'signature-parent-div'}
+            isMyInputFocused={isMyInputFocused}
+            selected={selected}
+            activeColor={activeColor}
+            defaultColor={defaultColor}>
+            <WrapperDiv
+                theme={defaultStyle}
+                defaultWrapperDivStyle={'signature-wrapper-div'}
+                activeColor={activeColor}
+                defaultColor={defaultColor}
+                selected={selected}
+                isMyInputFocused={isMyInputFocused}
+                signIcon={true}>
+                <ControllerDiv
+                    activeColor={activeColor}
+                    defaultColor={defaultColor}
+                    isMyInputFocused={isMyInputFocused}
+                    penIcon={true}
+                    onClick={() => { setSelected('default') }}>
+                    <Icon
+                        icon='pen-icon'
+                        color={selected === 'default' ?
+                            activeColor : 'black'} />
+                </ControllerDiv>
+                <ControllerDiv
+                    activeColor={activeColor} defaultColor={defaultColor}
+                    isMyInputFocused={isMyInputFocused}
+                    penIcon={false}
+                    onClick={() => { setSelected('sign') }}>
+                    <Icon
+                        icon='sign-icon'
+                        color={selected !== 'default' ?
+                            activeColor : 'black'} />
+                </ControllerDiv>
+            </WrapperDiv>
+            <WrapperDiv
+                theme={defaultStyle}
+                defaultWrapperDivStyle={'signature-wrapper-div'}
+                activeColor={activeColor}
+                defaultColor={defaultColor}
+                selected={selected}
+                isMyInputFocused={isMyInputFocused}
+                signIcon={false}
+                onTouchStart={() => { console.log('touchstart') }}>
+                {selected === 'default' ?
+                    <InputText
+                        theme={defaultStyle} defaultInputStyle={'signature-input-text'}
+                        placeholder={placeholderText}
+                        placeholderColor={placeholderColor}
+                        customInputStyle={customInputStyle}
+                        onBlur={() => setIsMyInputFocused(false)}
+                        onFocus={() => setIsMyInputFocused(true)}
+                        value={value}
+                        defaultColor={defaultColor}
+                        onChange={(e) => setValue(e.target.value)} />
+                    : <SignaturePadDiv
+                        onMouseEnter={() => setIsMyInputFocused(true)}
+                        onMouseLeave={() => setIsMyInputFocused(false)}
+                        onClick={() => { setDirty(true); save(); }}>
+                        <SignaturePad
+                            ref={pad}
+                            redrawOnResize
+                            height={75}
+                            options={{ minWidth: 1, maxWidth: 1, penColor: '#444444' }} />
+                    </SignaturePadDiv>
+                }
+                {(value || dirty) && <IconDiv selected={selected} onClick={() => onClear()}>
+                    <Icon
+                        icon='cross-icon'
+                        color={defaultColor}
+                    />
+                </IconDiv>
+                }
+            </WrapperDiv>
+        </ParentDiv>
+    )
+}
+
+SignatureInput.propTypes = {
+    /**
+     *	Active Color for the signature
+     */
+    activeColor: PropTypes.string,
+    /**
+     *	Default Color for the signature
+     */
+    defaultColor: PropTypes.string,
+    /**
+     *	PlaceHolder Color for the signature
+     */
+    placeholderColor: PropTypes.string,
+    /**
+     *	PlaceHolder text
+     */
+    placeholderText: PropTypes.string,
+    /**
+     *	Custom style of the input text
+     */
+    customInputStyle: PropTypes.object,
+    /**
+     *	Array of points for the signature
+     */
+    pointsArray: PropTypes.any,
+    /**
+     *	Function that sets the Array of points for the signature
+     */
+    setPointsArray: PropTypes.func,
+    /**
+     *	Signature Text
+     */
+    value: PropTypes.string,
+    /**
+     *	Signature Text Setter
+     */
+    setValue: PropTypes.func,
+    /**
+     *	Image url of the Signature drawing
+     */
+    imageURL: PropTypes.string,
+    /**
+     *	Function that sets Image url of the Signature drawing
+     */
+    setImageURL: PropTypes.func
+
+}
+
+SignatureInput.defaultProps = {
+    activeColor: `${defaultThemeColor.primary['primary-1']}`,
+    defaultColor: `${defaultThemeColor.neutral['neutral-3']}`,
+    placeholderColor: `${defaultThemeColor.neutral['neutral-3']}`,
+    customInputStyle: {},
+    placeholderText: 'Type your signature here',
+    pointsArray: null,
+    setPointsArray: () => { },
+    value: "",
+    setValue: () => { },
+    imageURL: '',
+    setImageURL: () => { },
+    setValueForSignatureDrawing: () => { },
+}
+

package/components/Inputs/TextArea.js

@@ -0,0 +1,196 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+import { Label } from '../Label';
+
+const border = `#D4D7E3`;
+
+const TextWrapper = styled.div`
+    //Set the styles from the default styles object
+        ${({ theme, defaultWrapperStyle }) => {
+        return getDefaultStyles(theme, defaultWrapperStyle);
+    }}
+	
+	border: ${({ isValid, themeColor }) => !isValid ? '1px solid ' + themeColor.variant['error'] :
+        '1px solid ' + border};
+    
+    .input-icon svg path {
+		fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
+	}
+    
+    &:focus-within {
+		border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
+        outline: none;
+
+		.input-icon svg path {
+			fill: ${({ themeColor }) => themeColor.variant['primary-1']};
+		} 
+    }
+    
+    // custom styles
+    ${({ textAreaStyle }) => textAreaStyle}
+`;
+
+TextWrapper.defaultProps = {
+    themeColor: defaultThemeColor,
+}
+
+
+const Input = styled.textarea`
+    //Set the styles from the default styles object
+    ${({ theme, defaultInputStyle }) => {
+        return getDefaultStyles(theme, defaultInputStyle);
+    }}
+    margin: 0;
+    overflow: auto;
+    resize: none
+    // custom styles
+    ${({ inputStyle }) => inputStyle}
+`;
+
+const inline = css`
+	display: flex;
+    gap: 10px;
+	align-items: center;
+`
+
+const Form = styled.div`
+	${({ labelInline }) => labelInline ? inline : null}
+    ${({ customStylesForm }) => {
+        if (customStylesForm) {
+            return { ...customStylesForm }
+        }
+    }}  
+    position: relative;
+	.err-text {
+		color: ${({ themeColor }) => themeColor.variant['error']};
+		margin-top: 5px;
+		font-size: 10px;
+	}
+`
+
+Form.defaultProps = {
+    themeColor: defaultThemeColor,
+}
+
+
+export const TextArea = React.forwardRef(({ themeColor, customStylesForm, textAreaStyle, labelStyle, inputStyle, errMsg, required, label, labelInline, iconBefore, iconAfter, isValid, rows, cols, ...props }, ref) => {
+    return (
+        <Form labelInline={labelInline} customStylesForm={customStylesForm} {...props}>
+            <div style={{ display: 'flex' }}>
+                <Label
+                    themeColor={defaultThemeColor}
+                    customStyles={labelStyle}
+                    type={'label-text'}
+                    labelInline={labelInline}
+                    text={label}
+                    errMsg={errMsg}
+                    style={{
+                        'display': 'flex',
+                        'paddingBottom': `${!labelInline ? '10px' : ''}`,
+                    }}
+                    {...props} />
+                {required && <div style={{
+                    marginLeft: '4px',
+                    color: `${themeColor.variant['error']}`
+                }} >*</div>}
+            </div>
+            <TextWrapper
+                required={required}
+                themeColor={defaultThemeColor}
+                textAreaStyle={textAreaStyle}
+                isValid={isValid}
+                theme={defaultStyles}
+                defaultWrapperStyle={'textbox-wrapper'} {...props}>
+                <div className="input-icon">
+                    {iconBefore}
+                </div>
+                <Input
+                    ref={ref}
+                    inputStyle={inputStyle}
+                    defaultInputStyle={'textarea-wrapper'}
+                    cols={cols}
+                    rows={rows}
+                    {...props} size='1' />
+                <div className="input-icon">
+                    {iconAfter}
+                </div>
+            </TextWrapper>
+            <div className='err-text'>
+                {errMsg}
+            </div>
+        </Form>
+    )
+})
+
+TextArea.propTypes = {
+    /**
+     *	Theme props of default in-built css
+     */
+    theme: PropTypes.object,
+    /**
+     *	Color props of default theme
+     */
+    themeColor: PropTypes.object,
+    /**
+     *	row number of the text area
+     */
+    rows: PropTypes.number,
+    /**
+     *	Label of Input
+     */
+    label: PropTypes.string,
+    /**
+     *	Is the input required?
+     */
+    required: PropTypes.bool,
+    /**
+     *	Should label be inline with textbox?
+     */
+    labelInline: PropTypes.bool,
+    /**
+     *	Error Message
+     */
+    errMsg: PropTypes.string,
+    /**
+     *	Icon before input value
+     */
+    iconBefore: PropTypes.any,
+    /**
+     *	Icon after input value
+     */
+    iconAfter: PropTypes.any,
+    /**
+     *	custom style of textbox Wrapper
+     */
+    textAreaStyle: PropTypes.object,
+    /**
+     *	custom style of textbox input
+     */
+    labelStyle: PropTypes.object,
+    /**
+     *	custom style of textbox label
+     */
+    inputStyle: PropTypes.object,
+}
+
+TextArea.defaultProps = {
+    themeColor: defaultThemeColor,
+    theme: defaultStyles,
+    label: '',
+    required: false,
+    isValid: true,
+    labelInline: false,
+    errMsg: '',
+    iconBefore: null,
+    iconAfter: null,
+    textAreaStyle: {},
+    labelStyle: {},
+    inputStyle: {},
+    // rows:10,
+    // cols:100
+}
+

package/components/Inputs/TextInput.js

@@ -0,0 +1,182 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+import { Label } from '../Label';
+
+const border = `#D4D7E3`;
+
+const TextWrapper = styled.div`
+    //Set the styles from the default styles object
+        ${({ theme, defaultWrapperStyle }) => {
+		return getDefaultStyles(theme, defaultWrapperStyle);
+	}}
+	
+	border: ${({ isValid, themeColor }) => !isValid ? '1px solid ' + themeColor.variant['error'] :
+		'1px solid ' + border};
+    
+    .input-icon svg path {
+		fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
+	}
+    
+    &:focus-within {
+		border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
+        outline: none;
+
+		.input-icon svg path {
+			fill: ${({ themeColor }) => themeColor.variant['primary-1']};
+		} 
+    }
+    
+    // custom styles
+    ${({ textBoxStyle }) => textBoxStyle}
+	
+`;
+
+const Input = styled.input`
+    //Set the styles from the default styles object
+    ${({ theme, defaultInputStyle }) => {
+		return getDefaultStyles(theme, defaultInputStyle);
+	}}
+    
+    // custom styles
+    ${({ inputStyle }) => inputStyle}
+
+	.sc-furwcr bxRAoq{
+		color: ${defaultThemeColor.variant['neutral-3']}
+	}
+
+`;
+
+const inline = css`
+	display: flex;
+    gap: 10px;
+	align-items: center;
+`
+
+const Form = styled.div`
+	${({ labelInline }) => labelInline ? inline : null}
+	.err-text {
+		color: ${({ themeColor }) => themeColor.variant['error']};
+		margin-top: 5px;
+		font-size: 10px;
+	}
+`
+
+Form.defaultProps = {
+	themeColor: defaultThemeColor,
+}
+
+
+export const TextInput = ({ themeColor, textBoxStyle, labelStyle, inputStyle, errMsg, required, label, labelInline, iconBefore, iconAfter, isValid, type, ...props }) => {
+	return (
+		<Form labelInline={labelInline} {...props}>
+			<div style={{ display: 'flex' }}>
+				<Label
+					themeColor={defaultThemeColor}
+					customStyles={labelStyle}
+					type={'label-text'}
+					labelInline={labelInline}
+					text={label}
+					errMsg={errMsg}
+					style={{
+						'display': 'flex',
+						'paddingBottom': `${!labelInline ? '10px' : ''}`,
+					}}
+					{...props} />
+				{required && <div style={{
+					marginLeft: '4px',
+					color: `${themeColor.variant['error']}`
+				}} >*</div>}
+			</div>
+			<TextWrapper
+				required={required}
+				themeColor={defaultThemeColor}
+				textBoxStyle={textBoxStyle}
+				isValid={isValid}
+				theme={defaultStyles}
+				defaultWrapperStyle={'textbox-wrapper'} {...props}>
+				<div className="input-icon">
+					{iconBefore}
+				</div>
+				<Input inputStyle={inputStyle} type={type} defaultInputStyle={'input-wrapper'} {...props} />
+				<div className="input-icon">
+					{iconAfter}
+				</div>
+			</TextWrapper>
+			{errMsg.length > 0 && <div className='err-text'>
+				{errMsg}
+			</div>}
+		</Form>
+	)
+}
+
+TextInput.propTypes = {
+	/**
+	 *	Theme props of default in-built css
+	 */
+	theme: PropTypes.object,
+	/**
+	 *	Color props of default theme
+	 */
+	themeColor: PropTypes.object,
+	/**
+	 *	Label of Input
+	 */
+	label: PropTypes.string,
+	/**
+	 *	Is the input required?
+	 */
+	required: PropTypes.bool,
+	/**
+	 *	Should label be inline with textbox?
+	 */
+	labelInline: PropTypes.bool,
+	/**
+	 *	Error Message
+	 */
+	errMsg: PropTypes.string,
+	/**
+	 *	Icon before input value
+	 */
+	iconBefore: PropTypes.any,
+	/**
+	 *	Icon after input value
+	 */
+	iconAfter: PropTypes.any,
+	/**
+	 *	custom style of textbox Wrapper
+	 */
+	textBoxStyle: PropTypes.object,
+	/**
+	 *	custom style of textbox input
+	 */
+	labelStyle: PropTypes.object,
+	/**
+	 *	custom style of textbox label
+	 */
+	inputStyle: PropTypes.object,
+	/**
+	 *	input type i.e:- text, password
+	 */
+	type: PropTypes.string,
+
+}
+
+TextInput.defaultProps = {
+	themeColor: defaultThemeColor,
+	theme: defaultStyles,
+	label: '',
+	required: false,
+	isValid: true,
+	labelInline: false,
+	errMsg: '',
+	iconBefore: null,
+	iconAfter: null,
+	textBoxStyle: {},
+	labelStyle: {},
+	inputStyle: {},
+	type: 'text'
+}