groundfloor-react-ui 1.0.0

package/components/Avatar/AvatarSBfooter.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 AvatarSBfooter = ({
+    theme,
+    customStylesContainer,
+    customStylesImage,
+    customStylesCircle,
+    customStylesName,
+    customStylesNameHover,
+    size,
+    toggleName,
+    user,
+    border,
+    isSelected,
+    value,
+    ...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}
+            >
+                {
+                    value
+                }
+            </StyledCircle>
+            {toggleName && <StyledName {...props} theme={theme} type={'avatarName'} customStyles={customStylesName} customStylesHover={customStylesNameHover} size={size}>{user.userName} </StyledName>}
+        </StyledContainer>
+    );
+};
+
+AvatarSBfooter.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,
+};
+
+AvatarSBfooter.defaultProps = {
+    theme: defaultStyles,
+    block: false,
+    size: 'MD',
+    toggleName: false,
+    user: null,
+    customStylesContainer: null,
+    customStylesImage: null,
+    customStylesCircle: null,
+    customStylesName: null,
+};
+

package/components/Avatar/index.js

@@ -0,0 +1,4 @@
+export * from './Avatar';
+export * from './AvatarSB';
+export * from './AvatarSBfooter';
+

package/components/Banner/Banner.js

@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+const BannerWrapper = styled.div`
+    color: ${({ theme }) => theme.textColor};
+    display: flex;
+    background-color: ${({ backgroundColor }) => backgroundColor };
+    border-left: 5px solid  ${({ borderColor }) => borderColor };;
+    padding-left:28px;
+    padding-top: 22px;
+    padding-bottom:22px;
+    width: inherit;
+`
+
+BannerWrapper.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const BannerContent = styled.div`
+    color: ${({ theme }) => theme.textColor};
+    display: flex;
+    font-size: 16px;
+    text-align: left;
+    word-wrap: break-word;
+`
+
+BannerContent.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+export const Banner = ({ backgroundColor, borderColor,variant, children,...props}) =>{
+    return (
+        <>
+            <BannerWrapper backgroundColor={backgroundColor} borderColor={borderColor} {...props}>
+                <BannerContent {...props}>
+                    {children}
+                </BannerContent>
+            </BannerWrapper>
+        </>
+    );
+}
+
+Banner.propTypes = {
+    /**
+     *	background color of the banner
+     */
+    backgroundColor: PropTypes.string,
+    /**
+     *	border color of the banner
+     */
+    borderColor: PropTypes.string,
+    /**
+     *	What will be rendered inside the bannaer
+     */
+    children: PropTypes.any
+}
+
+Banner.defaultProps = {
+    children: '',
+    backgroundColor:'#f7f2ff',
+    borderColor:'#8b2dff',
+}
+

package/components/Banner/index.js

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

