@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/package.json

@@ -0,0 +1,71 @@
+{
+    "name": "@apify/ui-library",
+    "version": "0.51.6-featurepublishuilibrary-0a4729.38266+7412d8cbd3",
+    "description": "React components shared between Apify app and web",
+    "license": "UNLICENSED",
+    "repository": "https://github.com/apify-packages/meta-package-repo",
+    "type": "module",
+    "main": "dist/src/index.js",
+    "types": "dist/src/index.d.ts",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org",
+        "access": "public"
+    },
+    "scripts": {
+        "test": "echo \"Warning: no test specified\" && exit 0",
+        "lint": "eslint . --ext .ts,.tsx",
+        "lint:fix": "eslint . --ext .ts,.tsx  --fix",
+        "build": "npm run clean && npm run compile",
+        "clean": "rimraf ./dist",
+        "compile": "tsc -p tsconfig.build.json",
+        "generate-theme": "node ./src/codemods/generate_color_theme_files.mjs && node src/codemods/generate_color_property_tokens.mjs && node src/codemods/generate_typograpy_tokens_files.mjs  && npm run lint:fix",
+        "generate-color-definition": "node ./src/design_system/generate_color_definitions.js",
+        "postpublish": "npm run clean"
+    },
+    "//": [
+        "Storybook for the components lives in a separate package components-storybook.",
+        "It's not nice, but helps us to get around the problem of multiple react instances."
+    ],
+    "dependencies": {
+        "@apify/icons": "^0.40.5-featurepublishuilibrary-0a4729.38266+7412d8cbd3",
+        "@apify/log": "^2.5.11",
+        "@apify/ui-icons": "^0.2.2-featurepublishuilibrary-0a4729.38266+7412d8cbd3",
+        "@floating-ui/react": "^0.26.2",
+        "clsx": "^2.0.0",
+        "dayjs": "1.11.9",
+        "fast-average-color": "^9.4.0",
+        "history": "^5.3.0",
+        "lodash": "^4.17.21",
+        "query-string": "^8.1.0",
+        "react-markdown": "^8.0.5",
+        "react-syntax-highlighter": "^15.5.0",
+        "rehype-raw": "^6.1.1",
+        "rehype-sanitize": "^6.0.0",
+        "remark-gfm": "^3.0.1",
+        "remark-toc": "8.0.1",
+        "slugify": "^1.6.6"
+    },
+    "peerDependencies": {
+        "react": "17.x || 18.x",
+        "react-dom": "17.x || 18.x",
+        "styled-components": "^5.3.3"
+    },
+    "devDependencies": {
+        "@apify/eslint-config-ts": "^0.4.1",
+        "@types/lodash": "^4.14.200",
+        "@types/node": "^22.10.5",
+        "@types/react": "^18.2.74",
+        "@types/react-syntax-highlighter": "^15.5.9",
+        "@types/styled-components": "^5.1.34",
+        "@typescript-eslint/eslint-plugin": "^5.62.0",
+        "@typescript-eslint/parser": "^5.62.0",
+        "eslint": "^8.45.0",
+        "eslint-plugin-import": "2.26.0",
+        "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-sonarjs": "^1.0.3",
+        "recast": "^0.23.9",
+        "typescript": "^5.1.6"
+    },
+    "gitHead": "7412d8cbd301449ad5fa482fe4e558a053396ad5"
+}

package/src/codemods/generate_color_property_tokens.mjs

