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

package/src/components/floating/menu_components.tsx

@@ -1,99 +0,0 @@
-import {
-    type ReferenceType,
-    type UseFloatingReturn,
-} from '@floating-ui/react';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ChevronDownIcon } from '@apify/ui-icons';
-
-import { theme } from '../../design_system/theme.js';
-import type { BoxProps } from '../box.js';
-import { Box } from '../box.js';
-
-export type FloatingContext = Pick<UseFloatingReturn<ReferenceType>, 'context'>['context'];
-
-/**
- * Menu wrapper component
- */
-export const ListMenuComponent = styled(Box).attrs({
-    p: 'space8',
-})`
-    display: flex;
-    flex-direction: column;
-    max-height: 300px;
-    min-width: 160px;
-    box-shadow: ${theme.shadow.shadow2};
-    background: ${theme.color.neutral.background};
-    border: 1px solid ${theme.color.neutral.separatorSubtle};
-    border-radius: ${theme.radius.radius8};
-    scrollbar-color: ${theme.color.neutral.separatorSubtle} ${theme.color.neutral.background};
-    outline: none;
-    overflow-y: auto;
-    z-index: 10;
-`;
-
-interface SelectableListMenuItemProps {
-    $isActive?: boolean,
-    $isSelected?: boolean,
-}
-
-/**
- * Menu item component
- */
-export const ListMenuItemComponent = styled(Box).attrs({
-    px: 'space8',
-})<SelectableListMenuItemProps>`
-    border-radius: ${theme.radius.radius8};
-    outline: none;
-    cursor: pointer;
-    white-space: nowrap;
-
-    ${({ $isActive }) => $isActive && css`
-        background-color: ${theme.color.neutral.hover};
-    `}
-
-    ${({ $isSelected }) => $isSelected && css`
-        background-color: ${theme.color.neutral.backgroundSubtle};
-        color: ${theme.color.primary.text};
-    `}
-`;
-
-/**
- * Menu base component WITHOUT dropdown icon
- */
-export const PlainMenuBaseComponent = styled(Box)`
-    display: flex;
-    align-items: center;
-    gap: ${theme.space.space4};
-    padding: ${theme.space.space8};
-    border-radius: ${theme.radius.radius8};
-    border: 1px solid ${theme.color.neutral.separatorSubtle};
-    background-color: ${theme.color.neutral.backgroundMuted};
-
-    cursor: pointer;
-    transition: background-color 0.2s ease-in-out;
-
-    &:hover {
-        background-color: ${theme.color.neutral.backgroundSubtle};
-    }
-`;
-
-type DropdownMenuBaseComponentProps = {
-    children: React.ReactNode;
-} & BoxProps;
-
-/**
- * Menu base component WITH dropdown icon
- */
-export const DropdownMenuBaseComponent = forwardRef<HTMLElement, DropdownMenuBaseComponentProps>(({
-    children,
-    ...props
-}, ref) => {
-    return (
-        <PlainMenuBaseComponent {...props} ref={ref}>
-            {children}
-            <ChevronDownIcon size="16" color={theme.color.neutral.icon} />
-        </PlainMenuBaseComponent>
-    );
-});

package/src/components/image.tsx

@@ -1,24 +0,0 @@
-import { forwardRef } from 'react';
-
-import type { ImageProxyOptions } from '../ui_dependency_provider.js';
-import { useSharedUiDependencies } from '../ui_dependency_provider.js';
-import { Box, type BoxProps } from './box.js';
-
-type ImageProps = {
-    src: string,
-    alt?: string,
-    width?: number,
-    height?: number,
-    loading?: 'eager' | 'lazy' | undefined;
-} & ImageProxyOptions
-
-export const Image = forwardRef<HTMLImageElement, ImageProps & Omit<BoxProps, 'as'>>((props, ref) => {
-    const { InternalImage } = useSharedUiDependencies();
-    return (
-        <Box
-            ref={ref}
-            {...props}
-            as={InternalImage}
-        />
-    );
-});

package/src/components/index.ts

