@apify/ui-library 0.71.1-featcolortokens-178953.58 → 0.71.1-featcolortokens-178953.67

package/src/components/box.tsx

@@ -0,0 +1,127 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../design_system/theme.js';
+import type { Size } from '../design_system/tokens/index.js';
+import type { WithTransientProps } from '../type_utils.js';
+
+type ExtendedSize = Size | 'none' | 'auto';
+
+export interface MarginSpacingProps {
+    m?: ExtendedSize,
+    mt?: ExtendedSize,
+    mb?: ExtendedSize,
+    ml?: ExtendedSize,
+    mr?: ExtendedSize,
+    mx?: ExtendedSize,
+    my?: ExtendedSize,
+}
+
+export interface PaddingSpacingProps {
+    p?: ExtendedSize,
+    pt?: ExtendedSize,
+    pb?: ExtendedSize,
+    pl?: ExtendedSize,
+    pr?: ExtendedSize,
+    px?: ExtendedSize,
+    py?: ExtendedSize,
+}
+
+type SharedBoxProps = {
+    children?: React.ReactNode,
+    className?: string,
+    style?: React.CSSProperties
+    onClick?: (e: React.MouseEvent) => void,
+    id?: string,
+}
+
+// This should be renamed - these props are global for any element not just Boxes
+export type RegularBoxProps = SharedBoxProps & { as?: React.ElementType };
+
+type OlBoxProps = SharedBoxProps & { as: 'ol', start?: number };
+
+/** Combines together RegularBoxProps and props for specific elements. */
+type AnyBoxProps = RegularBoxProps | OlBoxProps;
+
+export type BoxProps = MarginSpacingProps & PaddingSpacingProps & AnyBoxProps;
+
+const getSizeValue = (token?: ExtendedSize) => {
+    if (!token || token === 'none') return 0;
+    if (token === 'auto') return 'auto';
+    return theme.space[token] || 0;
+};
+
+const StyledBox = styled.div<WithTransientProps<MarginSpacingProps & PaddingSpacingProps>>`
+    ${({ $mt, $my, $m }) => ($mt || $my || $m) && css`
+        margin-top: ${getSizeValue($mt || $my || $m)};
+    `}
+
+    ${({ $mb, $my, $m }) => ($mb || $my || $m) && css`
+        margin-bottom: ${getSizeValue($mb || $my || $m)};
+    `}
+
+    ${({ $mr, $mx, $m }) => ($mr || $mx || $m) && css`
+        margin-right: ${getSizeValue($mr || $mx || $m)};
+    `}
+
+    ${({ $ml, $mx, $m }) => ($ml || $mx || $m) && css`
+        margin-left: ${getSizeValue($ml || $mx || $m)};
+    `}
+
+    ${({ $pt, $py, $p }) => ($pt || $py || $p) && css`
+        padding-top: ${getSizeValue($pt || $py || $p)};
+    `}
+
+    ${({ $pb, $py, $p }) => ($pb || $py || $p) && css`
+        padding-bottom: ${getSizeValue($pb || $py || $p)};
+    `}
+
+    ${({ $pr, $px, $p }) => ($pr || $px || $p) && css`
+        padding-right: ${getSizeValue($pr || $px || $p)};
+    `}
+
+    ${({ $pl, $px, $p }) => ($pl || $px || $p) && css`
+        padding-left: ${getSizeValue($pl || $px || $p)};
+    `}
+`;
+// This component should work as a base component for all low level components (Heading, Message, Card, ...) to make it easy to define spacing.
+// Right now, it's quite common to define some sort of spacing on these components already using css. Card = styled.div`margin-bottom: theme.space.space8`
+// We should get rid of it and define it using props for Box component Card = styled(Box).attrs({mb: 'space8'})
+export const Box = forwardRef<HTMLElement, BoxProps>(({
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    mx,
+    my,
+    p,
+    pt,
+    pb,
+    pl,
+    pr,
+    px,
+    py,
+    as,
+    ...rest
+}: BoxProps, ref) => (
+    <StyledBox
+        $m={m}
+        $mt={mt}
+        $mb={mb}
+        $ml={ml}
+        $mr={mr}
+        $mx={mx}
+        $my={my}
+        $p={p}
+        $pt={pt}
+        $pb={pb}
+        $pl={pl}
+        $pr={pr}
+        $px={px}
+        $py={py}
+        as={as}
+        ref={ref}
+        {...rest}
+    />
+));

