@apify/ui-library 0.60.2 → 0.61.0

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.0",
     "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": "6550fb6340288c759acf80f9c07fa68aec85f094"
 }

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

package/src/components/readme_renderer/table_of_contents.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {
-    useMemo,
     useCallback,
+    useMemo,
 } from 'react';
 import ReactMarkdown from 'react-markdown';
 import type { AllowElement } from 'react-markdown/lib/rehype-filter';
@@ -87,10 +87,11 @@ interface CustomHTMLAnchorElement extends Omit<HTMLAnchorElement, 'children' | '
     hash: string;
     tagName: string;
     type: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     parentNode: any;
 }
 
-const handleScroll = (anchors: CustomHTMLAnchorElement[] | null, headlines: HTMLElement[], anchorLists: HTMLUListElement[] | null, headingOffsetPx: number) => {
+const handleScroll = (anchors: CustomHTMLAnchorElement[], headlines: HTMLElement[], anchorLists: HTMLUListElement[] | null, headingOffsetPx: number) => {
     if (!anchors || !headlines) return;
 
     // Items that are past scroll
@@ -132,17 +133,31 @@ const handleScroll = (anchors: CustomHTMLAnchorElement[] | null, headlines: HTML
     }
 };
 
-const assignHeadingLevelsRecursively = ({ children, tagName, properties }: any, level: number) => {
+const assignHeadingLevelsRecursively = (
+    {
+        children,
+        tagName,
+        properties,
+    }: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        children: any[],
+        tagName: string,
+        properties: { className: string }
+    },
+    level: number,
+) => {
     if (level > 3) return;
+    let currentLevel = level;
     if (tagName === 'ul') {
-        properties.className = `level-${level}`; // assign level className
-        level += 1; // increase current heading level;
+        // eslint-disable-next-line no-param-reassign
+        properties.className = `level-${currentLevel}`; // assign level className
+        currentLevel += 1; // increase current heading level;
     }
 
-    children?.forEach((child: { type: string }) => {
+    children?.forEach((child) => {
         // We only care about ul and li elements - we don't need to traverse any other
         if (child.type === 'element' && (tagName === 'ul' || tagName === 'li')) {
-            assignHeadingLevelsRecursively(child, level);
+            assignHeadingLevelsRecursively(child, currentLevel);
         }
     });
 };
@@ -154,7 +169,7 @@ export interface TableOfContentsProps {
     allowElement?: AllowElement;
 }
 
-const TableOfContents = ({
+const TableOfContentsComponent = ({
     markdown,
     headingOffsetPx = 10,
     allowElement,
@@ -168,9 +183,9 @@ const TableOfContents = ({
     const hasTopLevelHeading = useMemo(() => !!cleanedMarkdown.match(/^#\s.+$/m), [cleanedMarkdown]);
 
     const tocRef = useCallback((node: HTMLElement | null) => {
-        const anchors = node ? Array.from(node.querySelectorAll('a')) : null;
+        const anchors = node ? Array.from(node.querySelectorAll('a')) : [];
         const anchorLists = node ? Array.from(node.querySelectorAll('ul')) : null;
-        const headlines = (anchors || [])
+        const headlines = (anchors)
             .map((anchor) => document.getElementById(anchor.hash.substr(1)))
             .filter((headline) => headline !== undefined && headline !== null) as HTMLElement[];
 
@@ -254,4 +269,4 @@ const TableOfContents = ({
     );
 };
 
-export default React.memo(TableOfContents, (prevProps, nextProps) => _.isEqual(prevProps, nextProps));
+export const TableOfContents = React.memo(TableOfContentsComponent, (prevProps, nextProps) => _.isEqual(prevProps, nextProps));