@luminati-io/uikit 1.6.0 → 1.6.1

package/src/progress/progess.js

@@ -1,45 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import React from 'react';
-import PT from 'prop-types';
-
-import typography from '../Typography';
-import layout from '../layout';
-import {theme} from '../utils';
-import ProgressBar from './progress_bar';
-
-const {Label} = typography;
-const {Flex} = layout;
-
-const ProgressFraction = props=>{
-    const {amount, capacity} = props;
-    // XXX davidg: implement number formatting by $, bytes, etc.
-    return <Flex align_items="center">
-      <Label color="gray_11_50">{amount}</Label>
-      <Label color="gray_11">/{capacity}</Label>
-    </Flex>;
-};
-ProgressFraction.propTypes = {
-    amount: PT.number.isRequired,
-    capacity: PT.number.isRequired,
-    // unit: PT.string,
-};
-
-const Progress = props=>{
-    const {amount, capacity, label} = props;
-    return <Flex flex_direction="column" gap={theme.spacing['03']}>
-      <Flex align_items="flex-end" justify_content="space-between">
-        <Label color="gray_11_50">{label}</Label>
-        <ProgressFraction amount={amount} capacity={capacity}/>
-      </Flex>
-      <ProgressBar amount={amount} capacity={capacity}/>
-    </Flex>;
-};
-Progress.propTypes = {
-  amount: PT.number.isRequired,
-  capacity: PT.number.isRequired,
-  label: PT.string,
-};
-
-export default Progress;

package/src/progress/progress_bar.js

@@ -1,37 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import React from 'react';
-import styled from 'styled-components';
-import PT from 'prop-types';
-import _ from 'lodash';
-
-import {theme} from '../utils';
-
-const ProgressBarWrapper = styled.div`
-    background-color: ${theme.color.gray_4};
-    border-radius: 30px;
-    height: 6px;
-`;
-
-const ProgressBarFill = styled.div`
-    background-color: ${theme.color.blue_11};
-    border-radius: 30px;
-    width: ${props=>props.width}%;
-    height: 100%;
-`;
-
-const ProgressBar = props=>{
-    const {amount, capacity} = props;
-    const percentage = _.clamp(amount/capacity * 100, 0, 100);
-    const percentageFmt = percentage.toFixed(2);
-    return <ProgressBarWrapper>
-      <ProgressBarFill width={percentageFmt}/>
-    </ProgressBarWrapper>;
-};
-ProgressBar.propTypes = {
-    amount: PT.number.isRequired,
-    capacity: PT.number.isRequired,
-};
-
-export default ProgressBar;

package/src/tooltip.js

@@ -1,99 +0,0 @@
-// 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

