@apify/ui-library 0.60.2 → 0.61.0

package/src/components/simple_markdown/simple_markdown.tsx

@@ -1,4 +1,4 @@
-import type { Root, Element, Text as TextNode } from 'hast';
+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';
@@ -27,6 +27,40 @@ import {
 
 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;
 
@@ -64,7 +98,7 @@ const unwrapUnsupportedElement = (node: Element): (Element | TextNode)[] => {
 
 const getUnsupportedRehypeTagsSanitationPlugIn = (
     allowedElements: string[],
-): Pluggable<any[]> => () => (tree: Root) => {
+): 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
@@ -73,40 +107,6 @@ const getUnsupportedRehypeTagsSanitationPlugIn = (
     });
 };
 
-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',
-];
-
 export const defaultRehypePlugins = [rehypeRaw];
 export const defaultRemarkPlugins = [remarkGfm];
 

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -110,21 +110,6 @@ export const MarkdownHeadingWrapper: React.FC<HeadingSharedProps> = ({
     );
 };
 
-// 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;
-};
-
 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 */
@@ -167,19 +152,17 @@ export const MarkdownCode: React.FC<MarkdownCodeProps & { size: SharedTextSize }
         );
     }
 
-    if (!inline) {
-        return (
-            <CodeBlock
-                content={code}
-                language={language}
-                size={size}
-                hideLineNumbers
-                fullWidth
-                hideBashHeader
-                hideBashPromptPrefixes
-            />
-        );
-    }
+    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*)?$/;
@@ -293,3 +276,18 @@ export const MarkdownTable = styled.table`
         }
     }
 `;
+
+// 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/tag.tsx

@@ -8,16 +8,40 @@ import type { WithTransientProps } from '../type_utils.js';
 import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
 import { Link, type RegularLinkProps } from './link.js';
 
-type TagSize = typeof TAG_SIZES[number];
-
 export const TAG_SIZES = ['large', 'medium', 'small'] as const;
 
+type TagSize = typeof TAG_SIZES[number];
+
 const TAG_ICON_SIZES = {
     large: '20',
     medium: '16',
     small: '12',
 } satisfies Record<TagSize, IconSize>;
 
+export const TAG_VARIANTS = ['primary', 'secondary', 'accent', 'success', 'warning', 'error'] as const;
+
+type TagVariant = typeof TAG_VARIANTS[number];
+
+type TagNodeType = Extract<React.ElementType, 'a' | 'button'>;
+type TagNodePropsMap = {
+    a: {
+        element: HTMLAnchorElement;
+        props: RegularLinkProps;
+    };
+    button: {
+        element: HTMLButtonElement;
+        props: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    };
+}
+
+export type TagProps<T extends TagNodeType> = RegularBoxProps & MarginSpacingProps & ({
+    as?: T;
+    size?: TagSize;
+    variant?: TagVariant;
+    LeadingIcon?: IconComponent;
+    TrailingIcon?: IconComponent;
+} & Omit<TagNodePropsMap[T]['props'], 'size'>);
+
 const tagSizeStyle = {
     large: css`
         height: 4rem;
@@ -43,10 +67,6 @@ const tagSizeStyle = {
     `,
 } satisfies Record<TagSize, FlattenSimpleInterpolation>;
 
-type TagVariant = typeof TAG_VARIANTS[number];
-
-export const TAG_VARIANTS = ['primary', 'secondary', 'accent', 'success', 'warning', 'error'] as const;
-
 const tagVariantStyle = {
     primary: css`
         color: ${theme.color.neutral.text};
@@ -106,7 +126,7 @@ const tagVariantStyle = {
 } satisfies Record<TagVariant, FlattenSimpleInterpolation>;
 
 type StyledTagProps = WithTransientProps<
-    Required<Pick<TagProps<any>, 'size' | 'variant'>>
+    Required<Pick<TagProps<TagNodeType>, 'size' | 'variant'>>
 >;
 
 const StyledTag = styled(Box)<StyledTagProps>`
@@ -127,26 +147,6 @@ const StyledTag = styled(Box)<StyledTagProps>`
     transition: background ${theme.transition.fastEaseOut};
 `;
 
-type TagNodeType = Extract<React.ElementType, 'a' | 'button'>;
-type TagNodePropsMap = {
-    a: {
-        element: HTMLAnchorElement;
-        props: RegularLinkProps;
-    };
-    button: {
-        element: HTMLButtonElement;
-        props: React.ButtonHTMLAttributes<HTMLButtonElement>;
-    };
-}
-
-export type TagProps<T extends TagNodeType> = RegularBoxProps & MarginSpacingProps & ({
-    as?: T;
-    size?: TagSize;
-    variant?: TagVariant;
-    LeadingIcon?: IconComponent;
-    TrailingIcon?: IconComponent;
-} & Omit<TagNodePropsMap[T]['props'], 'size'>);
-
 /**
  * Component for displaying inherenly interactive chip descendant
  */
@@ -176,10 +176,11 @@ ref: ForwardedRef<TagNodePropsMap[T]['element']>,
             {TrailingIcon && <TrailingIcon size={TAG_ICON_SIZES[size]} />}
         </StyledTag>
     );
