groundfloor-react-ui 1.0.0

package/components/Sidebar/Navbar.js

@@ -0,0 +1,328 @@
+import React, { useEffect, useState } from "react";
+import ReactDom from 'react-dom'
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import { AvatarSB, AvatarSBfooter } from '../Avatar'
+import { AccordionSB, AccordionSBfooter } from '../Accordion'
+import { Icon } from '../Icon'
+
+
+const StyledHeader = styled.div`
+min-height: 51px;
+display: flex;
+background-color: #193096;
+align-items: center;
+padding-left: 24.5px;
+
+&::hover{
+    &>.chevron-navbar{
+        background-color: white;
+        color: blue;
+        cursor: pointer;
+    }
+}
+`
+
+const StyledBody = styled.div`
+display: flex;
+background-color: transparent;
+flex-direction: column;
+align-items: center;
+width: 100%;
+`
+
+const ListElement = styled.div`
+display: flex;
+align-items: center;
+cursor: pointer;
+
+&:hover{
+    p{
+        text-decoration: underline
+    }
+}
+
+span{
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background-color: white;
+    margin-right: 31px;
+}
+
+p{
+    margin: 8.25px 0;
+}
+`
+
+const StyledFooter = styled.div`
+display: flex;
+background-color: transparent;
+flex-direction: column;
+align-items: center;
+width: 100%;
+margin-top: auto;
+`
+
+const ListElementFooter = styled.div`
+display: flex;
+align-items: center;
+cursor: pointer;
+
+&:hover{
+    p{
+        text-decoration: underline
+    }
+}
+
+span{
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background-color: white;
+    margin-right: 31px;
+}
+
+p{
+    margin: 8.25px 0;
+}
+`
+
+export const Navbar = ({
+    theme,
+    headerContent,
+    bodyContent,
+    footerContent,
+    selectedApp,
+    setApp,
+    toggleSideBarOpen,
+    ...props
+}) => {
+
+    const [accordionOpen, setAccordionOpen] = useState(null);
+    const [accordionFooterOpen, setAccordionFooterOpen] = useState(null);
+
+    function handleClick(index) {
+        setAccordionFooterOpen(null)
+        setAccordionOpen(index)
+    }
+
+    function handleClickFooter(index) {
+        setAccordionOpen(null)
+        setAccordionFooterOpen(index)
+    }
+
+    return (
+        <div
+            onMouseLeave={
+                () => {
+                    setAccordionOpen(null)
+                    setAccordionFooterOpen(null)
+                }
+            }
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100vh',
+            }}
+            className={'NavbarDiv'}
+        >
+            <StyledHeader>
+                {headerContent}
+            </StyledHeader>
+            <StyledBody>
+                {bodyContent?.map((app, i) => {
+                    return (<AccordionSB
+                        key={app.id}
+                        index={i}
+                        handleClick={(index) => { handleClick(index) }}
+                        isAccordionOpen={i === accordionOpen}
+                        isSelected={app.userName === selectedApp.lev1}
+                        customStylesAccordionContainer={{
+                            padding: '0',
+                            'box-shadow': 'none',
+                            'border-radius': '0px',
+                            'background-color': 'transparent',
+                        }}
+                        customStylesAccordionTogggle={{
+                            padding: '0',
+                            'box-shadow': 'none',
+                            'border-radius': '0px',
+                            'background-color': 'transparent',
+                            'padding-left': '16px',
+                            'padding-top': '7.5px',
+                            'padding-bottom': '7.5px',
+                            cursor: 'pointer',
+                        }}
+                        customStylesAccordionContent={{
+                            transition: 'height ease 0.2s', //transform ease 95ms',
+                            overflow: 'hidden',
+                            padding: '0',
+                            'background-color': 'transparent',
+                            color: 'white',
+                            position: 'relative',
+                            'box-shadow': 'none',
+                        }}
+                        contentToggle={
+                            <AvatarSB
+                                toggleName={toggleSideBarOpen}//isOpen} //true}
+                                customStylesName={{
+                                    'white-space': 'nowrap',
+                                    'overflow': 'hidden',
+                                    'text-overflow': 'ellipsis',
+                                    'color': 'white',
+                                    'font-weight': app.userName === selectedApp.lev1 ? '600' : '400',
+                                }}
+                                customStylesNameHover={{
+                                    'text-decoration': 'underline',
+                                }}
+                                size={'LG'}
+                                user={app}
+                                isSelected={app.userName === selectedApp.lev1}
+                            />
+                        }
+                        content={
+                            <div style={{ margin: '0', padding: '0', paddingLeft: '32px', marginBottom: '18.25px' }}>
+                                {app.subdirectory?.map((sub, i) => {
+                                    return (
+                                        <ListElement
+                                            key={app.id + sub}
+                                            onClick={() => {
+                                                console.log("Click: ", app.fullName, sub)
+                                                setApp({ lev1: `${app.userName}`, lev2: `${sub}` })
+                                            }}>
+                                            <span style={{ visibility: selectedApp.lev2 === sub ? 'visible' : 'hidden' }}></span>
+                                            <p style={{ marginTop: i === 0 && '0px' }}>{sub}</p>
+                                        </ListElement>
+                                    )
+                                })}
+                            </div>
+                        }
+                    />)
+                })}
+            </StyledBody>
+            <StyledFooter>
+                <AccordionSBfooter
+                    index={0}
+                    handleClick={(index) => { handleClickFooter(index) }}
+                    isAccordionOpen={0 === accordionFooterOpen}
+                    customStylesAccordionContainer={{
+                        padding: '0',
+                        'box-shadow': 'none',
+                        'border-radius': '0px',
+                        'background-color': 'transparent',
+                    }}
+                    customStylesAccordionTogggle={{
+                        padding: '0',
+                        'box-shadow': 'none',
+                        'border-radius': '0px',
+                        'background-color': 'transparent',
+                        'padding-left': '16px',
+                        'padding-top': '7.5px',
+                        'padding-bottom': '7.5px',
+                        cursor: 'pointer',
+                    }}
+                    customStylesAccordionContent={{
+                        transition: 'height ease 0.2s', //transform ease 95ms',
+                        overflow: 'hidden',
+                        padding: '0',
+                        'background-color': 'transparent',
+                        color: 'white',
+                        position: 'relative',
+                        'box-shadow': 'none',
+                    }}
+                    contentToggle={
+                        <AvatarSB
+                            toggleName={toggleSideBarOpen}//isOpen}//} //true}
+                            customStylesName={{
+                                'white-space': 'nowrap',
+                                'overflow': 'hidden',
+                                'text-overflow': 'ellipsis',
+                                'color': 'white',
+                                'font-weight': '400',
+                            }}
+                            customStylesNameHover={{
+                                'text-decoration': 'underline',
+                            }}
+                            size={'LG'}
+                            user={
+                                {
+                                    fullName: 'My Account',
+                                    userName: 'My Account',
+                                    url: "https://picsum.photos/30"
+                                }
+                            }
+                        />
+                    }
+                    content={
+                        <div style={{ margin: '0', padding: '0', paddingLeft: '32px', marginBottom: '18.25px' }}>
+                            <ListElementFooter
+                                onClick={() => {
+                                }}>
+                                <p>Change Password</p>
+                            </ListElementFooter>
+                            <ListElementFooter
+                                onClick={() => { }}>
+                                <p>Sign Out</p>
+                            </ListElementFooter>
+                        </div>
+                    }
+                />
+                <AccordionSBfooter
+                    handleClick={() => { }}
+                    customStylesAccordionContainer={{
+                        padding: '0',
+                        'box-shadow': 'none',
+                        'border-radius': '0px',
+                        'background-color': 'transparent',
+                    }}
+                    customStylesAccordionTogggle={{
+                        padding: '0',
+                        'box-shadow': 'none',
+                        'border-radius': '0px',
+                        'background-color': 'transparent',
+                        'padding-left': '16px',
+                        'padding-top': '7.5px',
+                        'padding-bottom': '7.5px',
+                        cursor: 'pointer',
+                    }}
+                    customStylesAccordionContent={{
+                        transition: 'height ease 0.2s', //transform ease 95ms',
+                        overflow: 'hidden',
+                        padding: '0',
+                        'background-color': 'transparent',
+                        color: 'white',
+                        position: 'relative',
+                        'box-shadow': 'none',
+                    }}
+                    contentToggle={
+                        <AvatarSBfooter
+                            toggleName={toggleSideBarOpen}//isOpen} //true}
+                            customStylesName={{
+                                'white-space': 'nowrap',
+                                'overflow': 'hidden',
+                                'text-overflow': 'ellipsis',
+                                'color': 'white',
+                                'font-weight': '400',
+                            }}
+                            customStylesNameHover={{
+                                'text-decoration': 'underline',
+                            }}
+                            size={'LG'}
+                            user={
+                                {
+                                    fullName: 'Users',
+                                    userName: 'Users',
+                                }
+                            }
+                            value={'+' + footerContent.length}
+                        />
+                    }
+                    disable={true}
+                />
+            </StyledFooter>
+        </div>
+    )
+}
+

