Merge pull request #29 from marcomontalbano/i27-option-to-remove-page…

…name-from-output-file

Add options to remove 'pageName' from output file

package.json

@@ -19,6 +19,7 @@
     "lerna:install": "lerna exec npm install --stream",
     "lerna:update": "lerna exec npm update --stream",
     "website:start": "lerna run --scope @figma-export/website start --stream",
+    "prewebsite:build": "lerna bootstrap --force-local",
     "website:build": "lerna run --scope @figma-export/website build --stream"
   },
   "author": "Marco Montalbano <me@marcomontalbano.com>",

packages/core/lib/_config.test.js

@@ -14,6 +14,12 @@ const componentWithNumber = {
     type: 'COMPONENT',
 };
 
+const componentWithSlashedName = {
+    id: '9:10',
+    name: 'icon/eye',
+    type: 'COMPONENT',
+};
+
 const component1 = {
     id: '10:8',
     name: 'Figma-Logo',
@@ -69,12 +75,23 @@ const page2 = {
     ],
 };
 
+const createPage = (children) => ({
+    children: [{
+        id: '10:8',
+        name: 'fakePage',
+        type: 'CANVAS',
+        children,
+    }],
+});
+
 module.exports = {
     componentWithNumber,
+    componentWithSlashedName,
     component1,
     component2,
     component3,
     group1,
+    createPage,
     page1,
     page2,
     svg,

packages/output-components-as-es6/README.md

@@ -21,6 +21,8 @@ export const figmaExport = `<svg width="60" height="60" viewBox="0 0 60 60" fill
 export const figmaLogo = `<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg>`;
 ```
 
+> **Tip**: A component named `icon/eye` will be exported as variable named `iconEye`.
+
 ## Install
 
 Using npm:

packages/output-components-as-svg/README.md

@@ -4,19 +4,31 @@
 
 With this outputter you can export all components as svg into the specified output folder.
 
-This is a sample of the output:
+This is a sample of the output from this [Figma file](https://www.figma.com/file/RSzpKJcnb6uBRQ3rOfLIyUs5):
 
 ```sh
 $ tree output/
-# output/
-# ├── icons-figma-export.svg
-# ├── icons-figma-logo.svg
-# ├── monochrome-figma-blue.svg
-# ├── monochrome-figma-green.svg
-# ├── monochrome-figma-purple.svg
-# └── monochrome-figma-red.svg
+# output
+# ├── icons
+# │   ├── figma-arrow.svg
+# │   ├── figma-export.svg
+# │   └── figma-logo.svg
+# ├── monochrome
+# │   ├── figma-blue.svg
+# │   ├── figma-green.svg
+# │   ├── figma-purple.svg
+# │   └── figma-red.svg
+# └── unit-test
+#     ├── figma
+#     │   ├── logo
+#     │   │   ├── main (bright).svg
+#     │   │   └── main.svg
+#     │   └── logo.svg
+#     └── figma default logo.svg
 ```
 
+> **Tip**: A component named `icon/eye` will be exported as `eye.svg` inside the `icon` folder.
+
 ## Install
 
 Using npm:

packages/output-components-as-svg/index.js

@@ -2,12 +2,20 @@ const fs = require('fs');
 const path = require('path');
 const makeDir = require('make-dir');
 
-module.exports = ({ output }) => {
+module.exports = ({
+    output,
+    getDirname = (options) => options.dirname,
+    getBasename = (options) => `${options.pageName}-${options.basename}.svg`,
+}) => {
     return async (pages) => {
         pages.forEach(({ name: pageName, components }) => {
             components.forEach(({ svg, figmaExport }) => {
-                const filePath = makeDir.sync(path.resolve(output, figmaExport.dirname));
-                fs.writeFileSync(path.resolve(filePath, `${pageName}-${figmaExport.basename}.svg`), svg);
+                const options = {
+                    pageName,
+                    ...figmaExport,
+                };
+                const filePath = makeDir.sync(path.resolve(output, getDirname(options)));
+                fs.writeFileSync(path.resolve(filePath, getBasename(options)), svg);
             });
         });
     };

packages/output-components-as-svg/index.test.js

@@ -27,4 +27,47 @@ describe('outputter as svg', () => {
         expect(writeFileSync.firstCall).to.be.calledWithMatch('output/page1-Figma-Logo.svg');
         expect(writeFileSync.secondCall).to.be.calledWithMatch('output/page1-Search.svg');
     });
+
+    it('should create folder if component names contain slashes', async () => {
+        const writeFileSync = sinon.stub(fs, 'writeFileSync');
+        const fakePages = figmaDocument.createPage([figmaDocument.componentWithSlashedName]);
+        const pages = figma.getPages(fakePages);
+
+        await outputter({
+            output: 'output',
+        })(pages);
+
+        expect(writeFileSync).to.be.calledOnce;
+        expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/fakePage-eye.svg');
+    });
+
+    describe('options', () => {
+        const fakePages = figmaDocument.createPage([figmaDocument.componentWithSlashedName]);
+        const pages = figma.getPages(fakePages);
+
+        it('should be able to customize "basename"', async () => {
+            const writeFileSync = sinon.stub(fs, 'writeFileSync');
+
+            await outputter({
+                output: 'output',
+                getBasename: (options) => `${options.basename}.svg`,
+            })(pages);
+
+            expect(writeFileSync).to.be.calledOnce;
+            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/eye.svg');
+        });
+
+        it('should be able to customize "dirname"', async () => {
+            const writeFileSync = sinon.stub(fs, 'writeFileSync');
+
+            await outputter({
+                output: 'output',
+                getBasename: (options) => `${options.basename}.svg`,
+                getDirname: (options) => `${options.pageName}/${options.dirname}`,
+            })(pages);
+
+            expect(writeFileSync).to.be.calledOnce;
+            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/eye.svg');
+        });
+    });
 });