package/src/components/button.tsx

@@ -0,0 +1,305 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ExternalLinkIcon } from '@apify/ui-icons';
+
+import { theme } from '../design_system/theme.js';
+import { type WithRequired, type WithTransientProps } from '../type_utils.js';
+import { useSharedUiDependencies } from '../ui_dependency_provider.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
+import { isUrlExternal, Link, type LinkProps } from './link.js';
+
+type ButtonSize = 'medium' | 'small';
+type ButtonColor = 'default' | 'success' | 'danger';
+type ButtonVariant = 'primary' | 'secondary' | 'text';
+
+export interface TransientButtonProps {
+    size?: ButtonSize;
+    color?: ButtonColor;
+    variant?: ButtonVariant;
+}
+
+export interface RegularButtonProps {
+    trackingId?: string,
+    trackingData?: object,
+    LeftIcon?: React.ElementType,
+    RightIcon?: React.ElementType,
+    disabled?: boolean;
+}
+
+// Props shared for both types of the button
+export type CommonButtonProps = RegularButtonProps & TransientButtonProps & MarginSpacingProps;
+// Regular button must have onClick defined
+export type ButtonProps = CommonButtonProps & WithRequired<RegularBoxProps, 'onClick'>;
+// OR it can pass to to become anchor link - in that case onClick is not needed
+export type AnchorButtonProps = CommonButtonProps & RegularBoxProps & LinkProps;
+
+// typeguard to distinguish between the two options for props
+function isAnchorButton(props: ButtonProps | AnchorButtonProps): props is AnchorButtonProps {
+    return (props as AnchorButtonProps).to !== undefined;
+}
+
+type ButtonColorCombinations = {
+    [Type in ButtonVariant]: {
+        [Size in ButtonColor]: {
+            textColor: string,
+            borderColor: string
+            backgroundColor: string,
+
+            // hover & active state affects both border & background.
+            hoverColor?: string,
+            activeColor?: string,
+            actionTextColor?: string,
+
+            // only exception is primary outlined button
+            actionBorderColor?: string
+        }
+    };
+};
+
+type ButtonSizeCombinations = {
+    [Size in ButtonSize]: {
+        fontSize: number,
+        horizontalPadding: number,
+        height: number,
+    };
+};
+
+const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
+    primary: {
+        default: {
+            textColor: theme.color.neutral.backgroundSubtle,
+            backgroundColor: theme.color.primary.action,
+            borderColor: theme.color.primary.action,
+            hoverColor: theme.color.primary.actionHover,
+            activeColor: theme.color.primary.actionActive,
+        },
+        success: {
+            textColor: theme.color.neutral.backgroundSubtle,
+            backgroundColor: theme.color.success.action,
+            borderColor: theme.color.success.action,
+            hoverColor: theme.color.success.actionHover,
+            activeColor: theme.color.success.actionActive,
+        },
+        danger: {
+            textColor: theme.color.neutral.backgroundSubtle,
+            backgroundColor: theme.color.danger.action,
+            borderColor: theme.color.danger.action,
+            hoverColor: theme.color.danger.actionHover,
+            activeColor: theme.color.danger.actionActive,
+        },
+    },
+    secondary: {
+        default: {
+            textColor: theme.color.neutral.text,
+            backgroundColor: theme.color.neutral.backgroundMuted,
+            borderColor: theme.color.neutral.border,
+            hoverColor: theme.color.neutral.actionSecondaryHover,
+            activeColor: theme.color.neutral.actionSecondaryActive,
+            actionBorderColor: theme.color.neutral.border,
+        },
+        success: {
+            textColor: theme.color.success.text,
+            backgroundColor: theme.color.neutral.backgroundMuted,
+            borderColor: theme.color.neutral.border,
+            hoverColor: theme.color.success.actionHover,
+            activeColor: theme.color.success.actionActive,
+            actionTextColor: theme.color.neutral.background,
+        },
+        danger: {
+            textColor: theme.color.danger.text,
+            backgroundColor: theme.color.neutral.backgroundMuted,
+            borderColor: theme.color.neutral.border,
+            hoverColor: theme.color.danger.actionHover,
+            activeColor: theme.color.danger.actionActive,
+            actionTextColor: theme.color.neutral.background,
+        },
+    },
+    text: {
+        default: {
+            textColor: theme.color.neutral.text,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+            // TODO: Not sure about these
+            hoverColor: theme.color.neutral.hover,
+            activeColor: theme.color.neutral.actionSecondaryActive,
+        },
+        success: {
+            textColor: theme.color.success.text,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+            hoverColor: theme.color.success.backgroundSubtleHover,
+            activeColor: theme.color.success.backgroundSubtleActive,
+        },
+        danger: {
+            textColor: theme.color.danger.text,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+            hoverColor: theme.color.danger.backgroundSubtleHover,
+            activeColor: theme.color.danger.backgroundSubtleActive,
+        },
+    },
+};
+
+export const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations = {
+    medium: {
+        fontSize: 14,
+        height: 36,
+        horizontalPadding: 12,
+    },
+    small: {
+        fontSize: 14,
+        height: 28,
+        horizontalPadding: 8,
+    },
+};
+
+export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color: ButtonColor = 'default') => {
+    const {
+        backgroundColor,
+        borderColor,
+        textColor,
+        actionTextColor,
+        activeColor,
+        hoverColor,
+        actionBorderColor,
+    } = BUTTON_COLOR_VARIANTS_CSS[variant][color];
+
+    return css`
+        color: ${textColor};
+        background-color: ${backgroundColor};
+        border-color: ${borderColor};
+
+        &:hover {
+            color: ${actionTextColor || textColor};
+            background-color: ${hoverColor};
+            border-color: ${actionBorderColor || hoverColor};
+        }
+
+        &:active {
+            color: ${actionTextColor || textColor};
+            background-color: ${activeColor};
+            border-color: ${actionBorderColor || activeColor};
+        }
+
+        &:disabled {
+            color: ${theme.color.neutral.textDisabled};
+            background-color: ${theme.color.neutral.disabled};
+            border-color: ${variant === 'text' ? 'transparent' : theme.color.neutral.disabled};
+
+            cursor: default;
+        }
+    `;
+};
+
+export const getButtonSizeStyles = (size: ButtonSize = 'medium') => {
+    const {
+        fontSize,
+        height,
+        horizontalPadding,
+    } = BUTTON_SIZE_VARIANTS_CSS[size];
+
+    return css`
+        height: ${height}px;
+        font-size: ${fontSize}px;
+        /* We just want to ensure padding on the sides. Height is set the the hard way for simplicity */
+        padding: 0 ${horizontalPadding}px;
+    `;
+};
+
+const StyledButton = styled(Box)<WithTransientProps<TransientButtonProps>>`
+    /* Basic positioning */
+    display: inline-flex;
+    align-items: center;
+    /* NOT sure about this. It needs to be set when we want 100% width button */
+    /* Maybe we can add block property */
+    justify-content: center;
+    gap: ${theme.space.space8};
+
+    /* Basic styles */
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: border-color ${theme.transition.fastEaseOut}, background-color ${theme.transition.fastEaseOut};
+
+    /* Border is always defined, but it can be set to transparent */
+    border-style: solid;
+    border-width: 1px;
+    border-radius: ${theme.radius.radius6};
+    border-color: transparent;
+
+    /* Colors */
+    ${(props) => getButtonColorStyles(props.$variant, props.$color)}
+
+    /* Paddings & font size */
+    ${(props) => getButtonSizeStyles(props.$size)}
+`;
+
+export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((props, ref) => {
+    const {
+        as,
+        children,
+        size,
+        color,
+        variant,
+        LeftIcon,
+        RightIcon,
+        onClick,
+        trackingId,
+        trackingData,
+        ...rest
+    } = props;
+
+    const {
+        trackClick,
+        windowLocationHost,
+    } = useSharedUiDependencies();
+    const trackedOnClick = (e: React.MouseEvent) => {
+        if (trackClick && trackingId) trackClick(trackingId, trackingData);
+        if (onClick) onClick(e);
+    };
+
+    const iconSize = size === 'medium' ? '16' : '12';
+
+    if (isAnchorButton(props)) {
+        const isExternal = isUrlExternal(props.to, windowLocationHost);
+        const EffectiveRightIcon = (isExternal && !props.hideExternalIcon) ? ExternalLinkIcon : RightIcon;
+
+        return (
+            <StyledButton
+                $size={size}
+                $color={color}
+                $variant={variant}
+                // If anchor is undefined, we just render it as a regular button
+                forwardedAs={props.disabled ? 'button' : Link}
+                ref={ref}
+                onClick={trackedOnClick}
+                to={props.to}
+                {...rest}
+                // If we want to show external icon, we use button's slot for icon
+                hideExternalIcon={true}
+            >
+                {LeftIcon && <LeftIcon size={iconSize} />}
+                {children}
+                {EffectiveRightIcon && <EffectiveRightIcon size={iconSize} />}
+            </StyledButton>
+        );
+    }
+
+    return (
+        <StyledButton
+            $size={size}
+            $color={color}
+            $variant={variant}
+            forwardedAs={ as || 'button'}
+            ref={ref}
+            onClick={trackedOnClick}
+            type='button'
+            {...rest}
+        >
+            {LeftIcon && <LeftIcon size={iconSize} />}
+            {children}
+            {RightIcon && <RightIcon size={iconSize} />}
+        </StyledButton>
+    );
+});

