groundfloor-react-ui 1.2.8 → 1.2.10

package/components/Sidebar/Navbar.js

@@ -1,306 +0,0 @@
-import React, { useState } from 'react';
-import styled, { useTheme } from 'styled-components';
-import { AccordionSB, AccordionSBfooter } from '../Accordion';
-import { AvatarSB } from '../Avatar';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-const StyledHeader = styled.div`
-  min-height: 51px;
-  display: flex;
-  background-color: ${({ theme }) => theme.primary['primary-1']};
-  align-items: center;
-  padding-left: 24.5px;
-
-  &::hover {
-    & > .chevron-navbar {
-      background-color: ${({ theme }) => theme.bgColor};
-      color: ${({ theme }) => theme.primary['primary-1']};
-      cursor: pointer;
-    }
-  }
-
-  ${({ headerStyles }) => headerStyles}
-`;
-
-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 {
-      ${({ listElementStyle }) => listElementStyle}
-    }
-  }
-
-  span {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background-color: ${({ theme }) => theme.bgColor};
-    margin-right: 31px;
-  }
-
-  p {
-    margin: 8.25px 0px;
-  }
-`;
-
-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 {
-      ${({ listElementStyle }) => listElementStyle}
-    }
-  }
-
-  span {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background-color: ${({ theme }) => theme.bgColor};
-    margin-right: 31px;
-  }
-
-  p {
-    margin: 8.25px 31px;
-  }
-`;
-
-export const Navbar = ({
-    headerContent,
-    bodyContent,
-    footerContent,
-    selectedApp,
-    setApp,
-    toggleSideBarOpen,
-    headerStyles,
-    selectedStyle,
-    notSelectedStyle,
-    customStylesNameHover,
-    listElementStyle,
-    customSelectCardColor,
-    user,
-    firstBottomContent,
-    secondBottomContent,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    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: '98vh',
-            }}
-        >
-            <StyledHeader theme={activeTheme} headerStyles={headerStyles}>
-                {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}
-                            customSelectCardColor={customSelectCardColor}
-                            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
-                                    selectedStyle={selectedStyle}
-                                    notSelectedStyle={notSelectedStyle}
-                                    toggleName={toggleSideBarOpen} //isOpen} //true}
-                                    customStylesName={{
-                                        'white-space': 'nowrap',
-                                        overflow: 'hidden',
-                                        'text-overflow': 'ellipsis',
-                                        color: 'white',
-                                        'font-weight':
-                                            app.userName === selectedApp.lev1 ? '600' : '400',
-                                    }}
-                                    customStylesNameHover={customStylesNameHover}
-                                    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
-                                                listElementStyle={listElementStyle}
-                                                key={app.id + sub}
-                                                onClick={() => {
-                                                    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
-                            selectedStyle={selectedStyle}
-                            notSelectedStyle={notSelectedStyle}
-                            toggleName={toggleSideBarOpen} //isOpen}//} //true}
-                            customStylesName={{
-                                'white-space': 'nowrap',
-                                overflow: 'hidden',
-                                'text-overflow': 'ellipsis',
-                                color: 'white',
-                                'font-weight': '400',
-                            }}
-                            customStylesNameHover={customStylesNameHover}
-                            size={'LG'}
-                            user={{
-                                fullName: user.fullName || 'My Account',
-                                userName: user.userName || 'My Account',
-                                url: user.imgUrl,
-                            }}
-                        />
-                    }
-                    content={
-                        <div
-                            style={{
-                                margin: '0',
-                                padding: '0',
-                                paddingLeft: '32px',
-                                marginBottom: '18.25px',
-                            }}
-                        >
-                            <ListElementFooter
-                                listElementStyle={listElementStyle}
-                            >
-                                {firstBottomContent}
-
-                            </ListElementFooter>
-                            <ListElementFooter onClick={() => { }}>
-
-                                {secondBottomContent}
-                            </ListElementFooter>
-                        </div>
-                    }
-                />
-            </StyledFooter>
-        </div>
-    );
-};

package/components/Sidebar/Sidebar.js

