@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266 → 0.56.1-featurepublishuilibrary-0a4729.38395

package/package.json

@@ -1,9 +1,8 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.51.6-featurepublishuilibrary-0a4729.38266+7412d8cbd3",
-    "description": "React components shared between Apify app and web",
-    "license": "UNLICENSED",
-    "repository": "https://github.com/apify-packages/meta-package-repo",
+    "version": "0.56.1-featurepublishuilibrary-0a4729.38395+b93664f477",
+    "description": "React UI library used by apify.com",
+    "license": "Apache-2.0",
     "type": "module",
     "main": "dist/src/index.js",
     "types": "dist/src/index.d.ts",
@@ -27,9 +26,8 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/icons": "^0.40.5-featurepublishuilibrary-0a4729.38266+7412d8cbd3",
         "@apify/log": "^2.5.11",
-        "@apify/ui-icons": "^0.2.2-featurepublishuilibrary-0a4729.38266+7412d8cbd3",
+        "@apify/ui-icons": "^0.4.1-featurepublishuilibrary-0a4729.38395+b93664f477",
         "@floating-ui/react": "^0.26.2",
         "clsx": "^2.0.0",
         "dayjs": "1.11.9",
@@ -67,5 +65,5 @@
         "recast": "^0.23.9",
         "typescript": "^5.1.6"
     },
-    "gitHead": "7412d8cbd301449ad5fa482fe4e558a053396ad5"
+    "gitHead": "b93664f47710286060a05453f35a21fc8026e429"
 }

package/src/components/action_link.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { ArrowLeft16, ArrowRight16 } from '@apify/icons';
+import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme';
 import { Box } from './box';
@@ -36,7 +36,7 @@ export const ActionLink: React.FC<LinkProps> = ({
             {...rest}
         >
             <Heading as='span' type='titleM'>{children}</Heading>
-            <ArrowRight16 />
+            <ArrowRightIcon size="16" />
         </StyledGuidepost>
     );
 };
@@ -52,7 +52,7 @@ export const BackLink: React.FC<LinkProps> = ({
             $isBackLink={true}
             {...rest}
         >
-            <ArrowLeft16 />
+            <ArrowLeftIcon size="16" />
             <Heading as='span' type='titleM'>{children}</Heading>
         </StyledGuidepost>
     );

package/src/components/blog_article.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { ArrowRight16 } from '@apify/icons';
+import { ArrowRightIcon } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme';
 
@@ -79,7 +79,7 @@ export function BlogArticle({ imageNode, title, ctaTitle = 'Read more' }: BlogAr
         <BlogArticleWrapper>
             <div className={classNames.IMAGE_WRAPPER}>{imageNode}</div>
             <div className={classNames.TEXT}>{title}</div>
-            <div className={classNames.READ_POST}>{ctaTitle}<ArrowRight16 title="" titleId="" /></div>
+            <div className={classNames.READ_POST}>{ctaTitle}<ArrowRightIcon size="16" title="" titleId="" /></div>
         </BlogArticleWrapper>
     );
 }

package/src/components/button.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { ExternalLink16 } from '@apify/icons';
+import { ExternalLinkIcon } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme';
 import { type WithRequired, type WithTransientProps } from '../type_utils';
@@ -259,9 +259,11 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
         if (onClick) onClick(e);
     };
 
+    const iconSize = size === 'medium' ? '16' : '12';
+
     if (isAnchorButton(props)) {
         const isExternal = isUrlExternal(props.to, windowLocationHost);
-        const EffectiveRightIcon = (isExternal && !props.hideExternalIcon) ? ExternalLink16 : RightIcon;
+        const EffectiveRightIcon = (isExternal && !props.hideExternalIcon) ? ExternalLinkIcon : RightIcon;
 
         return (
             <StyledButton
@@ -277,9 +279,9 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
                 // If we want to show external icon, we use button's slot for icon
                 hideExternalIcon={true}
             >
-                {LeftIcon && <LeftIcon />}
+                {LeftIcon && <LeftIcon size={iconSize} />}
                 {children}
-                {EffectiveRightIcon && <EffectiveRightIcon />}
+                {EffectiveRightIcon && <EffectiveRightIcon size={iconSize} />}
             </StyledButton>
         );
     }
@@ -295,9 +297,9 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
             type='button'
             {...rest}
         >
