@apify/ui-library 0.71.0 → 0.71.1-featcolortokens-178953.56

package/src/codemods/generate_color_property_tokens.mjs

@@ -1,98 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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/design_system/generate_color_definitions.js

@@ -1,44 +0,0 @@
-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));
-});