@apify/ui-library 1.138.0 → 1.138.1

package/src/components/to_consolidate/card.tsx

@@ -19,8 +19,8 @@ export const cardClassNames = {
 };
 
 interface TransientCardProps {
-    disabled?: boolean,
-    shadowless?: boolean,
+    disabled?: boolean;
+    shadowless?: boolean;
 }
 
 interface RegularCardProps {
@@ -80,63 +80,72 @@ export const StyledCardWrapper = styled(Box)<StyledCardProps>`
         border-bottom-left-radius: ${theme.radius.radius8};
     }
 
-    ${({ $shadowless }) => ($shadowless && css`
-        box-shadow: none;
-    `)}
+    ${({ $shadowless }) =>
+        $shadowless &&
+        css`
+            box-shadow: none;
+        `}
 
-    ${({ $disabled }) => ($disabled && css`
-        .${cardClassNames.CONTENT} {
-            &::after {
-                content: '';
-                position: absolute;
-                top: 0; bottom: 0; left: 0; right: 0; /* stretch full */
-                background: ${theme.color.neutral.backgroundSubtle} !important;
-                opacity: 0.4;
-                pointer-events: all;
+    ${({ $disabled }) =>
+        $disabled &&
+        css`
+            .${cardClassNames.CONTENT} {
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0; /* stretch full */
+                    background: ${theme.color.neutral.backgroundSubtle} !important;
+                    opacity: 0.4;
+                    pointer-events: all;
+                }
             }
-        }
-    `)}
+        `}
 `;
 
-export const Card = forwardRef<HTMLElement, CardProps>(({
-    as,
-    className,
-    caption,
-    description,
-    actions,
-    children,
-    disabled,
-    shadowless,
-    ...rest
-}, ref) => {
-    return (
-        <StyledCardWrapper
-            $disabled={disabled}
-            $shadowless={shadowless}
-            forwardedAs={ as || 'section'}
-            className={clsx(cardClassNames.WRAPPER, className)}
-            data-test='card'
-            {...rest}
-            ref={ref}
-        >
-            {(!!caption || !!actions) && (
-                <header className={cardClassNames.HEADER} data-test='card-header'>
-                    {caption && (
-                        <Text
-                            as='div'
-                            size='big'
-                            weight='bold'
-                            className={cardClassNames.CAPTION}
-                            data-test='card-caption'
-                        >
-                            {caption}
-                        </Text>
-                    )}
-                    {actions && (<div className={cardClassNames.ACTIONS} data-test='card-actions'>{actions}</div>)}
-                </header>
-            )}
-            {description && (<div className={cardClassNames.DESCRIPTION} data-test='card-description'>{description}</div>)}
-            <div className={cardClassNames.CONTENT} data-test='card-content'>{children}</div>
-        </StyledCardWrapper>
-    );
-});
+export const Card = forwardRef<HTMLElement, CardProps>(
+    ({ as, className, caption, description, actions, children, disabled, shadowless, ...rest }, ref) => {
+        return (
+            <StyledCardWrapper
+                $disabled={disabled}
+                $shadowless={shadowless}
+                forwardedAs={as || 'section'}
+                className={clsx(cardClassNames.WRAPPER, className)}
+                data-test="card"
+                {...rest}
+                ref={ref}
+            >
+                {(!!caption || !!actions) && (
+                    <header className={cardClassNames.HEADER} data-test="card-header">
+                        {caption && (
+                            <Text
+                                as="div"
+                                size="big"
+                                weight="bold"
+                                className={cardClassNames.CAPTION}
+                                data-test="card-caption"
+                            >
+                                {caption}
+                            </Text>
+                        )}
+                        {actions && (
+                            <div className={cardClassNames.ACTIONS} data-test="card-actions">
+                                {actions}
+                            </div>
+                        )}
+                    </header>
+                )}
+                {description && (
+                    <div className={cardClassNames.DESCRIPTION} data-test="card-description">
+                        {description}
+                    </div>
+                )}
+                <div className={cardClassNames.CONTENT} data-test="card-content">
+                    {children}
+                </div>
+            </StyledCardWrapper>
+        );
+    },
+);

package/src/components/to_consolidate/markdown.tsx

@@ -34,17 +34,21 @@ const markdownClassNames = {
 
 const StyledMarkdownWrapper = styled(Box)<StyledReadmeProps>`
     @font-face {
-        font-family: "ellipsis-font";
-        src: local("Courier");
+        font-family: 'ellipsis-font';
+        src: local('Courier');
         unicode-range: U+2026;
         size-adjust: 0%;
     }
 
-    &>:first-child {
+    & > :first-child {
         margin-top: 0;
     }
 
-    h1, h2, h3, h4, h5 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
         scroll-margin-top: ${({ $scrollMarginTopPx }) => `${$scrollMarginTopPx}px`};
         margin-top: ${theme.space.space32};
         margin-bottom: ${theme.space.space16};
@@ -115,7 +119,11 @@ const StyledMarkdownWrapper = styled(Box)<StyledReadmeProps>`
         }
     }
 
-    p, li, strong, b, table {
+    p,
+    li,
+    strong,
+    b,
+    table {
         ${theme.typography.content.mobile.paragraph}
         @media (min-width: ${theme.layout.tablet}) {
             ${theme.typography.content.tablet.paragraph}
@@ -200,7 +208,8 @@ const StyledMarkdownWrapper = styled(Box)<StyledReadmeProps>`
         max-width: 100%;
     }
 
-    ul, ol {
+    ul,
+    ol {
         padding-left: ${theme.space.space32};
     }
 
@@ -238,14 +247,16 @@ const StyledMarkdownWrapper = styled(Box)<StyledReadmeProps>`
         overflow: auto;
         border-collapse: collapse;
 
-        td, th {
+        td,
+        th {
             border: 1px solid ${theme.color.neutral.border};
             padding: ${theme.space.space16};
             text-align: left;
         }
 
         tr:nth-child(even):not([class]) {
-            > th, > td {
+            > th,
+            > td {
                 background-color: inherit;
             }
         }
@@ -304,7 +315,8 @@ const StyledMarkdownWrapper = styled(Box)<StyledReadmeProps>`
             ${theme.typography.content.desktop.snippet}
         }
 
-        b, strong{
+        b,
+        strong {
             font-size: inherit !important;
             line-height: inherit !important;
             font-family: inherit !important;
@@ -329,15 +341,11 @@ const DefaultHeadingRenderer = ({ node, children }: HeadingRendererProps) => {
 };
 
 type CodeRendererComponentProps = {
-    className?: string,
-    children: React.ReactNode,
+    className?: string;
+    children: React.ReactNode;
 } & MarkdownComponentExtraProps;
 
-function CodeRenderer({
-    className,
-    children,
-    node,
-}: CodeRendererComponentProps) {
+function CodeRenderer({ className, children, node }: CodeRendererComponentProps) {
     const isInline = node?.position?.start?.line === node?.position?.end?.line;
 
     if (isInline) {
@@ -351,28 +359,19 @@ function CodeRenderer({
 
     if (isOneLineCode) {
         return (
-            <OneLineCode
-                language={language}
-                fullWidth
-            >
+            <OneLineCode language={language} fullWidth>
                 {code}
             </OneLineCode>
         );
     }
 
     return (
-        <CodeBlock
-            content={code}
-            language={language}
-            hideLineNumbers
-            fullWidth
-            hideBashHeader
-            hideBashPromptPrefixes
-        />
+        <CodeBlock content={code} language={language} hideLineNumbers fullWidth hideBashHeader hideBashPromptPrefixes />
     );
 }
 
-const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtube(?:-nocookie)?\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([a-zA-Z0-9\-_]+)(?:\S*)?$/;
+const youtubeRegex =
+    /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtube(?:-nocookie)?\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([a-zA-Z0-9\-_]+)(?:\S*)?$/;
 const vimeoRegex = /^((?:https?:\/\/)?(?:player\.)?vimeo\.com(?:\/video)?\/(\d+))$/;
 
 const getVideoSrc = (link: string) => {
@@ -382,7 +381,10 @@ const getVideoSrc = (link: string) => {
     if (youtubeLink) {
         // add rel=0 to disable related videos from other channels at the end of the video
         // add enablejsapi=1 to enable tracking videos via API through Google Analytics
-        src = qs.stringifyUrl({ url: `https://www.youtube.com/embed/${youtubeLink[1]}`, query: { rel: 0, enablejsapi: 1 } });
+        src = qs.stringifyUrl({
+            url: `https://www.youtube.com/embed/${youtubeLink[1]}`,
+            query: { rel: 0, enablejsapi: 1 },
+        });
     }
     if (vimeoLink) src = `https://player.vimeo.com/video/${vimeoLink[2]}`;
 
@@ -424,13 +426,17 @@ interface LinkRendererProps extends React.AnchorHTMLAttributes<HTMLAnchorElement
 }
 
 interface LinkRendererOptions {
-    hostname?: string,
+    hostname?: string;
 }
 
 // We want no-follow for external links
 // Also if link is a video from youtube or vimeo, we want to render it as iframe
 // Allowing to pass hostname to check if the link is an Apify link to the same hostname (is needed for SSR on the web)
-const DefaultLinkRenderer = ({ node, href = '', ...props }: LinkRendererProps, { hostname }: LinkRendererOptions, isUserGeneratedContent?: boolean) => {
+const DefaultLinkRenderer = (
+    { node, href = '', ...props }: LinkRendererProps,
+    { hostname }: LinkRendererOptions,
+    isUserGeneratedContent?: boolean,
+) => {
     const videoSrc = node.properties.enableEmbeddedVideo && !!href ? getVideoSrc(href) : undefined;
     if (videoSrc) return <Video src={videoSrc} />;
 
@@ -439,7 +445,8 @@ const DefaultLinkRenderer = ({ node, href = '', ...props }: LinkRendererProps, {
     if (isHashLink) return <a href={href} {...props} />;
 
     let urlParsed: URL | undefined;
-    try { // TODO: replace with URL.canParse() when we have node 19+ 🥲
+    try {
+        // TODO: replace with URL.canParse() when we have node 19+ 🥲
         urlParsed = new URL(href);
     } catch {
         // Probably invalid url, go on as it doesn't make sense to track this error
@@ -448,13 +455,12 @@ const DefaultLinkRenderer = ({ node, href = '', ...props }: LinkRendererProps, {
         return <span>{href}</span>;
     }
 
-    if (!hostname && (typeof window !== 'undefined' && !window?.location?.hostname)) return <a href={href} {...props} />;
+    if (!hostname && typeof window !== 'undefined' && !window?.location?.hostname) return <a href={href} {...props} />;
 
     const currentHostname = hostname || (typeof window !== 'undefined' && window?.location?.hostname.toLowerCase());
-    const hasDifferentHostname = urlParsed && (urlParsed.hostname.toLowerCase() !== currentHostname);
-    const isApifyLink = urlParsed
-        && APIFY_HOSTNAMES.includes(urlParsed.hostname.toLowerCase())
-        && urlParsed.protocol === 'https:'; // we want to disqualify links that have http: protocol. It's a mistake on users' side that we are penalized for.
+    const hasDifferentHostname = urlParsed && urlParsed.hostname.toLowerCase() !== currentHostname;
+    const isApifyLink =
+        urlParsed && APIFY_HOSTNAMES.includes(urlParsed.hostname.toLowerCase()) && urlParsed.protocol === 'https:'; // we want to disqualify links that have http: protocol. It's a mistake on users' side that we are penalized for.
 
     let linkProps: Pick<LinkProps, 'rel' | 'target'> = {};
 
@@ -473,7 +479,7 @@ const DefaultLinkRenderer = ({ node, href = '', ...props }: LinkRendererProps, {
         }
     }
 
-    return <SharedLink {...props as LinkProps} {...linkProps} to={href}/>;
+    return <SharedLink {...(props as LinkProps)} {...linkProps} to={href} />;
 };
 
 // node is just to omit from exported props
@@ -541,11 +547,15 @@ export interface MarkdownProps {
     theme?: UiThemeOption;
     scrollMarginTopPx?: number; // Offset from top of page to account for sticky header
     // Function where we can define which elements are allowed in the markdown. See    // Function where we can define which elements are allowed in the markdown. See https://github.com/remarkjs/react-markdown#props for more info
-    allowElement?: AllowElement
+    allowElement?: AllowElement;
     isUserGeneratedContent?: boolean;
     currentPathHostname?: string;
     addHeadingAnchors?: boolean;
-    LinkRenderer?: (props: LinkRendererProps, options: LinkRendererOptions, isUserGeneratedContent?: boolean) => React.ReactElement;
+    LinkRenderer?: (
+        props: LinkRendererProps,
+        options: LinkRendererOptions,
+        isUserGeneratedContent?: boolean,
+    ) => React.ReactElement;
     lazyLoadImages?: boolean;
 }
 
@@ -603,33 +613,37 @@ const Markdown = ({
                     'ul',
                 ]}
                 allowElement={allowElement}
-                components={{
-                    h1: headingRenderer,
-                    h2: headingRenderer,
-                    h3: headingRenderer,
-                    h4: headingRenderer,
-                    h5: headingRenderer,
-                    a: (linkProps: LinkRendererProps) => (
-                        LinkRenderer
-                            ? LinkRenderer(linkProps, { hostname: currentPathHostname }, isUserGeneratedContent)
-                            : DefaultLinkRenderer(linkProps, { hostname: currentPathHostname }, isUserGeneratedContent)
-                    ),
-                    code: (codeProps: CodeRendererComponentProps) => CodeRenderer(codeProps),
-                    p: ParagraphRenderer,
-                    img: ({ node, ...imageProps }: React.ImgHTMLAttributes<HTMLImageElement> & { node?: Node }) => (
-                        <img
-                            {...imageProps}
-                            {...(lazyLoadImages ? { loading: 'lazy' } : {})}
-                        /> // node is injected by rehype-raw plugin and causing invalid prop
-                    ),
-                } as unknown as Components}
+                components={
+                    {
+                        h1: headingRenderer,
+                        h2: headingRenderer,
+                        h3: headingRenderer,
+                        h4: headingRenderer,
+                        h5: headingRenderer,
+                        a: (linkProps: LinkRendererProps) =>
+                            LinkRenderer
+                                ? LinkRenderer(linkProps, { hostname: currentPathHostname }, isUserGeneratedContent)
+                                : DefaultLinkRenderer(
+                                      linkProps,
+                                      { hostname: currentPathHostname },
+                                      isUserGeneratedContent,
+                                  ),
+                        code: (codeProps: CodeRendererComponentProps) => CodeRenderer(codeProps),
+                        p: ParagraphRenderer,
+                        img: ({ node, ...imageProps }: React.ImgHTMLAttributes<HTMLImageElement> & { node?: Node }) => (
+                            <img {...imageProps} {...(lazyLoadImages ? { loading: 'lazy' } : {})} /> // node is injected by rehype-raw plugin and causing invalid prop
+                        ),
+                    } as unknown as Components
+                }
                 urlTransform={(href, _children, node) => {
                     if (node.tagName === 'img') {
                         return transformImageUri ? transformImageUri(href) : href;
                     }
 
                     if (node.tagName === 'a') {
-                        return transformLinkUri ? defaultUrlTransform(transformLinkUri(href)) : defaultUrlTransform(href);
+                        return transformLinkUri
+                            ? defaultUrlTransform(transformLinkUri(href))
+                            : defaultUrlTransform(href);
                     }
 
                     return href;

package/src/components/to_consolidate/pagination.tsx

@@ -42,11 +42,7 @@ export type PaginationButtonsProps = {
 };
 
 // TODO: Consolidate and move to /library
-export const PaginationButtons: FC<PaginationButtonsProps> = ({
-    page,
-    totalPages,
-    onPageChange,
-}) => {
+export const PaginationButtons: FC<PaginationButtonsProps> = ({ page, totalPages, onPageChange }) => {
     // Pages to display buttons for (counting from 0, -1 and -2 will mean a special '...' disabled button)
     const pagesToDisplay = useMemo(() => {
         const result = [];
@@ -79,10 +75,10 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({
     return (
         <StyledPageSelectionButtons>
             <PaginationButtonBase
-                data-test='page-prev-button'
+                data-test="page-prev-button"
                 disabled={page <= 0}
                 onClick={() => onPageChange(page - 1)}
-                trackingId='PaginationPrevPage'
+                trackingId="PaginationPrevPage"
                 aria-label="Previous page"
             >
                 <ChevronLeftIcon size="16" />
@@ -91,7 +87,7 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({
                 if (pageToDisplay === LEADING_THREE_DOTS_PAGE_KEY || pageToDisplay === TRAILING_THREE_DOTS_PAGE_KEY) {
                     return (
                         <PaginationButtonBase
-                            trackingId='ThreeDots'
+                            trackingId="ThreeDots"
                             key={pageToDisplay}
                             onClick={() => undefined}
                             disabled
@@ -104,9 +100,9 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({
                     return (
                         <PaginationButtonBase
                             key={pageToDisplay}
-                            data-test='current-page-button'
-                            trackingId='PaginationCurrentPage'
-                            className='currentPage'
+                            data-test="current-page-button"
+                            trackingId="PaginationCurrentPage"
+                            className="currentPage"
                             onClick={() => undefined}
                         >
                             {pageToDisplay + 1}
@@ -116,19 +112,19 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({
                 return (
                     <PaginationButtonBase
                         key={pageToDisplay}
-                        data-test='page-number-button'
+                        data-test="page-number-button"
                         onClick={() => onPageChange(pageToDisplay)}
-                        trackingId='PaginationNumberedPage'
+                        trackingId="PaginationNumberedPage"
                     >
                         {pageToDisplay + 1}
                     </PaginationButtonBase>
                 );
             })}
             <PaginationButtonBase
-                data-test='page-next-button'
+                data-test="page-next-button"
                 disabled={page >= totalPages - 1}
                 onClick={() => onPageChange(page + 1)}
-                trackingId='PaginationNextPage'
+                trackingId="PaginationNextPage"
                 aria-label="Next page"
             >
                 <ChevronRightIcon size="16" />

package/src/components/to_consolidate/tab_number_chip.tsx

@@ -22,10 +22,9 @@ interface ChipProps {
 }
 
 export const TabNumberChip: React.FC<ChipProps> = ({ children, ...rest }) => {
-    return <StyledChip
-        size='small'
-        {...rest}
-    >
-        {children}
-    </StyledChip>;
+    return (
+        <StyledChip size="small" {...rest}>
+            {children}
+        </StyledChip>
+    );
 };

package/src/design_system/colors/build_color_tokens.js

@@ -7,9 +7,7 @@ const DO_NOT_EXPORT_COMMENT = `/**
 `;
 
 function toCamelCase(str) {
-    return str
-        .toLowerCase()
-        .replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
+    return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
 }
 
 /**
@@ -23,11 +21,10 @@ function objectToTSLiteral(obj, indentLevel = 0) {
         const entries = Object.entries(obj);
         if (entries.length === 0) return '{}';
         return `{\n${entries
-            .map(
-                ([key, value]) => `${indent(indentLevel + 1)}${key}: ${objectToTSLiteral(value, indentLevel + 1)}`,
-            )
+            .map(([key, value]) => `${indent(indentLevel + 1)}${key}: ${objectToTSLiteral(value, indentLevel + 1)}`)
             .join('\n')}\n${indent(indentLevel)}}${indentLevel > 0 ? ',' : ''}`;
-    } if (typeof obj === 'string') {
+    }
+    if (typeof obj === 'string') {
         return `'${obj}',`;
     }
     return String(obj);
@@ -44,9 +41,7 @@ async function buildTheme(theme) {
         name: 'name/prefix-color-name',
         type: 'name',
         transform: (prop) => {
-            return prop.name
-                .replace(/^semantic/, 'color')
-                .replace(/^decorative/, 'color');
+            return prop.name.replace(/^semantic/, 'color').replace(/^decorative/, 'color');
         },
     });
 
@@ -117,7 +112,7 @@ async function buildTheme(theme) {
         filter: (token) => ['Decorative', 'Palette', 'Brand'].includes(token.path[0]),
     });
 
-    const styleDictionary = await (new StyleDictionary()).extend({
+    const styleDictionary = await new StyleDictionary().extend({
         source: [`src/design_system/colors/figma_color_tokens.${theme}.json`],
         platforms: {
             ts: {
@@ -178,7 +173,4 @@ async function buildTheme(theme) {
     await styleDictionary.buildPlatform('style');
 }
 
-await Promise.all([
-    buildTheme('light'),
-    buildTheme('dark'),
-]);
+await Promise.all([buildTheme('light'), buildTheme('dark')]);

package/src/design_system/theme.ts

@@ -1,12 +1,5 @@
 import { colorProperties, darkTheme, lightTheme } from './colors/index.js';
-import {
-    devices,
-    layouts,
-    radiuses,
-    shadows,
-    spaces,
-    transitions,
-} from './tokens/index.js';
+import { devices, layouts, radiuses, shadows, spaces, transitions } from './tokens/index.js';
 import { typographyTokens } from './typography_theme.js';
 
 export const theme = {

package/src/design_system/tokens/radiuses.stories.tsx

@@ -4,7 +4,15 @@ import { theme } from '../theme.js';
 import { radiuses } from './radiuses.js';
 
 const RadiusesShowcase = () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '16px', padding: '20px', backgroundColor: theme.color.neutral.background }}>
+    <div
+        style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(7, 1fr)',
+            gap: '16px',
+            padding: '20px',
+            backgroundColor: theme.color.neutral.background,
+        }}
+    >
         {Object.entries(radiuses).map(([key, value]) => (
             <div key={key} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
                 <div

package/src/design_system/tokens/shadows.stories.tsx

@@ -33,7 +33,9 @@ const ShadowsShowcase = () => (
                 />
                 <div style={{ textAlign: 'center' }}>
                     <div style={{ fontSize: '12px', color: theme.color.neutral.text, fontWeight: '500' }}>{key}</div>
-                    <div style={{ fontSize: '10px', color: theme.color.neutral.textMuted, fontFamily: 'monospace' }}>{value}</div>
+                    <div style={{ fontSize: '10px', color: theme.color.neutral.textMuted, fontFamily: 'monospace' }}>
+                        {value}
+                    </div>
                 </div>
             </div>
         ))}