feat(php-storybook): Configuring static version, creating script for …

…deploying to gh pages - TWIG-158 (#259)
ec-europa · Jan 9, 2020 · 61db1c9 · 61db1c9
1 parent 465d72c
commit 61db1c9
Show file tree

Hide file tree

Showing 11 changed files with 167 additions and 26 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,35 +14,35 @@ module.exports = {
     browser: true,
   },
   rules: {
-    'unicorn/prevent-abbreviations': false,
-    'unicorn/prefer-node-append': false,
+    'unicorn/prevent-abbreviations': 0,
+    'unicorn/prefer-node-append': 0,
   },
   overrides: [
     {
       files: '**/demo/*.js',
       rules: {
         'unicorn/filename-case': 'off',
-        'import/no-extraneous-dependencies': false
+        'import/no-extraneous-dependencies': 0
       },
     },
     {
       files: ['src/**/*.{story,test}.js'],
       rules: {
-        'import/no-extraneous-dependencies': false,
+        'import/no-extraneous-dependencies': 0,
       },
     },
     {
       files: ['php/**/*.story.js'],
       rules: {
-        'import/no-extraneous-dependencies': false,
+        'import/no-extraneous-dependencies': 0,
         camelcase: 0,
-        'import/order': false,
+        'import/order': 0,
       },
     },
     {
       files: ['utils/**/*.{js,jsx}'],
       rules: {
-        'import/no-extraneous-dependencies': false,
+        'import/no-extraneous-dependencies': 0,
       },
     },
   ],

diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,8 @@ dist
 node_modules
 vendor
 php/packages
+php/dist
+php/images
 yarn-error.log
 .idea
 composer.lock
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -183,7 +183,7 @@ yarn render:js
 All these commands can be executed at once passing the generated files through prettier:
 
 ```bash
-yarn render
+yarn render-php-js
 ```
 
 The whole process of installing the dependencies, generating the needed files, then linting them and finally launching a storybook instance on port 9002 is done by:
@@ -193,3 +193,21 @@ yarn start:php-ec
 ```
 
 All output files are stored in `./php/packages/ec` folder.
+
+
+## Deployment of the PHP Twig Storybook
+
+We host the php/js storybook on github: https://ec-europa.github.io/ecl-twig
+To be able to deploy a new version on github there are scripts you can execute:
+
+```bash
+yarn dist:php
+```
+
+It will create the bundle and place it in php/dist
+
+```bash
+yarn deploy:php
+```
+
+It uses the npm package https://www.npmjs.com/package/gh-pages to quickly deploy the php/dist folder on github.
diff --git a/package.json b/package.json
@@ -3,12 +3,17 @@
   "scripts": {
     "build:ec": "build-storybook -c ./src/ec/.storybook -o build/ec",
     "build:eu": "echo \"Nothing to do...\"",
+    "build-storybook": "build-storybook -c php/.storybook -o php/dist && yarn copy:php && yarn fix-php-dist",
     "check:release": "scripts/check-packages.sh",
     "check:component": "run-s clean:php \"render:* {1}\" pretty:php \"diff {1}\" --",
     "copy:static": "ncp static build",
+    "copy:php": "node_modules/@ecl-twig/php-storybook/resources/get-assets.js",
     "clean": "rimraf build dist",
     "clean:php": "rimraf build php/packages php/dist",
     "dist": "npm-run-all clean build:* copy:static",
+    "dist:php": "npm-run-all clean:php render-php-js build-storybook",
+    "fix-php-dist": "node_modules/@ecl-twig/php-storybook/resources/fix-build.js",
+    "deploy:php": "gh-pages -d php/dist",
     "diff": "node_modules/@ecl-twig/php-storybook/scripts/diff.js",
     "jest": "jest",
     "jest:update": "jest -u",
@@ -65,6 +70,7 @@
     "eslint-plugin-react": "7.17.0",
     "eslint-plugin-unicorn": "9.1.0",
     "file-system": "2.2.2",
+    "gh-pages": "2.1.1",
     "html-differ": "1.4.0",
     "husky": "2.4.1",
     "jest": "24.9.0",
@@ -82,6 +88,7 @@
     "prismjs": "1.18.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",
+    "replace-in-file": "4.2.0",
     "rimraf": "2.6.3",
     "shellcheck": "0.3.0",
     "twing": "2.3.7",

diff --git a/php/php_storybook/resources/fix-build.js b/php/php_storybook/resources/fix-build.js
@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+/* eslint-disable no-console, import/no-extraneous-dependencies */
+
+const replace = require('replace-in-file');
+
+const options = {
+  files: 'php/dist/*',
+  from: [
+    /\/icons.svg/g,
+    /\/icons-social.svg/g,
+    /\/logo--en.svg/g,
+    /\/logo--fr.svg/g,
+    /\/logo--mute.svg/g,
+  ],
+  to: [
+    'icons.svg',
+    'icons-social.svg',
+    'logo-en.svg',
+    'logo--fr.svg',
+    'logo--mute.svg',
+  ],
+};
+
+replace(options, (error, results) => {
+  if (error) {
+    return console.error('Error occurred:', error);
+  }
+  return console.log('Replacement results:', results);
+});
diff --git a/php/php_storybook/resources/get-assets.js b/php/php_storybook/resources/get-assets.js
@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+
+/* eslint-disable import/no-extraneous-dependencies, no-console */
+
+const { ncp } = require('ncp');
+
+const options = {};
+options.dereference = true;
+
+ncp('static/images/', 'php/dist/', options, err => {
+  if (err) {
+    return console.error(err);
+  }
+  return console.log('Assets copied in the php/dist folder');
+});
diff --git a/src/ec/packages/ec-component-icon/__snapshots__/icon.test.js.snap b/src/ec/packages/ec-component-icon/__snapshots__/icon.test.js.snap
@@ -537,7 +537,7 @@ exports[`EC - Icon UI - icon check renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--check"
+    xlink:href="/icons.svg#general--check"
   />
 </svg>
 `;
@@ -549,7 +549,7 @@ exports[`EC - Icon UI - icon check-filled renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--check-filled"
+    xlink:href="/icons.svg#general--check-filled"
   />
 </svg>
 `;
@@ -561,7 +561,7 @@ exports[`EC - Icon UI - icon close renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--close"
+    xlink:href="/icons.svg#general--close"
   />
 </svg>
 `;
@@ -573,7 +573,7 @@ exports[`EC - Icon UI - icon close-filled renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--close-filled"
+    xlink:href="/icons.svg#general--close-filled"
   />
 </svg>
 `;
@@ -585,7 +585,7 @@ exports[`EC - Icon UI - icon corner-arrow renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--corner-arrow"
+    xlink:href="/icons.svg#general--corner-arrow"
   />
 </svg>
 `;
@@ -597,7 +597,7 @@ exports[`EC - Icon UI - icon download renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--download"
+    xlink:href="/icons.svg#general--download"
   />
 </svg>
 `;
@@ -609,7 +609,7 @@ exports[`EC - Icon UI - icon external renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--external"
+    xlink:href="/icons.svg#general--external"
   />
 </svg>
 `;
@@ -621,7 +621,7 @@ exports[`EC - Icon UI - icon fullscreen renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--fullscreen"
+    xlink:href="/icons.svg#general--fullscreen"
   />
 </svg>
 `;
@@ -633,7 +633,7 @@ exports[`EC - Icon UI - icon minus renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--minus"
+    xlink:href="/icons.svg#general--minus"
   />
 </svg>
 `;
@@ -645,7 +645,7 @@ exports[`EC - Icon UI - icon plus renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--plus"
+    xlink:href="/icons.svg#general--plus"
   />
 </svg>
 `;
@@ -657,7 +657,7 @@ exports[`EC - Icon UI - icon rounded-arrow renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--rounded-arrow"
+    xlink:href="/icons.svg#general--rounded-arrow"
   />
 </svg>
 `;
@@ -669,7 +669,7 @@ exports[`EC - Icon UI - icon solid-arrow renders correctly 1`] = `
   focusable="false"
 >
   <use
-    xlink:href="/icons.svg#ui--solid-arrow"
+    xlink:href="/icons.svg#general--solid-arrow"
   />
 </svg>
 `;
diff --git a/src/ec/packages/ec-component-icon/demo/data--audio.js b/src/ec/packages/ec-component-icon/demo/data--audio.js
@@ -2,6 +2,7 @@ import specs from '@ecl/ec-specs-icon/demo/data--audio';
 import adapter from '../adapter';
 
 const data = adapter(specs);
-data.icon.type = 'ui';
+data.icon.type = 'general';
+data.icon.name = 'audio';
 
 export default data;
diff --git a/src/ec/packages/ec-component-icon/demo/data--facebook.js b/src/ec/packages/ec-component-icon/demo/data--facebook.js
@@ -3,5 +3,6 @@ import adapter from '../adapter';
 
 const data = adapter(specs);
 data.icon.type = 'branded';
+data.icon.name = 'facebook';
 
 export default data;
diff --git a/src/ec/packages/ec-component-icon/demo/data--success.js b/src/ec/packages/ec-component-icon/demo/data--success.js
@@ -3,5 +3,5 @@ import adapter from '../adapter';
 
 const data = adapter(specs);
 data.icon.type = 'notifications';
-
+data.icon.name = 'success';
 export default data;