@luminati-io/uikit 1.5.0 → 1.6.1

package/src/icon.js

@@ -1,58 +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 {theme, toPixel, colorNames, iconNames} from './utils';
-import icons from '@icons';
-
-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);
-};
-
-const Icon = React.forwardRef((props, ref)=>{
-    const {name, size, color} = props;
-    const ic = icons[name];
-    if (!ic)
-        return null;
-    return <StyledSvg
-      ref={ref}
-      size={size}
-      viewBox={ic.viewBox}
-      color={theme.color[color]}
-      data-icon={name}
-      >
-      <use href={`#${ic.id}`}/>
-    </StyledSvg>;
-});
-Icon.displayName = 'Icon';
-Icon.defaultProps = {size: 'md'};
-Icon.propTypes = {
-    name: PT.oneOf(iconNames).isRequired,
-    color: PT.oneOf(colorNames),
-    size: PT.oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl']),
-};
-
-const StyledSvg = styled.svg`
-    color: ${props=>props.color};
-    ${props=>toIconSize(props.size)}
-`;
-StyledSvg.displayName = 'StyledSvg';
-
-export default Icon;

package/src/icon_button.js

@@ -1,79 +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 Icon from './icon';
-import Tooltip from './tooltip';
-
-const {theme, toPixel, getCommonProps, iconNames, tooltipPlacements} = utils;
-
-const IconButton = React.forwardRef((props, ref)=>{
-    const {variant, disabled, icon, tooltip, tooltipPlacement} = props;
-    return <Tooltip tooltip={tooltip} placement={tooltipPlacement}>
-      <StyledIconButton
-        ref={ref}
-        {...getCommonProps(props)}
-        variant={variant}
-        disabled={disabled}
-        data-testid="icon_button"
-        >
-        <Icon name={icon} size="sm" />
-      </StyledIconButton>
-    </Tooltip>;
-});
-IconButton.displayName = 'IconButton';
-IconButton.defaultProps = {variant: 'icon-button'};
-IconButton.propTypes = {
-    variant: PT.oneOf(['icon', 'icon-button']),
-    icon: PT.oneOf(iconNames).isRequired,
-    disabled: PT.bool,
-    tooltip: PT.node,
-    tooltipPlacement: PT.oneOf(tooltipPlacements),
-};
-
-const StyledIconButton = styled.button`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    padding: 0;
-    cursor: pointer;
-    ${props=>{
-        return css`
-            background-color: ${theme.color.white};
-            border: ${props.variant=='icon'?'0 none;':
-                `1px solid ${theme.color.gray_6}`};
-            [data-icon] { color: ${theme.color.gray_9}; }
-        `;
-    }}
-    &:hover:not(:disabled) {
-        background-color: ${theme.color.gray_2};
-        border: ${props=>props.variant=='icon'?'0 none;':
-            `1px solid ${theme.color.gray_8}`};
-    }
-    &:active:not(:disabled) {
-        background-color: ${theme.color.blue_4};
-        border: ${props=>props.variant=='icon'?'0 none;':
-            `1px solid ${theme.color.blue_4}`};
-        [data-icon] { color: ${theme.color.blue_11}; }
-    }
-    &:disabled {
-        border: ${props=>props.variant=='icon'?'0 none;':
-            `1px solid ${theme.color.gray_7}`};
-        [data-icon] { color: ${theme.color.gray_7}; }
-        cursor: not-allowed;
-    }
-    ${props=>{
-        let w = props.variant=='icon'?24:36;
-        return css`
-            width: ${toPixel(w)};
-            height: ${toPixel(w)};
-        `;
-    }}
-`;
-StyledIconButton.displayName = 'StyledIconButton';
-
-export default IconButton;

package/src/index.js