package/components/Sidebar/Sidebar.js

@@ -0,0 +1,180 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+
+/**
+ * Primary UI component for user interaction
+ */
+
+const StyledContainer = styled.div`
+${({ theme, type }) => {
+        return getDefaultStyles(theme, 'sidebar-container');
+    }}
+${({ customStylesContainer }) => customStylesContainer}
+
+${({ isOpen, forceOpen, theme, type, customStylesContainerOpen, customStylesContainerClose }) => {
+        if (isOpen || forceOpen) {
+            return { ...getDefaultStyles(theme, 'sidebar-container-open'), ...customStylesContainerOpen };
+        } else {
+            return { ...getDefaultStyles(theme, 'sidebar-container-close'), ...customStylesContainerClose };
+        }
+    }}
+
+@media (max-width: 980px) {
+    ${({ isOpen, theme, type, customStylesContainerMobileOpen, customStylesContainerMobileClose }) => {
+        if (isOpen) {
+            return { ...getDefaultStyles(theme, 'sidebar-container-mobile-open'), ...customStylesContainerMobileOpen };
+        } else {
+            return { ...getDefaultStyles(theme, 'sidebar-container-mobile-close'), ...customStylesContainerMobileClose };
+        }
+    }}
+}
+`;
+
+const StyledPusher = styled.div`
+${({ theme, type }) => {
+        return getDefaultStyles(theme, 'sidebar-pusher');
+    }}
+${({ customStylesPusher }) => customStylesPusher}
+
+${({ forceOpen, theme, type, customStylesPusherOpen, customStylesPusherClose }) => {
+        if (forceOpen) {
+            return { ...getDefaultStyles(theme, 'sidebar-pusher-open'), ...customStylesPusherOpen };
+        } else {
+            return { ...getDefaultStyles(theme, 'sidebar-pusher-close'), ...customStylesPusherClose };
+        }
+    }}
+
+@media (max-width: 980px) {
+    ${({ theme, type, customStylesPusherMobile }) => {
+        return { ...getDefaultStyles(theme, 'sidebar-pusher-mobile'), ...customStylesPusherMobile };
+    }
+    }}
+}
+`;
+
+export const Sidebar = ({
+    theme,
+    customStylesContainer,
+    customStylesContainerOpen,
+    customStylesContainerClose,
+    customStylesContainerMobileOpen,
+    customStylesContainerMobileClose,
+    customStylesPusher,
+    customStylesPusherOpen,
+    customStylesPusherClose,
+    customStylesPusherMobile,
+    forceOpen,
+    forceClose,
+    handleSidebar,
+    toggleSideBarOpen,
+    pinner,
+    ...props
+}) => {
+
+    function handleMouse(flag) {
+        // console.log("handleMouse")
+        handleSidebar(flag)
+    }
+
+    return (
+        <>
+            <StyledContainer
+                theme={theme}
+                customStyles={customStylesContainer}
+                type={'sidebarContainer'}
+                onMouseEnter={
+                    () => {
+                        if (forceOpen) {
+                        } else {
+                            handleMouse(true);
+                            // console.log("onMouseEnter")
+                        }
+                    }
+                }
+                onMouseLeave={
+                    () => {
+                        handleMouse(false);
+                        // console.log("onMouseLeave")
+                        forceClose();
+                    }
+                }
+                forceOpen={forceOpen}
+                isOpen={toggleSideBarOpen} //true} 
+                {...props}>
+                <StyledPusher />
+                {props.children}
+                {pinner}
+            </StyledContainer>
+        </>
+    );
+};
+
+Sidebar.propTypes = {
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Custom style of container
+     */
+    customStylesContainer: PropTypes.object,
+    /**
+     * Custom style of container when open
+     */
+    customStylesContainerOpen: PropTypes.object,
+    /**
+     * Custom style of container when close
+     */
+    customStylesContainerClose: PropTypes.object,
+    /**
+     * Custom style of container when open in small screen
+     */
+    customStylesContainerMobileOpen: PropTypes.object,
+    /**
+     * Custom style of container when close in small screen
+     */
+    customStylesContainerMobileClose: PropTypes.object,
+    /**
+     * Custom style of pusher
+     */
+    customStylesPusher: PropTypes.object,
+    /**
+     * Custom style of pusher when open
+     */
+    customStylesPusherOpen: PropTypes.object,
+    /**
+     * Custom style of pusher when close
+     */
+    customStylesPusherClose: PropTypes.object,
+    /**
+     * Custom style of pusher in small screen
+     */
+    customStylesPusherMobile: PropTypes.object,
+    /**
+     * Boolean to open the sidebar
+     */
+    forceOpen: PropTypes.bool,
+    /**
+     * Function to close the sidebar
+     */
+    forceClose: PropTypes.func,
+    /**
+     * Function to toggle the sidebar
+     */
+    handleSidebar: PropTypes.func,
+    /**
+     * Boolean to know the sidebar status
+     */
+    toggleSideBarOpen: PropTypes.bool,
+    /**
+     * Component to pin the sidebar on large screen
+     */
+    pinner: PropTypes.any,
+};
+
+Sidebar.defaultProps = {
+    theme: defaultStyles,
+};

