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

package/src/components/actor_example/actor_example_schema_property.tsx

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

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

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

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