build(rollup): add rollup setup, jenkins file and getting started guide

EX-2041

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+stats.html
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/

Jenkinsfile

@@ -0,0 +1,5 @@
+npmPackagePipeline {
+  build = false
+  runner = 'cypress/browsers:node12.13.0-chrome80-ff74'
+  docusaurusFolder = 'front/xcomponents/archetype'
+}

README.md

@@ -1,27 +1,9 @@
-# X Components #
+# X Components Archetype
 
-Wellcome to the X Components 
+Welcome to the X Components Archetype 
 
-### What is this repository for? ###
+## What is this repository for?
 
-The purpose of this repository is to be the starting point to a customer setup using the X Components
+The purpose of this repository is to be the starting point to a customer setup using the X Components.
+Please take a look at the [documentation](./docs/index.md).
 
-### How do I get set up? ###
-
-* Summary of set up
-* Configuration
-* Dependencies
-* Database configuration
-* How to run tests
-* Deployment instructions
-
-### Contribution guidelines ###
-
-* Writing tests
-* Code review
-* Other guidelines
-
-### Who do I talk to? ###
-
-* Repo owner or admin
-* Other community or team contact

build/instrumentation.build.js

@@ -0,0 +1,124 @@
+import buble from '@rollup/plugin-buble';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import path from 'path';
+import del from 'rollup-plugin-delete';
+import htmlTemplate from 'rollup-plugin-generate-html-template';
+import postcss from 'rollup-plugin-postcss';
+import sourcemaps from 'rollup-plugin-sourcemaps';
+import { terser } from 'rollup-plugin-terser';
+import typescript from 'rollup-plugin-typescript2';
+import visualizer from 'rollup-plugin-visualizer';
+import vue from 'rollup-plugin-vue';
+
+const jsOutputDirectory = path.join(process.cwd(), 'dist');
+
+const postCSSPlugins = [autoprefixer({ grid: true }), cssnano({ preset: 'default' })];
+
+/**
+ * Creates a rollup configuration for projects that use X-Components. This configuration can be customized with the options object.
+ *
+ * @param {boolean} extractCSS - If true, the build will generate a `.css` and a `.js` file.
+ * @param {import('rollup').InputOptions} input - Overrides the entry file. Check http://rollupjs.org/guide/en/#input
+ * @param {import('rollup').OutputOptions} output - Overrides the output settings. Check http://rollupjs.org/guide/en/#outputdir
+ * @param {Record<string, Record<string, unknown>>} plugins - A dictionary that allows overriding specific plugin configurations.
+ *
+ * @returns {import('rollup').RollupOptions}
+ */
+export function createConfig({
+  extractCSS = false,
+  input= path.join(process.cwd(), 'src/main.ts'),
+  output,
+  plugins= {}
+} = {}) {
+  /**
+   * Merges a default config with the user one coming from this rollup plugin options.
+   *
+   * @param {string} pluginName - The plugin name for finding the config.
+   * @param {Config} defaultConfig - The default config for the plugin
+   * @return {Config} The merged config.
+   */
+  function mergeConfig(pluginName, defaultConfig = {}) {
+    return {
+      ...defaultConfig,
+      ...plugins[pluginName]
+    };
+  }
+
+  return {
+    input,
+    output: {
+      file: path.join(jsOutputDirectory, 'app.js'),
+      format: 'iife',
+      sourcemap: true,
+      ...output
+    },
+    plugins: [
+      del(
+        mergeConfig('del', {
+          targets: [`${ jsOutputDirectory }/*`]
+        })
+      ),
+      htmlTemplate(
+        mergeConfig('htmlTemplate', {
+          template: path.resolve(process.cwd(), 'public/index.html'),
+          target: 'index.html'
+        })
+      ),
+      // Resolving plugins
+      replace(
+        mergeConfig('replace', {
+          'process.env.NODE_ENV': JSON.stringify('production')
+        })
+      ),
+      commonjs(mergeConfig('commonjs')),
+      resolve(
+        mergeConfig('resolve', {
+          browser: true
+        })
+      ),
+      // Code transpiling plugins
+      vue(
+        mergeConfig('vue', {
+          css: !extractCSS, // css: false = extract; css: true = no extract.
+          needMap: false,
+          style: {
+            postcssPlugins: postCSSPlugins
+          }
+        })
+      ),
+      typescript(
+        mergeConfig('typescript', {
+          tsconfigOverride: {
+            exclude: ['node_modules', '**/*.spec.ts', '*test*']
+          }
+        })
+      ),
+      buble(
+        mergeConfig('buble', {
+          include: ['**/*.js', '**/*.mjs']
+        })
+      ),
+      postcss(
+        mergeConfig('postcss', {
+          extract: extractCSS,
+          plugins: postCSSPlugins
+        })
+      ),
+      sourcemaps(mergeConfig('sourcemaps')),
+      terser(
+        mergeConfig('terser', {
+          output: { comments: false }
+        })
+      ),
+      /* Can't calculate real minified size with `sourcemap: true` and `gzipSize: true`:
+       https://github.com/btd/rollup-plugin-visualizer/issues/72 */
+      visualizer(mergeConfig('visualizer', { sourcemap: true }))
+    ]
+  };
+}
+
+export default createConfig();

