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

package/src/components/chip.tsx

@@ -0,0 +1,121 @@
+import clsx from 'clsx';
+import type { FC } from 'react';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { ValueOf } from '@apify-packages/types';
+
+import { theme } from '../design_system/theme';
+import type { RegularBoxProps } from './box';
+
+const CHIP_SIZES = {
+    SMALL: 'S',
+    MEDIUM: 'M',
+    LARGE: 'L',
+} as const;
+type CHIP_SIZES = ValueOf<typeof CHIP_SIZES>;
+
+const CHIP_TYPES = {
+    DEFAULT: 'DEFAULT',
+    PRIMARY: 'PRIMARY',
+    SUCCESS: 'SUCCESS',
+    WARNING: 'WARNING',
+    DANGER: 'DANGER',
+} as const;
+type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
+
+export const classNames = {
+    BODY: 'Chip-body',
+};
+
+const chipSizeStyle = {
+    [CHIP_SIZES.SMALL]: css`
+        font-size: 12px;
+        line-height: 16px;
+        padding: 2px 4px;
+        border-radius: 6px;
+    `,
+    [CHIP_SIZES.MEDIUM]: css`
+        font-size: 14px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `,
+    [CHIP_SIZES.LARGE]: css`
+        font-size: 16px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `,
+} satisfies Record<CHIP_SIZES, unknown>;
+
+const chipTypeStyle = {
+    [CHIP_TYPES.DEFAULT]: css`
+        color: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.chipBackground};
+    `,
+    [CHIP_TYPES.PRIMARY]: css`
+        color: ${theme.color.primary.chipText};
+        background: ${theme.color.primary.chipBackground};
+    `,
+    [CHIP_TYPES.SUCCESS]: css`
+        color: ${theme.color.success.chipText};
+        background: ${theme.color.success.chipBackground};
+    `,
+    [CHIP_TYPES.WARNING]: css`
+        color: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.chipBackground};
+    `,
+    [CHIP_TYPES.DANGER]: css`
+        color: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.chipBackground};
+    `,
+} satisfies Record<CHIP_TYPES, unknown>;
+
+const StyledChip = styled.span<{size: CHIP_SIZES, type: CHIP_TYPES, clickable: boolean}>`
+    ${({ size }) => chipSizeStyle[size]};
+    ${({ type }) => chipTypeStyle[type]};
+    /* Static styles */
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
+    gap: ${theme.space.space4};
+`;
+
+export type ChipProps = RegularBoxProps & {
+    type?: CHIP_TYPES
+    size?: CHIP_SIZES
+    icon?: React.ReactNode
+    clickable?: boolean
+}
+
+/**
+ * Component for displaying status and for labelling other components.
+ */
+export const Chip = forwardRef(({
+    type = CHIP_TYPES.DEFAULT,
+    size = CHIP_SIZES.MEDIUM,
+    icon,
+    children,
+    className,
+    ...passThroughProps
+}: ChipProps, ref) => {
+    const otherProps = { ...passThroughProps, type, size, className: clsx(className, classNames.BODY) };
+
+    return <StyledChip ref={ref} {...otherProps}>{children}{icon}</StyledChip>;
+});
+
+Chip.displayName = 'Chip';
+
+type SpecificChipProps = Omit<ChipProps, 'type'>
+
+export const PrimaryChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.PRIMARY} {...props} />;
+export const NeutralChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.DEFAULT} {...props} />;
+export const SuccessChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.SUCCESS} {...props} />;
+export const DangerChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.DANGER} {...props} />;
+export const WarningChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.WARNING} {...props} />;

package/src/components/code/action_button.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { Copy16, Check16 } from '@apify/icons';
+
+import { theme } from '../../design_system/theme';
+import { useCopyToClipboard } from '../../utils';
+import { Text } from '../text';
+
+interface StyledButtonProps {
+    $successStyle?: boolean;
+    $hasText?: boolean;
+};
+
+const StyledButton = styled.button<StyledButtonProps>`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius6};
+
+    cursor: pointer;
+
+    background: ${theme.color.neutral.backgroundMuted};
+    color: ${theme.color.neutral.icon};
+    &:hover {
+        background-color: ${theme.color.neutral.hover};
+    }
+
+    padding: ${theme.space.space4};
+    height: 2.8rem;
+    width: 2.8rem;
+
+    svg {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    ${({ $hasText }) => $hasText
+        && css`
+            width: auto;
+            padding: ${theme.space.space4} ${theme.space.space8};
+            p {
+                white-space: nowrap;
+            }
+        `}
+
+    ${({ $successStyle }) => $successStyle
+        && css`
+            background-color: ${theme.color.success.action};
+            color: ${theme.color.neutral.textOnPrimary};
+            border: none;
+            :active {
+                background-color: ${theme.color.success.actionActive};
+            }
+            :hover {
+                background-color: ${theme.color.success.action};
+            }
+        `}
+`;
+
+interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    successStyle?: boolean;
+}
+
+export const ActionButton = ({
+    successStyle,
+    children,
+    ...props
+}: ActionButtonProps) => {
+    const hasText = typeof children === 'string';
+
+    return (
+        <StyledButton
+            $successStyle={successStyle}
+            $hasText={hasText}
+            {...props}
+        >
+            {hasText ? <Text weight="bold">{children}</Text> : children}
+        </StyledButton>
+    );
+};
+
+interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    code: string;
+}
+
+export const CopyButton = ({ code, ...props }: CopyButtonProps) => {
+    const [isCopied, handleClick] = useCopyToClipboard({ text: code });
+    return (
+        <ActionButton onClick={handleClick} data-test='copy_to_clipboard' {...props}>
+            {isCopied ? <Check16 viewBox="0 0 16 16" /> : <Copy16 viewBox="0 0 16 16" />}
+        </ActionButton>
+    );
+};

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

