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

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

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

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

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

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

@@ -1,3 +0,0 @@
-export * from './menu.js';
-export * from './menu_components.js';
-export * from './menu_common.js';