From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001 From: Israel Lavi Date: Mon, 21 May 2018 17:42:00 +0300 Subject: init commit onap ui Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi --- utils/build-demo.js | 73 ++++++++++++++++++++++++++++++++ utils/create-icon-map.js | 26 ++++++++++++ utils/create-svg-icons-map.js | 95 +++++++++++++++++++++++++++++++++++++++++ utils/index-for-gh-pages.html | 98 +++++++++++++++++++++++++++++++++++++++++++ utils/main-page.html | 62 +++++++++++++++++++++++++++ utils/scripts/map-sources.js | 9 ++++ 6 files changed, 363 insertions(+) create mode 100644 utils/build-demo.js create mode 100644 utils/create-icon-map.js create mode 100644 utils/create-svg-icons-map.js create mode 100644 utils/index-for-gh-pages.html create mode 100644 utils/main-page.html create mode 100644 utils/scripts/map-sources.js (limited to 'utils') diff --git a/utils/build-demo.js b/utils/build-demo.js new file mode 100644 index 0000000..8f5edda --- /dev/null +++ b/utils/build-demo.js @@ -0,0 +1,73 @@ +const ncp = require('ncp').ncp; +const fs = require('fs'); +const path = require('path') +const svgFolder = './assets/icons'; +const svgOutputFile = './src/style/scss/common/_icons.scss'; + +var copyFiles = function() { + // Copy generated style.css to demo/gen folder + ncp('lib/css/style.css', 'demo/gen', function (err) { + if (err) { + return console.error(err); + } + }); + + // Copy assets folder to demo/gen folder + ncp('assets', 'demo/gen/assets', function (err) { + if (err) { + return console.error(err); + } + }); +}; + +// var parseSvgContent = function(content) { +// var withoutLines = (content+'').replace(/\n|\t|\r/g, ''); +// return withoutLines.replace(/"/g,'\''); +// }; + +// var readFile = function(filePath) { +// return fs.readFileSync(filePath, 'utf8'); +// }; + +// var clearFile = function(filePath) { +// return fs.truncateSync(filePath, 0); +// }; + +// var writeFile = function(filePath){ +// const text = `.sdc-icon { +// display: inline-block; +// text-rendering: auto; +// -webkit-font-smoothing: antialiased; +// -moz-osx-font-smoothing: grayscale; +// width: 16px; +// height: 16px; +// }\n`; +// fs.writeFileSync(filePath, text); +// console.log("The file was saved!"); +// }; + +// var appendSvgIcons = function(content) { +// fs.appendFileSync(svgOutputFile, content); +// }; + +// var readFolder = function(folderPath) { +// var files = fs.readdirSync(svgFolder); +// files.forEach(file => { +// var extension = path.extname(file); +// if (extension ==='.svg'){ +// console.log(folderPath + "/" + file); +// var fileContent = readFile(folderPath + "/" + file); +// var svgContent = parseSvgContent(fileContent); +// var fileName = path.basename(file, '.svg') +// var scssContent = '.sdc-icon-' + fileName + ' {background-image: url("data:image/svg+xml;utf8,' + svgContent + '"); background-repeat: no-repeat;}'; +// appendSvgIcons(scssContent+'\n'); +// } +// }); + +// }; + +// Generate icons.scss file from multiple SVG files +// clearFile(svgOutputFile); +// writeFile(svgOutputFile); +// readFolder(svgFolder); +copyFiles(); diff --git a/utils/create-icon-map.js b/utils/create-icon-map.js new file mode 100644 index 0000000..d980895 --- /dev/null +++ b/utils/create-icon-map.js @@ -0,0 +1,26 @@ + +const fs = require('fs'); +const path = require('path'); + +const svgFolder = './assets/icons/'; +const iconMapFile = './src/react/utils/iconMap.js'; + +let dataToWrite = ''; +let iconNames = []; + +let iconMapDir = path.dirname(iconMapFile); +if (!fs.existsSync(iconMapDir)) { + fs.mkdirSync(iconMapDir); +}; + +fs.readdirSync(svgFolder).forEach(file => { + let fileName = file.split('.'); + if (fileName[0] && fileName[1] === 'svg') { + dataToWrite += `import ${fileName[0]} from '-!svg-react-loader!../../.${svgFolder}${file}';\n`; + iconNames.push(fileName[0]); + } +}); + +dataToWrite += '\n' + `export default {\n\t${iconNames.join(',\n\t')}\n};`; + +fs.writeFileSync(iconMapFile, dataToWrite); diff --git a/utils/create-svg-icons-map.js b/utils/create-svg-icons-map.js new file mode 100644 index 0000000..aec459c --- /dev/null +++ b/utils/create-svg-icons-map.js @@ -0,0 +1,95 @@ +const fs = require('fs'); +const path = require('path'); +const svgFolder = path.resolve(__dirname + '/../assets/sdc-icons/'); +const iconMapFile = path.resolve(__dirname + '/../src/common/icons-map.json'); +const iconMapTSFile = path.resolve(__dirname + '/../src/common/icons-map.ts'); +const disallowedSvgAttributes = ['fill', 'id', 'width', 'height']; +const disallowedSvgStyle = ['fill']; +const disallowedSvgInlineAttributes = ['fill', 'id']; +const disallowedSvgInlineStyle = ['fill']; + +function _escapeStrRegex(str) { + return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); +} +function _makeSvgAttributesRegex(attrs) { + return new RegExp(`\s*(${attrs.map(_escapeStrRegex).join('|')})\s*=\s*("|')[^"']*\\2`, 'g'); +} +function _makeSvgStyleRegex(attrs) { + return new RegExp(`\s*${attrs.map(_escapeStrRegex).join('|')}\s*:[^'";]*;?`, 'g'); +} + +// prepare +const disallowedSvgAttributesRegex = _makeSvgAttributesRegex(disallowedSvgAttributes); +const disallowedSvgStyleRegex = _makeSvgStyleRegex(disallowedSvgStyle); +const disallowedSvgInlineAttributesRegex = _makeSvgAttributesRegex(disallowedSvgInlineAttributes); +const disallowedSvgInlineStyleRegex = _makeSvgStyleRegex(disallowedSvgInlineStyle); + +function addIcon(iconsObject, iconName, iconPath) { + let iconContent = fs.readFileSync(iconPath).toString(); + if (!iconContent) { + return; + } + + let iconInfoMsg = ''; + + // clean the first tag + iconContent = iconContent.replace(/]*>/, (svgTag) => { + let cleanedNum = 0; + const disallowedSvgAttributesMatch = svgTag.match(disallowedSvgAttributesRegex); + if (disallowedSvgAttributesMatch) { + svgTag = svgTag.replace(disallowedSvgAttributesRegex, ''); + cleanedNum += disallowedSvgAttributesMatch.length; + } + const disallowedSvgStyleMatch = svgTag.match(disallowedSvgStyleRegex); + if (disallowedSvgStyleMatch) { + svgTag = svgTag.replace(disallowedSvgStyleRegex, ''); + cleanedNum += disallowedSvgStyleMatch.length; + } + iconInfoMsg += 'ADDED'; + if (cleanedNum > 0) { + iconInfoMsg += `\n\t(cleaned ${cleanedNum} attributes and styles)`; + } + return svgTag; + }); + + const disallowedSvgInlineAttributesMatch = iconContent.match(disallowedSvgInlineAttributesRegex); + if (disallowedSvgInlineAttributesMatch) { + iconInfoMsg += `\n\t* CHECK for ${disallowedSvgInlineAttributesMatch.length} inline attributes [${disallowedSvgInlineAttributes.join(', ')}]`; + } + const disallowedSvgInlineStyleMatch = iconContent.match(disallowedSvgInlineStyleRegex); + if (disallowedSvgInlineStyleMatch) { + iconInfoMsg += `\n\t* CHECK for ${disallowedSvgInlineStyleMatch.length} inline styles [${disallowedSvgInlineStyle.join(', ')}]`; + } + + console.log(`# ${iconName}: ${iconInfoMsg}`); + + iconsObject[iconName] = iconContent; +} + +function main() { + const iconMapDir = path.dirname(iconMapFile); + if (!fs.existsSync(iconMapDir)) { + fs.mkdirSync(iconMapDir); + } + + const iconsObject = {}; + fs.readdirSync(svgFolder).forEach((file) => { + const fileName = file.split('.', 2)[0]; + const fileExtension = file.split('.', 2)[1]; + if (fileExtension === 'svg') { + const filePath = svgFolder + '/' + file; + if (fs.existsSync(filePath)) { + addIcon(iconsObject, fileName, filePath); + } + } + }); + + const dataToWrite = JSON.stringify(iconsObject); + + fs.writeFileSync(iconMapFile, dataToWrite); + fs.writeFileSync(iconMapTSFile, `export default ${dataToWrite};`); + + console.log(`Icons Map JSON created! [${iconMapFile}]`); +} + +main(); diff --git a/utils/index-for-gh-pages.html b/utils/index-for-gh-pages.html new file mode 100644 index 0000000..a6d7f63 --- /dev/null +++ b/utils/index-for-gh-pages.html @@ -0,0 +1,98 @@ + + + + + + + + Storybook + + + + + + + +
+ +
+
React
+
Angular
+
+
+ +
+ +
+ + + diff --git a/utils/main-page.html b/utils/main-page.html new file mode 100644 index 0000000..30fb10f --- /dev/null +++ b/utils/main-page.html @@ -0,0 +1,62 @@ + + + + + + + + Storybook + + + + + +
Welcome to ONAP/UI project!
+
The aim of this project is to create a basic component library, with a unified UX and UI for both Angular and React based projects.
+ + + + \ No newline at end of file diff --git a/utils/scripts/map-sources.js b/utils/scripts/map-sources.js new file mode 100644 index 0000000..3ce6bfb --- /dev/null +++ b/utils/scripts/map-sources.js @@ -0,0 +1,9 @@ +const sorcery = require('sorcery'); + +const argv = require('yargs') + .alias('f', 'file') + .argv; + +sorcery.load(argv.file).then(function (chain) { + chain.write(); +}); -- cgit 1.2.3-korg