@apify/ui-library 1.135.0 → 1.137.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.135.0",
+    "version": "1.137.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 .",
-        "lint:fix": "eslint . --fix",
+        "lint": "oxlint --type-aware .",
+        "lint:fix": "oxlint --type-aware --fix .",
         "build": "npm run clean && npm run compile",
         "clean": "rimraf ./dist",
         "compile": "tsc -p tsconfig.build.json",
@@ -27,7 +27,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.36.0",
+        "@apify/ui-icons": "^1.37.0",
         "@floating-ui/react": "^0.27.19",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.12",
@@ -70,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "7879cfe3a270df653f5eb4496f15fe643afd53dd"
+    "gitHead": "31ba6cc576b0e0ce8b7390126ec35cc8127eee80"
 }

package/src/codemods/generate_typograpy_tokens_files.mjs

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

package/src/components/badge.stories.jsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import-x/no-extraneous-dependencies
+// eslint-disable-next-line import-js/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -0,0 +1,52 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { userEvent, within } from 'storybook/test';
+
+import { Breadcrumbs } from './breadcrumb.js';
+
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export default {
+    title: 'UI-Library/Breadcrumbs',
+    component: Breadcrumbs,
+    parameters: {
+        layout: 'centered',
+    },
+} as const;
+
+export const Default: Story = {
+    args: {
+        items: [
+            { label: 'All Actors', url: '/actors' },
+            { label: 'Generate leads' },
+        ],
+    },
+};
+
+export const DeepPath: Story = {
+    args: {
+        items: [
+            { label: 'All Actors', url: '/actors' },
+            { label: 'Business', url: '/actors/business' },
+            { label: 'Generate leads' },
+        ],
+    },
+};
+
+export const SingleItem: Story = {
+    args: {
+        items: [{ label: 'All Actors' }],
+    },
+};
+
+export const Hovered: Story = {
+    args: {
+        items: [
+            { label: 'All Actors', url: '/actors' },
+            { label: 'Generate leads' },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.hover(canvas.getByText('All Actors'));
+    },
+};

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,88 @@
+import clsx from 'clsx';
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { Box } from '../box.js';
+import { Link } from '../link.js';
+import { Text } from '../text/index.js';
+
+export const breadcrumbClassNames = {
+    WRAPPER: 'Breadcrumbs__Wrapper',
+    SEPARATOR: 'Breadcrumbs__Separator',
+    ITEM: 'Breadcrumbs__Item',
+    ITEM_ACTIVE: 'Breadcrumbs__Item--active',
+} as const;
+
+const StyledBreadcrumbs = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space8};
+`;
+
+const StyledBreadcrumbLink = styled(Link)`
+    text-decoration: none;
+    padding: ${theme.space.space2} ${theme.space.space4};
+    border-radius: ${theme.radius.radius6};
+    color: ${theme.color.neutral.textSubtle};
+
+    &:hover {
+        color: ${theme.color.neutral.textMuted};
+        span {
+            font-weight: 500;
+        }
+    }
+`;
+
+const StyledBreadcrumbItemText = styled(Text)`
+    padding: ${theme.space.space2} ${theme.space.space4};
+    white-space: nowrap;
+`;
+
+export type BreadcrumbItem = {
+    label: string;
+    url?: string;
+};
+
+export type BreadcrumbsProps = {
+    items: BreadcrumbItem[];
+    className?: string;
+};
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className }) => (
+    <StyledBreadcrumbs className={clsx(breadcrumbClassNames.WRAPPER, className)}>
+        {items.map((item, index) => {
+            const isActive = index === items.length - 1;
+            return (
+                <React.Fragment key={item.label}>
+                    {index > 0 && (
+                        <Text
+                            as='span'
+                            size='small'
+                            weight='medium'
+                            color={theme.color.neutral.textSubtle}
+                            className={breadcrumbClassNames.SEPARATOR}
+                        >
+                            /
+                        </Text>
+                    )}
+                    <span className={clsx(breadcrumbClassNames.ITEM, isActive && breadcrumbClassNames.ITEM_ACTIVE)}>
+                        {!isActive && item.url ? (
+                            <StyledBreadcrumbLink to={item.url}>
+                                <Text as='span' size='small' weight='normal'>{item.label}</Text>
+                            </StyledBreadcrumbLink>
+                        ) : (
+                            <StyledBreadcrumbItemText
+                                size='small'
+                                weight={isActive ? 'bold' : 'normal'}
+                                color={isActive ? theme.color.neutral.text : theme.color.neutral.textSubtle}
+                            >
+                                {item.label}
+                            </StyledBreadcrumbItemText>
+                        )}
+                    </span>
+                </React.Fragment>
+            );
+        })}
+    </StyledBreadcrumbs>
+);

package/src/components/breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb.js';

package/src/components/card_container.stories.tsx

@@ -1,10 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect } from 'storybook/test';
 import styled from 'styled-components';
 
 import { DragIndicatorIcon } from '@apify/ui-icons';
 
-import { CardContainer, type CardContainerProps } from './card_container.js';
 import { IconButton } from './icon_button.js';
+import { CardContainer, cardContainerClassNames, type CardContainerProps } from './card_container.js';
 
 export default {
     title: 'UI-Library/Cards/CardContainer',
@@ -14,6 +15,10 @@ export default {
             control: { type: 'select' },
             options: ['TOP', 'BOTTOM'],
         },
+        contentPadding: {
+            control: { type: 'select' },
+            options: ['none', 'space2', 'space4', 'space8', 'space12', 'space16', 'space24'],
+        },
     },
     tags: ['new'],
 } as Meta<CardContainerProps>;
@@ -25,8 +30,9 @@ const StoryWrapper = styled.div`
     gap: 1rem;
     grid-template-columns: 1fr 1fr 1fr;
 `;
+
 /**
- * Default color wheel gradient with standard settings
+ * Default CardContainer with various header configurations.
  */
 export const Default: Story = {
     args: {
@@ -40,7 +46,7 @@ export const Default: Story = {
             <CardContainer
                 {...args}
                 header={<>
-                    <CardContainer.Heading>TEst</CardContainer.Heading>
+                    <CardContainer.Heading>Test</CardContainer.Heading>
                     <IconButton Icon={DragIndicatorIcon}/>
                 </>}
             />
@@ -64,4 +70,12 @@ export const Default: Story = {
             </CardContainer>
         </StoryWrapper>;
     },
+    play: async ({ canvasElement }) => {
+        const headers = canvasElement.querySelectorAll(`.${cardContainerClassNames.HEADER}`);
+        // 5 of 6 containers have headers (one has header={null})
+        await expect(headers.length).toBe(5);
+
+        const contents = canvasElement.querySelectorAll(`.${cardContainerClassNames.CONTENT}`);
+        await expect(contents.length).toBe(6);
+    },
 };

package/src/components/card_container.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import type { ValueOf } from '@apify-packages/types';
 
 import { theme } from '../design_system/theme.js';
+import type { Size } from '../design_system/tokens/index.js';
 import { Box, type BoxProps } from './box.js';
 
 export const cardContainerClassNames = {
@@ -16,7 +17,15 @@ const HEADER_PLACEMENT = {
     BOTTOM: 'BOTTOM',
 } as const;
 
-const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT> }>`
+type ContentPaddingValue = Size | 'none';
+
+const getContentPadding = (contentPadding?: ContentPaddingValue) => {
+    if (contentPadding === 'none') return 0;
+    if (contentPadding) return theme.space[contentPadding];
+    return theme.space.space16;
+};
+
+const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT>; $contentPadding?: ContentPaddingValue }>`
     background-color: ${theme.color.neutral.backgroundSubtle};
     border-radius: ${theme.radius.radius12};
 
@@ -26,11 +35,12 @@ const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT>
     flex-direction: ${({ $headerPlacement }) => ($headerPlacement === HEADER_PLACEMENT.TOP ? 'column' : 'column-reverse')};
 
     .${cardContainerClassNames.CONTENT} {
-        /* Inner radius = outer radius - padding */
-        border-radius: calc(${theme.radius.radius12} - ${theme.space.space2});
-        background-color: ${theme.color.neutral.background};
+        /* 11px inner radius to match Figma (outer 12px - 1px visual offset) */
+        border-radius: 1.1rem;
+        background-color: ${({ $contentPadding }) => ($contentPadding === 'none' ? 'transparent' : theme.color.neutral.background)};
+        ${({ $contentPadding }) => $contentPadding === 'none' && 'overflow: hidden;'}
 
-        padding: ${theme.space.space16};
+        padding: ${({ $contentPadding }) => getContentPadding($contentPadding)};
         flex-grow: 1;
     }
 
@@ -53,6 +63,14 @@ export type CardContainerProps = BoxProps & {
      * Pass `null` to render without a header section.
      */
     header: React.ReactNode,
+    /**
+     * Controls the padding of the content area. Accepts a space token or `'none'`.
+     * When set to `'none'`, padding is removed, the content background becomes transparent
+     * (the wrapper's subtle background shows through grid gaps), and overflow is hidden (corners clip to the inner border-radius).
+     * Other values (e.g. `'space8'`) change the padding but keep the white background.
+     * Defaults to `space16` with white background when not provided.
+     */
+    contentPadding?: ContentPaddingValue,
 };
 
 /**
@@ -64,9 +82,10 @@ export const CardContainer = ({
     children,
     header,
     headerPlacement = HEADER_PLACEMENT.TOP,
+    contentPadding,
     ...rest
 }: CardContainerProps) => (
-    <Wrapper {...rest} $headerPlacement={headerPlacement}>
+    <Wrapper {...rest} $headerPlacement={headerPlacement} $contentPadding={contentPadding}>
         {header != null && (
             <div className={cardContainerClassNames.HEADER}>
                 {typeof header === 'string' ? <CardContainerHeading>{header}</CardContainerHeading> : header}

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

@@ -19,9 +19,9 @@ export const getBashLinePrefixes = (
         // 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} key={`code-highlighter-line-bash-prefix-${i}`} />
             ) : (
-                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>$</CodeHighlighterLineBashPrefix>
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base} key={`code-highlighter-line-bash-prefix-${i}`}>$</CodeHighlighterLineBashPrefix>
             );
         }
 

package/src/components/index.ts

@@ -31,3 +31,4 @@ export * from './collapsible_card/index.js';
 export * from './select/index.js';
 export * from './switch/index.js';
 export * from './table/index.js';
+export * from './breadcrumb/index.js';