Load image cli command with cache

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    extends: require.resolve('@m2-oss/web-configs/eslint'),
+    env: {
+        node: true,
+    },
+};

.gitignore

@@ -0,0 +1,45 @@
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+build-standalone
+dist
+bin
+.cache
+target-dir
+
+# misc
+.idea
+.vscode
+.DS_Store
+.env*
+!.env.example
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+
+public
+migrations/*.json
+cms-sync-diff.*
+
+/backup
+stories.json
+test-screenshots
+screenshot-tests.diff.json
+bundle-size.json
+statoscope-report.json
+.eslintcache
+cms-data
+*.log
+.ultra.cache.json
+.history
+webpack.stats.json*
+demo-*.json
+/migrations/*.json
+

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    ...require('@m2-oss/web-configs/prettier'),
+};

README.md

@@ -1,2 +1,56 @@
 # figma-utils
 Various utilities for working with figma, for exporting icons, styles, etc.
+## Figma Project for examples
+
+https://www.figma.com/file/3SigPKK9cQhANSRQOOgQgO/
+
+## figma token and cli
+You need to write figma token in environmental vars. Put the value in `.env` file 
+(use `.env.example` for example)
+
+## Load Minified LoadSchema from Figma
+
+This function load the simplified model from Figma Project. It find pa
+
+### Loading from code:
+
+`
+loadMinifiedSchema(config, figmaToken);
+`
+
+### loading from cli
+
+`
+yarn cli load-schema --config '{"figmaProjectID":"3SigPKK9cQhANSRQOOgQgO", "page":"Colored Icons", "frameName":"Common"}'
+`
+
+`
+yarn cli load-schema --config './cli/configs/load-schema.json'
+`
+## Loading image from Figma
+
+if you need cache files for loading use CACHE_DIR var in `.env` file.
+### loading from code
+
+`loadImage(config, figmaToken)`
+
+### loading from cli
+`
+yarn cli load-image --config '{"figmaProjectID":"3SigPKK9cQhANSRQOOgQgO", "frameID":"1:153"}' "3.svg"
+`
+
+`
+yarn cli load-image --config './cli/configs/load-image.json' "3.svg"
+`
+
+## Sync Image Package with Figma
+
+### loading from code
+
+`syncImagePack(config, process.env.X_FIGMA_TOKEN, this.targetDir);`
+
+### loading from cli
+
+`
+yarn cli sync-image-pack --config './cli/configs/image-pack.json' --target-dir './target-dir'
+`

lerna.json

@@ -0,0 +1,6 @@
+{
+    "lerna": "3.20.2",
+    "npmClient": "yarn",
+    "useWorkspaces": true,
+    "version": "independent"
+}

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "figma-utils",
+  "version": "1.0.0",
+  "description": "Various utilities for working with figma, for extracting icons, styles, etc.",
+  "repository": "https://github.com/m2-oss/figma-utils.git",
+  "author": "Sergey Chernov <chernov.sergey@gmail.com>",
+  "license": "MIT",
+  "private": true,
+  "keywords": [
+    "figma",
+    "extract",
+    "import",
+    "icons",
+    "images"
+  ],
+  "scripts": {
+    "lint": "eslint 'src/**/*.ts' 'cli/**/*.ts' 'packages/**/*.ts'",
+    "format": "eslint --fix 'src/**/*.ts' 'cli/**/*.ts' 'packages/**/*.ts'",
+    "cli": "ts-node --project tsconfig.json -r dotenv/config packages/cli/index.ts",
+    "build": "lerna run build",
+    "prepare": "yarn build",
+    "prepublishOnly": "yarn lint",
+    "typecheck": "yarn tsc --noEmit --incremental false"
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "format"
+    }
+  },
+  "devDependencies": {
+    "@m2-oss/web-configs": "^0.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-codeceptjs": "^1.1.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-prettier": "^3.1.0",
+    "lerna": "^3.20.2",
+    "husky": "^7.0.2",
+    "prettier": "^2.4.0",
+    "ts-node": "^10.2.1",
+    "typescript": "^4.4.3"
+  },
+  "dependencies": {
+  }
+}

packages/cli/.env.example

@@ -0,0 +1,2 @@
+X_FIGMA_TOKEN=https://www.figma.com/developers/api#access-tokens
+CACHE_DIR=./.cache

packages/cli/README.md

@@ -0,0 +1,41 @@
+# figma-cli
+Console commands for working with figma, for exporting icons and pack of icons.
+## Figma Project for examples
+
+https://www.figma.com/file/3SigPKK9cQhANSRQOOgQgO/
+
+## figma token and cli
+You need to write figma token in environmental vars. Put the value in `.env` file 
+(use `.env.example` for example)
+
+## Load Minified LoadSchema from Figma
+
+This function load the simplified model from Figma Project.
+
+`
+yarn cli load-schema --config '{"figmaProjectID":"3SigPKK9cQhANSRQOOgQgO", "page":"Colored Icons", "frameName":"Common"}'
+`
+
+`
+yarn cli load-schema --config './cli/configs/load-schema.json'
+`
+## Loading image from Figma
+
+if you need cache files for loading use CACHE_DIR var in `.env` file.
+
+### loading from cli
+`
+yarn cli load-image --config '{"figmaProjectID":"3SigPKK9cQhANSRQOOgQgO", "frameID":"1:153"}' "3.svg"
+`
+
+`
+yarn cli load-image --config './cli/configs/load-image.json' "3.svg"
+`
+
+## Sync Image Package with Figma
+
+### loading from cli
+
+`
+yarn cli sync-image-pack --config './cli/configs/image-pack.json' --target-dir './target-dir'
+`

