@apify/ui-library 1.127.5 → 1.127.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.127.5",
+    "version": "1.127.7",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -27,9 +27,10 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.29.1",
+        "@apify/ui-icons": "^1.29.2",
         "@floating-ui/react": "^0.26.2",
         "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-collapsible": "^1.0.0",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
         "dayjs": "1.11.9",
@@ -67,5 +68,5 @@
         "src",
         "style"
     ],
-    "gitHead": "ed1183fd2d33f91e7429ae07b7e2fa6197a051e4"
+    "gitHead": "f5c8dc90016b381b6621529320ad6af263b2f246"
 }

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

@@ -3,6 +3,8 @@ import _ from 'lodash';
 import type React from 'react';
 import styled from 'styled-components';
 
+import { CodeIcon, HttpIcon, type IconComponent, McpIcon } from '@apify/ui-icons';
+
 import { theme } from '../../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
 import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box.js';
@@ -14,19 +16,21 @@ export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi'
 type CodeBlockTabConfig = {
     label: string;
     language: string;
-    src: string;
+    Icon?: IconComponent;
+    /** Fallback image URL for tabs that don't have an Icon component yet */
+    src?: string;
 };
 
 export const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig> = {
     cli: {
         label: 'CLI',
         language: 'bash',
-        src: 'https://apify.com/img/icons/code.svg',
+        Icon: CodeIcon,
     },
     http: {
         label: 'HTTP',
         language: 'bash',
-        src: 'https://apify.com/img/icons/http.svg',
+        Icon: HttpIcon,
     },
     javascript: {
         label: 'JavaScript',
@@ -37,7 +41,7 @@ export const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig>
     mcp: {
         label: 'MCP',
         language: 'bash',
-        src: 'https://apify.com/img/icons/mcp.svg',
+        Icon: McpIcon,
     },
     openapi: {
         label: 'OpenAPI',
@@ -201,7 +205,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
         <CodeBlockWithTabsWrapper className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className)} {...props}>
             <div className={CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS}>
                 {tabs.map((tab) => {
-                    const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
+                    const { label, src, Icon } = CODE_BLOCK_TAB_CATALOG[tab.key];
                     const selected = (optimisticCurrentTabKey ?? currentTabKey) === tab.key;
 
                     const commonProps = {
@@ -211,7 +215,10 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     };
                     const children = (
                         <>
-                            <img src={generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src} alt={label} />
+                            {Icon
+                                ? <Icon size="20" />
+                                : <img src={src && (generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src)} alt={label} />
+                            }
                             <HeadingShared type="titleS" as="p">
                                 {label}
                             </HeadingShared>

package/src/components/collapsible_card/collapsible_card.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CollapsibleCard, type CollapsibleCardProps } from './collapsible_card.js';
+
+export default {
+    title: 'UI-Library/Cards/CollapsibleCard',
+    component: CollapsibleCard,
+    argTypes: {
+        header: {
+            control: 'text',
+            description: 'Content rendered in the clickable header area',
+        },
+        children: {
+            control: 'text',
+            description: 'Main content revealed when the card is expanded',
+        },
+        isExpanded: {
+            control: 'boolean',
+            description: 'Controlled expanded state',
+        },
+        onIsExpandedChanged: {
+            control: false,
+            description: 'Callback when expanded state changes (controlled mode)',
+        },
+        noChevron: {
+            control: 'boolean',
+            description: 'Whether to hide the chevron icon',
+        },
+        topSection: {
+            control: 'text',
+            description: 'Content rendered above the header',
+        },
+        isClosedHeaderGrey: {
+            control: 'boolean',
+            description: 'Whether the header has a muted background when collapsed',
+        },
+        isHeaderGreyOnHover: {
+            control: 'boolean',
+            description: 'Whether the header turns grey on hover',
+        },
+        hideOuterBorder: {
+            control: 'boolean',
+            description: 'Whether to hide the outer border and border radius',
+        },
+        hasShadow: {
+            control: 'boolean',
+            description: 'Whether the card has a box shadow',
+        },
+        as: {
+            control: 'text',
+            description: 'The HTML element type to render as',
+        },
+    },
+} as Meta<CollapsibleCardProps>;
+
+type Story = StoryObj<CollapsibleCardProps>;
+
+/**
+ * An uncontrolled collapsible card that manages its own expanded state.
+ */
+export const Uncontrolled: Story = {
+    args: {
+        header: 'Click to expand',
+        children: 'This is the collapsible content. It starts collapsed by default.',
+    },
+};
+
+/**
+ * A controlled collapsible card that starts expanded.
+ */
+export const Controlled: Story = {
+    args: {
+        header: 'Controlled card (expanded by default)',
+        children: 'This card is controlled externally via isExpanded prop.',
+        isExpanded: true,
+    },
+};
+
+/**
+ * A collapsible card with a top section above the header.
+ */
+export const WithTopSection: Story = {
+    args: {
+        header: 'Card with top section',
+        topSection: 'Top section content',
+        children: 'Content below the collapsible header.',
+    },
+};
+
+/**
+ * A collapsible card without the chevron indicator.
+ */
+export const NoChevron: Story = {
+    args: {
+        header: 'No chevron icon',
+        noChevron: true,
+        children: 'This card has no chevron indicator.',
+    },
+};
+
+/**
+ * A collapsible card with a muted header background when collapsed.
+ */
+export const GreyHeaderWhenClosed: Story = {
+    args: {
+        header: 'Muted background when closed, more prominent on hover',
+        isClosedHeaderGrey: true,
+        children: 'The header has a muted background when the card is collapsed, which becomes more prominent on hover.',
+    },
+};
+
+/**
+ * A collapsible card with a grey header on hover.
+ */
+export const GreyHeaderOnHover: Story = {
+    args: {
+        header: 'Grey on hover',
+        isHeaderGreyOnHover: true,
+        children: 'The header turns grey when hovered.',
+    },
+};
+
+/**
+ * A collapsible card without the outer border.
+ */
+export const HiddenOuterBorder: Story = {
+    args: {
+        header: 'No outer border',
+        hideOuterBorder: true,
+        children: 'This card has no outer border or border radius.',
+    },
+};

package/src/components/collapsible_card/collapsible_card.tsx

@@ -0,0 +1,159 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import clsx from 'clsx';
+import { type FC, type ReactNode, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ChevronDownIcon } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils.js';
+import { Box } from '../box.js';
+
+interface TransientWrapperProps {
+    hideOuterBorder?: boolean;
+    hasShadow?: boolean;
+}
+
+interface TransientHeaderProps {
+    isHeaderGrey?: boolean;
+    isHeaderGreyOnHover?: boolean;
+    hideOuterBorder?: boolean;
+}
+
+type StyledWrapperProps = WithTransientProps<TransientWrapperProps>;
+type StyledHeaderProps = WithTransientProps<TransientHeaderProps>;
+
+export type CollapsibleCardProps = {
+    header: ReactNode;
+    children: ReactNode;
+    isExpanded?: boolean;
+    onIsExpandedChanged?: (expanded: boolean) => void;
+    noChevron?: boolean;
+    topSection?: ReactNode;
+    isClosedHeaderGrey?: boolean;
+    isHeaderGreyOnHover?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    as?: React.ElementType;
+    id?: string;
+} & TransientWrapperProps;
+
+export const collapsibleCardClassNames = {
+    TOP_SECTION: 'CollapsibleCard-TopSection',
+    COLLAPSIBLE_CONTENT_WRAPPER: 'CollapsibleCard-Content',
+    CONTENT: 'Card-content',
+};
+
+const StyledCardWrapper = styled(Box) <StyledWrapperProps>`
+    /* consoleStyle.partialStyle.card — TODO: reuse from Card once moved out of to_consolidate */
+    background-color: ${theme.color.neutral.cardBackground};
+    border: 1px solid ${theme.color.neutral.border};
+    box-shadow: var(--shadow-1);
+    border-radius: ${theme.radius.radius8};
+    box-sizing: border-box;
+
+    ${({ $hideOuterBorder }) => $hideOuterBorder && css`
+        border: none;
+        border-radius: unset;
+    `};
+    /* Reset padding, it is dealt with within header and content styles */
+    padding: 0;
+    ${({ $hasShadow }) => ($hasShadow ? '' : 'box-shadow: initial;')}
+    /* TODO: check if it this is needed, ie in publication tab it is reset back to overflow: visible */
+    overflow: hidden;
+`;
+
+const StyledTopSection = styled.div`
+    display: flex;
+    align-items: center;
+    padding: ${theme.space.space4} ${theme.space.space8};
+    background: ${theme.color.neutral.backgroundMuted};
+    border-bottom: solid 1px ${theme.color.neutral.border};
+    gap: ${theme.space.space8};
+`;
+
+const StyledHeader = styled.header<StyledHeaderProps>`
+    display: flex;
+    gap: ${theme.space.space4};
+    align-items: center;
+    ${({ onClick }) => (onClick ? 'cursor: pointer;' : '')};
+    padding: ${theme.space.space16};
+    background-color: ${({ $isHeaderGrey }) => ($isHeaderGrey ? theme.color.neutral.backgroundMuted : 'initial')};
+    /* We want to radiuses if there is no outer border */
+    ${({ $hideOuterBorder }) => ($hideOuterBorder ? '' : `border-radius: ${theme.radius.radius8};`)}
+
+    &:hover {
+        background-color: ${({ $isHeaderGrey, $isHeaderGreyOnHover }) => (($isHeaderGrey || $isHeaderGreyOnHover) ? theme.color.neutral.hover : 'initial')};
+    }
+
+    .chevron {
+        transition: transform 100ms ease-in-out;
+    }
+
+    .chevron-open {
+        transform: rotate(0deg);
+    }
+
+    .chevron-closed {
+        transform: rotate(-90deg);
+    }
+`;
+
+const StyledCardContent = styled.div`
+    padding: ${theme.space.space16};
+    overflow: auto;
+`;
+
+const CollapsibleContent = styled(Collapsible.Content)`
+    border-top: 1px solid ${theme.color.neutral.border};
+`;
+
+export const CollapsibleCard: FC<CollapsibleCardProps> = ({
+    header,
+    children,
+    isExpanded,
+    onIsExpandedChanged,
+    noChevron,
+    topSection,
+    ...rest
+}) => {
+    const isUncontrolled = isExpanded === undefined;
+    const [isOpen, setOpen] = useState(false);
+
+    let onHeaderClick;
+    if (isUncontrolled) onHeaderClick = () => setOpen((prevIsOpen) => !prevIsOpen);
+    else if (onIsExpandedChanged) onHeaderClick = () => onIsExpandedChanged(!isExpanded);
+
+    return (
+        <StyledCardWrapper
+            forwardedAs={rest.as || 'section'}
+            $hideOuterBorder={rest.hideOuterBorder}
+            $hasShadow={rest.hasShadow}
+            className={rest.className}
+            style={rest.style}
+            id={rest.id}
+        >
+            {topSection && <StyledTopSection className={collapsibleCardClassNames.TOP_SECTION} data-test='collapsible-card-top-section'>
+                {topSection}
+            </StyledTopSection>}
+            <StyledHeader
+                $hideOuterBorder={rest.hideOuterBorder}
+                $isHeaderGrey={rest.isClosedHeaderGrey && !isOpen && !isExpanded}
+                $isHeaderGreyOnHover={rest.isHeaderGreyOnHover}
+                onClick={onHeaderClick}
+            >
+                {!noChevron && <ChevronDownIcon size="16" className={clsx('chevron', (isExpanded ?? isOpen) ? 'chevron-open' : 'chevron-closed')} />}
+                {header}
+            </StyledHeader>
+            <Collapsible.Root
+                open={isUncontrolled ? isOpen : isExpanded}
+            >
+                <CollapsibleContent className={collapsibleCardClassNames.COLLAPSIBLE_CONTENT_WRAPPER}>
+                    <StyledCardContent className={collapsibleCardClassNames.CONTENT} data-test="card-content">
+                        {children}
+                    </StyledCardContent>
+                </CollapsibleContent>
+            </Collapsible.Root>
+        </StyledCardWrapper>
+    );
+};

package/src/components/collapsible_card/index.ts

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

package/src/components/index.ts

@@ -27,3 +27,4 @@ export * from './icon_button.js';
 export * from './spinner.js';
 export * from './store/index.js';
 export * from './checkbox/index.js';
+export * from './collapsible_card/index.js';