groundfloor-react-ui 1.0.0

package/components/Tooltip/Tooltip.js

@@ -0,0 +1,479 @@
+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 TooltipContainer = styled.div`
+${({ theme, type, customStylesTPContainer }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tooltip-container']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tooltip-container']) {
+                    tempObj[property] = theme['tooltip-container'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPContainer };
+        }
+    }}
+
+    &[data-popper-placement*='bottom'] .tooltip-arrow {
+        ${({ theme, type, customStylesTPAbottom }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-bottom-arrow']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-bottom-arrow']) {
+                    tempObj[property] = theme['tp-cont-bottom-arrow'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAbottom };
+        }
+    }}
+    }
+
+&[data-popper-placement*='bottom'] .tooltip-arrow::before {
+    ${({ theme, type, customStylesTPAbottomBefore }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-bottom-arrow-before']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-bottom-arrow-before']) {
+                    tempObj[property] = theme['tp-cont-bottom-arrow-before'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAbottomBefore };
+        }
+    }}
+}
+
+&[data-popper-placement*='bottom'] .tooltip-arrow::after {
+    ${({ theme, type, customStylesTPAbottomAfter }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-bottom-arrow-before']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-bottom-arrow-after']) {
+                    tempObj[property] = theme['tp-cont-bottom-arrow-after'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAbottomAfter };
+        }
+    }}
+}
+&[data-popper-placement*='top'] .tooltip-arrow {
+    ${({ theme, type, customStylesTPAtop }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-top-arrow']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-top-arrow']) {
+                    tempObj[property] = theme['tp-cont-top-arrow'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAtop };
+        }
+    }}
+}
+&[data-popper-placement*='top'] .tooltip-arrow::before {
+    ${({ theme, type, customStylesTPAtopBefore }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-top-arrow-before']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-top-arrow-before']) {
+                    tempObj[property] = theme['tp-cont-top-arrow-before'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAtopBefore };
+        }
+    }}
+}
+&[data-popper-placement*='top'] .tooltip-arrow::after {
+    ${({ theme, type, customStylesTPAtopAfter }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-top-arrow-before']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-top-arrow-after']) {
+                    tempObj[property] = theme['tp-cont-top-arrow-after'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAtopAfter };
+        }
+    }}
+}
+&[data-popper-placement*='right'] .tooltip-arrow {
+    ${({ theme, type, customStylesTPAright }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-right-arrow']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-right-arrow']) {
+                    tempObj[property] = theme['tp-cont-right-arrow'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAright };
+        }
+    }}
+}
+&[data-popper-placement*='right'] .tooltip-arrow::before {
+    ${({ theme, type, customStylesTPArightBefore }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-right-arrow-before']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-right-arrow-before']) {
+                    tempObj[property] = theme['tp-cont-right-arrow-before'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPArightBefore };
+        }
+    }}
+}
+&[data-popper-placement*='right'] .tooltip-arrow::after {
+    ${({ theme, type, customStylesTPArightAfter }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-right-arrow-before']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-right-arrow-after']) {
+                    tempObj[property] = theme['tp-cont-right-arrow-after'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPArightAfter };
+        }
+    }}
+}
+&[data-popper-placement*='left'] .tooltip-arrow {
+    ${({ theme, type, customStylesTPAleft }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-left-arrow']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-left-arrow']) {
+                    tempObj[property] = theme['tp-cont-left-arrow'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAleft };
+        }
+    }}
+}
+&[data-popper-placement*='left'] .tooltip-arrow::before {
+    ${({ theme, type, customStylesTPAleftBefore }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-left-arrow-before']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-left-arrow-before']) {
+                    tempObj[property] = theme['tp-cont-left-arrow-before'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAleftBefore };
+        }
+    }}
+}
+&[data-popper-placement*='left'] .tooltip-arrow::after {
+    ${({ theme, type, customStylesTPAleftAfter }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tp-cont-left-arrow-before']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tp-cont-left-arrow-after']) {
+                    tempObj[property] = theme['tp-cont-left-arrow-after'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAleftAfter };
+        }
+    }}
+}
+`;
+
+const TooltipArrow = styled.div`
+
+${({ theme, type, customStylesTPArrow }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tooltip-arrow']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tooltip-arrow']) {
+                    tempObj[property] = theme['tooltip-arrow'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPArrow };
+        }
+    }}
+
+
+&::before{
+    ${({ theme, type, customStylesTPAbefore }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tooltip-arrow-before']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tooltip-arrow-before']) {
+                    tempObj[property] = theme['tooltip-arrow-before'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAbefore };
+        }
+    }}
+    }
+
+    &::after{
+        ${({ theme, type, customStylesTPAafter }) => {
+        if (theme) {
+            let tempObj = {};
+            if (theme['tooltip-arrow-after']) {
+                for (const property in theme['common']) {
+                    tempObj[property] = theme['common'][property]
+                }
+                for (const property in theme['tooltip-arrow-after']) {
+                    tempObj[property] = theme['tooltip-arrow-after'][property]
+                    delete theme.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAafter };
+        }
+    }}
+        }
+`;
+
+export const Tooltip = ({
+    theme,
+    contentTrigger,
+    contentTooltip,
+    popperOptionsP,
+    settings,
+    customStylesTPContainer,
+    customStylesTPAbottom,
+    customStylesTPAbottomBefore,
+    customStylesTPAbottomAfter,
+    customStylesTPAtop,
+    customStylesTPAtopBefore,
+    customStylesTPAtopAfter,
+    customStylesTPAright,
+    customStylesTPArightBefore,
+    customStylesTPArightAfter,
+    customStylesTPAleft,
+    customStylesTPAleftBefore,
+    customStylesTPAleftAfter,
+    customStylesTPArrow,
+    customStylesTPAbefore,
+    customStylesTPAafter,
+    ...props
+}) => {
+
+    const popperOptions = {
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 23],
+                },
+            },
+        ],
+        strategy: 'absolute'
+        , ...popperOptionsP
+    }
+
+    const {
+        getArrowProps,
+        getTooltipProps,
+        setTooltipRef,
+        setTriggerRef,
+        visible,
+    } = usePopperTooltip({
+        ...settings
+    }, popperOptions);
+
+    return (
+        <>
+            <div ref={setTriggerRef}
+                style={{ width: 'fit-content', height: 'fit-content', display: 'inline-block' }}
+            >
+                {contentTrigger}
+            </div>
+            {visible && (
+                <TooltipContainer
+                    theme={theme}
+                    ref={setTooltipRef}
+                    {...getTooltipProps({ className: 'tooltip-container' })}
+                    customStylesTPContainer={customStylesTPContainer}
+                    customStylesTPAbottom={customStylesTPAbottom}
+                    customStylesTPAbottomBefore={customStylesTPAbottomBefore}
+                    customStylesTPAbottomAfter={customStylesTPAbottomAfter}
+                    customStylesTPAtop={customStylesTPAtop}
+                    customStylesTPAtopBefore={customStylesTPAtopBefore}
+                    customStylesTPAtopAfter={customStylesTPAtopAfter}
+                    customStylesTPAright={customStylesTPAright}
+                    customStylesTPArightBefore={customStylesTPArightBefore}
+                    customStylesTPArightAfter={customStylesTPArightAfter}
+                    customStylesTPAleft={customStylesTPAleft}
+                    customStylesTPAleftBefore={customStylesTPAleftBefore}
+                    customStylesTPAleftAfter={customStylesTPAleftAfter}
+                >
+                    <TooltipArrow
+                        theme={theme}
+                        {...getArrowProps({ className: 'tooltip-arrow' })}
+                        customStylesTPArrow={customStylesTPArrow}
+                        customStylesTPAbefore={customStylesTPAbefore}
+                        customStylesTPAafter={customStylesTPAafter}
+                    />
+                    {contentTooltip}
+                </TooltipContainer>
+            )}
+        </>
+    );
+};
+
+Tooltip.propTypes = {
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * The element where to attach the tooltip
+     */
+    contentTrigger: PropTypes.any,
+    /**
+     * The element to put inside the tooltip
+     */
+    contentTooltip: 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/
+     */
+    settings: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip container
+     */
+    customStylesTPContainer: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow bottom
+     */
+    customStylesTPAbottom: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow bottom ::before
+     */
+    customStylesTPAbottomBefore: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow bottom ::after
+     */
+    customStylesTPAbottomAfter: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow top
+     */
+    customStylesTPAtop: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow top ::before
+     */
+    customStylesTPAtopBefore: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow top ::after
+     */
+    customStylesTPAtopAfter: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow right
+     */
+    customStylesTPAright: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow right ::before
+     */
+    customStylesTPArightBefore: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow right ::after
+     */
+    customStylesTPArightAfter: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow left
+     */
+    customStylesTPAleft: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow left ::before
+     */
+    customStylesTPAleftBefore: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow left ::after
+     */
+    customStylesTPAleftAfter: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow
+     */
+    customStylesTPArrow: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow ::before
+     */
+    customStylesTPAbefore: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip arrow ::after
+     */
+    customStylesTPAafter: PropTypes.object,
+};
+
+Tooltip.defaultProps = {
+    theme: defaultStyles,
+    contentTrigger: <div>Trigger</div>,
+    contentTooltip: <div>I am the tooltip</div>,
+};
+
+export default Tooltip;