packages/cli/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "@m2-oss/figma-cli",
+    "version": "1.0.0",
+    "description": "Various utilities for working with figma, for extracting icons, styles, etc.",
+    "main": "bin/index.js",
+    "bin": {
+      "figma-cli": "./bin/index.js"
+    },
+
+    "repository": "https://github.com/m2-oss/figma-utils.git",
+    "author": "Sergey Chernov <chernov.sergey@gmail.com>",
+    "license": "MIT",
+    "keywords": [
+      "figma",
+      "extract",
+      "import",
+      "icons",
+      "images"
+    ],
+    "scripts": {
+      "lint": "eslint 'src/**/*.ts'",
+      "format": "eslint --fix 'src/**/*.ts'",
+      "cli": "node -r dotenv/config bin/index.js",
+      "prebuild": "rm -rf bin",
+      "build": "tsc",
+      "build:watch": "yarn build --watch",
+      "prepare": "yarn build",
+      "prepublishOnly": "yarn lint",
+      "typecheck": "yarn tsc --noEmit --incremental false"
+    },
+    "devDependencies": {
+      "@m2-oss/web-configs": "^0.1.0",
+      "@types/md5": "^2.3.1",
+      "@types/node": "^16.9.1",
+      "@typescript-eslint/eslint-plugin": "^4.31.1",
+      "@typescript-eslint/parser": "^4.31.1",
+      "clipanion": "^3.0.1",
+      "dotenv": "^10.0.0",
+      "eslint": "^7.32.0",
+      "eslint-config-prettier": "^6.3.0",
+      "eslint-plugin-codeceptjs": "^1.1.0",
+      "eslint-plugin-import": "^2.18.2",
+      "eslint-plugin-prettier": "^3.1.0",
+      "lerna": "^3.20.2",
+      "husky": "^7.0.2",
+      "prettier": "^2.4.0",
+      "ts-node": "^10.2.1",
+      "typescript": "^4.4.3"
+    },
+    "dependencies": {
+      "@m2-oss/sync-figma-image-pack": "^1.0.0",
+      "axios": "^0.21.4",
+      "cyrillic-to-translit-js": "^3.1.0",
+      "md5": "^2.3.0",
+      "svg-render": "^1.2.0"
+    }
+  }
+

packages/cli/src/commands/load-image.ts

@@ -0,0 +1,26 @@
+import { Command, Option } from 'clipanion';
+
+import { SrcImageConfig, loadFigmaImage } from '@m2-oss/load-figma-image';
+
+import { promises as fs } from 'fs';
+import path from 'path';
+import { loadJson } from '../common/json-utils';
+
+export class LoadImage extends Command {
+    srcConfig = Option.String('--config', { required: true });
+
+    dstPath = Option.String({ required: true });
+
+    static paths = [['load-image']];
+
+    async execute(): Promise<void> {
+        const config: SrcImageConfig = await loadJson(this.srcConfig);
+        if (!process.env.X_FIGMA_TOKEN) {
+            throw new Error('X_FIGMA_TOKEN does not define');
+        }
+        const uint8Array = await loadFigmaImage(config, process.env.X_FIGMA_TOKEN);
+        if (uint8Array) {
+            await fs.writeFile(path.resolve(this.dstPath), uint8Array);
+        }
+    }
+}

packages/cli/src/commands/load-schema.ts

@@ -0,0 +1,30 @@
+import { Command, Option } from 'clipanion';
+
+import {
+    loadMinifiedFigmaSchema,
+    SrcFigmaImagePackConfig,
+    convertSchemaToHashMap,
+} from '@m2-oss/sync-figma-image-pack';
+
+import { loadJson } from '../common/json-utils';
+
+export class LoadSchema extends Command {
+    config = Option.String('--config', { required: true });
+
+    hash = Option.Boolean('--hash');
+
+    static paths = [['load-schema']];
+
+    async execute(): Promise<void> {
+        const config: SrcFigmaImagePackConfig = await loadJson(this.config);
+        if (!process.env.X_FIGMA_TOKEN) {
+            throw new Error('X_FIGMA_TOKEN does not define');
+        }
+        const minifiedSchema = await loadMinifiedFigmaSchema(config, process.env.X_FIGMA_TOKEN);
+        if (this.hash) {
+            console.log(JSON.stringify(convertSchemaToHashMap(minifiedSchema), null, '\t'));
+        } else {
+            console.log(JSON.stringify(minifiedSchema, null, '\t'));
+        }
+    }
+}

packages/cli/src/commands/sync-image-pack.ts

@@ -0,0 +1,18 @@
+import { Command, Option } from 'clipanion';
+
+import { syncFigmaImagePack, ImageFigmaPackConfig } from '@m2-oss/sync-figma-image-pack';
+
+import { loadJson } from '../common/json-utils';
+
+export class SyncImagePackCommand extends Command {
+    config = Option.String('--config', { required: true });
+    targetDir = Option.String('--target-dir', { required: true });
+    async execute(): Promise<number | void> {
+        const config: ImageFigmaPackConfig[] = await loadJson(this.config);
+        if (!process.env.X_FIGMA_TOKEN) {
+            throw new Error('X_FIGMA_TOKEN does not define');
+        }
+        await syncFigmaImagePack(config, process.env.X_FIGMA_TOKEN, this.targetDir);
+    }
+    static paths = [['sync-image-pack']];
+}

packages/cli/src/common/json-utils.ts

@@ -0,0 +1,12 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+
+export async function loadJson(json: string): Promise<any> {
+    let result = undefined;
+    try {
+        result = JSON.parse(json);
+    } catch (e1) {
+        result = JSON.parse(await fs.readFile(path.resolve(json), 'utf8'));
+    }
+    return result;
+}