@ebay/skin 18.1.0 → 18.2.1

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

@@ -1,231 +0,0 @@
-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`);
-    }
-    return path.join(currentDir, basePath || "", `${filename}.browser.json`);
-}
-
-function getMJSFileName(filename, basePath) {
-    return path.join(currentDir, basePath || "", `${filename}.mjs`);
-}
-
-function getFileName(filename, ext, basePath) {
-    return path.join(currentDir, basePath || "", `${filename}.${ext}`);
-}
-
-function getBrowserRequireSyntax(filename) {
-    return `require: ./${filename}.js`;
-}
-
-function getCSSRequireSyntax(filepath, ext) {
-    let fullFilePath = `${filepath}.${ext}`;
-    if (filepath.endsWith(".css") || filepath.includes("svg")) {
-        fullFilePath = filepath;
-    }
-    return `@import "./${fullFilePath}";\n`;
-}
-
-function getJSRequireSyntax(filepath, ext) {
-    let fullFilePath = `${filepath}.${ext}`;
-    if (filepath.endsWith(".css") || filepath.includes("svg")) {
-        fullFilePath = filepath;
-    }
-    return `require('./${fullFilePath}');\n`;
-}
-
-function getMJSRequireSyntax(filepath, ext) {
-    let fullFilePath = `${filepath}.${ext}`;
-    if (filepath.endsWith(".css") || filepath.includes("svg")) {
-        fullFilePath = filepath;
-    }
-    return `import './${fullFilePath}';\n`;
-}
-
-/* Options:
- *   hasBaseModule: true/false | if the base module should be included in the requires.
- *   isNested: true/fase | if this module has nested additioanl modules
- *   distDir: string | The distDir for modules
- */
-class ModuleBuilder {
-    constructor(moduleName, config, options) {
-        this.moduleName = moduleName;
-        this.config = config;
-        this.additionalModules = config.modules[moduleName] || [];
-        this.options = Object.assign(
-            {
-                hasBaseModule: true,
-                isNested: false,
-                distDir: "",
-                addIndexModules: null,
-            },
-            options,
-        );
-    }
-
-    getFilePath(filename) {
-        let file = filename;
-        let filePath = filename;
-        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 = "../";
-        }
-        return `${prefixPath}dist/${filePath}/${file}`;
-    }
-    async clean() {
-        if (this.options.isNested) {
-            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"));
-            } catch (e) {
-                return;
-            }
-        } else {
-            await removeFile(getBrowserFileName(this.moduleName));
-            await removeFile(getMJSFileName(this.moduleName));
-
-            await removeFile(getFileName(this.moduleName, "js"));
-            await removeFile(getFileName(this.moduleName, "css"));
-        }
-    }
-
-    // Overrides options and additional Modules.
-    // Passes a callback functon to restore overriden data
-    async overrideData(options, additionalModules, callback) {
-        const prevOption = Object.assign({}, this.options);
-        const prevAdditionalModules = this.additionalModules;
-
-        this.additionalModules = additionalModules;
-        this.options = Object.assign({}, this.options, options);
-
-        await callback();
-        this.options = prevOption;
-        this.additionalModules = prevAdditionalModules;
-    }
-
-    async run() {
-        if (this.options.isNested) {
-            // create directory
-            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),
-            );
-
-            if (this.options.addIndexModules) {
-                for (const file of Object.keys(this.options.addIndexModules)) {
-                    if (file === this.moduleName) {
-                        await this.overrideData(
-                            { hasBaseModule: false, isNested: false },
-                            this.options.addIndexModules[file],
-                            async () => {
-                                await this.writeModuleFiles(file);
-                            },
-                        );
-                    } else {
-                        await this.overrideData(
-                            { hasBaseModule: false },
-                            this.options.addIndexModules[file],
-                            async () => {
-                                await this.writeBrowserJSON(file);
-                                await this.writeModuleFiles(file);
-                            },
-                        );
-                    }
-                }
-            }
-
-            for (const file of moduleList) {
-                let modName = path.parse(file).name;
-
-                if (modName === this.moduleName) {
-                    modName = "index";
-                }
-                await this.writeBrowserJSON(modName);
-                await this.writeModuleFiles(modName);
-            }
-        } else {
-            await this.writeBrowserJSON();
-            await this.writeModuleFiles();
-        }
-    }
-
-    async writeBrowserJSON(currentModule) {
-        const additionalRequires = this.additionalModules.map((addFile) =>
-            getBrowserRequireSyntax(addFile),
-        );
-        const filename = currentModule || this.moduleName;
-        const requires = additionalRequires.concat(
-            this.options.hasBaseModule
-                ? [getBrowserRequireSyntax(filename)]
-                : [],
-        );
-
-        const content = { dependencies: requires };
-        return await fs.promises.writeFile(
-            getBrowserFileName(
-                filename,
-                this.options.isNested && this.moduleName,
-            ),
-            await 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 baseDirectory = this.options.isNested ? this.moduleName : false;
-
-        await fs.promises.writeFile(
-            getFileName(mod, "js", baseDirectory),
-            this.parseAdditionalModules(getJSRequireSyntax, "js", {
-                modules,
-                filename,
-            }),
-        );
-
-        await fs.promises.writeFile(
-            getFileName(mod, "css", baseDirectory),
-            this.parseAdditionalModules(getCSSRequireSyntax, "css", {
-                modules,
-                filename,
-            }),
-        );
-
-        await fs.promises.writeFile(
-            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("");
-    }
-}
-
-module.exports = { ModuleBuilder };

package/scripts/import-svgs.js

@@ -1,56 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable no-console */
-"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 { JSDOM } = jsdom;
-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 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");
-        });
-    }
-
-    const existing = oldSymbols.window.document.querySelector(`#${name}`);
-    if (existing) {
-        console.log("existing icon found, updating");
-        existing.parentNode.replaceChild(svgFragment, existing);
-    } else {
-        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
-    );
-}
-
-module.exports = { runImport };

