@luminati-io/uikit 1.4.0 → 1.6.0

package/dist/uikit.umd.js.LICENSE.txt

@@ -7,6 +7,15 @@
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
 
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+
 /** @license React v16.13.1
  * react-is.production.min.js
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminati-io/uikit",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "author": "Bright Data (http://brightdata.com)",
   "license": "ISC",
   "description": "brightdata's design system",
@@ -13,7 +13,9 @@
   ],
   "dependencies": {
     "@popperjs/core": "^2.11.6",
+    "babel-plugin-prismjs": "^2.1.0",
     "lodash": "^4.17.21",
+    "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
     "react-popper": "^2.3.0",
     "styled-components": "^5.3.6"

package/src/button/button.js

@@ -8,7 +8,6 @@ import {
     iconNames,
     toPixel,
     toButtonSize,
-    getCommonProps,
     getButtonColors,
     getIconProps,
 } from '../utils';
@@ -26,12 +25,13 @@ const Button = React.forwardRef((props, ref)=>{
         disabled,
         loading,
         loadingText,
+        ...rest
     } = props;
     const {isLeft, isRight, ...iconProps} = getIconProps('Button', props);
     return <StyledButton
       ref={ref}
       type="button"
-      {...getCommonProps(props)}
+      {...rest}
       variant={variant}
       size={size}
       disabled={loading||disabled}

package/src/code/code.js

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

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

package/src/icon.js

@@ -49,7 +49,7 @@ Icon.propTypes = {
     size: PT.oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl']),
 };
 
-export const StyledSvg = styled.svg`
+const StyledSvg = styled.svg`
     color: ${props=>props.color};
     ${props=>toIconSize(props.size)}
 `;

package/src/icon_button.js

@@ -5,16 +5,24 @@ import React from 'react';
 import styled, {css} from 'styled-components';
 import PT from 'prop-types';
 import utils from './utils';
-import Icon, {StyledSvg as IconSvg} from './icon';
+import Icon from './icon';
+import Tooltip from './tooltip';
 
-const {theme, toPixel, getCommonProps, iconNames} = utils;
+const {theme, toPixel, getCommonProps, iconNames, tooltipPlacements} = utils;
 
 const IconButton = React.forwardRef((props, ref)=>{
-    const {variant: $variant, disabled, icon} = props;
-    const p = {...getCommonProps(props), disabled, $variant};
-    return <StyledIconButton ref={ref} {...p} data-testid="icon_button">
-      <Icon name={icon} size="sm" />
-    </StyledIconButton>;
+    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'};
@@ -22,6 +30,8 @@ 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`
@@ -34,36 +44,30 @@ const StyledIconButton = styled.button`
     ${props=>{
         return css`
             background-color: ${theme.color.white};
-            border: ${props.$variant=='icon'?'0 none;':
+            border: ${props.variant=='icon'?'0 none;':
                 `1px solid ${theme.color.gray_6}`};
-            ${IconSvg} {
-                color: ${theme.color.gray_9};
-            }
+            [data-icon] { color: ${theme.color.gray_9}; }
         `;
     }}
     &:hover:not(:disabled) {
         background-color: ${theme.color.gray_2};
-        border: ${props=>props.$variant=='icon'?'0 none;':
+        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;':
+        border: ${props=>props.variant=='icon'?'0 none;':
             `1px solid ${theme.color.blue_4}`};
-        ${IconSvg} {
-            color: ${theme.color.blue_11};
-        }
+        [data-icon] { color: ${theme.color.blue_11}; }
     }
     &:disabled {
-        border: ${props=>props.$variant=='icon'?'0 none;':
+        border: ${props=>props.variant=='icon'?'0 none;':
             `1px solid ${theme.color.gray_7}`};
-        ${IconSvg} {
-            color: ${theme.color.gray_7};
-        }
+        [data-icon] { color: ${theme.color.gray_7}; }
         cursor: not-allowed;
     }
     ${props=>{
-        let w = props.$variant=='icon'?24:36;
+        let w = props.variant=='icon'?24:36;
         return css`
             width: ${toPixel(w)};
             height: ${toPixel(w)};

package/src/index.js

@@ -1,18 +1,23 @@
 // 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,
@@ -20,12 +25,15 @@ export {
     IconButton,
     Tooltip,
     withTooltip,
+    Code,
 };
 
 const UIKit = {
     Layout,
+    Link,
     Typography,
     Button,
+    Input,
     InfoChip,
     Progress,
     ProgressBar,
@@ -33,6 +41,7 @@ const UIKit = {
     IconButton,
     Tooltip,
     withTooltip,
+    Code,
 };
 
 export default UIKit;

package/src/input/index.js

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

package/src/input/toggle.js

@@ -0,0 +1,105 @@
+// 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/flex.js

@@ -1,11 +1,13 @@
 // 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 Flex = styled(Box)`
+const StyledFlex = styled(Box)`
     display: ${props=>props.inline ? 'inline-flex' : 'flex'};
     align-items: ${props=>props.align_items};
     align-content: ${props=>props.align_content};
@@ -17,7 +19,23 @@ const Flex = styled(Box)`
     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/link/index.js

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

package/src/link/link.js

@@ -0,0 +1,77 @@
+// 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/tooltip.js

@@ -5,7 +5,7 @@ import React, {useCallback, useState} from 'react';
 import {usePopper} from 'react-popper';
 import styled from 'styled-components';
 import PT from 'prop-types';
-import {theme} from './utils';
+import {theme, tooltipPlacements} from './utils';
 import typography from './Typography';
 
 const {Label} = typography;
@@ -26,6 +26,8 @@ const Tooltip = props=>{
             {name: 'offset', options: {offset: [0, 8]}},
         ],
     });
+    if (!tooltip)
+        return children;
     return <>
       <StyledTooltipReference ref={setReferenceElement}
         onMouseEnter={show} onMouseLeave={hide}>
@@ -39,9 +41,10 @@ const Tooltip = props=>{
       </StyledTooltipBody>
     </>;
 };
+Tooltip.defaultProps = {placement: 'top'};
 Tooltip.propTypes = {
     tooltip: PT.node,
-    placement: PT.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+    placement: PT.oneOf(tooltipPlacements),
 };
 
 export const withTooltip = (Comp, tooltipProps)=>function WithTooltip(props){

package/src/utils.js

@@ -149,10 +149,8 @@ export const getIconProps = (comp, opt)=>{
 };
 
 export const getLinkProps = opt=>{
-    const {as, to, href, newTab} = opt;
-    let p = {as, to};
-    if (href)
-        p = {...p, as: 'a', href};
+    const {as, href, newTab} = opt;
+    let p = {as, href};
     if (newTab)
         p = {...p, target: '_blank', rel: 'noopener noreferrer'};
     return p;
@@ -262,5 +260,11 @@ export const toButtonSize = size=>{
     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};
+    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,
+};