@@ -1,44 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-import {Button} from './button';
-import Input from './input';
-import Typography from './Typography';
-import InfoChip from './infochip';
-import Layout from './layout';
-import {Link} from './link';
-import {Progress, ProgressBar} from './progress';
-import Icon from './icon';
-import IconButton from './icon_button';
-import Tooltip, {withTooltip} from './tooltip';
-
-export {
-    Layout,
-    Link,
-    Typography,
-    Button,
-    Input,
-    InfoChip,
-    Progress,
-    ProgressBar,
-    Icon,
-    IconButton,
-    Tooltip,
-    withTooltip,
-};
-
-const UIKit = {
-    Layout,
-    Link,
-    Typography,
-    Button,
-    Input,
-    InfoChip,
-    Progress,
-    ProgressBar,
-    Icon,
-    IconButton,
-    Tooltip,
-    withTooltip,
-};
-
-export default UIKit;

package/src/infochip.js

@@ -1,57 +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 {theme, iconNames, getCommonProps} from './utils';
-import Flex from './layout/flex';
-import typography from './Typography';
-import Icon from './icon';
-
-const {Label} = typography;
-
-const InfoChipWrapper = styled(Flex).attrs({
-    align_items: 'center',
-    gap: theme.spacing['02'],
-    padding: `${theme.spacing['02']} ${theme.spacing['04']}`,
-})`
-    background-color: ${props=>props.color&&theme.color[props.color]};
-    border-radius: 24px;
-    width: fit-content;
-`;
-
-const InfoChip = props=>{
-    const {variant, text, icon} = props;
-    const bgColors = {
-        default: 'gray_3',
-        success: 'green_3',
-        alert: 'red_3',
-        warning: 'yellow_3',
-        info: 'blue_3',
-    };
-    const bgColor = bgColors[variant] || bgColors.default;
-    const colors = {
-        default: 'gray_11_50',
-        success: 'green_11',
-        alert: 'red_11',
-        warning: 'yellow_11',
-        info: 'blue_11',
-    };
-    const color = colors[variant] || colors.default;
-    const commonProps = getCommonProps(props);
-    return <InfoChipWrapper color={bgColor} {...commonProps}>
-      {icon && <Icon size="xxs" color={color} name={icon}/>}
-      <Label variant="xs" color={color}>{text}</Label>
-    </InfoChipWrapper>;
-};
-InfoChip.displayName = 'InfoChip';
-InfoChip.defaultProps = {variant: 'default'};
-InfoChip.propTypes = {
-    variant: PT.oneOf(['default', 'success', 'alert', 'warning', 'info']),
-    text: PT.string,
-    icon: PT.oneOf(iconNames),
-};
-
-export default InfoChip;

package/src/input/index.js

@@ -1,6 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import Toggle from './toggle';
-
-export default {Toggle};

package/src/input/toggle.js

