groundfloor-react-ui 1.0.0

package/components/Overlay/Overlay.js

@@ -0,0 +1,159 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import { usePopperTooltip } from 'react-popper-tooltip';
+// import 'react-popper-tooltip/dist/styles.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+const OverlayContainer = styled.div`
+${({ 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 };
+        }
+    }}
+    }
+`;
+
+export const Overlay = ({
+    theme,
+    toggleSimple,
+    contentTrigger,
+    contentOverlay,
+    popperOptionsP,
+    settingsP,
+    customStyles,
+    ...props
+}) => {
+
+    let popperOptions = {}
+    let settings = {}
+
+    if (toggleSimple) {
+        //Simple tooltip without arrow for text
+        popperOptions = {
+            ...popperOptions,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 5],
+                    },
+                },
+            ],
+            strategy: 'absolute'
+        }
+        settings = { ...settings }
+    } else {
+        //More styled overlay for other purpose
+        popperOptions = {
+            ...popperOptions,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 5],
+                    },
+                },
+            ],
+            strategy: 'absolute'
+        }
+        settings = {
+            ...settings,
+            trigger: 'click',
+            closeOnOutsideClick: true,
+            interactive: true,
+        }
+    }
+
+    popperOptions = { ...popperOptions, ...popperOptionsP }
+    settings = { ...settings, ...settingsP }
+
+    const {
+        getArrowProps,
+        getTooltipProps,
+        setTooltipRef,
+        setTriggerRef,
+        visible,
+    } = usePopperTooltip({
+        ...settings
+    }, popperOptions);
+
+    return (
+        <>
+            <div ref={setTriggerRef}
+                style={{ width: 'fit-content', height: 'fit-content' }}
+            >
+                {contentTrigger}
+            </div>
+            {visible && (
+                <OverlayContainer
+                    type={toggleSimple ? 'simple-overlay' : 'overlay'}
+                    theme={theme}
+                    ref={setTooltipRef}
+                    {...getTooltipProps({ className: 'tooltip-container' })}
+                    customStyles={customStyles}
+                >
+                    {contentOverlay}
+                </OverlayContainer>
+            )}
+        </>
+    );
+};
+
+Overlay.propTypes = {
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * The element where to attach the tooltip
+     */
+    contentTrigger: PropTypes.any,
+    /**
+     * The element to put inside the overlay
+     */
+    contentOverlay: PropTypes.any,
+    /**
+     * Object to customize the behaviour of the tooltip
+     * For more reference see: 
+     * https://github.com/mohsinulhaq/react-popper-tooltip#readme
+     * https://popper.js.org/docs/v2/tutorial/
+     */
+    popperOptionsP: PropTypes.object,
+    /**
+     * Object to customize the settings of the tooltip
+     * For more reference see: 
+     * https://github.com/mohsinulhaq/react-popper-tooltip#readme
+     * https://popper.js.org/docs/v2/tutorial/
+     */
+    settingsP: PropTypes.object,
+    /**
+     * Object to pass custom style to the Overlay container
+     */
+    customStyles: PropTypes.object,
+    /**
+     * If true display a simple tooltip without arrow when hover the trigger
+     * If false when clicking on the trigger display a more styled overlay 
+     */
+    toggleSimple: PropTypes.bool,
+};
+
+Overlay.defaultProps = {
+    theme: defaultStyles,
+    contentTrigger: <div>Trigger</div>,
+    contentOverlay: <div>I am the Overlay</div>,
+};
+

package/components/Overlay/index.js

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

package/components/Pagination/Pagination.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+const StyledPagination = styled.div`
+    display: flex;
+    align-items: center;
+    color: ${({ theme }) => theme.variant['neutral-2']};
+`;
+
+StyledPagination.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+export const Pagination = ({ ...props }) => {
+
+    return (
+        <StyledPagination>
+            {props.children}
+        </ StyledPagination>
+    );
+};
+
+Pagination.propTypes = {
+    /**
+     *	Theme props
+     */
+    theme: PropTypes.object,
+}
+
+Pagination.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const Item = styled.div`
+    font-size: 14px;
+    color: ${({ selected, theme }) => selected ? theme.variant['primary-1'] : null};
+
+    svg {
+        width: 14px;
+        height: 14px;
+        path {
+            fill: ${({ selected, theme }) => selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
+        } 
+    }
+
+    cursor: pointer;
+    &:not(:first-child):not(:last-child) {
+        margin: 0 22px;
+    }
+`;
+
+Item.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+Pagination.PageItem = function PageItem({ selected, ...props }) {
+    return (
+        <Item selected={selected} {...props}>
+            {props.children}
+        </Item>
+    )
+}
+
+Pagination.PageItem.propTypes = {
+    /**
+     *	Theme props
+    */
+    theme: PropTypes.object,
+    /**
+     *	Is Page selected?
+    */
+    selected: PropTypes.bool,
+}
+
+Pagination.PageItem.defaultProps = {
+    theme: defaultThemeColor,
+    selected: false,
+}
+
+
+

package/components/Pagination/index.js

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

package/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,84 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import getDefaultStyles from '../constants/utils';
+import { Label } from '../Label';
+import { hexToRGB } from "../constants/utils";
+
+const WrapperDiv = styled.div`
+    //Set the styles from the default styles object
+    ${ ({ theme, type }) => {
+            return getDefaultStyles(theme, type);
+    }}
+    background-color: ${({ color }) => color? 
+        hexToRGB(color, 0.5) : 
+            defaultThemeColor.primary['primary-1']};
+`;
+
+const Container = styled.div`
+    //Set the styles from the default styles object
+        ${ ({ theme, type }) => {
+        return getDefaultStyles(theme, type);
+    }}
+        
+    // custom styles
+    ${({ progressBarStyle }) => progressBarStyle}
+    width: ${({now }) => now+'%'};
+    background-color: ${({ color }) => color ?color :defaultThemeColor.primary['primary-1']};
+`;
+
+export const ProgressBar = ({ labelStyle,progressBarStyle,label,now,color,...props}) => {
+    return (
+        <div>
+            <Label
+                theme={defaultStyles}
+                customStyles={labelStyle}
+                type={'progressbarLabel'}
+                text={label}
+                {...props} />
+            <WrapperDiv progressBarStyle={progressBarStyle} theme={defaultStyles} 
+                type={'progressWrapper'} color={color} {...props}>
+                <Container progressBarStyle={progressBarStyle} now={now} theme={defaultStyles} 
+                    type={'containerWrapper'} color={color} {...props}/>
+            </WrapperDiv>
+        </div>
+    );
+};
+
+ProgressBar.propTypes = {
+    /**
+     *	Custom style of the lable of the progressbar
+     */
+    labelStyle: PropTypes.object,
+    /**
+     *	Custom style of the progressbar
+     */
+    progressBarStyle: PropTypes.object,
+    
+    /**
+     *	Custom color(HEX format) of the progressbar
+     */
+    color: PropTypes.string,
+    
+    /**
+     *	label props
+     */
+    label: PropTypes.string,
+    /**
+     *	Progress number
+     */
+    now: PropTypes.number,
+};
+
+ProgressBar.defaultProps = {
+    labelStyle:{},
+    progressBarStyle: {},
+    label:'',
+    now:0,
+    color: "#2E56F4"
+};
+
+
+

package/components/ProgressBar/index.js

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

package/components/ProgressSteps/ProgressSteps.js

@@ -0,0 +1,121 @@
+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 StyledContainer = styled.div`
+    background: transparent;
+    display: flex;
+    align-items: center;
+    width: ${({ block }) => block ? '100%' : 'fit-content'};
+`;
+
+const StyledText = styled.div`
+    margin: 0;
+    color: ${({ theme, variantOff }) => theme.variant[variantOff]};
+    white-space: nowrap;
+    display: flex;
+    justify-content: space-between;
+
+    &>div{
+        font-weight: 600;
+        min-width: 13px;
+        text-align: center;
+        margin-left: 3px;
+        margin-right: 3px;
+    }
+
+    &>div:first-of-type{
+        color: ${({ theme, variantOn }) => theme.variant[variantOn]};
+    }
+`;
+
+const StyledSteps = styled.div`
+    display: flex;
+    margin-left: 20px;
+`;
+
+const StyledStep = styled.div`
+    height: 6px;
+    width: ${({ widthStep }) => widthStep}px;
+    margin: 0 3px;
+    background-color: ${({ theme, isActive, variantOn, variantOff }) => isActive ? theme.variant[variantOn] : theme.variant[variantOff]};
+    border-radius: 19px;
+`;
+
+export const ProgressSteps = ({ block, variantOn, variantOff, currentStep, totalSteps, widthStep, style, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+
+    return (
+        <StyledContainer block={block} {...props} style={style}>
+            <StyledText {...props} variantOn={variantOn} variantOff={variantOff}>Page <div>{currentStep}</div> of <div>{totalSteps}</div></StyledText>
+            <StyledSteps {...props} >
+                {Array.from(Array(totalSteps).keys()).map((index => {
+                    return <StyledStep key={'formSteps'.concat(index)} isActive={currentStep === index + 1} variantOn={variantOn} variantOff={variantOff} widthStep={widthStep} />
+                }))}
+            </StyledSteps>
+        </StyledContainer>
+    );
+};
+
+ProgressSteps.propTypes = {
+    /**
+     * Background color of the step and text active base on variant. primary-1, 2, error, etc.
+     */
+    variantOn: PropTypes.string,
+    /**
+     * Background color of the step and text not active base on variant. primary-1, 2, error, etc.
+     */
+    variantOff: PropTypes.string,
+    /**
+     * Optional Block width
+     */
+    block: PropTypes.bool,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Optional value of the current step
+     */
+    currentStep: PropTypes.number,
+    /**
+     * Optional value of the total steps
+     */
+    totalSteps: PropTypes.number,
+    /**
+     * Optional value of width of each step in px
+     */
+    widthStep: PropTypes.number,
+};
+
+StyledContainer.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+StyledText.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+StyledSteps.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+StyledStep.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+ProgressSteps.defaultProps = {
+    theme: defaultThemeColor,
+    variantOn: 'primary-1',
+    variantOff: 'neutral-2',
+    block: false,
+    currentStep: 1,
+    totalSteps: 4,
+    widthStep: 43,
+};
+

package/components/ProgressSteps/index.js

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