@apify/ui-library 1.138.1 → 1.138.2-featpublictasks-2f3d3c.52

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.138.1",
+    "version": "1.138.2-featpublictasks-2f3d3c.52+68e3cd48a51",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -20,14 +20,14 @@
         "type-check": "tsc --noEmit",
         "generate-theme": "node src/codemods/generate_typograpy_tokens_files.mjs  && pnpm run lint:fix",
         "build-color-tokens": "node src/design_system/colors/build_color_tokens.js",
-        "postpublish": "pnpm run clean"
+        "postpublish": "rimraf ./dist"
     },
     "//": [
         "Storybook for the components lives in a separate package ui-storybook.",
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.38.1",
+        "@apify/ui-icons": "^1.38.2-featpublictasks-2f3d3c.52+68e3cd48a51",
         "@floating-ui/react": "^0.27.19",
         "@floating-ui/react-dom": "^2.1.8",
         "@radix-ui/react-checkbox": "^1.3.3",
@@ -58,7 +58,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.353.1",
+        "@apify-packages/types": "^3.353.2-featpublictasks-2f3d3c.52+68e3cd48a51",
         "@storybook/react-vite": "^10.3.5",
         "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
@@ -72,5 +72,5 @@
         "src",
         "style"
     ],
-    "gitHead": "1c034549fdf20fd6d95643da8db6940cd850bfdc"
+    "gitHead": "68e3cd48a5189a18f916ad456f1f15d2767d3382"
 }

package/src/components/actor_example/actor_example.utils.ts

@@ -0,0 +1,52 @@
+import type { IconComponent } from '@apify/ui-icons';
+import { AnyIcon, BooleanIcon, MenuIcon, NumberIcon, ObjectIcon, TextIcon } from '@apify/ui-icons';
+
+import type { ActorExampleSchemaFieldType } from '@apify-packages/types';
+
+export type ActorExampleSchemaPropertyConfig = {
+    Icon: IconComponent;
+    title: string;
+    backgroundColor: string;
+    textColor: string;
+};
+
+/**
+ * Per-type display config used by the schema field components (badge icon, hover tooltip,
+ * background/text colors). The `var(--actor-schema-field-*)` references are declared on the
+ * `ActorExampleSchemaFieldBadgeWrapper` styled component itself (with a dark-mode override via
+ * `html[data-theme='dark'] &`), so the vars are scoped to the badge — no globals are injected.
+ */
+export const actorExampleSchemaPropertyMap: Record<ActorExampleSchemaFieldType, ActorExampleSchemaPropertyConfig> = {
+    string: {
+        Icon: TextIcon,
+        title: 'Text',
+        backgroundColor: 'var(--actor-schema-field-string-background)',
+        textColor: 'var(--actor-schema-field-string-text)',
+    },
+    number: {
+        Icon: NumberIcon,
+        title: 'Number',
+        backgroundColor: 'var(--actor-schema-field-number-background)',
+        textColor: 'var(--actor-schema-field-number-text)',
+    },
+    boolean: {
+        Icon: BooleanIcon,
+        title: 'Boolean',
+        backgroundColor: 'var(--actor-schema-field-boolean-background)',
+        textColor: 'var(--actor-schema-field-boolean-text)',
+    },
+    array: {
+        Icon: MenuIcon,
+        title: 'List',
+        backgroundColor: 'var(--actor-schema-field-array-background)',
+        textColor: 'var(--actor-schema-field-array-text)',
+    },
+    object: {
+        Icon: ObjectIcon,
+        title: 'Object',
+        backgroundColor: 'var(--actor-schema-field-object-background)',
+        textColor: 'var(--actor-schema-field-object-text)',
+    },
+};
+
+export const actorExampleSchemaPropertyDefaultIcon = AnyIcon;

package/src/components/actor_example/actor_example_avatar.tsx