package/src/components/chip.tsx

@@ -0,0 +1,128 @@
+import clsx from 'clsx';
+import type { FC } from 'react';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { ValueOf } from '@apify-packages/types';
+
+import { theme } from '../design_system/theme.js';
+import type { RegularBoxProps } from './box.js';
+
+const CHIP_SIZES = {
+    EXTRA_SMALL: 'XS',
+    SMALL: 'S',
+    MEDIUM: 'M',
+    LARGE: 'L',
+} as const;
+type CHIP_SIZES = ValueOf<typeof CHIP_SIZES>;
+
+const CHIP_TYPES = {
+    DEFAULT: 'DEFAULT',
+    PRIMARY: 'PRIMARY',
+    SUCCESS: 'SUCCESS',
+    WARNING: 'WARNING',
+    DANGER: 'DANGER',
+} as const;
+type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
+
+export const classNames = {
+    BODY: 'Chip-body',
+};
+
+const chipSizeStyle = {
+    [CHIP_SIZES.EXTRA_SMALL]: css`
+        font-size: 12px;
+        line-height: 16px;
+        padding: 0 4px;
+        border-radius: 6px;
+    `,
+    [CHIP_SIZES.SMALL]: css`
+        font-size: 12px;
+        line-height: 16px;
+        padding: 2px 4px;
+        border-radius: 6px;
+    `,
+    [CHIP_SIZES.MEDIUM]: css`
+        font-size: 14px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `,
+    [CHIP_SIZES.LARGE]: css`
+        font-size: 16px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `,
+} satisfies Record<CHIP_SIZES, unknown>;
+
+const chipTypeStyle = {
+    [CHIP_TYPES.DEFAULT]: css`
+        color: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.chipBackground};
+    `,
+    [CHIP_TYPES.PRIMARY]: css`
+        color: ${theme.color.primary.chipText};
+        background: ${theme.color.primary.chipBackground};
+    `,
+    [CHIP_TYPES.SUCCESS]: css`
+        color: ${theme.color.success.chipText};
+        background: ${theme.color.success.chipBackground};
+    `,
+    [CHIP_TYPES.WARNING]: css`
+        color: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.chipBackground};
+    `,
+    [CHIP_TYPES.DANGER]: css`
+        color: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.chipBackground};
+    `,
+} satisfies Record<CHIP_TYPES, unknown>;
+
+const StyledChip = styled.span<{size: CHIP_SIZES, type: CHIP_TYPES, clickable: boolean}>`
+    ${({ size }) => chipSizeStyle[size]};
+    ${({ type }) => chipTypeStyle[type]};
+    /* Static styles */
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
+    gap: ${theme.space.space4};
+`;
+
+export type ChipProps = RegularBoxProps & {
+    type?: CHIP_TYPES
+    size?: CHIP_SIZES
+    icon?: React.ReactNode
+    clickable?: boolean
+}
+
+/**
+ * Component for displaying status and for labelling other components.
+ */
+export const Chip = forwardRef(({
+    type = CHIP_TYPES.DEFAULT,
+    size = CHIP_SIZES.MEDIUM,
+    icon,
+    children,
+    className,
+    ...passThroughProps
+}: ChipProps, ref) => {
+    const otherProps = { ...passThroughProps, type, size, className: clsx(className, classNames.BODY) };
+
+    return <StyledChip ref={ref} {...otherProps}>{children}{icon}</StyledChip>;
+});
+
+Chip.displayName = 'Chip';
+
+type SpecificChipProps = Omit<ChipProps, 'type'>
+
+export const PrimaryChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.PRIMARY} {...props} />;
+export const NeutralChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.DEFAULT} {...props} />;
+export const SuccessChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.SUCCESS} {...props} />;
+export const DangerChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.DANGER} {...props} />;
+export const WarningChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.WARNING} {...props} />;