package/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,192 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css, useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+/**
+ * Primary UI component for user interaction
+ */
+
+const StyledBreadcrumb = styled.div`
+    background: transparent;
+    color: ${({ theme, variant }) => theme.variant[variant]};
+    font-size: ${({ isPrimary }) => isPrimary ? '16px' : '14px'};
+    display: flex;
+    align-items: center;
+
+    ${({ isWrap }) => {
+        if (isWrap) {
+            return css`
+            width: ${({ block }) => block ? 'auto' : 'fit-content'};
+            flex-wrap: wrap;
+            visibility: visible;
+        `
+        } else {
+            return css`
+                border: 1px solid transparent;
+                overflow-x: auto;
+                overflow-y: hidden;
+                visibility: ${({ isBreadcrumbVisible }) => isBreadcrumbVisible ? 'visible' : 'hidden'};
+                /* Hide scrollbar for Chrome, Safari and Opera */
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+                /* Hide scrollbar for IE, Edge and Firefox */
+                &-ms-overflow-style: none;  /* IE and Edge */
+                scrollbar-width: none;  /* Firefox */
+            `
+        }
+    }};
+
+    .breadcrumb-icon svg path {
+        fill: ${({ theme, variant }) => theme.variant[variant]};
+    }
+
+    .breadcrumb-icon-separator svg path {
+        fill: ${({ theme, variantSeparator }) => theme.variant[variantSeparator]};
+    }
+
+    .breadcrumb-icon-separator {
+        margin: 0 ${({ isPrimary }) => isPrimary ? '12px' : '7px'};
+    }
+`;
+
+const StyledCombo = styled.div`
+    display: flex;
+    flex-wrap: nowrap;
+`;
+
+const StyledItem = styled.div`
+    cursor: ${({ href }) => href ? 'pointer' : 'default'};
+    list-style: none;
+    color: ${({ theme, variant }) => theme.variant[variant]};
+    white-space: nowrap;
+    max-width: 15ch;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+        text-decoration: ${({ href }) => href ? 'underline' : 'none'};
+    }
+`;
+
+export const Breadcrumb = ({ wrap, block, style, variant, variantSeparator, appLogo, separator, items, onClick, isPrimary, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+
+    const breadcrumbRef = useRef(null)
+
+    const [isBreadcrumbVisible, setIsBreadcrumbVisible] = useState(undefined);
+
+    const handleWindowResize = () => {
+        if (breadcrumbRef?.current?.scrollWidth < breadcrumbRef?.current?.offsetWidth) {
+            setIsBreadcrumbVisible(true)
+        } else {
+            setIsBreadcrumbVisible(false)
+        }
+    }
+
+    useEffect(() => {
+        handleWindowResize();
+    }, [items])
+
+    //On component mount add event listener 
+    useEffect(() => {
+        if (!wrap) {
+            // Monitor the width of the viewPort to adjust the text of the arrow accordingly
+            window.addEventListener("resize", handleWindowResize);
+            return () => (window.removeEventListener("resize", handleWindowResize));
+        }
+    }, [])
+
+    const list = (items) ? items.map((item, i) => {
+        return (
+            <StyledCombo key={item.label} >
+                {(i === 0 && !appLogo) ? null : (<div className="breadcrumb-icon-separator">{separator}</div>)}
+                <StyledItem onClick={() => { if (item.href) onClick(item.href) }} variant={variant} href={item.href} title={item.label}>
+                    {/* If label longer than 15chs trim it by css */}
+                    {item.label}
+                </StyledItem>
+            </StyledCombo>
+        )
+    }) : (null)
+
+    return (
+        <StyledBreadcrumb
+            isWrap={wrap}
+            ref={!wrap ? breadcrumbRef : null}
+            isBreadcrumbVisible={isBreadcrumbVisible}
+            block={block}
+            variant={variant}
+            variantSeparator={variantSeparator}
+            style={style}
+            isPrimary={isPrimary}
+            {...props}
+        >
+            {appLogo && (<div className="breadcrumb-icon">{appLogo}</div>)}
+            {list}
+        </StyledBreadcrumb>
+    )
+};
+
+Breadcrumb.propTypes = {
+    /**
+     * Color of text. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * Color of separator. primary-1, 2, error, etc.
+     */
+    variantSeparator: PropTypes.string,
+    /**
+     * Click handler
+     */
+    onClick: PropTypes.func,
+    /**
+     * Optional Icon element with app icon
+     */
+    appLogo: PropTypes.any,
+    /**
+     * Optional Icon element with separator icon
+     */
+    separator: PropTypes.any,
+    /**
+     * List of the elements of breadcramb
+     */
+    items: PropTypes.array,
+    /**
+     * Optional width selector
+     */
+    block: PropTypes.bool,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * If true wrap items when shrink else hide
+     */
+    wrap: PropTypes.bool,
+    /**
+     * If true bigger font and margin, if false it means secondary breadcrum with smaller font and less margin
+     */
+    isPrimary: PropTypes.bool,
+};
+
+StyledBreadcrumb.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+StyledItem.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+Breadcrumb.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'neutral-2',
+    variantSeparator: 'neutral-3',
+    block: false,
+    onClick: undefined,
+    wrap: false,
+    isPrimary: true
+};
+

package/components/Breadcrumb/index.js

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

package/components/Button/PrimaryButton.js

@@ -0,0 +1,125 @@
+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";
+
+/**
+ * Primary UI component for user interaction
+ */
+
+const sizes = {
+    sm: {
+        fontSize: '14px',
+        padding: '5px 15px'
+    },
+    md: {
+        fontSize: '16px',
+        padding: '6px 15px'
+    },
+    lg: {
+        fontSize: '18px',
+        padding: '8px 20px'
+    },
+}
+
+// const buttonDisabledBg = '#BBC4CF';
+const buttonDisabledBg = ({ theme, variant }) => hexToRGB(theme.variant[variant], 0.6);
+const fontColor = defaultThemeColor.bgColor;
+// console.log(color)
+
+const StyledButton = styled.button`
+    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;
+
+    &:disabled {
+      color: ${fontColor};
+      background: ${buttonDisabledBg};
+        border: 1px solid ${buttonDisabledBg};
+        cursor: not-allowed;
+    }
+
+    //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 }) => {
+
+    return (
+        <StyledButton
+            block={block}
+            variant={variant}
+            defaultStyle="button"
+            type={type}
+            style={style}
+            size={size}
+            disabled={disabled}
+            {...props}
+        >
+            {isLoading && <div style={{ paddingRight: '10px', marginTop: '6px' }}><Loader customStyles={{ 'background-color': fontColor }} size={16} /></div>}
+            {props.children}
+        </StyledButton>
+    );
+};
+
+PrimaryButton.propTypes = {
+    /**
+     * Type of Button. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * Is the button disabled?
+     */
+    disabled: PropTypes.bool,
+    /**
+     * How large should the button be?
+     */
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
+    /**
+     * Optional click handler
+     */
+    block: PropTypes.bool,
+    /**
+     * Optional loading handler
+     */
+    isLoading: PropTypes.bool,
+    /**
+     * Optional click handler
+     */
+    onClick: PropTypes.func,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+    * Type of the btn i.e: button or submit etc.
+    */
+    type: PropTypes.string,
+};
+
+StyledButton.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+PrimaryButton.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'primary-1',
+    block: false,
+    isLoading: false,
+    disabled: false,
+    size: 'md',
+    onClick: undefined,
+};
+