@luminati-io/uikit 1.3.0 → 1.5.0

package/src/tooltip.js

@@ -0,0 +1,99 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import React, {useCallback, useState} from 'react';
+import {usePopper} from 'react-popper';
+import styled from 'styled-components';
+import PT from 'prop-types';
+import {theme, tooltipPlacements} from './utils';
+import typography from './Typography';
+
+const {Label} = typography;
+
+const Tooltip = props=>{
+    const {children, tooltip, placement} = props;
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const [arrowElement, setArrowElement] = useState(null);
+    const [visible, setVisible] = useState(false);
+    const show = useCallback(()=>setVisible(true), []);
+    const hide = useCallback(()=>setVisible(false), []);
+    const {styles, attributes} = usePopper(referenceElement,
+        popperElement, {
+        placement,
+        modifiers: [
+            {name: 'arrow', options: {element: arrowElement}},
+            {name: 'offset', options: {offset: [0, 8]}},
+        ],
+    });
+    if (!tooltip)
+        return children;
+    return <>
+      <StyledTooltipReference ref={setReferenceElement}
+        onMouseEnter={show} onMouseLeave={hide}>
+        {children}
+      </StyledTooltipReference>
+      <StyledTooltipBody ref={setPopperElement} style={styles.popper}
+        {...attributes.popper} visible={visible}>
+        <Label variant="sm" color="white">{tooltip}</Label>
+        <StyledTooltipArrow ref={setArrowElement} style={styles.arrow}
+          {...attributes.arrow} visible={visible}/>
+      </StyledTooltipBody>
+    </>;
+};
+Tooltip.defaultProps = {placement: 'top'};
+Tooltip.propTypes = {
+    tooltip: PT.node,
+    placement: PT.oneOf(tooltipPlacements),
+};
+
+export const withTooltip = (Comp, tooltipProps)=>function WithTooltip(props){
+    return <Tooltip {...tooltipProps}>
+      <Comp {...props}/>
+    </Tooltip>;
+};
+
+const StyledTooltipBody = styled.div`
+    background-color: ${theme.color.gray_11_50};
+    padding: ${theme.spacing['03']};
+    width: fit-content;
+    max-width: 500px;
+    border-radius: ${theme.spacing['02']};
+    visibility: ${props=>props.visible ? 'visible': 'hidden'};
+    opacity: ${props=>props.visible ? 1 : 0};
+    transition: opacity 200ms;
+`;
+
+const StyledTooltipArrow = styled.div`
+    &, &::before {
+        position: absolute;
+        width: ${theme.spacing['04']};
+        height: ${theme.spacing['04']};
+        background: inherit;
+        border-radius: ${theme.spacing['01']};
+    }
+    visibility: hidden;
+    &::before {
+        visibility: ${props=>props.visible ? 'visible': 'hidden'};
+        content: '';
+        transform: rotate(45deg);
+    }
+    [data-popper-placement^='top'] > & {
+        bottom: -${theme.spacing['02']};
+    }
+    [data-popper-placement^='right'] > & {
+        left: -${theme.spacing['02']};
+    }
+    [data-popper-placement^='bottom'] > & {
+        top: -${theme.spacing['02']};
+    }
+    [data-popper-placement^='left'] > & {
+        right: -${theme.spacing['02']};
+    }
+`;
+
+const StyledTooltipReference = styled.div`
+    width: fit-content;
+`;
+
+export default Tooltip;

package/src/utils.js

@@ -3,6 +3,7 @@
 
 import _ from 'lodash';
 import icons from '@icons';
