groundfloor-react-ui 1.0.0 → 1.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "groundfloor-react-ui",
   "description": "Official component library for Ground Floor",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "private": false,

package/components/Inputs/CheckBoxEditableInput.js

@@ -1,352 +0,0 @@
-import React, { useRef} from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import defaultThemeColor from '../../constants/defaultThemeColor';
-import tick from '../../assets/icons/checkmark.svg';
-import editIcon from '../../assets/icons/edit-icon.svg';
-import { Icon } from "../Icon";
-import { TextInput, CheckBoxInput } from '../..';
-
-const CheckBox = styled.input.attrs({ type: "checkbox" })`
-    border: none;
-    margin: 0;
-    margin-top: -4px;
-    width: 10px;
-    height: 10px;
-    display: inline-block;
-    cursor:pointer;
-    visibility: hidden;
-    
-    &:focus {
-        border: 1.5px solid ${({ theme }) => theme.variant['primary-1']};
-        outline: none;
-    }
-    
-    &:after {
-        background-color: ${({theme})=>theme.bgColor};
-        border: 1.5px solid ${({ theme }) => theme.variant['primary-1']};
-        border-radius: 2px;
-        content: " ";
-        display: inline-block;
-        visibility: visible;
-        width: inherit;
-        height: inherit;
-    }
-    &:checked:before {
-        content: '';
-        color: ${({theme})=>theme.bgColor};
-    }
-    &:checked:after {
-        background-image: url(${tick});
-        background-repeat: no-repeat;
-        background-position: center;
-        width: 10px;
-        height: 10px;
-        color: ${({theme})=>theme.bgColor};
-        background-color: ${({ theme, variant }) => theme.variant[variant]};
-        border: 1.5px solid ${({ theme, variant }) => theme.variant[variant]};
-        border-radius: 2px solid ${({ theme, variant }) => theme.variant['primary-1']};
-        text-align: center;
-    }
-    
-`;
-
-CheckBox.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-const Label = styled.label`
-	display: block;
-	margin-bottom: ${({ labelInline }) => !labelInline ? '27px' : ''};
-	margin-right: ${({ labelInline }) => labelInline ? '26px' : ''};
-    color: ${({ theme }) => theme.variant['neutral-1']};
-`;
-Label.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-const OptionText = styled.input`
-    background-color: ${({theme})=>theme.bgColor};
-    border: none;
-    outline: none;
-    height: inherit;
-    width: inherit;
-    color: ${defaultThemeColor.textColor};
-    font-size: 14px;
-    line-height: 16px;
-	margin-left: 12px;
-    display: none;
-          
-    &:focus-within {
-		border: none;
-        outline: none;
-    }
-`;
-
-OptionText.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-const WrapperDiv = styled.label`
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left:11px;
-    padding-right:11px;
-    align-items: baseline;
-    display: flex;
-    gap: 0;
-    width: 100%;
-`;
-
-const OutterDiv = styled.div`
-    display: flex;
-    gap: 0;
-    background: ${({ theme }) => theme.bgColor};
-    border: 1px solid ${({ theme }) => theme.variant['neutral-4']};;
-    border-radius: 6px;
-    cursor: pointer;
-    margin-bottom: 13px;
-    width: inherit;
-    max-width: 444px;
-`;
-
-OutterDiv.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-WrapperDiv.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-const ParentDiv = styled.div`
-    display: inline-flex;
-    width: 100%;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-content: flex-start;;
-    justify-content: center;
-`
-
-const IconDiv = styled.span`
-    cursor: pointer;
-    margin-left: auto;
-    display: flex;
-    justify-content: center;
-`;
-
-const TextDiv = styled.div`
-    display: flex;
-    align-items: center;
-    width: inherit;
-`;
-
-const OtherDiv = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: calc(100% - 30px) !important;
-`;
-
-const OptionSpan = styled.span`
-    padding-right: 6px;
-    margin-left: 14px;
-    font-size: 14px;
-    line-height: 17px;
-`;
-
-
-const CheckBoxEditableInput = ({ theme, label, previewMode, previewModeHeader, options, setOptions, other, setOther, otherValue, setOtherValue, variant, ...props }) => {
-    const myRefs = useRef([]);
-    const mySpanRefs = useRef([]);
-    let newOptions = [];
-
-    const changeHandler = (i) => {
-        console.log("changeHandler");
-        myRefs.current[i].disabled = false;
-        mySpanRefs.current[i].style.display = 'none';
-        myRefs.current[i].style.display = 'block';
-        myRefs.current[i].focus();
-    };
-
-    const changeValue = (e, i) => {
-        newOptions = [...options]
-        newOptions[i].label = e.target.value;
-    }
-
-    const saveValue = (i) => {
-        setOptions(newOptions);
-        myRefs.current[i].disabled = true;
-        mySpanRefs.current[i].style.display = 'inline';
-        myRefs.current[i].style.display = 'none';
-    }
-
-    const saveLabel = (e, i) => {
-        if (e.key === "Enter") {
-            saveValue(i);
-        }
-    }
-
-
-    const deleteLabel = (i) => {
-        setOptions(prevState => {
-            const items = [...prevState];
-            items.splice(i, 1);
-            return items;
-        });
-    }
-
-    return (
-        <div {...props}>
-            {label.length>0 && <Label {...props} >
-                {label}
-            </Label>}
-            <ParentDiv {...props}>
-                {options?.map((item, i) => {
-                    return <OutterDiv key={i} >
-                        <WrapperDiv
-                            key={Math.random() * 101 | 0}
-                            {...props}>
-                            <CheckBox variant={variant} disabled={true}
-                                {...props} />
-                            <TextDiv>
-                                <OptionText
-                                    ref={(el) => (myRefs.current[i] = el)}
-                                    disabled={true}
-                                    onChange={(e) => changeValue(e, i)}
-                                    onBlur={() => saveValue(i)}
-                                    onKeyPress={(e) => saveLabel(e, i)}
-                                    defaultValue={item.label} />
-                                <OptionSpan>
-                                    <span
-                                        style={{paddingRight:'4px'}}
-                                        ref={(el) => (mySpanRefs.current[i] = el)}>{item.label}
-                                    </span>
-                                    <img key={Math.random() * 101 | 0}
-                                        style={{ cursor: 'pointer', marginLeft: '10px' }}
-                                        onClick={() => changeHandler(i)}
-                                        src={editIcon}
-                                        alt="Edit" />
-                                </OptionSpan>
-                            </TextDiv>
-                            <IconDiv key={Math.random() * 101 | 0} 
-                                onClick={() => deleteLabel(i)}>
-                                <Icon icon='cross-icon'
-                                    size={12}
-                                    color={theme.neutral['neutral-2']} />
-                            </IconDiv>
-                        </WrapperDiv>
-                    </OutterDiv>
-                })}
-
-                {other &&
-                    <OutterDiv>
-                        <ParentDiv>
-                            <WrapperDiv style={{ paddingTop: 0 }}>
-                                <CheckBox style={{ marginTop: '-52px' }} disabled={true} />
-                                <OtherDiv>
-                                    <div style={{ display: 'flex', alignItems: 'center', width: "100%" }}>
-                                        <span style={{
-                                            paddingTop: '10px',
-                                            marginLeft: '14px',
-                                            fontSize: '14px',
-                                            lineHeight: '16px',
-                                            color: '#6B747F'
-                                        }}>
-                                            Others
-                                        </span>
-                                        <IconDiv style={{ marginTop: 0, marginRight:'3px' }}
-                                            key={Math.random() * 101 | 0}
-                                            onClick={() => setOther(false)}>
-                                            <Icon icon='cross-icon'
-                                                size={12}
-                                                color={theme.neutral['neutral-2']} />
-                                        </IconDiv>
-                                    </div>
-                                    <div style={{
-                                        marginTop: '10px', marginLeft: '8px', width: 'inherit'
-                                    }}>
-                                        <TextInput
-                                            placeholder="Type Something..."
-                                            value={otherValue}
-                                            onChange={(e) => setOtherValue(e.target.value)} />
-                                    </div>
-                                </OtherDiv>
-                            </WrapperDiv>
-                        </ParentDiv>
-                    </OutterDiv>}
-            </ParentDiv>
-            {previewMode && 
-                <CheckBoxInput
-                variant='primary-1'
-                label={previewModeHeader}
-                options={options}
-                setOptions={setOptions}
-                inline={false} />
-            }
-        </div>
-    )
-}
-
-CheckBoxEditableInput.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-    /**
-     * Type of color on background of checkbox
-     */
-    variant: PropTypes.string,
-    /**
-     *	Label of Checkbox editor
-     */
-    label: PropTypes.string,
-    /**
-     *	Preview mode enable or not
-     */
-    previewMode: PropTypes.bool,
-    /**
-     *	Preview mode header
-     */
-    previewModeHeader: PropTypes.string,
-    /**
-     *	Other Value in the textbox
-     */
-    otherValue: PropTypes.string,
-    /**
-     *	Other Value in the setter
-     */
-    setOtherValue: PropTypes.func,
-    /**
-     *	Other Value should be showed or not
-     */
-    other: PropTypes.bool,
-    /**
-     *	Other Value should be showed or not setter
-     */
-    setOther: PropTypes.func,
-    /**
-     *	Array that will be rendered for checkbox options
-     */
-    options: PropTypes.array,
-    /**
-     *	CheckBox label changeHandler
-     */
-    setOptions: PropTypes.func,
-
-}
-
-CheckBoxEditableInput.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'primary-1',
-    label: '',
-    previewMode:true,
-    previewModeHeader:'',
-    otherValue:'',
-    setOtherValue:()=>{},
-    other: false,
-    setOther: () => {},
-    options:[],
-    setOptions: () => {},
-}
-
-export default CheckBoxEditableInput;

package/components/Inputs/CheckBoxInputMS.js

@@ -1,160 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../../constants/defaultThemeColor';
-import tick from '../../assets/icons/checkmark.svg';
-
-const border = `#D4D7E3`;
-
-const CheckBox = styled.input.attrs({ type: "checkbox" })`
-    width: 15px;
-    height: 15px;
-    cursor:pointer;
-    visibility: hidden;
-    margin: 0;
-
-    &:focus {
-        border: 2px solid ${({ theme, variant }) => theme.variant[variant]};
-        outline: none;
-    }
-
-    &:after {
-        background-color: ${border};
-        border-radius: 3px;
-        content: " ";
-        display: inline-block;
-        visibility: visible;
-        width: inherit;
-        height: inherit;
-    }
-
-    &:checked:before {
-        content: '';
-        color: white;
-    }
-
-    &:checked:after {
-        background-image: url(${tick});
-        background-size: 8px 11px;
-        background-repeat: no-repeat;
-        background-position: center;
-        width: 15px;
-        height: 15px;
-        color: white;
-        background-color: ${({ theme, variant, color }) => color ? color : theme.variant[variant]};
-        border-radius: 3px;
-        text-align: center;
-    }
-`;
-
-const Label = styled.label`
-    display: block;
-    margin-bottom: ${({ labelInline }) => !labelInline ? '27px' : ''};
-    margin-right: ${({ labelInline }) => labelInline ? '26px' : ''};
-    color: ${({ theme }) => theme.variant['neutral-1']};
-`;
-// margin-right: ${({ inline }) => !inline ? '30px' : ''};
-const OptionText = styled.span`
-    background-color: transparent; 
-    color: ${defaultThemeColor.variant['primary-2']};
-    font-size: 14px;
-    margin-left: 10px;
-    margin-right: 0px;
-    ${CheckBox}:checked + && {
-        color: ${defaultThemeColor.variant['primary-2']};
-    }
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
-
-const WrapperDiv = styled.label`
-    margin-bottom: ${({ inline }) => !inline ? '0px' : ''};
-    align-items: center;
-    display: flex;
-    line-height: 17.3px;
-`
-const ParentDiv = styled.div`
-    display: ${({ inline }) => !inline ? "block" : "inline-flex"};
-    width: auto;
-    padding: 8px 18.3px;
-`
-
-const CheckBoxInputMS = ({ label, options, variant, inline, myKey, color, ...props }) => {
-    return (
-        <div {...props}>
-            <ParentDiv inline={inline} {...props} >
-                {options?.map((item, i) => {
-                    return <WrapperDiv
-                        key={myKey.concat((Math.random() * 101 | 0).toString())}
-                        onClick={() => { item.checked = !item.checked }}
-                        inline={inline} {...props}
-                    >
-                        <CheckBox
-                            variant={variant}
-                            checked={item.checked}
-                            color={color}
-                            {...props}
-                        />
-                        <OptionText>{item.label}</OptionText>
-                    </WrapperDiv>
-                })}
-            </ParentDiv>
-        </div>
-    )
-}
-
-CheckBox.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-OptionText.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-Label.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-CheckBoxInputMS.propTypes = {
-    /**
-     * Type of color on background of checkbox
-     */
-    variant: PropTypes.string,
-    /**
-     * Label of Checkboxs
-     */
-    label: PropTypes.string,
-    /**
-     * Should checkboxes be inline?
-     */
-    inline: PropTypes.bool,
-    /**
-     * CheckBox Contents
-     */
-    options: PropTypes.array,
-    /**
-     * CheckBox Contents
-     */
-    onChange: PropTypes.func,
-    /**
-     * Custom color on background of checkbox if present override the variant
-     */
-    color: PropTypes.string,
-    /**
-     * Prefix to use for the key for the element when mapping
-     */
-    myKey: PropTypes.string,
-}
-
-CheckBoxInputMS.defaultProps = {
-    variant: 'primary-1',
-    label: '',
-    inline: false,
-    options: [],
-    onChange: undefined,
-    color: null,
-    myKey: null
-}
-
-export default CheckBoxInputMS;

package/components/Inputs/TextInputClicable.js

@@ -1,198 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import styled, { css, useTheme } from 'styled-components';
-import defaultThemeColor from '../../constants/defaultThemeColor';
-
-const border = `#D4D7E3`;
-
-const TextBox = styled.div`
-    border: 1px solid ${({ theme, isValid }) => isValid ? border : theme.variant['error']};
-    border-radius: 4px;
-    padding: 8px 12px;
-	display: flex;
-	align-items: center;
-    position: relative;
-    z-index: 2;
-    cursor: pointer;
-
-	.input-icon svg path {
-		fill: ${({ theme }) => theme.variant['primary-2']};
-	} 
-    
-    &:focus-within {
-		border: 1px solid ${({ theme }) => theme.variant['primary-1']};
-        outline: none;
-
-		.input-icon svg path {
-			fill: ${({ theme, iconVariant }) => theme.variant[iconVariant]};
-		} 
-    }
-`;
-
-TextBox.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-const InputBorder = styled.div`
-    position: absolute;
-    top: calc(100% - 3px);
-    bottom: -2px;
-    left: 0;
-    right: 0;
-    z-index: 0;
-    border: 1px solid ${border};
-    border-top: none;
-    border-bottom: none;
-    visibility: ${({ menuIsOpen }) => menuIsOpen ? 'visible' : 'hidden'}
-`
-
-const Input = styled.input`
-	border: 0;
-	outline: 0;
-	color: ${({ theme }) => theme.variant['primary-2']};
-	margin: 0 5px;
-	padding: 0;
-    font-size: 14px;
-	flex-grow: 1;
-	flex-shrink: 0;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    ::placeholder {
-        color: ${({ theme, textValue }) => textValue ? theme.variant['primary-2'] : theme.variant['neutral-3']};
-      }
-`;
-
-Input.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-const requiredAsterisk = css`
-	&:after {
-		content:" *";
-		color: ${({ theme }) => theme.variant['error']};
-	}
-`
-
-const Label = styled.label`
-	display: block;
-	margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '8px'};
-	margin-right: ${({ labelInline }) => labelInline ? '10px' : ''};
-    color: ${({ theme }) => theme.variant['neutral-2']};
-	${({ required }) => required ? requiredAsterisk : null}
-`;
-
-Label.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-const inline = css`
-	display: flex;
-	align-items: center;
-`
-
-const Form = styled.div`
-	${({ labelInline }) => labelInline ? inline : null}
-	.err-text {
-		color: ${({ theme }) => theme.variant['error']};
-		margin-top: 5px;
-		font-size: 10px;
-	}
-
-	> div {
-		flex: 1 0 auto;
-	}
-`
-
-Form.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-const TextInputClicable = forwardRef(({ label, errMsg, iconBefore, iconAfter, onClick, onBlur, iconVariant, readonly, value, placeHolder, onChange, inputText, textValue, autofocusP, menuIsOpen, ...props }, ref) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    return (
-        <Form {...props}>
-            <Label {...props} errMsg={errMsg} >
-                {label}
-            </Label>
-            <div ref={ref.refForm}>
-                <InputBorder menuIsOpen={menuIsOpen}></InputBorder>
-                <TextBox
-                    {...props}
-                    onClick={onClick}
-                >
-                    <div className="input-icon">
-                        {iconBefore}
-                    </div>
-                    <Input
-                        {...props}
-                        ref={ref.refInput}
-                        readOnly={readonly}
-                        onChange={onChange}
-                        value={value}
-                        placeholder={placeHolder}
-                        textValue={textValue} //for styling
-                        autoFocus={autofocusP}
-                        menuIsOpen={menuIsOpen}
-                        size='1'
-                    />
-                    <div className="input-icon">
-                        {iconAfter}
-                    </div>
-                </TextBox>
-                {!menuIsOpen && <div className='err-text'>{errMsg}</div>}
-            </div>
-        </Form>
-    )
-})
-
-TextInputClicable.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-    /**
-     *	Label of Input
-     */
-    label: PropTypes.string,
-    /**
-     *	Is the input required?
-     */
-    required: PropTypes.bool,
-    /**
-     *	Should label be inline?
-     */
-    labelInline: PropTypes.bool,
-    /**
-     *	Is the input correct?
-     */
-    isValid: PropTypes.bool,
-    /**
-     *	Error Message
-     */
-    errMsg: PropTypes.string,
-    /**
-     *	Icon before input value
-     */
-    iconBefore: PropTypes.any,
-    /**
-     *	Icon after input value
-     */
-    iconAfter: PropTypes.any,
-}
-
-TextInputClicable.defaultProps = {
-    theme: defaultThemeColor,
-    label: '',
-    required: false,
-    labelInline: false,
-    isValid: true,
-    errMsg: '',
-    iconBefore: null,
-    iconAfter: null,
-}
-
-export default TextInputClicable;