Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP

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();
+});