package/scripts/index.js

@@ -1,189 +0,0 @@
-const { listBundles, runCSSBuild } = require("./generate-bundle");
-const { runGenerate } = require("./generate-images");
-const { runGenerateFlags } = require("./generate-flags");
-const { runImport } = require("./import-svgs");
-const { verifyBuild } = require("./verify-build");
-const { generateTopLevel, cleanTopLevel } = require("./generate-imports");
-const {
-    copySVGIcons,
-    copyCustomStyles,
-    copySVGFlags,
-} = require("./storybook/copy");
-const { splitter } = require("./split-icon");
-
-require("yargs") // eslint-disable-line
-    .usage("Usage: $0 <command> [options]")
-    .command(
-        "split <file>",
-        "generates less files with styles from svg icons",
-        (yargs) => {
-            yargs.positional("svg", {
-                describe: "SVG file",
-                demand: true,
-                default: "",
-            });
-        },
-        async (argv) => {
-            try {
-                await splitter(argv.file, argv);
-            } catch (e) {
-                console.log(e);
-            }
-        },
-    )
-    .command(
-        "genSVG",
-        "generates less files with styles from svg icons",
-        () => {},
-        () => {
-            try {
-                runGenerate();
-            } catch (e) {
-                console.log(e);
-            }
-        },
-    )
-    .command(
-        "genFlags",
-        "generates less files with styles from svg flags",
-        () => {},
-        () => {
-            try {
-                runGenerateFlags();
-            } catch (e) {
-                console.log(e);
-            }
-        },
-    )
-
-    .command(
-        "importSVG <svg> <name> <file>",
-        "imports given svg into an icon pack or updates if it exists",
-        (yargs) => {
-            yargs.positional("svg", {
-                describe: "SVG file",
-                demand: true,
-                default: "",
-            });
-            yargs.positional("name", {
-                describe: "The ID of the SVG",
-                demand: true,
-                default: "",
-            });
-            yargs.positional("file", {
-                describe: "The file in skin to append the SVG to",
-                demand: true,
-                default: "",
-            });
-            yargs.option("keep-fill", {
-                describe: "If true, will keep fill property on svg",
-                type: "boolean",
-                default: "false",
-            });
-        },
-        async (argv) => {
-            try {
-                await runImport(argv.svg, argv.name, argv.file, argv);
-            } catch (e) {
-                console.log(e);
-            }
-        },
-    )
-    .command(
-        "list",
-        "List all available modules",
-        (yargs) => {},
-        async (argv) => {
-            await listBundles(argv);
-        },
-    )
-    .command(
-        "bundle <name>",
-        "generates a CDN bundle with the given name",
-        (yargs) => {
-            yargs
-                .positional("name", {
-                    describe: "name to generate bundle",
-                    demand: true,
-                    default: "skin",
-                })
-                .option("scope-class", {
-                    describe: "Scoped class to prefix bundle with",
-                    default: "",
-                })
-                .option("no-minify", {
-                    describe:
-                        "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("modules", {
-                    alias: "m",
-                    type: "array",
-                    describe:
-                        "Space separated list of modules to include. If empty, will include all",
-                    default: [],
-                });
-        },
-        (argv) => {
-            runCSSBuild(argv.name, argv);
-        },
-    )
-    .command(
-        "storybook-copy",
-        "Copies files to storybook",
-        (yargs) => {
-            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",
-                default: true,
-            });
-        },
-        (yargs) => {
-            if (yargs.noSvg) {
-                copySVGIcons();
-                copySVGFlags();
-            }
-            if (yargs.noStyles) {
-                copyCustomStyles();
-            }
-        },
-    )
-    .command(
-        "gen",
-        "Generates all imports",
-        () => {},
-        async () => {
-            await generateTopLevel();
-        },
-    )
-    .command(
-        "clean",
-        "Cleans all imports",
-        () => {},
-        async () => {
-            await cleanTopLevel();
-        },
-    )
-    .command(
-        "verify",
-        "Verifies that build is not broken and there are no unchecked files",
-        () => {},
-        async () => {
-            await verifyBuild();
-        },
-    )
-    .option("verbose", {
-        alias: "v",
-        type: "boolean",
-    })
-    .demandCommand(1)
-    .help().argv;

