@apify/ui-library 1.168.2 → 1.169.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.168.2",
+    "version": "1.169.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -42,7 +42,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.54.0",
+        "@apify/ui-icons": "^1.55.0",
         "@floating-ui/react": "^0.27.19",
         "@floating-ui/react-dom": "^2.1.8",
         "@radix-ui/react-checkbox": "^1.3.3",
@@ -94,5 +94,5 @@
         "src",
         "style"
     ],
-    "gitHead": "9b5709c7d03526fdda3f4ad091c5890b4e745891"
+    "gitHead": "7519bd1e0002f8cef068f52e90f3aff203d15bec"
 }

package/src/components/avatar/bordered_actor_avatar.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BorderedActorAvatar } from './bordered_actor_avatar';
+
+const AVATAR_SIZES = [24, 32, 40, 44] as const;
+
+export default {
+    title: 'UI-Library/Avatar/BorderedActorAvatar',
+    component: BorderedActorAvatar,
+    argTypes: {
+        size: { control: 'select', options: AVATAR_SIZES },
+        name: { control: 'text' },
+        url: { control: 'text' },
+    },
+    args: {
+        name: 'Web Scraper',
+        size: 24,
+    },
+    tags: ['new'],
+} as Meta<typeof BorderedActorAvatar>;
+
+type Story = StoryObj<typeof BorderedActorAvatar>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-end' }}>
+            {AVATAR_SIZES.map((size) => (
+                <div key={size} style={{ textAlign: 'center' }}>
+                    <BorderedActorAvatar name="Web Scraper" size={size} />
+                    <p style={{ marginTop: '8px', fontSize: '12px' }}>{size}px</p>
+                </div>
+            ))}
+        </div>
+    ),
+};
+
+export const WithImageUrl: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-end' }}>
+            {AVATAR_SIZES.map((size) => (
+                <div key={size} style={{ textAlign: 'center' }}>
+                    <BorderedActorAvatar
+                        name="Actors MCP Server"
+                        url="https://apify.github.io/apify-web/img/apify-logo/logomark-32x32.svg"
+                        size={size}
+                    />
+                    <p style={{ marginTop: '8px', fontSize: '12px' }}>{size}px</p>
+                </div>
+            ))}
+        </div>
+    ),
+};

package/src/components/avatar/bordered_actor_avatar.tsx

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme';
+import { Box, type BoxProps } from '../box';
+import { ActorAvatar, getActorAvatarBorderRadius } from './actor_avatar';
+
+const BORDER_WIDTH = 1;
+
+/** Computes border, padding, and radius dimensions for the bordered wrapper. */
+const getBorderedStyle = (size: number) => {
+    const padding = size < 40 ? 2 : 3;
+    const outerRadius = getActorAvatarBorderRadius(size);
+    const innerRadius = Math.max(outerRadius - 3, 2);
+    const innerSize = Math.max(size - (BORDER_WIDTH + padding) * 2, 1);
+
+    return { padding, outerRadius, innerRadius, innerSize };
+};
+
+type StyledBorderProps = { $outerRadius: number; $padding: number };
+
+const StyledBorder = styled(Box)<StyledBorderProps>`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: ${BORDER_WIDTH}px solid ${theme.color.neutral.border};
+    border-radius: ${({ $outerRadius }) => $outerRadius}px;
+    padding: ${({ $padding }) => $padding}px;
+    overflow: hidden;
+`;
+
+type BorderedActorAvatarProps = BoxProps & {
+    name?: string;
+    url?: string | null;
+    size: 24 | 32 | 40 | 44;
+};
+
+export const BorderedActorAvatar = ({ size, name, url, ...rest }: BorderedActorAvatarProps) => {
+    const { padding, outerRadius, innerRadius, innerSize } = getBorderedStyle(size);
+
+    return (
+        <StyledBorder $outerRadius={outerRadius} $padding={padding} {...rest}>
+            <ActorAvatar size={innerSize} borderRadius={`${innerRadius}px`} name={name} url={url} />
+        </StyledBorder>
+    );
+};

package/src/components/avatar/index.ts

@@ -1,2 +1,3 @@
 export * from './actor_avatar';
+export * from './bordered_actor_avatar';
 export * from './user_avatar';

package/src/components/index.ts

@@ -30,6 +30,7 @@ export * from './tabs';
 export * from './shortcut';
 export * from './icon_button';
 export * from './brand_icon';
+export * from './skeleton';
 export * from './spinner';
 export * from './store';
 export * from './checkbox';

package/src/components/skeleton/examples/actor_idea_cards_skeleton.example.tsx

