aboutsummaryrefslogtreecommitdiffstats
path: root/utils
diff options
context:
space:
mode:
Diffstat (limited to 'utils')
-rw-r--r--utils/build-demo.js73
-rw-r--r--utils/create-icon-map.js26
-rw-r--r--utils/create-svg-icons-map.js95
-rw-r--r--utils/index-for-gh-pages.html98
-rw-r--r--utils/main-page.html62
-rw-r--r--utils/scripts/map-sources.js9
6 files changed, 363 insertions, 0 deletions
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 <svg> tag
+ iconContent = iconContent.replace(/<svg\b[^>]*>/, (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 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+ <title>Storybook</title>
+ <style>
+ body, html {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ }
+ .header {
+ display: flex;
+ padding: 18px 40px 0 40px;
+ }
+ .logo {
+ margin-right: 95px;
+ cursor: pointer;
+ }
+ img {
+ width: 125px;
+ height: 26px;
+ }
+ .showcase-header {
+ display: flex;
+ }
+ .case-tab-name {
+ font-family: OpenSans, OpenSans-Regular, 'Open Sans', Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.71;
+ letter-spacing: -0.2px;
+ margin: 0 20px;
+ padding: 4px 8px 12px 8px;
+ color: #5a5a5a;
+ cursor: pointer;
+ text-transform: uppercase;
+ }
+ .case-tab-name[active=true] {
+ color: #009fdb;
+ border-bottom: solid 2px #009fdb;
+ }
+ .showcase-wrapper {
+ height: calc(100% - 60px);
+ display: flex;
+ flex-direction: column;
+ background-color: #FFFFFF;
+ }
+ .showcase-iframe {
+ height: 100%;
+ border-top: solid 1px #aaaaaa;
+ }
+ </style>
+
+ <script>
+ var shows = {
+ mainPage: "main-page.html",
+ react: "react/index.html",
+ angular: "angular/index.html"
+ };
+ function show(type){
+ document.getElementById('showcase').src = shows[type];
+ setActiveTab(type);
+ }
+ function setActiveTab(type) {
+ var allTabs = document.getElementsByClassName('case-tab-name');
+ for(var i = 0; i < allTabs.length; i++ ) {
+ if(allTabs[i].getAttribute('id') === type+'-tab') {
+ allTabs[i].setAttribute('active', true);
+ }
+ else {
+ allTabs[i].setAttribute('active', false);
+ }
+ }
+ }
+ </script>
+
+</head>
+
+<body>
+ <div class="header">
+ <div class="logo" onClick="show('mainPage')"><img src="assets/images/logo_onap.png"/></div>
+ <div class="showcase-header">
+ <div class="case-tab-name" id="react-tab" onClick="show('react')">React</div>
+ <div class="case-tab-name" id="angular-tab" onClick="show('angular')">Angular</div>
+ </div>
+ </div>
+
+ <div class="showcase-wrapper">
+ <iframe id="showcase" src="main-page.html" class="showcase-iframe">
+ </iframe>
+ </div>
+</body>
+
+</html>
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 @@
+<!DOCTYPE html>
+<html>
+
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+ <title>Storybook</title>
+
+ <style>
+ body, html {
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ }
+ body {
+ height: calc(100% - 40px);
+ display: flex;
+ flex-direction: column;
+ background-color: #FFFFFF;
+ padding: 65px 0;
+ }
+ .title, .description {
+ text-align: center;
+ align-self: center;
+
+ }
+ .title {
+ font-family: OpenSans-Light, 'Open Sans', Arial, sans-serif;
+ width: 360px;
+ height: 29px;
+ font-size: 28px;
+ font-weight: 300;
+ line-height: 0.86;
+ letter-spacing: -0.4px;
+ color: #191919;
+ }
+ .description {
+ font-family: OpenSans-Regular, 'Open Sans', Arial, sans-serif;
+ width: 485px;
+ height: 41px;
+ font-size: 16px;
+ line-height: 1.5;
+ letter-spacing: -0.2px;
+ color: #5a5a5a;
+ padding: 28px;
+ }
+ .main-page-img {
+ margin: 15px;
+ display: flex;
+ align-self: center;
+ }
+ </style>
+ </head>
+
+ <body>
+ <div class="title">Welcome to ONAP/UI project!</div>
+ <div class="description">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.</div>
+ <img class="main-page-img" src="assets/images/illustration.png"/>
+ </body>
+
+</html> \ 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();
+});