@interactivethings/scripts 0.0.9 → 2.0.2

package/dist/config.js

@@ -0,0 +1,167 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IxtConfigSchema = exports.VercelConfigSchema = exports.TokensStudioConfigSchema = exports.FigmaConfigSchema = exports.FigmaAssetConfigSchema = void 0;
+exports.defineConfig = defineConfig;
+exports.loadConfig = loadConfig;
+exports.mergeConfigWithArgs = mergeConfigWithArgs;
+exports.validateRequiredConfig = validateRequiredConfig;
+const fs = __importStar(require("fs/promises"));
+const path = __importStar(require("path"));
+const zod_1 = require("zod");
+/**
+ * Figma configuration schema
+ */
+exports.FigmaAssetConfigSchema = zod_1.z.object({
+    url: zod_1.z
+        .string()
+        .url()
+        .describe("The Figma URL containing the assets to download"),
+    output: zod_1.z.string().describe("Output directory where assets will be saved"),
+    name: zod_1.z.string().describe("Identifier for this asset collection"),
+});
+exports.FigmaConfigSchema = zod_1.z.object({
+    token: zod_1.z
+        .string()
+        .optional()
+        .describe("Figma API token (can be set via FIGMA_TOKEN env var)"),
+    assets: zod_1.z
+        .array(exports.FigmaAssetConfigSchema)
+        .default([])
+        .describe("Asset collections to download from Figma"),
+});
+/**
+ * Tokens Studio configuration schema
+ */
+exports.TokensStudioConfigSchema = zod_1.z.object({
+    input: zod_1.z
+        .string()
+        .default("./tokens")
+        .describe("Input directory containing token files"),
+    output: zod_1.z
+        .string()
+        .optional()
+        .describe("Default output file path for transformations"),
+    handler: zod_1.z
+        .string()
+        .optional()
+        .describe("Default path to the transformer handler file"),
+});
+/**
+ * Vercel configuration schema
+ */
+exports.VercelConfigSchema = zod_1.z.object({
+    team: zod_1.z.string().optional().describe("Vercel team name (organization)"),
+    project: zod_1.z.string().optional().describe("Vercel project name"),
+});
+/**
+ * Main IXT Scripts configuration schema
+ */
+exports.IxtConfigSchema = zod_1.z.object({
+    figma: exports.FigmaConfigSchema.optional().describe("Figma-related configuration"),
+    tokensStudio: exports.TokensStudioConfigSchema.optional().describe("Tokens Studio configuration"),
+    vercel: exports.VercelConfigSchema.optional().describe("Vercel deployment configuration"),
+});
+/**
+ * Helper function for type-safe configuration definition
+ * Provides IntelliSense and validation for the configuration object
+ */
+function defineConfig(config) {
+    return exports.IxtConfigSchema.parse(config);
+}
+/**
+ * Default configuration values
+ */
+const DEFAULT_CONFIG = {
+    figma: {
+        assets: [],
+    },
+    tokensStudio: {
+        input: "./tokens",
+    },
+};
+/**
+ * Load configuration from a TypeScript file
+ * Only supports .ts configuration files for better type safety
+ */
+async function loadConfig(configPath) {
+    const possiblePaths = [configPath, "ixt.config.ts"].filter(Boolean);
+    for (const potentialPath of possiblePaths) {
+        if (!potentialPath)
+            continue;
+        const resolvedPath = path.isAbsolute(potentialPath)
+            ? potentialPath
+            : path.join(process.cwd(), potentialPath);
+        try {
+            await fs.access(resolvedPath);
+            // Dynamic import for .ts files
+            const mod = await Promise.resolve(`${resolvedPath}`).then(s => __importStar(require(s)));
+            const config = mod.default || mod;
+            return exports.IxtConfigSchema.parse(config);
+        }
+        catch (error) {
+            // If the file doesn't exist, continue to next option
+            if (error.code === "ENOENT") {
+                continue;
+            }
+            // Re-throw other errors (like parsing errors)
+            throw new Error(`Failed to load config from ${resolvedPath}: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    // No config file found, return default config
+    return DEFAULT_CONFIG;
+}
+/**
+ * Merge CLI arguments with configuration
+ * CLI arguments take precedence over config file values
+ */
+function mergeConfigWithArgs(config, args, section) {
+    const sectionConfig = config[section] || {};
+    // CLI args override config values
+    return {
+        ...sectionConfig,
+        ...Object.fromEntries(Object.entries(args).filter(([, value]) => value !== undefined)),
+    };
+}
+/**
+ * Validate that required values are present after merging config and args
+ */
+function validateRequiredConfig(mergedConfig, requiredFields) {
+    const missing = requiredFields.filter((field) => !mergedConfig[field]);
+    if (missing.length > 0) {
+        throw new Error(`Missing required configuration: ${missing.join(", ")}. ` +
+            "Please provide these in your config file or via CLI arguments.");
+    }
+}

package/dist/figma/api.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="node" />
+/// <reference types="node" />
+type Color = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+type FileId = string;
+type NodeId = string;
+export type FigmaNode = ({
+    type: "RECTANGLE";
+    fills: {
+        type: "SOLID";
+        color: Color;
+    }[];
+    effects: {
+        type: "DROP_SHADOW";
+        offset: {
+            x: number;
+            y: number;
+        };
+        color: Color;
+        radius: number;
+    }[];
+} | {
+    type: "TEXT";
+    style: {
+        fontFamily: string;
+        fontWeight: number;
+        fontSize: number;
+        letterSpacing: number;
+        lineHeightPx: number;
+    };
+}) & {
+    name: string;
+    id: string;
+};
+export declare const createAPI: (figmaToken: string) => {
+    file: {
+        fetch: (fileId: FileId) => Promise<any>;
+    };
+    nodes: {
+        fetch: (fileId: FileId, ids: NodeId[]) => Promise<any>;
+    };
+    styles: {
+        fetch: (fileId: FileId) => Promise<{
+            nodes: {
+                document: FigmaNode;
+            }[];
+        }>;
+    };
+    /**
+     * Given a root node, fetches all exports of the nodes in the tree.
+     * This is especially useful to fetch all icons or assets from a design system.
+     */
+    images: {
+        fetch: (fileId: FileId, nodeIds: string[], { onFetchSources, onFetchImage, }?: {
+            onFetchSources?: ((sources: {
+                name: string;
+                format: string;
+            }[]) => void) | undefined;
+            onFetchImage?: ((url: string) => void) | undefined;
+        }) => Promise<{
+            data: string | Buffer;
+            name: string;
+            format: string;
+        }[]>;
+    };
+};
+export {};

package/dist/figma/api.js

@@ -0,0 +1,175 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAPI = void 0;
+const bottleneck_1 = __importDefault(require("bottleneck"));
+const remeda_1 = require("remeda");
+const zod_1 = require("zod");
+const ExportSetting = zod_1.z.object({
+    suffix: zod_1.z.string(),
+    format: zod_1.z.enum(["SVG", "PNG", "JPG"]),
+    constraint: zod_1.z.discriminatedUnion("type", [
+        zod_1.z.object({
+            type: zod_1.z.literal("SCALE"),
+            value: zod_1.z.number(),
+        }),
+    ]),
+});
+const ExportSettings = zod_1.z.array(ExportSetting);
+const ImageResp = zod_1.z.object({ images: zod_1.z.record(zod_1.z.string(), zod_1.z.string()) });
+const textFetch = async (url) => fetch(url).then((res) => res.text());
+const binaryFetch = async (url) => {
+    const arrayBuffer = await fetch(url).then((res) => res.arrayBuffer());
+    return Buffer.from(arrayBuffer);
+};
+const formatToFetch = {
+    SVG: textFetch,
+    PNG: binaryFetch,
+    JPG: binaryFetch,
+};
+const collectChildren = (nodes) => {
+    return nodes.flatMap((node) => {
+        var _a;
+        return [node, ...collectChildren((_a = node.children) !== null && _a !== void 0 ? _a : [])];
+    });
+};
+/**
+ * @see https://forum.figma.com/archive-21/rest-api-rate-limit-15957
+ */
+const requestsPerMinute = {
+    FILE: 120,
+    IMAGE: 30,
+    VERSION: 60,
+    COMMENT: 300,
+    WEBHOOK: 300,
+    TEAM: 300,
+    PROJECT: 300,
+    FILE_IMAGE: 300,
+    SELECTION: 300,
+    RECENT_FILES: 600,
+};
+const getLimiter = (type) => {
+    return new bottleneck_1.default({
+        minTime: (60 / requestsPerMinute[type]) * 1000,
+    });
+};
+const createAPI = (figmaToken) => {
+    const headers = {
+        "X-Figma-Token": figmaToken,
+    };
+    const baseURL = `https://api.figma.com/v1`;
+    const fetchOptions = {
+        headers: {
+            Accept: "application/json",
+            ...headers,
+        },
+    };
+    const fetchAPI = async (resource) => {
+        const res = await fetch(`${baseURL}${resource}`, fetchOptions);
+        if (res.status > 299) {
+            const text = await res.text();
+            throw new Error(text);
+        }
+        else {
+            const data = await res.json();
+            return data;
+        }
+    };
+    const api = {
+        file: {
+            fetch: (fileId) => {
+                return fetchAPI(`/files/${fileId}`);
+            },
+        },
+        nodes: {
+            fetch: (fileId, ids) => {
+                return fetchAPI(`/files/${fileId}/nodes?ids=${ids.join(",")}`);
+            },
+        },
+        styles: {
+            fetch: async (fileId) => {
+                const resp = await fetchAPI(`/files/${fileId}/styles`);
+                const { meta: { styles }, } = resp;
+                const nodeIds = styles.map((x) => x.node_id);
+                return api.nodes.fetch(fileId, nodeIds);
+            },
+        },
+        /**
+         * Given a root node, fetches all exports of the nodes in the tree.
+         * This is especially useful to fetch all icons or assets from a design system.
+         */
+        images: {
+            fetch: async (fileId, nodeIds, { onFetchSources, onFetchImage, } = {}) => {
+                const { nodes } = await fetchAPI(`/files/${fileId}/nodes?ids=${nodeIds.join(",")}`);
+                const roots = nodeIds.flatMap((id) => nodes[id.replace("-", ":")].document.children);
+                const allChildren = collectChildren(roots);
+                // Collect all export settings from the children
+                const sources = allChildren.flatMap((n) => {
+                    if (n.exportSettings) {
+                        return ExportSettings.parse(n.exportSettings).map((setting) => ({
+                            id: n.id,
+                            name: n.name,
+                            ...setting,
+                        }));
+                    }
+                    else {
+                        return [];
+                    }
+                });
+                if (sources.length === 0) {
+                    return [];
+                }
+                const bottleneck = getLimiter("IMAGE");
+                const sourcesByFormatByContraint = (0, remeda_1.groupBy)(sources, (x) => { var _a, _b; return `${x.format}/${(_b = (_a = x.constraint) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1}`; });
+                // To fetch all the images, we first need to collect all downloadable
+                // URLs for the images, then download them.
+                // The api/v1/images call gets downloadable URLs. It needs to be called
+                // per format and per scale.
+                const sourceWithUrls = (await Promise.all(Object.keys(sourcesByFormatByContraint).map(async (formatAndConstraint) => {
+                    var _a, _b;
+                    const sources = sourcesByFormatByContraint[formatAndConstraint];
+                    const format = sources[0].format;
+                    const scale = (_b = (_a = sources[0].constraint) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1;
+                    const ids = sources.map((x) => x.id).join(",");
+                    const imageResp = await bottleneck
+                        .schedule(() => fetch(`https://api.figma.com/v1/images/${fileId}?ids=${ids}&format=${format.toLowerCase()}&scale=${scale}`, fetchOptions))
+                        .then((res) => res.json())
+                        .then((x) => {
+                        try {
+                            return ImageResp.parse(x);
+                        }
+                        catch {
+                            return { images: {} };
+                        }
+                    });
+                    // onFetchImage?.(imageResp.images);
+                    const { images } = imageResp;
+                    return sources.map((source) => {
+                        return {
+                            ...source,
+                            url: images[source.id],
+                        };
+                    });
+                })))
+                    .flat()
+                    .filter((x) => x.url);
+                onFetchSources === null || onFetchSources === void 0 ? void 0 : onFetchSources(sourceWithUrls);
+                // All URLs are now collected, we can download them
+                return await Promise.all(sourceWithUrls.map(async ({ name, format, url }) => {
+                    return {
+                        data: await formatToFetch[format](url).then((x) => {
+                            onFetchImage === null || onFetchImage === void 0 ? void 0 : onFetchImage(url);
+                            return x;
+                        }),
+                        name,
+                        format: format.toLowerCase(),
+                    };
+                }));
+            },
+        },
+    };
+    return api;
+};
+exports.createAPI = createAPI;

package/dist/figma/cli.d.ts

@@ -0,0 +1,20 @@
+/**
+ * This script downloads the assets from Figma and saves them into the repository.
+ * It is configured via the unified ixt configuration system.
+ *
+ * @example ixt.config.js
+ * import { defineConfig } from '@interactivethings/scripts';
+ *
+ * export default defineConfig({
+ *   figma: {
+ *     assets: [{
+ *       name: "illustrations",
+ *       url: "https://www.figma.com/design/ElWWZIcOGFhiT06rzfIwRO/Design-System?node-id=11861-10071",
+ *       output: "src/assets/illustrations"
+ *     }]
+ *   }
+ * });
+ */
+import { ArgumentParser } from "argparse";
+export declare const configParser: (parser: ArgumentParser) => void;
+export declare const run: (parser: ArgumentParser) => Promise<void>;

package/dist/figma/cli.js

@@ -0,0 +1,163 @@
+"use strict";
+/**
+ * This script downloads the assets from Figma and saves them into the repository.
+ * It is configured via the unified ixt configuration system.
+ *
+ * @example ixt.config.js
+ * import { defineConfig } from '@interactivethings/scripts';
+ *
+ * export default defineConfig({
+ *   figma: {
+ *     assets: [{
+ *       name: "illustrations",
+ *       url: "https://www.figma.com/design/ElWWZIcOGFhiT06rzfIwRO/Design-System?node-id=11861-10071",
+ *       output: "src/assets/illustrations"
+ *     }]
+ *   }
+ * });
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.run = exports.configParser = void 0;
+const fs = __importStar(require("fs/promises"));
+const path = __importStar(require("path"));
+const argparse_1 = require("argparse");
+const ora_1 = __importDefault(require("ora"));
+const api_1 = require("./api");
+const utils_1 = require("./utils");
+const config_1 = require("../config");
+const images_1 = require("./images");
+const configParser = (parser) => {
+    parser.add_argument("--token", {
+        help: "Figma API token (can also use FIGMA_TOKEN env var)",
+    });
+    parser.add_argument("--config", {
+        help: "Path to TypeScript config file (default: looks for ixt.config.ts in current directory)",
+    });
+    const commands = parser.add_subparsers({
+        title: "commands",
+        dest: "subcommand",
+    });
+    const downloadParser = commands.add_parser("download", {
+        help: "Download assets from Figma",
+    });
+    downloadParser.add_argument("name", {
+        help: "Pass this to only download assets for a specific name defined in the config",
+    });
+    const getParser = commands.add_parser("get", {
+        help: "Get the Figma node for a given URL",
+    });
+    getParser.add_argument("url", {
+        help: "The Figma URL to fetch the node from",
+    });
+};
+exports.configParser = configParser;
+const run = async (args) => {
+    // Load configuration
+    const config = await (0, config_1.loadConfig)(args.config);
+    // Merge CLI args with config, giving precedence to CLI args
+    const mergedConfig = (0, config_1.mergeConfigWithArgs)(config, {
+        token: args.token || process.env.FIGMA_TOKEN,
+    }, "figma");
+    // Validate required configuration
+    (0, config_1.validateRequiredConfig)(mergedConfig, ["token"]);
+    const api = (0, api_1.createAPI)(mergedConfig.token);
+    const assets = mergedConfig.assets || [];
+    if (args.subcommand === "download") {
+        if (assets.length === 0) {
+            throw new Error("No figma assets configured. Please add assets to your config file.");
+        }
+        const asset = assets.find((a) => a.name === args.name);
+        if (!asset) {
+            throw new Error(`No asset configuration found for name "${args.name}". Please check your config file. Available assets: ${assets
+                .map((a) => a.name)
+                .join(", ")}`);
+        }
+        const { url, output, name } = asset;
+        console.log("Downloading assets with config:", url);
+        const { figmaFileId, figmaPageId } = (0, utils_1.parseFigmaURL)(url);
+        console.log(`Reading assets for "${name}" at ${(0, utils_1.formatFigmaURL)(figmaFileId, figmaPageId)}`);
+        const spinner = (0, ora_1.default)("Fetching images").start();
+        let total = -1;
+        let fetched = 0;
+        const images = await api.images.fetch(figmaFileId, [figmaPageId], {
+            onFetchSources: (sources) => {
+                total = sources.length;
+                spinner.text = `Fetching ${total} image(s)`;
+                spinner.render();
+            },
+            onFetchImage: (_url) => {
+                fetched += 1;
+                spinner.text = `Fetched ${fetched}/${total} image(s)`;
+                spinner.render();
+            },
+        });
+        spinner.stop();
+        console.log(`${images.length} asset(s) downloaded`);
+        for (const im of images) {
+            const filename = `${im.name}.${im.format}`;
+            console.log(`Downloaded ${filename}`);
+            const outputFile = path.join(output, filename);
+            const outputDir = path.dirname(outputFile);
+            await fs.mkdir(outputDir, { recursive: true });
+            await fs.writeFile(outputFile, im.data);
+            await (0, images_1.optimizeImage)(outputFile);
+        }
+    }
+    else if (args.subcommand === "get") {
+        const { figmaFileId, figmaPageId } = (0, utils_1.parseFigmaURL)(args.url);
+        const node = await api.nodes.fetch(figmaFileId, [figmaPageId]);
+        console.log(JSON.stringify(node, null, 2));
+    }
+};
+exports.run = run;
+const main = async () => {
+    const parser = new argparse_1.ArgumentParser({
+        description: "Download assets from Figma",
+    });
+    (0, exports.configParser)(parser);
+    const args = parser.parse_args();
+    await (0, exports.run)(args);
+};
+// Only run main if this file is being executed directly
+if (require.main === module) {
+    main().catch((err) => {
+        console.error(err);
+        process.exit(1);
+    });
+}