@@ -0,0 +1,97 @@
+import { readFileSync, writeFileSync } from 'fs';
+
+import { print, types } from 'recast';
+
+const { builders } = types;
+
+const code = readFileSync('./src/design_system/supernova_color_tokens.json', 'utf-8');
+
+const lightColorTokens = JSON.parse(code).light;
+
+const getObjectValueByPath = (obj, path) => {
+    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+};
+
+const getColorPropertyName = (semanticCategory, property) => {
+    const semanticColorName = `${property.split(/[_ ]/).map((semanticPartName) => semanticPartName.toLowerCase()).join('-')}`;
+
+    // lower case and replace spaces with dashes
+    const semanticCategoryName = semanticCategory.toLowerCase().split(' ').join('-');
+
+    return `--color-${semanticCategoryName}-${semanticColorName}`;
+};
+
+const generateColorPropertyTokens = (supernovaColorsDefinitions) => {
+    const mergedPalettes = { ...supernovaColorsDefinitions.Semantic, ...supernovaColorsDefinitions.Decorative };
+
+    const colorTheme = {};
+    for (const [category, palette] of Object.entries(mergedPalettes)) {
+        // convert to camelCase if there are multiple words in the category name
+        const categoryName = category
+            .split(' ')
+            .map((word, i) => (i === 0
+                ? word.toLocaleLowerCase()
+                : `${word.charAt(0).toUpperCase()}${word.slice(1)}`),
+            )
+            .join('');
+        colorTheme[categoryName] = {};
+
+        for (const [key, { value }] of Object.entries(palette)) {
+            const [firstPart, ...rest] = key.split(' ');
+            const propertyName = `${firstPart.toLowerCase()}${rest.join('')}`;
+
+            const hexLocator = value.slice(1, -1);
+            const hex = value.startsWith('#') ? value : getObjectValueByPath(supernovaColorsDefinitions, hexLocator)?.value;
+
+            colorTheme[categoryName][propertyName] = {
+                variable: `var(${getColorPropertyName(category, key)})`,
+                hex,
+            };
+        }
+    }
+
+    return colorTheme;
+};
+
+const createPropertyDeclaration = (tokens) => {
+    const paletteArray = [];
+
+    for (const [paletteName, paletteProps] of [...Object.entries(tokens)]) {
+        const paletteItemsArray = [];
+
+        for (const [paletteItemName, { variable, hex }] of Object.entries(paletteProps)) {
+            const objectPropertyItem = builders.property(
+                'init',
+                builders.identifier(paletteItemName),
+                builders.literal(variable),
+            );
+
+            objectPropertyItem.comments = [builders.commentBlock(` ${hex} `)];
+
+            paletteItemsArray.push(objectPropertyItem);
+        }
+
+        paletteArray.push(builders.property(
+            'init',
+            builders.identifier(paletteName),
+            builders.objectExpression(paletteItemsArray),
+        ));
+    }
+
+    return builders.exportNamedDeclaration(
+        builders.variableDeclaration('const', [
+            builders.variableDeclarator(
+                builders.identifier('colorProperties'),
+                builders.tsAsExpression(builders.objectExpression(paletteArray), builders.tsTypeReference(builders.identifier('const'))),
+            )]),
+        [],
+    );
+};
+
+const generatedTokens = generateColorPropertyTokens(lightColorTokens);
+
+const lightThemeDeclaration = createPropertyDeclaration(generatedTokens);
+
+const printedCode = print(builders.program([lightThemeDeclaration])).code;
+
+writeFileSync('./src/design_system/properties_theme.ts', printedCode);

package/src/codemods/generate_color_theme_files.mjs

@@ -0,0 +1,46 @@
+import { readFileSync, writeFileSync } from 'fs';
+
+import { print, types } from 'recast';
+
+const { builders } = types;
+
+const code = readFileSync('./src/design_system/supernova_color_tokens.json', 'utf-8');
+
+const colorTokens = JSON.parse(code);
+
+const lightThemeProperty = colorTokens.light;
+const darkThemeProperty = colorTokens.dark;
+
+function createThemeDeclaration(themeProperty, variableName) {
+    const paletteArray = [];
+
+    const { Decorative, Palette } = themeProperty;
+
+    for (const [paletteName, paletteProps] of [...Object.entries(Palette), ...Object.entries(Decorative)]) {
+        for (const [paletteItemName, paletteItem] of Object.entries(paletteProps)) {
+            paletteArray.push(
+                builders.property(
+                    'init',
+                    builders.identifier(`${paletteName.toLowerCase()}${paletteItemName}`),
+                    builders.literal(paletteItem.value),
+                ),
+            );
+        }
+    }
+
+    return builders.exportNamedDeclaration(
+        builders.variableDeclaration('const', [
+            builders.variableDeclarator(
+                builders.identifier(variableName),
+                builders.tsAsExpression(builders.objectExpression(paletteArray), builders.tsTypeReference(builders.identifier('const'))),
+            )]),
+        [],
+    );
+}
+
+const lightThemeDeclaration = createThemeDeclaration(lightThemeProperty, 'lightTheme');
+const darkThemeDeclaration = createThemeDeclaration(darkThemeProperty, 'darkTheme');
+
+const printedCode = print(builders.program([lightThemeDeclaration, darkThemeDeclaration])).code;
+
+writeFileSync('./src/design_system/colors_theme.ts', printedCode);

package/src/codemods/generate_typograpy_tokens_files.mjs