+import {css} from 'styled-components';
 
 export const theme = {
     color: {
@@ -132,5 +133,138 @@ export function fromTheme(propName, defaultValue){
     };
 }
 
+export const getIconProps = (comp, opt)=>{
+    const {size, icon, iconPlacement='left'} = opt;
+    const isLeft = !!icon&&iconPlacement=='left';
+    const isRight = !!icon&&iconPlacement=='right';
+    const iconSize = ()=>{
+        if (comp=='Link')
+            return {lg: 'sm', sm: 'xxs'}[size]||'xs';
+        if (comp=='Button')
+            return {sm: 'xs', xs: 'xxs'}[size]||'sm';
+        if (comp=='MenuItem')
+            return size=='sm'?'xs':'sm';
+    };
+    return {isLeft, isRight, name: icon, size: iconSize()};
+};
+
+export const getLinkProps = opt=>{
+    const {as, href, newTab} = opt;
+    let p = {as, href};
+    if (newTab)
+        p = {...p, target: '_blank', rel: 'noopener noreferrer'};
+    return p;
+};
+
+export const getButtonColors = props=>{
+    const {variant, disabled} = props;
+    if (disabled)
+    {
+        return {
+            color: theme.color.gray_9,
+            backColor: theme.color.gray_2,
+            border: `1px solid ${theme.color.gray_6}`,
+        };
+    }
+    const styles = {
+        primary: {
+            color: theme.color.white,
+            backColor: theme.color.blue_11,
+            hover: {backColor: theme.color.blue_10},
+            active: {
+                backColor: theme.color.blue_11,
+                boxShadow: '0 0 0 2px rgba(0, 106, 220, 0.4)',
+            },
+        },
+        secondary: {
+            color: theme.color.blue_11,
+            backColor: theme.color.white,
+            border: `1px solid ${theme.color.blue_11}`,
+            hover: {backColor: theme.color.blue_2},
+            active: {
+                backColor: theme.color.white,
+                boxShadow: '0 0 0 2px rgba(0, 106, 220, 0.4)',
+            },
+        },
+        negative: {
+            color: theme.color.white,
+            backColor: theme.color.red_11,
+            hover: {backColor: theme.color.red_10},
+            active: {
+                backColor: theme.color.red_11,
+                boxShadow: '0 0 0 2px rgba(205, 43, 49, 0.4)',
+            },
+        },
+        negative_secondary: {
+            color: theme.color.red_11,
+            backColor: theme.color.white,
+            border: `1px solid ${theme.color.red_11}`,
+            hover: {backColor: theme.color.red_2},
+            active: {
+                backColor: theme.color.white,
+                boxShadow: '0 0 0 2px rgba(205, 43, 49, 0.4)',
+            },
+        },
+        positive: {
+            color: theme.color.green_11,
+            backColor: theme.color.white,
+            border: `1px solid ${theme.color.green_11}`,
+            hover: {backColor: theme.color.green_2},
+            active: {
+                backColor: theme.color.white,
+                boxShadow: '0 0 0 2px rgba(6, 122, 111, 0.4)',
+            },
+        },
+        white: {
+            color: theme.color.gray_11_50,
+            iconColor: theme.color.gray_10,
+            backColor: theme.color.white,
+            border: `1px solid ${theme.color.gray_8}`,
+            hover: {backColor: theme.color.gray_2},
+            active: {
+                backColor: theme.color.gray_3,
+                border: `1px solid ${theme.color.gray_9}`,
+                iconColor: theme.color.gray_11_50,
+            },
+        },
+    };
+    return styles[variant]||styles.primary;
+};
+
+export const toIconSize = size=>{
+    const toSize = value=>css`
+        width: ${toPixel(value)};
+        height: ${toPixel(value)};
+    `;
+    if (size=='xl')
+        return toSize(48);
+    if (size=='lg')
+        return toSize(32);
+    if (size=='sm')
+        return toSize(20);
+    if (size=='xs')
+        return toSize(16);
+    if (size=='xxs')
+        return toSize(12);
+    return toSize(24);
+};
+
+export const toButtonSize = size=>{
+    let w = 40; // md
+    if (size=='lg')
+        w = 48;
+    if (size=='sm')
+        w = 36;
+    if (size=='xs')
+        w = 28;
+    return css`height: ${toPixel(w)};`;
+};
+
+export const tooltipPlacements = (()=>{
+    const positions = ['auto', 'top', 'right', 'bottom', 'left'];
+    const variants = ['', '-start', '-end'];
+    return positions.flatMap(p=>variants.map(v=>p+v));
+})();
 
-export default {theme, toPixel, getCommonProps, getTypographyProps, fromTheme};
+export default {theme, toPixel, getCommonProps, getTypographyProps, fromTheme,
+    colorNames, iconNames, tooltipPlacements};

package/webpack.common.js

@@ -2,6 +2,7 @@
 'use strict'; /*jslint node:true*/
 
 const path = require('path');
+const {svgRule} = require('./webpack.shared.js');
 
 const alias = {
     '@icons': path.resolve(__dirname, 'assets/icons'),
@@ -15,10 +16,7 @@ const common = {
                 exclude: /node_modules/,
                 use: ['babel-loader'],
             },
-            {
-                test: /\.svg$/,
-                loader: 'svg-sprite-loader',
-            }
+            svgRule,
         ]
     },
     resolve: {alias},

