groundfloor-react-ui 1.0.0

package/components/ArrowBar/ArrowBar.js

@@ -0,0 +1,293 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css, useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+const StyledArrowBar = styled.div`
+    color: ${({ theme, variant }) => variant ? theme.variant[variant] : 'white'};
+    ${({ scroll }) => {
+        if (scroll) {
+            return css`
+                display: flex;
+                overflow-x: auto;
+            `
+        } else {
+            return css`
+                display: grid;
+                grid-template-columns: ${({ arrowNumber }) => `repeat(${arrowNumber}, 1fr)`};
+            `
+        }
+    }}
+`;
+
+const StyledArrow = styled.div`
+    min-height: 40px;
+    max-height: 40px;
+    background-color: ${({ color }) => color};
+    align-items: center;
+    display: flex;
+    cursor:  ${({ clickable }) => clickable ? 'pointer' : 'default'};
+  
+    ${({ index, dataLength }) => {
+        if (index === 0) {
+            return css`
+                    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
+                    border-top-left-radius: 20px;
+                    border-bottom-left-radius: 20px;
+                `
+        } else if (index === dataLength - 1) {
+            return css`
+                    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, calc(0% + 9px) 50%);
+                    margin-left: -5px;
+                `
+        } else {
+            return css`
+                    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, calc(0% + 9px) 50%);
+                    margin-left: -5px;
+                `
+        }
+    }}
+
+    ${({ scroll }) => {
+        if (scroll) {
+            return css`
+            width:100%;
+            `
+        } else {
+            return css`
+                flex-shrink: 1;
+                min-width: 15px;
+                flex-grow: 1;
+                flex-basis: auto;
+
+                &:hover {
+                    width:  -webkit-fill-available;
+                }
+            `
+        }
+    }}
+`;
+
+const StyledArrowContent = styled.div`
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+   
+    & span{
+        font-size: 22px;
+        font-weight: 400;
+        padding-right: 5px;
+
+        ${({ scroll }) => {
+        if (!scroll) {
+            return css`
+                display: ${({ styleArrowContentSpan }) => styleArrowContentSpan.display};
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                `
+        }
+    }}
+    }
+
+    & p{
+        margin: 0;
+        font-weight: 600;
+
+        ${({ scroll }) => {
+        if (scroll) {
+            return css`
+                    font-size: 14px;
+                `
+        } else {
+            return css`
+                    font-size: ${({ styleArrowContentP }) => styleArrowContentP.fontSize};
+                    display: ${({ styleArrowContentP }) => styleArrowContentP.display};
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                `
+        }
+    }}
+    }
+
+    ${({ scroll }) => {
+        if (!scroll) {
+            return css`
+            ${StyledArrow}:hover & {
+                ${({ styleArrowContentSpan, styleArrowContentP }) => {
+                    if (styleArrowContentP?.display === 'none' && styleArrowContentSpan?.display === 'none') {
+                        return css`
+                                    span {
+                                        display: block;
+                                    }
+                                    p {
+                                        display: block;
+                                    }
+                                `
+                    } else if (styleArrowContentP?.display === 'none') {
+                        return css`
+                                    p {
+                                        display: block;
+                                    }
+                                `
+                    }
+                }}
+            };
+            `
+        }
+    }}
+`;
+
+export const ArrowBar = ({ variant, data, scroll, onClick, clickable, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+
+    const arrowBarRef = useRef(null)
+    const arrowRef = useRef(null)
+
+    const [widthArrow, setWidthArrow] = useState(undefined);
+    const [widthArrowBar, setWidthArrowBar] = useState(undefined);
+
+    let styleArrowContentP = {
+        fontSize: '',
+        display: '',
+    }
+
+    let styleArrowContentSpan = {
+        fontSize: '',
+        display: '',
+    }
+
+    const handleWindowResize = () => {
+        arrowBarRef && setWidthArrowBar(arrowBarRef?.current?.offsetWidth)
+    }
+
+    useEffect(() => {
+        handleWindowResize();
+    }, [data, widthArrowBar])
+
+    //On component mount add event listener 
+    useEffect(() => {
+        if (!scroll) {
+            // Monitor the width of the viewPort to adjust the text of the arrow accordingly
+            window.addEventListener("resize", handleWindowResize);
+            return () => (window.removeEventListener("resize", handleWindowResize))
+        }
+    }, [])
+
+    useEffect(() => {
+        if (!scroll) {
+            setWidthArrow(arrowRef?.current.offsetWidth);
+        }
+    }, [data, widthArrowBar, widthArrow]);
+
+    //Get index of the longest value + label
+    const longest = data.reduce(
+        function (a, b) {
+            return (a.label.length * 9) + (a.value.toString().length * 13) > (b.label.length * 9) + (b.value.toString().length * 13) ? a : b;
+        }
+    );
+
+    // Calculate threshould base on lenght of value and label string
+    // 15px padding left + (13px x ch VALUE) + 5px padding + (9px x ch LABEL) + 15px padding right
+    function setThreshould(longest) {
+        return {
+            step1: 15 + (longest.value.toString().length * 13) + 5 + (longest.label.length * 9) + 15, //reduce font of LABEL
+            step2: 15 + (longest.value.toString().length * 13) + 5 + (longest.label.length * 7) + 15, //hide LABEL
+            step3: 15 + (longest.value.toString().length * 13) + 5 + 15, //hide VALUE
+        }
+    }
+
+    //Each time the component re-render check the width of the Arrow with the longest content and set font dimentions
+    if (!scroll) {
+        const threshould = setThreshould(longest)
+
+        if (widthArrow < threshould.step3) {
+            styleArrowContentSpan.display = "none";
+            styleArrowContentP.display = "none";
+        } else if (widthArrow < threshould.step2) {
+            styleArrowContentP.display = "none";
+        } else if (widthArrow < threshould.step1) {
+            styleArrowContentP.fontSize = "12px";
+        } else {
+            styleArrowContentP.fontSize = "14px";
+        }
+    }
+
+    const ArrowContent = (value, label) => {
+        return (
+            <StyledArrowContent styleArrowContentP={styleArrowContentP} styleArrowContentSpan={styleArrowContentSpan} scroll={scroll}>
+                <span >{value}</span><p>{label}</p>
+            </StyledArrowContent>
+        )
+    };
+
+    return (
+        <StyledArrowBar variant={variant} ref={scroll ? null : arrowBarRef} arrowNumber={data.length} scroll={scroll} >
+            {data.map((singleData, index) => {
+                return (
+                    // Add the ref to the Arrow with the longest text label + value
+                    <StyledArrow onClick={clickable ? (e) => onClick(e, singleData) : null} clickable={clickable} scroll={scroll} ref={scroll ? null : singleData.label === longest.label ? arrowRef : null} key={'fa' + index + '-' + singleData.label} index={index} dataLength={data.length} color={singleData.color}>
+                        {ArrowContent(singleData.value, singleData.label)}
+                    </StyledArrow>
+                )
+            })}
+        </StyledArrowBar>
+    )
+}
+
+ArrowBar.propTypes = {
+    /**
+     * Color of the arrows text. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Array of data. Each element of the array is an object in this format:
+     * { value: 16, label: "Complete", color: '#34cc73' },
+     */
+    data: PropTypes.array,
+    /**
+     * True the bar will not shrink but will be scrollable
+     * False the bar will shrink and hide its content base on the width
+     */
+    scroll: PropTypes.bool,
+    /**
+     * Click handler
+     */
+    onClick: PropTypes.func,
+    /**
+     * If true the cursor is a pointer and click handler active
+     */
+    clickable: PropTypes.bool,
+}
+
+StyledArrowBar.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+StyledArrow.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+StyledArrowContent.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+ArrowBar.defaultProps = {
+    theme: defaultThemeColor,
+    variant: null,
+    data: [],
+    scroll: true,
+    onClick: undefined,
+    clickable: false
+}
+

package/components/ArrowBar/index.js

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

package/components/Avatar/Avatar.js

@@ -0,0 +1,167 @@
+import React, { useState } from "react";
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import { Image } from '../Images'
+
+/**
+ * Primary UI component for user interaction
+ */
+const StyledContainer = styled.span`
+${({ theme, type, 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]) {
+                    tempObj[property] = theme[type][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
+`;
+
+const StyledCircle = styled.div`
+    ${({ theme, type, size, 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]) {
+                    tempObj[property] = theme[type][property]
+                    delete theme.common[property]
+                }
+                for (const property in theme[`${type}${size}`]) {
+                    tempObj[property] = theme[`${type}${size}`][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
+`;
+
+const StyledName = styled.span`
+${({ theme, type, size, 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]
+                }
+                for (const property in theme[`${type}${size}`]) {
+                    tempObj[property] = theme[`${type}${size}`][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
+`;
+
+export const Avatar = ({
+    theme,
+    customStylesContainer,
+    customStylesImage,
+    customStylesCircle,
+    customStylesName,
+    size,
+    toggleName,
+    user,
+    border,
+    ...props
+}) => {
+
+    const [avatarStatus, setAvatarStatus] = useState("loading");
+
+    const handleImageStatus = (imageStatus) => {
+        setAvatarStatus(imageStatus);
+    }
+
+    return (
+        <StyledContainer border={border} theme={theme} customStyles={customStylesContainer} type={'avatarContainer'} {...props}>
+            {user?.url && <Image
+                {...props}
+                theme={theme}
+                customStyles={customStylesImage}
+                type={'imageAvatar'}
+                size={size}
+                alt="user-picture"
+                src={user.url}
+                handleImageStatus={handleImageStatus}
+                style={{ visibility: avatarStatus !== "loaded" ? 'hidden' : 'visible' }}
+            />}
+
+            <StyledCircle {...props}
+                theme={theme}
+                type={'avatarCircle'}
+                customStyles={customStylesCircle} size={size}
+                style={{ visibility: avatarStatus !== "loaded" ? 'visible' : 'hidden' }}
+            >
+                {
+                    user?.userName && user?.userName.split(" ").length >= 2 ? user?.userName.split(" ")[0].charAt(0).toUpperCase() + user?.userName.split(" ")[1].charAt(0).toUpperCase()
+                        : user?.userName && user?.userName.split(" ").length === 1 && user?.userName.split(" ")[0].charAt(0).toUpperCase()
+                }
+            </StyledCircle>
+            {toggleName && <StyledName {...props} theme={theme} type={'avatarName'} customStyles={customStylesName} size={size}>{user.userName} </StyledName>}
+        </StyledContainer>
+    );
+};
+
+Avatar.propTypes = {
+    /**
+     * Custom style for circle
+     */
+    customStylesCircle: PropTypes.object,
+    /**
+     * Custom style for name
+     */
+    customStylesName: PropTypes.object,
+    /**
+     * Optional Custom color of the circle
+     */
+    customStylesContainer: PropTypes.object,
+    /**
+     * Optional Custom color of the border circle (if missing no border displayed)
+     */
+    customStylesImage: PropTypes.object,
+    /**
+     * Toggle name visibility
+     */
+    toggleName: PropTypes.bool,
+    /**
+     * How large should the Avatar be?
+     */
+    size: PropTypes.oneOf(['SM', 'MD', 'LG']),
+    /**
+     * Object with user information. To display the user's picture need a key "url". To display the name need a key "userName"
+     */
+    user: PropTypes.object,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+};
+
+Avatar.defaultProps = {
+    theme: defaultStyles,
+    block: false,
+    size: 'MD',
+    toggleName: false,
+    user: null,
+    customStylesContainer: null,
+    customStylesImage: null,
+    customStylesCircle: null,
+    customStylesName: null,
+};
+

package/components/Avatar/AvatarSB.js

@@ -0,0 +1,226 @@
+import React, { useState } from "react";
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import { Image } from '../Images'
+
+/**
+ * Primary UI component for user interaction
+ */
+const StyledContainer = styled.span`
+${({ theme, type, 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]) {
+                    tempObj[property] = theme[type][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
+    width: auto;
+`;
+
+const StyledCircle = styled.div`
+    ${({ theme, type, size, 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]) {
+                    tempObj[property] = theme[type][property]
+                    delete theme.common[property]
+                }
+                for (const property in theme[`${type}${size}`]) {
+                    tempObj[property] = theme[`${type}${size}`][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
+    ${({ isSelected }) => {
+
+        if (isSelected) {
+            return css`
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            background-color: #1D36AD;
+            min-width: 42px;
+            min-height: 42px;
+            `
+        } else {
+            return css`
+            border: 2px solid #2240CB;
+            background-color: #2240CB;
+            // width: 38px;
+            // height: 38px;
+            `
+        }
+    }}
+    font-weight: 600;
+`;
+
+
+//Create the style for the Avatar
+
+//   let customStylesCircle = {}
+//   let customStylesContainer = {}
+//   customStylesCircle.border = app.userName === selectedApp.lev1 ? `2px solid rgba(255, 255, 255, 0.3)` : `2px solid #2240CB`
+//   customStylesCircle.backgroundColor = app.userName === selectedApp.lev1 ? '#1D36AD' : '#2240CB'
+//   customStylesCircle.width = app.userName === selectedApp.lev1 ? '42px' : '38px'
+//   customStylesCircle.height = app.userName === selectedApp.lev1 ? '42px' : '38px'
+//   customStylesCircle.fontWeight = '600'
+//   customStylesContainer.width = 'auto'
+//   console.log("customStylesCircle" + i + ": ", customStylesCircle)
+
+const StyledName = styled.span`
+${({ theme, type, size, 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]
+                }
+                for (const property in theme[`${type}${size}`]) {
+                    tempObj[property] = theme[`${type}${size}`][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
+
+    &:hover{
+        ${({ theme, type, size, customStylesHover }) => {
+        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]
+            //     }
+            //     for (const property in theme[`${type}${size}`]) {
+            //         tempObj[property] = theme[`${type}${size}`][property]
+            //         delete theme.common[property]
+            //     }
+            // }
+            return { ...tempObj, ...customStylesHover };
+        }
+    }}
+    }
+    
+`;
+
+export const AvatarSB = ({
+    theme,
+    customStylesContainer,
+    customStylesImage,
+    customStylesCircle,
+    customStylesName,
+    customStylesNameHover,
+    size,
+    toggleName,
+    user,
+    border,
+    isSelected,
+    ...props
+}) => {
+
+    const [avatarStatus, setAvatarStatus] = useState("loading");
+
+    const handleImageStatus = (imageStatus) => {
+        setAvatarStatus(imageStatus);
+    }
+    // console.log('user', user)
+    return (
+        <StyledContainer border={border} theme={theme} customStyles={customStylesContainer} type={'avatarContainer'} {...props}>
+            {user?.url && <Image
+                {...props}
+                theme={theme}
+                customStyles={customStylesImage}
+                type={'imageAvatar'}
+                size={size}
+                alt="user-picture"
+                src={user.url}
+                handleImageStatus={handleImageStatus}
+                style={{ visibility: avatarStatus !== "loaded" ? 'hidden' : 'visible' }}
+            />}
+
+            <StyledCircle {...props}
+                theme={theme}
+                type={'avatarCircle'}
+                customStyles={customStylesCircle} size={size}
+                style={{ visibility: avatarStatus !== "loaded" ? 'visible' : 'hidden' }}
+                isSelected={isSelected}
+            >
+                {
+                    user?.userName && user?.userName.split(" ").length >= 2 ? user?.userName.split(" ")[0].charAt(0).toUpperCase() + user?.userName.split(" ")[1].charAt(0).toUpperCase()
+                        : user?.userName && user?.userName.split(" ").length === 1 && user?.userName.split(" ")[0].charAt(0).toUpperCase()
+                }
+            </StyledCircle>
+            {toggleName && <StyledName {...props} theme={theme} type={'avatarName'} customStyles={customStylesName} customStylesHover={customStylesNameHover} size={size}>{user.userName} </StyledName>}
+        </StyledContainer>
+    );
+};
+
+AvatarSB.propTypes = {
+    /**
+     * Custom style for circle
+     */
+    customStylesCircle: PropTypes.object,
+    /**
+     * Custom style for name
+     */
+    customStylesName: PropTypes.object,
+    /**
+     * Optional Custom color of the circle
+     */
+    customStylesContainer: PropTypes.object,
+    /**
+     * Optional Custom color of the border circle (if missing no border displayed)
+     */
+    customStylesImage: PropTypes.object,
+    /**
+     * Toggle name visibility
+     */
+    toggleName: PropTypes.bool,
+    /**
+     * How large should the Avatar be?
+     */
+    size: PropTypes.oneOf(['SM', 'MD', 'LG']),
+    /**
+     * Object with user information. To display the user's picture need a key "url". To display the name need a key "userName"
+     */
+    user: PropTypes.object,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+};
+
+AvatarSB.defaultProps = {
+    theme: defaultStyles,
+    block: false,
+    size: 'MD',
+    toggleName: false,
+    user: null,
+    customStylesContainer: null,
+    customStylesImage: null,
+    customStylesCircle: null,
+    customStylesName: null,
+};
+