@pexip/components 16.8.0

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

@@ -0,0 +1,51 @@
+import prettier from 'prettier';
+
+import config from '../../prettier.config.js';
+
+export class Content {
+    constructor(banner = '') {
+        this.banner = banner;
+        this.blocks = new Map();
+        this.strings = [];
+    }
+
+    /**
+     * add strings to a content block,
+     * if the first argument is a number strings will be grouped by that index.
+     *
+     * @param {[number,] string[]} args
+     * @memberof Content
+     */
+    push(...args) {
+        const [first, ...rest] = Array.from(args);
+        if (typeof first === 'number') {
+            const lines = (
+                this.blocks.has(first) ? this.blocks.get(first) : []
+            ).concat(rest);
+            this.blocks.set(args[0], lines);
+        } else {
+            this.strings = this.strings.concat([first, ...rest]);
+        }
+    }
+
+    /**
+     * Pretty print using the defined parser.
+     * Since prettier has no file extension to go by we need to pass this in.
+     *
+     * @param {'babel' | 'typescript' | 'scss' | 'html' | ...other prettier parsers } parser
+     * @returns string
+     * @memberof Content
+     */
+    print(parser) {
+        let lines = this.banner ? [this.banner] : [];
+        if (this.strings.length) {
+            lines = lines.concat([this.strings.join('\n')]);
+        }
+        if (this.blocks.size) {
+            lines = lines.concat(
+                Array.from(this.blocks.values()).map(l => l.join('\n')),
+            );
+        }
+        return prettier.format(lines.join('\n\n'), {...config, parser});
+    }
+}

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

@@ -0,0 +1,104 @@
+import fs from 'fs';
+import path from '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,
+            ...currentFrame.children.map(child => ({
+                ...child,
+                parentFrameName: currentFrame.name,
+            })),
+        ],
+        [],
+    );
+
+    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

@@ -0,0 +1,28 @@
+import fetch from 'node-fetch';
+
+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

@@ -0,0 +1,125 @@
+import fs from 'fs';
+import path from '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 = [];
+    parent.children.forEach(child => {
+        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 (isNaN(relativeSize)) {
+        throw Error('Cannot get relative size, returned NaN.');
+    }
+    const remSize = 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

@@ -0,0 +1,119 @@
+import fs from 'fs/promises';
+import path from '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`),
+        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`),
+        declaration.print('typescript'),
+    );
+}
+
+async function generate(meta) {
+    const collection = meta.reduce((all, icon) => {
+        const [key, size] = icon.pascalName.split('_');
+        return key in all
+            ? {...all, [key]: {...all[key], [`size${size}`]: icon}}
+            : {...all, [key]: {[`size${size}`]: icon}};
+    }, {});
+    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'>>;",
+        '}',
+        '',
+        'export interface IconCollection {',
+    );
+    iconImports.push(2, 'const collection: IconCollection = {');
+
+    for (const [name, icon] of sortedCollection) {
+        const tiny = icon.size16;
+        const small = icon.size24;
+        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';`,
+            );
+        }
+        iconImports.push(1, `   ${name}: IconSource;`);
+        iconImports.push(
+            2,
+            `${name}: {size16: ${
+                tiny?.pascalName ?? small.pascalName
+            }, size24: ${small.pascalName}},`,
+        );
+    }
+
+    iconImports.push(1, '}');
+    iconImports.push(2, '};', '', 'export default collection;');
+
+    await fs.writeFile(
+        path.resolve('..', 'generated', 'Icons.ts'),
+        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

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

@@ -0,0 +1,53 @@
+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';
+
+if (!process.env.ACCESS_TOKEN) {
+    throw new Error('Provide access token');
+}
+
+async function buildTokens() {
+    const types = (process.argv[2] ?? 'colors,icons,fonts,breakpoints').split(
+        ',',
+    );
+    try {
+        console.log('Starting...');
+        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');
+        }
+        console.log('All done');
+    } catch (e) {
+        console.error('Build tokens failed', e);
+    }
+}
+
+buildTokens();

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

@@ -0,0 +1,99 @@
+import {optimize as svgoOptimize} from 'svgo';
+
+const CURRENT_COLOR = 'currentColor';
+const TOKEN_KEY = 'data-token-name';
+
+function getIsElemWithColor(item) {
+    return (
+        !item.attributes['stroke'] &&
+        !item.attributes['fill'] &&
+        !item.attributes['color']
+    );
+}
+function getIsColorAttr(name) {
+    return name === 'stroke' || name === 'fill' || name === 'color';
+}
+function getIsColorAttrNone(value) {
+    return value === 'none';
+}
+function defaultToCurrentColor(item) {
+    const overrideColor = item => {
+        if (item.type !== 'element') return;
+        if (getIsElemWithColor(item)) return;
+
+        Object.entries(item.attributes).forEach(([name, value]) => {
+            const isColorAttr = getIsColorAttr(name);
+            if (!isColorAttr || getIsColorAttrNone(value)) return;
+
+            item.attributes[name] = CURRENT_COLOR;
+        });
+    };
+
+    const processItem = item => {
+        if (item.children.length === 0) {
+            overrideColor(item);
+        } else {
+            item.children.forEach(child => processItem(child));
+        }
+    };
+    processItem(item);
+}
+
+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',
+        },
+        {
+            type: 'perItem',
+            name: 'defaultToCurrentColor',
+            description:
+                'Alter all the colors to be currentColor. Useful for monochrome icons mostly.',
+            fn: defaultToCurrentColor,
+        },
+        {
+            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/constants.ts

@@ -0,0 +1 @@
+export * from './generated/constants';

package/design-tokens/display.scss

@@ -0,0 +1,21 @@
+.d {
+    &-block {
+        display: block !important;
+    }
+
+    &-inline {
+        display: inline !important;
+    }
+
+    &-inline-block {
+        display: inline-block !important;
+    }
+
+    &-inline-flex {
+        display: inline-flex !important;
+    }
+
+    &-flex {
+        display: flex !important;
+    }
+}