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

package/src/components/rating.tsx

@@ -1,106 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,76 +0,0 @@
-/* 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

@@ -1,272 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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