@pexip/components 19.3.0 → 20.0.0

package/design-tokens/build-scripts/generate-icons.mjs

@@ -1,134 +0,0 @@
-import fs from 'node:fs/promises';
-import path from 'node:path';
-
-import {optimize} from './svgo.mjs';
-import {Content} from './content.mjs';
-
-async function generateSvg(icon) {
-    if (!icon) {
-        return;
-    }
-    const svg = new Content(
-        '<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->',
-    );
-    const {data} = await optimize(icon.graphic, {
-        path: icon.pascalName,
-    });
-    svg.push(data);
-    await fs.writeFile(
-        path.resolve('..', 'generated', 'icons', `${icon.iconName}.svg`),
-        await svg.print('html'),
-    );
-    const declaration = new Content(
-        '// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE',
-    );
-    declaration.push(
-        'import type React from "react";',
-        `const icon: React.FC<React.ComponentProps<'svg'>>;`,
-        'export default icon;',
-    );
-    await fs.writeFile(
-        path.resolve('..', 'generated', 'icons', `${icon.iconName}.svg.d.ts`),
-        await declaration.print('typescript'),
-    );
-}
-
-async function generate(meta) {
-    const collection = meta.reduce((all, icon) => {
-        const [key, size] = icon.pascalName.split('_');
-        all[key] =
-            key in all
-                ? {...all[key], [`size${size}`]: icon}
-                : {[`size${size}`]: icon};
-        return all;
-    }, {});
-    const sortedCollection = Object.entries(collection).sort((a, b) =>
-        a[0].localeCompare(b[0]),
-    );
-
-    const iconImports = new Content(
-        '// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE',
-    );
-    iconImports.push(0, '');
-    iconImports.push(
-        1,
-        'export interface IconSource {',
-        "   size16: React.FC<React.ComponentProps<'svg'>>;",
-        "   size24: React.FC<React.ComponentProps<'svg'>>;",
-        "   size32: React.FC<React.ComponentProps<'svg'>>;",
-        '}',
-        '',
-        'export interface IconCollection {',
-    );
-    iconImports.push(2, 'const collection: IconCollection = {');
-
-    for (const [name, icon] of sortedCollection) {
-        const tiny = icon.size16;
-        const small = icon.size24;
-        const medium = icon.size32;
-        if (tiny) {
-            await generateSvg(tiny);
-            iconImports.push(
-                0,
-                `import ${tiny.pascalName} from './icons/${tiny.iconName}.svg';`,
-            );
-        }
-        if (small) {
-            await generateSvg(small);
-            iconImports.push(
-                0,
-                `import ${small.pascalName} from './icons/${small.iconName}.svg';`,
-            );
-        }
-        if (medium) {
-            await generateSvg(medium);
-            iconImports.push(
-                0,
-                `import ${medium.pascalName} from './icons/${medium.iconName}.svg';`,
-            );
-        }
-        iconImports.push(1, `   ${name}: IconSource;`);
-        iconImports.push(
-            2,
-            `${name}: {size16: ${
-                tiny?.pascalName ?? small?.pascalName ?? medium?.pascalName
-            }, size24: ${
-                small?.pascalName ?? medium?.pascalName ?? tiny?.pascalName
-            }, size32: ${
-                medium?.pascalName ?? small?.pascalName ?? tiny?.pascalName
-            }},`,
-        );
-    }
-
-    iconImports.push(1, '}');
-    iconImports.push(2, '};', '', 'export default collection;');
-
-    await fs.writeFile(
-        path.resolve('..', 'generated', 'Icons.ts'),
-        await iconImports.print('typescript'),
-    );
-}
-
-async function gatherMeta() {
-    const metaFiles = (
-        await fs.readdir(path.resolve('..', 'generated', 'icons'))
-    ).filter(name => name.endsWith('json'));
-
-    const meta = await Promise.all(
-        metaFiles.map(async file =>
-            JSON.parse(
-                await fs.readFile(
-                    path.resolve('..', 'generated', 'icons', file),
-                ),
-            ),
-        ),
-    );
-
-    return meta;
-}
-
-export function generateIcons() {
-    return gatherMeta()
-        .then(generate)
-        .catch(reason => console.log(reason));
-}

