Replace 'variablePrefix' and 'variableSuffix' with 'getVariableName' …

…(output-components-as-es6)

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

@@ -2,13 +2,11 @@ const fs = require('fs');
 const path = require('path');
 const makeDir = require('make-dir');
 const svgToMiniDataURI = require('mini-svg-data-uri');
-
-const { getVariableName } = require('./utils');
+const { camelCase } = require('@figma-export/output-components-utils');
 
 module.exports = ({
     output,
-    variablePrefix = '',
-    variableSuffix = '',
+    getVariableName = (options) => camelCase(options.componentName.trim()),
     useBase64 = false,
     useDataUrl = false,
 }) => {
@@ -17,18 +15,30 @@ module.exports = ({
         pages.forEach(({ name: pageName, components }) => {
             let code = '';
 
-            components.forEach(({ name: componentName, svg }) => {
-                const variableName = getVariableName(`${variablePrefix} ${componentName} ${variableSuffix}`);
-                let variableValue = svg;
+            components.forEach(({ name: componentName, svg, figmaExport }) => {
+                const options = {
+                    pageName,
+                    componentName,
+                    ...figmaExport,
+                };
+
+                const variableName = getVariableName(options);
+                let variableValue;
+
+                if (/^[\d]+/.test(variableName)) {
+                    throw new Error(`"${componentName.trim()}" thrown an error: component names cannot start with a number.`);
+                }
 
-                // eslint-disable-next-line default-case
                 switch (true) {
                 case useBase64:
                     variableValue = Buffer.from(svg).toString('base64');
                     break;
                 case useDataUrl:
                     variableValue = svgToMiniDataURI(svg);
                     break;
+                default:
+                    variableValue = svg;
+                    break;
                 }
 
                 if (code.includes(`export const ${variableName} =`)) {

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

@@ -4,6 +4,7 @@
 const { expect } = chai;
 
 const fs = require('fs');
+const { camelCase } = require('@figma-export/output-components-utils');
 
 const figmaDocument = require('../core/lib/_config.test');
 const figma = require('../core/lib/figma');
@@ -36,8 +37,7 @@ describe('outputter as es6', () => {
 
         await outputter({
             output: 'output',
-            variablePrefix: 'i',
-            variableSuffix: 'my ico',
+            getVariableName: (options) => camelCase(`i ${options.componentName} my ico`),
         })(pages);
 
         expect(writeFileSync).to.be.calledOnce;

packages/output-components-as-es6/package.json

@@ -14,6 +14,7 @@
         "access": "public"
     },
     "dependencies": {
+        "@figma-export/output-components-utils": "^1.2.0",
         "make-dir": "~3.0.0",
         "mini-svg-data-uri": "~1.1.3"
     }

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

@@ -15,6 +15,7 @@ module.exports = ({
                     componentName,
                     ...figmaExport,
                 };
+
                 const filePath = makeDir.sync(path.resolve(output, getDirname(options)));
                 fs.writeFileSync(path.resolve(filePath, getBasename(options)), svg);
             });

packages/output-components-utils/README.md

@@ -0,0 +1,17 @@
+# @figma-export/output-components-utils
+
+> Utils for [@figma-export](https://github.com/marcomontalbano/figma-export) outputters.
+
+## Install
+
+Using npm:
+
+```sh
+npm install --save-dev @figma-export/output-components-utils
+```
+
+or using yarn:
+
+```sh
+yarn add @figma-export/output-components-utils --dev
+```

packages/output-components-utils/index.js

@@ -0,0 +1,11 @@
+const camelCase = (str) => str.replace(/[\])}]+/g, '').replace(/^([A-Z])|[\s-_([/\\{]+(\w)/g, (match, p1, p2) => {
+    if (p2) {
+        return p2.toUpperCase();
+    }
+
+    return p1.toLowerCase();
+});
+
+module.exports = {
+    camelCase,
+};

packages/output-components-utils/index.test.js

@@ -0,0 +1,17 @@
+const { expect } = chai;
+
+const utils = require('./index');
+
+describe('utils', () => {
+    it('getVariableName', async () => {
+        expect(utils.camelCase('a')).to.eql('a');
+        expect(utils.camelCase('a word')).to.eql('aWord');
+        expect(utils.camelCase('a-word')).to.eql('aWord');
+        expect(utils.camelCase('a/word')).to.eql('aWord');
+        expect(utils.camelCase('a\\word')).to.eql('aWord');
+        expect(utils.camelCase('a[wor]d')).to.eql('aWord');
+        expect(utils.camelCase('a [word]')).to.eql('aWord');
+        expect(utils.camelCase('a (word)')).to.eql('aWord');
+        expect(utils.camelCase('a {word}')).to.eql('aWord');
+    });
+});

packages/output-components-utils/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@figma-export/output-components-utils",
+    "version": "1.2.0",
+    "description": "Utils for @figma-export outputters",
+    "main": "index.js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/marcomontalbano/figma-exporter.git",
+        "directory": "packages/output-components-utils"
+    },
+    "author": "Marco Montalbano <me@marcomontalbano.com>",
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+
+    }
+}