@luminati-io/uikit 1.6.0 → 1.6.1

package/src/code/code.js

@@ -1,127 +0,0 @@
-// LICENSE_CODE ZON
-'use strict'; /*jslint react:true*/
-
-import React, {useEffect} from 'react';
-import styled from 'styled-components';
-import Prism from 'prismjs';
-import PT from 'prop-types';
-import {theme} from '../utils';
-
-const Code = props=>{
-    const {text, lang} = props;
-    useEffect(()=>{
-        Prism.highlightAll();
-    }, [text, lang]);
-    return <CodeWrapper>
-      <code className={`language-${lang} content`}>{text}</code>
-    </CodeWrapper>;
-};
-Code.displayName = 'Code';
-Code.propTypes = {
-    text: PT.string,
-    // XXX davidg: config langs
-    lang: PT.string,
-};
-
-export default Code;
-
-const CodeWrapper = styled.pre`
-    &&& {
-        padding: 0;
-        font-family: ${theme.font_family.mono};
-        margin: 0;
-        border: none;
-        background-color: transparent;
-        width: 100%;
-        white-space: pre-wrap;
-        line-height: 1.5;
-        tab-size: 4;
-        text-align: left;
-        word-spacing: normal;
-        word-break: normal;
-        word-wrap: normal;
-        hyphens: none;
-        max-height: none;
-        code.content {
-            all: inherit;
-            color: ${theme.color.gray_8};
-            margin: 0;
-            padding: 0;
-            border: none;
-            background-color: transparent;
-            text-shadow: none;
-        }
-        ${'' /* prism selectors below */}
-        .token.comment,
-        .token.prolog,
-        .token.doctype,
-        .token.cdata {
-            color: slategray;
-        }
-
-        .token.punctuation {
-            color: #999;
-        }
-
-        .token.namespace {
-            opacity: .7;
-        }
-
-        .token.property,
-        .token.tag,
-        .token.boolean,
-        .token.constant,
-        .token.symbol,
-        .token.deleted {
-            color: #f8c555;
-        }
-
-        .token.selector,
-        .token.attr-name,
-        .token.string,
-        .token.char,
-        .token.builtin,
-        .token.inserted {
-            color: #7ec699;
-        }
-
-        .token.operator,
-        .token.entity,
-        .token.url,
-        .language-css .token.string,
-        .style .token.string {
-            color: #67cdcc;
-        }
-
-        .token.atrule,
-        .token.attr-value,
-        .token.keyword {
-            color: #cc99cd;
-        }
-
-        .token.function,
-        .token.number,
-        .token.class-name {
-            color: #f08d49;
-        }
-
-        .token.regex,
-        .token.important,
-        .token.variable {
-            color: #e90;
-        }
-
-        .token.important,
-        .token.bold {
-            font-weight: bold;
-        }
-        .token.italic {
-            font-style: italic;
-        }
-
-        .token.entity {
-            cursor: help;
-        }
-    }
-`;
-CodeWrapper.displayName = 'CodeWrapper';

package/src/code/index.js

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

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,47 +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';
-import {Code} from './code';
-
-export {
-    Layout,
-    Link,
-    Typography,
-    Button,
-    Input,
-    InfoChip,
-    Progress,
-    ProgressBar,
-    Icon,
-    IconButton,
-    Tooltip,
-    withTooltip,
-    Code,
-};
-
-const UIKit = {
-    Layout,
-    Link,
-    Typography,
-    Button,
-    Input,
-    InfoChip,
-    Progress,
-    ProgressBar,
-    Icon,
-    IconButton,
-    Tooltip,
-    withTooltip,
-    Code,
-};
-
-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,77 +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, 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, ...rest} = props;
-    const {isLeft, isRight, ...iconProps} = getIconProps('Link', props);
-    const labelVariant = {lg: 'lg', sm: 'xs'}[size]||'base';
-    return <StyledLink
-      ref={ref}
-      {...rest}
-      {...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};