@apify/ui-library 1.132.1 → 1.134.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.132.1",
+    "version": "1.134.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -23,7 +23,7 @@
         "postpublish": "npm run clean"
     },
     "//": [
-        "Storybook for the components lives in a separate package components-storybook.",
+        "Storybook for the components lives in a separate package ui-storybook.",
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
@@ -70,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "10415388fd2ce4e24af29ddfe3090214c4a48b51"
+    "gitHead": "f8321843cceed834c46deb61af56d269efc3c7ae"
 }

package/src/components/box.tsx

@@ -34,7 +34,7 @@ type SharedBoxProps = {
     style?: React.CSSProperties
     onClick?: (e: React.MouseEvent) => void,
     id?: string,
-}
+};
 
 // This should be renamed - these props are global for any element not just Boxes
 export type RegularBoxProps = SharedBoxProps & { as?: React.ElementType };

package/src/components/card_container.tsx

@@ -16,7 +16,7 @@ const HEADER_PLACEMENT = {
     BOTTOM: 'BOTTOM',
 } as const;
 
-const Wrapper = styled(Box)<{$headerPlacement: ValueOf<typeof HEADER_PLACEMENT>}>`
+const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT> }>`
     background-color: ${theme.color.neutral.backgroundSubtle};
     border-radius: ${theme.radius.radius12};
 

package/src/components/chip.tsx

