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

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

@@ -0,0 +1,180 @@
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../../design_system/theme.js';
+import { Box } from '../../box.js';
+import type { SharedTextProps, SharedTextSize } from '../../text/text_shared.js';
+
+export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
+    $fullWidth?: boolean;
+    $fullHeight?: string;
+    $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 const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
+    $hasHeader: boolean;
+    $gradientRotation?: number;
+    $highlightLines?: number[];
+    $hasActionButton?: boolean;
+    $hasTabs?: boolean;
+    $fullWidth?: boolean;
+    $showLineNumbers?: boolean;
+    $fullHeight?: boolean;
+    size?: SharedTextSize,
+}>`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 266px;
+
+    .CodeBlock-Header {
+        padding-top: 7px; /* only 7 due to transform translateY(1px) */
+        gap: ${theme.space.space4};
+        background-color: ${theme.color.neutral.backgroundSubtle};
+        border-bottom: 1px solid ${theme.color.neutral.border};
+        z-index: 3;
+        position: relative;
+        display: flex;
+        height: 4rem;
+
+        .CodeBlock-HeaderTitle {
+            margin-left: ${theme.space.space16};
+            margin-bottom: ${theme.space.space8};
+            margin-top: 0.5rem;
+        }
+
+        .CodeBlock-HeaderTabsWrapper {
+            display: flex;
+            transform: translateY(1px);
+            padding-right: ${theme.space.space32};
+            padding-left: ${theme.space.space8};
+            overflow-x: auto;
+            overflow-y: hidden;
+            gap: ${theme.space.space4};
+
+            margin-right: ${({ $hasActionButton }) => ($hasActionButton ? '128' : '20')}px;
+
+            .CodeBlock-Tab {
+                border-radius: ${theme.radius.radius8};
+                background-color: transparent;
+                border: 1px solid transparent;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+                border-bottom: none;
+                cursor: pointer;
+                height: 3.2rem;
+                max-width: 26rem;
+
+                color: ${theme.color.neutral.textMuted};
+
+                text-align: center;
+                white-space: nowrap;
+
+                padding: 0.2rem ${theme.space.space8} 0.6rem ${theme.space.space8};
+                p {
+                    padding-top: 0.2rem;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+
+
+                &.selected {
+                    color: ${theme.color.neutral.text};
+                    border: 1px solid ${theme.color.neutral.border};
+                    background-color: ${theme.color.neutral.backgroundMuted};
+                    border-bottom: none;
+                    padding: 0.6rem ${theme.space.space8};
+                    p {
+                        padding-top: 0;
+                    }
+                }
+
+                &:hover {
+                    border: 1px solid ${theme.color.neutral.border};
+                    border-bottom: none;
+                    text-decoration: none;
+                }
+
+                &::after {
+                    /* ensures same width of text when switching tabs and making it bold */
+                    ${theme.typography.shared.tablet.bodyMStrong}
+                    display: block;
+                    content: attr(title);
+                    font-weight: bold;
+                    height: 0px;
+                    color: transparent;
+                    overflow: hidden;
+                    visibility: hidden;
+                }
+            }
+        }
+    }
+
+
+    .CodeBlock-TopRightActionsWrapper {
+        position: absolute;
+        top: 0;
+        right: 0;
+        ${({ $hasHeader }) => ($hasHeader
+        ? css`
+            padding-top: 6px;
+            padding-right: ${theme.space.space8};`
+        : css`
+            padding-top: ${theme.space.space16};
+            padding-right: ${theme.space.space16};`)}
+
+        display: flex;
+        gap: ${theme.space.space8};
+        z-index: 3;
+        height: 3.9rem;
+
+        ${({ $hasHeader }) => $hasHeader && css`
+                padding-left: ${theme.space.space32};
+                background: linear-gradient(
+                    to right,
+                    transparent,
+                    ${theme.color.neutral.backgroundSubtle} 20px
+                );
+            `}
+    }
+
+    .CodeBlock-Gradient {
+        right: 0px;
+        bottom: 0px;
+
+        aspect-ratio: 1/1;
+        height: 250%;
+
+        transform: translate(50%, 70%) rotate(${({ $gradientRotation }) => $gradientRotation ?? 0}deg) scaleX(-1);
+    }
+
+    .CodeBlock-HederDotsWrapper {
+        display: flex;
+        padding: ${theme.space.space8};
+        align-items: flex-start;
+        gap: ${theme.space.space8};
+        margin-bottom: 0.5rem;
+        margin-left: ${theme.space.space8};
+        background: transparent;
+
+        .CodeBlock-HeaderDot {
+            width: 1.2rem;
+            height: 1.2rem;
+            border-radius: 50%;
+            background-color: ${theme.color.neutral.iconSubtle};
+        }
+    }
+`;

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

