diff --git a/.circleci/config.yml b/.circleci/config.yml
index b836063..9b90845 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -44,7 +44,12 @@ jobs:
steps:
- checkout
- <<: *install_node_modules
- - run: bash generate_mocks.sh
+ - run:
+ name: Generate Mocks
+ command: |
+ bash generate_mocks.sh
+ test $(find __mocks__/figma/assets -type f -name "*.png" | wc -l | sed -e 's/^[ \t]*//') -eq 6
+ test $(find __mocks__/figma/assets -type f -name "*.svg" | wc -l | sed -e 's/^[ \t]*//') -eq 3
unit_tests_node_lts:
executor: node
@@ -71,6 +76,9 @@ jobs:
- <<: *install_node_modules
- run: ./node_modules/.bin/pkg cli.js -t node8-linux-x64 --output ./bin/hubble-cli
- run: ./bin/hubble-cli --version
+ - run:
+ command: |
+ [ $(npx -c 'echo "$npm_package_version"') = $(./bin/hubble-cli --version) ]
workflows:
version: 2
diff --git a/.huskyrc b/.huskyrc
new file mode 100644
index 0000000..d965519
--- /dev/null
+++ b/.huskyrc
@@ -0,0 +1,5 @@
+{
+ "hooks": {
+ "pre-commit": "lint-staged",
+ }
+}
diff --git a/.lintstagedrc b/.lintstagedrc
new file mode 100644
index 0000000..e6451df
--- /dev/null
+++ b/.lintstagedrc
@@ -0,0 +1,10 @@
+{
+ "**/*.js": [
+ "itp-react-scripts lint -- --fix",
+ "itp-react-scripts format",
+ "git add"
+ ],
+ "**/*.sh": [
+ "command -v shellcheck && shellcheck"
+ ]
+}
diff --git a/.prettierignore b/.prettierignore
index 4bcf50f..9d757ec 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,6 @@
__mocks__
__tests__
+*.test.js
+
jest.config.js
diff --git a/__mocks__/figma/assets/icon.svg b/__mocks__/figma/assets/icon.svg
new file mode 100644
index 0000000..e2d7ab6
--- /dev/null
+++ b/__mocks__/figma/assets/icon.svg
@@ -0,0 +1,9 @@
+
diff --git a/__mocks__/figma/assets/icons/hubble/plain.png b/__mocks__/figma/assets/icons/hubble/plain.png
new file mode 100644
index 0000000..ba05830
Binary files /dev/null and b/__mocks__/figma/assets/icons/hubble/plain.png differ
diff --git a/__mocks__/figma/assets/icons/hubble/plain.svg b/__mocks__/figma/assets/icons/hubble/plain.svg
new file mode 100644
index 0000000..ddd27a4
--- /dev/null
+++ b/__mocks__/figma/assets/icons/hubble/plain.svg
@@ -0,0 +1,16 @@
+
diff --git a/__mocks__/figma/assets/icons/hubble/plain@2x.png b/__mocks__/figma/assets/icons/hubble/plain@2x.png
new file mode 100644
index 0000000..0b2ca30
Binary files /dev/null and b/__mocks__/figma/assets/icons/hubble/plain@2x.png differ
diff --git a/__mocks__/figma/assets/icons/hubble/plain@3x.png b/__mocks__/figma/assets/icons/hubble/plain@3x.png
new file mode 100644
index 0000000..7416174
Binary files /dev/null and b/__mocks__/figma/assets/icons/hubble/plain@3x.png differ
diff --git a/__mocks__/figma/assets/illustrations/hubble/telescope.png b/__mocks__/figma/assets/illustrations/hubble/telescope.png
new file mode 100644
index 0000000..2e54b35
Binary files /dev/null and b/__mocks__/figma/assets/illustrations/hubble/telescope.png differ
diff --git a/__mocks__/figma/assets/illustrations/hubble/telescope.svg b/__mocks__/figma/assets/illustrations/hubble/telescope.svg
new file mode 100644
index 0000000..60c6b0d
--- /dev/null
+++ b/__mocks__/figma/assets/illustrations/hubble/telescope.svg
@@ -0,0 +1,58 @@
+
diff --git a/__mocks__/figma/assets/illustrations/hubble/telescope@2x.png b/__mocks__/figma/assets/illustrations/hubble/telescope@2x.png
new file mode 100644
index 0000000..5c6724b
Binary files /dev/null and b/__mocks__/figma/assets/illustrations/hubble/telescope@2x.png differ
diff --git a/__mocks__/figma/assets/illustrations/hubble/telescope@3x.png b/__mocks__/figma/assets/illustrations/hubble/telescope@3x.png
new file mode 100644
index 0000000..186c48c
Binary files /dev/null and b/__mocks__/figma/assets/illustrations/hubble/telescope@3x.png differ
diff --git a/__mocks__/figma/sample_dump.json b/__mocks__/figma/sample_dump.json
index 78d8f19..a92309e 100644
--- a/__mocks__/figma/sample_dump.json
+++ b/__mocks__/figma/sample_dump.json
@@ -6009,7 +6009,7 @@
"schemaVersion": 0,
"styles": {},
"name": "Hubble Figma Sample",
- "lastModified": "2019-08-01T11:26:57.968542Z",
- "thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/4f30cf1c-16d2-49bd-b66b-d44f1ab41059?Expires=1565568000&Signature=djcdoXbZFjHr9SnEl7ynKGKATgiUj3Zp2jTYliAIF6vLo02xtiVYCk7cWhuQTj1-owQ~cUzQltZsY259V1J3hsFUGTumr3cKez5Xj04zPZ2XSpBTJfe3unxZ1h~HV1yaetpTpRcwK891hBI6HAyZBViAUcWb7kys2za9zpYR32D6UvQEZy-FeOUz3iKotpw84Y1bLiBXdZRsAbL8kSDW5M822jhZ2Lx10lY9ZK8duZFxuL61Q0viYJ8kfWxUUmCUMEvaLWY6KYTwHrdTBka8vadT1N~mPKiYZoUMiJsJCtRofM-wwFZjZKvmJ6WJRfVA31LCNyfzMhvfHorhUGbcQQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
- "version": "156404211"
+ "lastModified": "2019-08-20T13:09:14.221958Z",
+ "thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/4d046bc9-07c5-4043-82e3-28b4808d2947?Expires=1567382400&Signature=Ac5jWhR-MSNBZvuNpBP~G5NbPulj1XHGvYcV5W9SZ3VX8KAfrC8x3GA9LmnEQ8SqIWw8PqyDWGid7gqIbRVyuIXNP1DvmwaCbJL7ykXvif0fyzabeq3ERyCaxWynY-lrLgLH~L3PL9Iro7y2oAY5sDmXCqYp0hoqdhnEQw1GeUWk4g1HflFTvgy0yJWmJ7xgHsvReZMUl1e3N~Ka7I0qdGrwCtXgI3hhJJu~VTkVQFWo9osU6GdIRgcb19h-qPtbpIw8dVvhMG~3Zf8TEiQvXh2jwUILZ96loh65AHBwBZRJMEuzG4IGquIlBRJe5wjCKTKcS8p0lZ0IfvpwxwQgnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+ "version": "163204485"
}
\ No newline at end of file
diff --git a/__mocks__/sketch/exported_assets/icons/hubble/plain.pdf b/__mocks__/sketch/exported_assets/icons/hubble/plain.pdf
new file mode 100644
index 0000000..497a52e
Binary files /dev/null and b/__mocks__/sketch/exported_assets/icons/hubble/plain.pdf differ
diff --git a/__mocks__/sketch/exported_assets/icons/hubble/plain.png b/__mocks__/sketch/exported_assets/icons/hubble/plain.png
new file mode 100644
index 0000000..8391f2b
Binary files /dev/null and b/__mocks__/sketch/exported_assets/icons/hubble/plain.png differ
diff --git a/__mocks__/sketch/exported_assets/icons/hubble/plain.svg b/__mocks__/sketch/exported_assets/icons/hubble/plain.svg
new file mode 100644
index 0000000..d8f5f78
--- /dev/null
+++ b/__mocks__/sketch/exported_assets/icons/hubble/plain.svg
@@ -0,0 +1,20 @@
+
+
diff --git a/__mocks__/sketch/exported_assets/icons/hubble/plain@1.5x.png b/__mocks__/sketch/exported_assets/icons/hubble/plain@1.5x.png
new file mode 100644
index 0000000..adff955
Binary files /dev/null and b/__mocks__/sketch/exported_assets/icons/hubble/plain@1.5x.png differ
diff --git a/__mocks__/sketch/exported_assets/icons/hubble/plain@2x.png b/__mocks__/sketch/exported_assets/icons/hubble/plain@2x.png
new file mode 100644
index 0000000..28e81db
Binary files /dev/null and b/__mocks__/sketch/exported_assets/icons/hubble/plain@2x.png differ
diff --git a/__mocks__/sketch/exported_assets/icons/hubble/plain@3x.png b/__mocks__/sketch/exported_assets/icons/hubble/plain@3x.png
new file mode 100644
index 0000000..a0e4bfe
Binary files /dev/null and b/__mocks__/sketch/exported_assets/icons/hubble/plain@3x.png differ
diff --git a/__mocks__/sketch/exported_assets/icons/hubble/plain@4x.png b/__mocks__/sketch/exported_assets/icons/hubble/plain@4x.png
new file mode 100644
index 0000000..1c1fbd5
Binary files /dev/null and b/__mocks__/sketch/exported_assets/icons/hubble/plain@4x.png differ
diff --git a/__mocks__/sketch/exported_assets/illustrations/hubble/telescope.pdf b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope.pdf
new file mode 100644
index 0000000..d3f9ae3
Binary files /dev/null and b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope.pdf differ
diff --git a/__mocks__/sketch/exported_assets/illustrations/hubble/telescope.png b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope.png
new file mode 100644
index 0000000..cd68b3b
Binary files /dev/null and b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope.png differ
diff --git a/__mocks__/sketch/exported_assets/illustrations/hubble/telescope.svg b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope.svg
new file mode 100644
index 0000000..892b4f0
--- /dev/null
+++ b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope.svg
@@ -0,0 +1,62 @@
+
+
diff --git a/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@1.5x.png b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@1.5x.png
new file mode 100644
index 0000000..d264da3
Binary files /dev/null and b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@1.5x.png differ
diff --git a/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@2x.png b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@2x.png
new file mode 100644
index 0000000..615afdf
Binary files /dev/null and b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@2x.png differ
diff --git a/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@3x.png b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@3x.png
new file mode 100644
index 0000000..5dd5d57
Binary files /dev/null and b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@3x.png differ
diff --git a/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@4x.png b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@4x.png
new file mode 100644
index 0000000..2aa7bc3
Binary files /dev/null and b/__mocks__/sketch/exported_assets/illustrations/hubble/telescope@4x.png differ
diff --git a/__tests__/__snapshots__/verifyMocks.test.js.snap b/__tests__/__snapshots__/verifyMocks.test.js.snap
index f40a668..95ed688 100644
--- a/__tests__/__snapshots__/verifyMocks.test.js.snap
+++ b/__tests__/__snapshots__/verifyMocks.test.js.snap
@@ -7121,12 +7121,12 @@ Object {
"name": "Document",
"type": "DOCUMENT",
},
- "lastModified": "2019-08-01T11:26:57.968542Z",
+ "lastModified": "2019-08-20T13:09:14.221958Z",
"name": "Hubble Figma Sample",
"schemaVersion": 0,
"styles": Object {},
- "thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/4f30cf1c-16d2-49bd-b66b-d44f1ab41059?Expires=1565568000&Signature=djcdoXbZFjHr9SnEl7ynKGKATgiUj3Zp2jTYliAIF6vLo02xtiVYCk7cWhuQTj1-owQ~cUzQltZsY259V1J3hsFUGTumr3cKez5Xj04zPZ2XSpBTJfe3unxZ1h~HV1yaetpTpRcwK891hBI6HAyZBViAUcWb7kys2za9zpYR32D6UvQEZy-FeOUz3iKotpw84Y1bLiBXdZRsAbL8kSDW5M822jhZ2Lx10lY9ZK8duZFxuL61Q0viYJ8kfWxUUmCUMEvaLWY6KYTwHrdTBka8vadT1N~mPKiYZoUMiJsJCtRofM-wwFZjZKvmJ6WJRfVA31LCNyfzMhvfHorhUGbcQQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
- "version": "156404211",
+ "thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/4d046bc9-07c5-4043-82e3-28b4808d2947?Expires=1567382400&Signature=Ac5jWhR-MSNBZvuNpBP~G5NbPulj1XHGvYcV5W9SZ3VX8KAfrC8x3GA9LmnEQ8SqIWw8PqyDWGid7gqIbRVyuIXNP1DvmwaCbJL7ykXvif0fyzabeq3ERyCaxWynY-lrLgLH~L3PL9Iro7y2oAY5sDmXCqYp0hoqdhnEQw1GeUWk4g1HflFTvgy0yJWmJ7xgHsvReZMUl1e3N~Ka7I0qdGrwCtXgI3hhJJu~VTkVQFWo9osU6GdIRgcb19h-qPtbpIw8dVvhMG~3Zf8TEiQvXh2jwUILZ96loh65AHBwBZRJMEuzG4IGquIlBRJe5wjCKTKcS8p0lZ0IfvpwxwQgnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+ "version": "163204485",
}
`;
diff --git a/bin/hubble-cli b/bin/hubble-cli
index 31f273c..e6b7cea 100755
Binary files a/bin/hubble-cli and b/bin/hubble-cli differ
diff --git a/cli.js b/cli.js
index c530af4..27a6b36 100644
--- a/cli.js
+++ b/cli.js
@@ -16,6 +16,7 @@ const cli = meow(
--useGradientArtboards Use artboard formatting to export gradients instead of using the document gradients.
--useStyleDictionaryOutput, -s Generate Style Dictionary compatible output instead of the generic design token format.
--token, -t Authorization token when accessing the Figma API.
+ --exportAssets, -e Export assets from Figma.
Examples
$ hubble-cli "__mocks/sample_sketchfile.sketch"
@@ -51,6 +52,11 @@ const cli = meow(
default: false,
alias: 's',
},
+ exportAssets: {
+ type: 'boolean',
+ default: false,
+ alias: 'e',
+ },
version: {
type: 'boolean',
alias: 'v',
diff --git a/generate_mocks.sh b/generate_mocks.sh
index 9187b60..7afcfbf 100755
--- a/generate_mocks.sh
+++ b/generate_mocks.sh
@@ -6,9 +6,10 @@ FIGMA_FILE="HbgJuBVOwIOcoZMVnpG01LqA"
function generate_figma() {
echo "Generating mocks for Figma"
- node cli.js --dump --token "$FIGMA_TOKEN" "$FIGMA_FILE" && \
+ node cli.js --dump --exportAssets --token "$FIGMA_TOKEN" "$FIGMA_FILE" && \
mv hubble-data.json "$MOCKS_DIR/figma/sample_output.json" && \
- mv logdump.json "$MOCKS_DIR/figma/sample_dump.json"
+ mv logdump.json "$MOCKS_DIR/figma/sample_dump.json" && \
+ mv assets "$MOCKS_DIR/figma/assets"
echo "Generating mocks for Figma: Style Dictionary"
node cli.js --useStyleDictionaryOutput --token "$FIGMA_TOKEN" "$FIGMA_FILE" && \
@@ -16,6 +17,9 @@ function generate_figma() {
}
function generate_sketch() {
+ echo "Exporting assets for Sketch"
+ ./sketchtool.sh "$MOCKS_DIR/sketch/sample_sketchfile.sketch" __mocks__/sketch/exported_assets
+
echo "Generating mocks for Sketch: Document Styles"
node cli.js --dump "$MOCKS_DIR/sketch/sample_sketchfile.sketch" && \
mv hubble-data.json "$MOCKS_DIR/sketch/sample_output.document.json" && \
diff --git a/index.js b/index.js
index 1deb2b2..26b5f19 100644
--- a/index.js
+++ b/index.js
@@ -1,10 +1,14 @@
const fs = require('fs');
+const path = require('path');
+
const pkg = require('./package.json');
const getParser = require('./lib/parser');
const getMappers = require('./lib/mappers');
-const { prettyJSON, writeFile } = require('./lib/utils');
+const { prettyJSON, writeFile, downloadFile } = require('./lib/utils');
const mapToStyleDictionaryTokens = require('./lib/styleDictionary');
+const ASSETS_DIR = 'assets';
+
module.exports = async (args, flags) => {
if (flags.version) return pkg.version;
if (args.length <= 0) throw new Error('No file input passed after npm start');
@@ -21,6 +25,7 @@ module.exports = async (args, flags) => {
version,
response,
fileType,
+ assets,
} = await parser.getTokens();
const mappers = getMappers(fileType);
@@ -50,6 +55,18 @@ module.exports = async (args, flags) => {
await writeFile(`${flags.outputDir}/hubble-data.json`, prettyJSON(mapping));
}
+ if (flags.exportAssets && assets) {
+ const fullAssetsDir = path.join(flags.outputDir, ASSETS_DIR);
+
+ if (!fs.existsSync(fullAssetsDir)) {
+ fs.mkdirSync(fullAssetsDir);
+ }
+
+ assets.forEach(asset => {
+ downloadFile(fullAssetsDir, asset);
+ });
+ }
+
if (flags.dump) {
await writeFile(`${flags.outputDir}/logdump.json`, prettyJSON(response));
}
diff --git a/lib/figma.js b/lib/figma.js
index b61a6e7..51f8f1c 100644
--- a/lib/figma.js
+++ b/lib/figma.js
@@ -1,3 +1,5 @@
+const { toSnakeCase } = require('./utils');
+
/**
* Helper function for flattenChildren
* @param {Object} element a parent element
@@ -45,3 +47,105 @@ exports.findAllTokens = (data, tokenType) =>
.toLowerCase()
.includes(tokenType.toLowerCase()),
);
+
+/**
+ * Parses a flattened Figma API response to get all necessary information
+ * to call the Figma client and receive the image urls.
+ *
+ * @param {Array