@apify/ui-library 1.108.2 → 1.109.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.108.2",
+    "version": "1.109.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "1f8d2e8f2da6545bf69f203409108df5e1b5964c"
+    "gitHead": "b5af68110c0fd0dc105337972f28da075d6e7143"
 }

package/src/components/card_container.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+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';
+
+export default {
+    title: 'UI-Library/CardContainer',
+    component: CardContainer,
+    argTypes: {
+        headerPlacement: {
+            control: { type: 'select' },
+            options: ['TOP', 'BOTTOM'],
+        },
+    },
+} as Meta<CardContainerProps>;
+
+type Story = StoryObj<CardContainerProps>;
+
+const StoryWrapper = styled.div`
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr 1fr 1fr;
+`;
+/**
+ * Default color wheel gradient with standard settings
+ */
+export const Default: Story = {
+    args: {
+        children: 'This is the content',
+        header: 'Recently viewed',
+    },
+    render: (args: CardContainerProps) => {
+        return <StoryWrapper>
+            <CardContainer {...args} />
+            <CardContainer {...args} headerPlacement='BOTTOM'/>
+            <CardContainer
+                {...args}
+                header={<>
+                    <CardContainer.Heading>TEst</CardContainer.Heading>
+                    <IconButton Icon={DragIndicatorIcon}/>
+                </>}
+            />
+            <CardContainer
+                {...args}
+                header={<>
+                    <div>
+                        <CardContainer.Heading># Videos with this hashtag</CardContainer.Heading>
+                        <code style={{ marginLeft: 8 }}>Required</code>
+                    </div>
+                </>}
+            />
+            <CardContainer
+                {...args}
+                header={<>
+                    Completely custom header content
+                </>}
+            />
+        </StoryWrapper>;
+    },
+};

package/src/components/card_container.tsx

@@ -0,0 +1,78 @@
+import type React from 'react';
+import styled from 'styled-components';
+
+import type { ValueOf } from '@apify-packages/types';
+
+import { theme } from '../design_system/theme.js';
+import { Box, type BoxProps } from './box.js';
+
+const classNames = {
+    CONTENT: 'CardContainer-Content',
+    HEADER: 'CardContainer-Header',
+};
+
+const HEADER_PLACEMENT = {
+    TOP: 'TOP',
+    BOTTOM: 'BOTTOM',
+} as const;
+
+const Wrapper = styled(Box)<{$headerPlacement: ValueOf<typeof HEADER_PLACEMENT>}>`
+    background-color: ${theme.color.neutral.backgroundSubtle};
+    border-radius: ${theme.radius.radius12};
+
+    padding: ${theme.space.space2};
+
+    display: flex;
+    flex-direction: ${({ $headerPlacement }) => ($headerPlacement === HEADER_PLACEMENT.TOP ? 'column' : 'column-reverse')};
+
+    .${classNames.CONTENT} {
+        /* Inner radius = outer radius - padding */
+        border-radius: calc(${theme.radius.radius12} - ${theme.space.space2});
+        background-color: ${theme.color.neutral.background};
+
+        padding: ${theme.space.space16};
+        flex-grow: 1;
+    }
+    
+    .${classNames.HEADER} {
+        padding: ${theme.space.space4} ${theme.space.space8};
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+`;
+
+const CardContainerHeading = styled.span`${theme.typography.shared.desktop.bodyMMedium}`;
+
+export type CardContainerProps = BoxProps & {
+    /** The header can be placed on the bottom of the card or on the top. */
+    headerPlacement?: ValueOf<typeof HEADER_PLACEMENT>,
+    /**
+     * If string is passed, the correct styles are applied automatically.
+     * In case of custom component, use `CardContainer.Heading` component to get the same styles.
+     */
+    header: React.ReactNode,
+};
+
+/**
+ * CardContainer visually wraps it's children and shows a simple header.
+ *
+ * The header can be customized.
+ */
+export const CardContainer = ({
+    children,
+    header,
+    headerPlacement = HEADER_PLACEMENT.TOP,
+    ...rest
+}: CardContainerProps) => (
+    <Wrapper {...rest} $headerPlacement={headerPlacement}>
+        <div className={classNames.HEADER}>
+            {typeof header === 'string' ? <CardContainerHeading>{header}</CardContainerHeading> : header}
+        </div>
+        <div className={classNames.CONTENT}>
+            {children}
+        </div>
+    </Wrapper>
+);
+
+CardContainer.Heading = CardContainerHeading;