-};
+}
 TagWrapper.displayName = 'Tag';
 
 // `forwardRef` can't handle generic types, should be fixable with React 19
 export const Tag = forwardRef(TagWrapper) as <T extends TagNodeType>(
+    // eslint-disable-next-line no-use-before-define -- see comment above 👆
     props: TagProps<T> & { ref?: ForwardedRef<TagNodePropsMap[T]['element']> },
 ) => ReturnType<typeof TagWrapper>;

package/src/components/text/heading_content.tsx

@@ -10,7 +10,7 @@ type HeadingContentType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'h
 
 interface HeadingContentTransientProps {
     type?: HeadingContentType,
-};
+}
 
 const getContentHeadingStyles = (headingType: HeadingContentType) => css`
     ${theme.typography.content.mobile[headingType]}

package/src/components/text/heading_marketing.tsx

@@ -10,7 +10,7 @@ type HeadingMarketingType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleX
 
 interface HeadingMarketingTransientProps {
     type?: HeadingMarketingType,
-};
+}
 
 type StyledHeadingMarketingProps = WithTransientProps<HeadingMarketingTransientProps>;
 export type HeadingMarketingProps = HeadingMarketingTransientProps & TextBaseProps;

package/src/components/text/heading_shared.tsx

@@ -10,7 +10,7 @@ type HeadingSharedType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleXl'
 
 interface HeadingSharedTransientProps {
     type?: HeadingSharedType,
-};
+}
 
 type StyledHeadingSharedProps = WithTransientProps<HeadingSharedTransientProps>;
 export type HeadingSharedProps = HeadingSharedTransientProps & TextBaseProps;
@@ -39,7 +39,7 @@ const StyledHeadingShared = styled(TextBaseComponent)<StyledHeadingSharedProps>`
     `}
 `;
 
-const HeadingShared: React.FC<HeadingSharedProps> = ({
+export const HeadingShared: React.FC<HeadingSharedProps> = ({
     type,
     as,
     ...rest
@@ -53,5 +53,3 @@ const HeadingShared: React.FC<HeadingSharedProps> = ({
         />
     );
 };
-
-export default HeadingShared;

package/src/components/text/index.ts

@@ -1,6 +1,6 @@
-import HeadingShared from './heading_shared.js';
+import { HeadingShared } from './heading_shared.js';
 import type { SharedTextProps } from './text_shared.js';
-import TextShared from './text_shared.js';
+import { TextShared } from './text_shared.js';
 
 export * from './text_base.js';
 export * from './text_content.js';

package/src/components/text/text_base.tsx

@@ -10,7 +10,7 @@ export interface TransientTextBaseProps {
     uppercase?: boolean
     align?: 'left' | 'right' | 'center'
     color?: string,
-};
+}
 
 export type StyledTextBaseProps = WithTransientProps<TransientTextBaseProps>;
 export type TextBaseProps = TransientTextBaseProps & BoxProps;

package/src/components/text/text_content.tsx

@@ -13,7 +13,7 @@ export type ContentTextWeight = 'normal' | 'bold';
 export interface TransientContentTextProps {
     type?: ContentTextType,
     weight?: ContentTextWeight,
-};
+}
 
 type StyledContentTextProps = WithTransientProps<TransientContentTextProps>;
 export type ContentTextProps = TransientContentTextProps & TextBaseProps;

package/src/components/text/text_marketing.tsx

@@ -13,7 +13,7 @@ export type MarketingTextWeight = 'normal' | 'bold';
 export interface TransientMarketingTextProps {
     size?: MarketingTextSize,
     weight?: MarketingTextWeight,
-};
+}
 
 type StyledMarketingTextProps = WithTransientProps<TransientMarketingTextProps>;
 export type MarketingTextProps = TransientMarketingTextProps & TextBaseProps;

package/src/components/text/text_shared.tsx

@@ -14,7 +14,7 @@ export interface TransientSharedTextProps {
     type?: SharedTextType,
     size?: SharedTextSize,
     weight?: SharedTextWeight,
-};
+}
 
 type StyledSharedTextProps = WithTransientProps<TransientSharedTextProps>;
 export type SharedTextProps = TransientSharedTextProps & TextBaseProps;
@@ -68,7 +68,7 @@ const StyledTextShared = styled(TextBaseComponent)<StyledSharedTextProps>`
     ${(props) => TEXT_SHARED_VARIANTS_CSS[props.$type || 'body'][props.$size || 'regular'][props.$weight || 'normal']}
 `;
 
