@qhealth-design-system/core 1.0.38

package/webpack/PrecompilePlugin.js

@@ -0,0 +1,369 @@
+const glob = require('glob');
+const path = require('path');
+const Handlebars = require("handlebars");
+const fs = require('fs');
+const { logger } = require('handlebars');
+const jsDir = `./dist/js`;
+
+// A JavaScript class.
+class PrecompilePlugin {
+    constructor(options = {}) {
+      this.options = options;
+    }
+
+    apply(compiler) {
+      const outputPath = this.options.output.endsWith('/') ? this.options.output.slice(0, -1) : this.options.output;
+      const hbsTemplates = glob.sync(this.options.input);
+      const hbsHelpers = glob.sync(this.options.helpersInput);
+
+      let hbsHelpersFile = '';
+
+      // For each of the handlebars helpers files
+      hbsHelpers.forEach((helperPath) => {
+
+        // Get the name of the helper from the file name
+        const helperName = helperPath.split('/')[4].split('.')[0];
+
+        // Import the function from the file, and get the correct reference for the JS file
+        let module = require(helperPath.replace('./src', '../src'));
+
+        // register the helper using the helper name and the imported function
+        Handlebars.registerHelper(helperName, module);
+
+        let registerFunction = `Handlebars.registerHelper('${helperName}', ${module.toString()}); \r\n`;
+
+        hbsHelpersFile += registerFunction;
+
+      });
+
+      //capitalises the first letter of each work in a given string
+      const capitalise = (words) => {
+        var separateWord = words.toLowerCase().split(' ');
+        for (var i = 0; i < separateWord.length; i++) {
+           separateWord[i] = separateWord[i].charAt(0).toUpperCase() +
+           separateWord[i].substring(1);
+        }
+        return separateWord.join(' ');
+     }
+
+      // Write the helpers file to dist
+      if(!fs.existsSync(jsDir)) {
+        fs.mkdirSync(jsDir, {recursive: true});
+      }
+
+      fs.writeFileSync(`./dist/js/helpers.js`, hbsHelpersFile);
+
+      compiler.plugin('done', (stats) => {
+
+        // For each HBS template compile a Presentation and a static Version of the template;
+
+
+        const siteData= fs.readFileSync('./src/data/site.json', 'utf8');
+        const currentData= fs.readFileSync('./src/data/current.json', 'utf8');       
+        const siteDataParsed = JSON.parse(siteData);
+        const currentDataParsed = JSON.parse(currentData);
+
+
+        hbsTemplates.forEach(templatePath => {
+
+          // Read the templates from the file system
+          const templateDataPresentation = fs.readFileSync(templatePath, 'utf8');
+
+          // Get the template name from the path
+          const templateName = templatePath.split('/')[3];
+
+          // Make component directory
+          fs.mkdirSync(`${outputPath}/${templateName}`, {
+              recursive: true
+          }, (err) => {
+              if (err) throw err;
+          });
+
+          //get dataPath from manifest option
+          const dataPath = this.options.manifest.replace('**',templateName);
+
+          logger.log(templateName);
+
+          const manifestData= fs.readFileSync(dataPath, 'utf8');
+
+          //Write Manifest
+          fs.writeFileSync(`${outputPath}/${templateName}/manifest.json`,manifestData);
+
+          //Action Manifest if it exists
+          if(manifestData.length) {
+            //Parse manifest   
+            const manifestDataParsed = JSON.parse(manifestData).component;
+
+
+          //Compile XML
+
+          if(manifestData.length) {
+
+          const manifestDataXML = JSON.parse(manifestData);
+
+          function rand() {
+            return Math.floor(Math.random() * 10000000000);
+          }
+          var idMap = {
+              'cct_id':rand(),
+              'schema_id':rand(),
+              'section_id':rand()
+          };
+          
+          //test if we have the data and metadata objects as children
+          if(typeof(manifestDataXML.component.data) !== 'undefined' && typeof(manifestDataXML.component.data.metadata) !== 'undefined'){
+            //grab the metadata fields
+            for(const field in manifestDataXML.component.data.metadata) {
+                idMap[field] = rand();
+            }
+        }
+
+          var XMLOutput = '';
+          
+          //Header
+          XMLOutput+=`<?xml version="1.0" encoding="utf-8"?>
+          <actions>`
+
+          //CCT
+
+          XMLOutput+= `
+          <action>
+            <action_id>create_Content_Container_Template_${idMap.cct_id}</action_id>
+            <action_type>create_asset</action_type>
+            <type_code>Content_Container_Template</type_code>
+            <link_type>1</link_type>
+            <parentid>1</parentid>
+            <value></value>
+            <is_dependant>0</is_dependant>
+            <is_exclusive>0</is_exclusive>
+          </action>
+          <action>
+            <action_id>set_Content_Container_Template_${idMap.cct_id}_name</action_id>
+            <action_type>set_attribute_value</action_type>
+            <asset>[[output://create_Content_Container_Template_${idMap.cct_id}.assetid]]</asset>
+            <attribute>name</attribute>
+            <value><![CDATA[${capitalise(manifestDataXML.component.name)}]]></value>
+          </action>
+
+          <action>
+            <action_id>set_Content_Container_Template_${idMap.cct_id}_edit_interface_in_admin</action_id>
+            <action_type>set_attribute_value</action_type>
+            <asset>[[output://create_Content_Container_Template_${idMap.cct_id}.assetid]]</asset>
+            <attribute>edit_interface_in_admin</attribute>
+            <value><![CDATA[1]]></value>
+          </action>
+
+          <action>
+            <action_id>set_Content_Container_Template_${idMap.cct_id}_icon_color</action_id>
+            <action_type>set_attribute_value</action_type>
+            <asset>[[output://create_Content_Container_Template_${idMap.cct_id}.assetid]]</asset>
+            <attribute>icon_color</attribute>
+            <value><![CDATA[blue]]></value>
+          </action>
+          `
+
+          //Schema
+          XMLOutput+= `
+          <action>
+          <action_id>create_Metadata_Schema_${idMap.schema_id}</action_id>
+          <action_type>create_asset</action_type>
+          <type_code>Metadata_Schema</type_code>
+          <link_type>1</link_type>
+          <parentid>[[output://create_Content_Container_Template_${idMap.cct_id}.assetid]]</parentid>
+          <value></value>
+          <is_dependant>0</is_dependant>
+          <is_exclusive>0</is_exclusive>
+          </action>
+          <action>
+            <action_id>set_Metadata_Schema_${idMap.schema_id}_name</action_id>
+            <action_type>set_attribute_value</action_type>
+            <asset>[[output://create_Metadata_Schema_${idMap.schema_id}.assetid]]</asset>
+            <attribute>name</attribute>
+            <value><![CDATA[${capitalise(manifestDataXML.component.name)}]]></value>
+          </action>
+          <action>
+              <action_id>set_permission_${idMap.schema_id}_read_5</action_id>
+              <action_type>set_permission</action_type>
+              <asset>[[output://create_Metadata_Schema_${idMap.schema_id}.assetid]]</asset>
+              <permission>1</permission>
+              <granted>1</granted>
+              <userid>[[system://public_user]]</userid>
+          </action>
+          `
+          //Section   
+          XMLOutput+= `
+          <action>
+            <action_id>create_Metadata_Section_${idMap.section_id}</action_id>
+            <action_type>create_asset</action_type>
+            <type_code>Metadata_Section</type_code>
+            <link_type>2</link_type>
+            <parentid>[[output://create_Metadata_Schema_${idMap.schema_id}.assetid]]</parentid>
+            <value></value>
+            <is_dependant>1</is_dependant>
+            <is_exclusive>0</is_exclusive>
+          </action>
+          <action>
+            <action_id>add_Metadata_Section_${idMap.section_id}_path</action_id>
+            <action_type>add_web_path</action_type>
+            <asset>[[output://create_Metadata_Section_${idMap.section_id}.assetid]]</asset>
+            <parent_asset>[[output://create_Metadata_Schema_${idMap.schema_id}.assetid]]</parent_asset>
+            <path>settings</path>
+          </action>
+          <action>
+            <action_id>set_Metadata_Section_${idMap.section_id}_name</action_id>
+            <action_type>set_attribute_value</action_type>
+            <asset>[[output://create_Metadata_Section_${idMap.section_id}.assetid]]</asset>
+            <attribute>name</attribute>
+            <value><![CDATA[Settings]]></value>
+          </action>
+          <action>
+              <action_id>set_permission_${idMap.section_id}_read_5</action_id>
+              <action_type>set_permission</action_type>
+              <asset>[[output://create_Metadata_Section_${idMap.section_id}.assetid]]</asset>
+              <permission>1</permission>
+              <granted>1</granted>
+              <userid>[[system://public_user]]</userid>
+          </action>           
+          `
+          //Fields          
+          //for(const field in manifestDataXML['data']) {
+        if(typeof(manifestDataXML.component.data) !== 'undefined' && typeof(manifestDataXML.component.data.metadata) !== 'undefined'){
+          for(const field in manifestDataXML['component']['data']['metadata']) {
+              
+              var f =  manifestDataXML['component']['data']['metadata'][field];
+              //Field
+              XMLOutput+= `
+              <action>
+                  <action_id>create_${f.type}_${idMap[field]}</action_id>
+                  <action_type>create_asset</action_type>
+                  <type_code>${f.type}</type_code>
+                  <link_type>2</link_type>
+                  <parentid>[[output://create_Metadata_Section_${idMap.section_id}.assetid]]</parentid>
+                  <value></value>
+                  <is_dependant>1</is_dependant>
+                  <is_exclusive>0</is_exclusive>
+              </action> 
+              <action>
+                  <action_id>set_${f.type}_${idMap[field]}_name</action_id>
+                  <action_type>set_attribute_value</action_type>
+                  <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                  <attribute>name</attribute>
+                  <value><![CDATA[${field}]]></value>
+              </action>
+              <action>
+                  <action_id>set_${f.type}_${idMap[field]}_friendly_name</action_id>
+                  <action_type>set_attribute_value</action_type>
+                  <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                  <attribute>friendly_name</attribute>
+                  <value><![CDATA[${f.friendly_name}]]></value>
+              </action>
+              <action>
+                  <action_id>set_${f.type}_${idMap[field]}_default</action_id>
+                  <action_type>set_attribute_value</action_type>
+                  <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                  <attribute>default</attribute>
+                  <value><![CDATA[${f.value}]]></value>
+              </action>
+              <action>
+                  <action_id>set_${f.type}_${idMap[field]}_description</action_id>
+                  <action_type>set_attribute_value</action_type>
+                  <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                  <attribute>description</attribute>
+                  <value><![CDATA[${f.description}]]></value>
+              </action>
+              <action>
+                  <action_id>set_${f.type}_${idMap[field]}_editable</action_id>
+                  <action_type>set_attribute_value</action_type>
+                  <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                  <attribute>editable</attribute>
+                  <value><![CDATA[${f.editable ? 1:0}]]></value>
+              </action>
+              <action>
+                  <action_id>set_${f.type}_${idMap[field]}_editable</action_id>
+                  <action_type>set_attribute_value</action_type>
+                  <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                  <attribute>editable</attribute>
+                  <value><![CDATA[${f.editable ? 1:0}]]></value>
+              </action>
+              <action>
+                  <action_id>set_${f.type}_${idMap[field]}_required</action_id>
+                  <action_type>set_attribute_value</action_type>
+                  <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                  <attribute>required</attribute>
+                  <value><![CDATA[${f.required ? 1:0}]]></value>
+              </action>
+              <action>
+                  <action_id>set_permission_${idMap[field]}_read_5</action_id>
+                  <action_type>set_permission</action_type>
+                  <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                  <permission>1</permission>
+                  <granted>1</granted>
+                  <userid>[[system://public_user]]</userid>
+              </action>
+              `
+              //Options if Select
+              if(f.type == 'metadata_field_select') {
+                  var options = '';
+                  for(var option in f.options) {
+                      options+= `'${option}' => '${f.options[option]}',`
+                  }
+                  XMLOutput+= `
+                  <action>
+                      <action_id>set_${f.type}_${idMap[field]}_select_options</action_id>
+                      <action_type>set_attribute_value</action_type>
+                      <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                      <attribute>select_options</attribute>
+                      <value><![CDATA[array (${options});]]></value>
+                  </action>
+                  <action>
+                      <action_id>set_{f.type}_${idMap[field]}_edit_params</action_id>
+                      <action_type>set_attribute_value</action_type>
+                      <asset>[[output://create_${f.type}_${idMap[field]}.assetid]]</asset>
+                      <attribute>edit_params</attribute>
+                      <value><![CDATA[array (
+                      'style' => 'list',
+                      'type' => 'table',
+                      'height' => '',
+                      'columns' => '1',
+                      'empty_text' => '',
+                      'extras' => '',
+                      );]]></value>
+                  </action>  
+                  `
+              }
+            }
+          }
+          XMLOutput+= `</actions>`;
+
+        //Write XML
+        fs.writeFileSync(`${outputPath}/${templateName}/import.xml`,XMLOutput);
+
+        }
+
+            //Compile static HTML version of the template
+            const compiledHTML = Handlebars.compile(templateDataPresentation);
+            //Write Static HTML File
+
+            fs.writeFileSync(`${outputPath}/${templateName}/static.html`, compiledHTML({
+              'component':manifestDataParsed,
+              'site':siteDataParsed,
+              'current':currentDataParsed,
+              'content':'Lorem Ipsum'
+            }));
+          }
+
+          // Compile presentation version of the template
+          const compiledPresentation = Handlebars.precompile(templateDataPresentation);
+
+
+          // Write both versions of the template
+          fs.writeFileSync(`${outputPath}/${templateName}/presentation.js`, compiledPresentation);
+
+        }
+        )
+      });
+
+    }
+}
+
+module.exports = PrecompilePlugin;