-            {LeftIcon && <LeftIcon />}
+            {LeftIcon && <LeftIcon size={iconSize} />}
             {children}
-            {RightIcon && <RightIcon />}
+            {RightIcon && <RightIcon size={iconSize} />}
         </StyledButton>
     );
 });

package/src/components/code/action_button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-import { Copy16, Check16 } from '@apify/icons';
+import { CheckIcon, CopyIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme';
 import { useCopyToClipboard } from '../../utils';
@@ -10,7 +10,7 @@ import { Text } from '../text';
 interface StyledButtonProps {
     $successStyle?: boolean;
     $hasText?: boolean;
-};
+}
 
 const StyledButton = styled.button<StyledButtonProps>`
     display: flex;
@@ -90,7 +90,7 @@ export const CopyButton = ({ code, ...props }: CopyButtonProps) => {
     const [isCopied, handleClick] = useCopyToClipboard({ text: code });
     return (
         <ActionButton onClick={handleClick} data-test='copy_to_clipboard' {...props}>
-            {isCopied ? <Check16 viewBox="0 0 16 16" /> : <Copy16 viewBox="0 0 16 16" />}
+            {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
         </ActionButton>
     );
 };

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

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import { Eye16, EyeOff16 } from '@apify/icons';
+import { EyeIcon, EyeOffIcon } from '@apify/ui-icons';
 
 import { theme } from '../../../design_system/theme';
 import type { BoxProps } from '../../box';
@@ -214,9 +214,9 @@ export function OneLineCode({
                         data-test='toggle-visibility-button'
                     >
                         {showSecret ? (
-                            <EyeOff16 viewBox="0 0 16 16" />
+                            <EyeOffIcon size="16" />
                         ) : (
-                            <Eye16 viewBox="0 0 16 16" />
+                            <EyeIcon size="16" />
                         )}
                     </ActionButton>
                 )}

package/src/components/floating/menu.tsx

@@ -138,54 +138,52 @@ export const Menu = <T extends MenuOption>({
             >
                 {selectedIndex !== null ? options[selectedIndex].label : defaultLabel}
             </MenuBaseComponent>
-            <FloatingPortal>
-                <FloatingFocusManager
-                    context={context}
-                    modal={false}
-                >
-                    <MenuComponent
-                        ref={refs.setFloating}
-                        style={{
-                            ...floatingStyles,
-                            // TODO: We should consider not doing this by default
-                            ...!isOpen && { display: 'none' }, // needs to be rendered, because of SEO
-                        }}
-                        {...getFloatingProps()}
-                        className={menuClassNames.LIST}
+            {isOpen && (
+                <FloatingPortal>
+                    <FloatingFocusManager
+                        context={context}
+                        modal={false}
                     >
-                        {options.map((option, i) => (
-                            <MenuItemComponent
-                                key={option.value}
-                                $isSelected={i === selectedIndex}
-                                $isActive={i === activeIndex}
-                                ref={(node: HTMLElement | null) => {
-                                    listRef.current[i] = node;
-                                }}
-                                role="option"
-                                tabIndex={i === activeIndex ? 0 : -1}
-                                className={menuClassNames.ITEM}
-                                aria-selected={i === selectedIndex && i === activeIndex}
-                                {...getItemProps({
-                                    onClick: () => handleSelect(i, 'click'), // Handles mouse click
-                                    onKeyDown: (event) => {
-                                        if (event.key === 'Enter') {
-                                            event.preventDefault();
-                                            handleSelect(i, 'enter'); // Handles enter press
-                                        }
-
-                                        if (event.key === ' ' && !isTypingRef.current) {
-                                            event.preventDefault();
-                                            handleSelect(i, 'space');
-                                        }
-                                    },
-                                })}
-                            >
-                                {effectiveRenderOption(option)}
-                            </MenuItemComponent>
-                        ))}
-                    </MenuComponent>
-                </FloatingFocusManager>
-            </FloatingPortal>
+                        <MenuComponent
+                            ref={refs.setFloating}
+                            style={floatingStyles}
+                            {...getFloatingProps()}
+                            className={menuClassNames.LIST}
+                        >
+                            {options.map((option, i) => (
+                                <MenuItemComponent
+                                    key={option.value}
+                                    $isSelected={i === selectedIndex}
+                                    $isActive={i === activeIndex}
+                                    ref={(node: HTMLElement | null) => {
+                                        listRef.current[i] = node;
+                                    }}
+                                    role="option"
+                                    tabIndex={i === activeIndex ? 0 : -1}
+                                    className={menuClassNames.ITEM}
+                                    aria-selected={i === selectedIndex && i === activeIndex}
+                                    {...getItemProps({
+                                        onClick: () => handleSelect(i, 'click'), // Handles mouse click
+                                        onKeyDown: (event) => {
+                                            if (event.key === 'Enter') {
+                                                event.preventDefault();
+                                                handleSelect(i, 'enter'); // Handles enter press
+                                            }
+
+                                            if (event.key === ' ' && !isTypingRef.current) {
+                                                event.preventDefault();
+                                                handleSelect(i, 'space');
+                                            }
+                                        },
+                                    })}
+                                >
+                                    {effectiveRenderOption(option)}
+                                </MenuItemComponent>
+                            ))}
+                        </MenuComponent>
+                    </FloatingFocusManager>
+                </FloatingPortal>
+            )}
         </Box>
     );
 };

package/src/components/floating/menu_components.tsx

@@ -5,7 +5,7 @@ import {
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { ChevronDown16 } from '@apify/icons';
+import { ChevronDownIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme';
 import { Box } from '../box';
@@ -88,7 +88,7 @@ export const DropdownMenuBaseComponent = forwardRef<HTMLElement, any>(({
     return (
         <PlainMenuBaseComponent {...props} ref={ref}>
             {children}
-            <ChevronDown16 color={theme.color.neutral.icon} />
+            <ChevronDownIcon size="16" color={theme.color.neutral.icon} />
         </PlainMenuBaseComponent>
     );
 });

package/src/components/index.ts

@@ -16,5 +16,6 @@ export * from './banner';
 export * from './actor_template_card';
 export * from './chip';
 export * from './image';
+export * from './rating';
 export * from './badge';
 export * from './tag';

package/src/components/link.tsx

@@ -3,7 +3,7 @@ import { createPath, type Path } from 'history';
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { ExternalLink16 } from '@apify/icons';
+import { ExternalLinkIcon } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme';
 import { useSharedUiDependencies } from '../ui_dependency_provider';
@@ -108,7 +108,7 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
             {...rest}
         >
             {children}
-            {((isExternal && !hideExternalIcon) || showExternalIcon) && <ExternalLink16 />}
+            {((isExternal && !hideExternalIcon) || showExternalIcon) && <ExternalLinkIcon size="16" />}
         </StyledLink>
     );
 });

package/src/components/message.tsx

@@ -2,12 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import styled from 'styled-components';
 
-import {
-    AlertTriangle20,
-    CheckCircle20,
-    Info20,
-    X16,
-} from '@apify/icons';
+import { CheckCircleIcon, CrossIcon, InfoIcon, WarningTriangleIcon } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme';
 import { Box, type BoxProps } from './box';
@@ -87,10 +82,10 @@ const StyledMessage = styled(Box)`
 export type MessageType = 'info' | 'warning' | 'success' | 'danger';
 
 const typeToIcon: { [key in MessageType]: React.ElementType } = {
-    info: Info20,
-    success: CheckCircle20,
-    warning: AlertTriangle20,
-    danger: AlertTriangle20,
+    info: InfoIcon,
+    success: CheckCircleIcon,
+    warning: WarningTriangleIcon,
+    danger: WarningTriangleIcon,
 };
 
 type MessageProps = BoxProps & {
@@ -142,7 +137,7 @@ export const Message: React.FC<MessageProps> = ({
                     onClick={onDismissClick}
                     className={messageClassNames.dismiss}
                 >
-                    <X16 />
+                    <CrossIcon size="16" />
                 </Button>
             )}
         </StyledMessage>

package/src/components/rating.tsx

@@ -0,0 +1,106 @@
+import type { FC } from 'react';
+import React, { Fragment, useMemo } from 'react';
+import styled from 'styled-components';
+
+import { StarEmptyIcon, StarFullIcon, StarHalfIcon } from '@apify/ui-icons';
+
+import type { ReviewRating } from '@apify-packages/types';
+
+import { theme } from '../design_system/theme';
+import type { BoxProps } from './box';
+import { Box } from './box';
+import { Text } from './text';
+
+type RatingStatsProps = {
+    ratingStats: Record<ReviewRating, number>
+}
+
+const StyledRating = styled(Box)`
+    display: flex;
+`;
+
+const StyledRatingStats = styled(Box)`
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 1px ${theme.space.space8};
+    align-items: center;
+
+    p {
+        /* TODO: This font is not defined! */
+        line-height: 10px;
+        font-size: 8px;
+    }
+`;
+
+const StyledRatingBar = styled(Box)<{ $widthPercent: number }>`
+    height: 5px;
+    border-radius: 10px;
+    background: ${theme.color.neutral.overflow};
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: "";
+        position: absolute;
+        display: block;
+        height: 100%;
+        left: 0;
+        top: 0;
+        border-radius: 10px;
+        background: ${theme.color.neutral.icon};
+        width: ${({ $widthPercent }) => $widthPercent}%;
+
+    }
+`;
+
+// 0 is only for empty rating - we don't display any stars filled
+type RatingProps = BoxProps & {
+    rating: number | undefined;
+    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 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 color={theme.color.neutral.textSubtle}>{rate}</Text>
+                <StyledRatingBar $widthPercent={widthPercent}/>
+            </Fragment>
+        );
+    }), [totalRates, ratingStats]);
+
+    return (
+        <StyledRatingStats {...rest}>
+            {ratingStatsContent}
+        </StyledRatingStats>
+    );
+};

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react';
 import styled from 'styled-components';
 
