@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/src/components/banner.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../design_system/theme';
+
+/* eslint-disable max-len */
+const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2285_34756)">
+    <g filter="url(#filter0_f_2285_34756)">
+    <path d="M-39.7702 191.085C-55.0622 193.205 -68.8864 201.311 -78.2029 213.621C-87.5194 225.932 -91.5654 241.438 -89.4512 256.731L-55.0077 502.652L89.8852 173L-39.7702 191.085Z" fill="url(#paint0_linear_2285_34756)"/>
+    </g>
+    <g filter="url(#filter1_f_2285_34756)">
+    <path d="M1267.53 398.062L1253.99 209.002C1252.85 193.626 1245.67 179.327 1234.01 169.234C1222.36 159.14 1207.18 154.073 1191.8 155.14C1190.5 155.19 1189.2 155.331 1187.92 155.564L1132 163.289L1254.84 438.685C1264.05 427.236 1268.59 412.721 1267.53 398.062Z" fill="url(#paint1_linear_2285_34756)"/>
+    </g>
+    <g filter="url(#filter2_f_2285_34756)">
+    <path d="M561 29.7691C570.917 30.4746 580.956 29.5571 590.142 27.1057L801.075 -28.7862L700.682 -170L561 29.7691Z" fill="url(#paint2_linear_2285_34756)"/>
+    </g>
+    </g>
+    <defs>
+    <filter id="filter0_f_2285_34756" x="-170" y="93" width="339.885" height="489.652" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
+    </filter>
+    <filter id="filter1_f_2285_34756" x="1052" y="75" width="295.683" height="443.686" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
+    </filter>
+    <filter id="filter2_f_2285_34756" x="481" y="-250" width="400.074" height="360" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
+    </filter>
+    <linearGradient id="paint0_linear_2285_34756" x1="-0.0574112" y1="173" x2="-0.0574112" y2="502.652" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#00FF85"/>
+    <stop offset="1" stop-color="#00FF47" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_2285_34756" x1="1146.02" y1="174.549" x2="1333.1" y2="293.915" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#00FFF0"/>
+    <stop offset="1" stop-color="#1672EB"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_2285_34756" x1="681.037" y1="-170" x2="681.037" y2="30" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#F5B315"/>
+    <stop offset="1" stop-color="#FF2CC4"/>
+    </linearGradient>
+    <clipPath id="clip0_2285_34756">
+    <rect width="1200" height="1791.08" rx="16" fill="white"/>
+    </clipPath>
+    </defs>
+</svg>
+`;
+
+interface BannerProps {
+    background?: string,
+    useGradientBackground?: boolean,
+    width?: string,
+    className?: string,
+    children: React.ReactNode,
+};
+
+const getBannerBackground = (background?: string, useGradientBackground?: boolean) => {
+    return css`
+            background-color: ${background || theme.color.neutral.backgroundSubtle};
+            ${useGradientBackground && `
+            background-image: url("data:image/svg+xml,${encodeURIComponent(BANNER_GRADIENT_BACKGROUND_SVG)}");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            `}
+        `;
+};
+
+const StyledBanner = styled.div<{ $background?: string, $useGradientBackground?: boolean, width?: string }>`
+    width: ${(props) => props.width || '100%'};
+    padding: ${theme.space.space40} ${theme.space.space80};
+    border-radius: ${theme.radius.radius16};
+
+    ${({ $background, $useGradientBackground }) => getBannerBackground($background, $useGradientBackground)};
+`;
+
+export const Banner: React.FC<BannerProps> = ({
+    useGradientBackground = true,
+    background,
+    children,
+    ...otherProps
+}) => (
+    <StyledBanner
+        $background={background}
+        $useGradientBackground={useGradientBackground}
+        {...otherProps}
+    >
+        {children}
+    </StyledBanner>
+);

package/src/components/blog_article.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ArrowRight16 } from '@apify/icons';
+
+import { theme } from '../design_system/theme';
+
+const classNames = {
+    IMAGE_WRAPPER: 'ImageWrapper',
+    TEXT: 'Text',
+    READ_POST: 'ReadPost',
+};
+
+const BlogArticleWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    &:hover {
+        .${classNames.READ_POST} {
+                color: ${theme.color.primary.action};
+        }
+    }
+
+    .${classNames.IMAGE_WRAPPER} {
+        margin-bottom: ${theme.space.space16};
+        border-radius: ${theme.radius.radius12};
+        border: 1px solid ${theme.color.neutral.backgroundSubtle};
+        aspect-ratio: 16/9;
+    }
+
+    .${classNames.TEXT} {
+        padding-bottom: ${theme.space.space16};
+        color: ${theme.color.neutral.text};
+        ${theme.typography.shared.mobile.titleL}
+
+        @media (min-width: ${theme.layout.tablet}) {
+            ${theme.typography.shared.tablet.titleL}
+        }
+
+        @media (min-width: ${theme.layout.desktop}) {
+            ${theme.typography.shared.desktop.titleL}
+        }
+    }
+
+    .${classNames.READ_POST} {
+        display: flex;
+        align-items: center;
+        gap: ${theme.space.space4};
+        color: ${theme.color.neutral.textMuted};
+        ${theme.typography.shared.mobile.titleM}
+
+        @media (min-width: ${theme.layout.tablet}) {
+            ${theme.typography.shared.tablet.titleM}
+        }
+
+        @media (min-width: ${theme.layout.desktop}) {
+            ${theme.typography.shared.desktop.titleM}
+        }
+
+
+        svg {
+            transition: margin-right .5s;
+        }
+
+        &:hover svg {
+            margin-right: ${theme.space.space4};
+        }
+    }
+`;
+
+interface BlogArticleProps {
+    imageNode: React.ReactNode;
+    title: string;
+    ctaTitle?: string;
+}
+
+export function BlogArticle({ imageNode, title, ctaTitle = 'Read more' }: BlogArticleProps) {
+    return (
+        <BlogArticleWrapper>
+            <div className={classNames.IMAGE_WRAPPER}>{imageNode}</div>
+            <div className={classNames.TEXT}>{title}</div>
+            <div className={classNames.READ_POST}>{ctaTitle}<ArrowRight16 title="" titleId="" /></div>
+        </BlogArticleWrapper>
+    );
+}

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';
+import type { Size } from '../design_system/tokens';
+import type { WithTransientProps } from '../type_utils';
+
+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,303 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ExternalLink16 } from '@apify/icons';
+
+import { theme } from '../design_system/theme';
+import { type WithRequired, type WithTransientProps } from '../type_utils';
+import { useSharedUiDependencies } from '../ui_dependency_provider';
+import { Box, type RegularBoxProps, type MarginSpacingProps } from './box';
+import { Link, isUrlExternal, type LinkProps } from './link';
+
+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);
+    };
+
+    if (isAnchorButton(props)) {
+        const isExternal = isUrlExternal(props.to, windowLocationHost);
+        const EffectiveRightIcon = (isExternal && !props.hideExternalIcon) ? ExternalLink16 : 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 />}
+                {children}
+                {EffectiveRightIcon && <EffectiveRightIcon />}
+            </StyledButton>
+        );
+    }
+
+    return (
+        <StyledButton
+            $size={size}
+            $color={color}
+            $variant={variant}
+            forwardedAs={ as || 'button'}
+            ref={ref}
+            onClick={trackedOnClick}
+            type='button'
+            {...rest}
+        >
+            {LeftIcon && <LeftIcon />}
+            {children}
+            {RightIcon && <RightIcon />}
+        </StyledButton>
+    );
+});