package/components/Sidebar/index.js

@@ -0,0 +1,3 @@
+export * from './Sidebar';
+export * from './Navbar';
+

package/components/StatusChip/PrimaryStatusChip.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+/**
+ * Primary UI component for user interaction
+ */
+
+const sizes = {
+    sm: {
+        fontSize: '14px',
+        padding: '11px 36px'
+    },
+    md: {
+        fontSize: '16px',
+        padding: '10px 24px'
+    },
+    lg: {
+        fontSize: '22px',
+        padding: '6px 29px'
+    },
+}
+
+const StyledStatusChip = styled.div`
+    background: ${({ theme, variant }) => theme.variant[variant]};
+    color: ${({ theme }) => theme.bgColor};
+    padding: ${({ size }) => sizes[size].padding};
+    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+    border-radius: 42px;
+    font-size: ${({ size }) => sizes[size].fontSize};
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    width: ${({ block }) => block ? 'auto' : 'fit-content'};
+    box-sizing: border-box;
+
+`;
+
+export const PrimaryStatusChip = ({ block, style, variant, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+    return (
+        <StyledStatusChip
+            block={block}
+            variant={variant}
+            style={style}
+            {...props}
+        >
+            {props.children}
+        </StyledStatusChip>
+    );
+};
+
+PrimaryStatusChip.propTypes = {
+    /**
+     * Color of StatusChip. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * Width of StatusChip
+     */
+    block: PropTypes.bool,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+};
+
+StyledStatusChip.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+PrimaryStatusChip.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'primary-1',
+    block: false,
+};
+