-import { Check16, Link16 } from '@apify/icons';
+import { CheckIcon, LinkIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme';
 import type { WithOptional } from '../../type_utils';
@@ -95,14 +95,14 @@ export const MarkdownHeadingWrapper: React.FC<HeadingSharedProps> = ({
                 to={`#${id}`}
             >
                 {isCopied ? (
-                    <Check16
+                    <CheckIcon
+                        size="16"
                         color={theme.color.success.action}
-                        viewBox="0 0 16 16"
                     />
                 ) : (
-                    <Link16
+                    <LinkIcon
+                        size="16"
                         color={theme.color.primary.text}
-                        viewBox="0 0 16 16"
                     />
                 )}
             </Link>

package/src/components/to_consolidate/markdown.tsx

@@ -9,7 +9,7 @@ import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import styled from 'styled-components';
 
-import { Link16 } from '@apify/icons';
+import { LinkIcon } from '@apify/ui-icons';
 
 import type { UiThemeOption } from '../../design_system/theme';
 import { theme } from '../../design_system/theme';
@@ -487,7 +487,7 @@ const HeadingRendererWithAnchor = ({ node, children }: HeadingRendererProps) =>
                 href={`#${id}`}
                 className={`${markdownClassNames.HEADING_COPY_ICON}`}
             >
-                <Link16 viewBox="0 0 16 16" />
+                <LinkIcon size="16" />
             </a>
         </Tag>
     );

package/src/components/to_consolidate/pagination.tsx

@@ -2,10 +2,7 @@ import type { FC } from 'react';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
-import {
-    ChevronRight20,
-    ChevronLeft20,
-} from '@apify/icons';
+import { ChevronLeftIcon, ChevronRightIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme';
 import { Box } from '../box';
@@ -87,7 +84,7 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({
                 onClick={() => onPageChange(page - 1)}
                 trackingId='PaginationPrevPage'
             >
-                <ChevronLeft20 strokeWidth={2} />
+                <ChevronLeftIcon size="16" />
             </PaginationButtonBase>
             {pagesToDisplay.map((pageToDisplay) => {
                 if (pageToDisplay === LEADING_THREE_DOTS_PAGE_KEY || pageToDisplay === TRAILING_THREE_DOTS_PAGE_KEY) {
@@ -132,7 +129,7 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({
                 onClick={() => onPageChange(page + 1)}
                 trackingId='PaginationNextPage'
             >
-                <ChevronRight20 strokeWidth={2} />
+                <ChevronRightIcon size="16" />
             </PaginationButtonBase>
         </StyledPageSelectionButtons>
     );

package/tsconfig.build.json

@@ -8,7 +8,6 @@
         "skipLibCheck": true,
     },
     "references": [
-        { "path": "../icons/tsconfig.build.json" },
         { "path": "../image-proxy-client/tsconfig.build.json" },
         { "path": "../ui-icons/tsconfig.build.json" },
     ],