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

package/src/components/actor_example/actor_example_schema.tsx

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

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

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

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

package/src/components/actor_example/actor_example_schema_property.tsx

@@ -0,0 +1,242 @@
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ChevronDownIcon, QuestionMarkIcon } from '@apify/ui-icons';
+
+import type { ActorExampleSchemaFieldSerialized, ActorExampleSchemaFieldType } from '@apify-packages/types';
+
+import { theme } from '../../design_system/theme.js';
+import { Tooltip } from '../floating/tooltip.js';
+import { Text } from '../text/index.js';
+import { actorExampleSchemaPropertyMap } from './actor_example.utils.js';
+import { ActorExampleSchemaFieldBadge } from './actor_example_schema_field_badge.js';
+
+type NormalizedPropertyValue = {
+    value: string;
+    remainingValues: number;
+};
+
+const normalizePropertyValue = (
+    type: ActorExampleSchemaFieldType | undefined,
+    value: unknown,
+): NormalizedPropertyValue | undefined => {
+    if (type === 'object' || value == null) return undefined;
+
+    if (Array.isArray(value)) {
+        const first = value[0];
+        if (first == null || typeof first === 'object') return undefined;
+        const normalizedFirst = String(first).trim();
+        if (normalizedFirst.length === 0) return undefined;
+        return { value: normalizedFirst, remainingValues: value.length - 1 };
+    }
+
+    const normalizedValue = String(value).trim();
+    if (normalizedValue.length === 0) return undefined;
+    return { value: normalizedValue, remainingValues: 0 };
+};
+
+export const actorExampleSchemaPropertyClassNames = {
+    ROOT: 'actor-example-schema-property',
+    LEADING: 'actor-example-schema-property__leading',
+    TYPE: 'actor-example-schema-property__type',
+    NAME: 'actor-example-schema-property__name',
+    DELIMITER: 'actor-example-schema-property__delimiter',
+    VALUE: 'actor-example-schema-property__value',
+    TOGGLE: 'actor-example-schema-property__toggle',
+    PRESERVED: 'actor-example-schema-property__preserved',
+    INFO: 'actor-example-schema-property__info',
+};
+
+const ActorExampleSchemaPropertyWrapper = styled.div<{ $type?: ActorExampleSchemaFieldType; $isCollapsed: boolean }>`
+    width: 100%;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space4};
+
+    .${actorExampleSchemaPropertyClassNames.LEADING} {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .${actorExampleSchemaPropertyClassNames.TOGGLE} {
+        all: unset;
+        width: 2rem;
+        height: 2rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: transform 0.2s ease-in-out;
+
+        ${({ $isCollapsed }) =>
+            $isCollapsed &&
+            css`
+                transform: rotate(-90deg);
+            `}
+    }
+
+    .${actorExampleSchemaPropertyClassNames.TYPE} {
+        margin-right: ${theme.space.space4};
+        flex-shrink: 0;
+    }
+
+    .${actorExampleSchemaPropertyClassNames.NAME} {
+        min-width: 1ch;
+        ${({ $type }) =>
+            ($type === 'object' || $type === 'array') &&
+            css`
+                font-weight: 600;
+            `}
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .${actorExampleSchemaPropertyClassNames.DELIMITER} {
+        display: inline-flex;
+        flex-shrink: 0;
+    }
+
+    .${actorExampleSchemaPropertyClassNames.VALUE} {
+        min-width: 0;
+        margin-left: ${theme.space.space4};
+        padding: 1px ${theme.space.space6};
+        border: 1px solid ${theme.color.neutral.border};
+        border-radius: ${theme.radius.radius4};
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .${actorExampleSchemaPropertyClassNames.PRESERVED} {
+        margin-left: 0;
+        flex-shrink: 0;
+    }
+
+    .${actorExampleSchemaPropertyClassNames.INFO} {
+        flex-shrink: 0;
+        color: ${theme.color.neutral.textSubtle};
+        display: inline-flex;
+        align-items: center;
+    }
+`;
+
+const MIN_PROPERTY_NAME_LENGTH_PRESERVATION = 3;
+
+type Props = ActorExampleSchemaFieldSerialized & {
+    className?: string;
+    isCollapsable?: boolean;
+    isCollapsed?: boolean;
+    onToggleCollapsed?: (id: string) => void;
+    /** Optional slot rendered before the type badge (e.g. a checkbox in a configurator). */
+    leadingSlot?: ReactNode;
+};
+
+export const ActorExampleSchemaProperty = ({
+    type,
+    _id,
+    name,
+    title,
+    description,
+    value,
+    required = false,
+    isCollapsable = false,
+    isCollapsed = false,
+    onToggleCollapsed,
+    leadingSlot,
+    className,
+}: Props) => {
+    const tooltip = type ? actorExampleSchemaPropertyMap[type]?.title : undefined;
+
+    const normalizedName = title ?? name;
+    const normalizedValue = normalizePropertyValue(type, value);
+
+    return (
+        <ActorExampleSchemaPropertyWrapper
+            $type={type}
+            $isCollapsed={isCollapsed}
+            className={clsx(actorExampleSchemaPropertyClassNames.ROOT, className)}
+        >
+            {leadingSlot && <span className={actorExampleSchemaPropertyClassNames.LEADING}>{leadingSlot}</span>}
+            {isCollapsable && (
+                <button
+                    type="button"
+                    className={actorExampleSchemaPropertyClassNames.TOGGLE}
+                    onClick={() => onToggleCollapsed?.(_id)}
+                >
+                    <ChevronDownIcon size="16" />
+                </button>
+            )}
+            <Tooltip content={tooltip} className={actorExampleSchemaPropertyClassNames.TYPE}>
+                <ActorExampleSchemaFieldBadge
+                    type={type}
+                    title={normalizedName}
+                    className={tooltip == null ? actorExampleSchemaPropertyClassNames.TYPE : undefined}
+                />
+            </Tooltip>
+            <Text
+                as="span"
+                weight="medium"
+                className={clsx(actorExampleSchemaPropertyClassNames.NAME, {
+                    [actorExampleSchemaPropertyClassNames.PRESERVED]:
+                        normalizedName.length <= MIN_PROPERTY_NAME_LENGTH_PRESERVATION,
+                })}
+            >
+                {normalizedName}
+            </Text>
+
+            {required && (
+                <Text
+                    as="span"
+                    size="small"
+                    weight="medium"
+                    color={theme.color.neutral.textSubtle}
+                    className={actorExampleSchemaPropertyClassNames.PRESERVED}
+                >
+                    (required)
+                </Text>
+            )}
+
+            {description && (
+                <Tooltip content={description} className={actorExampleSchemaPropertyClassNames.INFO}>
+                    <QuestionMarkIcon size="16" />
+                </Tooltip>
+            )}
+
+            {normalizedValue && (
+                <>
+                    <Text as="span" weight="medium" className={actorExampleSchemaPropertyClassNames.DELIMITER}>
+                        :
+                    </Text>
+                    <Text
+                        as="span"
+                        size="small"
+                        weight="medium"
+                        className={clsx(actorExampleSchemaPropertyClassNames.VALUE, {
+                            [actorExampleSchemaPropertyClassNames.PRESERVED]:
+                                normalizedValue.value.length <= MIN_PROPERTY_NAME_LENGTH_PRESERVATION,
+                        })}
+                    >
+                        {normalizedValue.value}
+                    </Text>
+                    {normalizedValue.remainingValues > 0 && (
+                        <Text
+                            as="span"
+                            size="small"
+                            weight="medium"
+                            className={clsx(
+                                actorExampleSchemaPropertyClassNames.VALUE,
+                                actorExampleSchemaPropertyClassNames.PRESERVED,
+                            )}
+                        >
+                            +{normalizedValue.remainingValues}
+                        </Text>
+                    )}
+                </>
+            )}
+        </ActorExampleSchemaPropertyWrapper>
+    );
+};

