@apify/ui-library 0.71.1-featcolortokens-178953.58 → 0.71.1-featcolortokens-178953.67

package/src/components/rating.tsx

@@ -0,0 +1,106 @@
+import type { FC } from 'react';
+import { 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.js';
+import type { BoxProps } from './box.js';
+import { Box } from './box.js';
+import { Text } from './text/index.js';
+
+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 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/index.ts

@@ -0,0 +1,3 @@
+export { useActorTitleHeadingFilter } from './utils.js';
+export { pythonizeValue } from './pythonize_value.js';
+export { TableOfContents } from './table_of_contents.js';

package/src/components/readme_renderer/pythonize_value.ts

@@ -0,0 +1,76 @@
+/* eslint-disable prefer-template, no-control-regex */
+// Escaped versions of control characters
+const escapes = {
+    92: '\\\\',
+    34: '\\"',
+    8: '\\b',
+    12: '\\f',
+    13: '\\r',
+    9: '\\t',
+};
+
+// Replaces a control character with its escaped value
+const escapeChar = (character: string) => {
+    const charCode = character.charCodeAt(0);
+    const escaped = escapes[charCode as keyof typeof escapes];
+    if (escaped) {
+        return escaped;
+    }
+    return '\\u00' + charCode.toString(16).padStart(2, '0');
+};
+
+// Escapes special characters in a string and surrounds it with proper quotes
+const pythonQuoteString = (str: string, escapeNewlines = true) => {
+    const escapedValue = str.replace(/[\x00-\x09\x0b-\x1f\x22\x5c]/g, escapeChar);
+    if (!escapeNewlines && escapedValue.includes('\n')) {
+        return '"""' + escapedValue + '"""';
+    }
+    return '"' + escapedValue.replace(/\n/g, '\\n') + '"';
+};
+
+const INDENT = '    ';
+
+// Converts a Javascript value to its equivalent Python representation
+// Doesn't support everything, because that would be impossible,
+// only the values which are supported in an input schema prefill (booleans, numbers, strings, arrays, objects)
+// Tries to keep the representation short, but readable.
+export const pythonizeValue = <T>(value: T, depth = 0): string | T => {
+    // None-like values
+    if (value === undefined) return 'None';
+    if (value === null) return 'None';
+
+    // Boolean values
+    if (value === true) return 'True';
+    if (value === false) return 'False';
+
+    // Number values (sorry, JSON doesn't support infinities)
+    if (value === Infinity) return 'None';
+    if (value === -Infinity) return 'None';
+    if (Number.isNaN(value)) return 'None';
+    if (typeof value === 'number') return value;
+
+    // String values
+    if (typeof value === 'string') return pythonQuoteString(value, false);
+
+    // Arrays of values
+    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) + ']';
+    }
+
+    // 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) + '}';
+    }
+
+    // This should never happen, if it did, something went wrong
+    return 'UNSUPPORTED VALUE';
+};

package/src/components/readme_renderer/table_of_contents.tsx

