@apify/ui-library 0.74.2-featcolortokens-178953.24 → 0.76.0

package/eslint.config.mjs

@@ -0,0 +1,44 @@
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import sonarjs from 'eslint-plugin-sonarjs';
+
+import apifyJestConfig from '@apify/eslint-config/jest.js';
+import apifyTypescriptConfig from '@apify/eslint-config/ts.js';
+
+// eslint-disable-next-line import/no-default-export
+export default [
+    { ignores: ['**/dist'] }, // Ignores need to happen first
+    ...apifyTypescriptConfig,
+    ...apifyJestConfig,
+
+    {
+        files: ['**/*.ts', '**/*.tsx'],
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+        ...react.configs.flat.recommended,
+    },
+    {
+        plugins: {
+            sonarjs,
+            'react-hooks': reactHooks,
+        },
+        languageOptions: {
+            sourceType: 'module',
+
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        rules: {
+            'react/react-in-jsx-scope': 'off',
+            'no-void': 'off',
+            'react/display-name': 'off',
+            'react-hooks/exhaustive-deps': 'error',
+            ...reactHooks.configs.recommended.rules,
+        },
+    },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.74.2-featcolortokens-178953.24+d785ae43897",
+    "version": "0.76.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -17,8 +17,8 @@
         "build": "npm run clean && npm run compile",
         "clean": "rimraf ./dist",
         "compile": "tsc -p tsconfig.build.json",
-        "generate-theme": "node src/codemods/generate_typograpy_tokens_files.mjs  && npm run lint:fix",
-        "build-color-tokens": "node src/design_system/colors/build_color_tokens.js",
+        "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"
     },
     "//": [
@@ -63,14 +63,8 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-sonarjs": "^1.0.3",
         "recast": "^0.23.9",
-        "style-dictionary": "^4.4.0",
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "files": [
-        "dist",
-        "src",
-        "style"
-    ],
-    "gitHead": "d785ae43897eefe9e3152ed27bb293f20694c389"
+    "gitHead": "2a8570db705a7b5bf6054580ab63bb5babfc23ca"
 }

package/src/codemods/generate_color_property_tokens.mjs

@@ -0,0 +1,98 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+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,47 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+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/components/code/code_block/code_block_with_tabs.tsx

@@ -74,6 +74,8 @@ type CodeBlockWithTabsProps = SharedBoxProps & {
     codeBlockProps: SharedCodeBlockProps;
     currentTabKey: CodeBlockTabKey;
     tabs: CodeBlockTabProps[];
+    // Optional prop to set the selected tab, does not influence the content of the code block, used to improve interactivity
+    optimisticCurrentTabKey?: CodeBlockTabKey;
 };
 
 export const CODE_BLOCK_WITH_TABS_CLASSNAMES = {
@@ -190,7 +192,7 @@ const IMG_RESIZE = {
     height: 20,
 };
 
-export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, tabs, ...props }: CodeBlockWithTabsProps) => {
+export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, tabs, optimisticCurrentTabKey, ...props }: CodeBlockWithTabsProps) => {
     const { generateProxyImageUrl } = useSharedUiDependencies();
     const currentTab = tabs.find((tab) => tab.key === currentTabKey) ?? tabs[0];
 
@@ -199,7 +201,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
             <div className={CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS}>
                 {tabs.map((tab) => {
                     const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
-                    const selected = tab.key === currentTab?.key;
+                    const selected = (optimisticCurrentTabKey ?? currentTabKey) === tab.key;
 
                     const commonProps = {
                         className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),

package/src/components/readme_renderer/index.ts

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

package/src/components/readme_renderer/table_of_contents.tsx

@@ -14,6 +14,8 @@ import { Link } from '../link.js';
 import { Text } from '../text/index.js';
 import { cleanMarkdown, slugifyHeadingChildren } from './utils.js';
 
+export const useShowTableOfContents = (markdown: string | null | undefined) => useMemo(() => markdown && !!markdown.match(/^(#{1,3})\s.+$/m), [markdown]);
+
 const TOC_HEADING_ID = 'Contents';
 
 const StyledTOCLink = styled(Text)`

package/src/design_system/{colors/generated/colors_theme.light.ts → colors_theme.ts}

@@ -1,44 +1,4 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
 export const lightTheme = {
-    roseLight: '#f483b5',
-    roseBase: '#c6387d',
-    roseDark: '#781552',
-    roseText: '#b6006b',
-    buttercupLight: '#ffdd96',
-    buttercupBase: '#f0b21b',
-    buttercupDark: '#c37319',
-    buttercupText: '#a65d00',
-    paprikaLight: '#e44467',
-    paprikaBase: '#9b0238',
-    paprikaDark: '#4a0018',
-    paprikaText: '#ba0044',
-    tealLight: '#a7f2ed',
-    tealBase: '#30c0bb',
-    tealDark: '#297774',
-    tealText: '#018181',
-    indigoLight: '#a1b7ff',
-    indigoBase: '#5d85e1',
-    indigoDark: '#365494',
-    indigoText: '#2563c1',
-    slateLight: '#c1c5e1',
-    slateBase: '#8490c4',
-    slateDark: '#525c85',
-    slateText: '#566087',
-    coralLight: '#ffc89f',
-    coralBase: '#fa8136',
-    coralDark: '#bb4511',
-    coralText: '#c74000',
-    lavenderLight: '#bf97ed',
-    lavenderBase: '#6a14de',
-    lavenderDark: '#330276',
-    lavenderText: '#6e00f4',
-    bambooLight: '#64cda5',
-    bambooBase: '#12966f',
-    bambooDark: '#195d46',
-    bambooText: '#007455',
     neutral0: '#ffffff',
     neutral25: '#f8f9fc',
     neutral50: '#f3f4fa',
@@ -107,4 +67,147 @@ export const lightTheme = {
     blue500: '#1672eb',
     blue600: '#1a57da',
     blue700: '#224ed5',
+    roseLight: '#f483b5',
+    roseBase: '#c6387d',
+    roseDark: '#781552',
+    roseText: '#b6006b',
+    buttercupLight: '#ffdd96',
+    buttercupBase: '#f0b21b',
+    buttercupDark: '#c37319',
+    buttercupText: '#a65d00',
+    paprikaLight: '#e44467',
+    paprikaBase: '#9b0238',
+    paprikaDark: '#4a0018',
+    paprikaText: '#ba0044',
+    tealLight: '#a7f2ed',
+    tealBase: '#30c0bb',
+    tealDark: '#297774',
+    tealText: '#018181',
+    indigoLight: '#a1b7ff',
+    indigoBase: '#5d85e1',
+    indigoDark: '#365494',
+    indigoText: '#2563c1',
+    slateLight: '#c1c5e1',
+    slateBase: '#8490c4',
+    slateDark: '#525c85',
+    slateText: '#566087',
+    coralLight: '#ffc89f',
+    coralBase: '#fa8136',
+    coralDark: '#bb4511',
+    coralText: '#c74000',
+    lavenderLight: '#bf97ed',
+    lavenderBase: '#6a14de',
+    lavenderDark: '#330276',
+    lavenderText: '#6e00f4',
+    bambooLight: '#64cda5',
+    bambooBase: '#12966f',
+    bambooDark: '#195d46',
+    bambooText: '#007455',
+} as const;
+
+export const darkTheme = {
+    neutral0: '#ffffff',
+    neutral25: '#f8f9fc',
+    neutral50: '#f3f4fa',
+    neutral75: '#eef0f8',
+    neutral100: '#e1e3ed',
+    neutral150: '#d1d5e4',
+    neutral200: '#c1c6d9',
+    neutral250: '#b2b8cc',
+    neutral300: '#a5abc0',
+    neutral350: '#989eb3',
+    neutral400: '#8c93a8',
+    neutral450: '#7d8499',
+    neutral500: '#6e758a',
+    neutral550: '#646a7f',
+    neutral600: '#575d71',
+    neutral650: '#4d5265',
+    neutral700: '#414758',
+    neutral750: '#343847',
+    neutral775: '#2d313e',
+    neutral800: '#2a2d39',
+    neutral850: '#252832',
+    neutral875: '#1e2027',
+    neutral900: '#1a1b21',
+    neutral950: '#101114',
+    yellow25: '#fcdc73',
+    yellow50: '#ffd761',
+    yellow75: '#f9ce4b',
+    yellow100: '#f5bc38',
+    yellow200: '#cf9117',
+    yellow300: '#a56909',
+    yellow350: '#8a4f05',
+    yellow400: '#6d3806',
+    yellow500: '#5d2e0e',
+    yellow600: '#3f1b07',
+    yellow700: '#301806',
+    red25: '#f5a790',
+    red50: '#fe9e8a',
+    red75: '#ff8770',
+    red100: '#ff7157',
+    red200: '#ef6045',
+    red300: '#cf4436',
+    red350: '#aa3229',
+    red400: '#812420',
+    red500: '#672523',
+    red600: '#40191b',
+    red700: '#381719',
+    green25: '#74d584',
+    green50: '#6ccd7c',
+    green75: '#55c06a',
+    green100: '#3bb358',
+    green200: '#23a64a',
+    green300: '#068a35',
+    green350: '#006e29',
+    green400: '#00531e',
+    green500: '#14441f',
+    green600: '#0f2b14',
+    green700: '#09260f',
+    blue25: '#92C0ff',
+    blue50: '#8ebcff',
+    blue75: '#80a9ff',
+    blue100: '#6f9dff',
+    blue200: '#5990ff',
+    blue300: '#3970d7',
+    blue350: '#295cbb',
+    blue400: '#194594',
+    blue500: '#1a3a78',
+    blue600: '#0d2550',
+    blue700: '#151d34',
+    roseLight: '#e88bb3',
+    roseBase: '#b8487b',
+    roseDark: '#6f234f',
+    roseText: '#ed8bb5',
+    buttercupLight: '#f9deaa',
+    buttercupBase: '#e5b557',
+    buttercupDark: '#b87939',
+    buttercupText: '#ebbf6c',
+    paprikaLight: '#e26c7d',
+    paprikaBase: '#9e384b',
+    paprikaDark: '#511d27',
+    paprikaText: '#f67c8d',
+    tealLight: '#aef0f5',
+    tealBase: '#58bcc4',
+    tealDark: '#408288',
+    tealText: '#62c1c8',
+    indigoLight: '#a8b7ed',
+    indigoBase: '#6d85ca',
+    indigoDark: '#425484',
+    indigoText: '#a2b2eb',
+    slateLight: '#c2c5dc',
+    slateBase: '#8690bf',
+    slateDark: '#535c81',
+    slateText: '#afb2c9',
+    coralLight: '#f3ccb0',
+    coralBase: '#f08848',
+    coralDark: '#9a4e2d',
+    coralText: '#f9b27b',
+    lavenderLight: '#b482ed',
+    lavenderBase: '#8148c9',
+    lavenderDark: '#48296f',
+    lavenderText: '#be8af9',
+    bambooLight: '#7acaa9',
+    bambooBase: '#439274',
+    bambooDark: '#305b4a',
+    bambooText: '#65bc99',
 } as const;

package/src/design_system/generate_color_definitions.js

@@ -0,0 +1,44 @@
+import { readFileSync } from 'node:fs';
+
+const code = readFileSync('./src/design_system/supernova_color_tokens.json', 'utf-8');
+
+const colorsDefinitions = JSON.parse(code);
+
+const getObjectValueByPath = (obj, path) => {
+    return path.split('.').reduce((acc, part) => {
+        return 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 generateColorDefinitions = (themeVariant) => {
+    const mergedPalette = {
+        ...colorsDefinitions[themeVariant].Semantic,
+        ...colorsDefinitions[themeVariant].Decorative,
+    };
+
+    const colorDefinitions = [];
+    for (const [semanticCategory, palette] of Object.entries(mergedPalette)) {
+        for (const [key, { value }] of Object.entries(palette)) {
+            colorDefinitions.push(
+
+                `${getColorPropertyName(semanticCategory, key)}: ${value.startsWith('#') ? value : getObjectValueByPath(colorsDefinitions[themeVariant], value.slice(1, -1)).value};`,
+            );
+        }
+    }
+
+    return colorDefinitions.join('\n');
+};
+
+['light', 'dark'].forEach((themeVariant) => {
+    // eslint-disable-next-line no-console
+    console.log(`\n*** CSS variables from ${themeVariant} mode ***\n`, generateColorDefinitions(themeVariant));
+});