package/src/components/actor_example/index.ts

@@ -0,0 +1,10 @@
+export * from './actor_example_avatar.js';
+export * from './actor_example_card.js';
+export * from './actor_example_preview.js';
+export * from './actor_example_run_button.js';
+export * from './actor_example_schema.js';
+export * from './actor_example_schema_field.js';
+export * from './actor_example_schema_field_badge.js';
+export * from './actor_example_schema_legend.js';
+export * from './actor_example_schema_property.js';
+export * from './actor_example.utils.js';

package/src/components/browser_window/browser_window.tsx

@@ -0,0 +1,106 @@
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { Badge } from '../badge.js';
+
+const classNames = {
+    ROOT: 'browser-window',
+    HEADER: 'browser-window__header',
+    DOTS: 'browser-window__dots',
+    DOT: 'browser-window__dot',
+    URL: 'browser-window__url',
+    TITLE: 'browser-window__title',
+    CONTAINER: 'browser-window__container',
+    CONTENT: 'browser-window__content',
+} as const;
+
+export { classNames as browserWindowClassNames };
+
+const BrowserWindowWrapper = styled.div`
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    background-color: ${theme.color.neutral.background};
+    overflow: hidden;
+
+    .${classNames.HEADER} {
+        display: flex;
+        align-items: center;
+        gap: ${theme.space.space8};
+        padding: ${theme.space.space6} ${theme.space.space8};
+        border-bottom: 1px solid ${theme.color.neutral.separatorSubtle};
+        background-color: ${theme.color.neutral.backgroundMuted};
+    }
+
+    .${classNames.DOTS} {
+        display: flex;
+        gap: 0.3rem;
+        flex-shrink: 0;
+    }
+
+    .${classNames.DOT} {
+        width: 0.6rem;
+        height: 0.6rem;
+        border-radius: 50%;
+        background-color: ${theme.color.neutral.separatorSubtle};
+    }
+
+    .${classNames.URL} {
+        width: 100%;
+        min-width: 0;
+        justify-content: flex-start;
+        color: ${theme.color.neutral.textSubtle};
+
+        span {
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
+
+    .${classNames.TITLE} {
+        margin-left: auto;
+        flex-shrink: 0;
+    }
+
+    .${classNames.CONTAINER} {
+        min-width: 0;
+        overflow-x: auto;
+    }
+`;
+
+type Props = {
+    title: string;
+    url?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+
+export const BrowserWindow = ({ title, url, children, className }: Props) => {
+    return (
+        <BrowserWindowWrapper className={clsx(classNames.ROOT, className)}>
+            <div className={classNames.HEADER}>
+                {url && (
+                    <>
+                        <div className={classNames.DOTS}>
+                            <span className={classNames.DOT} />
+                            <span className={classNames.DOT} />
+                            <span className={classNames.DOT} />
+                        </div>
+                        <Badge size="extra_small" variant="neutral_subtle" className={classNames.URL}>
+                            {url}
+                        </Badge>
+                    </>
+                )}
+                <Badge size="extra_small" className={classNames.TITLE}>
+                    {title}
+                </Badge>
+            </div>
+            <div className={classNames.CONTAINER}>
+                <div className={classNames.CONTENT}>{children}</div>
+            </div>
+        </BrowserWindowWrapper>
+    );
+};

package/src/components/browser_window/index.ts

@@ -0,0 +1 @@
+export * from './browser_window.js';

package/src/components/chip.tsx

@@ -80,9 +80,34 @@ const chipTypeStyle = {
     `,
 } satisfies Record<CHIP_TYPES, unknown>;
 
+const chipTypeHoverStyle = {
+    [CHIP_TYPES.DEFAULT]: css`
+        background: ${theme.color.neutral.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.PRIMARY]: css`
+        background: ${theme.color.primary.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.SUCCESS]: css`
+        background: ${theme.color.success.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.WARNING]: css`
+        background: ${theme.color.warning.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.DANGER]: css`
+        background: ${theme.color.danger.chipBackgroundHover};
+    `,
+} satisfies Record<CHIP_TYPES, unknown>;
+
 const StyledChip = styled.span<{ size: CHIP_SIZES; type: CHIP_TYPES; clickable: boolean }>`
     ${({ size }) => chipSizeStyle[size]};
     ${({ type }) => chipTypeStyle[type]};
+    ${({ type, clickable }) =>
+        clickable &&
+        css`
+            &:hover {
+                ${chipTypeHoverStyle[type]};
+            }
+        `};
     /* Static styles */
     width: fit-content;
     display: flex;
@@ -111,6 +136,7 @@ export const Chip = forwardRef(
         {
             type = CHIP_TYPES.DEFAULT,
             size = CHIP_SIZES.MEDIUM,
+            clickable = false,
             icon,
             children,
             className,
@@ -118,7 +144,7 @@ export const Chip = forwardRef(
         }: ChipProps,
         ref,
     ) => {
-        const otherProps = { ...passThroughProps, type, size, className: clsx(className, classNames.BODY) };
+        const otherProps = { ...passThroughProps, type, size, clickable, className: clsx(className, classNames.BODY) };
 
         return (
             <StyledChip ref={ref} {...otherProps}>