package/webpack.shared.js

@@ -0,0 +1,11 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint node:true, es9:true*/
+
+const svgRule = {
+    test: /\.svg$/,
+    loader: 'svg-sprite-loader',
+};
+
+module.exports = {
+    svgRule,
+};

package/src/button.js

@@ -1,180 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import React from 'react';
-import styled, {css} from 'styled-components';
-import PT from 'prop-types';
-import utils from './utils';
-import typography from './Typography';
-
-const {Typography, Label} = typography;
-const {theme, toPixel, getCommonProps} = utils;
-
-const Button = React.forwardRef((props, ref)=>{
-    const {text, variant, size, icon, iconPlacement, disabled} = props;
-    const iconLeft = !!icon&&iconPlacement=='left';
-    const iconRight = !!icon&&iconPlacement=='right';
-    const iconName = `ic_${icon}.svg`;
-    const iconSize = {sm: 'xs', xs: 'xxs'}[size]||'sm';
-    return <StyledButton ref={ref} {...getCommonProps(props)} variant={variant}
-      size={size} disabled={disabled} $inline={!icon}>
-      {/* {iconLeft&&<Icon name={iconName} size={iconSize}/>} */}
-      <Label variant={size=='xs'?'sm':'lg'} no_wrap>{text}</Label>
-      {/* {iconRight&&<Icon name={iconName} size={iconSize}/>} */}
-    </StyledButton>;
-});
-Button.displayName = 'Button';
-Button.defaultProps = {size: 'md', iconPlacement: 'left'};
-Button.propTypes = {
-    text: PT.string.isRequired,
-    variant: PT.oneOf(['primary', 'secondary', 'negative',
-        'negative_secondary', 'positive', 'white']).isRequired,
-    size: PT.oneOf(['xs', 'sm', 'md', 'lg']),
-    icon: PT.string,
-    iconPlacement: PT.oneOf(['left', 'right']),
-    disabled: PT.bool,
-};
-
-const StyledButton = styled.button`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    ${props=>{
-        let gap = 4;
-        let paddingLeft = 12;
-        let paddingRight = 16;
-        if (props.$inline)
-            paddingLeft = paddingRight;
-        if (props.size=='xs')
-        {
-            gap = 2;
-            paddingLeft = paddingRight = 8;
-        }
-        return css`
-            gap: ${toPixel(gap)};
-            padding-left: ${toPixel(paddingLeft)};
-            padding-right: ${toPixel(paddingRight)};
-        `;
-    }}
-    ${props=>{
-        const getColors = ()=>{
-            const {variant, disabled} = props;
-            if (disabled)
-            {
-                return {
-                    color: theme.color.gray_9,
-                    backColor: theme.color.gray_2,
-                    borderColor: theme.color.gray_6,
-                };
-            }
-            const styles = {
-                primary: {
-                    color: theme.color.white,
-                    backColor: theme.color.blue_11,
-                    borderColor: theme.color.blue_11,
-                    hover: {
-                        backColor: theme.color.blue_10,
-                        borderColor: theme.color.blue_10,
-                    },
-                    active: {
-                        backColor: theme.color.blue_11,
-                        borderColor: theme.color.blue_11,
-                        boxShadow: '0 0 0 2px rgba(0, 106, 220, 0.4)',
-                    },
-                },
-                secondary: {
-                    color: theme.color.blue_11,
-                    backColor: theme.color.white,
-                    borderColor: theme.color.blue_11,
-                    hover: {backColor: theme.color.blue_2},
-                    active: {
-                        backColor: theme.color.white,
-                        boxShadow: '0 0 0 2px rgba(0, 106, 220, 0.4)',
-                    },
-                },
-                negative: {
-                    color: theme.color.white,
-                    backColor: theme.color.red_11,
-                    borderColor: theme.color.red_11,
-                    hover: {
-                        backColor: theme.color.red_10,
-                        borderColor: theme.color.red_10,
-                    },
-                    active: {
-                        backColor: theme.color.red_11,
-                        borderColor: theme.color.red_11,
-                        boxShadow: '0 0 0 2px rgba(205, 43, 49, 0.4)',
-                    },
-                },
-                negative_secondary: {
-                    color: theme.color.red_11,
-                    backColor: theme.color.white,
-                    borderColor: theme.color.red_11,
-                    hover: {backColor: theme.color.red_2},
-                    active: {
-                        backColor: theme.color.white,
-                        boxShadow: '0 0 0 2px rgba(205, 43, 49, 0.4)',
-                    },
-                },
-                positive: {
-                    color: theme.color.green_11,
-                    backColor: theme.color.white,
-                    borderColor: theme.color.green_11,
-                    hover: {backColor: theme.color.green_2},
-                    active: {
-                        backColor: theme.color.white,
-                        boxShadow: '0 0 0 2px rgba(6, 122, 111, 0.4)',
-                    },
-                },
-                white: {
-                    color: theme.color.gray_11_50,
-                    iconColor: theme.color.gray_10,
-                    backColor: theme.color.white,
-                    borderColor: theme.color.gray_8,
-                    hover: {backColor: theme.color.gray_2},
-                    active: {
-                        backColor: theme.color.gray_3,
-                        borderColor: theme.color.gray_9,
-                        iconColor: theme.color.gray_11_50,
-                    },
-                },
-            };
-            return styles[variant]||styles.primary;
-        };
-        const colors = getColors();
-        return css`
-            background-color: ${colors.backColor};
-            border: 1px solid ${colors.borderColor};
-            ${Typography} { color: ${colors.color}; }
-            ${'' /* ${IconContainer} {
-                background-color: ${colors.iconColor||colors.color};
-            } */}
-            ${colors.hover&&`&:hover {
-                background-color: ${colors.hover.backColor};
-                border: 1px solid ${colors.hover.borderColor};
-            }`}
-            ${colors.active&&`&:active {
-                background-color: ${colors.active.backColor};
-                border: 1px solid ${colors.active.borderColor};
-                box-shadow: ${colors.active.boxShadow};
-                ${'' /* ${colors.active.iconColor&&`${IconContainer} {
-                    background-color: ${colors.active.iconColor};
-                }`} */}
-            }`}
-        `;
-    }}
-    ${props=>{
-        let w = 40; // md
-        if (props.size=='lg')
-            w = 48;
-        if (props.size=='sm')
-            w = 36;
-        if (props.size=='xs')
-            w = 28;
-        return css`height: ${toPixel(w)};`;
-    }}
-`;
-StyledButton.displayName = 'StyledButton';
-
-export default Button;