@@ -0,0 +1,272 @@
+import _ from 'lodash';
+import React, {
+    useCallback,
+    useMemo,
+} from 'react';
+import ReactMarkdown from 'react-markdown';
+import type { AllowElement } from 'react-markdown/lib/rehype-filter';
+import remarkToc from 'remark-toc';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { inlineCodeStyles } from '../code/index.js';
+import { Link } from '../link.js';
+import { Text } from '../text/index.js';
+import { cleanMarkdown, slugifyHeadingChildren } from './utils.js';
+
+const TOC_HEADING_ID = 'Contents';
+
+const StyledTOCLink = styled(Text)`
+    display: inline-block;
+    color: ${theme.color.neutral.textMuted};
+    text-decoration: none;
+
+    /* Do no change the font style if the heading is defined as bold in the markdown and is wrapped in a <strong> tag */
+    strong {
+        font-size: inherit !important;
+        line-height: inherit !important;
+        font-weight: inherit !important;
+    }
+
+    &:hover, &.selected {
+        color: ${theme.color.primary.text} !important;
+    }
+
+    &:before {
+        content: " ";
+        display: inline-block;
+        height: 100%;
+        left: 0;
+        margin-top: -1px;
+        position: absolute;
+        width: 1px;
+        background-color: ${theme.color.neutral.border};
+    }
+
+    &.selected:before {
+        background-color: ${theme.color.primary.text};
+    }
+`;
+
+const StyledTableOfContents = styled.div`
+    position: relative;
+    overflow: hidden;
+
+    p {
+        margin: 0;
+    }
+
+    .level-3 a {
+        color: ${theme.color.neutral.textSubtle};
+    }
+
+    ul {
+        padding-left: ${theme.space.space8} !important;
+        list-style: none;
+        margin: 0;
+        overflow-y: auto;
+
+        &.level-3 {
+            padding-left: ${theme.space.space16} !important;
+            max-height: 0;
+            overflow: hidden;
+            transition: all .3s ease-in-out;
+
+            &.expanded {
+                max-height: 1000px;
+            }
+        }
+    }
+
+    .inline-code {
+        ${inlineCodeStyles}
+    }
+`;
+
+interface CustomHTMLAnchorElement extends Omit<HTMLAnchorElement, 'children' | 'parentNode'> {
+    hash: string;
+    tagName: string;
+    type: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    parentNode: any;
+}
+
+const handleScroll = (anchors: CustomHTMLAnchorElement[], headlines: HTMLElement[], anchorLists: HTMLUListElement[] | null, headingOffsetPx: number) => {
+    if (!anchors || !headlines) return;
+
+    // Items that are past scroll
+    const headlinesPastScrollPosition = headlines.filter((headline) => {
+        return headline.getBoundingClientRect().top - headingOffsetPx < 0;
+    });
+
+    // Last item that is past the scroll is current in view. If no headline is past the scroll, let's select the first one
+    const currentHeadlineId = headlinesPastScrollPosition[headlinesPastScrollPosition.length - 1]?.id || headlines[0]?.id;
+
+    // Highlighting anchor of current headline
+    if (currentHeadlineId) {
+        const currentHash = `#${currentHeadlineId}`;
+
+        anchorLists?.forEach((anchorList) => anchorList.classList.remove('expanded'));
+
+        // Remove selected class from all anchors and only add it to the current one
+        anchors.forEach((anchor) => {
+            anchor.classList.remove('selected');
+            if (anchor.hash === currentHash) {
+                anchor.classList.add('selected');
+
+                const grandparent = anchor.parentNode?.parentNode;
+
+                // Structure of the table of content is normalized so we can figure out if section should be expanded
+                // by tag and className of neighboring nodes. There are two cases:
+
+                // 1) If h2 is selected, we want to expand its section with h3 headings
+                if (grandparent?.tagName === 'LI' && grandparent.children[1]?.tagName === 'UL' && grandparent.children[1]?.classList.contains('level-3')) {
+                    grandparent.children[1].classList.add('expanded');
+                }
+
+                // 2) We also want to expand section of h3 headings that follow h1 right away
+                if (grandparent?.tagName === 'UL' && grandparent.classList.contains('level-3')) {
+                    grandparent.classList.add('expanded');
+                }
+            }
+        });
+    }
+};
+
+const assignHeadingLevelsRecursively = (
+    {
+        children,
+        tagName,
+        properties,
+    }: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        children: any[],
+        tagName: string,
+        properties: { className: string }
+    },
+    level: number,
+) => {
+    if (level > 3) return;
+    let currentLevel = level;
+    if (tagName === 'ul') {
+        // eslint-disable-next-line no-param-reassign
+        properties.className = `level-${currentLevel}`; // assign level className
+        currentLevel += 1; // increase current heading level;
+    }
+
+    children?.forEach((child) => {
+        // We only care about ul and li elements - we don't need to traverse any other
+        if (child.type === 'element' && (tagName === 'ul' || tagName === 'li')) {
+            assignHeadingLevelsRecursively(child, currentLevel);
+        }
+    });
+};
+
+export interface TableOfContentsProps {
+    markdown: string;
+    headingOffsetPx?: number; // How far from the top should the toc detect the current heading
+    // 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;
+}
+
+const TableOfContentsComponent = ({
+    markdown,
+    headingOffsetPx = 10,
+    allowElement,
+    ...rest
+}: TableOfContentsProps) => {
+    const cleanedMarkdown = useMemo(() => {
+        const cleanedMarkdownString = cleanMarkdown(markdown);
+        return `### ${TOC_HEADING_ID}\n${cleanedMarkdownString}`;
+    }, [markdown]);
+
+    const hasTopLevelHeading = useMemo(() => !!cleanedMarkdown.match(/^#\s.+$/m), [cleanedMarkdown]);
+
+    const tocRef = useCallback((node: HTMLElement | null) => {
+        const anchors = node ? Array.from(node.querySelectorAll('a')) : [];
+        const anchorLists = node ? Array.from(node.querySelectorAll('ul')) : null;
+        const headlines = (anchors)
+            .map((anchor) => document.getElementById(anchor.hash.substr(1)))
+            .filter((headline) => headline !== undefined && headline !== null) as HTMLElement[];
+
+        const scrollHandler = () => handleScroll(anchors, headlines, anchorLists, headingOffsetPx);
+
+        // Callback refs cannot return cleanup functions - but they are called again with null on unmount
+        if (node) {
+            window.addEventListener('scroll', scrollHandler);
+        } else {
+            window.removeEventListener('scroll', scrollHandler);
+        }
+        scrollHandler(); // call for the first time so we select the first heading without scrolling
+    }, [headingOffsetPx]);
+
+    return (
+        <StyledTableOfContents ref={tocRef} {...rest}>
+            <ReactMarkdown
+                allowElement={allowElement}
+                remarkPlugins={[
+                    [remarkToc, { heading: TOC_HEADING_ID, maxDepth: 3 }],
+                    () => ({ children, ...nodeRest }) => {
+                        // TOC plug-ins only inject content table to existing markdown documents - only generating it is not a common use-case
+                        // To make is happen, we can just take the generated node where toc is located and throw away the rest.
+                        // children[0] is the heading where toc is placed (that's plug-in's requirement)
+                        // children[1] is the generated table of contents we can simply pick
+
+                        let tocContentNode = children[1];
+
+                        // If there is no H1 heading in the readme then assignHeadingLevelsRecursively does not work correctly.
+                        // We need to 'normalize' the final node to have all the levels we expect
+                        // - solution is to wrap the content in extra node that mimic this H1 group that remarkToc would normally create
+                        if (!hasTopLevelHeading) {
+                            tocContentNode = {
+                                type: 'list',
+                                ordered: false,
+                                spread: false,
+                                children: [
+                                    {
+                                        type: 'listItem',
+                                        spread: true,
+                                        children: [
+                                            tocContentNode,
+                                        ],
+                                    },
+                                ],
+                            };
+                        }
+
+                        return {
+                            ...nodeRest,
+                            children: [
+                                tocContentNode,
+                            ],
+                        };
+                    },
+                ]}
+                rehypePlugins={[() => (input) => {
+                    // this plug-in already works with html node representation so we can assign classNames that we need
+                    // in order to allow hiding blocks with h3 headings that are out of the viewport
+                    assignHeadingLevelsRecursively(input.children[0], 1);
+                    return input;
+                }]}
+                components={{
+                    a: ({ children }) => (
+                        <StyledTOCLink
+                            forwardedAs={Link}
+                            to={`#${slugifyHeadingChildren(children)}`}
+                            py={'space4'}
+                        >
+                            {children}
+                        </StyledTOCLink>
+                    ),
+                    code: ({ children }) => (
+                        <code className="inline-code">{children}</code>
+                    ),
+                }}
+            >
+                {cleanedMarkdown}
+            </ReactMarkdown>
+        </StyledTableOfContents>
+    );
+};
+
+export const TableOfContents = React.memo(TableOfContentsComponent, (prevProps, nextProps) => _.isEqual(prevProps, nextProps));

package/src/components/readme_renderer/utils.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import type { AllowElement } from 'react-markdown/lib/rehype-filter';
+import slugify from 'slugify';
+
+export const slugifyHeadingChildren = (
+    headingChildren: React.ReactNode,
+): string | undefined => {
+    if (!headingChildren) return undefined;
+
+    const slugs: string[] = [];
+    React.Children.forEach(headingChildren, (child) => {
+        if (typeof child === 'string') {
+            slugs.push(slugify(child, { lower: true, strict: true }));
+        } else if (React.isValidElement(child) && child.props.children) {
+            const nestedSlugs = slugifyHeadingChildren(child.props.children);
+            if (nestedSlugs) slugs.push(nestedSlugs);
+        }
+    });
+
+    return slugs.join('-');
+};
+
+export const cleanMarkdown = (markdown: string, removeFirstH1?: boolean): string => {
+    // Remove the table of contents as we are generating our own
+    let clean = markdown
+        .replace(/<!-- toc start -->.*?<!-- toc end -->/s, '')
+        .replace(/##.*content.*?\n*<!-- toc -->(.|[\r\n])*<!-- tocstop -->\n*/, '');
+
+    // Remove first h1 if removeFirstH1 is true
+    if (removeFirstH1) clean = clean.replace(removeFirstH1 ? /^#\s.+$/m : '', '');
+
+    return clean.trim();
+};
+
+// This removes the first element if it's a `h1` containing exactly the Actor title
+export const useActorTitleHeadingFilter = (actorTitle: string): AllowElement => {
+    return useCallback((element, index, parent) => {
+        if (parent.type === 'root'
+            && index === 0
+            && element.tagName === 'h1'
+            && element.children.length === 1
+            && element.children[0].type === 'text'
+            && element.children[0].value?.toLowerCase() === actorTitle.toLowerCase()) return false;
+        return true;
+    }, [actorTitle]);
+};

package/src/components/simple_markdown/index.ts

@@ -0,0 +1,2 @@
+export * from './simple_markdown.js';
+export * from './simple_markdown_components.js';