@apify/ui-library 1.120.0 → 1.120.1

package/src/components/store/store_actor_header.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { StoreActorHeader } from './store_actor_header.js';
+
+const meta = {
+    title: 'UI-Library/Store/StoreActorHeader',
+    component: StoreActorHeader,
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        name: {
+            control: 'text',
+            description: 'Actor name (slug)',
+        },
+        title: {
+            control: 'text',
+            description: 'Display title of the actor',
+        },
+        username: {
+            control: 'text',
+            description: 'Username of the actor owner',
+        },
+        pictureUrl: {
+            control: 'text',
+            description: 'URL of the actor picture/avatar',
+        },
+        isUnderMaintenance: {
+            control: 'boolean',
+            description: 'Shows warning triangle when actor is under maintenance',
+        },
+        hasRisingStarBadge: {
+            control: 'boolean',
+            description: 'Shows the rising star badge',
+        },
+        avatarSize: {
+            control: 'number',
+            description: 'Size of the avatar in pixels',
+        },
+        newStyle: {
+            control: 'boolean',
+            description: 'Uses new styling with larger gap and different typography',
+        },
+    },
+} satisfies Meta<typeof StoreActorHeader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        name: 'web-scraper',
+        title: 'Web Scraper',
+        username: 'apify',
+        avatarSize: 40,
+    },
+};
+
+export const WithLongNames: Story = {
+    args: {
+        name: 'very-long-actor-name-that-should-be-truncated',
+        title: 'This is a very long actor title that should be truncated with ellipses',
+        username: 'apify',
+        avatarSize: 40,
+    },
+    render: (args) => (
+        <div style={{ width: '250px', border: '1px solid #ccc', padding: '8px' }}>
+            <StoreActorHeader {...args} />
+        </div>
+    ),
+};
+
+export const Variants: Story = {
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+            <div>
+                <h4>Basic</h4>
+                <StoreActorHeader
+                    name="web-scraper"
+                    title="Web Scraper"
+                    username="apify"
+                />
+            </div>
+            <div>
+                <h4>With Picture</h4>
+                <StoreActorHeader
+                    name="web-scraper"
+                    title="Web Scraper"
+                    username="apify"
+                    pictureUrl="https://apify.github.io/apify-web/img/apify-logo/logomark-32x32.svg"
+                />
+            </div>
+            <div>
+                <h4>With Rising Star Badge</h4>
+                <StoreActorHeader
+                    name="instagram-scraper"
+                    title="Instagram Scraper"
+                    username="apify"
+                    hasRisingStarBadge={true}
+                />
+            </div>
+            <div>
+                <h4>Under Maintenance</h4>
+                <StoreActorHeader
+                    name="amazon-scraper"
+                    title="Amazon Product Scraper"
+                    username="junglee"
+                    isUnderMaintenance={true}
+                />
+            </div>
+            <div>
+                <h4>All Features Combined</h4>
+                <StoreActorHeader
+                    name="twitter-scraper"
+                    title="Twitter Scraper"
+                    username="vdrmota"
+                    pictureUrl="https://apify.com/img/actors/twitter-scraper.png"
+                    hasRisingStarBadge={true}
+                    isUnderMaintenance={true}
+                />
+            </div>
+        </div>
+    ),
+};

package/src/components/store/store_actor_header.tsx

@@ -0,0 +1,131 @@
+import styled from 'styled-components';
+
+import { StarEmptyIcon, WarningTriangleIcon } from '@apify/ui-icons';
+
+import { Badge, Box, type BoxProps, Heading, Text, theme } from '../../index.js';
+import { ActorAvatar, actorAvatarClassnames } from './actor_avatar.js';
+
+const storeActorHeaderClassNames = {
+    title: 'ActorStoreItem-title',
+    slug: 'ActorStoreItem-slug',
+    badge: 'ActorStoreItem-badge',
+};
+
+const StyledStoreActorHeader = styled(Box)<{ $newStyle?: boolean }>`
+    display: flex;
+    gap: ${({ $newStyle }) => ($newStyle ? theme.space.space12 : theme.space.space8)};
+    align-items: center;
+
+    .${actorAvatarClassnames.BASE} {
+        border: 1px solid ${theme.color.neutral.border};
+        flex-shrink: 0;
+    }
+
+    .${storeActorHeaderClassNames.badge} {
+        position: absolute;
+        top: -${theme.space.space8};
+        right: -${theme.space.space8};
+    }
+`;
+
+const ActorAvatarWrapper = styled(Box)`
+    position: relative;
+    display: inline-block;
+`;
+
+const StyledCompactBadge = styled(Badge)`
+    padding: ${theme.space.space4};
+`;
+
+const ActorTitleWrapper = styled(Box)`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .${storeActorHeaderClassNames.title} {
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: ${theme.space.space4};
+
+        h3 {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        svg {
+            flex-shrink: 0;
+        }
+    }
+
+    .${storeActorHeaderClassNames.slug} {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+
+export type StoreActorHeaderProps = {
+    name: string,
+    title: string,
+    pictureUrl?: string,
+    username: string,
+    isUnderMaintenance?: boolean,
+    hasRisingStarBadge?: boolean,
+    avatarSize?: number,
+    newStyle?: boolean,
+}
+
+export const StoreActorHeader: React.FC<StoreActorHeaderProps & BoxProps> = ({
+    name,
+    title,
+    pictureUrl,
+    username,
+    isUnderMaintenance = false,
+    hasRisingStarBadge = false,
+    avatarSize = 40,
+    newStyle = false,
+    ...rest
+}) => {
+    return (
+        <StyledStoreActorHeader data-test="actor-store-item-header" $newStyle={newStyle} {...rest}>
+            <ActorAvatarWrapper>
+                <ActorAvatar
+                    size={avatarSize}
+                    url={pictureUrl}
+                    name={title}
+                />
+                {hasRisingStarBadge && <StyledCompactBadge
+                    variant='primary_blue'
+                    size='small'
+                    LeadingIcon={StarEmptyIcon}
+                    className={storeActorHeaderClassNames.badge}
+                />}
+            </ActorAvatarWrapper>
+            <ActorTitleWrapper>
+                <div className={storeActorHeaderClassNames.title}>
+                    { newStyle
+                        ? <Text as='h3' weight='bold' color={theme.color.neutral.text}>{title}</Text>
+                        : <Heading as='h3' type="titleS" color={theme.color.neutral.text}>
+                            {title}
+                        </Heading>}
+
+                    {isUnderMaintenance && (<WarningTriangleIcon size="12" color={theme.color.warning.icon} />)}
+                </div>
+                <Text
+                    size="small"
+                    weight={newStyle ? 'medium' : 'normal'}
+                    type="code"
+                    color={theme.color.neutral.textSubtle}
+                    className={storeActorHeaderClassNames.slug}
+                >
+                    {username}/{name}
+                </Text>
+            </ActorTitleWrapper>
+        </StyledStoreActorHeader>
+    );
+};