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

package/src/components/code/one_line_code/one_line_code.tsx

@@ -1,228 +0,0 @@
-import { useMemo, useState } from 'react';
-import styled, { css } from 'styled-components';
-
-import { EyeIcon, EyeOffIcon } from '@apify/ui-icons';
-
-import { theme } from '../../../design_system/theme.js';
-import type { BoxProps } from '../../box.js';
-import { Text } from '../../text/index.js';
-import type { SharedTextSize } from '../../text/text_shared.js';
-import { ActionButton, CopyButton } from '../action_button.js';
-import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code_block.styled.js';
-import { SyntaxHighlighterBaseStylesWrapper } from '../code_block/code_block.styled.js';
-import { getBashLinePrefixes } from '../code_block/utils.js';
-import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
-
-export const oneLineCodeClassNames = {
-    gradientWrapper: 'OneLineCode-GradientWrapper',
-    scrollableWrapper: 'OneLineCode-ScrollableWrapper',
-    methodChip: 'OneLineCode-MethodChip',
-    gradient: 'OneLineCode-Gradient',
-    buttons: 'OneLineCode-Buttons',
-};
-
-type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'PATCH';
-type ThemeType = keyof Pick<
-    (typeof theme)['color'],
-    'primary' | 'success' | 'warning' | 'danger' | 'neutral'
->;
-
-const HTML_METHOD_CHIP_STYLES: Record<HttpMethod, ThemeType> = {
-    GET: 'primary',
-    POST: 'success',
-    PUT: 'warning',
-    DELETE: 'danger',
-    HEAD: 'neutral',
-    PATCH: 'neutral',
-};
-
-function getChipStyles(httpMethod: HttpMethod) {
-    const styles = theme.color[HTML_METHOD_CHIP_STYLES[httpMethod]];
-    return css`
-        background-color: ${styles.chipBackground};
-        color: ${'chipText' in styles ? styles.chipText : styles.text};
-    `;
-}
-
-type OneLineCodeWrapperProps = SyntaxHighlighterBaseStylesWrapperProps & {
-    $httpMethod?: HttpMethod;
-    $fitContent?: boolean;
-    $showBashPrefixes?: boolean;
-    $disabled?: boolean;
-}
-
-const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCodeWrapperProps>`
-    display: flex;
-    padding-right: ${theme.space.space16} !important;
-    ${({ $fitContent }) => $fitContent && css`
-        width: fit-content;
-    `}
-
-    ${({ $disabled }) => $disabled && css`
-        opacity: 0.5;
-        cursor: not-allowed;
-    `}
-
-    height: 4.6rem;
-
-    .${oneLineCodeClassNames.buttons} {
-        display: flex;
-        align-items: center;
-        gap: ${theme.space.space8};
-    }
-
-    .${oneLineCodeClassNames.methodChip} {
-        padding: 0 ${theme.space.space4};
-        border-radius: ${theme.radius.radius6};
-        height: 2.4rem;
-        ${({ $httpMethod }) => $httpMethod && getChipStyles($httpMethod)}
-        display: flex;
-        align-items: center;
-    }
-
-    .${oneLineCodeClassNames.gradientWrapper} {
-        position: relative;
-        flex: 1;
-        min-width: 0;
-        display: flex;
-
-        .${oneLineCodeClassNames.gradient} {
-            position: absolute;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            width: 4rem;
-            z-index: 5;
-            background: linear-gradient(
-                to right,
-                transparent,
-                ${theme.color.neutral.backgroundMuted} 3rem
-            );
-        }
-    }
-
-    .${oneLineCodeClassNames.scrollableWrapper} {
-        flex: 1;
-        overflow-x: auto;
-        overflow-y: hidden;
-        display: flex;
-        align-items: center;
-        gap: ${theme.space.space16};
-        padding: 0 ${theme.space.space8} !important;
-        margin-left: ${theme.space.space8} !important;
-        height: 100%;
-
-        scrollbar-width: thin;
-        scrollbar-color: ${theme.color.neutral.border} transparent;
-
-
-        pre {
-            display: flex;
-            flex: 1;
-            align-items: center;
-            height: 100%;
-
-            code {
-                height: 100%;
-                display: flex;
-                align-items: center;
-
-                & > div {
-                    padding-right: ${theme.space.space16};
-                }
-            }
-        }
-    }
-`;
-
-export type OneLineCodeProps = BoxProps & {
-    children: string;
-    language?: string;
-    size?: SharedTextSize;
-    httpMethod?: HttpMethod;
-    actionButtonLabel?: string;
-    onActionButtonClick?: () => Promise<void> | void;
-    fullWidth?: boolean;
-    secretPlaceholder?: string;
-    secret?: string;
-    disabled?: boolean;
-    hideCopyButton?: boolean;
-}
-
-export function OneLineCode({
-    children,
-    language,
-    size,
-    httpMethod,
-    actionButtonLabel,
-    onActionButtonClick,
-    fullWidth,
-    secretPlaceholder = '***',
-    secret,
-    disabled,
-    hideCopyButton,
-    ...rest
-}: OneLineCodeProps) {
-    const hasSecret = secret !== undefined;
-    const [showSecret, setShowSecret] = useState(false);
-    const codeWithSecret = useMemo(() => {
-        if (!hasSecret) return children;
-        return children.replace(secretPlaceholder, secret);
-    }, [children, secret, hasSecret, secretPlaceholder]);
-    const code = showSecret ? codeWithSecret : children;
-
-    const showBashPrefixes = language === 'bash';
-
-    const linePrefixes = useMemo(
-        () => (showBashPrefixes ? getBashLinePrefixes(code, [1], true) : {}),
-        [showBashPrefixes, code],
-    );
-
-    return (
-        <OneLineCodeWrapper
-            $httpMethod={httpMethod}
-            $fullWidth={fullWidth}
-            $showBashPrefixes={showBashPrefixes}
-            $disabled={disabled}
-            {...rest}
-        >
-            <div className={oneLineCodeClassNames.gradientWrapper}>
-                <div className={oneLineCodeClassNames.scrollableWrapper}>
-                    {httpMethod && (
-                        <Text className={oneLineCodeClassNames.methodChip} as='div'>
-                            {httpMethod}
-                        </Text>
-                    )}
-                    <PrismSyntaxHighlighter
-                        language={language}
-                        size={size}
-                        linePrefixes={linePrefixes}
-                        code={code}
-                        isSingleLine={true}
-                    />
-                </div>
-                <div className={oneLineCodeClassNames.gradient} />
-            </div>
-            <div className={oneLineCodeClassNames.buttons}>
-                {hasSecret && (
-                    <ActionButton
-                        onClick={() => setShowSecret((prev) => !prev)}
-                        data-test='toggle-visibility-button'
-                    >
-                        {showSecret ? (
-                            <EyeOffIcon size="16" />
-                        ) : (
-                            <EyeIcon size="16" />
-                        )}
-                    </ActionButton>
-                )}
-                {!hideCopyButton && <CopyButton code={codeWithSecret} />}
-                {!!onActionButtonClick && (
-                    <ActionButton onClick={onActionButtonClick}>
-                        {actionButtonLabel}
-                    </ActionButton>
-                )}
-            </div>
-        </OneLineCodeWrapper >
-    );
-}

