@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/src/components/floating/menu_components.tsx

@@ -0,0 +1,94 @@
+import {
+    type UseFloatingReturn,
+    type ReferenceType,
+} from '@floating-ui/react';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ChevronDown16 } from '@apify/icons';
+
+import { theme } from '../../design_system/theme';
+import { Box } from '../box';
+
+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};
+    }
+`;
+
+/**
+ * Menu base component WITH dropdown icon
+ */
+export const DropdownMenuBaseComponent = forwardRef<HTMLElement, any>(({
+    children,
+    ...props
+}, ref) => {
+    return (
+        <PlainMenuBaseComponent {...props} ref={ref}>
+            {children}
+            <ChevronDown16 color={theme.color.neutral.icon} />
+        </PlainMenuBaseComponent>
+    );
+});

package/src/components/image.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+
+import { useSharedUiDependencies } from '../ui_dependency_provider';
+import { Box, type BoxProps } from './box';
+
+type ImageProps = {
+    src: string,
+    alt?: string,
+    width?: number,
+    height?: number,
+    loading?: 'eager' | 'lazy' | undefined;
+}
+
+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,20 @@
+export * from './text';
+export * from './box';
+export * from './message';
+export * from './floating';
+export * from './button';
+export * from './link';
+export * from './action_link';
+export * from './simple_markdown';
+export * from './code';
+export * from './color_wheel_gradient';
+export * from './readme_renderer';
+export * from './to_consolidate';
+export * from './tile';
+export * from './blog_article';
+export * from './banner';
+export * from './actor_template_card';
+export * from './chip';
+export * from './image';
+export * from './badge';
+export * from './tag';

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 { ExternalLink16 } from '@apify/icons';
+
+import { theme } from '../design_system/theme';
+import { useSharedUiDependencies } from '../ui_dependency_provider';
+import { Box, type BoxProps } from './box';
+
+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 noreferrer',
+        (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) && <ExternalLink16 />}
+        </StyledLink>
+    );
+});

package/src/components/message.tsx

@@ -0,0 +1,157 @@
+import clsx from 'clsx';
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+    AlertTriangle20,
+    CheckCircle20,
+    Info20,
+    X16,
+} from '@apify/icons';
+
+import { theme } from '../design_system/theme';
+import { Box, type BoxProps } from './box';
+import { Button } from './button';
+import { Heading } from './text';
+
+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;
+
+        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: Info20,
+    success: CheckCircle20,
+    warning: AlertTriangle20,
+    danger: AlertTriangle20,
+};
+
+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}
+        >
+            <div className={messageClassNames.icon}><Icon /></div>
+            <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}
+                >
+                    <X16 />
+                </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/readme_renderer/index.ts

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

package/src/components/readme_renderer/pythonize_value.ts

@@ -0,0 +1,78 @@
+/* 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 && /\n/.test(escapedValue)) {
+        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.
+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';
+};
+
+export default pythonizeValue;