package/src/components/code/action_button.tsx

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { CheckIcon, CopyIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
 import { useCopyToClipboard } from '../../utils/index.js';
 import { Text } from '../text/index.js';
 
@@ -62,19 +63,33 @@ const StyledButton = styled.button<StyledButtonProps>`
 
 interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     successStyle?: boolean;
+    trackingId?: string;
+    trackingData?: Record<string, unknown>;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 export const ActionButton = ({
     successStyle,
     children,
+    trackingId,
+    trackingData,
+    onClick,
     ...props
 }: ActionButtonProps) => {
     const hasText = typeof children === 'string';
 
+    const { trackClick } = useSharedUiDependencies();
+
+    const trackedOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (trackClick && trackingId) trackClick(trackingId, trackingData);
+        if (onClick) onClick(e);
+    };
+
     return (
         <StyledButton
             $successStyle={successStyle}
             $hasText={hasText}
+            onClick={trackedOnClick}
             {...props}
         >
             {hasText ? <Text weight="bold">{children}</Text> : children}
@@ -84,12 +99,18 @@ export const ActionButton = ({
 
 interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     code: string;
+    trackingId?: string;
+    trackingData?: Record<string, unknown>;
 }
 
 export const CopyButton = ({ code, ...props }: CopyButtonProps) => {
     const { isCopied, copyToClipboard } = useCopyToClipboard();
     return (
-        <ActionButton onClick={async () => copyToClipboard(code)} data-test='copy_to_clipboard' aria-label="Copy to clipboard" {...props}>
+        <ActionButton
+            onClick={async () => copyToClipboard(code)}
+            data-test='copy_to_clipboard'
+            aria-label="Copy to clipboard"
+            {...props}>
             {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
         </ActionButton>
     );

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

@@ -137,6 +137,16 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
     }
 `;
 
+export type TrackingBundleDataObject = {
+    trackingId: string;
+    trackingData?: Record<string, unknown>;
+};
+
+export type OneLineCodeTrackingBundle = Record<
+    'secret' | 'copy' | 'action',
+    TrackingBundleDataObject
+>;
+
 export type OneLineCodeProps = BoxProps & {
     children: string;
     language?: string;
@@ -149,6 +159,7 @@ export type OneLineCodeProps = BoxProps & {
     secret?: string;
     disabled?: boolean;
     hideCopyButton?: boolean;
+    trackingBundle?: OneLineCodeTrackingBundle;
 }
 
 export function OneLineCode({
@@ -163,6 +174,7 @@ export function OneLineCode({
     secret,
     disabled,
     hideCopyButton,
+    trackingBundle,
     ...rest
 }: OneLineCodeProps) {
     const hasSecret = secret !== undefined;
@@ -209,6 +221,8 @@ export function OneLineCode({
                 {hasSecret && (
                     <ActionButton
                         onClick={() => setShowSecret((prev) => !prev)}
+                        trackingId={trackingBundle?.secret?.trackingId}
+                        trackingData={trackingBundle?.secret?.trackingData}
                         data-test='toggle-visibility-button'
                     >
                         {showSecret ? (
@@ -218,9 +232,19 @@ export function OneLineCode({
                         )}
                     </ActionButton>
                 )}
-                {!hideCopyButton && <CopyButton code={codeWithSecret} />}
+                {!hideCopyButton && (
+                    <CopyButton
+                        code={codeWithSecret}
+                        trackingId={trackingBundle?.copy?.trackingId}
+                        trackingData={trackingBundle?.copy?.trackingData}
+                    />
+                )}
                 {!!onActionButtonClick && (
-                    <ActionButton onClick={onActionButtonClick}>
+                    <ActionButton
+                        onClick={onActionButtonClick}
+                        trackingId={trackingBundle?.action?.trackingId}
+                        trackingData={trackingBundle?.action?.trackingData}
+                    >
                         {actionButtonLabel}
                     </ActionButton>
                 )}

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './text/index.js';
 export * from './box.js';
+export * from './card_container.js';
 export * from './message.js';
 export * from './floating/index.js';
 export * from './button.js';