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

package/src/components/code/code_block/utils.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+
+import { theme } from '../../../design_system/theme.js';
+import { CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix } from '../prism_highlighter.js';
+
+// input: [2, 4, 5, 6, 8, 10, 11, 12]
+// returns string indicating what type of line it is (bashStartCommand, bashCommand, bashEmptyLine)
+// commands start -> bashStartCommand
+// every next line after command start until next command start or empty line -> bashCommand
+export const getBashLinePrefixes = (
+    code: string,
+    bashCommandsStart: number[] = [],
+    isOneLine?: boolean) => {
+    const lines = code.split('\n').map((line) => line.trim());
+
+    const bashLinePrefixesArray = lines.map((line, i) => {
+        const isEmptyLine = line.startsWith('#') || !line;
+
+        // by default each line that is not empty or comment is a command start
+        if (bashCommandsStart.length === 0) {
+            return isEmptyLine ? (
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} />
+            ) : (
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>$</CodeHighlighterLineBashPrefix>
+            );
+        }
+
+        if (bashCommandsStart.includes(i + 1)) {
+            return (
+                <CodeHighlighterLineBashPrefix
+                    $isOneLine={isOneLine}
+                    color={theme.color.lavender.base}
+                    key={`code-highlighter-line-bash-prefix-${i}`}
+                >$</CodeHighlighterLineBashPrefix>
+            );
+        }
+
+        if (isEmptyLine) {
+            return (
+                <CodeHighlighterLineBashPrefix
+                    $isOneLine={isOneLine}
+                    key={`code-highlighter-line-bash-prefix-${i}`}
+                />
+            );
+        }
+
+        return (
+            <CodeHighlighterLineBashPrefix
+                $isOneLine={isOneLine}
+                color={theme.color.lavender.base}
+                key={`code-highlighter-line-bash-prefix-${i}`}
+            >&lt;</CodeHighlighterLineBashPrefix>
+        );
+    });
+
+    return Object.fromEntries(bashLinePrefixesArray.map((linePrefix, i) => [i + 1, linePrefix]));
+};
+
+export const getNumberLinePrefixes = (code: string): Record<number, ReactNode> => {
+    const numberOfLines = code.split('\n').length;
+    const numbersArray = Array.from({ length: numberOfLines }, (_, i) => i + 1);
+
+    return Object.fromEntries(numbersArray.map((number) => [
+        number,
+        <CodeHighlighterLinePrefix key={`code-highlighter-line-prefix-${number}`}>{number}</CodeHighlighterLinePrefix>,
+    ]));
+};

package/src/components/code/index.ts

@@ -0,0 +1,5 @@
+export * from './code_block/code_block.js';
+export * from './code_block/code_block_with_tabs.js';
+export * from './one_line_code/one_line_code.js';
+export * from './inline_code/inline_code.js';
+export * from './prism_highlighter.js';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { CheckIcon, CopyIcon } from '@apify/ui-icons';
+
+import { theme } from '../../../design_system/theme.js';
+import { useCopyToClipboard } from '../../../utils/copy_to_clipboard.js';
+import type { RegularBoxProps } from '../../box.js';
+import { Text } from '../../text/index.js';
+import type { SharedTextSize } from '../../text/text_shared.js';
+
+// 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 CopyButtonWrapper = styled.div`
+    display: inline-flex;
+    cursor: pointer;
+    vertical-align: text-top;
+    margin-left: ${theme.space.space4};
+`;
+
+const CopyButton: React.FC<{ text: string }> = ({ text }) => {
+    const [isCopied, copyToClipboard] = useCopyToClipboard({ text });
+    return <CopyButtonWrapper role='button' onClick={copyToClipboard} title='Copy to clipboard'>
+        {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
+    </CopyButtonWrapper>;
+};
+
+const Wrapper = styled.span`
+    code {
+        ${inlineCodeStyles}
+    }
+`;
+
+export type InlineCodeProps = RegularBoxProps & {
+    children: React.ReactNode,
+    size?: SharedTextSize,
+    withCopyButton?: boolean,
+}
+
+// This might be just a Chip component
+export const InlineCode: React.FC<InlineCodeProps> = ({
+    children,
+    size,
+    withCopyButton,
+    ...props
+}) => <Wrapper {...props}>
+    <Text
+        type="code"
+        as="code"
+        size={size}
+    >
+        {children}
+        {withCopyButton && <CopyButton text={children?.toString() ?? ''} />}
+    </Text>
+</Wrapper>;

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

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

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

@@ -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.js';
+export * from './menu_components.js';
+export * from './menu_common.js';