init: the first public commit for AFFiNE

tools/executors/figmaRes/figma/api.js

@@ -0,0 +1,56 @@
+const PREFIX_URL = 'https://api.figma.com/v1/';
+async function initializeApi(token) {
+    const got = await import('got');
+    const api = got.got.extend({
+        prefixUrl: PREFIX_URL,
+        headers: {
+            'X-Figma-Token': token,
+        },
+    });
+
+    return {
+        async getChildren(fileId, nodeId) {
+            const decodedNodeId = decodeURIComponent(nodeId);
+            console.log(
+                `Fetching: ${`${PREFIX_URL}files/${fileId}/nodes?ids=${decodedNodeId}`}`
+            );
+            let data;
+            try {
+                data = await api({
+                    url: `files/${fileId}/nodes?ids=${decodedNodeId}`,
+                }).json();
+            } catch (error) {
+                console.log(`Error: ${error}`);
+            }
+
+            return data.nodes[decodedNodeId].document.children;
+        },
+
+        async getIconsUrl(fileId, iconId) {
+            console.log(
+                `Fetching: ${`${PREFIX_URL}images/${fileId}/?ids=${iconId}&format=svg`}`
+            );
+
+            let body;
+            try {
+                body = await api({
+                    url: `images/${fileId}/?ids=${iconId}&format=svg`,
+                }).json();
+            } catch (error) {
+                console.log(`Error: ${error}`);
+            }
+
+            return body.images;
+        },
+
+        async downloadIcon(iconUrl) {
+            const { body } = await got.got({
+                url: iconUrl,
+            });
+
+            return body;
+        },
+    };
+}
+
+module.exports = initializeApi;

tools/executors/figmaRes/figma/generateReactIcon.js

@@ -0,0 +1,126 @@
+const svgr = require('@svgr/core');
+const util = require('./util');
+
+function getColors(colorCount) {
+    return colorCount > 0
+        ? Array(colorCount)
+              .fill(0)
+              .reduce((acc, _, index) => {
+                  acc.push({
+                      type: 'string',
+                      value: `--color-${index}`,
+                      propName: `color${index}`,
+                  });
+
+                  if (index === 0) {
+                      acc.push({
+                          type: 'string',
+                          value: `--color-${index}`,
+                          propName: 'primaryColor',
+                      });
+                  }
+
+                  if (index === 1) {
+                      acc.push({
+                          type: 'string',
+                          value: `--color-${index}`,
+                          propName: 'secondaryColor',
+                      });
+                  }
+                  return acc;
+              }, [])
+        : [
+              {
+                  type: 'string',
+                  value: 'color',
+                  propName: 'color',
+              },
+          ];
+}
+
+function getColorsInterfaceProps(colors) {
+    return colors
+        .map(color => {
+            return `${color.propName}?: ${color.type}`;
+        })
+        .join('\n    ');
+}
+
+function getRestColors(colors) {
+    return colors.map(color => color.propName).join(', ');
+}
+
+function getPropNameToColorValue(colors) {
+    const maps = colors.reduce((acc, color) => {
+        if (acc[color.value]) {
+            acc[color.value] = `${acc[color.value]} || ${color.propName}`;
+        } else {
+            acc[color.value] = color.propName;
+        }
+        return acc;
+    }, {});
+    const kvString = Object.entries(maps)
+        .map(kv => {
+            return `"${kv[0]}": ${kv[1]}`;
+        })
+        .join(', ');
+    return `{${kvString}}`;
+}
+
+/**
+ * get icon component template
+ *
+ * @param {string} name
+ * @param {string} svgCode svg original code
+ * @param {Object} customStyles custom style properties
+ */
+module.exports = async function generateReactIcon(name, svgCode, customStyles) {
+    let svgrContent = '';
+    try {
+        svgrContent = await svgr.transform(
+            svgCode,
+            {
+                icon: true,
+                typescript: true,
+            },
+            { componentName: `${name}Icon1` }
+        );
+    } catch (err) {
+        console.error(err);
+    }
+    let svgContent = svgrContent.match(/<svg [^\>]+>([\s\S]*?)<\/svg>/)[1];
+
+    let colorIdx = 0;
+    if (util.isDuotone(name)) {
+        svgContent = svgContent.replace(
+            /fill="#[A-Za-z0-9]+"/g,
+            () => `style={{fill: 'var(--color-${colorIdx++})'}}`
+        );
+    }
+    const colors = getColors(colorIdx);
+
+    return `
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ${name}IconProps extends Omit<SvgIconProps, 'color'> {
+    ${getColorsInterfaceProps(colors)}
+}
+
+export const ${name}Icon: FC<${name}IconProps> = ({ ${getRestColors(
+        colors
+    )}, style, ...props}) => {
+    const propsStyles = ${getPropNameToColorValue(colors)};
+    const customStyles = ${JSON.stringify(customStyles || {})};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        ${svgContent}
+        </SvgIcon>
+    )
+};
+`;
+};

tools/executors/figmaRes/figma/index.js