@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+
+import { Box, Skeleton, SkeletonGroup, theme } from '@apify/ui-library';
+
+// apify.com Ideas search results: avatar, heading, a three-line paragraph and two footer chips.
+
+const StyledGrid = styled(SkeletonGroup)`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
+    gap: ${theme.space.space16};
+`;
+
+const StyledCard = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space16};
+    padding: ${theme.space.space16} ${theme.space.space24};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius16};
+    background-color: ${theme.color.neutral.cardBackground};
+`;
+
+const StyledHeader = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space8};
+`;
+
+const StyledLines = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space12};
+`;
+
+const StyledFooter = styled(Box)`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${theme.space.space12};
+    margin-top: auto;
+`;
+
+const ActorIdeaCardSkeleton = () => (
+    <StyledCard>
+        <StyledHeader>
+            <Skeleton width={theme.space.space40} height={theme.space.space40} />
+            <Skeleton width="52%" height="2rem" />
+        </StyledHeader>
+        <StyledLines>
+            <Skeleton height={theme.space.space16} />
+            <Skeleton width="94%" height={theme.space.space16} />
+            <Skeleton width="68%" height={theme.space.space16} />
+        </StyledLines>
+        <StyledFooter>
+            <Skeleton width="52%" height="2rem" />
+            <Skeleton width="34%" height={theme.space.space16} />
+        </StyledFooter>
+    </StyledCard>
+);
+
+export const ActorIdeaCardsSkeleton = ({ count = 6 }: { count?: number }) => (
+    <StyledGrid label="Loading Actor ideas">
+        {Array.from({ length: count }, (_, index) => (
+            <ActorIdeaCardSkeleton key={index} />
+        ))}
+    </StyledGrid>
+);

package/src/components/skeleton/examples/new_actor_wizard_cards_skeleton.example.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+import { Box, Skeleton, SkeletonGroup, theme } from '@apify/ui-library';
+
+// Console new Actor wizard: the use-case, language and recommendation cards of a step.
+
+const StyledGrid = styled(SkeletonGroup)`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    gap: ${theme.space.space16};
+`;
+
+const StyledCard = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space16};
+    min-height: 23rem;
+    padding: ${theme.space.space24};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    background-color: ${theme.color.neutral.cardBackground};
+`;
+
+const StyledLines = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space4};
+`;
+
+const StyledActions = styled(StyledLines)`
+    margin-top: auto;
+`;
+
+const NewActorWizardCardSkeleton = () => (
+    <StyledCard>
+        <Skeleton width={theme.space.space32} height={theme.space.space32} />
+        <Skeleton width="40%" height={theme.space.space12} />
+        <StyledLines>
+            <Skeleton width="90%" height={theme.space.space8} />
+            <Skeleton width="70%" height={theme.space.space8} />
+        </StyledLines>
+        <StyledActions>
+            <Skeleton height={theme.space.space32} />
+            <Skeleton height={theme.space.space32} />
+        </StyledActions>
+    </StyledCard>
+);
+
+export const NewActorWizardCardsSkeleton = ({ count = 4 }: { count?: number }) => (
+    <StyledGrid label="Loading recommendations">
+        {Array.from({ length: count }, (_, index) => (
+            <NewActorWizardCardSkeleton key={index} />
+        ))}
+    </StyledGrid>
+);

package/src/components/skeleton/examples/publication_categories_skeleton.example.tsx

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+import { Box, Skeleton, SkeletonGroup, Text, theme } from '@apify/ui-library';
+
+// Actor publication tab while the LLM assigns categories: the labels are real text, only the values load.
+
+const CATEGORY_ROWS = [
+    { label: 'Use case', width: '49%' },
+    { label: 'Industry', width: '60%' },
+    { label: 'Output', width: '49%' },
+    { label: 'Domain', width: '60%' },
+    { label: 'Label', width: '55%' },
+];
+
+const StyledPanel = styled(SkeletonGroup)`
+    max-width: 48rem;
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    background-color: ${theme.color.neutral.cardBackground};
+`;
+
+const StyledRow = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space16};
+    min-height: 5.2rem;
+    padding: ${theme.space.space16};
+
+    & + & {
+        border-top: 1px solid ${theme.color.neutral.separatorSubtle};
+    }
+`;
+
+const StyledLabel = styled(Text)`
+    flex: none;
+    width: 9.2rem;
+`;
+
+export const PublicationCategoriesSkeleton = () => (
+    <StyledPanel label="Assigning categories">
+        {CATEGORY_ROWS.map(({ label, width }) => (
+            <StyledRow key={label}>
+                <StyledLabel size="small" color={theme.color.neutral.textSubtle}>
+                    {label}
+                </StyledLabel>
+                <Skeleton width={width} height={theme.space.space12} />
+            </StyledRow>
+        ))}
+    </StyledPanel>
+);

