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

package/src/components/simple_markdown/simple_markdown.tsx

@@ -0,0 +1,214 @@
+import type { Element, Root, Text as TextNode } from 'hast';
+import React, { useCallback, useMemo, useRef } from 'react';
+import type { Components } from 'react-markdown';
+import ReactMarkdown, { uriTransformer } from 'react-markdown';
+import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
+import remarkGfm from 'remark-gfm';
+import styled from 'styled-components';
+import type { Pluggable, PluggableList } from 'unified';
+import { visit } from 'unist-util-visit';
+
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box } from '../box.js';
+import { isUrlExternal } from '../link.js';
+import { cleanMarkdown } from '../readme_renderer/utils.js';
+import { HeadingContent } from '../text/heading_content.js';
+import { Heading, Text } from '../text/index.js';
+import { TextContent } from '../text/text_content.js';
+import {
+    MarkdownBlockQuote,
+    MarkdownCode,
+    MarkdownLink,
+    MarkdownTable,
+} from './simple_markdown_components.js';
+
+export type SimpleMarkdownComponents = Components;
+
+export const defaultAllowedElements = [
+    'a',
+    'b',
+    'blockquote',
+    'br',
+    'center',
+    'code',
+    'del',
+    'em',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'hr',
+    'i',
+    'img',
+    'li',
+    'ol',
+    'p',
+    'pre',
+    'span',
+    'strong',
+    'table',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'u',
+    'ul',
+];
+
+const StyledMarkdown = styled(ReactMarkdown)`
+    scroll-margin-top: 10px;
+
+    @font-face {
+        font-family: "ellipsis-font";
+        src: local("Courier");
+        unicode-range: U+2026;
+        size-adjust: 0%;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    hr {
+        color: ${theme.color.neutral.border};
+    }
+`;
+
+// Function to recursively process unsupported elements
+const unwrapUnsupportedElement = (node: Element): (Element | TextNode)[] => {
+    return node.children.flatMap((child) => {
+        if (child.type === 'text') {
+            return child; // Keep text as is
+        }
+        if (child.type === 'element') {
+            if (defaultAllowedElements.includes(child.tagName)) {
+                return child; // Keep supported elements
+            }
+            return unwrapUnsupportedElement(child as Element);
+        }
+        return []; // Ignore other node types
+    });
+};
+
+const getUnsupportedRehypeTagsSanitationPlugIn = (
+    allowedElements: string[],
+): Pluggable<unknown[]> => () => (tree: Root) => {
+    visit(tree, 'element', (node, index, parent) => {
+        if (!allowedElements.includes(node.tagName) && parent && typeof index === 'number') {
+            // Replace unsupported element with its valid children
+            parent.children.splice(index, 1, ...unwrapUnsupportedElement(node));
+        }
+    });
+};
+
+export const defaultRehypePlugins = [rehypeRaw];
+export const defaultRemarkPlugins = [remarkGfm];
+
+// TODO: Add Image component
+const regularMarkdownSizeComponents: Components = {
+    h1: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading1'>{children}</HeadingContent>,
+    h2: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading2'>{children}</HeadingContent>,
+    h3: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading3'>{children}</HeadingContent>,
+    h4: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading4'>{children}</HeadingContent>,
+    h5: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading5'>{children}</HeadingContent>,
+    h6: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading6'>{children}</HeadingContent>,
+    p: ({ children }) => (<TextContent my='space16'>{children}</TextContent>),
+    strong: ({ children }) => <TextContent as='strong' weight='bold'>{children}</TextContent>,
+    b: ({ children }) => <TextContent as='b' weight='bold'>{children}</TextContent>,
+    th: ({ children }) => <TextContent as='th' weight='bold'>{children}</TextContent>,
+    blockquote: ({ children }) => <MarkdownBlockQuote>{children}</MarkdownBlockQuote>,
+    table: ({ children }) => <MarkdownTable>{children}</MarkdownTable>,
+    ul: ({ children }) => <Box as='ul' pl='space32'>{children}</Box>,
+    ol: ({ children, start }) => <TextContent as='ol' pl='space32' start={start}>{children}</TextContent>,
+    li: ({ children }) => <TextContent as='li' mt='space4'>{children}</TextContent>,
+    a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
+    code: ({ children, inline }) => <MarkdownCode inline={inline} size='regular'>{children}</MarkdownCode>,
+};
+
+const smallMarkdownSizeComponents: Components = {
+    h1: ({ children }) => <Heading mt='space32' mb='space16' type='title2xl'>{children}</Heading>,
+    h2: ({ children }) => <Heading mt='space32' mb='space16' type='titleXl'>{children}</Heading>,
+    h3: ({ children }) => <Heading mt='space32' mb='space16' type='titleL'>{children}</Heading>,
+    h4: ({ children }) => <Heading mt='space32' mb='space16' type='titleM'>{children}</Heading>,
+    h5: ({ children }) => <Heading mt='space32' mb='space16' type='titleS'>{children}</Heading>,
+    h6: ({ children }) => <Heading mt='space32' mb='space16' type='titleXs'>{children}</Heading>,
+    p: ({ children }) => (<Text my='space16'>{children}</Text>),
+    strong: ({ children }) => <Text as='strong' weight='bold'>{children}</Text>,
+    b: ({ children }) => <Text as='b' weight='bold'>{children}</Text>,
+    th: ({ children }) => <Text as='th' weight='bold'>{children}</Text>,
+    blockquote: ({ children }) => <MarkdownBlockQuote>{children}</MarkdownBlockQuote>,
+    table: ({ children }) => <MarkdownTable>{children}</MarkdownTable>,
+    ul: ({ children }) => <Box as='ul' pl='space32'>{children}</Box>,
+    ol: ({ children, start }) => <Text as='ol' pl='space32' start={start}>{children}</Text>,
+    li: ({ children }) => <Text as='li' mt='space4'>{children}</Text>,
+    a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
+    code: ({ children, inline }) => <MarkdownCode inline={inline} size='small'>{children}</MarkdownCode>,
+};
+
+type MarkdownSize = 'regular' | 'small';
+
+interface SimpleMarkdownProps extends ReactMarkdownOptions {
+    size?: MarkdownSize,
+}
+
+const useDefaultUrlTransform = () => {
+    const { windowLocationHost } = useSharedUiDependencies();
+
+    return useCallback((url: string) => {
+        if (!isUrlExternal(url, windowLocationHost)) {
+            // We want to make sure internal links will be relative links without https://host at the beginning because Link doesn't work with these
+            return url.replace(/^(https?:\/\/)?(www\.)?[^/]+/, '') || '/';
+        }
+
+        return url;
+    }, [windowLocationHost]);
+};
+
+export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
+    size = 'regular', // small is default for console
+    children: markdown,
+    components,
+    rehypePlugins,
+    remarkPlugins,
+    transformLinkUri,
+    allowedElements,
+    ...rest
+}) => {
+    const cleanedMarkdown = useMemo(() => cleanMarkdown(markdown), [markdown]);
+
+    const effectiveAllowedElements = useRef(allowedElements || defaultAllowedElements);
+
+    const effectiveComponents = useRef({
+        ...(size === 'regular' ? regularMarkdownSizeComponents : smallMarkdownSizeComponents),
+        ...components,
+    });
+
+    const rehypePluginsRef = useRef<PluggableList>([
+        ...(rehypePlugins || [...defaultRehypePlugins, getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current)]),
+        rehypeSanitize, // lets always sanitize the output
+    ]);
+
+    const defaultUrlTransform = useDefaultUrlTransform();
+
+    return (
+        <StyledMarkdown
+            components={effectiveComponents.current}
+            rehypePlugins={rehypePluginsRef.current}
+            remarkPlugins={remarkPlugins || defaultRemarkPlugins}
+            allowedElements={effectiveAllowedElements.current}
+            transformLinkUri={(href, children, title) => {
+                const transformed = transformLinkUri ? transformLinkUri(href, children, title) : defaultUrlTransform(href);
+                return uriTransformer(transformed);
+            }}
+            {...rest}
+        >
+            {cleanedMarkdown}
+        </StyledMarkdown>
+    );
+};

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -0,0 +1,293 @@
+import qs from 'query-string';
+import React from 'react';
+import type { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react';
+import styled from 'styled-components';
+
+import { CheckIcon, LinkIcon } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import type { WithOptional } from '../../type_utils.js';
+import { useCopyToClipboard } from '../../utils/index.js';
+import { Box } from '../box.js';
+import { CodeBlock, InlineCode, OneLineCode } from '../code/index.js';
+import type { LinkProps } from '../link.js';
+import { Link } from '../link.js';
+import { slugifyHeadingChildren } from '../readme_renderer/utils.js';
+import type { HeadingSharedProps } from '../text/heading_shared.js';
+import { Heading } from '../text/index.js';
+import type { SharedTextProps, SharedTextSize } from '../text/text_shared.js';
+
+const simpleMarkdownClassNames = {
+    HEADING_ICON_LINK: 'headingIconLink',
+} as const;
+
+export const MarkdownPlainHeading: React.FC<HeadingSharedProps> = ({
+    children,
+    ...rest
+}) => {
+    const id = slugifyHeadingChildren(children);
+
+    return (
+        <Heading
+            mt='space32'
+            mb='space16'
+            id={id}
+            {...rest}
+        >
+            {children}
+        </Heading>
+    );
+};
+
+const StyledMarkdownHeading = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space4};
+
+    .${simpleMarkdownClassNames.HEADING_ICON_LINK} {
+        height: 16px;
+        display: none;
+
+        svg {
+            max-height: 1em !important;
+        }
+    }
+
+    &:hover {
+        .${simpleMarkdownClassNames.HEADING_ICON_LINK} {
+            display: initial;
+        }
+    }
+`;
+
+/**
+ * Default markdown heading that renders copy icon next to it.
+ * Use `MarkdownPlainHeading` if you want to render simple heading instead
+ */
+// TODO: This should be used for readmes
+export const MarkdownHeadingWrapper: React.FC<HeadingSharedProps> = ({
+    children,
+    ...rest
+}) => {
+    const id = slugifyHeadingChildren(children);
+
+    const [isCopied, handleClick] = useCopyToClipboard({
+        text: id ?? '',
+        // We want the whole URL to be copied, not just the ID
+        transform: (text) => {
+            const url = new URL(window.location.href);
+            url.hash = `#${text}`;
+            return url.toString();
+        },
+    });
+
+    return (
+        <StyledMarkdownHeading
+            mt='space32'
+            mb='space16'
+            id={id}
+            {...rest}
+        >
+            {children}
+            <Link
+                className={simpleMarkdownClassNames.HEADING_ICON_LINK}
+                onClick={handleClick}
+                to={`#${id}`}
+            >
+                {isCopied ? (
+                    <CheckIcon
+                        size="16"
+                        color={theme.color.success.action}
+                    />
+                ) : (
+                    <LinkIcon
+                        size="16"
+                        color={theme.color.primary.text}
+                    />
+                )}
+            </Link>
+        </StyledMarkdownHeading>
+    );
+};
+
+const StyledInlineCode = styled(InlineCode)`
+    /* If code is rendered within heading, it should inherit its font styles */
+    /* TODO: Look at implementation of InlineCode - maybe we can live without it */
+    h1 & code, h2 & code, h3 & code, h4 & code, h5 & code {
+        font-size: inherit !important;
+        line-height: inherit !important;
+    }
+
+    b & code, strong & code{
+        font-weight: inherit !important;
+    }
+`;
+
+type MarkdownCodeProps = Pick<CodeProps, 'inline' | 'className' | 'children'>
+
+export const MarkdownCode: React.FC<MarkdownCodeProps & { size: SharedTextSize }> = ({
+    inline,
+    className,
+    children,
+    size,
+}) => {
+    if (inline) {
+        return <StyledInlineCode size={size} className={className}>{children}</StyledInlineCode>;
+    }
+
+    const code = String(children).replace(/\n$/, '').trim();
+    const match = /language-(\w+)/.exec(className || '');
+    const language = match?.[1]?.toLowerCase();
+    const isOneLineCode = code.split('\n').length <= 1;
+
+    if (isOneLineCode) {
+        return (
+            <OneLineCode
+                language={language}
+                size={size}
+                fullWidth
+            >
+                {code}
+            </OneLineCode>
+        );
+    }
+
+    return (
+        <CodeBlock
+            content={code}
+            language={language}
+            size={size}
+            hideLineNumbers
+            fullWidth
+            hideBashHeader
+            hideBashPromptPrefixes
+        />
+    );
+};
+
+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) => {
+    const youtubeLink = link.match(youtubeRegex);
+    const vimeoLink = link.match(vimeoRegex);
+    let src;
+    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 } });
+    }
+    if (vimeoLink) src = `https://player.vimeo.com/video/${vimeoLink[2]}`;
+
+    return src;
+};
+
+const StyledVideo = styled.div`
+    width: 65%;
+
+    & > div {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        padding-top: 56.25%;
+
+        & > iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            border: 0px;
+        }
+    }
+`;
+
+interface MarkdownVideoProps {
+    src: string;
+}
+
+const MarkdownVideo = ({ src }: MarkdownVideoProps) => {
+    return (
+        <StyledVideo>
+            <div>
+                <iframe loading="lazy" allowFullScreen src={src} />
+            </div>
+        </StyledVideo>
+    );
+};
+
+const StyledMarkdownLink = styled(Link)`
+    overflow-wrap: break-word;
+
+    h1 &, h2 &, h3 &, h4 &, h5 & {
+        overflow-wrap: normal;
+    }
+
+    &:hover {
+        /* Links normally don't have underline, but in markdown we want to have it */
+        text-decoration: underline;
+    }
+`;
+
+export const MarkdownLink: React.FC<WithOptional<LinkProps, 'to'>> = ({
+    to,
+    children,
+    rel,
+    className,
+}) => {
+    return (to && typeof to === 'string') ? (
+        <StyledMarkdownLink to={to} hideExternalIcon={true} rel={rel} className={className}>{children}</StyledMarkdownLink>
+    ) : (
+        (<span>{children}</span>) // Invalid links can be rendered as a regular span instead
+    );
+};
+
+export const MarkdownBlockQuote = styled(Box).attrs({
+    my: 'space16',
+    py: 'none',
+    forwardedAs: 'blockquote',
+})`
+    border-left: 2px solid ${theme.color.neutral.separatorSubtle};
+    padding-left: ${theme.space.space16};
+
+    color: ${theme.color.neutral.textMuted};
+
+    & > p {
+        margin: 0;
+    }
+`;
+
+export const MarkdownTable = styled.table`
+    display: block;
+    overflow: auto;
+    border-collapse: collapse;
+
+    td, th {
+        border: 1px solid ${theme.color.neutral.border};
+        padding: ${theme.space.space16};
+        text-align: left;
+    }
+
+    tr:nth-child(even):not([class]) {
+        > th, > td {
+            background-color: inherit;
+        }
+    }
+`;
+
+// TODO: This should be used for readmes
+export const MarkdownParagraphContent: React.FC<SharedTextProps & Pick<ReactMarkdownProps, 'node'>> = ({
+    children,
+    node,
+}) => {
+    const child = node.children[0];
+    const isText = child?.type === 'text';
+
+    const videoSrc = isText && getVideoSrc(child.value);
+    if (videoSrc) return <MarkdownVideo src={videoSrc} />;
+
+    // the || null part is important because non-supported elements will fall back to this paragraph component;
+    return children || null;
+};

package/src/components/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from './tabs.js';
+export * from './tab.js';