@@ -0,0 +1,119 @@
+const path = require('path');
+const fs = require('fs-extra');
+const { pascalCase, paramCase } = require('change-case');
+const initializeApi = require('./api');
+const svgo = require('./svgo');
+const util = require('./util');
+const generateReactIcon = require('./generateReactIcon');
+
+function getRemoveAttrs(name) {
+    if (util.isBrands(name)) {
+        return {
+            name: 'removeAttrs',
+            params: {
+                attrs: '',
+            },
+        };
+    }
+    return {
+        name: 'removeAttrs',
+        params: {
+            attrs: util.isDuotone(name) ? 'stroke' : '(stroke|fill)',
+        },
+    };
+}
+
+async function generateImportEntry(iconNodes, folder) {
+    const fileWithImportsPath = path.resolve(folder, 'index.ts');
+
+    const importsContent = iconNodes
+        .map(iconNode => {
+            const iconName = paramCase(iconNode.name);
+            if (!iconName) {
+                return `// Error: ${iconNode.name}`;
+            }
+
+            return `export * from './${iconName}/${iconName}';`;
+        })
+        .join('\n');
+
+    await fs.writeFile(
+        fileWithImportsPath,
+        `export const timestamp = ${Date.now()};\n${importsContent}`,
+        { encoding: 'utf8' }
+    );
+}
+
+function filterIcons(icons, iconsUrl) {
+    const icon_name_set = new Set();
+    const icons_filtered = icons.filter(i => {
+        if (icon_name_set.has(paramCase(i.name))) {
+            console.warn(
+                `\nWarn: There is an icon with the same name: ${i.name}`
+            );
+            return false;
+        }
+        icon_name_set.add(paramCase(i.name));
+        return iconsUrl[i.id];
+    });
+    return icons_filtered;
+}
+
+async function downloadFigmaIcons(props) {
+    const { token, fileId, nodeId, folder, patchStyles } = props;
+    await fs.ensureDir(folder);
+    await fs.emptyDir(folder);
+    const api = await initializeApi(token);
+    let icons = await api.getChildren(fileId, nodeId);
+    const iconsUrl = await api.getIconsUrl(
+        fileId,
+        icons.map(i => i.id).join(',')
+    );
+    icons = filterIcons(icons, iconsUrl);
+    const generateIcons = icons.map(async icon => {
+        const iconUrl = iconsUrl[icon.id];
+        const iconName = paramCase(icon.name);
+        let originSvg;
+        try {
+            originSvg = await api.downloadIcon(iconUrl);
+        } catch (err) {
+            console.error(err);
+        }
+        let optimizedSvg;
+        try {
+            const data = await svgo.optimize(
+                originSvg,
+                getRemoveAttrs(iconName)
+            );
+            optimizedSvg = data.data;
+        } catch (err) {
+            console.error(err);
+            console.log(iconName);
+        }
+
+        const iconFolder = path.resolve(folder, iconName);
+        const JSXContent = await generateReactIcon(
+            pascalCase(icon.name),
+            optimizedSvg,
+            patchStyles?.[iconName]
+        );
+        await Promise.all([
+            fs.outputFile(
+                path.resolve(iconFolder, `${iconName || icon.name}.svg`),
+                optimizedSvg,
+                { encoding: 'utf8' }
+            ),
+            fs.outputFile(
+                path.resolve(iconFolder, `${iconName || icon.name}.tsx`),
+                JSXContent,
+                { encoding: 'utf8', flag: '' }
+            ),
+        ]);
+    });
+    await Promise.allSettled([
+        ...generateIcons,
+        generateImportEntry(icons, folder),
+    ]);
+}
+
+module.exports = downloadFigmaIcons;

tools/executors/figmaRes/figma/svgo.js

@@ -0,0 +1,44 @@
+const svgo = require('svgo');
+
+module.exports = {
+    optimize(input, removeAttrs) {
+        return svgo.optimize(input, {
+            plugins: [
+                'cleanupAttrs',
+                'removeDoctype',
+                'removeXMLProcInst',
+                'removeComments',
+                'removeMetadata',
+                'removeTitle',
+                'removeDesc',
+                'removeUselessDefs',
+                'removeEditorsNSData',
+                'removeEmptyAttrs',
+                'removeHiddenElems',
+                'removeEmptyText',
+                'removeEmptyContainers',
+                'removeViewBox',
+                'cleanupEnableBackground',
+                'convertStyleToAttrs',
+                'convertColors',
+                'convertPathData',
+                'convertTransform',
+                'removeUnknownsAndDefaults',
+                'removeNonInheritableGroupAttrs',
+                'removeUselessStrokeAndFill',
+                'removeUnusedNS',
+                'cleanupIDs',
+                'cleanupNumericValues',
+                'moveElemsAttrsToGroup',
+                'moveGroupAttrsToElems',
+                'collapseGroups',
+                'removeRasterImages',
+                'mergePaths',
+                'convertShapeToPath',
+                'sortAttrs',
+                'removeDimensions',
+                removeAttrs,
+            ],
+        });
+    },
+};

tools/executors/figmaRes/figma/util.js

@@ -0,0 +1,9 @@
+// Determine whether it is a two-color icon
+module.exports.isDuotone = function isDuotone(name) {
+    return /[Dd]{1}uotone$/.test(name);
+};
+
+// Determine whether it is a brand trademark
+module.exports.isBrands = function isBrands(name) {
+    return ['figma', 'youtube'].includes(name.toLowerCase());
+};