package/design-tokens/build-scripts/icons.mjs

@@ -1,7 +0,0 @@
-import {downloadIcons} from './download-icons.mjs';
-import {generateIcons} from './generate-icons.mjs';
-
-export async function getIcons() {
-    await downloadIcons();
-    await generateIcons();
-}

package/design-tokens/build-scripts/index.mjs

@@ -1,60 +0,0 @@
-import {getColors, syncColors} from './colors.mjs';
-import {getIcons} from './icons.mjs';
-import {getFonts, syncFonts} from './fonts.mjs';
-import {getBreakpoints, syncBreakpoints} from './breakpoints.mjs';
-import {RESOURCES_IDS} from './constants.mjs';
-import {exportVariables, getVariables} from './variables.mjs';
-
-if (!process.env.ACCESS_TOKEN) {
-    throw new Error('Provide figma ACCESS_TOKEN environment variable.');
-}
-
-async function buildTokens() {
-    const types = (
-        process.argv[2] ?? 'colors,icons,fonts,breakpoints,variables'
-    ).split(',');
-    try {
-        console.log(`Will fetch "${types.join('", "')}"...`);
-        if (types.includes('colors')) {
-            console.log('Fetching colors...');
-            const colors = await getColors();
-            syncColors(colors);
-            console.log(colors);
-        }
-        if (types.includes('icons')) {
-            console.log('Fetching icons...');
-            await getIcons();
-            console.log('Icons downloaded.');
-        }
-        if (types.includes('fonts')) {
-            console.log('Fetching desktop fonts...');
-            const fonts = await getFonts(RESOURCES_IDS.FONTS);
-            syncFonts(fonts, 'fonts.desktop.variables.scss', 'desktop');
-            console.log(fonts);
-            console.log('Desktop fonts downloaded');
-
-            console.log('Fetching mobile fonts...');
-            const fontsMobile = await getFonts(RESOURCES_IDS.FONTS_MOBILE);
-            syncFonts(fontsMobile, 'fonts.mobile.variables.scss', 'mobile');
-            console.log(fontsMobile);
-            console.log('Mobile fonts downloaded');
-        }
-        if (types.includes('breakpoints')) {
-            const breakpoints = getBreakpoints();
-            syncBreakpoints(breakpoints);
-            console.log(breakpoints);
-            console.log('Breakpoints generated');
-        }
-        if (types.includes('variables')) {
-            const variables = await getVariables();
-            exportVariables(variables);
-            console.log(variables);
-            console.log('Variables generated');
-        }
-        console.log('All done');
-    } catch (e) {
-        console.error('Build tokens failed', e);
-    }
-}
-
-buildTokens();

package/design-tokens/build-scripts/svgo.mjs

@@ -1,61 +0,0 @@
-import {optimize as svgoOptimize} from 'svgo';
-
-const TOKEN_KEY = 'data-token-name';
-
-function addTokenId(item, ...rest) {
-    const svg = item.children[0];
-    if (svg.name !== 'svg') return;
-
-    const [params] = rest.reverse();
-    svg.attributes[TOKEN_KEY] = params.path;
-}
-
-const config = {
-    plugins: [
-        {
-            name: 'preset-default',
-        },
-        {
-            name: 'convertColors',
-            params: {
-                currentColor: true,
-            },
-        },
-        {
-            type: 'perItem',
-            name: 'addTokenId',
-            description: 'Token ids to be recognized for storybook',
-            fn: addTokenId,
-        },
-        {
-            name: 'removeViewBox',
-            active: false,
-        },
-        {
-            name: 'removeDimensions',
-            active: true,
-        },
-        {
-            name: 'prefixIds',
-            active: true,
-            params: {
-                prefix(_, {path}) {
-                    return path;
-                },
-            },
-        },
-        {
-            name: 'addAttributesToSVGElement',
-            params: {
-                attributes: [
-                    {
-                        'aria-hidden': true,
-                    },
-                ],
-            },
-        },
-    ],
-};
-
-export const optimize = (svgString, info = {}) =>
-    svgoOptimize(svgString, {...info, ...config});

package/design-tokens/build-scripts/variables.mjs