package/webpack/webpack.common.js

@@ -0,0 +1,151 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+const path = require('path');
+const fs = require('fs');
+const glob = require('glob');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+// Our function that generates our html plugins
+function generateHtmlPlugins(templateDir) {
+    // Read files in /html directory
+    const templateFiles = fs
+        .readdirSync(path.resolve(__dirname, templateDir))
+        .filter(function(file) { //ignore folder
+            return file.indexOf('.html') > -1
+        });
+
+    return templateFiles.map(item => {
+        // Split names and extension
+        const parts = item.split('.')
+        const name = parts[0]
+        const extension = parts[1]
+            // Create new HTMLWebpackPlugin with options
+        return new HtmlWebPackPlugin({
+            'filename': `${name}.html`,
+            'template': path.resolve(__dirname, `${templateDir}/${name}.${extension}`)
+        });
+    });
+}
+const htmlPlugins = generateHtmlPlugins('../src/html');
+
+// File arrays
+let js_files = glob.sync('./src/**/**/global.js') // Module JS
+
+function reloadHtml() {
+    const cache = {};
+    const plugin = {
+        name: 'CustomHtmlReloadPlugin'
+    };
+
+    this.hooks.compilation.tap(plugin, compilation => {
+        compilation.hooks.htmlWebpackPluginAfterEmit.tap(plugin, data => {
+            const orig = cache[data.outputName];
+            const html = data.html.source();
+
+            // plugin seems to emit on any unrelated change?
+            if (orig && orig !== html) {
+                devServer.sockWrite(devServer.sockets, 'content-changed')
+            }
+
+            cache[data.outputName] = html
+        })
+    })
+}
+
+const copyWebPack = new CopyWebpackPlugin([
+    {
+        from: path.resolve(__dirname, '../src/externals'),
+        to: 'externals',
+        ignore: ['__What is this folder for']
+    },
+    {
+        from: path.resolve(__dirname, '../src/assets'),
+        to: 'mysource_files',
+        ignore: ['__What is this folder for']
+    }
+])
+
+module.exports = {
+    entry: {
+        main: ['./src/index.js'].concat(js_files)
+    },
+    output: {
+        path: path.resolve(__dirname, '../dist'), // Output folder
+        filename: 'js/[name].js' // JS output path
+    },
+    resolve: {
+        alias: {
+            NodeModules: path.resolve(__dirname, '../node_modules/'),
+            src: path.resolve(__dirname, '../src/')
+        }
+    },
+    module: {
+        rules: [{ // HTML
+                test: /\.html$/,
+                use: [{
+                    loader: "html-loader",
+                    options: {
+                        minimize: false,
+                        sources:false,
+                        interpolate: true // allow HTML snippets with commonJs require tags
+                    }
+                }]
+            },
+            { // JavaScript and JSX only (no JSON)
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                use: [
+                    "babel-loader",
+                    "eslint-loader"
+                ]
+            },
+            { // Images
+                test: /\.(png|svg|jpg|gif|ico)$/,
+                use: {
+                    'loader': 'file-loader',
+                    'options': {
+                        'esModule': false,
+                        'name': '[name].[ext]',
+                        'outputPath': 'mysource_files/',
+                        'publicPath': 'mysource_files/',
+                    }
+                }
+            },
+            { // Font files
+                test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [{
+                    'loader': 'file-loader',
+                    'options': {
+                        'name': './mysource_files/[name].[ext]'
+                    }
+                }]
+            } ,
+            // For TinyMCE
+            {
+                test: /skin\.css$/i,
+                use: [MiniCssExtractPlugin.loader, 'css-loader'],
+            },
+            {
+                test: /content\.css$/i,
+                use: ['css-loader'],
+            },
+            {
+                test: /tinymce_classes\.css$/i,
+                use: ['css-loader'],
+            },
+            // For Select2
+            {
+                test: /select2\.css$/i,
+                use:[
+                    'style-loader',
+                    'css-loader'
+                ],
+            }
+        ]
+    },
+    plugins: htmlPlugins.concat(reloadHtml).concat(copyWebPack).concat(new MiniCssExtractPlugin()),
+    optimization: {
+        minimize: false,
+        runtimeChunk: 'single'
+    }
+};

