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

package/src/components/badge.tsx

@@ -1,148 +0,0 @@
-import React, { forwardRef } from 'react';
-import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
-
-import type { IconComponent, IconSize } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-import type { WithTransientProps } from '../type_utils.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
-import { Text } from './text/index.js';
-import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
-
-export type BadgeSize = 'regular' | 'small' | 'extra_small';
-export const BADGE_SIZES: BadgeSize[] = ['regular', 'small'];
-
-const BADGE_ICON_SIZES = {
-    regular: '16',
-    small: '12',
-    extra_small: '12',
-} satisfies Record<BadgeSize, IconSize>;
-
-const BADGE_TEXT_SIZES = {
-    regular: 'regular',
-    small: 'small',
-    extra_small: 'small',
-} satisfies Record<BadgeSize, SharedTextSize>;
-
-export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'] as const;
-type BadgeVariant = typeof BADGE_VARIANTS[number];
-
-type SharedBadgeProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
-export type BadgeProps = SharedBadgeProps & {
-    as?: Exclude<React.ElementType, 'a' | 'button'>;
-    size?: BadgeSize;
-    type?: SharedTextType;
-    variant?: BadgeVariant;
-    LeadingIcon?: IconComponent;
-};
-
-const badgeSizeStyle = {
-    regular: css`
-        padding: ${theme.space.space4} ${theme.space.space8};
-        border-radius: ${theme.radius.radius6};
-    `,
-    small: css`
-        height: 2rem;
-        padding: ${theme.space.space2} ${theme.space.space6};
-        border-radius: ${theme.radius.radius4};
-    `,
-    extra_small: css`
-        height: ${theme.space.space16};
-        padding: ${theme.space.space2} ${theme.space.space4};
-        border-radius: ${theme.radius.radius4};
-    `,
-} satisfies Record<BadgeSize, FlattenSimpleInterpolation>;
-
-const badgeVariantStyle = {
-    neutral: css`
-        color: ${theme.color.neutral.text};
-        fill: ${theme.color.neutral.text};
-        background: ${theme.color.neutral.background};
-        box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
-    `,
-    neutral_muted: css`
-        color: ${theme.color.neutral.text};
-        fill: ${theme.color.neutral.text};
-        background: ${theme.color.neutral.chipBackground};
-    `,
-    neutral_subtle: css`
-        color: ${theme.color.neutral.textSubtle};
-        fill: ${theme.color.neutral.textSubtle};
-        background: ${theme.color.neutral.backgroundSubtle};
-    `,
-    primary_black: css`
-        color: ${theme.color.primaryBlack.chipText};
-        fill: ${theme.color.primaryBlack.chipText};
-        background: ${theme.color.primaryBlack.background};
-    `,
-    primary_blue: css`
-        color: ${theme.color.primary.chipText};
-        fill: ${theme.color.primaryBlack.chipText};
-        background: ${theme.color.primary.background};
-    `,
-    success: css`
-        color: ${theme.color.success.chipText};
-        fill: ${theme.color.success.chipText};
-        background: ${theme.color.success.background};
-    `,
-    warning: css`
-        color: ${theme.color.warning.chipText};
-        fill: ${theme.color.warning.chipText};
-        background: ${theme.color.warning.background};
-    `,
-    danger: css`
-        color: ${theme.color.danger.chipText};
-        fill: ${theme.color.danger.chipText};
-        background: ${theme.color.danger.background};
-    `,
-} satisfies Record<BadgeVariant, FlattenSimpleInterpolation>;
-
-type StyledBadgeProps = WithTransientProps<
-    Required<Pick<BadgeProps, 'size' | 'variant'>>
->;
-
-const StyledBadge = styled(Box)<StyledBadgeProps>`
-    ${({ $size }) => badgeSizeStyle[$size]};
-    ${({ $variant }) => badgeVariantStyle[$variant]};
-
-  /* Static styles */
-    width: fit-content;
-    border: none;
-    outline: none;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    white-space: nowrap;
-    gap: ${theme.space.space4};
-`;
-
-/**
- * Component for displaying non-interactive chip descendant.
- */
-export const Badge = forwardRef(
-    ({
-        size = 'small',
-        type = 'body',
-        variant = 'neutral',
-        LeadingIcon,
-        children,
-        ...props
-    }: BadgeProps,
-    ref,
-    ) => {
-        return (
-            <StyledBadge
-                ref={ref}
-                $size={size}
-                $variant={variant}
-                {...props}
-            >
-                {LeadingIcon && <LeadingIcon size={BADGE_ICON_SIZES[size]} />}
-                {children && (<Text size={BADGE_TEXT_SIZES[size]} type={type} weight="medium">{children}</Text>)}
-            </StyledBadge>
-        );
-    },
-);
-
-Badge.displayName = 'Badge';

package/src/components/banner.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../design_system/theme.js';
-
-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

@@ -1,85 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { ArrowRightIcon } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-
-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}<ArrowRightIcon size="16" title="" titleId="" /></div>
-        </BlogArticleWrapper>
-    );
-}

package/src/components/box.tsx

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