@ebay/skin 16.0.0 → 16.1.0-0

package/scripts/generate-imports/module-builder.js

@@ -1,22 +1,22 @@
-const fs = require('fs');
-const prettier = require('prettier');
-const path = require('path');
-const { removeFile } = require('../util');
+const fs = require("fs");
+const prettier = require("prettier");
+const path = require("path");
+const { removeFile } = require("../util");
 const currentDir = path.dirname(path.dirname(__dirname));
 
 function getBrowserFileName(filename, basePath) {
-    if (filename === 'index') {
-        return path.join(currentDir, basePath || '', `browser.json`);
+    if (filename === "index") {
+        return path.join(currentDir, basePath || "", `browser.json`);
     }
-    return path.join(currentDir, basePath || '', `${filename}.browser.json`);
+    return path.join(currentDir, basePath || "", `${filename}.browser.json`);
 }
 
 function getMJSFileName(filename, basePath) {
-    return path.join(currentDir, basePath || '', `${filename}.mjs`);
+    return path.join(currentDir, basePath || "", `${filename}.mjs`);
 }
 
 function getFileName(filename, ext, basePath) {
-    return path.join(currentDir, basePath || '', `${filename}.${ext}`);
+    return path.join(currentDir, basePath || "", `${filename}.${ext}`);
 }
 
 function getBrowserRequireSyntax(filename) {
@@ -25,7 +25,7 @@ function getBrowserRequireSyntax(filename) {
 
 function getCSSRequireSyntax(filepath, ext) {
     let fullFilePath = `${filepath}.${ext}`;
-    if (filepath.endsWith('.css') || filepath.includes('svg')) {
+    if (filepath.endsWith(".css") || filepath.includes("svg")) {
         fullFilePath = filepath;
     }
     return `@import "./${fullFilePath}";\n`;
@@ -33,7 +33,7 @@ function getCSSRequireSyntax(filepath, ext) {
 
 function getJSRequireSyntax(filepath, ext) {
     let fullFilePath = `${filepath}.${ext}`;
-    if (filepath.endsWith('.css') || filepath.includes('svg')) {
+    if (filepath.endsWith(".css") || filepath.includes("svg")) {
         fullFilePath = filepath;
     }
     return `require('./${fullFilePath}');\n`;
@@ -41,7 +41,7 @@ function getJSRequireSyntax(filepath, ext) {
 
 function getMJSRequireSyntax(filepath, ext) {
     let fullFilePath = `${filepath}.${ext}`;
-    if (filepath.endsWith('.css') || filepath.includes('svg')) {
+    if (filepath.endsWith(".css") || filepath.includes("svg")) {
         fullFilePath = filepath;
     }
     return `import './${fullFilePath}';\n`;
@@ -61,7 +61,7 @@ class ModuleBuilder {
             {
                 hasBaseModule: true,
                 isNested: false,
-                distDir: '',
+                distDir: "",
                 addIndexModules: null,
             },
             options
@@ -71,13 +71,13 @@ class ModuleBuilder {
     getFilePath(filename) {
         let file = filename;
         let filePath = filename;
-        let prefixPath = '';
+        let prefixPath = "";
         if (this.config.overrideFile[filename]) {
             file = this.config.overrideFile[filename];
         } else if (this.options.isNested) {
-            filePath = filename === this.moduleName ? 'index' : this.moduleName;
-            file = file === this.moduleName ? 'index' : filename;
-            prefixPath = '../';
+            filePath = filename === this.moduleName ? "index" : this.moduleName;
+            file = file === this.moduleName ? "index" : filename;
+            prefixPath = "../";
         }
         return `${prefixPath}dist/${filePath}/${file}`;
     }
@@ -86,8 +86,8 @@ class ModuleBuilder {
             try {
                 await fs.promises.rm(this.moduleName, { recursive: true });
                 await removeFile(getMJSFileName(this.moduleName));
-                await removeFile(getFileName(this.moduleName, 'js'));
-                await removeFile(getFileName(this.moduleName, 'css'));
+                await removeFile(getFileName(this.moduleName, "js"));
+                await removeFile(getFileName(this.moduleName, "css"));
             } catch (e) {
                 return;
             }
@@ -95,8 +95,8 @@ class ModuleBuilder {
             await removeFile(getBrowserFileName(this.moduleName));
             await removeFile(getMJSFileName(this.moduleName));
 
-            await removeFile(getFileName(this.moduleName, 'js'));
-            await removeFile(getFileName(this.moduleName, 'css'));
+            await removeFile(getFileName(this.moduleName, "js"));
+            await removeFile(getFileName(this.moduleName, "css"));
         }
     }
 
@@ -117,7 +117,9 @@ class ModuleBuilder {
     async run() {
         if (this.options.isNested) {
             // create directory
-            await fs.promises.mkdir(path.join(currentDir, this.moduleName), { recursive: true });
+            await fs.promises.mkdir(path.join(currentDir, this.moduleName), {
+                recursive: true,
+            });
             // Get all modules now in directory
             const moduleList = await fs.promises.readdir(
                 path.join(this.options.distDir, this.moduleName)
@@ -150,7 +152,7 @@ class ModuleBuilder {
                 let modName = path.parse(file).name;
 
                 if (modName === this.moduleName) {
-                    modName = 'index';
+                    modName = "index";
                 }
                 await this.writeBrowserJSON(modName);
                 await this.writeModuleFiles(modName);
@@ -167,42 +169,62 @@ class ModuleBuilder {
         );
         const filename = currentModule || this.moduleName;
         const requires = additionalRequires.concat(
-            this.options.hasBaseModule ? [getBrowserRequireSyntax(filename)] : []
+            this.options.hasBaseModule
+                ? [getBrowserRequireSyntax(filename)]
+                : []
         );
 
         const content = { dependencies: requires };
         return await fs.promises.writeFile(
-            getBrowserFileName(filename, this.options.isNested && this.moduleName),
-            prettier.format(JSON.stringify(content), { parser: 'json' })
+            getBrowserFileName(
+                filename,
+                this.options.isNested && this.moduleName
+            ),
+            prettier.format(JSON.stringify(content), { parser: "json" })
         );
     }
 
     async writeModuleFiles(currentModule) {
         const modules = this.additionalModules;
         const mod = currentModule || this.moduleName;
-        const filename = this.options.hasBaseModule ? this.getFilePath(mod) : null;
+        const filename = this.options.hasBaseModule
+            ? this.getFilePath(mod)
+            : null;
         const baseDirectory = this.options.isNested ? this.moduleName : false;
 
         await fs.promises.writeFile(
-            getFileName(mod, 'js', baseDirectory),
-            this.parseAdditionalModules(getJSRequireSyntax, 'js', { modules, filename })
+            getFileName(mod, "js", baseDirectory),
+            this.parseAdditionalModules(getJSRequireSyntax, "js", {
+                modules,
+                filename,
+            })
         );
 
         await fs.promises.writeFile(
-            getFileName(mod, 'css', baseDirectory),
-            this.parseAdditionalModules(getCSSRequireSyntax, 'css', { modules, filename })
+            getFileName(mod, "css", baseDirectory),
+            this.parseAdditionalModules(getCSSRequireSyntax, "css", {
+                modules,
+                filename,
+            })
         );
 
         await fs.promises.writeFile(
-            getFileName(mod, 'mjs', baseDirectory),
-            this.parseAdditionalModules(getMJSRequireSyntax, 'css', { modules, filename })
+            getFileName(mod, "mjs", baseDirectory),
+            this.parseAdditionalModules(getMJSRequireSyntax, "css", {
+                modules,
+                filename,
+            })
         );
     }
 
     parseAdditionalModules(getSyntax, ext, { modules, filename }) {
-        const additioanlContent = modules.map((addFile) => getSyntax(addFile, ext));
-        const content = additioanlContent.concat(filename ? [getSyntax(filename, 'css')] : []);
-        return content.join('');
+        const additioanlContent = modules.map((addFile) =>
+            getSyntax(addFile, ext)
+        );
+        const content = additioanlContent.concat(
+            filename ? [getSyntax(filename, "css")] : []
+        );
+        return content.join("");
     }
 }
 

package/scripts/import-svgs.js

@@ -1,48 +1,56 @@
 #!/usr/bin/env node
 /* eslint-disable no-console */
-'use strict';
-const fs = require('fs');
-const path = require('path');
+"use strict";
+const fs = require("fs");
+const path = require("path");
 const currentDir = path.dirname(__dirname);
-const svgDir = path.resolve(currentDir, 'src', 'svg');
-const { optimize } = require('svgo');
-const jsdom = require('jsdom');
+const svgDir = path.resolve(currentDir, "src", "svg");
+const { optimize } = require("svgo");
+const jsdom = require("jsdom");
 const { JSDOM } = jsdom;
-const svgConfig = require('./svgo.config');
-const { html2xhtml } = require('./util');
+const svgConfig = require("./svgo.config");
+const { html2xhtml } = require("./util");
 
 async function runImport(svg, name, file, argv) {
-    const skinFile = await fs.promises.readFile(path.resolve(svgDir, `${file}.svg`), 'utf8');
-    const svgFile = await fs.promises.readFile(svg, 'utf8');
+    const skinFile = await fs.promises.readFile(
+        path.resolve(svgDir, `${file}.svg`),
+        "utf8"
+    );
+    const svgFile = await fs.promises.readFile(svg, "utf8");
 
-    const oldSymbols = new JSDOM(skinFile, { contentType: 'text/html' });
+    const oldSymbols = new JSDOM(skinFile, { contentType: "text/html" });
 
     const newSVGFile = optimize(svgFile, svgConfig)
-        .data.replace('<svg', '<symbol')
-        .replace('</svg', '</symbol');
-
-    const svgJsDom = new JSDOM(newSVGFile, { contentType: 'text/xml' });
-    const svgFragment = svgJsDom.window.document.querySelector('symbol');
-    svgFragment.setAttribute('id', name);
-    if (argv.keepFill === 'false') {
-        svgFragment.removeAttribute('fill');
-        svgFragment.querySelectorAll('[fill]').forEach((node) => {
-            node.removeAttribute('fill');
+        .data.replace("<svg", "<symbol")
+        .replace("</svg", "</symbol");
+
+    const svgJsDom = new JSDOM(newSVGFile, { contentType: "text/xml" });
+    const svgFragment = svgJsDom.window.document.querySelector("symbol");
+    svgFragment.setAttribute("id", name);
+    if (argv.keepFill === "false") {
+        svgFragment.removeAttribute("fill");
+        svgFragment.querySelectorAll("[fill]").forEach((node) => {
+            node.removeAttribute("fill");
         });
     }
 
     const existing = oldSymbols.window.document.querySelector(`#${name}`);
     if (existing) {
-        console.log('existing icon found, updating');
+        console.log("existing icon found, updating");
         existing.parentNode.replaceChild(svgFragment, existing);
     } else {
-        console.log('adding new icon');
-        oldSymbols.window.document.querySelector('svg').appendChild(svgFragment);
+        console.log("adding new icon");
+        oldSymbols.window.document
+            .querySelector("svg")
+            .appendChild(svgFragment);
     }
 
     const newFileData = html2xhtml(oldSymbols);
 
-    await fs.promises.writeFile(path.resolve(svgDir, `${file}.svg`), newFileData);
+    await fs.promises.writeFile(
+        path.resolve(svgDir, `${file}.svg`),
+        newFileData
+    );
 }
 
 module.exports = { runImport };

package/scripts/index.js

@@ -1,21 +1,21 @@
-const { listBundles, runCSSBuild } = require('./generate-bundle');
-const { runGenerate } = require('./generate-images');
-const { runImport } = require('./import-svgs');
-const { verifyBuild } = require('./verify-build');
-const { generateTopLevel, cleanTopLevel } = require('./generate-imports');
-const { copySVGIcons, copyCustomStyles } = require('./storybook/copy');
-const { splitter } = require('./split-icon');
+const { listBundles, runCSSBuild } = require("./generate-bundle");
+const { runGenerate } = require("./generate-images");
+const { runImport } = require("./import-svgs");
+const { verifyBuild } = require("./verify-build");
+const { generateTopLevel, cleanTopLevel } = require("./generate-imports");
+const { copySVGIcons, copyCustomStyles } = require("./storybook/copy");
+const { splitter } = require("./split-icon");
 
-require('yargs') // eslint-disable-line
-    .usage('Usage: $0 <command> [options]')
+require("yargs") // eslint-disable-line
+    .usage("Usage: $0 <command> [options]")
     .command(
-        'split <file>',
-        'generates less files with styles from svg icons',
+        "split <file>",
+        "generates less files with styles from svg icons",
         (yargs) => {
-            yargs.positional('svg', {
-                describe: 'SVG file',
+            yargs.positional("svg", {
+                describe: "SVG file",
                 demand: true,
-                default: '',
+                default: "",
             });
         },
         async (argv) => {
@@ -27,8 +27,8 @@ require('yargs') // eslint-disable-line
         }
     )
     .command(
-        'genSVG',
-        'generates less files with styles from svg icons',
+        "genSVG",
+        "generates less files with styles from svg icons",
         () => {},
         () => {
             try {
@@ -40,28 +40,28 @@ require('yargs') // eslint-disable-line
     )
 
     .command(
-        'importSVG <svg> <name> <file>',
-        'imports given svg into an icon pack or updates if it exists',
+        "importSVG <svg> <name> <file>",
+        "imports given svg into an icon pack or updates if it exists",
         (yargs) => {
-            yargs.positional('svg', {
-                describe: 'SVG file',
+            yargs.positional("svg", {
+                describe: "SVG file",
                 demand: true,
-                default: '',
+                default: "",
             });
-            yargs.positional('name', {
-                describe: 'The ID of the SVG',
+            yargs.positional("name", {
+                describe: "The ID of the SVG",
                 demand: true,
-                default: '',
+                default: "",
             });
-            yargs.positional('file', {
-                describe: 'The file in skin to append the SVG to',
+            yargs.positional("file", {
+                describe: "The file in skin to append the SVG to",
                 demand: true,
-                default: '',
+                default: "",
             });
-            yargs.option('keep-fill', {
-                describe: 'If true, will keep fill property on svg',
-                type: 'boolean',
-                default: 'false',
+            yargs.option("keep-fill", {
+                describe: "If true, will keep fill property on svg",
+                type: "boolean",
+                default: "false",
             });
         },
         async (argv) => {
@@ -73,41 +73,41 @@ require('yargs') // eslint-disable-line
         }
     )
     .command(
-        'list',
-        'List all available modules',
+        "list",
+        "List all available modules",
         (yargs) => {},
         async (argv) => {
             await listBundles(argv);
         }
     )
     .command(
-        'bundle <name>',
-        'generates a CDN bundle with the given name',
+        "bundle <name>",
+        "generates a CDN bundle with the given name",
         (yargs) => {
             yargs
-                .positional('name', {
-                    describe: 'name to generate bundle',
+                .positional("name", {
+                    describe: "name to generate bundle",
                     demand: true,
-                    default: 'skin',
+                    default: "skin",
                 })
-                .option('scope-class', {
-                    describe: 'Scoped class to prefix bundle with',
-                    default: '',
+                .option("scope-class", {
+                    describe: "Scoped class to prefix bundle with",
+                    default: "",
                 })
-                .option('no-minify', {
+                .option("no-minify", {
                     describe:
-                        'Skips minify stage. Should set this when another bundler like lasso will be used.',
-                    type: 'boolean',
+                        "Skips minify stage. Should set this when another bundler like lasso will be used.",
+                    type: "boolean",
                 })
-                .option('scope-specificity', {
-                    describe: 'How many times to repeat scope',
-                    default: '1',
+                .option("scope-specificity", {
+                    describe: "How many times to repeat scope",
+                    default: "1",
                 })
-                .option('modules', {
-                    alias: 'm',
-                    type: 'array',
+                .option("modules", {
+                    alias: "m",
+                    type: "array",
                     describe:
-                        'Space separated list of modules to include. If empty, will include all',
+                        "Space separated list of modules to include. If empty, will include all",
                     default: [],
                 });
         },
@@ -116,17 +116,17 @@ require('yargs') // eslint-disable-line
         }
     )
     .command(
-        'storybook-copy',
-        'Copies files to storybook',
+        "storybook-copy",
+        "Copies files to storybook",
         (yargs) => {
-            yargs.option('no-svg', {
-                describe: 'Skips copying svgs. Default is false',
-                type: 'boolean',
+            yargs.option("no-svg", {
+                describe: "Skips copying svgs. Default is false",
+                type: "boolean",
                 default: true,
             });
-            yargs.option('no-styles', {
-                describe: 'Skips copying styles. Default is false',
-                type: 'boolean',
+            yargs.option("no-styles", {
+                describe: "Skips copying styles. Default is false",
+                type: "boolean",
                 default: true,
             });
         },
@@ -140,32 +140,32 @@ require('yargs') // eslint-disable-line
         }
     )
     .command(
-        'gen',
-        'Generates all imports',
+        "gen",
+        "Generates all imports",
         () => {},
         async () => {
             await generateTopLevel();
         }
     )
     .command(
-        'clean',
-        'Cleans all imports',
+        "clean",
+        "Cleans all imports",
         () => {},
         async () => {
             await cleanTopLevel();
         }
     )
     .command(
-        'verify',
-        'Verifies that build is not broken and there are no unchecked files',
+        "verify",
+        "Verifies that build is not broken and there are no unchecked files",
         () => {},
         async () => {
             await verifyBuild();
         }
     )
-    .option('verbose', {
-        alias: 'v',
-        type: 'boolean',
+    .option("verbose", {
+        alias: "v",
+        type: "boolean",
     })
     .demandCommand(1)
     .help().argv;

package/scripts/jekyll-config.js

@@ -2,15 +2,18 @@
 /*
  * Updates the Jekyll front matter defaults with the current skin package version from NPM.
  */
-const fs = require('fs');
-const files = ['./docs/_config.yml'];
+const fs = require("fs");
+const files = ["./docs/_config.yml"];
 
 files.forEach((file) => {
     const newContents = fs
-        .readFileSync(file, 'utf8')
-        .replace(/version\:.*\n/gi, `version: ${process.env.npm_package_version}\n`);
+        .readFileSync(file, "utf8")
+        .replace(
+            /version\:.*\n/gi,
+            `version: ${process.env.npm_package_version}\n`
+        );
 
-    fs.writeFile(file, newContents, 'utf8', (err) => {
+    fs.writeFile(file, newContents, "utf8", (err) => {
         if (err) {
             return console.log(err);
         }

package/scripts/log.js

@@ -1,12 +1,14 @@
-const winston = require('winston');
+const winston = require("winston");
 
 module.exports = winston.createLogger({
-    level: 'debug',
+    level: "debug",
     format: winston.format.combine(
         winston.format.splat(),
         winston.format.simple(),
         winston.format.colorize(),
         winston.format.json()
     ),
-    transports: [new winston.transports.Console({ format: winston.format.simple() })],
+    transports: [
+        new winston.transports.Console({ format: winston.format.simple() }),
+    ],
 });

package/scripts/split-icon.js

@@ -1,29 +1,34 @@
 #!/usr/bin/env node
 /* eslint-disable no-console */
-'use strict';
-const fs = require('fs');
-const path = require('path');
+"use strict";
+const fs = require("fs");
+const path = require("path");
 const currentDir = path.dirname(__dirname);
-const svgDir = path.resolve(currentDir, 'src', 'svg');
-const { optimize } = require('svgo');
-const jsdom = require('jsdom');
+const svgDir = path.resolve(currentDir, "src", "svg");
+const { optimize } = require("svgo");
+const jsdom = require("jsdom");
 const { JSDOM } = jsdom;
-const svgConfig = require('./svgo.config');
-const { html2xhtml2 } = require('./util');
+const svgConfig = require("./svgo.config");
+const { html2xhtml2 } = require("./util");
 
 async function splitter(file, argv) {
-    const skinFile = await fs.promises.readFile(path.resolve(svgDir, `${file}.svg`), 'utf8');
+    const skinFile = await fs.promises.readFile(
+        path.resolve(svgDir, `${file}.svg`),
+        "utf8"
+    );
 
     const symbols = JSDOM.fragment(skinFile);
 
-    for (const symbol of symbols.querySelectorAll('symbol')) {
-        const symbolId = symbol.getAttribute('id');
-        symbol.removeAttribute('id');
-        symbol.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    for (const symbol of symbols.querySelectorAll("symbol")) {
+        const symbolId = symbol.getAttribute("id");
+        symbol.removeAttribute("id");
+        symbol.setAttribute("xmlns", "http://www.w3.org/2000/svg");
 
         await fs.promises.writeFile(
-            path.resolve(svgDir, 'icon', `${symbolId}.svg`),
-            html2xhtml2(symbol).replace('<symbol', '<svg').replace('</symbol>', '</svg>')
+            path.resolve(svgDir, "icon", `${symbolId}.svg`),
+            html2xhtml2(symbol)
+                .replace("<symbol", "<svg")
+                .replace("</symbol>", "</svg>")
         );
     }
 }

package/scripts/storybook/copy.js

@@ -1,25 +1,44 @@
-const fs = require('fs');
-const path = require('path');
-const { rawSvgToHtml } = require('../util');
+const fs = require("fs");
+const path = require("path");
+const { rawSvgToHtml } = require("../util");
 
-const SVG_ICONS_FILE = path.join(__dirname, '..', '..', 'src', 'svg', 'icons.svg');
-const CUSTOM_STYLES_FILE = path.join(__dirname, '..', '..', 'docs', 'custom-styles.html');
+const SVG_ICONS_FILE = path.join(
+    __dirname,
+    "..",
+    "..",
+    "src",
+    "svg",
+    "icons.svg"
+);
+const CUSTOM_STYLES_FILE = path.join(
+    __dirname,
+    "..",
+    "..",
+    "docs",
+    "custom-styles.html"
+);
 
-const STORYBOOK_HEADER_FILE = path.join(__dirname, '..', '..', '.storybook', 'preview-head.html');
+const STORYBOOK_HEADER_FILE = path.join(
+    __dirname,
+    "..",
+    "..",
+    ".storybook",
+    "preview-head.html"
+);
 
 function copySVGIcons() {
-    const svgIconsContent = fs.readFileSync(SVG_ICONS_FILE, 'utf8');
+    const svgIconsContent = fs.readFileSync(SVG_ICONS_FILE, "utf8");
     const storyBookSvgIconsContent = `
     <!-- This is auto-generated content from npm script -->
     ${rawSvgToHtml(svgIconsContent)}
     `;
 
-    fs.writeFileSync(STORYBOOK_HEADER_FILE, storyBookSvgIconsContent, 'utf8');
+    fs.writeFileSync(STORYBOOK_HEADER_FILE, storyBookSvgIconsContent, "utf8");
 }
 
 function copyCustomStyles() {
-    const customStylesContent = fs.readFileSync(CUSTOM_STYLES_FILE, 'utf8');
-    fs.appendFileSync(STORYBOOK_HEADER_FILE, customStylesContent, 'utf8');
+    const customStylesContent = fs.readFileSync(CUSTOM_STYLES_FILE, "utf8");
+    fs.appendFileSync(STORYBOOK_HEADER_FILE, customStylesContent, "utf8");
 }
 
 module.exports = { copySVGIcons, copyCustomStyles };