package/scripts/jekyll-config.js

@@ -1,19 +0,0 @@
-/* eslint-disable no-console */
-/*
- * Updates the Jekyll front matter defaults with the current skin package version from NPM.
- */
-const fs = require("fs");
-const version = require("../package.json").version;
-const files = ["./docs/_config.yml"];
-
-files.forEach((file) => {
-    const newContents = fs
-        .readFileSync(file, "utf8")
-        .replace(/version\:.*\n/gi, `version: ${version}\n`);
-
-    fs.writeFile(file, newContents, "utf8", (err) => {
-        if (err) {
-            return console.log(err);
-        }
-    });
-});

package/scripts/log.js

@@ -1,14 +0,0 @@
-const winston = require("winston");
-
-module.exports = winston.createLogger({
-    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() }),
-    ],
-});

package/scripts/split-icon.js

@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable no-console */
-"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 { JSDOM } = jsdom;
-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 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");
-
-        await fs.promises.writeFile(
-            path.resolve(svgDir, "icon", `${symbolId}.svg`),
-            await html2xhtml2(symbol)
-                .replace("<symbol", "<svg")
-                .replace("</symbol>", "</svg>"),
-        );
-    }
-}
-
-module.exports = { splitter };

package/scripts/storybook/copy.js

@@ -1,62 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const { rawSvgToHtml } = require("../util");
-
-const SVG_ICONS_FILE = path.join(
-    __dirname,
-    "..",
-    "..",
-    "src",
-    "svg",
-    "icons.svg",
-);
-const SVG_FLAGS_FILE = path.join(
-    __dirname,
-    "..",
-    "..",
-    "src",
-    "svg",
-    "flags.svg",
-);
-const CUSTOM_STYLES_FILE = path.join(
-    __dirname,
-    "..",
-    "..",
-    "docs",
-    "custom-styles.html",
-);
-
-const STORYBOOK_HEADER_FILE = path.join(
-    __dirname,
-    "..",
-    "..",
-    ".storybook",
-    "preview-head.html",
-);
-
-function copySVGIcons() {
-    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");
-}
-
-function copySVGFlags() {
-    const svgFlagsContent = fs.readFileSync(SVG_FLAGS_FILE, "utf8");
-    const storyBookSvgIconsContent = `
-    <!-- This is auto-generated content from npm script -->
-    ${rawSvgToHtml(svgFlagsContent)}
-    `;
-
-    fs.appendFileSync(STORYBOOK_HEADER_FILE, storyBookSvgIconsContent, "utf8");
-}
-
-function copyCustomStyles() {
-    const customStylesContent = fs.readFileSync(CUSTOM_STYLES_FILE, "utf8");
-    fs.appendFileSync(STORYBOOK_HEADER_FILE, customStylesContent, "utf8");
-}
-
-module.exports = { copySVGIcons, copySVGFlags, copyCustomStyles };

package/scripts/svgo.config.js

@@ -1,50 +0,0 @@
-module.exports = {
-    gzip: true,
-    multipass: true,
-    original: false,
-    plugins: [
-        "cleanupAttrs",
-        "cleanupEnableBackground",
-        "cleanupListOfValues",
-        "cleanupNumericValues",
-        "collapseGroups",
-        "convertColors",
-        "convertEllipseToCircle",
-        "convertPathData",
-        "convertShapeToPath",
-        "convertStyleToAttrs",
-        "convertTransform",
-        "inlineStyles",
-        "mergePaths",
-        "mergeStyles",
-        "minifyStyles",
-        "moveElemsAttrsToGroup",
-        "moveGroupAttrsToElems",
-        "removeComments",
-        "removeDesc",
-        "removeDimensions",
-        "removeDoctype",
-        "removeEditorsNSData",
-        "removeEmptyAttrs",
-        "removeEmptyContainers",
-        "removeEmptyText",
-        "removeHiddenElems",
-        "removeMetadata",
-        "removeNonInheritableGroupAttrs",
-        "removeRasterImages",
-        "removeScriptElement",
-        "removeStyleElement",
-        "removeTitle",
-        "removeUnknownsAndDefaults",
-        "removeUnusedNS",
-        "removeUselessDefs",
-        "removeUselessStrokeAndFill",
-        "removeViewBox",
-        "removeXMLNS",
-        "removeXMLProcInst",
-        "reusePaths",
-        "sortAttrs",
-        "sortDefsChildren",
-    ],
-    pretty: true,
-};