package/src/components/skeleton/examples/store_actor_cards_loading.example.tsx

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+import { Box, SkeletonFadeIn, Text, theme } from '@apify/ui-library';
+
+import {
+    StoreActorCardsSkeleton,
+    StyledStoreCardBody,
+    StyledStoreCardFooter,
+    StyledStoreCardShell,
+} from './store_actor_cards_skeleton.example';
+
+// Show the skeleton only while the request is in flight, swap it for the content the moment the data lands,
+// and let the content fade in. The skeleton mirrors the card, so the swap does not move the page.
+
+type StoreActor = { id: string; title: string; name: string; description: string; author: string; stats: string };
+
+const StyledGrid = styled(Box)`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
+    gap: ${theme.space.space16};
+`;
+
+const StyledHeader = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space12};
+`;
+
+const StyledAvatar = styled(Box)`
+    flex: none;
+    width: ${theme.space.space40};
+    height: ${theme.space.space40};
+    border-radius: ${theme.radius.radius12};
+    background-color: ${theme.color.primary.background};
+`;
+
+const StoreActorCard = ({ actor }: { actor: StoreActor }) => (
+    <StyledStoreCardShell>
+        <StyledStoreCardBody>
+            <StyledHeader>
+                <StyledAvatar />
+                <Box>
+                    <Text weight="bold">{actor.title}</Text>
+                    <Text size="small" color={theme.color.neutral.textSubtle}>
+                        {actor.name}
+                    </Text>
+                </Box>
+            </StyledHeader>
+            <Text size="small">{actor.description}</Text>
+        </StyledStoreCardBody>
+        <StyledStoreCardFooter>
+            <Text size="small" color={theme.color.neutral.textSubtle}>
+                {actor.author}
+            </Text>
+            <Text size="small" color={theme.color.neutral.textSubtle}>
+                {actor.stats}
+            </Text>
+        </StyledStoreCardFooter>
+    </StyledStoreCardShell>
+);
+
+export const StoreActorCardsLoading = ({ actors }: { actors?: StoreActor[] }) => {
+    if (!actors) return <StoreActorCardsSkeleton count={2} />;
+
+    return (
+        <SkeletonFadeIn>
+            <StyledGrid>
+                {actors.map((actor) => (
+                    <StoreActorCard key={actor.id} actor={actor} />
+                ))}
+            </StyledGrid>
+        </SkeletonFadeIn>
+    );
+};

package/src/components/skeleton/examples/store_actor_cards_skeleton.example.tsx

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+import { Box, Skeleton, SkeletonGroup, theme } from '@apify/ui-library';
+
+// Store home sections, Store search and Actor collections. The card has two surfaces: the body is inset in a
+// `backgroundSubtle` shell and the footer sits on the shell. The translucent skeleton stays visible on both.
+
+const StyledGrid = styled(SkeletonGroup)`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
+    gap: ${theme.space.space16};
+`;
+
+export const StyledStoreCardShell = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space2};
+    padding: ${theme.space.space2};
+    border-radius: ${theme.radius.radius8};
+    background-color: ${theme.color.neutral.backgroundSubtle};
+`;
+
+export const StyledStoreCardBody = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+    padding: ${theme.space.space16};
+    border-radius: ${theme.radius.radius6};
+    background-color: ${theme.color.neutral.cardBackground};
+`;
+
+export const StyledStoreCardFooter = styled(Box)`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${theme.space.space8};
+    padding: ${theme.space.space4} ${theme.space.space8};
+`;
+
+const StyledRow = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space8};
+`;
+
+const StyledHeader = styled(StyledRow)`
+    gap: ${theme.space.space12};
+`;
+
+const StyledTitle = styled(Box)`
+    flex: 1;
+    min-width: 0;
+`;
+
+const StyledLines = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+`;
+
+const StoreActorCardSkeleton = () => (
+    <StyledStoreCardShell>
+        <StyledStoreCardBody>
+            <StyledHeader>
+                <Skeleton width={theme.space.space40} height={theme.space.space40} />
+                <StyledTitle>
+                    <Skeleton width="70%" height="2rem" />
+                </StyledTitle>
+            </StyledHeader>
+            <StyledLines>
+                <Skeleton height={theme.space.space12} />
+                <Skeleton width="62%" height={theme.space.space12} />
+            </StyledLines>
+        </StyledStoreCardBody>
+        <StyledStoreCardFooter>
+            <StyledRow>
+                <Skeleton width="2rem" height="2rem" />
+                <Skeleton width="3.8rem" height={theme.space.space16} />
+            </StyledRow>
+            <StyledRow>
+                <Skeleton width="5.6rem" height={theme.space.space16} />
+                <Skeleton width={theme.space.space40} height={theme.space.space16} />
+            </StyledRow>
+        </StyledStoreCardFooter>
+    </StyledStoreCardShell>
+);
+
+export const StoreActorCardsSkeleton = ({ count = 4 }: { count?: number }) => (
+    <StyledGrid label="Loading Actors">
+        {Array.from({ length: count }, (_, index) => (
+            <StoreActorCardSkeleton key={index} />
+        ))}
+    </StyledGrid>
+);

package/src/components/skeleton/index.ts

@@ -0,0 +1,5 @@
+export { Skeleton, type SkeletonProps } from './skeleton';
+export { SkeletonFadeIn, type SkeletonFadeInProps } from './skeleton_fade_in';
+export { SkeletonGroup, type SkeletonGroupProps } from './skeleton_group';
+export { skeletonClassNames } from './skeleton.styled';
+export { skeletonTestIds } from './skeleton.test_ids';