@@ -0,0 +1,228 @@
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../../design_system/theme';
+import type { SharedTextSize } from '../../text/text_shared';
+import { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter';
+
+const HIGHLIGHT_BACKGROUND_COLOR = 'rgba(22, 114, 235, 0.05)';
+
+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;
+                }
+            }
+        }
+    }
+
+    .CodePre {
+        z-index: 2;
+        padding: ${theme.space.space16} 0 !important;
+
+        code {
+            & > span {
+                display: block;
+                padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? 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: ${({ $showLineNumbers }) => ($showLineNumbers ? '0.2' : '1')}rem;
+                }
+            }
+
+            // Common styles
+            [data*='bash']{
+                &::before {
+                    color: ${theme.color.lavender.base};
+                    padding-right: ${theme.space.space16};
+                    min-width: ${theme.space.space24};
+                    user-select: none;
+                    -webkit-user-select: none;
+                    font-size: 1em;
+                }
+            }
+
+            [data*='bashStartCommand'] {
+                &::before {
+                    content: '$';
+                }
+            }
+
+            [data*='bashCommand'] {
+                &::before {
+                    content: '>';
+                }
+            }
+
+            [data*='bashEmptyLine'] {
+                &::before {
+                    content: ' ';
+                }
+            }
+
+            [data*='highlighted'] {
+                background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                border-left: 6px solid ${theme.color.neutral.border} !important;
+                padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? '0.2' : '1')}rem;
+            }
+
+
+            .linenumber {
+                color: ${theme.color.neutral.textSubtle} !important;
+                padding-right: ${theme.space.space16} !important;
+                min-width: ${theme.space.space24} !important;
+                box-sizing: unset !important;
+                user-select: none;
+                -webkit-user-select: none;
+
+                ${({ $showLineNumbers }) => (!$showLineNumbers && css`display: none !important;`)}
+
+            }
+        }
+    }
+
+    .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,235 @@
+import clsx from 'clsx';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+
+import type { RegularBoxProps } from '../../box';
+import { ColorWheelGradient } from '../../color_wheel_gradient';
+import { Link } from '../../link';
+import { Text } from '../../text';
+import type { SharedTextSize } from '../../text/text_shared';
+import { ActionButton, CopyButton } from '../action_button';
+import SyntaxHighlighter from '../syntax_highlighter';
+import { CodeBlockWrapper } from './code_block.styled';
+import { mapPrefixToBashLine } from './utils';
+
+function HeaderDots() {
+    return (
+        <div className="CodeBlock-HederDotsWrapper">
+            <div className="CodeBlock-HeaderDot" />
+            <div className="CodeBlock-HeaderDot" />
+            <div className="CodeBlock-HeaderDot" />
+        </div>
+    );
+}
+
+interface HeaderProps {
+    tabs: CodeTab[] | null;
+    currentTab: CodeTab | null;
+    onTabChange: (tab: CodeTab, e: React.MouseEvent) => void;
+    title?: string;
+    showBashHeader?: boolean;
+}
+
+function 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>
+    );
+}
+
+const LANGUAGES_WITHOUT_LINE_NUMBERS = ['json', 'jsonp', 'jsonp', 'rss', 'yaml', 'xml', 'html', 'bash', 'text', 'dockerfile', 'http'];
+
+interface CodeTab {
+    key: string;
+    label: string;
+    code: string;
+    id?: string;
+    highlightLines?: number[];
+    language?: string;
+    bashCommandsStart?: number[];
+    to?: string;
+}
+
+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 function 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 showBashPrompt = isBash && !hideBashPromptPrefixes;
+    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 currentBashLinesPrefixes = useMemo(() => {
+        if (!showBashPrompt) return [];
+        return mapPrefixToBashLine(
+            currentCode,
+            currentTab?.bashCommandsStart ?? bashCommandsStart,
+        );
+    }, [currentCode, bashCommandsStart, showBashPrompt, currentTab]);
+
+    const getLineProps = useCallback(
+        (lineNumber: number) => {
+            const data = [];
+            if (currentHighlightLines?.includes(lineNumber)) {
+                data.push('highlighted');
+            }
+            if (showBashPrompt) {
+                data.push(currentBashLinesPrefixes[lineNumber - 1]);
+            }
+
+            return { data: data.join(' ') };
+        },
+        [currentHighlightLines, showBashPrompt, currentBashLinesPrefixes],
+    );
+
+    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}
+                />
+            )}
+
+            <SyntaxHighlighter
+                showLineNumbers
+                wrapLines
+                language={currentLanguage}
+                size={size}
+                lineProps={getLineProps}
+                ref={syntaxHighlighterRef}
+            >
+                {currentCode}
+            </SyntaxHighlighter>
+
+            <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/utils.ts

@@ -0,0 +1,19 @@
+// 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
+// empty line or comment -> bashEmptyLine
+export const mapPrefixToBashLine = (code: string, bashCommandsStart: number[] = []) => {
+    const lines = code.split('\n').map((line) => line.trim());
+
+    // by default each line that is not empty or comment is a command start
+    if (bashCommandsStart.length === 0) {
+        return lines.map((line) => ((line.startsWith('#') || !line) ? 'bashEmptyLine' : 'bashStartCommand'));
+    }
+
+    return lines.map((line, i) => {
+        if (bashCommandsStart.includes(i + 1)) return 'bashStartCommand';
+        if (line.startsWith('#') || !line) return 'bashEmptyLine';
+        return 'bashCommand';
+    });
+};

package/src/components/code/index.ts

@@ -0,0 +1,3 @@
+export * from './code_block/code_block';
+export * from './one_line_code/one_line_code';
+export * from './inline_code/inline_code';