@@ -1,207 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-
-/**
- * Primary UI component for user interaction
- */
-
-const StyledContainer = styled.div`
-  background-color: ${({ theme }) => theme.variant['primary-1']} !important;
-  color: ${({ theme }) => theme.bgColor};
-  overflow-y: auto;
-  ${({ inBuiltCss, type }) => {
-        return getDefaultStyles(inBuiltCss, 'sidebar-container');
-    }}
-  ${({ customStylesContainer }) => customStylesContainer}
-
-${({
-        isOpen,
-        forceOpen,
-        inBuiltCss,
-        type,
-        customStylesContainerOpen,
-        customStylesContainerClose,
-    }) => {
-        if (isOpen || forceOpen) {
-            return {
-                ...getDefaultStyles(inBuiltCss, 'sidebar-container-open'),
-                ...customStylesContainerOpen,
-            };
-        } else {
-            return {
-                ...getDefaultStyles(inBuiltCss, 'sidebar-container-close'),
-                ...customStylesContainerClose,
-            };
-        }
-    }}
-
-@media (max-width: 980px) {
-    ${({
-        isOpen,
-        inBuiltCss,
-        type,
-        customStylesContainerMobileOpen,
-        customStylesContainerMobileClose,
-    }) => {
-        // if (isOpen) {
-        //     return { ...getDefaultStyles(inBuiltCss, 'sidebar-container-mobile-open'), ...customStylesContainerMobileOpen };
-        // } else {
-        //     return { ...getDefaultStyles(inBuiltCss, 'sidebar-container-mobile-close'), ...customStylesContainerMobileClose };
-        // }
-    }}
-  }
-`;
-
-const StyledPusher = styled.div`
-${({ inBuiltCss, type }) => {
-        return getDefaultStyles(inBuiltCss, 'sidebar-pusher');
-    }}
-${({ customStylesPusher }) => customStylesPusher}
-
-${({
-        forceOpen,
-        inBuiltCss,
-        type,
-        customStylesPusherOpen,
-        customStylesPusherClose,
-    }) => {
-        if (forceOpen) {
-            return {
-                ...getDefaultStyles(inBuiltCss, 'sidebar-pusher-open'),
-                ...customStylesPusherOpen,
-            };
-        } else {
-            return {
-                ...getDefaultStyles(inBuiltCss, 'sidebar-pusher-close'),
-                ...customStylesPusherClose,
-            };
-        }
-    }}
-
-@media (max-width: 980px) {
-    ${({ inBuiltCss, type, customStylesPusherMobile }) => {
-        return {
-            ...getDefaultStyles(inBuiltCss, 'sidebar-pusher-mobile'),
-            ...customStylesPusherMobile,
-        };
-    }}}
-}
-`;
-
-export const Sidebar = ({
-    customStylesContainer,
-    customStylesContainerOpen,
-    customStylesContainerClose,
-    customStylesContainerMobileOpen,
-    customStylesContainerMobileClose,
-    customStylesPusher,
-    customStylesPusherOpen,
-    customStylesPusherClose,
-    customStylesPusherMobile,
-    forceOpen,
-    forceClose,
-    handleSidebar,
-    toggleSideBarOpen,
-    pinner,
-    ...props
-}) => {
-    function handleMouse(flag) {
-        handleSidebar(flag);
-    }
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    return (
-        <StyledContainer
-            theme={activeTheme}
-            inBuiltCss={defaultStyles}
-            customStyles={customStylesContainer}
-            type={'sidebarContainer'}
-            onMouseEnter={() => {
-                if (forceOpen) {
-                } else {
-                    handleMouse(true);
-                }
-            }}
-            onMouseLeave={() => {
-                handleMouse(false);
-                forceClose();
-            }}
-            forceOpen={forceOpen}
-            isOpen={toggleSideBarOpen} //true}
-            {...props}
-        >
-            <StyledPusher />
-            {props.children}
-            {pinner}
-        </StyledContainer>
-    );
-};
-
-Sidebar.propTypes = {
-    /**
-     * 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 = {
-    forceClose: () => { },
-    forceOpen: false,
-};

package/components/Sidebar/index.js

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

package/components/StatusChip/PrimaryStatusChip.js

@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-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

@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-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,
-};
-