package/src/components/code/action_button.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { CheckIcon, CopyIcon } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import { useCopyToClipboard } from '../../utils/index.js';
+import { Text } from '../text/index.js';
+
+interface StyledButtonProps {
+    $successStyle?: boolean;
+    $hasText?: boolean;
+}
+
+const StyledButton = styled.button<StyledButtonProps>`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius6};
+
+    cursor: pointer;
+
+    background: ${theme.color.neutral.backgroundMuted};
+    color: ${theme.color.neutral.icon};
+    &:hover {
+        background-color: ${theme.color.neutral.hover};
+    }
+
+    padding: ${theme.space.space4};
+    height: 2.8rem;
+    width: 2.8rem;
+
+    svg {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    ${({ $hasText }) => $hasText
+        && css`
+            width: auto;
+            padding: ${theme.space.space4} ${theme.space.space8};
+            p {
+                white-space: nowrap;
+            }
+        `}
+
+    ${({ $successStyle }) => $successStyle
+        && css`
+            background-color: ${theme.color.success.action};
+            color: ${theme.color.neutral.textOnPrimary};
+            border: none;
+            :active {
+                background-color: ${theme.color.success.actionActive};
+            }
+            :hover {
+                background-color: ${theme.color.success.action};
+            }
+        `}
+`;
+
+interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    successStyle?: boolean;
+}
+
+export const ActionButton = ({
+    successStyle,
+    children,
+    ...props
+}: ActionButtonProps) => {
+    const hasText = typeof children === 'string';
+
+    return (
+        <StyledButton
+            $successStyle={successStyle}
+            $hasText={hasText}
+            {...props}
+        >
+            {hasText ? <Text weight="bold">{children}</Text> : children}
+        </StyledButton>
+    );
+};
+
+interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    code: string;
+}
+
+export const CopyButton = ({ code, ...props }: CopyButtonProps) => {
+    const [isCopied, handleClick] = useCopyToClipboard({ text: code });
+    return (
+        <ActionButton onClick={handleClick} data-test='copy_to_clipboard' {...props}>
+            {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
+        </ActionButton>
+    );
+};