package/webpack/webpack.dev.js

@@ -0,0 +1,54 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'cheap-eval-source-map',
+    devServer: {
+        before(app, server) {
+            devServer = server;
+        },
+        contentBase: path.join(__dirname, '../dist'),
+        hot: true,
+        host: '0.0.0.0',
+        port: 8080
+    },
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: [
+                    "style-loader",
+                    "css-loader",
+                    "postcss-loader",
+                    "sass-loader",
+                    "import-glob-loader"
+                ]
+            },
+            { // Handlebars
+                test: /\.hbs$/,
+                use:[
+                    {
+                        'loader':'handlebars-loader',
+                        'options':{
+                            helperDirs: path.resolve(__dirname, "../src/helpers/Handlebars")
+                        },
+                    },
+                    {
+                        'loader':'string-replace-loader',
+                        'options':{
+                            'search':/\.\/\?a=/g,
+                            'replace':''
+                        }
+                    }      
+                ],
+                enforce:"post"
+            }
+        ]
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin()
+    ]
+});

package/webpack/webpack.prod.js

@@ -0,0 +1,70 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const PrecompilePlugin = require('./PrecompilePlugin');
+const JsonMergePlugin = require('./JsonMergePlugin');
+
+module.exports = env => {
+
+    // Environment variables from script command
+    const env_minify = env.minify;
+    let minimize = false;
+
+    // Conditional minification
+    if (env_minify === 'true') {
+        minimize = true;
+    }
+
+    return merge(common, {
+        mode: 'production',
+        devtool: 'source-map',
+        module: {
+            rules: [{
+                test: /\.scss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    "css-loader",
+                    "postcss-loader",
+                    "sass-loader",
+                    "import-glob-loader"
+                ]
+            },
+            { // Handlebars
+                test: /\.hbs$/,
+                use:[
+                    {
+                        'loader':'handlebars-loader',
+                        'options':{
+                            helperDirs: path.resolve(__dirname, "../src/helpers/Handlebars")
+                        },
+                    }    
+                ],
+                enforce:"post",
+            }    
+        ]
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+                chunkFilename: "[name].css",
+            }),
+            new CleanWebpackPlugin(['dist'], {}),
+            new PrecompilePlugin({
+                'input': './src/components/**/**/*.hbs',
+                'manifest':'./src/components/**/js/manifest.json',
+                'output': './dist/components/',
+                'helpersInput': './src/helpers/Handlebars/*.js'
+            }),
+            new JsonMergePlugin({
+                'input': './src/api/service_finder/schemas/*.json',
+                'output': './dist/api/service_finder/schemas.json'
+            })
+        ],
+        optimization: {
+            minimize: minimize,
+        }
+    });
+
+}