docs/index.md

@@ -0,0 +1,91 @@
+# X Components Archetype
+
+The purpose of this project is to be the starting point for a customer X Components setup.
+
+## Getting started
+
+### Cloning project
+
+The first step to start a new setup with the archetype is to clone the archetype project.
+
+1. Create the new repository in bitbucket accessing this URL and entering the name of the new
+repository. The repository name `<new-repository-name>` will be used in the next commands:
+
+    [https://bitbucket.org/repo/create?owner=colbenson](https://bitbucket.org/repo/create?owner=colbenson)  
+    ![create bitbucket repository](index-1-create-repository.png "create bitbucket repository")
+
+2. To clone the Archetype in your local execute the next command replacing `<new-repository-name>`
+with your new repository name used in the step 1:
+
+    ```
+    git clone -b master https://bitbucket.org/colbenson/x-components-archetype.git <new-repository-name>
+    ```
+
+3. Then access to the directory:
+
+    ```
+    cd <new-repository-name>
+    ```
+
+4. Finally, reinitialize the repository and add the new repository:
+
+    ```
+    rm -rf .git
+    git init
+    git remote add origin https://bitbucket.org/colbenson/<new-repository-name>.git
+    git add .
+    git commit -m "initial commit"
+    git push -u origin master
+    ```
+
+### Customizing project
+
+1. Replace the name in `package.json` (`x-components-archetype`) for the repository name:
+
+    ```
+    {
+      "name": "x-components-archetype",
+      "version": "0.1.0",
+      ...
+    }
+    ```
+
+2. Replace the `Jenkinsfile` content. The client property `<new-repository-name>` should be
+replaced for the repository name:
+
+    ```
+    empathyXPipeline {
+      client = '<new-repository-name>',
+      builder = 'cypress/browsers:node12.13.0-chrome80-ff74'
+    }
+    ```
+
+### Install and execute
+
+1. To install the dependencies execute this:
+
+    ````
+    npm install
+    ````
+
+2. After installing, you can run the project:
+
+    ````
+    npm run serve
+    ````
+    
+### Configure Adapter
+
+Configure the adapter in [x-components/adapter.ts](../src/x-components/adapter.ts) file. Remember
+to export it to use in the plugin configuration (see next section). You can find more information
+about the adapter here: 
+[search-adapter](https://bitbucket.org/colbenson/search-adapter/src/master/README.md)
+     
+### Configure Plugin
+
+Modify the plugin options [x-components/plugin.options.ts](../src/x-components/plugin.options.ts)
+file. The adapter is mandatory and is imported from the previous file. To know more about the
+plugin options visit: <!-- TODO: Add here the link to the Plugin doc page-->
+
+
+