-const TextShared = forwardRef<HTMLElement | undefined, SharedTextProps>(({
+export const TextShared = forwardRef<HTMLElement | undefined, SharedTextProps>(({
     type,
     size,
     weight,
@@ -91,6 +91,3 @@ const TextShared = forwardRef<HTMLElement | undefined, SharedTextProps>(({
         />
     );
 });
-
-TextShared.displayName = 'TextShared';
-export default TextShared;

package/src/components/to_consolidate/card.tsx

@@ -20,14 +20,14 @@ export const cardClassNames = {
 interface TransientCardProps {
     disabled?: boolean,
     shadowless?: boolean,
-};
+}
 
 interface RegularCardProps {
     caption?: React.ReactNode;
     description?: React.ReactNode;
     actions?: React.ReactNode;
     children: React.ReactNode;
-};
+}
 
 export type StyledCardProps = WithTransientProps<TransientCardProps>;
 export type CardProps = TransientCardProps & RegularCardProps & BoxProps;

package/src/components/to_consolidate/markdown.tsx

@@ -14,7 +14,7 @@ import { LinkIcon } from '@apify/ui-icons';
 import type { UiThemeOption } from '../../design_system/theme.js';
 import { theme } from '../../design_system/theme.js';
 import { useCopyToClipboard } from '../../utils/index.js';
-import { CodeBlock, OneLineCode, inlineCodeStyles } from '../code/index.js';
+import { CodeBlock, inlineCodeStyles, OneLineCode } from '../code/index.js';
 import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer/utils.js';
 
 interface StyledReadmeProps {
@@ -460,6 +460,7 @@ interface ParagraphRendererProps extends React.HTMLAttributes<HTMLParagraphEleme
 const ParagraphRenderer = ({ node, ...props }: ParagraphRendererProps) => {
     // We enable embedded video only is surrounded by new lines (will be rendered as only child in paragraph)
     node?.children.forEach((child) => {
+        // eslint-disable-next-line no-param-reassign
         if (child.tagName === 'a') child.properties.enableEmbeddedVideo = node.children.length === 1; // This means the link is the only child
     });
     const child = node?.children[0];

package/src/design_system/generate_color_definitions.js

@@ -1,4 +1,4 @@
-import { readFileSync } from 'fs';
+import { readFileSync } from 'node:fs';
 
 const code = readFileSync('./src/design_system/supernova_color_tokens.json', 'utf-8');
 
@@ -29,7 +29,7 @@ const generateColorDefinitions = (themeVariant) => {
     for (const [semanticCategory, palette] of Object.entries(mergedPalette)) {
         for (const [key, { value }] of Object.entries(palette)) {
             colorDefinitions.push(
-                // eslint-disable-next-line max-len
+
                 `${getColorPropertyName(semanticCategory, key)}: ${value.startsWith('#') ? value : getObjectValueByPath(colorsDefinitions[themeVariant], value.slice(1, -1)).value};`,
             );
         }
@@ -39,5 +39,6 @@ const generateColorDefinitions = (themeVariant) => {
 };
 
 ['light', 'dark'].forEach((themeVariant) => {
-    console.log(`\n*** CSS variables fro ${themeVariant} mode ***\n`, generateColorDefinitions(themeVariant));
+    // eslint-disable-next-line no-console
+    console.log(`\n*** CSS variables from ${themeVariant} mode ***\n`, generateColorDefinitions(themeVariant));
 });

package/src/design_system/theme.ts

@@ -1,12 +1,12 @@
 import { darkTheme, lightTheme } from './colors_theme.js';
 import { colorProperties } from './properties_theme.js';
 import {
-    spaces,
-    radiuses,
-    layouts,
     devices,
-    transitions,
+    layouts,
+    radiuses,
     shadows,
+    spaces,
+    transitions,
 } from './tokens/index.js';
 import { typographyTokens } from './typography_theme.js';
 

package/src/design_system/tokens/spaces.ts

@@ -1,5 +1,3 @@
-export type Size = keyof typeof spaces;
-
 export const spaces = {
     space2: '0.2rem',
     space4: '0.4rem',
@@ -13,3 +11,5 @@ export const spaces = {
     space40: '4rem',
     space80: '8rem',
 } as const;
+
+export type Size = keyof typeof spaces;

package/.eslintrc

@@ -1,41 +0,0 @@
-{
-    "extends": [
-        "@apify/ts",
-        "plugin:react/recommended",
-        "plugin:react-hooks/recommended"
-    ],
-    "ignorePatterns": ["dist/**/*"],
-    "rules": {
-        "react/react-in-jsx-scope": "off",
-        "no-void": "off",
-        "import/extensions": ["error", "always"],
-        "@typescript-eslint/no-explicit-any": "off",
-        "import/no-named-default": "off",
-        "react/display-name": "off",
-        "react-hooks/exhaustive-deps": "error",
-        "@typescript-eslint/consistent-type-imports": "error",
-        "import/order": ["error", {
-            "groups": ["builtin", "external", ["parent", "sibling"], "index", "object"],
-            "alphabetize": { "order": "asc", "caseInsensitive": true },
-            "newlines-between": "always",
-            "pathGroups": [
-                {
-                    "pattern": "@apify/**",
-                    "group": "external",
-                    "position": "after"
-                },
-                {
-                    "pattern": "@apify-packages/**",
-                    "group": "external",
-                    "position": "after"
-                }
-            ],
-            "pathGroupsExcludedImportTypes": ["builtin"]
-        }]
-    },
-    "parser": "@typescript-eslint/parser",
-    "plugins": ["@typescript-eslint", "sonarjs"],
-    "parserOptions": {
-        "project": "./tsconfig.json"
-    }
-}