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

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

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

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

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