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

package/src/components/actor_example/actor_example_preview.tsx

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

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

package/src/components/actor_example/actor_example_schema.tsx

@@ -1,60 +0,0 @@
-import clsx from 'clsx';
-import { useState } from 'react';
-import styled from 'styled-components';
-
-import type { ActorExampleSchemaFieldSerialized } from '@apify-packages/types';
-
-import { theme } from '../../design_system/theme.js';
-import { ActorExampleSchemaField } from './actor_example_schema_field.js';
-
-export const actorExampleSchemaClassNames = {
-    ROOT: 'actor-example-schema',
-};
-
-const ActorExampleSchemaWrapper = styled.div`
-    width: 100%;
-    padding: ${theme.space.space16};
-    background-color: ${theme.color.neutral.background};
-    border-radius: 1rem;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: ${theme.space.space16};
-`;
-
-type Props = {
-    fields: ActorExampleSchemaFieldSerialized[];
-    canCollapse?: boolean;
-    className?: string;
-    /**
-     * Per-row slot rendered before the type badge on each top-level field
-     * (nested children render plain). Useful for configurators that need a
-     * checkbox or other control alongside each field.
-     */
-    LeadingSlot?: (props: { field: ActorExampleSchemaFieldSerialized }) => React.ReactNode;
-};
-
-export const ActorExampleSchema = ({ fields, canCollapse = false, className, LeadingSlot }: Props) => {
-    const [collapsedFields, setCollapsedFields] = useState<string[]>([]);
-
-    const handleToggleCollapse = (id: string) => {
-        setCollapsedFields((current) =>
-            current.includes(id) ? current.filter((currentId) => currentId !== id) : [...current, id],
-        );
-    };
-
-    return (
-        <ActorExampleSchemaWrapper className={clsx(actorExampleSchemaClassNames.ROOT, className)}>
-            {fields.map((field) => (
-                <ActorExampleSchemaField
-                    key={field._id}
-                    field={field}
-                    canCollapse={canCollapse}
-                    collapsedFields={collapsedFields}
-                    onToggleCollapsed={handleToggleCollapse}
-                    leadingSlot={LeadingSlot ? <LeadingSlot field={field} /> : undefined}
-                />
-            ))}
-        </ActorExampleSchemaWrapper>
-    );
-};

package/src/components/actor_example/actor_example_schema_field.tsx

@@ -1,87 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import styled from 'styled-components';
-
-import type { ActorExampleSchemaFieldSerialized } from '@apify-packages/types';
-
-import { theme } from '../../design_system/theme.js';
-import { ActorExampleSchemaProperty } from './actor_example_schema_property.js';
-
-export const actorExampleSchemaFieldClassNames = {
-    FIELD: 'actor-example-schema-field',
-    CHILDREN: 'actor-example-schema-field__children',
-};
-
-const ActorExampleSchemaFieldWrapper = styled.div<{ $canCollapse: boolean }>`
-    display: flex;
-    flex-direction: column;
-    gap: ${theme.space.space8};
-
-    .${actorExampleSchemaFieldClassNames.CHILDREN} {
-        margin-left: ${({ $canCollapse }) => ($canCollapse ? '5.6rem' : '2.8rem')};
-        padding-left: 0.8rem;
-        display: flex;
-        flex-direction: column;
-        gap: ${theme.space.space8};
-        border-left: 1px solid ${theme.color.neutral.border};
-    }
-`;
-
-const MAX_SCHEMA_FIELD_DEPTH = 1;
-
-type Props = {
-    field: ActorExampleSchemaFieldSerialized;
-    collapsedFields: string[];
-    canCollapse?: boolean;
-    onToggleCollapsed: (id: string) => void;
-    depth?: number;
-    className?: string;
-    /** Slot rendered on the outer property only — nested children render plain. */
-    leadingSlot?: ReactNode;
-};
-
-export const ActorExampleSchemaField = ({
-    field,
-    collapsedFields,
-    canCollapse = false,
-    onToggleCollapsed,
-    depth = 0,
-    className,
-    leadingSlot,
-}: Props) => {
-    const subfields = field.properties ?? field.items ?? [];
-    const isCollapsed = collapsedFields.includes(field._id);
-
-    if (subfields.length === 0 || depth >= MAX_SCHEMA_FIELD_DEPTH) {
-        return <ActorExampleSchemaProperty {...field} className={className} leadingSlot={leadingSlot} />;
-    }
-
-    return (
-        <ActorExampleSchemaFieldWrapper
-            $canCollapse={canCollapse}
-            className={clsx(actorExampleSchemaFieldClassNames.FIELD, className)}
-        >
-            <ActorExampleSchemaProperty
-                {...field}
-                isCollapsable={canCollapse}
-                isCollapsed={isCollapsed}
-                onToggleCollapsed={onToggleCollapsed}
-                leadingSlot={leadingSlot}
-            />
-            {!isCollapsed && (
-                <div className={actorExampleSchemaFieldClassNames.CHILDREN}>
-                    {subfields.map((subfield) => (
-                        <ActorExampleSchemaField
-                            key={subfield._id}
-                            field={subfield}
-                            collapsedFields={collapsedFields}
-                            canCollapse={canCollapse}
-                            onToggleCollapsed={onToggleCollapsed}
-                            depth={depth + 1}
-                        />
-                    ))}
-                </div>
-            )}
-        </ActorExampleSchemaFieldWrapper>
-    );
-};

