@apify/ui-library 1.138.0 → 1.138.1

package/src/components/avatar/boring_avatar.tsx

@@ -54,25 +54,14 @@ function generateProperties(name: string, colors: string[]) {
     return elementsProperties;
 }
 
-function generateFill(
-    properties: ReturnType<typeof generateProperties>,
-    name: string,
-) {
-    const {
-        translateX: translateX1,
-        translateY: translateY1,
-        rotate: rotate1,
-    } = properties[1];
-    const {
-        translateX: translateX2,
-        translateY: translateY2,
-        rotate: rotate2,
-        scale,
-    } = properties[2];
+function generateFill(properties: ReturnType<typeof generateProperties>, name: string) {
+    const { translateX: translateX1, translateY: translateY1, rotate: rotate1 } = properties[1];
+    const { translateX: translateX2, translateY: translateY2, rotate: rotate2, scale } = properties[2];
 
     let nameParts = name
         .replace(emojiRegexPattern, ' ') // Remove emojis from the name
-        .trim().replace(/\s+/g, ' ') // Remove multiple spaces
+        .trim()
+        .replace(/\s+/g, ' ') // Remove multiple spaces
         .toUpperCase()
         .split(' '); // Ideally if the Actor has a name with spaces, we take words separated by spaces
 
@@ -82,7 +71,9 @@ function generateFill(
     if (nameParts.length <= 1) nameParts = nameParts[0].split(''); // In the end we take the first word and separate it by letter
 
     // Nice to have: remove ignored words from the name if the name has more than 2 words
-    if (nameParts.length > 2) { nameParts = nameParts.filter((part) => !IGNORED_WORDS.includes(part)); }
+    if (nameParts.length > 2) {
+        nameParts = nameParts.filter((part) => !IGNORED_WORDS.includes(part));
+    }
 
     return {
         fill0: properties[0].color,
@@ -104,159 +95,135 @@ interface BoringAvatarProps {
     alt?: string;
 }
 
-export const BoringAvatarMarble = React.memo(({
-    name = '',
-    colors = ['#12966F', '#5D85E1', '#E44467', '#F0B21B', '#FA8136', '#30C0BB'],
-    square = false,
-    className,
-    size = 24,
-    alt = 'Avatar image',
-}: BoringAvatarProps) => {
-    const fill = useMemo(() => {
-        const properties = generateProperties(name ?? '', colors);
-        return generateFill(properties, name ?? '');
-    }, [name, colors]);
-
-    return (
-        <svg
-            viewBox={`0 0 ${SIZE} ${SIZE}`}
-            fill="none"
-            role="img"
-            xmlns="http://www.w3.org/2000/svg"
-            width={size}
-            height={size}
-            className={className}
-            aria-label={alt}
-        >
-            <mask
-                id="mask__marble"
-                maskUnits="userSpaceOnUse"
-                x={0}
-                y={0}
-                width={SIZE}
-                height={SIZE}
+export const BoringAvatarMarble = React.memo(
+    ({
+        name = '',
+        colors = ['#12966F', '#5D85E1', '#E44467', '#F0B21B', '#FA8136', '#30C0BB'],
+        square = false,
+        className,
+        size = 24,
+        alt = 'Avatar image',
+    }: BoringAvatarProps) => {
+        const fill = useMemo(() => {
+            const properties = generateProperties(name ?? '', colors);
+            return generateFill(properties, name ?? '');
+        }, [name, colors]);
+
+        return (
+            <svg
+                viewBox={`0 0 ${SIZE} ${SIZE}`}
+                fill="none"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                width={size}
+                height={size}
+                className={className}
+                aria-label={alt}
             >
-                <rect
-                    width={SIZE}
-                    height={SIZE}
-                    rx={square ? undefined : SIZE * 2}
-                    fill="#FFFFFF"
-                />
-            </mask>
-            <g mask="url(#mask__marble)">
-                <rect width={SIZE} height={SIZE} fill={fill.fill0} />
-                <path
-                    filter="url(#prefix__filter0_f)"
-                    d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
-                    fill={fill.fill1}
-                    transform={fill.transform1}
-                />
-                <path
-                    filter="url(#prefix__filter0_f)"
-                    style={{
-                        mixBlendMode: 'overlay',
-                    }}
-                    d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
-                    fill={fill.fill2}
-                    transform={fill.transform2}
-                />
-            </g>
-            <g>
-                {fill.letter1 && (
-                    <text
-                        style={{ fontSize: '50px' }}
-                        x="50"
-                        y="50"
-                        dy="7"
-                        textAnchor="middle"
-                        alignmentBaseline="middle"
-                        dominantBaseline="middle"
-                    >
-                        {fill.letter1}
-                        {fill.letter2}
-                    </text>
-                )}
-            </g>
-            <defs>
-                <filter
-                    id="prefix__filter0_f"
-                    filterUnits="userSpaceOnUse"
-                    colorInterpolationFilters="sRGB"
-                >
-                    <feFlood floodOpacity={0} result="BackgroundImageFix" />
-                    <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                    <feGaussianBlur stdDeviation={7} result="effect1_foregroundBlur" />
-                </filter>
-            </defs>
-        </svg>
-    );
-});
-
-export const BoringAvatarSolid = React.memo(({
-    name = '',
-    alt = 'Avatar image',
-    colors = ['#B8487B', '#E5B557', '#58BCC4', '#6D85CA', '#8690BF', '#F08848', '#8148C9', '#439274'],
-    square = false,
-    className,
-    size = 24,
-}: BoringAvatarProps) => {
-    /**
+                <mask id="mask__marble" maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
+                    <rect width={SIZE} height={SIZE} rx={square ? undefined : SIZE * 2} fill="#FFFFFF" />
+                </mask>
+                <g mask="url(#mask__marble)">
+                    <rect width={SIZE} height={SIZE} fill={fill.fill0} />
+                    <path
+                        filter="url(#prefix__filter0_f)"
+                        d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
+                        fill={fill.fill1}
+                        transform={fill.transform1}
+                    />
+                    <path
+                        filter="url(#prefix__filter0_f)"
+                        style={{
+                            mixBlendMode: 'overlay',
+                        }}
+                        d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
+                        fill={fill.fill2}
+                        transform={fill.transform2}
+                    />
+                </g>
+                <g>
+                    {fill.letter1 && (
+                        <text
+                            style={{ fontSize: '50px' }}
+                            x="50"
+                            y="50"
+                            dy="7"
+                            textAnchor="middle"
+                            alignmentBaseline="middle"
+                            dominantBaseline="middle"
+                        >
+                            {fill.letter1}
+                            {fill.letter2}
+                        </text>
+                    )}
+                </g>
+                <defs>
+                    <filter id="prefix__filter0_f" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+                        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                        <feGaussianBlur stdDeviation={7} result="effect1_foregroundBlur" />
+                    </filter>
+                </defs>
+            </svg>
+        );
+    },
+);
+
+export const BoringAvatarSolid = React.memo(
+    ({
+        name = '',
+        alt = 'Avatar image',
+        colors = ['#B8487B', '#E5B557', '#58BCC4', '#6D85CA', '#8690BF', '#F08848', '#8148C9', '#439274'],
+        square = false,
+        className,
+        size = 24,
+    }: BoringAvatarProps) => {
+        /**
          * Name must be lowercased to avoid irregularities caused by caps.
          * This is an issue in the Actor detail header, where the username comes from the Actor object,
          * while in the user selector it comes from the user object, where it can have capitals.
          */
-    const nameLowercase = name.toLowerCase();
-
-    const fill = useMemo(() => {
-        const properties = generateProperties(nameLowercase, colors);
-        return generateFill(properties, nameLowercase);
-    }, [nameLowercase, colors]);
-
-    return (
-        <svg
-            viewBox={`0 0 ${SIZE} ${SIZE}`}
-            fill="none"
-            role="img"
-            xmlns="http://www.w3.org/2000/svg"
-            width={size}
-            height={size}
-            className={className}
-            aria-label={alt}
-        >
-            <mask
-                id="mask__solid"
-                maskUnits="userSpaceOnUse"
-                x={0}
-                y={0}
-                width={SIZE}
-                height={SIZE}
+        const nameLowercase = name.toLowerCase();
+
+        const fill = useMemo(() => {
+            const properties = generateProperties(nameLowercase, colors);
+            return generateFill(properties, nameLowercase);
+        }, [nameLowercase, colors]);
+
+        return (
+            <svg
+                viewBox={`0 0 ${SIZE} ${SIZE}`}
+                fill="none"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                width={size}
+                height={size}
+                className={className}
+                aria-label={alt}
             >
-                <rect
-                    width={SIZE}
-                    height={SIZE}
-                    rx={square ? undefined : SIZE * 2}
-                    fill="#FFFFFF"
-                />
-            </mask>
-            <g mask="url(#mask__solid)">
-                <rect width={SIZE} height={SIZE} fill={fill.fill0} />
-            </g>
-            <g>
-                {fill.letter1 && (
-                    <text
-                        style={{ fontSize: '50px' }}
-                        x="50"
-                        y="50"
-                        dy="7"
-                        textAnchor="middle"
-                        alignmentBaseline="middle"
-                        dominantBaseline="middle"
-                    >
-                        {fill.letter1}
-                        {fill.letter2}
-                    </text>
-                )}
-            </g>
-        </svg>
-    );
-});
+                <mask id="mask__solid" maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
+                    <rect width={SIZE} height={SIZE} rx={square ? undefined : SIZE * 2} fill="#FFFFFF" />
+                </mask>
+                <g mask="url(#mask__solid)">
+                    <rect width={SIZE} height={SIZE} fill={fill.fill0} />
+                </g>
+                <g>
+                    {fill.letter1 && (
+                        <text
+                            style={{ fontSize: '50px' }}
+                            x="50"
+                            y="50"
+                            dy="7"
+                            textAnchor="middle"
+                            alignmentBaseline="middle"
+                            dominantBaseline="middle"
+                        >
+                            {fill.letter1}
+                            {fill.letter2}
+                        </text>
+                    )}
+                </g>
+            </svg>
+        );
+    },
+);

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

@@ -90,11 +90,7 @@ export const WithImageUrl: Story = {
                 <small>With image</small>
             </div>
             <div>
-                <UserAvatar
-                    name="John Doe"
-                    url="https://wrong-url-to-trigger-error.com/avatar.png"
-                    size={64}
-                />
+                <UserAvatar name="John Doe" url="https://wrong-url-to-trigger-error.com/avatar.png" size={64} />
                 <small>With broken image URL</small>
             </div>
             <div>

package/src/components/avatar/user_avatar.tsx

@@ -49,15 +49,7 @@ interface UserAvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     asOrganization?: boolean;
 }
 
-const UserAvatarInner: FC<UserAvatarProps> = ({
-    name,
-    className,
-    url,
-    size,
-    alt,
-    asOrganization,
-    ...rest
-}) => {
+const UserAvatarInner: FC<UserAvatarProps> = ({ name, className, url, size, alt, asOrganization, ...rest }) => {
     const [imgError, setImgError] = React.useState(false);
     const { generateProxyImageUrl } = useSharedUiDependencies();
 
@@ -86,9 +78,10 @@ const UserAvatarInner: FC<UserAvatarProps> = ({
         return (
             <StyledImg
                 className={fullClassName}
-                src={generateProxyImageUrl
-                    ? generateProxyImageUrl(url, { resize: { height: size * 2, width: size * 2 } })
-                    : url
+                src={
+                    generateProxyImageUrl
+                        ? generateProxyImageUrl(url, { resize: { height: size * 2, width: size * 2 } })
+                        : url
                 }
                 width={size}
                 height={size}
@@ -98,14 +91,7 @@ const UserAvatarInner: FC<UserAvatarProps> = ({
             />
         );
     }
-    return (
-        <StyledBoringAvatarSolid
-            alt={altText}
-            size={size}
-            className={fullClassName}
-            name={name}
-        />
-    );
+    return <StyledBoringAvatarSolid alt={altText} size={size} className={fullClassName} name={name} />;
 };
 
 export const UserAvatar = React.memo(UserAvatarInner);

package/src/components/badge.stories.jsx

@@ -21,7 +21,7 @@ export default {
 
 const Table = styled.table`
     td {
-        padding: 8px
+        padding: 8px;
     }
 `;
 
@@ -29,53 +29,39 @@ export const Default = () => {
     return (
         <Table>
             <tbody>
-                {BADGE_VARIANTS.map((variant) => <tr key={variant}>
-                    {BADGE_SIZES.map((size) => {
-                        return (
-                            <React.Fragment key={size}>
-                                <td>
-                                    <Badge
-                                        size={size}
-                                        variant={variant}
-                                        LeadingIcon={PeopleIcon}
-                                    >
+                {BADGE_VARIANTS.map((variant) => (
+                    <tr key={variant}>
+                        {BADGE_SIZES.map((size) => {
+                            return (
+                                <React.Fragment key={size}>
+                                    <td>
+                                        <Badge size={size} variant={variant} LeadingIcon={PeopleIcon}>
                                             Badge
-                                    </Badge>
-                                </td>
-                            </React.Fragment>
-                        );
-                    })}
-                    {BADGE_SIZES.map((size) => {
-                        return (
-                            <React.Fragment key={`code-${size}`}>
-                                <td>
-                                    <Badge
-                                        size={size}
-                                        type="code"
-                                        variant={variant}
-                                        LeadingIcon={PeopleIcon}
-                                    >
+                                        </Badge>
+                                    </td>
+                                </React.Fragment>
+                            );
+                        })}
+                        {BADGE_SIZES.map((size) => {
+                            return (
+                                <React.Fragment key={`code-${size}`}>
+                                    <td>
+                                        <Badge size={size} type="code" variant={variant} LeadingIcon={PeopleIcon}>
                                             Badge
-                                    </Badge>
-                                </td>
-                            </React.Fragment>
-                        );
-                    })}
-                </tr>,
-                )}
+                                        </Badge>
+                                    </td>
+                                </React.Fragment>
+                            );
+                        })}
+                    </tr>
+                ))}
             </tbody>
         </Table>
     );
 };
 
 export const Playground = ({ size, LeadingIcon, ...props }) => {
-    return (
-        <Badge
-            size={size}
-            LeadingIcon={LeadingIcon ? PeopleIcon : undefined}
-            {...props}
-        />
-    );
+    return <Badge size={size} LeadingIcon={LeadingIcon ? PeopleIcon : undefined} {...props} />;
 };
 
 Playground.propTypes = {

package/src/components/badge.tsx

@@ -28,9 +28,24 @@ const BADGE_TEXT_SIZES = {
     extra_small: 'small',
 } satisfies Record<BadgeSize, SharedTextSize>;
 
-export type BadgeVariant = 'neutral' | 'neutral_muted' | 'neutral_subtle' | 'primary_black' | 'primary_blue' | 'success' | 'warning' | 'danger';
+export type BadgeVariant =
+    | 'neutral'
+    | 'neutral_muted'
+    | 'neutral_subtle'
+    | 'primary_black'
+    | 'primary_blue'
+    | 'success'
+    | 'warning'
+    | 'danger';
 export const BADGE_VARIANTS: BadgeVariant[] = [
-    'neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger',
+    'neutral',
+    'neutral_muted',
+    'neutral_subtle',
+    'primary_black',
+    'primary_blue',
+    'success',
+    'warning',
+    'danger',
 ] as const;
 
 type SharedBadgeProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
@@ -108,15 +123,13 @@ const badgeVariantStyle = {
     `,
 } satisfies Record<BadgeVariant, FlattenSimpleInterpolation>;
 
-type StyledBadgeProps = WithTransientProps<
-    Required<Pick<BadgeProps, 'size' | 'variant' | 'inline'>>
->;
+type StyledBadgeProps = WithTransientProps<Required<Pick<BadgeProps, 'size' | 'variant' | 'inline'>>>;
 
 const StyledBadge = styled(Box)<StyledBadgeProps>`
     ${({ $size }) => badgeSizeStyle[$size]};
     ${({ $variant }) => badgeVariantStyle[$variant]};
 
-  /* Static styles */
+    /* Static styles */
     width: fit-content;
     border: none;
     outline: none;
@@ -136,29 +149,27 @@ const StyledBadge = styled(Box)<StyledBadgeProps>`
  * Component for displaying non-interactive chip descendant.
  */
 export const Badge = forwardRef(
-    ({
-        size = 'small',
-        type = 'body',
-        variant = 'neutral',
-        inline = false,
-        LeadingIcon,
-        TrailingIcon,
-        children,
-        ...props
-    }: BadgeProps,
-    ref,
+    (
+        {
+            size = 'small',
+            type = 'body',
+            variant = 'neutral',
+            inline = false,
+            LeadingIcon,
+            TrailingIcon,
+            children,
+            ...props
+        }: BadgeProps,
+        ref,
     ) => {
         return (
-            <StyledBadge
-                ref={ref}
-                $size={size}
-                $variant={variant}
-                $inline={inline}
-                forwardedAs='span'
-                {...props}
-            >
+            <StyledBadge ref={ref} $size={size} $variant={variant} $inline={inline} forwardedAs="span" {...props}>
                 {LeadingIcon && <LeadingIcon size={BADGE_ICON_SIZES[size]} />}
-                {children && (<Text size={BADGE_TEXT_SIZES[size]} type={type} weight="medium" as='span'>{children}</Text>)}
+                {children && (
+                    <Text size={BADGE_TEXT_SIZES[size]} type={type} weight="medium" as="span">
+                        {children}
+                    </Text>
+                )}
                 {TrailingIcon && <TrailingIcon size={BADGE_ICON_SIZES[size]} />}
             </StyledBadge>
         );