@apify/ui-library 1.138.0 → 1.138.1

package/src/components/link.tsx

@@ -12,23 +12,23 @@ import { Box, type BoxProps } from './box.js';
 
 export type To = string | Partial<Path>;
 export interface RegularLinkProps {
-    to: To,
-    hideExternalIcon?: boolean,
-    showExternalIcon?: boolean,
-    rel?: string,
-    target?: string,
-    trackingId?: string,
-    trackingData?: object,
-    tabIndex?: number,
-    ariaHidden?: boolean,
-    ariaLabel?: string,
+    to: To;
+    hideExternalIcon?: boolean;
+    showExternalIcon?: boolean;
+    rel?: string;
+    target?: string;
+    trackingId?: string;
+    trackingData?: object;
+    tabIndex?: number;
+    ariaHidden?: boolean;
+    ariaLabel?: string;
 }
 
 /**
  * Checks if passed url is external
  */
 export const isUrlExternal = (url: To, windowLocationHost: string) => {
-    if (!url || typeof (url) !== 'string') return false;
+    if (!url || typeof url !== 'string') return false;
     const domainMatch = url.match(/^https?:\/\/([^/?#]+)(?:[/?#]|$)/i);
     return !!(domainMatch && domainMatch[1] !== windowLocationHost);
 };
@@ -37,7 +37,7 @@ export const isUrlExternal = (url: To, windowLocationHost: string) => {
  * Checks if passed url is email
  */
 export const isUrlEmail = (url: To) => {
-    if (!url || typeof (url) !== 'string') return false;
+    if (!url || typeof url !== 'string') return false;
     return url.startsWith('mailto:');
 };
 /**
@@ -97,61 +97,61 @@ export const StyledAsLink = styled(Box)`
 
 export type LinkProps = RegularLinkProps & BoxProps;
 
-export const Link = forwardRef<HTMLElement, LinkProps>(({
-    to,
-    children,
-    rel,
-    target,
-    hideExternalIcon,
-    showExternalIcon,
-    onClick,
-    trackingId,
-    trackingData,
-    tabIndex,
-    ariaHidden,
-    ariaLabel,
-    ...rest
-}, ref) => {
-    const {
-        windowLocationHost,
-        isHrefTrusted,
-        trackClick,
-        InternalLink,
-    } = useSharedUiDependencies();
-    const isExternal = isUrlExternal(to, windowLocationHost);
-    const href = getHref(to, isExternal);
-    const isEmail = isUrlEmail(to);
-    const isTrusted = isHrefTrusted(href);
-
-    const trackedOnClick = (e: React.MouseEvent) => {
-        if (trackingId && trackClick) trackClick(trackingId, trackingData);
-        if (onClick) onClick(e);
-    };
-
-    const uniqRel = new Set([
-        ...(rel?.split(' ') || []),
-        isExternal && 'external',
-        (isExternal || target === '_blank') && 'noopener',
-        (isExternal && !isTrusted) && 'nofollow',
-    ]);
-    const effectiveRel = clsx(Array.from(uniqRel));
-
-    return (
-        <StyledAsLink
-            // We use the InternalLink only for internal navigation
-            forwardedAs={(isEmail || isExternal) ? 'a' : InternalLink}
-            href={href}
-            rel={effectiveRel}
-            target={target || (isExternal ? '_blank' : '_self')}
-            onClick={trackedOnClick}
-            ref={ref}
-            tabIndex={tabIndex}
-            aria-hidden={ariaHidden}
-            aria-label={ariaLabel}
-            {...rest}
-        >
-            {children}
-            {((isExternal && !hideExternalIcon) || showExternalIcon) && <ExternalLinkIcon size="16" />}
-        </StyledAsLink>
-    );
-});
+export const Link = forwardRef<HTMLElement, LinkProps>(
+    (
+        {
+            to,
+            children,
+            rel,
+            target,
+            hideExternalIcon,
+            showExternalIcon,
+            onClick,
+            trackingId,
+            trackingData,
+            tabIndex,
+            ariaHidden,
+            ariaLabel,
+            ...rest
+        },
+        ref,
+    ) => {
+        const { windowLocationHost, isHrefTrusted, trackClick, InternalLink } = useSharedUiDependencies();
+        const isExternal = isUrlExternal(to, windowLocationHost);
+        const href = getHref(to, isExternal);
+        const isEmail = isUrlEmail(to);
+        const isTrusted = isHrefTrusted(href);
+
+        const trackedOnClick = (e: React.MouseEvent) => {
+            if (trackingId && trackClick) trackClick(trackingId, trackingData);
+            if (onClick) onClick(e);
+        };
+
+        const uniqRel = new Set([
+            ...(rel?.split(' ') || []),
+            isExternal && 'external',
+            (isExternal || target === '_blank') && 'noopener',
+            isExternal && !isTrusted && 'nofollow',
+        ]);
+        const effectiveRel = clsx(Array.from(uniqRel));
+
+        return (
+            <StyledAsLink
+                // We use the InternalLink only for internal navigation
+                forwardedAs={isEmail || isExternal ? 'a' : InternalLink}
+                href={href}
+                rel={effectiveRel}
+                target={target || (isExternal ? '_blank' : '_self')}
+                onClick={trackedOnClick}
+                ref={ref}
+                tabIndex={tabIndex}
+                aria-hidden={ariaHidden}
+                aria-label={ariaLabel}
+                {...rest}
+            >
+                {children}
+                {((isExternal && !hideExternalIcon) || showExternalIcon) && <ExternalLinkIcon size="16" />}
+            </StyledAsLink>
+        );
+    },
+);

package/src/components/message.stories.jsx

@@ -35,40 +35,39 @@ export default {
     },
 };
 
-const Template = (args) => <StyledWrapper>
-    {MESSAGE_TYPES.map((type) => <Fragment key={type}>
-        <Message {...args} type={type} />
-    </Fragment>)}
-</StyledWrapper>;
+const Template = (args) => (
+    <StyledWrapper>
+        {MESSAGE_TYPES.map((type) => (
+            <Fragment key={type}>
+                <Message {...args} type={type} />
+            </Fragment>
+        ))}
+    </StyledWrapper>
+);
 
 const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
 `;
 
-export const Index = (args) => <StyledWrapper>
-    {MESSAGE_TYPES.map((type) => <Fragment key={type}>
-        <Message {...args} type={type} />
-        <Message {...args} caption="" type={type} />
-        <Message
-            {...args}
-            type={type}
-            onDismissClick={() => console.log('dismiss clicked')}
-        />
-        <Message
-            {...args}
-            type={type}
-            caption=""
-            onDismissClick={() => console.log('dismiss clicked')}
-        />
-        <Message
-            {...args}
-            type={type}
-            onDismissClick={() => console.log('dismiss clicked')}
-            actions={[{ label: 'Action', onClick: () => console.log('Action clicked') }]}
-        />
-    </Fragment>)}
-</StyledWrapper>;
+export const Index = (args) => (
+    <StyledWrapper>
+        {MESSAGE_TYPES.map((type) => (
+            <Fragment key={type}>
+                <Message {...args} type={type} />
+                <Message {...args} caption="" type={type} />
+                <Message {...args} type={type} onDismissClick={() => console.log('dismiss clicked')} />
+                <Message {...args} type={type} caption="" onDismissClick={() => console.log('dismiss clicked')} />
+                <Message
+                    {...args}
+                    type={type}
+                    onDismissClick={() => console.log('dismiss clicked')}
+                    actions={[{ label: 'Action', onClick: () => console.log('Action clicked') }]}
+                />
+            </Fragment>
+        ))}
+    </StyledWrapper>
+);
 
 export const OneLine = Template.bind({});
 OneLine.args = {
@@ -77,11 +76,14 @@ OneLine.args = {
 
 export const MultiLine = Template.bind({});
 MultiLine.args = {
-    children: <>
-        Hello, friends, <br />
-        I am a very very very very very very very very very very very very very very long message<br />
-        and I have some <Link to="https://www.youtube.com/watch?v=dQw4w9WgXcQ">and links!</Link>
-    </>,
+    children: (
+        <>
+            Hello, friends, <br />
+            I am a very very very very very very very very very very very very very very long message
+            <br />
+            and I have some <Link to="https://www.youtube.com/watch?v=dQw4w9WgXcQ">and links!</Link>
+        </>
+    ),
 };
 
 export const CustomIcon = Template.bind({});

package/src/components/message.tsx

@@ -22,7 +22,7 @@ export const messageClassNames = {
     actionsWrapper: 'actionsWrapper',
 };
 
-const StyledMessage = styled(Box)<{ $boxless?: boolean, $hasCaption?: boolean }>`
+const StyledMessage = styled(Box)<{ $boxless?: boolean; $hasCaption?: boolean }>`
     display: flex;
     align-items: center;
     gap: ${theme.space.space8};
@@ -58,26 +58,28 @@ const StyledMessage = styled(Box)<{ $boxless?: boolean, $hasCaption?: boolean }>
             text-decoration: underline;
         }
 
-        ${({ $hasCaption }) => ($hasCaption
-            ? css`
-            grid-template-areas:
-                'iconArea captionArea'
-                'descriptionArea descriptionArea';
-        ` : css`
-            grid-template-areas:
-                'iconArea descriptionArea';
-        `)}
+        ${({ $hasCaption }) =>
+            $hasCaption
+                ? css`
+                      grid-template-areas:
+                          'iconArea captionArea'
+                          'descriptionArea descriptionArea';
+                  `
+                : css`
+                      grid-template-areas: 'iconArea descriptionArea';
+                  `}
     }
 
+    ${({ $boxless }) =>
+        !$boxless &&
+        css`
+            /* the dismiss button is bigger than text so we apply smaller padding on wrapper & some on the content and icon */
+            padding: ${theme.space.space8} ${theme.space.space16};
 
-    ${({ $boxless }) => (!$boxless && css`
-        /* the dismiss button is bigger than text so we apply smaller padding on wrapper & some on the content and icon */
-        padding: ${theme.space.space8} ${theme.space.space16};
-
-        .${messageClassNames.content} {
-            padding: ${theme.space.space4} 0;
-        }
-    `)}
+            .${messageClassNames.content} {
+                padding: ${theme.space.space4} 0;
+            }
+        `}
 
     .${messageClassNames.actionsWrapper} {
         display: flex;
@@ -137,21 +139,21 @@ const typeToIcon: { [key in MessageType]: React.ElementType } = {
 };
 
 type ActionButtonProps = Omit<ButtonProps, 'children'> & {
-    label: ReactNode,
+    label: ReactNode;
 };
 
 type MessageProps = BoxProps & {
-    type: MessageType,
-    caption?: string,
+    type: MessageType;
+    caption?: string;
     /** @deprecated Use `Icon` instead. */
-    icon?: IconComponentType,
-    Icon?: IconComponentType,
-    onDismissClick?: () => void,
-    borderless?: boolean,
-    boxless?: boolean,
-    as?: React.ElementType,
-    dismissTrackingId?: string,
-    actions?: ActionButtonProps[],
+    icon?: IconComponentType;
+    Icon?: IconComponentType;
+    onDismissClick?: () => void;
+    borderless?: boolean;
+    boxless?: boolean;
+    as?: React.ElementType;
+    dismissTrackingId?: string;
+    actions?: ActionButtonProps[];
 };
 
 /**
@@ -185,8 +187,12 @@ export const Message: React.FC<MessageProps> = ({
             {...rest}
         >
             <div className={messageClassNames.content}>
-                <IconComponent className={messageClassNames.icon} size='16' />
-                {hasCaption && <Text weight='bold' className={messageClassNames.caption}>{caption}</Text>}
+                <IconComponent className={messageClassNames.icon} size="16" />
+                {hasCaption && (
+                    <Text weight="bold" className={messageClassNames.caption}>
+                        {caption}
+                    </Text>
+                )}
                 <div className={messageClassNames.description}>{children}</div>
             </div>
             {(actions.length > 0 || onDismissClick) && (
@@ -194,12 +200,7 @@ export const Message: React.FC<MessageProps> = ({
                     {actions.length > 0 && (
                         <>
                             {actions.map(({ label, ...action }, index) => (
-                                <Button
-                                    key={index}
-                                    size='small'
-                                    variant='primary'
-                                    {...action}
-                                >
+                                <Button key={index} size="small" variant="primary" {...action}>
                                     {label}
                                 </Button>
                             ))}
@@ -207,16 +208,15 @@ export const Message: React.FC<MessageProps> = ({
                     )}
                     {onDismissClick && (
                         <Button
-                            size='small'
-                            variant='tertiary'
+                            size="small"
+                            variant="tertiary"
                             trackingId={dismissTrackingId}
                             onClick={onDismissClick}
                             className={messageClassNames.dismiss}
                         >
-                            <CrossIcon size="16" color={theme.color.neutral.icon}/>
+                            <CrossIcon size="16" color={theme.color.neutral.icon} />
                         </Button>
                     )}
-
                 </div>
             )}
         </StyledMessage>
@@ -225,7 +225,7 @@ export const Message: React.FC<MessageProps> = ({
 
 type SpecificMessageProps = Omit<MessageProps, 'type'>;
 // Semantic classes for all the message types
-export const InfoMessage = (props: SpecificMessageProps) => (<Message {...props} type='info' />);
-export const WarningMessage = (props: SpecificMessageProps) => (<Message {...props} type='warning' />);
-export const SuccessMessage = (props: SpecificMessageProps) => (<Message {...props} type='success' />);
-export const DangerMessage = (props: SpecificMessageProps) => (<Message {...props} type='danger' />);
+export const InfoMessage = (props: SpecificMessageProps) => <Message {...props} type="info" />;
+export const WarningMessage = (props: SpecificMessageProps) => <Message {...props} type="warning" />;
+export const SuccessMessage = (props: SpecificMessageProps) => <Message {...props} type="success" />;
+export const DangerMessage = (props: SpecificMessageProps) => <Message {...props} type="danger" />;

package/src/components/rating.tsx

@@ -12,7 +12,7 @@ import { Box } from './box.js';
 import { Text } from './text/index.js';
 
 type RatingStatsProps = {
-    ratingStats: Record<ReviewRating, number>
+    ratingStats: Record<ReviewRating, number>;
 };
 
 const StyledRating = styled(Box)`
@@ -42,7 +42,7 @@ const StyledRatingBar = styled(Box)<{ $widthPercent: number }>`
     overflow: hidden;
 
     &::after {
-        content: "";
+        content: '';
         position: absolute;
         display: block;
         height: 100%;
@@ -51,7 +51,6 @@ const StyledRatingBar = styled(Box)<{ $widthPercent: number }>`
         border-radius: 10px;
         background: ${theme.color.neutral.icon};
         width: ${({ $widthPercent }) => $widthPercent}%;
-
     }
 `;
 
@@ -59,10 +58,7 @@ type SingleStarRatingProps = BoxProps & {
     color?: string;
 };
 
-export const SingleStarRating: FC<SingleStarRatingProps> = ({
-    color = theme.color.neutral.icon,
-    ...rest
-}) => {
+export const SingleStarRating: FC<SingleStarRatingProps> = ({ color = theme.color.neutral.icon, ...rest }) => {
     return (
         <StyledRating {...rest}>
             <StarFullIcon size="12" color={color} />
@@ -76,47 +72,44 @@ type RatingProps = BoxProps & {
     color?: string;
 };
 
-export const Rating: FC<RatingProps> = ({
-    rating = 0,
-    color = theme.color.neutral.icon,
-    ...rest
-}) => {
-    const ratingStatsContent = useMemo(() => [1, 2, 3, 4, 5].map((rate) => {
-        const ratingFloor = Math.floor(rating);
-        const ratingDecimals = rating % 1;
-
-        if (ratingFloor >= rate || (ratingFloor === rate - 1 && ratingDecimals > 0.75)) return <StarFullIcon size="12" color={color} key={rate} />;
-        if (ratingFloor === rate - 1 && ratingDecimals > 0.25) return <StarHalfIcon size="12" color={color} key={rate} />;
-        return <StarEmptyIcon size="12" color={color} key={rate} />;
-    }), [rating, color]);
-
-    return (
-        <StyledRating {...rest}>
-            {ratingStatsContent}
-        </StyledRating>
+export const Rating: FC<RatingProps> = ({ rating = 0, color = theme.color.neutral.icon, ...rest }) => {
+    const ratingStatsContent = useMemo(
+        () =>
+            [1, 2, 3, 4, 5].map((rate) => {
+                const ratingFloor = Math.floor(rating);
+                const ratingDecimals = rating % 1;
+
+                if (ratingFloor >= rate || (ratingFloor === rate - 1 && ratingDecimals > 0.75))
+                    return <StarFullIcon size="12" color={color} key={rate} />;
+                if (ratingFloor === rate - 1 && ratingDecimals > 0.25)
+                    return <StarHalfIcon size="12" color={color} key={rate} />;
+                return <StarEmptyIcon size="12" color={color} key={rate} />;
+            }),
+        [rating, color],
     );
+
+    return <StyledRating {...rest}>{ratingStatsContent}</StyledRating>;
 };
 
-export const RatingStats: FC<RatingStatsProps & BoxProps> = ({
-    ratingStats,
-    ...rest
-}) => {
+export const RatingStats: FC<RatingStatsProps & BoxProps> = ({ ratingStats, ...rest }) => {
     const totalRates = ratingStats[1] + ratingStats[2] + ratingStats[3] + ratingStats[4] + ratingStats[5];
 
-    const ratingStatsContent = useMemo(() => ([5, 4, 3, 2, 1] as const).map((rate) => {
-        const widthPercent = totalRates > 0 ? ((ratingStats[rate] / totalRates) * 100) : 0;
-
-        return (
-            <Fragment key={rate}>
-                <Text align='center' color={theme.color.neutral.textSubtle}>{rate}</Text>
-                <StyledRatingBar $widthPercent={widthPercent}/>
-            </Fragment>
-        );
-    }), [totalRates, ratingStats]);
-
-    return (
-        <StyledRatingStats {...rest}>
-            {ratingStatsContent}
-        </StyledRatingStats>
+    const ratingStatsContent = useMemo(
+        () =>
+            ([5, 4, 3, 2, 1] as const).map((rate) => {
+                const widthPercent = totalRates > 0 ? (ratingStats[rate] / totalRates) * 100 : 0;
+
+                return (
+                    <Fragment key={rate}>
+                        <Text align="center" color={theme.color.neutral.textSubtle}>
+                            {rate}
+                        </Text>
+                        <StyledRatingBar $widthPercent={widthPercent} />
+                    </Fragment>
+                );
+            }),
+        [totalRates, ratingStats],
     );
+
+    return <StyledRatingStats {...rest}>{ratingStatsContent}</StyledRatingStats>;
 };

package/src/components/readme_renderer/pythonize_value.ts

@@ -56,19 +56,31 @@ export const pythonizeValue = <T>(value: T, depth = 0): string | T => {
     if (Array.isArray(value)) {
         if (value.length === 0) return '[]';
         if (value.length === 1) return '[' + pythonizeValue(value[0], depth + 1) + ']';
-        return '[\n'
-            + value.map((v) => INDENT.repeat(depth + 1) + pythonizeValue(v, depth + 1) + ',\n').join('')
-            + INDENT.repeat(depth) + ']';
+        return (
+            '[\n' +
+            value.map((v) => INDENT.repeat(depth + 1) + pythonizeValue(v, depth + 1) + ',\n').join('') +
+            INDENT.repeat(depth) +
+            ']'
+        );
     }
 
     // Object values
     if (typeof value === 'object') {
         const entries = Object.entries(value);
         if (entries.length === 0) return '{}';
-        if (entries.length === 1) return '{ ' + pythonQuoteString(entries[0][0]) + ': ' + pythonizeValue(entries[0][1], depth + 1) + ' }';
-        return '{\n'
-            + entries.map(([k, v]) => INDENT.repeat(depth + 1) + pythonQuoteString(k) + ': ' + pythonizeValue(v, depth + 1) + ',\n').join('')
-            + INDENT.repeat(depth) + '}';
+        if (entries.length === 1)
+            return '{ ' + pythonQuoteString(entries[0][0]) + ': ' + pythonizeValue(entries[0][1], depth + 1) + ' }';
+        return (
+            '{\n' +
+            entries
+                .map(
+                    ([k, v]) =>
+                        INDENT.repeat(depth + 1) + pythonQuoteString(k) + ': ' + pythonizeValue(v, depth + 1) + ',\n',
+                )
+                .join('') +
+            INDENT.repeat(depth) +
+            '}'
+        );
     }
 
     // This should never happen, if it did, something went wrong