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

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>
-    );
-};

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

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

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

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