feat(play): add crafted examples (#132)

* fix(play): load script synchronously

* perf(play): will this improve loading perf ?

* style(play): prettify html code

* feat(play): add examples links

* feat(play): create examples

* feat(play): fix NIR example

* feat(play): fix examples links

* feat(play): add SIRET generation example

* feat(play): add anonymization by suppression ex.

* feat(play): add anonymize technical ID

* feat(play): fix typo

* feat(play): add noise example

* feat(play): add coherence non-reversible example

* feat(play): add coherence by caches example

* feat(play): add coherence by caches example

* feat(play): add coherence by encryption example

* feat(play): add last examples

* feat(play): fix example

* chore(play): fix build inject version

* chore(play): fix ff1 example

* chore(play): fix add noise example

* feat(play): add a loading screen

* feat(play): add a loading spinner

* feat(play): add a refresh button

* docs(play): update changelog

* docs(play): update readme

* docs(play): add missing image

* docs(play): move image from docs to assets

CHANGELOG.md

@@ -16,7 +16,11 @@ Types of changes
 
 ## [1.14.0]
 
-- `Added` (play) possibility to share URL directly from the Play website
+- `Added` possibility to share URL directly from the PIMO Play website
+- `Added` precrafted examples in the PIMO Play website
+- `Added` loading screen when JS is loading on PIMO Play website
+- `Added` loading spinner when refreshing output on PIMO Play website
+- `Added` a refresh button on PIMO Play website
 
 ## [1.13.0]
 

README.md

@@ -134,6 +134,19 @@ This takes the `data.json` file, masks the data contained inside it and put the
 * `--repeat-until <condition>` This flag will make PIMO keep masking every input until the condition is met. Condition format is using [Template](https://pkg.go.dev/text/template). Last output verifies the condition.
 * `--repeat-while <condition>` This flag will make PIMO keep masking every input while the condition is met. Condition format is using [Template](https://pkg.go.dev/text/template).
 
+### PIMO Play
+
+The `play` command will start a local website, where you will find commented examples and a playground to play with the masking configuration.
+
+```console
+$ pimo play
+⇨ http server started on [::]:3010
+```
+
+Then go to [http://localhost:3010/](http://localhost:3010/) in your browser.
+
+![PIMO Play screenshot](assets/pimo-play.png)
+
 ## Examples
 
 This section will give examples for every types of mask.

build.yml

@@ -222,8 +222,8 @@ targets:
       - $: touch web/play/node_modules/go.mod
       - $: rm -rf internal/app/pimo/client/*
       - $: cp -r web/play/dist/* internal/app/pimo/client
-      - $: sed -i 's~{{version}}~={realtag}~g' internal/app/pimo/client/index.html
-      - $: sed -i 's~{{version}}~={realtag}~g' internal/app/pimo/client/main.js
+      - $: sed -i 's~{{ version }}~={realtag}~g' internal/app/pimo/client/index.html
+      - $: sed -i 's~{{ version }}~={realtag}~g' internal/app/pimo/client/main.js
       - $: git checkout -- internal/app/pimo/client
 
   # run "neon -props '{buildpaths: ["path/to/main/package1","path/to/main/package2"]}' compile" to compile specific targets

web/play/package.json

@@ -15,6 +15,7 @@
     },
     "devDependencies": {
         "css-loader": "^6.0.0",
+        "cssnano": "^5.1.12",
         "html-webpack-plugin": "^5.0.0",
         "postcss": "^8.4.14",
         "postcss-loader": "^7.0.0",

web/play/postcss.config.cjs

@@ -2,6 +2,7 @@ module.exports = {
     plugins: [
       require('tailwindcss'),
       require('./tailwind.config.cjs'),
-      require('autoprefixer')
+      require('autoprefixer'),
+      require('cssnano')
     ]
   }

web/play/src/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "tabWidth": 2,
+    "useTabs": false,
+    "printWidth": 300
+}

web/play/src/index.js

@@ -15,7 +15,7 @@ setDiagnosticsOptions({
   schemas: [
     {
       // Id of the first schema
-      uri: 'https://raw.githubusercontent.com/CGI-FR/PIMO/{{version}}/schema/v1/pimo.schema.json',
+      uri: 'https://raw.githubusercontent.com/CGI-FR/PIMO/{{ version }}/schema/v1/pimo.schema.json',
       // Associate with our model
       fileMatch: [String(modelUri)],
     },
@@ -66,6 +66,8 @@ var resultJson = editor.create(document.getElementById('result-json'), {
   model: editor.createModel('', 'json', Uri.parse('file://result.jsonl')),
 });
 
+document.getElementById('loading').remove();
+
 ///////////////////////////////////////////////////////////
 
 async function postData() {
@@ -111,14 +113,16 @@ async function postData() {
       console.log(err)
       document.getElementById('result-error').innerText = err
   } finally {
-    document.getElementById('label-output').innerText = "Output"
+    document.getElementById('refresh-spinner').style.display = 'none';
+    document.getElementById('refresh-button').style.display = 'inline';
   }
 }
 
 function debounce(func, timeout = 300){
     let timer;
     return (...args) => {
-        document.getElementById('label-output').innerText = "Output (refreshing...)"
+        document.getElementById('refresh-spinner').style.display = 'inline';
+        document.getElementById('refresh-button').style.display = 'none';
         clearTimeout(timer);
         timer = setTimeout(() => { func.apply(this, args); }, timeout);
     };
@@ -133,4 +137,5 @@ document.getElementById('editor-json').onkeyup = autoPostData;
 document.getElementById('editor-json').oninput = autoPostData;
 document.getElementById('editor-json').onpaste = autoPostData;
 document.getElementById('editor-json').oncut = autoPostData;
+document.getElementById('refresh-button').onclick = autoPostData;
 autoPostData();

web/play/webpack.config.js

@@ -8,6 +8,10 @@ export default {
         test: /\.css$/,
         use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
+      {
+        test: /\.ttf$/,
+        type: 'asset',
+      },
     ],
   },
   devServer: {