@apify/ui-library 0.60.2 → 0.61.1-feataddaiagentcategories-114da5.67

package/eslint.config.mjs

@@ -0,0 +1,36 @@
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import sonarjs from 'eslint-plugin-sonarjs';
+
+import apifyJestConfig from '@apify/eslint-config/jest.js';
+import apifyTypescriptConfig from '@apify/eslint-config/ts.js';
+
+// eslint-disable-next-line import/no-default-export
+export default [
+    { ignores: ['**/dist'] }, // Ignores need to happen first
+    ...apifyTypescriptConfig,
+    ...apifyJestConfig,
+    {
+
+        plugins: {
+            sonarjs,
+            react,
+            'react-hooks': reactHooks,
+        },
+
+        languageOptions: {
+            sourceType: 'module',
+
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        rules: {
+            'react/react-in-jsx-scope': 'off',
+            'no-void': 'off',
+            'react/display-name': 'off',
+            'react-hooks/exhaustive-deps': 'error',
+        },
+    },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.60.2",
+    "version": "0.61.1-feataddaiagentcategories-114da5.67+8d90f77170f",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -12,8 +12,8 @@
     },
     "scripts": {
         "test": "echo \"Warning: no test specified\" && exit 0",
-        "lint": "eslint . --ext .ts,.tsx",
-        "lint:fix": "eslint . --ext .ts,.tsx  --fix",
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix",
         "build": "npm run clean && npm run compile",
         "clean": "rimraf ./dist",
         "compile": "tsc -p tsconfig.build.json",
@@ -51,21 +51,20 @@
         "styled-components": "^5.3.3"
     },
     "devDependencies": {
-        "@apify/eslint-config-ts": "^0.4.1",
+        "@apify/eslint-config": "^1.0.0",
         "@types/lodash": "^4.14.200",
         "@types/node": "^22.10.5",
         "@types/react": "^18.2.74",
         "@types/react-syntax-highlighter": "^15.5.9",
         "@types/styled-components": "^5.1.34",
-        "@typescript-eslint/eslint-plugin": "^5.62.0",
-        "@typescript-eslint/parser": "^5.62.0",
-        "eslint": "^8.45.0",
+        "eslint": "^9.22.0",
         "eslint-plugin-import": "2.26.0",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-sonarjs": "^1.0.3",
         "recast": "^0.23.9",
-        "typescript": "^5.1.6"
+        "typescript": "^5.1.6",
+        "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "9be44755b36f63bffd9cc9e248842eb758d469d8"
+    "gitHead": "8d90f77170fcb05cb8ed54e91ff0cdc366400ae3"
 }

package/src/codemods/generate_color_property_tokens.mjs

@@ -1,5 +1,6 @@
-import { readFileSync, writeFileSync } from 'fs';
+import { readFileSync, writeFileSync } from 'node:fs';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { print, types } from 'recast';
 
 const { builders } = types;

package/src/codemods/generate_color_theme_files.mjs

@@ -1,5 +1,6 @@
-import { readFileSync, writeFileSync } from 'fs';
+import { readFileSync, writeFileSync } from 'node:fs';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { print, types } from 'recast';
 
 const { builders } = types;

package/src/codemods/generate_typograpy_tokens_files.mjs

@@ -1,5 +1,6 @@
-import { readFileSync, writeFileSync } from 'fs';
+import { readFileSync, writeFileSync } from 'node:fs';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { print, types } from 'recast';
 
 const { builders } = types;

package/src/components/actor_template_card.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../design_system/theme.js';
-import { TextBaseComponent } from './text/text_base.js';
+import { Badge } from './badge.js';
+import { TextMarketing } from './text/text_marketing.js';
 import { VerticalTile } from './tile/index.js';
 
 interface ActorTemplateCardProps {
@@ -10,44 +11,16 @@ interface ActorTemplateCardProps {
     label: string;
     description: string;
     icons: React.ReactNode[];
+    useCases?: string[];
 }
 
 const WrapperClasses = {
     TEMPLATE_CARD_IMAGES: 'TemplateCard-Images',
     TEMPLATE_CARD_TEXT: 'TemplateCard-Text',
+    TEMPLATE_CARD_DESCRIPTION: 'TemplateCard-Description',
+    TEMPLATE_CARD_BADGES: 'TemplateCard-Badges',
 };
 
-const Text = styled(TextBaseComponent)`
-    ${theme.typography.marketing.mobile.bodyM}
-    color: ${theme.color.neutral.textMuted};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-
-    @media ${theme.layout.tablet} {
-        ${theme.typography.marketing.tablet.bodyM}
-    }
-
-    @media ${theme.layout.desktop} {
-        ${theme.typography.marketing.desktop.bodyM}
-    }
-`;
-
-const Heading = styled(TextBaseComponent)`
-    ${theme.typography.marketing.mobile.titleXs}
-    color: ${theme.color.neutral.text};
-
-    @media ${theme.layout.tablet} {
-        ${theme.typography.marketing.tablet.titleXs}
-    }
-
-    @media ${theme.layout.desktop} {
-        ${theme.typography.marketing.desktop.titleXs}
-    }
-`;
-
 const TemplateCardContentWrapper = styled.div`
     display: flex;
     flex-direction: column;
@@ -55,11 +28,18 @@ const TemplateCardContentWrapper = styled.div`
     align-self: stretch;
     flex: 1 0 0;
     gap: ${theme.space.space16};
+    color: ${theme.color.neutral.text};
 
     .${WrapperClasses.TEMPLATE_CARD_IMAGES} {
         display: flex;
         align-items: flex-start;
         gap: ${theme.space.space16};
+        flex-wrap: wrap;
+        img,
+        svg {
+            max-width: ${theme.space.space40};
+            max-height: ${theme.space.space40};
+        }
     }
 
     .${WrapperClasses.TEMPLATE_CARD_TEXT} {
@@ -68,6 +48,20 @@ const TemplateCardContentWrapper = styled.div`
         align-items: flex-start;
         align-self: stretch;
         gap: ${theme.space.space4};
+
+        .${WrapperClasses.TEMPLATE_CARD_DESCRIPTION} {
+            color: ${theme.color.neutral.textMuted};
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+    }
+
+    .${WrapperClasses.TEMPLATE_CARD_BADGES} {
+        display: flex;
+        gap: ${theme.space.space4};
     }
 `;
 
@@ -76,15 +70,38 @@ export const ActorTemplateCard: React.FC<ActorTemplateCardProps> = ({
     label,
     description,
     icons,
+    useCases,
 }) => {
     const templateCardContent = (
         <TemplateCardContentWrapper>
-            <div className={WrapperClasses.TEMPLATE_CARD_IMAGES}>
-                {icons}
-            </div>
+            <div className={WrapperClasses.TEMPLATE_CARD_IMAGES}>{icons}</div>
             <div className={WrapperClasses.TEMPLATE_CARD_TEXT}>
-                <Heading>{label}</Heading>
-                <Text>{description}</Text>
+                <TextMarketing size="regular" weight="bold">
+                    {label}
+                </TextMarketing>
+                <TextMarketing
+                    size="small"
+                    className={WrapperClasses.TEMPLATE_CARD_DESCRIPTION}
+                >
+                    {description}
+                </TextMarketing>
+            </div>
+            <div className={WrapperClasses.TEMPLATE_CARD_BADGES}>
+                {useCases?.includes('STARTER') && (
+                    <Badge variant="success">Starter</Badge>
+                )}
+                {useCases?.includes('AI') && (
+                    <Badge
+                        variant="success"
+                        style={{
+                            color: '#6E00F4',
+                            fill: '#6E00F4',
+                            background: '#E4D4F7',
+                        }}
+                    >
+                        AI Agent
+                    </Badge>
+                )}
             </div>
         </TemplateCardContentWrapper>
     );

package/src/components/badge.tsx

@@ -5,17 +5,29 @@ import type { IconComponent, IconSize } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme.js';
 import type { WithTransientProps } from '../type_utils.js';
-import { type RegularBoxProps, type MarginSpacingProps, Box } from './box.js';
-
-type BadgeSize = typeof BADGE_SIZES[number];
+import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
 
 export const BADGE_SIZES = ['medium', 'small'] as const;
 
+type BadgeSize = typeof BADGE_SIZES[number];
+
 const BADGE_ICON_SIZES = {
     medium: '16',
     small: '12',
 } satisfies Record<BadgeSize, IconSize>;
 
+export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'] as const;
+
+type BadgeVariant = typeof BADGE_VARIANTS[number];
+
+export type BadgeProps = Omit<RegularBoxProps, 'onClick'> & MarginSpacingProps & {
+    as?: Exclude<React.ElementType, 'a' | 'button'>;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    LeadingIcon?: IconComponent;
+    code?: boolean;
+};
+
 const badgeSizeStyle = {
     medium: ($code) => css`
         padding: ${theme.space.space4} ${theme.space.space8};
@@ -36,82 +48,70 @@ const badgeSizeStyle = {
     `,
 } satisfies Record<BadgeSize, (code: boolean) => FlattenSimpleInterpolation>;
 
-type BadgeVariant = typeof BADGE_VARIANTS[number];
-
-export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'] as const;
-
 const badgeVariantStyle = {
     neutral: css`
         color: ${theme.color.neutral.text};
         fill: ${theme.color.neutral.text};
         background: ${theme.color.neutral.background};
         box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
-      `,
+    `,
     neutral_muted: css`
-      color: ${theme.color.neutral.text};
-      fill: ${theme.color.neutral.text};
-      background: ${theme.color.neutral.chipBackground};
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.chipBackground};
     `,
     neutral_subtle: css`
-      color: ${theme.color.neutral.textSubtle};
-      fill: ${theme.color.neutral.textSubtle};
-      background: ${theme.color.neutral.backgroundSubtle};
+        color: ${theme.color.neutral.textSubtle};
+        fill: ${theme.color.neutral.textSubtle};
+        background: ${theme.color.neutral.backgroundSubtle};
     `,
     primary_black: css`
         color: ${theme.color.primaryBlack.chipText};
         fill: ${theme.color.primaryBlack.chipText};
         background: ${theme.color.primaryBlack.background};
-      `,
+    `,
     primary_blue: css`
-      color: ${theme.color.primary.chipText};
-      fill: ${theme.color.primaryBlack.chipText};
-      background: ${theme.color.primary.background};
+        color: ${theme.color.primary.chipText};
+        fill: ${theme.color.primaryBlack.chipText};
+        background: ${theme.color.primary.background};
     `,
     success: css`
-      color: ${theme.color.success.chipText};
-      fill: ${theme.color.success.chipText};
-      background: ${theme.color.success.background};
+        color: ${theme.color.success.chipText};
+        fill: ${theme.color.success.chipText};
+        background: ${theme.color.success.background};
     `,
     warning: css`
-      color: ${theme.color.warning.chipText};
-      fill: ${theme.color.warning.chipText};
-      background: ${theme.color.warning.background};
+        color: ${theme.color.warning.chipText};
+        fill: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.background};
     `,
     danger: css`
-      color: ${theme.color.danger.chipText};
-      fill: ${theme.color.danger.chipText};
-      background: ${theme.color.danger.background};
+        color: ${theme.color.danger.chipText};
+        fill: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.background};
     `,
 } satisfies Record<BadgeVariant, FlattenSimpleInterpolation>;
 
 type StyledBadgeProps = WithTransientProps<
-  Required<Pick<BadgeProps, 'size' | 'variant' | 'code'>>
+    Required<Pick<BadgeProps, 'size' | 'variant' | 'code'>>
 >;
 
 const StyledBadge = styled(Box)<StyledBadgeProps>`
-  ${({ $size, $code }) => badgeSizeStyle[$size]($code)};
-  ${({ $variant }) => badgeVariantStyle[$variant]};
+    ${({ $size, $code }) => badgeSizeStyle[$size]($code)};
+    ${({ $variant }) => badgeVariantStyle[$variant]};
 
   /* Static styles */
-  width: fit-content;
-  border: none;
-  outline: none;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  white-space: nowrap;
-  gap: ${theme.space.space4};
+    width: fit-content;
+    border: none;
+    outline: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    gap: ${theme.space.space4};
 `;
 
-export type BadgeProps = Omit<RegularBoxProps, 'onClick'> & MarginSpacingProps & {
-  as?: Exclude<React.ElementType, 'a' | 'button'>;
-  size?: BadgeSize;
-  variant?: BadgeVariant;
-  LeadingIcon?: IconComponent;
-  code?: boolean;
-};
-
 /**
  * Component for displaying non-interactive chip descendant.
  */

package/src/components/banner.tsx

@@ -3,7 +3,6 @@ import styled, { css } from 'styled-components';
 
 import { theme } from '../design_system/theme.js';
 
-/* eslint-disable max-len */
 const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_2285_34756)">
     <g filter="url(#filter0_f_2285_34756)">
@@ -57,7 +56,7 @@ interface BannerProps {
     width?: string,
     className?: string,
     children: React.ReactNode,
-};
+}
 
 const getBannerBackground = (background?: string, useGradientBackground?: boolean) => {
     return css`

package/src/components/button.tsx

@@ -6,8 +6,8 @@ import { ExternalLinkIcon } from '@apify/ui-icons';
 import { theme } from '../design_system/theme.js';
 import { type WithRequired, type WithTransientProps } from '../type_utils.js';
 import { useSharedUiDependencies } from '../ui_dependency_provider.js';
-import { Box, type RegularBoxProps, type MarginSpacingProps } from './box.js';
-import { Link, isUrlExternal, type LinkProps } from './link.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
+import { isUrlExternal, Link, type LinkProps } from './link.js';
 
 type ButtonSize = 'medium' | 'small';
 type ButtonColor = 'default' | 'success' | 'danger';
@@ -17,7 +17,7 @@ export interface TransientButtonProps {
     size?: ButtonSize;
     color?: ButtonColor;
     variant?: ButtonVariant;
-};
+}
 
 export interface RegularButtonProps {
     trackingId?: string,
@@ -25,7 +25,7 @@ export interface RegularButtonProps {
     LeftIcon?: React.ElementType,
     RightIcon?: React.ElementType,
     disabled?: boolean;
-};
+}
 
 // Props shared for both types of the button
 export type CommonButtonProps = RegularButtonProps & TransientButtonProps & MarginSpacingProps;

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

@@ -7,10 +7,31 @@ 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 SyntaxHighlighter from '../syntax_highlighter.js';
+import { SyntaxHighlighter } from '../syntax_highlighter.js';
 import { CodeBlockWrapper } from './code_block.styled.js';
 import { mapPrefixToBashLine } 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'];
+
 function HeaderDots() {
     return (
         <div className="CodeBlock-HederDotsWrapper">
@@ -21,14 +42,6 @@ function HeaderDots() {
     );
 }
 
-interface HeaderProps {
-    tabs: CodeTab[] | null;
-    currentTab: CodeTab | null;
-    onTabChange: (tab: CodeTab, e: React.MouseEvent) => void;
-    title?: string;
-    showBashHeader?: boolean;
-}
-
 function Header({
     tabs,
     currentTab,
@@ -76,19 +89,6 @@ function Header({
     );
 }
 
-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;

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

@@ -8,8 +8,8 @@ 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 SyntaxHighlighter, { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
 import type { SyntaxHighlighterBaseStylesWrapperProps } from '../syntax_highlighter.js';
+import { SyntaxHighlighter, SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
 
 export const oneLineCodeClassNames = {
     gradientWrapper: 'OneLineCode-GradientWrapper',

package/src/components/code/syntax_highlighter.tsx

@@ -34,7 +34,7 @@ import styled, { css } from 'styled-components';
 import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
 import { Box } from '../box.js';
-import { Text, type SharedTextProps } from '../text/index.js';
+import { type SharedTextProps, Text } from '../text/index.js';
 import type { SharedTextSize } from '../text/text_shared.js';
 
 ReactSyntaxHighlighter.registerLanguage('typescript', ts);
@@ -96,7 +96,7 @@ export const SyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterPro
 }, ref) => {
     const { uiTheme } = useSharedUiDependencies();
 
-    const PreTag = (preProps: any) => {
+    const PreTag = (preProps: ReactSyntaxHighlighterProps) => {
         return <StyledPre {...preProps} size={size} forwardedAs='pre' type='code' ref={ref}/>;
     };
 
@@ -116,7 +116,7 @@ export const SyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterPro
 export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
     $fullWidth?: boolean;
     $fullHeight?: string;
-    $showLineNumbers?: any;
+    $showLineNumbers?: boolean;
 }
 
 export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`
@@ -132,5 +132,3 @@ export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterB
     background-color: transparent;
     position: relative;
 `;
-
-export default SyntaxHighlighter;

package/src/components/floating/menu.tsx

@@ -1,18 +1,18 @@
 import {
-    useRole,
-    useListNavigation,
-    useTypeahead,
+    FloatingFocusManager,
+    FloatingPortal,
     useClick,
     useDismiss,
     useInteractions,
-    FloatingPortal,
-    FloatingFocusManager,
+    useListNavigation,
+    useRole,
+    useTypeahead,
 } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, {
-    useState,
-    useRef,
     useMemo,
+    useRef,
+    useState,
 } from 'react';
 
 import {
@@ -91,7 +91,7 @@ export const Menu = <T extends MenuOption>({
         if (closeOnSelect) setIsOpen(false);
     };
 
-    const listRef = useRef<Array<HTMLElement | null>>([]);
+    const listRef = useRef<(HTMLElement | null)[]>([]);
     const isTypingRef = useRef(false);
     const listContentRef = useRef(options.map((option) => option.label));
 

package/src/components/floating/menu_common.tsx

@@ -1,8 +1,8 @@
 import {
-    useFloating,
+    autoUpdate,
     offset,
     size,
-    autoUpdate,
+    useFloating,
 } from '@floating-ui/react';
 
 export const useFloatingMenu = ({

package/src/components/floating/menu_components.tsx

@@ -1,6 +1,6 @@
 import {
-    type UseFloatingReturn,
     type ReferenceType,
+    type UseFloatingReturn,
 } from '@floating-ui/react';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
@@ -8,6 +8,7 @@ import styled, { css } from 'styled-components';
 import { ChevronDownIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
+import type { BoxProps } from '../box.js';
 import { Box } from '../box.js';
 
 export type FloatingContext = Pick<UseFloatingReturn<ReferenceType>, 'context'>['context'];
@@ -78,10 +79,14 @@ export const PlainMenuBaseComponent = styled(Box)`
     }
 `;
 
+type DropdownMenuBaseComponentProps = {
+    children: React.ReactNode;
+} & BoxProps;
+
 /**
  * Menu base component WITH dropdown icon
  */
-export const DropdownMenuBaseComponent = forwardRef<HTMLElement, any>(({
+export const DropdownMenuBaseComponent = forwardRef<HTMLElement, DropdownMenuBaseComponentProps>(({
     children,
     ...props
 }, ref) => {

package/src/components/readme_renderer/index.ts

@@ -1,3 +1,3 @@
 export { useActorTitleHeadingFilter } from './utils.js';
-export { default as pythonizeValue } from './pythonize_value.js';
-export { default as TableOfContents } from './table_of_contents.js';
+export { pythonizeValue } from './pythonize_value.js';
+export { TableOfContents } from './table_of_contents.js';

package/src/components/readme_renderer/pythonize_value.ts

@@ -22,7 +22,7 @@ const escapeChar = (character: string) => {
 // Escapes special characters in a string and surrounds it with proper quotes
 const pythonQuoteString = (str: string, escapeNewlines = true) => {
     const escapedValue = str.replace(/[\x00-\x09\x0b-\x1f\x22\x5c]/g, escapeChar);
-    if (!escapeNewlines && /\n/.test(escapedValue)) {
+    if (!escapeNewlines && escapedValue.includes('\n')) {
         return '"""' + escapedValue + '"""';
     }
     return '"' + escapedValue.replace(/\n/g, '\\n') + '"';
@@ -34,7 +34,7 @@ const INDENT = '    ';
 // Doesn't support everything, because that would be impossible,
 // only the values which are supported in an input schema prefill (booleans, numbers, strings, arrays, objects)
 // Tries to keep the representation short, but readable.
-const pythonizeValue = <T>(value: T, depth = 0): string | T => {
+export const pythonizeValue = <T>(value: T, depth = 0): string | T => {
     // None-like values
     if (value === undefined) return 'None';
     if (value === null) return 'None';
@@ -74,5 +74,3 @@ const pythonizeValue = <T>(value: T, depth = 0): string | T => {
     // This should never happen, if it did, something went wrong
     return 'UNSUPPORTED VALUE';
 };
-
-export default pythonizeValue;