@apify/ui-library 0.71.1-featcolortokens-178953.56 → 0.71.1-featcolortokens-178953.63

package/src/components/button.tsx

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

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

@@ -1,96 +0,0 @@
-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>
-    );
-};

package/src/components/code/code_block/code_block.styled.tsx

@@ -1,180 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../../design_system/theme.js';
-import { Box } from '../../box.js';
-import type { SharedTextProps, SharedTextSize } from '../../text/text_shared.js';
-
-export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
-    $fullWidth?: boolean;
-    $fullHeight?: string;
-    $showLineNumbers?: boolean;
-}
-
-export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`
-    background-color: ${theme.color.neutral.backgroundMuted} !important;
-    border: 1px solid ${theme.color.neutral.border};
-    border-radius: ${theme.radius.radius12};
-    overflow: hidden;
-
-    width: 100%;
-    ${({ $fullWidth }) => !$fullWidth && css`max-width: 860px;`}
-    ${({ $fullHeight }) => !$fullHeight && css`max-height: 600px;`}
-
-    background-color: transparent;
-    position: relative;
-`;
-
-export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
-    $hasHeader: boolean;
-    $gradientRotation?: number;
-    $highlightLines?: number[];
-    $hasActionButton?: boolean;
-    $hasTabs?: boolean;
-    $fullWidth?: boolean;
-    $showLineNumbers?: boolean;
-    $fullHeight?: boolean;
-    size?: SharedTextSize,
-}>`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 266px;
-
-    .CodeBlock-Header {
-        padding-top: 7px; /* only 7 due to transform translateY(1px) */
-        gap: ${theme.space.space4};
-        background-color: ${theme.color.neutral.backgroundSubtle};
-        border-bottom: 1px solid ${theme.color.neutral.border};
-        z-index: 3;
-        position: relative;
-        display: flex;
-        height: 4rem;
-
-        .CodeBlock-HeaderTitle {
-            margin-left: ${theme.space.space16};
-            margin-bottom: ${theme.space.space8};
-            margin-top: 0.5rem;
-        }
-
-        .CodeBlock-HeaderTabsWrapper {
-            display: flex;
-            transform: translateY(1px);
-            padding-right: ${theme.space.space32};
-            padding-left: ${theme.space.space8};
-            overflow-x: auto;
-            overflow-y: hidden;
-            gap: ${theme.space.space4};
-
-            margin-right: ${({ $hasActionButton }) => ($hasActionButton ? '128' : '20')}px;
-
-            .CodeBlock-Tab {
-                border-radius: ${theme.radius.radius8};
-                background-color: transparent;
-                border: 1px solid transparent;
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-                border-bottom: none;
-                cursor: pointer;
-                height: 3.2rem;
-                max-width: 26rem;
-
-                color: ${theme.color.neutral.textMuted};
-
-                text-align: center;
-                white-space: nowrap;
-
-                padding: 0.2rem ${theme.space.space8} 0.6rem ${theme.space.space8};
-                p {
-                    padding-top: 0.2rem;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-
-
-                &.selected {
-                    color: ${theme.color.neutral.text};
-                    border: 1px solid ${theme.color.neutral.border};
-                    background-color: ${theme.color.neutral.backgroundMuted};
-                    border-bottom: none;
-                    padding: 0.6rem ${theme.space.space8};
-                    p {
-                        padding-top: 0;
-                    }
-                }
-
-                &:hover {
-                    border: 1px solid ${theme.color.neutral.border};
-                    border-bottom: none;
-                    text-decoration: none;
-                }
-
-                &::after {
-                    /* ensures same width of text when switching tabs and making it bold */
-                    ${theme.typography.shared.tablet.bodyMStrong}
-                    display: block;
-                    content: attr(title);
-                    font-weight: bold;
-                    height: 0px;
-                    color: transparent;
-                    overflow: hidden;
-                    visibility: hidden;
-                }
-            }
-        }
-    }
-
-
-    .CodeBlock-TopRightActionsWrapper {
-        position: absolute;
-        top: 0;
-        right: 0;
-        ${({ $hasHeader }) => ($hasHeader
-        ? css`
-            padding-top: 6px;
-            padding-right: ${theme.space.space8};`
-        : css`
-            padding-top: ${theme.space.space16};
-            padding-right: ${theme.space.space16};`)}
-
-        display: flex;
-        gap: ${theme.space.space8};
-        z-index: 3;
-        height: 3.9rem;
-
-        ${({ $hasHeader }) => $hasHeader && css`
-                padding-left: ${theme.space.space32};
-                background: linear-gradient(
-                    to right,
-                    transparent,
-                    ${theme.color.neutral.backgroundSubtle} 20px
-                );
-            `}
-    }
-
-    .CodeBlock-Gradient {
-        right: 0px;
-        bottom: 0px;
-
-        aspect-ratio: 1/1;
-        height: 250%;
-
-        transform: translate(50%, 70%) rotate(${({ $gradientRotation }) => $gradientRotation ?? 0}deg) scaleX(-1);
-    }
-
-    .CodeBlock-HederDotsWrapper {
-        display: flex;
-        padding: ${theme.space.space8};
-        align-items: flex-start;
-        gap: ${theme.space.space8};
-        margin-bottom: 0.5rem;
-        margin-left: ${theme.space.space8};
-        background: transparent;
-
-        .CodeBlock-HeaderDot {
-            width: 1.2rem;
-            height: 1.2rem;
-            border-radius: 50%;
-            background-color: ${theme.color.neutral.iconSubtle};
-        }
-    }
-`;