@apify/ui-library 0.76.1 → 0.76.2-featcolortokens-178953.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.76.1",
+    "version": "0.76.2-featcolortokens-178953.24+f06f0f5036c",
     "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_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",
+        "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",
         "postpublish": "npm run clean"
     },
     "//": [
@@ -63,8 +63,14 @@
         "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"
     },
-    "gitHead": "b5c0d6f964f7688d81d8f53cd9c5f5b24ba13a93"
+    "files": [
+        "dist",
+        "src",
+        "style"
+    ],
+    "gitHead": "f06f0f5036c000f5f09fb098df165f7cef098298"
 }

package/src/design_system/colors/build_color_tokens.js

@@ -0,0 +1,183 @@
+import StyleDictionary from 'style-dictionary';
+
+const DO_NOT_EXPORT_COMMENT = `/**
+ * Do not edit directly, this file was auto-generated.
+ */
+`;
+
+function toCamelCase(str) {
+    return str
+        .toLowerCase()
+        .replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
+}
+
+/**
+ * Converts an object to a TypeScript literal representation with proper indentation
+ * that can be written to a TypeScript file.
+ */
+function objectToTSLiteral(obj, indentLevel = 0) {
+    const indent = (level) => '    '.repeat(level); // 2-space indent
+
+    if (obj && typeof obj === 'object') {
+        const entries = Object.entries(obj);
+        if (entries.length === 0) return '{}';
+        return `{\n${entries
+            .map(
+                ([key, value]) => `${indent(indentLevel + 1)}${key}: ${objectToTSLiteral(value, indentLevel + 1)}`,
+            )
+            .join('\n')}\n${indent(indentLevel)}}${indentLevel > 0 ? ',' : ''}`;
+    } if (typeof obj === 'string') {
+        return `'${obj}',`;
+    }
+    return String(obj);
+}
+
+/**
+ * Build color tokens for a given theme.
+ * @param theme {string} - The theme to build tokens, 'light' or 'dark'.
+ */
+async function buildTheme(theme) {
+    // Transform to replace 'semantic' and 'decorative' with 'color' in token names
+    // Example: 'semantic-neutral-text' becomes 'color-neutral-text'
+    StyleDictionary.registerTransform({
+        name: 'name/prefix-color-name',
+        type: 'name',
+        transform: (prop) => {
+            return prop.name
+                .replace(/^semantic/, 'color')
+                .replace(/^decorative/, 'color');
+        },
+    });
+
+    // Format to generate typescript file that exports CSS variables as a string
+    // Example: export const tokens = `--color-neutral-text: #000; --color-primary: #fff;`
+    StyleDictionary.registerFormat({
+        name: 'typescript/css-variables-string',
+        format: ({ dictionary, options }) => {
+            const lines = dictionary.allTokens.map((token) => `  --${token.name}: ${token.$value};`);
+            return `${DO_NOT_EXPORT_COMMENT}\nexport const ${options.varName ?? 'tokens'} = \`\n${lines.join('\n')}\n\`;\n`;
+        },
+    });
+
+    // Format to generate typescript file that exports CSS properties as an object
+    // Example: export const tokens = { colorNeutralText: 'var(--color-neutral-text)', colorPrimary: 'var(--color-primary)' };
+    StyleDictionary.registerFormat({
+        name: 'typescript/css-color-properties',
+        format: ({ dictionary, options }) => {
+            const properties = {};
+            dictionary.allTokens.forEach((token) => {
+                const path = token.path.slice(1).map(toCamelCase);
+                let current = properties;
+                for (let i = 0; i < path.length - 1; i++) {
+                    const key = path[i];
+                    if (!(key in current)) {
+                        current[key] = {};
+                    }
+                    current = current[key];
+                }
+                current[path[path.length - 1]] = `var(--${token.name})`;
+            });
+
+            return `${DO_NOT_EXPORT_COMMENT}\nexport const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} as const;\n`;
+        },
+    });
+
+    // Format to generate typescript file that exports CSS colors as an object
+    // Example: export const tokens = { colorNeutralText: '#000', colorPrimary: '#fff' };
+    StyleDictionary.registerFormat({
+        name: 'typescript/css-color-values',
+        format: ({ dictionary, options }) => {
+            const properties = {};
+            dictionary.allTokens.forEach((token) => {
+                const path = token.path.slice(1);
+                const name = toCamelCase(path.join(' '));
+                properties[name] = token.$value;
+            });
+
+            return `${DO_NOT_EXPORT_COMMENT}\nexport const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} as const;\n`;
+        },
+    });
+
+    // Select only tokens for semantic and decorative colors
+    StyleDictionary.registerFilter({
+        name: 'only-colors',
+        filter: (token) => ['Semantic', 'Decorative'].includes(token.path[0]),
+    });
+
+    // Select only tokens for palette colors
+    StyleDictionary.registerFilter({
+        name: 'only-palette',
+        filter: (token) => ['Palette'].includes(token.path[0]),
+    });
+
+    // Select only tokens for theme colors (Decorative and Palette)
+    StyleDictionary.registerFilter({
+        name: 'only-theme',
+        filter: (token) => ['Decorative', 'Palette'].includes(token.path[0]),
+    });
+
+    const styleDictionary = await (new StyleDictionary()).extend({
+        source: [`src/design_system/colors/figma_color_tokens.${theme}.json`],
+        platforms: {
+            ts: {
+                transformGroup: 'scss',
+                transforms: ['name/prefix-color-name'],
+                buildPath: 'src/design_system/colors/generated/',
+                files: [
+                    {
+                        destination: `css_variables.${theme}.ts`,
+                        format: 'typescript/css-variables-string',
+                        filter: 'only-colors',
+                    },
+                    {
+                        destination: `css_variables_palette.${theme}.ts`,
+                        format: 'typescript/css-variables-string',
+                        filter: 'only-palette',
+                    },
+                    {
+                        destination: `properties_theme.ts`,
+                        format: 'typescript/css-color-properties',
+                        filter: 'only-colors',
+                        options: {
+                            varName: 'colorProperties',
+                        },
+                    },
+                    {
+                        destination: `colors_theme.${theme}.ts`,
+                        format: 'typescript/css-color-values',
+                        filter: 'only-theme',
+                        options: {
+                            varName: `${theme}Theme`,
+                        },
+                    },
+                ],
+            },
+            style: {
+                transformGroup: 'scss',
+                transforms: ['name/prefix-color-name'],
+                buildPath: 'style/colors/',
+                files: [
+                    {
+                        destination: `${theme}.scss`,
+                        format: 'scss/map-flat',
+                        mapName: 'tokens',
+                        filter: 'only-colors',
+                    },
+                    {
+                        destination: `palette.${theme}.scss`,
+                        format: 'scss/map-flat',
+                        mapName: 'tokens',
+                        filter: 'only-palette',
+                    },
+                ],
+            },
+        },
+    });
+    await styleDictionary.buildPlatform('ts');
+    await styleDictionary.buildPlatform('style');
+}
+
+await Promise.all([
+    buildTheme('light'),
+    buildTheme('dark'),
+]);