@@ -0,0 +1,136 @@
+import { readFileSync, writeFileSync } from 'fs';
+
+import { print, types } from 'recast';
+
+const { builders } = types;
+
+const code = readFileSync('./src/design_system/supernova_typography_tokens.json', 'utf-8');
+
+const fontFamilies = {
+    inter: `Inter, sans-serif`,
+    gtWalsheim: `'GT-Walsheim-Regular', sans-serif`,
+    sfPro: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`,
+    ibmPlexMono: "'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+};
+
+const transformTokenProperties = (token) => {
+    const {
+        fontWeight,
+        fontSize,
+        lineHeight,
+        fontFamily,
+    } = token.value;
+
+    // Convert font family name to font family value
+    let fontFamilyValue;
+    const fontFamilyNameParts = fontFamily.split(' '); // each word in font family name is a separate part
+
+    if (fontFamilyNameParts.length === 1) {
+        fontFamilyValue = fontFamilies[fontFamilyNameParts[0].toLowerCase()];
+    } else {
+        const fontFamilyIndex = fontFamilyNameParts.map((fontFamilyNamePart, i) => {
+            if (i === 0) return fontFamilyNamePart.toLowerCase();
+            return fontFamilyNamePart;
+        }).join('');
+
+        fontFamilyValue = fontFamilies[fontFamilyIndex];
+    }
+
+    return `font-size: ${Number(fontSize) / 10}rem; line-height: ${Number(lineHeight) / 10}rem; font-weight: ${fontWeight}; font-family: ${fontFamilyValue};`;
+};
+
+const transformTokenName = (tokenName) => {
+    const [token, variant] = tokenName.split('-');
+    return (variant ? `${token}${variant.charAt(0).toUpperCase() + variant.slice(1)}` : token);
+};
+
+const extractDeviceTokensDefinitions = (tokens) => {
+    return Object.keys(tokens).reduce((acc, tokenName) => {
+        const properTokenName = transformTokenName(tokenName);
+        acc[properTokenName] = transformTokenProperties(tokens[tokenName], fontFamilies);
+        return acc;
+    }, {});
+};
+
+const extractTokensDefinitions = (sharedTokens) => {
+    const sharedTokensDefinition = {
+        mobile: {},
+        tablet: {},
+        desktop: {},
+    };
+
+    Object.entries(sharedTokens).forEach(([tokenName, tokenValue]) => {
+        if ((tokenName === 'mobile' || tokenName === 'tablet') && typeof tokenValue !== 'string') {
+            sharedTokensDefinition[tokenName] = extractDeviceTokensDefinitions(tokenValue, fontFamilies);
+            return;
+        }
+
+        const properTokenName = transformTokenName(tokenName);
+        const transformedTokenProperties = transformTokenProperties(tokenValue, fontFamilies);
+        sharedTokensDefinition.desktop[properTokenName] = transformedTokenProperties;
+        sharedTokensDefinition.mobile[properTokenName] ||= transformedTokenProperties;
+        sharedTokensDefinition.tablet[properTokenName] ||= transformedTokenProperties;
+    });
+
+    return sharedTokensDefinition;
+};
+
+const globalTokens = JSON.parse(code).global;
+
+const sharedTokens = extractTokensDefinitions(globalTokens.shared);
+const marketingTokens = extractTokensDefinitions(globalTokens.marketing);
+const contentTokens = extractTokensDefinitions(globalTokens.content);
+
+const tokensForCodeGeneration = {
+    shared: sharedTokens,
+    marketing: marketingTokens,
+    content: contentTokens,
+};
+
+const createTokensCode = (tokens) => {
+    const variantsArray = [];
+    for (const [tokenVariant, tokenVariantItems] of Object.entries(tokens)) {
+        const devicesArray = [];
+
+        for (const [device, deviceTokens] of Object.entries(tokenVariantItems)) {
+            const deviceItemsArray = [];
+
+            for (const [tokenName, tokenValue] of Object.entries(deviceTokens)) {
+                deviceItemsArray.push(builders.property(
+                    'init',
+                    builders.identifier(tokenName),
+                    builders.literal(tokenValue),
+                ));
+            }
+            devicesArray.push(builders.property(
+                'init',
+                builders.identifier(device),
+                builders.objectExpression(deviceItemsArray),
+            ));
+        }
+
+        variantsArray.push(builders.property(
+            'init',
+            builders.identifier(tokenVariant),
+            builders.objectExpression(devicesArray),
+        ));
+    }
+
+    const exportDeclaration = builders.exportNamedDeclaration(
+        builders.variableDeclaration('const', [
+            builders.variableDeclarator(
+                builders.identifier('typographyTokens'),
+                builders.tsAsExpression(builders.objectExpression(variantsArray), builders.tsTypeReference(builders.identifier('const'))),
+            )]),
+        [],
+    );
+
+    // Add a comment to the export declaration
+    exportDeclaration.comments = [builders.commentBlock(' eslint-disable max-len ')];
+
+    return exportDeclaration;
+};
+
+const printedCode = print(builders.program([createTokensCode(tokensForCodeGeneration)])).code;
+
+writeFileSync('./src/design_system/typography_theme.ts', printedCode);

package/src/components/action_link.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ArrowLeft16, ArrowRight16 } from '@apify/icons';
+
+import { theme } from '../design_system/theme';
+import { Box } from './box';
+import { Link, type LinkProps } from './link';
+import { Heading } from './text';
+
+const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
+    display: inline-flex;
+    align-items: center;
+    color: ${theme.color.neutral.text};
+
+    svg {
+        transition: transform 0.2s ease-in-out;
+    }
+
+    &:hover {
+        svg {
+            transform: translate(${({ $isBackLink }) => ($isBackLink ? -3 : 3)}px, 0);
+        }
+    }
+`;
+
+export const ActionLink: React.FC<LinkProps> = ({
+    children,
+    as,
+    ...rest
+}) => {
+    return (
+        <StyledGuidepost
+            forwardedAs={as || Link}
+            $isBackLink={false}
+            {...rest}
+        >
+            <Heading as='span' type='titleM'>{children}</Heading>
+            <ArrowRight16 />
+        </StyledGuidepost>
+    );
+};
+
+export const BackLink: React.FC<LinkProps> = ({
+    children,
+    as,
+    ...rest
+}) => {
+    return (
+        <StyledGuidepost
+            forwardedAs={as || Link}
+            $isBackLink={true}
+            {...rest}
+        >
+            <ArrowLeft16 />
+            <Heading as='span' type='titleM'>{children}</Heading>
+        </StyledGuidepost>
+    );
+};

package/src/components/actor_template_card.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../design_system/theme';
+import { TextBaseComponent } from './text/text_base';
+import { VerticalTile } from './tile';
+
+interface ActorTemplateCardProps {
+    id: string;
+    label: string;
+    description: string;
+    icons: React.ReactNode[];
+}
+
+const WrapperClasses = {
+    TEMPLATE_CARD_IMAGES: 'TemplateCard-Images',
+    TEMPLATE_CARD_TEXT: 'TemplateCard-Text',
+};
+
+const Text = styled(TextBaseComponent)`
+    ${theme.typography.marketing.mobile.bodyM}
+    color: ${theme.color.neutral.textMuted};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+
+    @media ${theme.layout.tablet} {
+        ${theme.typography.marketing.tablet.bodyM}
+    }
+
+    @media ${theme.layout.desktop} {
+        ${theme.typography.marketing.desktop.bodyM}
+    }
+`;
+
+const Heading = styled(TextBaseComponent)`
+    ${theme.typography.marketing.mobile.titleXs}
+    color: ${theme.color.neutral.text};
+
+    @media ${theme.layout.tablet} {
+        ${theme.typography.marketing.tablet.titleXs}
+    }
+
+    @media ${theme.layout.desktop} {
+        ${theme.typography.marketing.desktop.titleXs}
+    }
+`;
+
+const TemplateCardContentWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    flex: 1 0 0;
+    gap: ${theme.space.space16};
+
+    .${WrapperClasses.TEMPLATE_CARD_IMAGES} {
+        display: flex;
+        align-items: flex-start;
+        gap: ${theme.space.space16};
+    }
+
+    .${WrapperClasses.TEMPLATE_CARD_TEXT} {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: ${theme.space.space4};
+    }
+`;
+
+export const ActorTemplateCard: React.FC<ActorTemplateCardProps> = ({
+    id,
+    label,
+    description,
+    icons,
+}) => {
+    const templateCardContent = (
+        <TemplateCardContentWrapper>
+            <div className={WrapperClasses.TEMPLATE_CARD_IMAGES}>
+                {icons}
+            </div>
+            <div className={WrapperClasses.TEMPLATE_CARD_TEXT}>
+                <Heading>{label}</Heading>
+                <Text>{description}</Text>
+            </div>
+        </TemplateCardContentWrapper>
+    );
+
+    return (
+        <VerticalTile
+            id={`actor-template-card-${id}`}
+            content={templateCardContent}
+            isClickable
+        />
+    );
+};

package/src/components/badge.tsx

@@ -0,0 +1,144 @@
+import React, { forwardRef } from 'react';
+import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
+
+import type { IconComponent, IconSize } from '@apify/ui-icons';
+
+import { theme } from '../design_system/theme';
+import type { WithTransientProps } from '../type_utils';
+import { type RegularBoxProps, type MarginSpacingProps, Box } from './box';
+
+type BadgeSize = typeof BADGE_SIZES[number];
+
+export const BADGE_SIZES = ['medium', 'small'] as const;
+
+const BADGE_ICON_SIZES = {
+    medium: '16',
+    small: '12',
+} satisfies Record<BadgeSize, IconSize>;
+
+const badgeSizeStyle = {
+    medium: ($code) => css`
+        padding: ${theme.space.space4} ${theme.space.space8};
+        border-radius: ${theme.radius.radius6};
+        ${$code
+        ? theme.typography.shared.desktop.codeMMedium
+        : theme.typography.shared.desktop.bodyMMedium
+        }
+    `,
+    small: ($code) => css`
+        height: 2rem;
+        padding: ${theme.space.space2} ${theme.space.space6};
+        border-radius: ${theme.radius.radius4};
+        ${$code
+        ? theme.typography.shared.desktop.codeSMedium
+        : theme.typography.shared.desktop.bodySMedium
+        }
+    `,
+} satisfies Record<BadgeSize, (code: boolean) => FlattenSimpleInterpolation>;
+
+type BadgeVariant = typeof BADGE_VARIANTS[number];
+
+export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'] as const;
+
+const badgeVariantStyle = {
+    neutral: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.background};
+        box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
+      `,
+    neutral_muted: css`
+      color: ${theme.color.neutral.text};
+      fill: ${theme.color.neutral.text};
+      background: ${theme.color.neutral.chipBackground};
+    `,
+    neutral_subtle: css`
+      color: ${theme.color.neutral.textSubtle};
+      fill: ${theme.color.neutral.textSubtle};
+      background: ${theme.color.neutral.backgroundSubtle};
+    `,
+    primary_black: css`
+        color: ${theme.color.primaryBlack.chipText};
+        fill: ${theme.color.primaryBlack.chipText};
+        background: ${theme.color.primaryBlack.background};
+      `,
+    primary_blue: css`
+      color: ${theme.color.primary.chipText};
+      fill: ${theme.color.primaryBlack.chipText};
+      background: ${theme.color.primary.background};
+    `,
+    success: css`
+      color: ${theme.color.success.chipText};
+      fill: ${theme.color.success.chipText};
+      background: ${theme.color.success.background};
+    `,
+    warning: css`
+      color: ${theme.color.warning.chipText};
+      fill: ${theme.color.warning.chipText};
+      background: ${theme.color.warning.background};
+    `,
+    danger: css`
+      color: ${theme.color.danger.chipText};
+      fill: ${theme.color.danger.chipText};
+      background: ${theme.color.danger.background};
+    `,
+} satisfies Record<BadgeVariant, FlattenSimpleInterpolation>;
+
+type StyledBadgeProps = WithTransientProps<
+  Required<Pick<BadgeProps, 'size' | 'variant' | 'code'>>
+>;
+
+const StyledBadge = styled(Box)<StyledBadgeProps>`
+  ${({ $size, $code }) => badgeSizeStyle[$size]($code)};
+  ${({ $variant }) => badgeVariantStyle[$variant]};
+
+  /* Static styles */
+  width: fit-content;
+  border: none;
+  outline: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  gap: ${theme.space.space4};
+`;
+
+export type BadgeProps = Omit<RegularBoxProps, 'onClick'> & MarginSpacingProps & {
+  as?: Exclude<React.ElementType, 'a' | 'button'>;
+  size?: BadgeSize;
+  variant?: BadgeVariant;
+  LeadingIcon?: IconComponent;
+  code?: boolean;
+};
+
+/**
+ * Component for displaying non-interactive chip descendant.
+ */
+export const Badge = forwardRef(
+    ({
+        size = 'small',
+        variant = 'neutral',
+        LeadingIcon,
+        children,
+        code = false,
+        ...props
+    }: BadgeProps,
+    ref,
+    ) => {
+        return (
+            <StyledBadge
+                ref={ref}
+                $size={size}
+                $variant={variant}
+                $code={code}
+                {...props}
+            >
+                {LeadingIcon && <LeadingIcon size={BADGE_ICON_SIZES[size]} />}
+                {children}
+            </StyledBadge>
+        );
+    },
+);
+
+Badge.displayName = 'Badge';