package/components/Tooltip/index.js

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

package/components/Typography/Typography.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import FontStyles from '../global/FontStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+const sizes = {
+    xs: {
+        fontSize: '12px',
+        lineHeight: '120%'
+    },
+    sm: {
+        fontSize: '14px',
+        lineHeight: '120%'
+    },
+    md: {
+        fontSize: '16px',
+        lineHeight: '140%'
+    },
+    lg: {
+        fontSize: '18px',
+        lineHeight: '120%'
+    },
+}
+
+const Box = styled.div`
+    color: ${({ theme, text }) => text ? theme.variant[text] : theme.textColor};
+    background: ${({ theme, bg }) => bg ? theme.variant[bg] : theme.bgColor};
+    font-size: ${({ size }) => sizes[size].fontSize};
+    line-height: ${({ size }) => sizes[size].lineHeight};
+`
+
+export const Typography = ({ size, children, bg, text, ...props }) => {
+    return (
+        <Box
+            bg={bg}
+            text={text}
+            size={size}
+            {...props}
+        >
+            <FontStyles />
+            {children}
+        </Box>
+    );
+};
+
+Typography.propTypes = {
+    /**
+     * How large should the font be?
+     */
+    size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+    /**
+     * Text Color variant. primary-1, 2, etc.
+     */
+    text: PropTypes.string,
+    /**
+     * Background Color variant. primary-1, 2, etc.
+     */
+    bg: PropTypes.string,
+    /**
+     * Typography contents
+     */
+    children: PropTypes.any,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+};
+
+Box.defaultProps = {
+    theme: defaultThemeColor,
+};
+
+Typography.defaultProps = {
+    theme: defaultThemeColor,
+    size: 'md',
+};
+

package/components/Typography/index.js

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

package/components/constants/colors.js

@@ -0,0 +1,33 @@
+
+export const primaryColor = {
+    "primary-1": "#2E56F4",
+    "primary-2": "#081348",
+}
+
+export const uiColor = {
+    "error": "#DD0000",
+    "success": "#00B904 ",
+}
+
+export const neutralColor = {
+    "neutral-1": "#39424D",
+    "neutral-2": "#929EAC",
+    "neutral-3": "#BBC4CF",
+    "neutral-4": "#E2E6F5",
+    "neutral-5": "#F0F3F8",
+}
+
+export const shadeColor = {
+    "insight-purple": "#F8F2FF",
+    "insight-yellow": "#FFFAF2",
+    "error-bg": "#FCF2F2",
+    "selection-bg": "#F2F4FE",
+}
+
+export const graphColor = {
+    "graph-1": "#2E56F4",
+    "graph-2": "#00D7F7",
+    "graph-3": "#8B2DFF",
+    "graph-4": "#FB9A00",
+    "graph-5": "#00B904",
+}