@@ -80,7 +80,7 @@ const chipTypeStyle = {
     `,
 } satisfies Record<CHIP_TYPES, unknown>;
 
-const StyledChip = styled.span<{size: CHIP_SIZES, type: CHIP_TYPES, clickable: boolean}>`
+const StyledChip = styled.span<{ size: CHIP_SIZES, type: CHIP_TYPES, clickable: boolean }>`
     ${({ size }) => chipSizeStyle[size]};
     ${({ type }) => chipTypeStyle[type]};
     /* Static styles */
@@ -100,7 +100,7 @@ export type ChipProps = RegularBoxProps & {
     size?: CHIP_SIZES
     icon?: React.ReactNode
     clickable?: boolean
-}
+};
 
 /**
  * Component for displaying status and for labelling other components.
@@ -121,7 +121,7 @@ export const Chip = forwardRef(({
 
 Chip.displayName = 'Chip';
 
-type SpecificChipProps = Omit<ChipProps, 'type'>
+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} />;

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

@@ -21,7 +21,7 @@ type CodeTab = {
     language?: string;
     bashCommandsStart?: number[];
     to?: string;
-}
+};
 
 type HeaderProps = {
     tabs: CodeTab[] | null;
@@ -29,7 +29,7 @@ type HeaderProps = {
     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'];
 
@@ -111,7 +111,7 @@ export type CodeBlockProps = RegularBoxProps & {
     bashCommandsStart?: number[];
     hideBashPromptPrefixes?: boolean;
     hideLineNumbers?: boolean | undefined;
-}
+};
 
 export const CodeBlock = ({
     content,

package/src/components/code/inline_code/inline_code.tsx

@@ -42,7 +42,7 @@ export type InlineCodeProps = RegularBoxProps & {
     children: React.ReactNode,
     size?: SharedTextSize,
     withCopyButton?: boolean,
-}
+};
 
 // This might be just a Chip component
 export const InlineCode: React.FC<InlineCodeProps> = ({

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

@@ -51,7 +51,7 @@ type OneLineCodeWrapperProps = SyntaxHighlighterBaseStylesWrapperProps & {
     $fitContent?: boolean;
     $showBashPrefixes?: boolean;
     $disabled?: boolean;
-}
+};
 
 const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCodeWrapperProps>`
     display: flex;
@@ -160,7 +160,7 @@ export type OneLineCodeProps = Omit<BoxProps, 'children'> & {
     disabled?: boolean;
     hideCopyButton?: boolean;
     trackingBundle?: OneLineCodeTrackingBundle;
-}
+};
 
 export function OneLineCode({
     children,

package/src/components/code/prism_highlighter.tsx

@@ -128,7 +128,7 @@ const PreWrapper = styled.pre<PreWrapperProps>`
                 padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
             }
 
-            ${({ $isSingleLine }) => !$isSingleLine && css<{$hasLinePrefixes: boolean}>`
+            ${({ $isSingleLine }) => !$isSingleLine && css<{ $hasLinePrefixes: boolean }>`
                 &:hover {
                     background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
                     border-left: 6px solid ${theme.color.neutral.border} !important;

package/src/components/floating/tooltip.tsx

@@ -52,6 +52,14 @@ const StyledFloatingComponentBase = styled(FloatingComponentBase)<{ $isDarkTheme
     background-color: ${theme.colorPalette.dark.neutral900};
     padding: ${theme.space.space8};
 
+    a {
+        color: ${theme.colorPalette.dark.blue100};
+
+        &:hover {
+            color: ${theme.colorPalette.dark.blue75};
+        }
+    }
+
     ${({ $isDarkTheme }) => $isDarkTheme && css`
         box-shadow: ${theme.shadow.shadow2};
         border: 1px solid ${theme.color.neutral.smallTooltipBorder};

package/src/components/image.tsx

@@ -10,7 +10,7 @@ type ImageProps = {
     width?: number,
     height?: number,
     loading?: 'eager' | 'lazy' | undefined;
-} & ImageProxyOptions
+} & ImageProxyOptions;
 
 export const Image = forwardRef<HTMLImageElement, ImageProps & Omit<BoxProps, 'as'>>((props, ref) => {
     const { InternalImage } = useSharedUiDependencies();

package/src/components/index.ts

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

package/src/components/link.stories.tsx

@@ -69,6 +69,18 @@ export default {
             control: 'text',
             description: 'The link text or content to display',
         },
+        ariaHidden: {
+            control: 'boolean',
+            description: 'Whether the link should be hidden from screen readers (useful for decorative links)',
+        },
+        ariaLabel: {
+            control: 'text',
+            description: 'Accessible label for screen readers when the link text is not descriptive',
+        },
+        tabIndex: {
+            control: 'number',
+            description: 'Tab index for keyboard navigation (default is 0)',
+        },
     },
     parameters: {
         design: {

package/src/components/link.tsx

@@ -19,6 +19,9 @@ export interface RegularLinkProps {
     target?: string,
     trackingId?: string,
     trackingData?: object,
+    tabIndex?: number,
+    ariaHidden?: boolean,
+    ariaLabel?: string,
 }
 
 /**
@@ -104,6 +107,9 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
     onClick,
     trackingId,
     trackingData,
+    tabIndex,
+    ariaHidden,
+    ariaLabel,
     ...rest
 }, ref) => {
     const {
@@ -139,6 +145,9 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
             target={target || (isExternal ? '_blank' : '_self')}
             onClick={trackedOnClick}
             ref={ref}
+            tabIndex={tabIndex}
+            aria-hidden={ariaHidden}
+            aria-label={ariaLabel}
             {...rest}
         >
             {children}

package/src/components/rating.tsx

@@ -13,7 +13,7 @@ import { Text } from './text/index.js';
 
 type RatingStatsProps = {
     ratingStats: Record<ReviewRating, number>
-}
+};
 
 const StyledRating = styled(Box)`
     display: flex;
@@ -57,7 +57,7 @@ const StyledRatingBar = styled(Box)<{ $widthPercent: number }>`
 
 type SingleStarRatingProps = BoxProps & {
     color?: string;
-}
+};
 
 export const SingleStarRating: FC<SingleStarRatingProps> = ({
     color = theme.color.neutral.icon,
@@ -74,7 +74,7 @@ export const SingleStarRating: FC<SingleStarRatingProps> = ({
 type RatingProps = BoxProps & {
     rating: number | undefined;
     color?: string;
-}
+};
 
 export const Rating: FC<RatingProps> = ({
     rating = 0,

package/src/components/simple_markdown/simple_markdown.tsx

@@ -190,7 +190,7 @@ export type SimpleMarkdownProps = Omit<ReactMarkdownOptions, 'urlTransform' | 'c
     size?: MarkdownSize,
     children: string,
     className?: string,
-}
+};
 
 export const useDefaultUrlTransform = () => {
     const { windowLocationHost } = useSharedUiDependencies();

package/src/components/spinner.tsx

@@ -102,7 +102,7 @@ export const BlockSpinner = styled(Spinner)`
 /**
  * Use the inline variant within buttons, texts etc. The color of the spinner is set to current color of text.
  */
-export const InlineSpinner = styled(Spinner)<{size?: string}>`
+export const InlineSpinner = styled(Spinner)<{ size?: string }>`
     display: inline-block;
     position: relative;
     height: ${({ size }) => size || theme.space.space12};

package/src/components/store/store_actor_header.tsx

@@ -12,7 +12,7 @@ const storeActorHeaderClassNames = {
     badge: 'ActorStoreItem-badge',
 };
 
-const StyledStoreActorHeader = styled(Box)<{ $compact: boolean}>`
+const StyledStoreActorHeader = styled(Box)<{ $compact: boolean }>`
     display: flex;
     gap: ${({ $compact }) => ($compact ? theme.space.space4 : theme.space.space12)};
     align-items: ${({ $compact }) => ($compact ? 'flex-start' : 'center')};
@@ -79,7 +79,7 @@ export type StoreActorHeaderProps = {
     hasRisingStarBadge?: boolean,
     avatarSize?: number,
     compact?: boolean;
-}
+};
 
 export const StoreActorHeader: React.FC<StoreActorHeaderProps & BoxProps> = ({
     name,

package/src/components/table/index.ts

@@ -0,0 +1,16 @@
+export { Table } from './table.js';
+export { TableHead } from './table_head.js';
+export { TableBody } from './table_body.js';
+export { TableFoot } from './table_foot.js';
+export { TableHeadRow } from './table_head_row.js';
+export { TableHeadCell } from './table_head_cell.js';
+export { TableRow } from './table_row.js';
+export { TableCell, TableCellLink } from './table_cell.js';
+export { HorizontallyScrollableTableWrapper } from './table_wrapper.js';
+export { TableExpansionRow } from './table_expansion_row.js';
+export { TableEmptyRow } from './table_empty_row.js';
+export { TableLoadingRow } from './table_loading_row.js';
+export { TableErrorRow } from './table_error_row.js';
+export { tableClassNames } from './table.styled.js';
+export { tableTestIds } from './table_test_ids.js';
+export type { HorizontallyScrollableTableWrapperProps, TableExpansion, TableRowProps } from './types.js';

package/src/components/table/table.context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import type { To } from '../link.js';
+
+export const TableRowLinkContext = createContext<To | undefined>(undefined);

package/src/components/table/table.stories.tsx

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+
+import { Text } from '../text/index.js';
+import { Table } from './table.js';
+import { TableBody } from './table_body.js';
+import { TableCell, TableCellLink } from './table_cell.js';
+import { TableEmptyRow } from './table_empty_row.js';
+import { TableErrorRow } from './table_error_row.js';
+import { TableHead } from './table_head.js';
+import { TableHeadCell } from './table_head_cell.js';
+import { TableHeadRow } from './table_head_row.js';
+import { TableLoadingRow } from './table_loading_row.js';
+import { TableRow } from './table_row.js';
+import { HorizontallyScrollableTableWrapper } from './table_wrapper.js';
+import { tableTestIds } from './table_test_ids.js';
+
+// ---------------------------------------------------------------------------
+// Mock data
+// ---------------------------------------------------------------------------
+
+type MockItem = {
+    _id: string;
+    name: string;
+    status: string;
+    email: string;
+};
+
+const MOCK_DATA: MockItem[] = [
+    { _id: '1', name: 'Web Scraper', status: 'active', email: 'alice@example.com' },
+    { _id: '2', name: 'Data Extractor', status: 'inactive', email: 'bob@example.com' },
+    { _id: '3', name: 'Email Sender', status: 'pending', email: 'carol@example.com' },
+    { _id: '4', name: 'PDF Parser', status: 'active', email: 'dave@example.com' },
+];
+
+// ---------------------------------------------------------------------------
+// Storybook meta
+// ---------------------------------------------------------------------------
+
+const meta: Meta = {
+    title: 'UI-Library/Table',
+    tags: ['new'],
+    component: Table,
+    subcomponents: {
+        HorizontallyScrollableTableWrapper,
+        TableHead,
+        TableHeadRow,
+        TableHeadCell,
+        TableBody,
+        TableRow,
+        TableCell,
+        TableCellLink,
+        TableEmptyRow,
+        TableLoadingRow,
+        TableErrorRow,
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'Compositional table primitives. Compose together to build any table layout. See subcomponents below.',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+/** Basic table with primitives only. */
+export const Default: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    {MOCK_DATA.map((item) => (
+                        <TableRow key={item._id}>
+                            <TableCell>{item.name}</TableCell>
+                            <TableCell>{item.email}</TableCell>
+                            <TableCell>{item.status}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByTestId(tableTestIds.WRAPPER)).toBeInTheDocument();
+        await expect(canvas.getByTestId(tableTestIds.TABLE)).toBeInTheDocument();
+        await expect(canvas.getAllByTestId(tableTestIds.ROW).length).toBe(MOCK_DATA.length);
+    },
+};
+
+/** Empty state with TableEmptyRow. */
+export const Empty: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    <TableEmptyRow colSpan={3}>No data available</TableEmptyRow>
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByTestId(tableTestIds.EMPTY_ROW)).toBeInTheDocument();
+        await expect(canvas.queryAllByTestId(tableTestIds.ROW).length).toBe(0);
+    },
+};
+
+/** Loading state with TableLoadingRow. */
+export const Loading: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    <TableLoadingRow colSpan={3} />
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByTestId(tableTestIds.LOADING_ROW)).toBeInTheDocument();
+    },
+};
+
+/** Error state with TableErrorRow. */
+export const WithError: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    <TableErrorRow colSpan={3} error={new globalThis.Error('Connection timed out')} />
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByTestId(tableTestIds.ERROR_ROW)).toBeInTheDocument();
+    },
+};
+
+/** Nested links — row-level link via `to` prop + inner TableCellLink. */
+export const WithNestedLinks: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    {MOCK_DATA.map((item) => (
+                        <TableRow key={item._id} to={`/items/${item._id}`}>
+                            <TableCell>
+                                <TableCellLink to={`/actors/${item._id}`}>{item.name}</TableCellLink>
+                            </TableCell>
+                            <TableCell>{item.email}</TableCell>
+                            <TableCell>{item.status}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getAllByTestId(tableTestIds.ROW).length).toBe(MOCK_DATA.length);
+
+        // Each cell in a row with `to` should have an overlay link + first cell has inner link
+        const cells = canvas.getAllByTestId(tableTestIds.CELL);
+        const firstCellLinks = cells[0].querySelectorAll('a');
+        await expect(firstCellLinks.length).toBe(2);
+    },
+};
+
+/** Direct inline data — no hooks, no data fetching. */
+export const DirectData: Story = {
+    render: () => {
+        const items = [
+            { _id: '1', key: 'API_TOKEN', value: '••••••••', updatedAt: '2025-04-01' },
+            { _id: '2', key: 'BASE_URL', value: 'https://api.example.com', updatedAt: '2025-03-15' },
+            { _id: '3', key: 'TIMEOUT_MS', value: '30000', updatedAt: '2025-02-20' },
+        ];
+
+        return (
+            <HorizontallyScrollableTableWrapper>
+                <Table>
+                    <TableHead>
+                        <TableHeadRow>
+                            <TableHeadCell>Key</TableHeadCell>
+                            <TableHeadCell>Value</TableHeadCell>
+                            <TableHeadCell>Updated</TableHeadCell>
+                        </TableHeadRow>
+                    </TableHead>
+                    <TableBody>
+                        {items.map((item) => (
+                            <TableRow key={item._id}>
+                                <TableCell><Text weight="bold">{item.key}</Text></TableCell>
+                                <TableCell>{item.value}</TableCell>
+                                <TableCell>{item.updatedAt}</TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </HorizontallyScrollableTableWrapper>
+        );
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getAllByTestId(tableTestIds.ROW).length).toBe(3);
+    },
+};