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

package/src/components/floating/menu.tsx

@@ -0,0 +1,189 @@
+import {
+    FloatingFocusManager,
+    FloatingPortal,
+    useClick,
+    useDismiss,
+    useInteractions,
+    useListNavigation,
+    useRole,
+    useTypeahead,
+} from '@floating-ui/react';
+import clsx from 'clsx';
+import React, {
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+
+import {
+    Box,
+    type BoxProps,
+} from '../box.js';
+import { Text } from '../text/index.js';
+import { useFloatingMenu } from './menu_common.js';
+import {
+    DropdownMenuBaseComponent,
+    ListMenuComponent,
+    ListMenuItemComponent,
+} from './menu_components.js';
+
+export const menuClassNames = {
+    WRAPPER: 'menu-wrapper',
+    BASE: 'menu-base',
+    LIST: 'menu-list',
+    ITEM: 'menu-item',
+};
+
+type SelectActionType = 'click' | 'enter' | 'space' | 'type';
+
+// It might be tempting to define label as ReactNode, but we need to have the string value for keyboard navigation
+// More difficult cases can be handled using renderOption prop
+export interface MenuOption {
+    label: string,
+    value: string,
+}
+
+export interface MenuProps<T = MenuOption> {
+    options: T[],
+    value?: string,
+    onSelect: (newValue: string, selectedBy: SelectActionType) => void,
+    defaultLabel?: React.ReactNode,
+    closeOnSelect?: boolean,
+    renderOption?: (option: T) => React.ReactNode,
+    components?: {
+        MenuBase?: React.ElementType,
+        Menu?: React.ElementType,
+        MenuItem?: React.ElementType,
+    },
+}
+
+const defaultRenderOption = ({ label }: MenuOption) => (<Text as='span'>{label}</Text>);
+
+/**
+ * This example is a Select taken from https://floating-ui.com/docs/react-examples
+ * It tries to mimic API of react-select as closely as possible
+ */
+export const Menu = <T extends MenuOption>({
+    options,
+    value,
+    onSelect,
+    closeOnSelect = true,
+    defaultLabel,
+    components,
+    renderOption,
+    className,
+    ...rest
+}: MenuProps<T> & BoxProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const { refs, floatingStyles, context } = useFloatingMenu({
+        isOpen,
+        setIsOpen,
+    });
+
+    const selectedIndex = useMemo(() => {
+        const foundIndex = options.findIndex((option) => option.value === value);
+        return foundIndex < 0 ? null : foundIndex;
+    }, [options, value]);
+
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const handleSelect = (newIndex: number, selectedBy: SelectActionType) => {
+        onSelect(options[newIndex].value, selectedBy);
+        if (closeOnSelect) setIsOpen(false);
+    };
+
+    const listRef = useRef<(HTMLElement | null)[]>([]);
+    const isTypingRef = useRef(false);
+    const listContentRef = useRef(options.map((option) => option.label));
+
+    const click = useClick(context, { event: 'mousedown' });
+    const dismiss = useDismiss(context);
+    const typeahead = useTypeahead(context, {
+        listRef: listContentRef,
+        activeIndex,
+        selectedIndex,
+        onMatch: isOpen ? setActiveIndex : (newIndex) => onSelect(options[newIndex].value, 'type'),
+        onTypingChange(isTyping) {
+            isTypingRef.current = isTyping;
+        },
+    });
+    const role = useRole(context, { role: 'listbox' });
+    const listNav = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        selectedIndex,
+        onNavigate: setActiveIndex,
+        loop: true,
+    });
+
+    const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([click, dismiss, role, listNav, typeahead]);
+
+    const MenuBaseComponent = components?.MenuBase || DropdownMenuBaseComponent;
+    const MenuComponent = components?.Menu || ListMenuComponent;
+    const MenuItemComponent = components?.MenuItem || ListMenuItemComponent;
+
+    const effectiveRenderOption = renderOption || defaultRenderOption;
+
+    return (
+        <Box
+            className={clsx(className, menuClassNames.WRAPPER)}
+            {...rest}
+        >
+            <MenuBaseComponent
+                aria-labelledby="select-label"
+                aria-autocomplete="none"
+                ref={refs.setReference}
+                {...getReferenceProps()}
+                className={menuClassNames.BASE}
+                tabindex="0"
+            >
+                {selectedIndex !== null ? options[selectedIndex].label : defaultLabel}
+            </MenuBaseComponent>
+            {isOpen && (
+                <FloatingPortal>
+                    <FloatingFocusManager
+                        context={context}
+                        modal={false}
+                    >
+                        <MenuComponent
+                            ref={refs.setFloating}
+                            style={floatingStyles}
+                            {...getFloatingProps()}
+                            className={menuClassNames.LIST}
+                        >
+                            {options.map((option, i) => (
+                                <MenuItemComponent
+                                    key={option.value}
+                                    $isSelected={i === selectedIndex}
+                                    $isActive={i === activeIndex}
+                                    ref={(node: HTMLElement | null) => {
+                                        listRef.current[i] = node;
+                                    }}
+                                    role="option"
+                                    tabIndex={i === activeIndex ? 0 : -1}
+                                    className={menuClassNames.ITEM}
+                                    aria-selected={i === selectedIndex && i === activeIndex}
+                                    {...getItemProps({
+                                        onClick: () => handleSelect(i, 'click'), // Handles mouse click
+                                        onKeyDown: (event) => {
+                                            if (event.key === 'Enter') {
+                                                event.preventDefault();
+                                                handleSelect(i, 'enter'); // Handles enter press
+                                            }
+
+                                            if (event.key === ' ' && !isTypingRef.current) {
+                                                event.preventDefault();
+                                                handleSelect(i, 'space');
+                                            }
+                                        },
+                                    })}
+                                >
+                                    {effectiveRenderOption(option)}
+                                </MenuItemComponent>
+                            ))}
+                        </MenuComponent>
+                    </FloatingFocusManager>
+                </FloatingPortal>
+            )}
+        </Box>
+    );
+};

package/src/components/floating/menu_common.tsx

@@ -0,0 +1,31 @@
+import {
+    autoUpdate,
+    offset,
+    size,
+    useFloating,
+} from '@floating-ui/react';
+
+export const useFloatingMenu = ({
+    isOpen,
+    setIsOpen,
+}: {
+    isOpen: boolean,
+    setIsOpen: (newIsOpen: boolean) => void
+}) => useFloating<Element>({
+    placement: 'bottom-start',
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+        offset(5),
+        size({
+            apply({ elements, availableHeight }) {
+                Object.assign(elements.floating.style, {
+                    maxHeight: `${availableHeight}px`,
+                    minHeight: '50px',
+                });
+            },
+            padding: 10,
+        }),
+    ],
+});

package/src/components/floating/menu_components.tsx

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

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

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

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

@@ -0,0 +1,153 @@
+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' />);