@@ -1,105 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import React, {useCallback} from 'react';
-import styled from 'styled-components';
-import PT from 'prop-types';
-import {theme, toPixel, getCommonProps} from '../utils';
-import typography from '../Typography';
-
-const {Label} = typography;
-
-const Toggle = props=>{
-  const {value, label, disabled, size, onChange} = props;
-  const handleChange = useCallback(evt=>{
-      const {checked} = evt.target;
-      onChange?.(checked, evt);
-  }, [onChange]);
-  const color = disabled?value?'gray-11':'gray-9':
-      value?'gray-11-50':'gray-11';
-  return <ToggleLabel {...getCommonProps(props)} $size={size}>
-    <ToggleInput $size={size} checked={value} onChange={handleChange}
-      disabled={disabled} />
-    {label&&<Label variant="sm" tag="span" color={color} no_wrap>
-      {label}
-    </Label>}
-  </ToggleLabel>;
-};
-Toggle.displayName = 'Toggle';
-Toggle.defaultProps = {size: 'sm'};
-Toggle.propTypes = {
-  value: PT.bool,
-  label: PT.string,
-  disabled: PT.bool,
-  size: PT.oneOf(['xs', 'sm']),
-  onChange: PT.func,
-};
-
-const ToggleLabel = styled.label`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0;
-`;
-ToggleLabel.displayName = 'ToggleLabel';
-
-const ToggleInput = styled.input.attrs({type: 'checkbox'})`
-  && {
-      box-sizing: border-box;
-      width: ${props=>toPixel(props.$size=='xs'?32:44)};
-      height: ${props=>toPixel(props.$size=='xs'?16:20)};
-      display: flex;
-      align-items: center;
-      margin: 0;
-      padding: 0 1px;
-      vertical-align: top;
-      background-color: ${theme.color.gray_5};
-      border: 1px solid ${theme.color.gray_7};
-      border-radius: 25px;
-      outline: none;
-      outline-offset: 0;
-      cursor: pointer;
-      appearance: none;
-      transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);
-      &:hover {
-          background-color: ${theme.color.gray_7};
-          border-color: ${theme.color.gray_8};
-      }
-      &:focus {
-          outline: none;
-          outline-offset: 0;
-          background-color: ${theme.color.gray_9};
-          border-color: ${theme.color.gray_9};
-      }
-      &:checked {
-          background-color: ${theme.color.blue_11};
-          border-color: ${theme.color.blue_11};
-          &:hover {
-              background-color: ${theme.color.blue_10};
-              border-color: ${theme.color.blue_10};
-          }
-          &:focus {
-              background-color: ${theme.color.blue_11};
-              border-color: ${theme.color.blue_11};
-              outline: 3px solid ${theme.color.blue_5};
-          }
-      }
-  }
-  &::after {
-      content: "";
-      display: block;
-      width: ${props=>toPixel(props.$size=='xs'?12:16)};
-      height: ${props=>toPixel(props.$size=='xs'?12:16)};
-      border-radius: 50%;
-      background-color: ${theme.color.white};
-      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-      transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);
-  }
-  &:checked::after {
-      transform: translateX(${props=>toPixel(props.$size=='xs'?15:23)});
-  }
-`;
-ToggleInput.displayName = 'ToggleInput';
-
-export default Toggle;

package/src/layout/box.js

@@ -1,36 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import styled from 'styled-components';
-
-import {fromTheme} from '../utils';
-
-const Box = styled.div`
-    height: ${props=>props.height};
-    max-height: ${props=>props.max_height};
-    min-height: ${props=>props.min_height};
-    width: ${props=>props.width};
-    max-width: ${props=>props.max_width};
-    min-width: ${props=>props.min_width};
-    padding: ${fromTheme('padding')};
-    padding-top: ${fromTheme('padding_top')};
-    padding-right: ${fromTheme('padding_right')};
-    padding-bottom: ${fromTheme('padding_bottom')};
-    padding-left: ${fromTheme('padding_left')};
-    margin: ${fromTheme('margin')};
-    margin-top: ${fromTheme('margin_top')};
-    margin-right: ${fromTheme('margin_right')};
-    margin-bottom: ${fromTheme('margin_bottom')};
-    margin-left: ${fromTheme('margin_left')};
-    flex: ${props=>props.flex};
-    flex-grow: ${props=>props.flex_grow};
-    flex-shrink: ${props=>props.flex_shrink};
-    flex-basis: ${props=>props.flex_basis};
-    justify-self: ${props=>props.justify_self};
-    align-self: ${props=>props.align_self};
-    order: ${props=>props.order};
-    box-shadow: ${fromTheme('box_shadow')};
-`;
-Box.displayName = 'Box';
-
-export default Box;

package/src/layout/flex.js