@@ -0,0 +1,224 @@
+import clsx from 'clsx';
+import React, { useMemo, useRef, useState } from 'react';
+
+import type { RegularBoxProps } from '../../box.js';
+import { ColorWheelGradient } from '../../color_wheel_gradient.js';
+import { Link } from '../../link.js';
+import { Text } from '../../text/index.js';
+import type { SharedTextSize } from '../../text/text_shared.js';
+import { ActionButton, CopyButton } from '../action_button.js';
+import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
+import { CodeBlockWrapper } from './code_block.styled.js';
+import { getBashLinePrefixes, getNumberLinePrefixes } from './utils.js';
+
+type CodeTab = {
+    key: string;
+    label: string;
+    code: string;
+    id?: string;
+    highlightLines?: number[];
+    language?: string;
+    bashCommandsStart?: number[];
+    to?: string;
+}
+
+type HeaderProps = {
+    tabs: CodeTab[] | null;
+    currentTab: CodeTab | null;
+    onTabChange: (tab: CodeTab, e: React.MouseEvent) => void;
+    title?: string;
+    showBashHeader?: boolean;
+}
+
+const LANGUAGES_WITHOUT_LINE_NUMBERS = ['json', 'jsonp', 'jsonp', 'rss', 'yaml', 'xml', 'html', 'bash', 'text', 'dockerfile', 'http'];
+
+const HeaderDots = () => {
+    return (
+        <div className="CodeBlock-HederDotsWrapper">
+            <div className="CodeBlock-HeaderDot" />
+            <div className="CodeBlock-HeaderDot" />
+            <div className="CodeBlock-HeaderDot" />
+        </div>
+    );
+};
+
+const Header = ({
+    tabs,
+    currentTab,
+    showBashHeader,
+    onTabChange,
+    title,
+}: HeaderProps) => {
+    return (
+        <div className="CodeBlock-Header">
+            {showBashHeader && <HeaderDots />}
+            {title && (
+                <Text weight="bold" className="CodeBlock-HeaderTitle">
+                    {title}
+                </Text>
+            )}
+            <div className="CodeBlock-HeaderTabsWrapper">
+                {tabs?.map((tab) => {
+                    const selected = tab.key === currentTab?.key;
+                    const props = {
+                        className: clsx('CodeBlock-Tab', { selected }),
+                        onClick: (e: React.MouseEvent) => onTabChange(tab, e),
+                        title: tab.label,
+                        id: tab.id ?? tab.key,
+                    };
+
+                    const label = <Text weight={tab.key === currentTab?.key ? 'bold' : 'normal'}>
+                        {tab.label}
+                    </Text>;
+
+                    if (tab.to) {
+                        return (
+                            <Link key={tab.key} to={tab.to} {...props}>
+                                {label}
+                            </Link>
+                        );
+                    }
+                    return (
+                        <div key={tab.key} {...props}>
+                            {label}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export type CodeBlockProps = RegularBoxProps & {
+    content: string | CodeTab[]; // TODO: Try to make it work with children props
+    size?: SharedTextSize;
+    language?: string | undefined;
+    className?: string;
+    hideBashHeader?: boolean;
+    onTabChange?: (key: string, e: React.MouseEvent) => Promise<void> | void;
+    showGradient?: boolean;
+    gradientRotation?: number;
+    highlightLines?: number[];
+    showActionButton?: boolean;
+    actionButtonLabel?: string;
+    onActionButtonClick?: () => Promise<void> | void;
+    defaultTabKey?: string;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    title?: string;
+    hideCopyButton?: boolean;
+    bashCommandsStart?: number[];
+    hideBashPromptPrefixes?: boolean;
+    hideLineNumbers?: boolean | undefined;
+}
+
+export const CodeBlock = ({
+    content,
+    size,
+    language,
+    highlightLines,
+    onTabChange,
+    defaultTabKey,
+    showGradient,
+    hideBashHeader,
+    showActionButton,
+    fullWidth,
+    actionButtonLabel,
+    gradientRotation = 340,
+    hideLineNumbers,
+    fullHeight,
+    title,
+    hideCopyButton,
+    bashCommandsStart,
+    hideBashPromptPrefixes,
+    onActionButtonClick,
+    ...rest
+}: CodeBlockProps) => {
+    const isMultiTab = content instanceof Array;
+    const defaultTab = isMultiTab
+        ? content.find((tab) => tab.key === defaultTabKey) ?? content[0]
+        : null;
+    const [currentTab, setCurrentTab] = useState<CodeTab | null>(defaultTab);
+    const currentCode = (isMultiTab ? currentTab?.code : content)?.trim() ?? '';
+    const currentLanguage = language ?? currentTab?.language;
+
+    const currentHighlightLines = useMemo(
+        () => (isMultiTab ? currentTab?.highlightLines ?? [] : highlightLines),
+        [isMultiTab, currentTab, highlightLines],
+    );
+
+    const isBash = currentLanguage === 'bash';
+
+    const showLineNumbers = !hideLineNumbers && !LANGUAGES_WITHOUT_LINE_NUMBERS.includes(currentLanguage ?? '');
+    const showBashHeader = isBash && !hideBashHeader && !isMultiTab;
+
+    const showHeader = isMultiTab || !!title || showBashHeader;
+
+    const syntaxHighlighterRef = useRef<HTMLPreElement>(null);
+
+    const handleTabClick = async (tab: CodeTab, e: React.MouseEvent) => {
+        await onTabChange?.(tab.key, e);
+        setCurrentTab(tab);
+        syntaxHighlighterRef.current?.scrollTo(0, 0);
+    };
+
+    const showBashPrompt = isBash && !hideBashPromptPrefixes;
+    const effectiveBashCommandsStart = currentTab?.bashCommandsStart ?? bashCommandsStart;
+
+    const linePrefixes = useMemo(() => {
+        if (showBashPrompt) {
+            return getBashLinePrefixes(currentCode, effectiveBashCommandsStart);
+        }
+
+        if (showLineNumbers) {
+            return getNumberLinePrefixes(currentCode);
+        }
+
+        return {};
+    }, [showLineNumbers, showBashPrompt, currentCode, effectiveBashCommandsStart]);
+
+    return (
+        <CodeBlockWrapper
+            $hasHeader={showHeader}
+            $gradientRotation={gradientRotation}
+            $hasActionButton={showActionButton}
+            $hasTabs={isMultiTab}
+            $fullWidth={fullWidth}
+            $fullHeight={fullHeight}
+            $showLineNumbers={showLineNumbers}
+            {...rest}
+        >
+            {showHeader && (
+                <Header
+                    tabs={isMultiTab ? content : null}
+                    currentTab={currentTab}
+                    onTabChange={handleTabClick}
+                    showBashHeader={showBashHeader}
+                    title={title}
+                />
+            )}
+
+            <PrismSyntaxHighlighter
+                code={currentCode}
+                linePrefixes={linePrefixes}
+                highlightLines={currentHighlightLines}
+                language={currentLanguage || 'text'}
+                size={size}
+                ref={syntaxHighlighterRef}
+                isSingleLine={false}
+            />
+
+            <div className="CodeBlock-TopRightActionsWrapper">
+                {showActionButton && <ActionButton successStyle onClick={onActionButtonClick}>{actionButtonLabel ?? 'Run on Apify'}</ActionButton>}
+                {!hideCopyButton && <CopyButton code={currentCode} />}
+            </div>
+
+            {showGradient && (
+                <ColorWheelGradient
+                    className="CodeBlock-Gradient"
+                    blurSize={69}
+                />
+            )}
+        </CodeBlockWrapper >
+    );
+};

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

@@ -0,0 +1,257 @@
+import clsx from 'clsx';
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box.js';
+import { Link, type RegularLinkProps } from '../../link.js';
+import { HeadingShared } from '../../text/heading_shared.js';
+import { CodeBlock, type CodeBlockProps } from './code_block.js';
+
+export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi' | 'python' | 'typescript';
+type CodeBlockTabConfig = {
+    label: string;
+    language: string;
+    src: string;
+};
+
+export const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig> = {
+    cli: {
+        label: 'CLI',
+        language: 'bash',
+        src: 'https://apify.com/img/icons/code.svg',
+    },
+    http: {
+        label: 'HTTP',
+        language: 'bash',
+        src: 'https://apify.com/img/icons/http.svg',
+    },
+    javascript: {
+        label: 'JavaScript',
+        language: 'javascript',
+        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
+        src: 'https://apify.com/img/template-icons/javascript.svg',
+    },
+    mcp: {
+        label: 'MCP',
+        language: 'bash',
+        src: 'https://apify.com/img/icons/mcp.svg',
+    },
+    openapi: {
+        label: 'OpenAPI',
+        language: 'json',
+        src: 'https://apify.com/img/icons/openapi.svg',
+    },
+    python: {
+        label: 'Python',
+        language: 'python',
+        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
+        src: 'https://apify.com/img/template-icons/python.svg',
+    },
+    typescript: {
+        label: 'TypeScript',
+        language: 'typescript',
+        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
+        src: 'https://apify.com/img/template-icons/typescript.svg',
+    },
+};
+
+type SharedBoxProps = Omit<RegularBoxProps, 'as' | 'children' | 'onClick'> & MarginSpacingProps;
+
+type SharedCodeBlockProps = Omit<CodeBlockProps, 'bashCommandsStart' | 'content' | 'language' | 'defaultTabKey' | 'onTabChange'>;
+type SharedLinkProps = Pick<RegularLinkProps, 'to' | 'rel' | 'target'>;
+
+export type CodeBlockTabProps = {
+    key: CodeBlockTabKey;
+    bashCommandsStart?: number[];
+    content: string;
+    languageOverride?: string;
+    onClick?: (e: React.MouseEvent) => void;
+} & Partial<SharedLinkProps>;
+
+type CodeBlockWithTabsProps = SharedBoxProps & {
+    codeBlockProps: SharedCodeBlockProps;
+    currentTabKey: CodeBlockTabKey;
+    tabs: CodeBlockTabProps[];
+};
+
+export const CODE_BLOCK_WITH_TABS_CLASSNAMES = {
+    WRAPPER: 'CodeBlockWithTabsWrapper',
+    TABS: 'CodeBlockWithTabsTabs',
+    TAB: 'CodeBlockWithTabsTab',
+    CONTENT: 'CodeBlockWithTabsContent',
+};
+
+const CodeBlockWithTabsWrapper = styled(Box)`
+    .${CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS} {
+        min-width: 266px;
+        height: 72px;
+        padding-inline: ${theme.space.space8};
+        display: flex;
+        gap: ${theme.space.space4};
+        overflow-x: auto;
+        background-color: ${theme.color.neutral.backgroundSubtle};
+        border: 1px solid ${theme.color.neutral.border};
+        border-bottom: none;
+        border-top-right-radius: ${theme.radius.radius12};
+        border-top-left-radius: ${theme.radius.radius12};
+        position: relative;
+
+        & > [role="tabpanel"] {
+            position: sticky;
+            right: 0;
+            top: 0;
+            height: 100%;
+            width: 0;
+            margin-left: auto;
+
+            &::after {
+                right: -${theme.space.space8};
+                height: 100%;
+                width: ${theme.space.space16};
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.backgroundSubtle} 100%);
+                content: ' ';
+                pointer-events: none;
+                position: absolute;
+            }
+        }
+
+        @media ${theme.device.tablet} {
+            height: 88px;
+            justify-content: center;
+            gap: ${theme.space.space24};
+            padding-inline: ${theme.space.space24};
+
+            & > [role="tabpanel"] {
+                margin-left: unset;
+
+                &::after {
+                    right: -${theme.space.space24};
+                    width: ${theme.space.space32};
+                }
+            }
+        }
+    }
+
+    .${CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB} {
+        min-width: 64px;
+        position: relative;
+        padding: ${theme.space.space12} ${theme.space.space8};
+        color: ${theme.color.neutral.textMuted};
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: flex-end;
+        gap: ${theme.space.space4};
+        cursor: pointer;
+
+        img {
+            width: 20px;
+            height: 20px;
+        }
+
+        [role="tabpanel"] {
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            color: ${theme.color.neutral.text};
+            background-color: ${theme.color.primaryBlack.action};
+            border-radius: ${theme.radius.radiusFull};
+            display: none;
+            position: absolute;
+            z-index: 2;
+        }
+
+        &.selected {
+            color: ${theme.color.neutral.text};
+
+            [role="tabpanel"] {
+                display: block;
+            }
+        }
+
+        &:hover {
+            color: ${theme.color.neutral.text};
+            text-decoration: none;
+        }
+    }
+
+    .${CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT} {
+        max-width: initial;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+`;
+
+const IMG_RESIZE = {
+    width: 20,
+    height: 20,
+};
+
+export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, tabs, ...props }: CodeBlockWithTabsProps) => {
+    const { generateProxyImageUrl } = useSharedUiDependencies();
+    const currentTab = tabs.find((tab) => tab.key === currentTabKey) ?? tabs[0];
+
+    return (
+        <CodeBlockWithTabsWrapper className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className)} {...props}>
+            <div className={CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS}>
+                {tabs.map((tab) => {
+                    const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
+                    const selected = tab.key === currentTab?.key;
+
+                    const commonProps = {
+                        className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
+                        'data-test': `code-block-tab-${tab.key}`,
+                        onClick: tab.onClick,
+                    };
+                    const children = (
+                        <>
+                            <img src={generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src} alt={label} />
+                            <HeadingShared type="titleS" as="p">
+                                {label}
+                            </HeadingShared>
+                            <div role="tabpanel" />
+                        </>
+                    );
+
+                    // if the tab has a 'to' prop, render a Link component
+                    if (tab.to) {
+                        return (
+                            <Link
+                                {...commonProps}
+                                to={tab.to}
+                                rel={tab.rel}
+                                target={tab.target}
+                                key={tab.key}
+                            >
+                                {children}
+                            </Link>
+                        );
+                    }
+
+                    return (
+                        <div
+                            {...commonProps}
+                            role="button"
+                            key={tab.key}
+                        >
+                            {children}
+                        </div>
+                    );
+                })}
+
+                <div role="tabpanel" />
+            </div>
+            <CodeBlock
+                bashCommandsStart={currentTab?.bashCommandsStart}
+                content={currentTab?.content ?? ''}
+                language={currentTab.languageOverride ?? CODE_BLOCK_TAB_CATALOG[currentTab?.key]?.language}
+                className={CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT}
+                hideBashHeader
+                {...codeBlockProps}
+            />
+        </CodeBlockWithTabsWrapper>
+    );
+};