@pexip/components 19.2.0 → 20.0.0

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

@@ -1,105 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import {pascalCase} from 'change-case';
-
-import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
-import {ICONS_FRAME_ID, RESOURCES_IDS} from './constants.mjs';
-
-function normalizeIconName(frameName, iconDetails) {
-    // iconDetails = " Size=24px, Direction=right, Styling=primary "
-    const details = iconDetails
-        .trim()
-        .split(',')
-        .map(detail => detail.replace(/.+\=/g, ''));
-    // size = "24px"
-    const size = details.slice(0, 1).join();
-    // modifier = "right-primary"
-    const modifier = details.slice(1).join('-');
-    const iconName = frameName
-        .replace(/Icons/, 'icon')
-        .replace(/\//g, '-')
-        .toLowerCase();
-    return `${size}-${iconName}${modifier ? `-${modifier}` : ''}`;
-}
-
-function newIconName(name) {
-    const figmaName = name.split('-');
-    // Push the first part of the name to the back.
-    figmaName.push(figmaName.shift());
-    return figmaName.join('-').replace('px', '');
-}
-
-function saveIconResource(icon) {
-    console.log(
-        `fetching resource and storing meta: ${JSON.stringify(icon, null, 2)}`,
-    );
-    fetchWithAccessToken(icon.resource, 'text')
-        .then(graphic =>
-            fs.promises.writeFile(
-                path.resolve(
-                    '..',
-                    'generated',
-                    'icons',
-                    `${icon.iconName}.json`,
-                ),
-                JSON.stringify({...icon, graphic}, null, 2),
-            ),
-        )
-        .then(() => console.log(`wrote ${icon.iconName}.json`))
-        .catch(reason => console.log(reason));
-}
-
-function fetchResource(vector) {
-    return fetchWithAccessToken(
-        `images/${ICONS_FRAME_ID}/?ids=${vector.id}&format=svg`,
-    )
-        .then(icon => {
-            const name = normalizeIconName(vector.parentFrameName, vector.name);
-            const iconName = newIconName(name);
-            saveIconResource({
-                iconName,
-                name,
-                pascalName: `Icon${pascalCase(iconName)}`,
-                resource: icon.images[vector.id],
-            });
-        })
-        .catch(reason => console.log(reason));
-}
-
-export async function downloadIcons() {
-    const {
-        nodes: {[RESOURCES_IDS.ICONS]: iconsFrame},
-    } = await fetchWithAccessToken(
-        `files/${ICONS_FRAME_ID}/nodes?ids=${RESOURCES_IDS.ICONS}`,
-    );
-
-    const frames = iconsFrame.document.children;
-
-    // frames now contain multiple nested icons
-    const allIcons = frames
-        .reduce((icons, currentFrame) => {
-            icons.push(
-                currentFrame.children.map(child => ({
-                    ...child,
-                    parentFrameName: currentFrame.name,
-                })),
-            );
-            return icons;
-        }, [])
-        .flat();
-
-    console.log(
-        `preparing to fetch ${allIcons.length} icons from ${frames.length} frames`,
-    );
-
-    await allIcons
-        // needs to be sequential, else we get http 429 from figma
-        .reduce(
-            (promise, vector) =>
-                promise.then(async icons => [
-                    ...icons,
-                    await fetchResource(vector),
-                ]),
-            Promise.resolve([]),
-        );
-}

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

@@ -1,26 +0,0 @@
-import {API_URL} from './constants.mjs';
-
-export async function fetchWithAccessToken(path, parse = 'json') {
-    const url = path.startsWith('http') ? path : API_URL + path;
-    try {
-        console.log(url);
-        const response = await fetch(url, {
-            headers: {
-                'X-Figma-Token': process.env.ACCESS_TOKEN,
-            },
-        });
-        if (parse === 'json') {
-            const result = await response.json();
-            console.log(result);
-            return result;
-        }
-        if (parse === 'text') {
-            const result = await response.text();
-            console.log(result);
-            return result;
-        }
-        return response;
-    } catch (reason) {
-        console.log(reason);
-    }
-}

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

@@ -1,125 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import {camelCase, paramCase, pascalCase} from 'change-case';
-
-import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
-import {FRAME_ID} from './constants.mjs';
-import {Content} from './content.mjs';
-
-const getFrameChildren = parent => {
-    let children = [];
-    for (const child of parent.children) {
-        children.push(child);
-        if (child.children) {
-            children = [...children, ...getFrameChildren(child)];
-        }
-    }
-    return children;
-};
-
-export async function getFonts(recourceIds) {
-    const {
-        nodes: {[recourceIds]: fontsFrame},
-    } = await fetchWithAccessToken(
-        `files/${FRAME_ID}/nodes?ids=${recourceIds}`,
-    );
-    return getFrameChildren(fontsFrame.document)
-        .filter(x => !!x.styles)
-        .map(t => ({
-            ...t,
-            styles: fontsFrame.styles[t.styles.text],
-        }))
-        .reduce((acc, curr) => {
-            if (/semibold/i.test(curr.style.fontPostScriptName)) {
-                curr.style.fontWeight = 600;
-                if (/bold/i.test(curr.styles.name)) {
-                    curr.styles.name = 'body-bold';
-                }
-            }
-            acc[paramCase(curr.styles.name)] = {
-                fontName: camelCase(curr.styles.name),
-                fontSize: curr.style.fontSize,
-                lineHeight: curr.style.lineHeightPercentFontSize,
-                fontWeight: curr.style.fontWeight,
-            };
-            return acc;
-        }, {});
-}
-
-function pxToRem(bodySizePx, relativeSizeInPx) {
-    const relativeSize = Number(relativeSizeInPx);
-    if (Number.isNaN(relativeSize)) {
-        throw Error('Cannot get relative size, returned NaN.');
-    }
-    const remSize = Number.parseFloat(relativeSize) / bodySizePx;
-    return Math.round(remSize * 100) / 100;
-}
-
-function stripFontVariantKey(key) {
-    return key.replace(/(mobile-|desktop-)/, '');
-}
-
-export function syncFonts(fonts, destination, suffix) {
-    const content = new Content(
-        '/* FILE GENERATED BY packages/components/design-tokens/build-scripts/fonts.js DO NOT CHANGE */',
-    );
-
-    const fontsObject = Object.entries(fonts);
-    const bodySize = fontsObject.find(property => {
-        const variant = stripFontVariantKey(property[0]);
-        return variant === 'body';
-    })[1].fontSize;
-
-    content.push(
-        `${['$base-size', suffix].filter(s => !!s).join('-')}: ${bodySize}px;`,
-    );
-
-    content.push(0, `${['$font-size', suffix].filter(s => !!s).join('-')}: (`);
-    content.push(
-        1,
-        `${['$font-line-height', suffix].filter(s => !!s).join('-')}: (`,
-    );
-    content.push(
-        2,
-        `${['$font-weight', suffix].filter(s => !!s).join('-')}: (`,
-    );
-
-    for (const [key, {fontSize, lineHeight, fontWeight}] of fontsObject) {
-        const strippedKey = stripFontVariantKey(key);
-        content.push(0, `${strippedKey}: ${pxToRem(bodySize, fontSize)}rem,`);
-        content.push(1, `${strippedKey}: ${lineHeight}%,`);
-        content.push(2, `${strippedKey}: ${fontWeight},`);
-    }
-    for (let i = 0; i <= 2; i++) {
-        content.push(i, ');');
-    }
-    fs.writeFileSync(
-        path.resolve('..', 'generated', destination),
-        content.print('scss'),
-    );
-    syncConstants(fonts);
-}
-
-function syncConstants(fonts) {
-    console.log(fonts);
-
-    const content = new Content(
-        '// FILE GENERATED BY packages/components/design-tokens/build-scripts/fonts.js DO NOT CHANGE',
-    );
-
-    content.push('export enum FontVariant {');
-    for (const {fontName} of Object.values(fonts)) {
-        const strippedFontName = fontName.replace(/(mobile|desktop)/, '');
-        content.push(
-            `${pascalCase(strippedFontName)} = '${camelCase(
-                strippedFontName,
-            )}',`,
-        );
-    }
-    content.push('}');
-
-    fs.writeFileSync(
-        path.resolve('..', 'generated', 'constants.ts'),
-        content.print('typescript'),
-    );
-}

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);
-};