package/components/StatusChip/SecondaryStatusChip.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+/**
+ * Primary UI component for user interaction
+ */
+
+const sizes = {
+    sm: {
+        fontSize: '14px',
+        padding: '11px 36px'
+    },
+    md: {
+        fontSize: '16px',
+        padding: '10px 24px'
+    },
+    lg: {
+        fontSize: '22px',
+        padding: '6px 29px'
+    },
+}
+
+const StyledStatusChip = styled.div`
+    color: ${({ theme, variant }) => theme.variant[variant]};
+    background: ${({ theme }) => theme.bgColor};
+    padding: ${({ size }) => sizes[size].padding};
+    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+    border-radius: 42px;
+    font-size: ${({ size }) => sizes[size].fontSize};
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    width: ${({ block }) => block ? 'auto' : 'fit-content'};
+    box-sizing: border-box;
+
+`;
+
+export const SecondaryStatusChip = ({ block, style, variant, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+    return (
+        <StyledStatusChip
+            block={block}
+            variant={variant}
+            style={style}
+            {...props}
+        >
+            {props.children}
+        </StyledStatusChip>
+    );
+};
+
+SecondaryStatusChip.propTypes = {
+    /**
+     * Color of StatusChip. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * Width of StatusChip
+     */
+    block: PropTypes.bool,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+};
+
+StyledStatusChip.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+SecondaryStatusChip.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'primary-1',
+    block: false,
+};
+