package/src/components/actor_example/actor_example_schema_field_badge.tsx

@@ -1,66 +0,0 @@
-import styled from 'styled-components';
-
-import type { IconComponent } from '@apify/ui-icons';
-
-import type { ActorExampleSchemaFieldType } from '@apify-packages/types';
-
-import { theme } from '../../design_system/theme.js';
-import { actorExampleSchemaPropertyDefaultIcon, actorExampleSchemaPropertyMap } from './actor_example.utils.js';
-
-// Per-type colour variables consumed via `var(--actor-schema-field-*)` in `actor_example.utils.ts`.
-// Declared on this wrapper itself (rather than `:root`) so the badge is self-contained — no
-// host-app globals required. Dark-mode overrides hook into the existing `html[data-theme='dark']`
-// theming switch via a parent-selector cascade.
-const ActorExampleSchemaFieldBadgeWrapper = styled.div<{ $type?: ActorExampleSchemaFieldType }>`
-    --actor-schema-field-string-text: #018181;
-    --actor-schema-field-string-background: #ebfbf8;
-    --actor-schema-field-number-text: #8c4e02;
-    --actor-schema-field-number-background: #f9f0db;
-    --actor-schema-field-boolean-text: #104b37;
-    --actor-schema-field-boolean-background: #dffff0;
-    --actor-schema-field-object-text: #4c41c0;
-    --actor-schema-field-object-background: #e8e6f9;
-    --actor-schema-field-array-text: #0043ca;
-    --actor-schema-field-array-background: #e0ebff;
-
-    html[data-theme='dark'] & {
-        --actor-schema-field-string-text: #84f5e5;
-        --actor-schema-field-string-background: #0f2e2a;
-        --actor-schema-field-number-text: #ffd761;
-        --actor-schema-field-number-background: #5d2e0e;
-        --actor-schema-field-boolean-text: #a3e8cf;
-        --actor-schema-field-boolean-background: #0b3225;
-        --actor-schema-field-object-text: #a08cf2;
-        --actor-schema-field-object-background: #2a2544;
-        --actor-schema-field-array-text: #97bcff;
-        --actor-schema-field-array-background: #152447;
-    }
-
-    width: 2rem;
-    height: 2rem;
-    color: ${({ $type }) => ($type ? actorExampleSchemaPropertyMap[$type].textColor : theme.color.neutral.text)};
-    background-color: ${({ $type }) =>
-        $type ? actorExampleSchemaPropertyMap[$type].backgroundColor : theme.color.neutral.backgroundSubtle};
-    border-radius: ${theme.radius.radius4};
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-`;
-
-type Props = {
-    type?: ActorExampleSchemaFieldType;
-    title: string;
-    className?: string;
-};
-
-export const ActorExampleSchemaFieldBadge = ({ type, title, className }: Props) => {
-    const Icon: IconComponent =
-        (type ? actorExampleSchemaPropertyMap[type]?.Icon : undefined) ?? actorExampleSchemaPropertyDefaultIcon;
-
-    return (
-        <ActorExampleSchemaFieldBadgeWrapper $type={type} className={className}>
-            <Icon size="12" title={title} />
-        </ActorExampleSchemaFieldBadgeWrapper>
-    );
-};

package/src/components/actor_example/actor_example_schema_legend.tsx

@@ -1,49 +0,0 @@
-import clsx from 'clsx';
-import styled from 'styled-components';
-
-import type { ActorExampleSchemaFieldType } from '@apify-packages/types';
-
-import { theme } from '../../design_system/theme.js';
-import { Text } from '../text/index.js';
-import { actorExampleSchemaPropertyMap } from './actor_example.utils.js';
-import { ActorExampleSchemaFieldBadge } from './actor_example_schema_field_badge.js';
-
-const LEGEND_TYPE_ORDER: ActorExampleSchemaFieldType[] = ['string', 'number', 'boolean', 'array', 'object'];
-
-export const actorExampleSchemaLegendClassNames = {
-    ROOT: 'actor-example-schema-legend',
-    ITEM: 'actor-example-schema-legend__item',
-};
-
-const ActorExampleSchemaLegendWrapper = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: ${theme.space.space12};
-
-    .${actorExampleSchemaLegendClassNames.ITEM} {
-        display: inline-flex;
-        align-items: center;
-        gap: ${theme.space.space4};
-    }
-`;
-
-type Props = {
-    className?: string;
-};
-
-export const ActorExampleSchemaLegend = ({ className }: Props) => (
-    <ActorExampleSchemaLegendWrapper className={clsx(actorExampleSchemaLegendClassNames.ROOT, className)}>
-        {LEGEND_TYPE_ORDER.map((type) => {
-            const config = actorExampleSchemaPropertyMap[type];
-            return (
-                <span key={type} className={actorExampleSchemaLegendClassNames.ITEM}>
-                    <ActorExampleSchemaFieldBadge type={type} title={config.title} />
-                    <Text as="span" size="small" weight="medium">
-                        {config.title}
-                    </Text>
-                </span>
-            );
-        })}
-    </ActorExampleSchemaLegendWrapper>
-);