@@ -1,41 +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 Box from './box';
-
-const StyledFlex = styled(Box)`
-    display: ${props=>props.inline ? 'inline-flex' : 'flex'};
-    align-items: ${props=>props.align_items};
-    align-content: ${props=>props.align_content};
-    justify-items: ${props=>props.justify_items};
-    justify-content: ${props=>props.justify_content};
-    flex-wrap: ${props=>props.flex_wrap};
-    flex-direction: ${props=>props.flex_direction};
-    gap: ${props=>props.gap};
-    row-gap: ${props=>props.row_gap};
-    column-gap: ${props=>props.column_gap};
-`;
-const Flex = props=>{
-    return <StyledFlex {...props}/>;
-};
-Flex.displayName = 'Flex';
-Flex.defaultProps = {flex_direction: 'row'};
-Flex.propTypes = {
-    inline: PT.bool,
-    align_items: PT.oneOf(['flex-start', 'center']),
-    align_content: PT.string,
-    justify_items: PT.string,
-    justify_content: PT.string,
-    flex_wrap: PT.string,
-    flex_direction: PT.oneOf(['row', 'row-reverse', 'column',
-        'column-reverse']),
-    gap: PT.string,
-    row_gap: PT.string,
-    column_gap: PT.string,
-};
-
-export default Flex;

package/src/layout/index.js

@@ -1,6 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-import Box from './box';
-import Flex from './flex';
-
-export default {Box, Flex};

package/src/link/index.js

@@ -1,6 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import Link from './link';
-
-export {Link};

package/src/link/link.js

@@ -1,84 +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 {
-    theme,
-    iconNames,
-    toPixel,
-    getCommonProps,
-    getIconProps,
-    getLinkProps,
-} from '../utils';
-import typography from '../Typography';
-import Icon from '../icon';
-
-const {Typography, Label} = typography;
-
-const Link = React.forwardRef((props, ref)=>{
-    const {text, variant, size, icon} = props;
-    const {isLeft, isRight, ...iconProps} = getIconProps('Link', props);
-    const labelVariant = {lg: 'lg', sm: 'xs'}[size]||'base';
-    return <StyledLink
-      ref={ref}
-      {...getCommonProps(props)}
-      {...getLinkProps(props)}
-      variant={variant}
-      size={size}
-      noIcon={!icon}
-      >
-      {isLeft&&<Icon {...iconProps}/>}
-      <Label variant={labelVariant} no_wrap>{text}</Label>
-      {isRight&&<Icon {...iconProps}/>}
-    </StyledLink>;
-});
-Link.displayName = 'Link';
-Link.defaultProps = {
-    variant: 'primary',
-    size: 'md',
-    iconPlacement: 'left',
-};
-Link.propTypes = {
-    text: PT.string.isRequired,
-    variant: PT.oneOf(['primary', 'secondary']),
-    size: PT.oneOf(['sm', 'md', 'lg']),
-    icon: PT.oneOf(iconNames),
-    iconPlacement: PT.oneOf(['left', 'right']),
-    href: PT.string,
-    newTab: PT.bool,
-};
-
-const StyledLink = styled.a`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    background: 0 none;
-    border: 0 none;
-    padding: 0;
-    gap: ${props=>toPixel(props.size=='lg'?8:4)};
-    ${Typography} {
-        color: ${props=>props.variant=='primary'?
-            theme.color.blue_11:theme.color.gray_11_50};
-        text-decoration: ${props=>props.variant=='secondary'&&
-            props.noIcon?'underline':'none'};
-    }
-    [data-icon] {
-        color: ${props=>props.variant=='primary'?
-            theme.color.blue_11:theme.color.gray_11_50};
-    }
-    &:hover {
-        ${Typography} {
-            color: ${theme.color.blue_11};
-            text-decoration: ${props=>props.variant=='secondary'&&
-                props.noIcon?'underline':'none'};
-        }
-        [data-icon] { color: ${theme.color.blue_11}; }
-    }
-    &:hover, :visited, :focus { text-decoration: none; }
-`;
-StyledLink.displayName = 'StyledLink';
-
-export default Link;

package/src/progress/index.js

@@ -1,7 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import Progress from './progess';
-import ProgressBar from './progress_bar';
-
-export {Progress, ProgressBar};

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;