@@ -0,0 +1,69 @@
+import { clsx } from 'clsx';
+import type React from 'react';
+import { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+
+const DEFAULT_SIZE = 36;
+
+export const actorExampleAvatarClassNames = {
+    ROOT: 'actor-example-avatar',
+};
+
+const ActorExampleAvatarWrapper = styled.img`
+    flex-shrink: 0;
+    object-fit: cover;
+`;
+
+export type ActorExampleAvatarProps = {
+    title?: string;
+    name: string;
+    pictureUrl?: string;
+    fallbackPictureUrl: string;
+    size?: number;
+    className?: string;
+};
+
+export const ActorExampleAvatar = ({
+    title,
+    name,
+    pictureUrl,
+    fallbackPictureUrl,
+    size = DEFAULT_SIZE,
+    className,
+}: ActorExampleAvatarProps) => {
+    const { generateProxyImageUrl } = useSharedUiDependencies();
+
+    // Mirrors apify-web's `<Image defaultSrc=…>` behaviour: if the primary src fails to load,
+    // swap in the fallback so the `<img>` element is always present.
+    const handlePictureError = useCallback(
+        (event: React.SyntheticEvent<HTMLImageElement>) => {
+            if (!event.currentTarget.src.endsWith(fallbackPictureUrl)) {
+                // eslint-disable-next-line no-param-reassign
+                event.currentTarget.src = fallbackPictureUrl;
+                // eslint-disable-next-line no-param-reassign
+                event.currentTarget.srcset = fallbackPictureUrl;
+            }
+        },
+        [fallbackPictureUrl],
+    );
+
+    const proxyPictureUrl = useMemo(() => {
+        if (!generateProxyImageUrl || !pictureUrl) return pictureUrl;
+        return generateProxyImageUrl(pictureUrl, { resize: { height: size * 2, width: size * 2 } });
+    }, [pictureUrl, generateProxyImageUrl, size]);
+
+    const src = proxyPictureUrl || fallbackPictureUrl;
+
+    return (
+        <ActorExampleAvatarWrapper
+            src={src}
+            alt={title ?? name}
+            width={size}
+            height={size}
+            className={clsx(actorExampleAvatarClassNames.ROOT, className)}
+            onError={handlePictureError}
+        />
+    );
+};

package/src/components/actor_example/actor_example_card.tsx

@@ -0,0 +1,149 @@
+import { clsx } from 'clsx';
+import styled from 'styled-components';
+
+import { ExternalLinkIcon } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import { Badge } from '../badge.js';
+import { Box } from '../box.js';
+import { Button } from '../button.js';
+import { Heading } from '../text/index.js';
+import { ActorExampleRunButton, ActorExampleRunButtonLightningIcon } from './actor_example_run_button.js';
+
+export const actorExampleCardClassNames = {
+    ROOT: 'actor-example-card',
+    CONTENT: 'actor-example-card__content',
+    BADGE: 'actor-example-card__badge',
+    TITLE: 'actor-example-card__title',
+    FOOTER: 'actor-example-card__footer',
+    RUN_BUTTON: 'actor-example-card__run-button',
+    DETAIL_BUTTON: 'actor-example-card__detail-button',
+};
+
+const ActorExampleCardWrapper = styled(Box)`
+    min-width: 0;
+    background-color: ${theme.color.neutral.background};
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius12};
+    overflow: hidden;
+
+    .${actorExampleCardClassNames.CONTENT} {
+        padding: ${theme.space.space16};
+        display: flex;
+        flex-direction: column;
+        gap: ${theme.space.space8};
+    }
+
+    .${actorExampleCardClassNames.BADGE} {
+        min-width: 0;
+        max-width: 100%;
+
+        span {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .${actorExampleCardClassNames.TITLE} {
+        min-height: 7.2rem; /* 3 lines of text with line-height 2.4rem */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+    }
+
+    .${actorExampleCardClassNames.FOOTER} {
+        padding: ${theme.space.space12} ${theme.space.space16};
+        background-color: ${theme.color.neutral.backgroundMuted};
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: ${theme.space.space4};
+    }
+
+    .${actorExampleCardClassNames.RUN_BUTTON}, .${actorExampleCardClassNames.DETAIL_BUTTON} {
+        min-width: 0;
+
+        span {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        svg {
+            flex-shrink: 0;
+        }
+    }
+`;
+
+export type ActorExampleCardProps = {
+    title: string;
+    badge?: string;
+    /** Owning actor's id — flows into the run button's analytics event. */
+    actorId: string;
+    runUrl: string;
+    runLabel: string;
+    /**
+     * Tracking element id for the run button (e.g. `actorInfo.examples.run`). The card's
+     * `title` is forwarded as `cardTitle` automatically.
+     */
+    runTrackingElement: string;
+    detailUrl?: string;
+    detailLabel: string;
+    detailOpensInNewTab?: boolean;
+    className?: string;
+};
+
+export const ActorExampleCard = ({
+    title,
+    badge,
+    actorId,
+    runUrl,
+    runLabel,
+    runTrackingElement,
+    detailUrl,
+    detailLabel,
+    detailOpensInNewTab = true,
+    className,
+}: ActorExampleCardProps) => (
+    <ActorExampleCardWrapper className={clsx(actorExampleCardClassNames.ROOT, className)}>
+        <Box className={actorExampleCardClassNames.CONTENT}>
+            {badge && (
+                <Badge size="extra_small" variant="primary_blue" className={actorExampleCardClassNames.BADGE}>
+                    {badge}
+                </Badge>
+            )}
+            <Heading as="h2" className={actorExampleCardClassNames.TITLE}>
+                {title}
+            </Heading>
+        </Box>
+        <Box className={actorExampleCardClassNames.FOOTER}>
+            <ActorExampleRunButton
+                size="small"
+                variant="secondary"
+                actorId={actorId}
+                consoleUrl={runUrl}
+                trackingProps={{ element: runTrackingElement, cardTitle: title }}
+                className={actorExampleCardClassNames.RUN_BUTTON}
+                LeftIcon={ActorExampleRunButtonLightningIcon}
+            >
+                {runLabel}
+            </ActorExampleRunButton>
+            {detailUrl && detailLabel && (
+                <Button
+                    size="small"
+                    variant="tertiary"
+                    to={detailUrl}
+                    target={detailOpensInNewTab ? '_blank' : undefined}
+                    className={actorExampleCardClassNames.DETAIL_BUTTON}
+                    RightIcon={ExternalLinkIcon}
+                >
+                    {detailLabel}
+                </Button>
+            )}
+        </Box>
+    </ActorExampleCardWrapper>
+);

package/src/components/actor_example/actor_example_preview.tsx

@@ -0,0 +1,295 @@
+import styled, { keyframes } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { Heading, Text } from '../text/index.js';
+import { ActorExampleAvatar } from './actor_example_avatar.js';
+
+const MAX_VISIBLE_FIELDS = 4;
+const BADGE_PICTURE_SIZE = 36;
+
+export const actorExamplePreviewClassNames = {
+    CONTAINER: 'actor-example-preview',
+    CONTENT: 'actor-example-preview__content',
+    BADGE: 'actor-example-preview__badge',
+    BADGE_PICTURE: 'actor-example-preview__badge-picture',
+    BADGE_CONTENT: 'actor-example-preview__badge-content',
+    BADGE_NAME: 'actor-example-preview__badge-name',
+    BADGE_TECHNICAL_NAME: 'actor-example-preview__badge-technical-name',
+    SCHEMA: 'actor-example-preview__schema',
+    SCHEMA_FIELD: 'actor-example-preview__schema-field',
+    SCHEMA_FIELD_NAME: 'actor-example-preview__schema-field-name',
+    SCHEMA_MORE: 'actor-example-preview__schema-more',
+};
+
+const VISUAL_SEPARATOR_SIZE = '0.6rem';
+const VISUAL_CONNECTOR_LENGTH = '2.4rem';
+
+const noisePulse = keyframes`
+    0%, 100% { opacity: 0.1; }
+    50%      { opacity: 0.4; }
+`;
+
+const ActorExamplePreviewWrapper = styled.div<{ $noiseImageUrl: string }>`
+    @property --noise-cx {
+        syntax: '<percentage>';
+        inherits: false;
+        initial-value: 50%;
+    }
+
+    @property --noise-cy {
+        syntax: '<percentage>';
+        inherits: false;
+        initial-value: 50%;
+    }
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: -${theme.space.space32};
+        bottom: 0;
+        inset-inline: -${theme.space.space32};
+        background-image: url(${({ $noiseImageUrl }) => $noiseImageUrl});
+        background-position: center;
+        background-repeat: repeat;
+        mask-image:
+            linear-gradient(to bottom, transparent, black 30%, black 70%, transparent),
+            linear-gradient(to right, transparent, black 30%, black 70%, transparent);
+        mask-composite: intersect;
+        -webkit-mask-image:
+            linear-gradient(to bottom, transparent, black 30%, black 70%, transparent),
+            linear-gradient(to right, transparent, black 30%, black 70%, transparent);
+        -webkit-mask-composite: destination-in;
+        animation: ${noisePulse} 4s ease-in-out infinite;
+        opacity: 0.1;
+        pointer-events: none;
+
+        @media ${theme.device.desktop} {
+            inset: 0;
+            mask-image: radial-gradient(circle at var(--noise-cx) var(--noise-cy), black 30%, transparent 70%);
+            -webkit-mask-image: radial-gradient(circle at var(--noise-cx) var(--noise-cy), black 30%, transparent 70%);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+            mask-image: none;
+            -webkit-mask-image: none;
+        }
+    }
+
+    .${actorExamplePreviewClassNames.CONTENT} {
+        max-width: 100%;
+        display: flex;
+        gap: ${theme.space.space32};
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .${actorExamplePreviewClassNames.BADGE} {
+        width: 100%;
+        min-width: 0;
+        padding: ${theme.space.space12};
+        border: 1px solid ${theme.color.neutral.separatorSubtle};
+        border-radius: ${theme.radius.radius12};
+        background-color: ${theme.color.neutral.background};
+        display: flex;
+        gap: ${theme.space.space8};
+        align-items: center;
+        position: relative;
+    }
+
+    .${actorExamplePreviewClassNames.BADGE_PICTURE} {
+        border: 1px solid ${theme.color.neutral.separatorSubtle};
+        border-radius: ${theme.radius.radius8};
+        flex-shrink: 0;
+        object-fit: cover;
+    }
+
+    .${actorExamplePreviewClassNames.BADGE_CONTENT} {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    .${actorExamplePreviewClassNames.BADGE_NAME}, .${actorExamplePreviewClassNames.BADGE_TECHNICAL_NAME} {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .${actorExamplePreviewClassNames.SCHEMA} {
+        width: 100%;
+        min-width: 0;
+        padding: ${theme.space.space8};
+        border: 1px solid ${theme.color.primary.text};
+        border-radius: ${theme.radius.radius12};
+        background-color: ${theme.color.neutral.background};
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: ${theme.space.space4};
+        position: relative;
+
+        &::before {
+            bottom: calc(100% + 0.5rem);
+            left: calc(50% - 0.5px);
+            width: 1px;
+            height: ${VISUAL_CONNECTOR_LENGTH};
+            background-color: ${theme.color.primary.text};
+            content: '';
+            display: block;
+            position: absolute;
+        }
+
+        &::after {
+            bottom: calc(100% + 0.5rem);
+            left: calc(50% - (${VISUAL_SEPARATOR_SIZE} / 2));
+            margin: 0 auto;
+            width: ${VISUAL_SEPARATOR_SIZE};
+            height: ${VISUAL_CONNECTOR_LENGTH};
+            border-block: 1px solid ${theme.color.primary.text};
+            box-sizing: border-box;
+            content: '';
+            display: block;
+            position: absolute;
+        }
+    }
+
+    .${actorExamplePreviewClassNames.SCHEMA_FIELD} {
+        width: 100%;
+        padding: ${theme.space.space4};
+        border: 1px solid ${theme.color.primary.borderSubtle};
+        border-radius: ${theme.radius.radius6};
+        display: flex;
+        gap: ${theme.space.space8};
+        align-items: center;
+        justify-content: center;
+    }
+
+    .${actorExamplePreviewClassNames.SCHEMA_FIELD_NAME} {
+        min-width: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .${actorExamplePreviewClassNames.SCHEMA_MORE} {
+        height: 2.4rem;
+        margin-top: 2rem;
+        padding: 0 ${theme.space.space8};
+        border: 1px solid ${theme.color.primary.borderSubtle};
+        border-radius: ${theme.radius.radius12};
+        background-color: ${theme.color.primary.background};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &::before {
+            top: calc(-1px - 1.6rem);
+            left: calc(50% - 0.5px);
+            width: 1px;
+            height: 0.8rem;
+            background-color: ${theme.color.primary.text};
+            content: '';
+            display: block;
+            position: absolute;
+        }
+    }
+`;
+
+export type ActorExamplePreviewField = {
+    name: string;
+    title?: string;
+};
+
+export type ActorExamplePreviewProps = {
+    actorName: string;
+    actorTitle: string | undefined;
+    actorPictureUrl: string | undefined;
+    actorPictureFallbackUrl: string;
+    outputFields: ActorExamplePreviewField[];
+    staticWebUrl: string;
+    username: string;
+};
+
+export const ActorExamplePreview = ({
+    actorName,
+    actorTitle,
+    actorPictureUrl,
+    actorPictureFallbackUrl,
+    outputFields,
+    staticWebUrl,
+    username,
+}: ActorExamplePreviewProps) => {
+    const visibleFields = outputFields.slice(0, MAX_VISIBLE_FIELDS);
+    const remainingCount = Math.max(0, outputFields.length - MAX_VISIBLE_FIELDS);
+
+    return (
+        <ActorExamplePreviewWrapper
+            className={actorExamplePreviewClassNames.CONTAINER}
+            $noiseImageUrl={`${staticWebUrl}/img/pattern/noise.svg`}
+        >
+            <div className={actorExamplePreviewClassNames.CONTENT}>
+                <div className={actorExamplePreviewClassNames.BADGE}>
+                    <ActorExampleAvatar
+                        title={actorTitle}
+                        name={actorName}
+                        pictureUrl={actorPictureUrl}
+                        fallbackPictureUrl={actorPictureFallbackUrl}
+                        size={BADGE_PICTURE_SIZE}
+                        className={actorExamplePreviewClassNames.BADGE_PICTURE}
+                    />
+                    <div className={actorExamplePreviewClassNames.BADGE_CONTENT}>
+                        <Heading as="span" type="titleS" className={actorExamplePreviewClassNames.BADGE_NAME}>
+                            {actorTitle ?? actorName}
+                        </Heading>
+                        <Text
+                            as="span"
+                            type="code"
+                            size="small"
+                            color={theme.color.neutral.textSubtle}
+                            className={actorExamplePreviewClassNames.BADGE_TECHNICAL_NAME}
+                        >
+                            {username}/{actorName}
+                        </Text>
+                    </div>
+                </div>
+                {visibleFields.length > 0 && (
+                    <div className={actorExamplePreviewClassNames.SCHEMA}>
+                        {visibleFields.map((field) => (
+                            <div key={field.name} className={actorExamplePreviewClassNames.SCHEMA_FIELD}>
+                                <Text
+                                    as="span"
+                                    size="small"
+                                    color={theme.color.neutral.text}
+                                    className={actorExamplePreviewClassNames.SCHEMA_FIELD_NAME}
+                                >
+                                    {field.title ?? field.name}
+                                </Text>
+                            </div>
+                        ))}
+                        {remainingCount > 0 && (
+                            <Text
+                                as="span"
+                                size="small"
+                                color={theme.color.primary.text}
+                                className={actorExamplePreviewClassNames.SCHEMA_MORE}
+                            >
+                                +{remainingCount} {remainingCount === 1 ? 'field' : 'fields'}
+                            </Text>
+                        )}
+                    </div>
+                )}
+            </div>
+        </ActorExamplePreviewWrapper>
+    );
+};

package/src/components/actor_example/actor_example_run_button.tsx

@@ -0,0 +1,61 @@
+import type React from 'react';
+
+import { type IconProps, LightningIcon } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import { type ButtonProps, Button } from '../button.js';
+import type { SharedTextProps } from '../text/text_shared.js';
+
+/**
+ * Brand-coloured lightning icon — the standard leading slot for the card variant of the run
+ * button. Hero-style call sites typically render without an icon; pass this explicitly via
+ * `LeftIcon` when you want it.
+ */
+export const ActorExampleRunButtonLightningIcon = (props: IconProps) => (
+    <LightningIcon {...props} color={theme.color.primary.action} />
+);
+
+/**
+ * "Run example" CTA shared by the actor-detail Examples tab (apify-core Console) and the
+ * public actor-example landing/hero pages (apify-web). Encapsulates two universal defaults
+ * for this CTA — `target="_self"` so external `console.apify.com` links don't open in a new
+ * tab, and `hideExternalIcon` so the lightning leading icon (when present) is the only
+ * action affordance — and pins the analytics shape to `{ element, cardTitle, actorId }`.
+ *
+ * Tracking flows through the host app's `trackClick` (apify-web's analytics, console's
+ * client tracker) via the underlying `Button`.
+ */
+export type ActorExampleRunButtonProps = Pick<ButtonProps, 'size' | 'variant' | 'LeftIcon' | 'RightIcon'> & {
+    actorId: string;
+    consoleUrl: string;
+    trackingProps: {
+        element: string;
+        cardTitle: string;
+    };
+    textSize?: SharedTextProps['size'];
+    className?: string;
+    children: React.ReactNode;
+};
+
+export const ActorExampleRunButton = ({
+    actorId,
+    consoleUrl,
+    size = 'extraLarge',
+    variant = 'primary',
+    trackingProps,
+    children,
+    ...buttonProps
+}: ActorExampleRunButtonProps) => (
+    <Button
+        {...buttonProps}
+        to={consoleUrl}
+        size={size}
+        variant={variant}
+        target="_self"
+        hideExternalIcon
+        trackingId={trackingProps.element}
+        trackingData={{ cardTitle: trackingProps.cardTitle, actorId }}
+    >
+        {children}
+    </Button>
+);