@@ -1,127 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import {camelCase, paramCase} from 'change-case';
-
-import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
-import {VARIABLES_FRAME_ID} from './constants.mjs';
-import {Content} from './content.mjs';
-
-const VARIABLE_ALIAS = 'VARIABLE_ALIAS';
-const MAPPED_DEFAULTS = 'Mapped';
-const ALLOWED_MODES = ['Light', 'Dark'];
-
-const getHexCode = num => {
-    const hex = Math.round(num * 255).toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-};
-
-const getColor = ({r, g, b, a}) =>
-    `#${getHexCode(r)}${getHexCode(g)}${getHexCode(b)}${a === 1 ? '' : getHexCode(a)}`;
-
-const getFloat = value => (value > 0 ? `${value}px` : value);
-
-const getValue = (valueRef, type) => {
-    switch (type) {
-        case 'COLOR':
-            return getColor(valueRef);
-        case 'FLOAT':
-            return getFloat(valueRef);
-        default:
-            return valueRef;
-    }
-};
-
-export const getVariables = async () => {
-    const res = await fetchWithAccessToken(
-        `files/${VARIABLES_FRAME_ID}/variables/local`,
-    );
-
-    const getVariable = id => {
-        const variable = res.meta.variables[id];
-        const collection =
-            res.meta.variableCollections[variable.variableCollectionId];
-        const modes = collection.modes;
-
-        for (const mode of modes) {
-            const valueRef = variable.valuesByMode[mode.modeId];
-            return valueRef.type === VARIABLE_ALIAS
-                ? getVariable(valueRef.id)
-                : getValue(valueRef, variable.resolvedType);
-        }
-    };
-
-    const variables = {};
-    for (const collection of Object.values(res.meta.variableCollections)) {
-        console.log(collection.name);
-        if (collection.name !== MAPPED_DEFAULTS || collection.remote) {
-            continue;
-        }
-
-        const variableIds = collection.variableIds.sort((idA, idB) => {
-            const nameA = res.meta.variables[idA]?.name ?? '';
-            const nameB = res.meta.variables[idB]?.name ?? '';
-            return nameA.localeCompare(nameB);
-        });
-
-        for (const mode of collection.modes) {
-            if (!ALLOWED_MODES.includes(mode.name)) {
-                continue;
-            }
-            const modeName = camelCase(mode.name);
-            variables[modeName] = {};
-
-            for (const variableId of variableIds) {
-                const variable = res.meta.variables[variableId];
-                if (variable.deletedButReferenced) {
-                    console.warn(
-                        `Variable ${variable.name} (${variableId}) is deleted but referenced. Skipping.`,
-                    );
-                    continue;
-                }
-                const valueRef =
-                    res.meta.variables[variableId].valuesByMode[mode.modeId];
-                const value =
-                    valueRef.type === VARIABLE_ALIAS
-                        ? getVariable(valueRef.id)
-                        : getValue(valueRef, variable.resolvedType);
-
-                variables[modeName][variable.name] = value;
-            }
-        }
-    }
-
-    return variables;
-};
-
-const getFileHeader = ext =>
-    `/* FILE GENERATED BY packages/components/design-tokens/build-scripts/variables.${ext} DO NOT CHANGE */`;
-
-const exportTsVariables = async variables => {
-    const content = new Content(getFileHeader('ts'));
-    content.push('export const variables = ');
-    content.push(`${JSON.stringify(variables, null, 2)};`);
-    fs.writeFileSync(
-        path.resolve('..', 'generated', 'variables.ts'),
-        await content.print('typescript'),
-    );
-};
-
-const exportCssVariables = async cssVariables => {
-    const content = new Content(getFileHeader('css'));
-    for (const [colorScheme, v] of Object.entries(cssVariables)) {
-        content.push(`.${paramCase(colorScheme)} {`);
-        for (const [key, value] of Object.entries(v)) {
-            content.push(`  --${paramCase(key)}: ${value};`);
-        }
-        content.push('}\n');
-    }
-    fs.writeFileSync(
-        path.resolve('..', 'generated', 'variables.css'),
-        await content.print('css'),
-    );
-};
-
-export const exportVariables = variables => {
-    exportTsVariables(variables);
-    exportCssVariables(variables);
-};