@@ -1,22 +0,0 @@
-export * from './text/index.js';
-export * from './box.js';
-export * from './message.js';
-export * from './floating/index.js';
-export * from './button.js';
-export * from './link.js';
-export * from './action_link.js';
-export * from './simple_markdown/index.js';
-export * from './code/index.js';
-export * from './color_wheel_gradient.js';
-export * from './readme_renderer/index.js';
-export * from './to_consolidate/index.js';
-export * from './tile/index.js';
-export * from './blog_article.js';
-export * from './banner.js';
-export * from './actor_template_card.js';
-export * from './chip.js';
-export * from './image.js';
-export * from './rating.js';
-export * from './badge.js';
-export * from './tag.js';
-export * from './tabs/index.js';

package/src/components/link.tsx

@@ -1,114 +0,0 @@
-import clsx from 'clsx';
-import { createPath, type Path } from 'history';
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-
-import { ExternalLinkIcon } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-import { useSharedUiDependencies } from '../ui_dependency_provider.js';
-import { Box, type BoxProps } from './box.js';
-
-export type To = string | Partial<Path>;
-export interface RegularLinkProps {
-    to: To,
-    hideExternalIcon?: boolean,
-    showExternalIcon?: boolean,
-    rel?: string,
-    target?: string,
-    trackingId?: string,
-    trackingData?: object,
-}
-
-// TODO: This function is copied from tools.client.js. We can remove it from there once this is deployed
-/**
- * Checks if passed url is external
- */
-export const isUrlExternal = (url: To, windowLocationHost: string) => {
-    if (!url || typeof (url) !== 'string') return false;
-    const domainMatch = url.match(/^https?:\/\/([^/?#]+)(?:[/?#]|$)/i);
-    return !!(domainMatch && domainMatch[1] !== windowLocationHost);
-};
-
-// TODO: This function is copied from tools.client.js. We can remove it from there once this is deployed
-/**
- * Checks if passed url is email
- */
-export const isUrlEmail = (url: To) => {
-    if (!url || typeof (url) !== 'string') return false;
-    return url.startsWith('mailto:');
-};
-
-const StyledLink = styled(Box)`
-    /* Basic positioning */
-    display: inline-flex;
-    align-items: center;
-    gap: ${theme.space.space4};
-
-    /* Default behavior */
-    text-decoration: none;
-    transition: color ${theme.transition.fastEaseInOut};
-
-    &:hover {
-        text-decoration: none;
-        color: ${theme.color.primary.actionHover};
-    }
-
-    &:active {
-        color: ${theme.color.primary.actionActive};
-    }
-`;
-
-export type LinkProps = RegularLinkProps & BoxProps;
-
-export const Link = forwardRef<HTMLElement, LinkProps>(({
-    to,
-    children,
-    rel,
-    target,
-    hideExternalIcon,
-    showExternalIcon,
-    onClick,
-    trackingId,
-    trackingData,
-    ...rest
-}, ref) => {
-    const {
-        windowLocationHost,
-        isHrefTrusted,
-        trackClick,
-        InternalLink,
-    } = useSharedUiDependencies();
-    const href = typeof (to) === 'string' ? to : createPath(to);
-    const isExternal = isUrlExternal(to, windowLocationHost);
-    const isEmail = isUrlEmail(to);
-    const isTrusted = isHrefTrusted(href);
-
-    const trackedOnClick = (e: React.MouseEvent) => {
-        if (trackingId && trackClick) trackClick(trackingId, trackingData);
-        if (onClick) onClick(e);
-    };
-
-    const effectiveRel = clsx(
-        rel,
-        isExternal && 'external',
-        (isExternal || target === '_blank') && 'noopener',
-        (isExternal && !isTrusted) && 'nofollow',
-    );
-
-    return (
-        <StyledLink
-            // We use the InternalLink only for internal navigation
-            forwardedAs={(isEmail || isExternal) ? 'a' : InternalLink}
-            href={href}
-            rel={effectiveRel}
-            target={target || (isExternal ? '_blank' : '_self')}
-            onClick={trackedOnClick}
-            ref={ref}
-            {...rest}
-        >
-            {children}
-            {((isExternal && !hideExternalIcon) || showExternalIcon) && <ExternalLinkIcon size="16" />}
-        </StyledLink>
-    );
-});

package/src/components/message.tsx

@@ -1,153 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import styled from 'styled-components';
-
-import { CheckCircleIcon, CrossIcon, InfoIcon, WarningTriangleIcon } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-import { Box, type BoxProps } from './box.js';
-import { Button } from './button.js';
-import { Heading } from './text/index.js';
-
-export const messageClassNames = {
-    main: 'Message',
-    icon: 'icon',
-    content: 'content',
-    caption: 'caption',
-    dismiss: 'dismiss',
-};
-
-const StyledMessage = styled(Box)`
-    display: flex;
-    gap: ${theme.space.space8};
-
-    border-radius: ${theme.radius.radius8};
-    box-shadow: ${theme.shadow.shadow1};
-
-    .${messageClassNames.content} {
-        flex: 1;
-        margin-top: 1px; /* This is to align icon with text (align-items: center not possible - icon should be on top) */
-    }
-
-    .${messageClassNames.caption} {
-        /* TODO: We should not override the default Heading that is rendered for caption but it doesn't look good without these */
-        line-height: 20px;
-        font-weight: 600;
-        margin-bottom: ${theme.space.space4};
-    }
-
-    .${messageClassNames.dismiss} {
-        background: transparent;
-        height: 20px;
-
-        svg {
-            color: ${theme.color.neutral.icon}
-        }
-    }
-
-    &.borderless {
-        border: none !important;
-        background-color: transparent !important;
-        box-shadow: none !important;
-    }
-
-    &.info {
-        background-color: ${theme.color.neutral.background};
-        border: 1px solid ${theme.color.neutral.border};
-
-        .${messageClassNames.icon} { color: ${theme.color.primary.icon}; }
-    }
-
-    &.success {
-        background-color: ${theme.color.success.backgroundSubtle};
-        border: 1px solid ${theme.color.success.borderSubtle};
-
-        .${messageClassNames.icon} { color: ${theme.color.success.icon}; }
-    }
-
-    &.warning {
-        background-color: ${theme.color.warning.backgroundSubtle};
-        border: 1px solid ${theme.color.warning.borderSubtle};
-
-        .${messageClassNames.icon} { color: ${theme.color.warning.icon}; }
-    }
-
-    &.danger {
-        background-color: ${theme.color.danger.backgroundSubtle};
-        border: 1px solid ${theme.color.danger.borderSubtle};
-
-        .${messageClassNames.icon} { color: ${theme.color.danger.icon}; }
-    }
-`;
-
-export type MessageType = 'info' | 'warning' | 'success' | 'danger';
-
-const typeToIcon: { [key in MessageType]: React.ElementType } = {
-    info: InfoIcon,
-    success: CheckCircleIcon,
-    warning: WarningTriangleIcon,
-    danger: WarningTriangleIcon,
-};
-
-type MessageProps = BoxProps & {
-    type: MessageType,
-    caption?: string,
-    icon?: React.ElementType,
-    onDismissClick?: () => void,
-    borderless?: boolean,
-    boxless?: boolean,
-    as?: React.ElementType,
-    dismissTrackingId?: string,
-}
-
-/**
- * Component used to display larger messages that are part of the content of the application.
- */
-export const Message: React.FC<MessageProps> = ({
-    className,
-    icon,
-    caption,
-    children,
-    onDismissClick,
-    type = 'warning',
-    borderless = false,
-    boxless = false,
-    dismissTrackingId,
-    as,
-    ...rest
-}) => {
-    const Icon = icon || typeToIcon[type];
-    return (
-        <StyledMessage
-            className={clsx(className, messageClassNames.main, type, borderless && 'borderless')}
-            mb={boxless ? 'space8' : 'space16'} // TODO: Export message without margin
-            p={boxless ? 'none' : 'space16'}
-            forwardedAs={as}
-            {...rest}
-        >
-            <Icon className={messageClassNames.icon} size="20" />
-            <div className={messageClassNames.content}>
-                {caption && (<Heading as='div' type='titleM' className={messageClassNames.caption}>{caption}</Heading>)}
-                {children}
-            </div>
-            {onDismissClick && (
-                <Button
-                    size='small'
-                    variant='text'
-                    trackingId={dismissTrackingId}
-                    onClick={onDismissClick}
-                    className={messageClassNames.dismiss}
-                >
-                    <CrossIcon size="16" />
-                </Button>
-            )}
-        </StyledMessage>
-    );
-};
-
-type SpecificMessageProps = Omit<MessageProps, 'type'>;
-// Semantic classes for all the message types
-export const InfoMessage = (props: SpecificMessageProps) => (<Message {...props} type='info' />);
-export const WarningMessage = (props: SpecificMessageProps) => (<Message {...props} type='warning' />);
-export const SuccessMessage = (props: SpecificMessageProps) => (<Message {...props} type='success' />);
-export const DangerMessage = (props: SpecificMessageProps) => (<Message {...props} type='danger' />);

package/src/components/rating.tsx

@@ -1,106 +0,0 @@
-import type { FC } from 'react';
-import { Fragment, useMemo } from 'react';
-import styled from 'styled-components';
-
-import { StarEmptyIcon, StarFullIcon, StarHalfIcon } from '@apify/ui-icons';
-
-import type { ReviewRating } from '@apify-packages/types';
-
-import { theme } from '../design_system/theme.js';
-import type { BoxProps } from './box.js';
-import { Box } from './box.js';
-import { Text } from './text/index.js';
-
-type RatingStatsProps = {
-    ratingStats: Record<ReviewRating, number>
-}
-
-const StyledRating = styled(Box)`
-    display: flex;
-`;
-
-const StyledRatingStats = styled(Box)`
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: center;
-    gap: 1px ${theme.space.space8};
-    align-items: center;
-
-    p {
-        /* TODO: This font is not defined! */
-        line-height: 10px;
-        font-size: 8px;
-    }
-`;
-
-const StyledRatingBar = styled(Box)<{ $widthPercent: number }>`
-    height: 5px;
-    border-radius: 10px;
-    background: ${theme.color.neutral.overflow};
-    position: relative;
-    overflow: hidden;
-
-    &::after {
-        content: "";
-        position: absolute;
-        display: block;
-        height: 100%;
-        left: 0;
-        top: 0;
-        border-radius: 10px;
-        background: ${theme.color.neutral.icon};
-        width: ${({ $widthPercent }) => $widthPercent}%;
-
-    }
-`;
-
-// 0 is only for empty rating - we don't display any stars filled
-type RatingProps = BoxProps & {
-    rating: number | undefined;
-    color?: string;
-}
-
-export const Rating: FC<RatingProps> = ({
-    rating = 0,
-    color = theme.color.neutral.icon,
-    ...rest
-}) => {
-    const ratingStatsContent = useMemo(() => [1, 2, 3, 4, 5].map((rate) => {
-        const ratingFloor = Math.floor(rating);
-        const ratingDecimals = rating % 1;
-
-        if (ratingFloor >= rate || (ratingFloor === rate - 1 && ratingDecimals > 0.75)) return <StarFullIcon size="12" color={color} key={rate} />;
-        if (ratingFloor === rate - 1 && ratingDecimals > 0.25) return <StarHalfIcon size="12" color={color} key={rate} />;
-        return <StarEmptyIcon size="12" color={color} key={rate} />;
-    }), [rating, color]);
-
-    return (
-        <StyledRating {...rest}>
-            {ratingStatsContent}
-        </StyledRating>
-    );
-};
-
-export const RatingStats: FC<RatingStatsProps & BoxProps> = ({
-    ratingStats,
-    ...rest
-}) => {
-    const totalRates = ratingStats[1] + ratingStats[2] + ratingStats[3] + ratingStats[4] + ratingStats[5];
-
-    const ratingStatsContent = useMemo(() => ([5, 4, 3, 2, 1] as const).map((rate) => {
-        const widthPercent = totalRates > 0 ? ((ratingStats[rate] / totalRates) * 100) : 0;
-
-        return (
-            <Fragment key={rate}>
-                <Text align='center' color={theme.color.neutral.textSubtle}>{rate}</Text>
-                <StyledRatingBar $widthPercent={widthPercent}/>
-            </Fragment>
-        );
-    }), [totalRates, ratingStats]);
-
-    return (
-        <StyledRatingStats {...rest}>
-            {ratingStatsContent}
-        </StyledRatingStats>
-    );
-};

package/src/components/readme_renderer/index.ts

@@ -1,3 +0,0 @@
-export { useActorTitleHeadingFilter } from './utils.js';
-export { pythonizeValue } from './pythonize_value.js';
-export { TableOfContents } from './table_of_contents.js';

package/src/components/readme_renderer/pythonize_value.ts

@@ -1,76 +0,0 @@
-/* eslint-disable prefer-template, no-control-regex */
-// Escaped versions of control characters
-const escapes = {
-    92: '\\\\',
-    34: '\\"',
-    8: '\\b',
-    12: '\\f',
-    13: '\\r',
-    9: '\\t',
-};
-
-// Replaces a control character with its escaped value
-const escapeChar = (character: string) => {
-    const charCode = character.charCodeAt(0);
-    const escaped = escapes[charCode as keyof typeof escapes];
-    if (escaped) {
-        return escaped;
-    }
-    return '\\u00' + charCode.toString(16).padStart(2, '0');
-};
-
-// Escapes special characters in a string and surrounds it with proper quotes
-const pythonQuoteString = (str: string, escapeNewlines = true) => {
-    const escapedValue = str.replace(/[\x00-\x09\x0b-\x1f\x22\x5c]/g, escapeChar);
-    if (!escapeNewlines && escapedValue.includes('\n')) {
-        return '"""' + escapedValue + '"""';
-    }
-    return '"' + escapedValue.replace(/\n/g, '\\n') + '"';
-};
-
-const INDENT = '    ';
-
-// Converts a Javascript value to its equivalent Python representation
-// Doesn't support everything, because that would be impossible,
-// only the values which are supported in an input schema prefill (booleans, numbers, strings, arrays, objects)
-// Tries to keep the representation short, but readable.
-export const pythonizeValue = <T>(value: T, depth = 0): string | T => {
-    // None-like values
-    if (value === undefined) return 'None';
-    if (value === null) return 'None';
-
-    // Boolean values
-    if (value === true) return 'True';
-    if (value === false) return 'False';
-
-    // Number values (sorry, JSON doesn't support infinities)
-    if (value === Infinity) return 'None';
-    if (value === -Infinity) return 'None';
-    if (Number.isNaN(value)) return 'None';
-    if (typeof value === 'number') return value;
-
-    // String values
-    if (typeof value === 'string') return pythonQuoteString(value, false);
-
-    // Arrays of values
-    if (Array.isArray(value)) {
-        if (value.length === 0) return '[]';
-        if (value.length === 1) return '[' + pythonizeValue(value[0], depth + 1) + ']';
-        return '[\n'
-            + value.map((v) => INDENT.repeat(depth + 1) + pythonizeValue(v, depth + 1) + ',\n').join('')
-            + INDENT.repeat(depth) + ']';
-    }
-
-    // Object values
-    if (typeof value === 'object') {
-        const entries = Object.entries(value);
-        if (entries.length === 0) return '{}';
-        if (entries.length === 1) return '{ ' + pythonQuoteString(entries[0][0]) + ': ' + pythonizeValue(entries[0][1], depth + 1) + ' }';
-        return '{\n'
-            + entries.map(([k, v]) => INDENT.repeat(depth + 1) + pythonQuoteString(k) + ': ' + pythonizeValue(v, depth + 1) + ',\n').join('')
-            + INDENT.repeat(depth) + '}';
-    }
-
-    // This should never happen, if it did, something went wrong
-    return 'UNSUPPORTED VALUE';
-};