package/src/components/code/prism_highlighter.tsx

@@ -1,180 +0,0 @@
-import clsx from 'clsx';
-import _ from 'lodash';
-import type { HighlightProps } from 'prism-react-renderer';
-import { Highlight, Prism, themes } from 'prism-react-renderer';
-import type { ReactNode } from 'react';
-import { forwardRef, useRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { Text } from '../text/index.js';
-import type { SharedTextSize } from '../text/text_shared.js';
-
-(typeof global !== 'undefined' ? global : window).Prism = Prism;
-
-const HIGHLIGHT_BACKGROUND_COLOR = 'rgba(22, 114, 235, 0.05)';
-
-const loadLanguages = async () => {
-    await Promise.all([
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-bash.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-rust.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-bash.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-docker.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-http.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-javascript.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-json.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-markup.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-python.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-typescript.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-xml-doc.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-yaml.js'),
-    ]);
-};
-
-void loadLanguages();
-
-type StyledPreProps = {
-    $hasLinePrefixes: boolean,
-    $isSingleLine: boolean
-};
-
-const StyledPre = styled.pre<StyledPreProps>`
-    width: 100%;
-    position: relative;
-    overflow: auto;
-    z-index: 2;
-    padding: ${({ $isSingleLine }) => ($isSingleLine ? 0 : `${theme.space.space16} 0`)};
-    margin: 0;
-
-    code {
-        min-width: 100%;
-        display: inline-block;
-        vertical-align: middle;
-
-        *,
-        *::before,
-        *::after {
-            text-shadow: none !important;
-            font-style: normal !important;
-            font-family: inherit !important;
-            font-size: inherit !important;
-            font-weight: inherit !important;
-            line-height: inherit !important;
-            background-color: transparent !important;
-        }
-
-        & > div {
-            display: block;
-
-            &.highlighted {
-                background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                border-left: 6px solid ${theme.color.neutral.border} !important;
-                padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
-            }
-
-            ${({ $isSingleLine }) => !$isSingleLine && css<{$hasLinePrefixes: boolean}>`
-                &:hover {
-                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                    border-left: 6px solid ${theme.color.neutral.border} !important;
-                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
-                }
-            `}
-
-            ${({ $isSingleLine }) => ($isSingleLine ? css<StyledPreProps>`
-                white-space: nowrap;
-                vertical-align: text-top;
-            ` : css<StyledPreProps>`
-                padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? theme.space.space8 : theme.space.space16)};
-                padding-right: ${theme.space.space16};
-
-                &:hover {
-                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                    border-left: 6px solid ${theme.color.neutral.border} !important;
-                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
-                }
-            `)}
-        }
-    }
-`;
-
-export const CodeHighlighterLinePrefix = styled(Text).attrs({ as: 'span' })`
-    display: inline-block;
-    margin-right: ${theme.space.space16};
-    text-align: right;
-    min-width: ${theme.space.space24};
-    color: ${({ color }) => color || theme.color.neutral.textSubtle};
-    user-select: none;
-    -webkit-user-select: none;
-`;
-
-export const CodeHighlighterLineBashPrefix = styled(CodeHighlighterLinePrefix)<{ $isOneLine?: boolean }>`
-    min-width: ${({ $isOneLine }) => ($isOneLine ? 'unset' : theme.space.space16)} !important;
-`;
-
-type SyntaxHighlighterProps = Omit<HighlightProps, 'children' | 'language'> & {
-    size?: SharedTextSize,
-    linePrefixes?: Record<string, ReactNode>,
-    highlightLines?: number[],
-    language?: string,
-    className?: string,
-    isSingleLine: boolean,
-};
-
-export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterProps>(({
-    size = 'regular',
-    linePrefixes = {},
-    highlightLines = [],
-    language = 'javascript',
-    className,
-    isSingleLine,
-    ...rest
-}, ref) => {
-    const { uiTheme } = useSharedUiDependencies();
-    const hasLinePrefixes = !_.isEmpty(linePrefixes);
-    const highlightedLinesObject = useRef<Record<number, boolean>>(Object.fromEntries(highlightLines.map((e) => [e, true])));
-
-    return (
-        <Highlight
-            theme={uiTheme === 'DARK' ? themes.nightOwl : themes.oneLight}
-            language={language}
-            {...rest}
-        >
-            {({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (
-                <StyledPre
-                    className={clsx(className, prismClassName)}
-                    $hasLinePrefixes={hasLinePrefixes}
-                    $isSingleLine={isSingleLine}
-                    ref={ref}
-                >
-                    <Text
-                        size={size}
-                        type='code'
-                        as='code'
-                    >
-                        {tokens.map((line, i) => (
-                            <div key={i} {...getLineProps({ line, className: highlightedLinesObject.current[i + 1] ? 'highlighted' : '' })}>
-                                {hasLinePrefixes && (linePrefixes[i + 1] || <CodeHighlighterLinePrefix />)}
-                                {line.map((token, key) => (
-                                    <span key={key} {...getTokenProps({ token })} />
-                                ))}
-                            </div>
-                        ))}
-                    </Text>
-                </StyledPre>
-            )}
-        </Highlight>
-    );
-});

package/src/components/color_wheel_gradient.tsx

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-export interface ColorWheelGradientProps {
-    translateX?: number,
-    translateY?: number,
-    rotation?: number,
-    radius?: number,
-    blurSize?: number,
-}
-
-export const ColorWheelGradient = styled.div<ColorWheelGradientProps>`${({ radius, rotation = 0, blurSize = 40, translateX = 0, translateY = 0 }) => `
-    z-index: 1;
-    position: absolute;
-    width: ${radius ? `${radius}px` : 'auto'};
-    height: ${radius ? `${radius}px` : 'auto'};
-    transform-origin: center;
-    transform: translate(${translateX}px, ${translateY}px) rotate(${rotation}deg);
-
-    opacity: 0.30;
-    background: conic-gradient(
-        rgba(93, 133, 225, 0.99) 0deg,
-        rgba(106, 20, 222, 0.99) 69deg,
-        rgba(228, 68, 103, 0.99) 150deg,
-        rgba(250, 129, 54, 0.99) 221deg,
-        rgba(240, 178, 27, 0.99) 287deg,
-        rgba(18, 150, 111, 0.99) 360deg
-    );
-
-    border-radius: 50%;
-    filter: blur(${blurSize}px)
-`}`;

package/src/components/floating/index.ts

@@ -1,3 +0,0 @@
-export * from './menu.js';
-export * from './menu_components.js';
-export * from './menu_common.js';

package/src/components/floating/menu.tsx

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

@@ -1,31 +0,0 @@
-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,
-        }),
-    ],
-});