@@ -1,270 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import _ from 'lodash';
-import icons from '@icons';
-import {css} from 'styled-components';
-
-export const theme = {
-    color: {
-        blue_1: '#FBFDFF',
-        blue_2: '#F5FAFF',
-        blue_3: '#EDF6FF',
-        blue_4: '#E1F0FF',
-        blue_5: '#CEE7FE',
-        blue_6: '#B7D9F8',
-        blue_7: '#96C7F2',
-        blue_8: '#5EB0EF',
-        blue_9: '#0091FF',
-        blue_10: '#0081F1',
-        blue_11: '#006ADC',
-        blue_12: '#00254D',
-        red_1: '#FFFCFC',
-        red_2: '#FFF8F8',
-        red_3: '#FFEFEF',
-        red_4: '#FFE5E5',
-        red_5: '#FDD8D8',
-        red_6: '#F9C6C6',
-        red_7: '#F3AEAF',
-        red_8: '#EB9091',
-        red_9: '#E5484D',
-        red_10: '#DC3D43',
-        red_11: '#CD2B31',
-        red_12: '#381316',
-        green_1: '#FAFEFD',
-        green_2: '#F1FCFA',
-        green_3: '#E7F9F5',
-        green_4: '#D9F3EE',
-        green_5: '#C7EBE5',
-        green_6: '#AFDFD7',
-        green_7: '#8DCEC3',
-        green_8: '#53B9AB',
-        green_9: '#12A594',
-        green_10: '#0E9888',
-        green_11: '#067A6F',
-        green_12: '#10302B',
-        yellow_1: '#FEFDFB',
-        yellow_2: '#FFF9ED',
-        yellow_3: '#FFF4D5',
-        yellow_4: '#FFECBC',
-        yellow_5: '#FFE3A2',
-        yellow_6: '#FFD386',
-        yellow_7: '#F3BA63',
-        yellow_8: '#EE9D2B',
-        yellow_9: '#FFB224',
-        yellow_10: '#FFA01C',
-        yellow_11: '#AD5700',
-        yellow_12: '#4E2009',
-        white: '#FFFFFF',
-        gray_1: '#FBFCFD',
-        gray_2: '#F8F9FA',
-        gray_3: '#F1F3F5',
-        gray_4: '#ECEEF0',
-        gray_5: '#E6E8EB',
-        gray_6: '#DFE3E6',
-        gray_7: '#D7DBDF',
-        gray_8: '#C1C8CD',
-        gray_9: '#889096',
-        gray_10: '#7E868C',
-        gray_11: '#687076',
-        gray_11_25: '#3A3F42',
-        gray_11_50: '#2B2F31',
-        gray_11_75: '#202425',
-        gray_12: '#151718',
-        black: '#000000',
-        black_1: '#303B45',
-    },
-    font_family: {
-        sans: `'Inter', sans-serif`,
-        mono: `'Monaco', sans-serif`,
-    },
-    font_size: {xs: '12px', sm: '13px', md: '14px', lg: '18px', xl: '28px'},
-    font_weight: {regular: '400', semibold: '600'},
-    letter_spacing: {normal: '0em', wide: '0.02em'},
-    line_height: {none: '100%', snug: '125%', loose: '150%'},
-    spacing: {'00': '0px', '01': '2px', '02': '4px', '03': '8px', '04': '12px',
-        '05': '16px', '06': '24px', '07': '32px', '08': '40px',
-        '09': '48px', '10': '64px', '11': '72px'},
-    box_shadow: {
-        sm: '0px 0px 2px rgba(0, 0, 0, 0.04),'+
-            '0px 4px 24px rgba(0, 0, 0, 0.04)',
-        md: '0px 0px 2px rgba(0, 0, 0, 0.08),'
-            +'0px 8px 24px rgba(0, 0, 0, 0.08)',
-        lg: '0px 0px 2px rgba(0, 0, 0, 0.12),'
-            +'0px 0px 96px rgba(0, 0, 0, 0.16)',
-    }
-};
-
-export const colorNames = Object.keys(theme.color);
-
-export const iconNames = Object.keys(icons);
-
-export const toPixel = value=>`${value}px`;
-
-export const getCommonProps = props=>_.pickBy(props, (v, k)=>{
-    const inc = ['id', 'className', 'onClick'];
-    const starts = ['onMouse', 'aria-', 'data-'];
-    return inc.includes(k)||starts.some(s=>k.indexOf(s)==0);
-});
-
-export const getTypographyProps = props=>{
-    const {tag: as, font_family='sans', font_weight='regular', font_size,
-        line_height='none', letter_spacing='normal', italic, color,
-        no_wrap, underline} = props;
-    return {as, font_family, font_weight, font_size, line_height,
-        letter_spacing, italic, color, no_wrap, underline,
-        ...getCommonProps(props)};
-};
-
-export function fromTheme(propName, defaultValue){
-    return function(props){
-        let value = props[propName]??defaultValue;
-        if (value!=null)
-        {
-            if (propName.indexOf('padding')==0||propName.indexOf('margin')==0)
-                return theme.spacing[value]??value;
-            if (['font_weight', 'font_size', 'line_height', 'letter_spacing',
-                'color', 'box_shadow'].includes(propName))
-            {
-                return theme[propName][value];
-            }
-        }
-        return value;
-    };
-}
-
-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,
-    colorNames, iconNames, tooltipPlacements};

package/webpack.common.js

@@ -1,25 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint node:true*/
-
-const path = require('path');
-const {svgRule} = require('./webpack.shared.js');
-
-const alias = {
-    '@icons': path.resolve(__dirname, 'assets/icons'),
-};
-
-const common = {
-    module: {
-        rules: [
-            {
-                test: /src[\\/].+\.js$/,
-                exclude: /node_modules/,
-                use: ['babel-loader'],
-            },
-            svgRule,
-        ]
-    },
-    resolve: {alias},
-};
-
-module.exports = common;

package/webpack.config.js

@@ -1,28 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint node:true*/
-
-const {merge} = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-const production = {
-    entry: './src/index.js',
-    mode: 'production',
-    output: {
-        filename: 'uikit.umd.js',
-        library: {
-            name: 'uikit',
-            type: 'umd',
-            export: 'default',
-            umdNamedDefine: true,
-        },
-        globalObject: 'this',
-    },
-    externals: {
-        'react': 'react',
-        'react-dom': 'react-dom',
-    },
-};
-
-module.exports = ()=>{
-    return merge(common, production);
-};

package/webpack.shared.js

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