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

package/src/components/code/inline_code/inline_code.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../../design_system/theme';
+import type { RegularBoxProps } from '../../box';
+import { Text } from '../../text';
+import type { SharedTextSize } from '../../text/text_shared';
+
+// TODO: We should not need to export these once we consolidate Markdown
+export const inlineCodeStyles = css`
+    width: fit-content;
+    padding: ${theme.space.space2} 0.6rem;
+    background-color: ${theme.color.neutral.backgroundMuted};
+    border-radius: ${theme.radius.radius8};
+    border: 1px solid ${theme.color.neutral.border};
+`;
+
+const Wrapper = styled.span`
+    code {
+        ${inlineCodeStyles}
+    }
+`;
+
+type InlineCodeProps = RegularBoxProps & {
+    children: React.ReactNode,
+    size?: SharedTextSize,
+}
+
+// This might be just a Chip component
+export const InlineCode: React.FC<InlineCodeProps> = ({
+    children,
+    size,
+    ...props
+}) => (
+    <Wrapper {...props}>
+        <Text
+            type="code"
+            as="code"
+            size={size}
+        >
+            {children}
+        </Text>
+    </Wrapper>
+);

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

@@ -0,0 +1,232 @@
+import React, { useMemo, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import { Eye16, EyeOff16 } from '@apify/icons';
+
+import { theme } from '../../../design_system/theme';
+import type { BoxProps } from '../../box';
+import { Text } from '../../text';
+import type { SharedTextSize } from '../../text/text_shared';
+import { ActionButton, CopyButton } from '../action_button';
+import SyntaxHighlighter, { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter';
+import type { SyntaxHighlighterBaseStylesWrapperProps } from '../syntax_highlighter';
+
+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};
+        margin-top: ${theme.space.space2};
+        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;
+        padding-top: ${theme.space.space8};
+        display: flex;
+
+        .${oneLineCodeClassNames.gradient} {
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            width: 4rem;
+            background: linear-gradient(
+                to right,
+                transparent,
+                ${theme.color.neutral.backgroundMuted} 3rem
+            );
+        }
+    }
+
+    .${oneLineCodeClassNames.scrollableWrapper} {
+        flex: 1;
+        overflow-x: auto;
+        overflow-y: hidden;
+        display: flex;
+        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;
+
+
+        .CodePre {
+            overflow: unset !important;
+            display: flex;
+            flex: 1;
+            align-items: center;
+            height: 2.8rem;
+
+            code {
+                & > span {
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    vertical-align: text-top;
+                    ${({ $showBashPrefixes }) => $showBashPrefixes && css`
+                        &::before {
+                            color: ${theme.color.lavender.base};
+                            padding-right: ${theme.space.space16};
+                            min-width: ${theme.space.space24};
+                            user-select: none;
+                            -webkit-user-select: none;
+                            content: "$";
+                            font-size: 1em;
+                        }
+                    `}
+                }
+            }
+        }
+    }
+`;
+
+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';
+
+    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>
+                    )}
+                    <SyntaxHighlighter
+                        language={language}
+                        size={size}
+                        wrapLines
+                    >
+                        {code}
+                    </SyntaxHighlighter>
+                </div>
+                <div className={oneLineCodeClassNames.gradient} />
+            </div>
+            <div className={oneLineCodeClassNames.buttons}>
+                {hasSecret && (
+                    <ActionButton
+                        onClick={() => setShowSecret((prev) => !prev)}
+                        data-test='toggle-visibility-button'
+                    >
+                        {showSecret ? (
+                            <EyeOff16 viewBox="0 0 16 16" />
+                        ) : (
+                            <Eye16 viewBox="0 0 16 16" />
+                        )}
+                    </ActionButton>
+                )}
+                {!hideCopyButton && <CopyButton code={codeWithSecret} />}
+                {!!onActionButtonClick && (
+                    <ActionButton onClick={onActionButtonClick}>
+                        {actionButtonLabel}
+                    </ActionButton>
+                )}
+            </div>
+        </OneLineCodeWrapper >
+    );
+}

package/src/components/code/syntax_highlighter.tsx

@@ -0,0 +1,125 @@
+import React, { forwardRef } from 'react';
+// https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/228
+import type { SyntaxHighlighterProps as ReactSyntaxHighlighterProps } from 'react-syntax-highlighter';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore The library is badly typed and does not export the type
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import dockerFile from 'react-syntax-highlighter/dist/esm/languages/prism/docker';
+import http from 'react-syntax-highlighter/dist/esm/languages/prism/http';
+import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
+import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
+import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import xml from 'react-syntax-highlighter/dist/esm/languages/prism/xml-doc';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
+import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore The library is badly typed and does not export the type
+import dark from 'react-syntax-highlighter/dist/esm/styles/prism/night-owl';
+import light from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme';
+import { useSharedUiDependencies } from '../../ui_dependency_provider';
+import { Box } from '../box';
+import { Text, type SharedTextProps } from '../text';
+import type { SharedTextSize } from '../text/text_shared';
+
+ReactSyntaxHighlighter.registerLanguage('typescript', ts);
+ReactSyntaxHighlighter.registerLanguage('javascript', js);
+ReactSyntaxHighlighter.registerLanguage('json', json);
+ReactSyntaxHighlighter.registerLanguage('bash', bash);
+ReactSyntaxHighlighter.registerLanguage('docker', dockerFile);
+ReactSyntaxHighlighter.registerLanguage('html', html);
+ReactSyntaxHighlighter.registerLanguage('xml', xml);
+ReactSyntaxHighlighter.registerLanguage('yaml', yaml);
+ReactSyntaxHighlighter.registerLanguage('python', python);
+ReactSyntaxHighlighter.registerLanguage('http', http);
+ReactSyntaxHighlighter.registerLanguage('jsonp', json);
+ReactSyntaxHighlighter.registerLanguage('jsonl', json);
+ReactSyntaxHighlighter.registerLanguage('rss', xml);
+
+const StyledPre = styled(Text)`
+    width: 100%;
+    position: relative;
+
+    *,
+    *::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;
+    }
+
+    code {
+        min-width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+        overflow: hidden;
+    }
+`;
+
+// Syntax highlighter uses inline style a lot which makes it hard to override them. To do so, we make the library not
+// use styles that we wish to set on our own (font-based styles, spacing, background, ...),
+const inlineCssReset = {
+    fontFamily: undefined,
+    fontSize: undefined,
+    fontWeight: undefined,
+    lineHeight: undefined,
+    background: undefined,
+    margin: undefined,
+    padding: undefined,
+};
+
+type SyntaxHighlighterProps = ReactSyntaxHighlighterProps & { size: SharedTextSize };
+
+export const SyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterProps>(({
+    size,
+    children,
+    ...rest
+}, ref) => {
+    const { uiTheme } = useSharedUiDependencies();
+
+    const PreTag = (preProps: any) => {
+        return <StyledPre {...preProps} size={size} forwardedAs='pre' type='code' ref={ref}/>;
+    };
+
+    return (
+        <ReactSyntaxHighlighter
+            PreTag={PreTag}
+            customStyle={inlineCssReset}
+            className="CodePre"
+            style={uiTheme === 'DARK' ? dark : light}
+            {...rest}
+        >
+            {children}
+        </ReactSyntaxHighlighter>
+    );
+});
+
+export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
+    $fullWidth?: boolean;
+    $fullHeight?: boolean;
+    $showLineNumbers?: boolean;
+}
+
+export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`
+    background-color: ${theme.color.neutral.backgroundMuted} !important;
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius12};
+    overflow: hidden;
+
+    width: 100%;
+    ${({ $fullWidth }) => !$fullWidth && css`max-width: 860px;`}
+    ${({ $fullHeight }) => !$fullHeight && css`max-height: 600px;`}
+
+    background-color: transparent;
+    position: relative;
+`;
+
+export default SyntaxHighlighter;

package/src/components/color_wheel_gradient.tsx

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

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

package/src/components/floating/menu.tsx

@@ -0,0 +1,191 @@
+import {
+    useRole,
+    useListNavigation,
+    useTypeahead,
+    useClick,
+    useDismiss,
+    useInteractions,
+    FloatingPortal,
+    FloatingFocusManager,
+} from '@floating-ui/react';
+import clsx from 'clsx';
+import React, {
+    useState,
+    useRef,
+    useMemo,
+} from 'react';
+
+import {
+    Box,
+    type BoxProps,
+} from '../box';
+import { Text } from '../text';
+import { useFloatingMenu } from './menu_common';
+import {
+    DropdownMenuBaseComponent,
+    ListMenuComponent,
+    ListMenuItemComponent,
+} from './menu_components';
+
+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<Array<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>
+            <FloatingPortal>
+                <FloatingFocusManager
+                    context={context}
+                    modal={false}
+                >
+                    <MenuComponent
+                        ref={refs.setFloating}
+                        style={{
+                            ...floatingStyles,
+                            // TODO: We should consider not doing this by default
+                            ...!isOpen && { display: 'none' }, // needs to be rendered, because of SEO
+                        }}
+                        {...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 {
+    useFloating,
+    offset,
+    size,
+    autoUpdate,
+} 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,
+        }),
+    ],
+});