wip: allow web component element on modulix

Author: yannbertrand

api/src/devcomp/infrastructure/datasources/learning-content/modules/bac-a-sable.json

@@ -38,6 +38,68 @@
     }
   ],
   "grains": [
+    {
+      "id": "0d4ef09a-ebb8-4514-a037-8fb22e540d7c",
+      "type": "discovery",
+      "title": "Voici un grain qui contient un webcomponent",
+      "components": [
+        {
+          "type": "element",
+          "element": {
+            "id": "cfec5a0e-2ed5-462f-8974-e5ca25faae38",
+            "type": "web-component",
+            "tagName": "qcu-image",
+            "props": {
+              "name": "Liste d'applications",
+              "maxChoicesPerLine": 3,
+              "imageChoicesSize": "icon",
+              "choices": [
+                {
+                  "name": "Google",
+                  "image": {
+                    "width": 534,
+                    "height": 544,
+                    "loading": "lazy",
+                    "decoding": "async",
+                    "src": "https://epreuves.pix.fr/_astro/Google.B1bcY5Go_1BynY8.svg"
+                  }
+                },
+                {
+                  "name": "LibreOffice Writer",
+                  "image": {
+                    "width": 205,
+                    "height": 246,
+                    "loading": "lazy",
+                    "decoding": "async",
+                    "src": "https://epreuves.pix.fr/_astro/writer.3bR8N2DK_Z1iWuJ9.webp"
+                  }
+                },
+                {
+                  "name": "Explorateur",
+                  "image": {
+                    "width": 128,
+                    "height": 128,
+                    "loading": "lazy",
+                    "decoding": "async",
+                    "src": "https://epreuves.pix.fr/_astro/windows-file-explorer.CnF8MYwI_23driA.webp"
+                  }
+                },
+                {
+                  "name": "Geogebra",
+                  "image": {
+                    "width": 640,
+                    "height": 640,
+                    "loading": "lazy",
+                    "decoding": "async",
+                    "src": "https://epreuves.pix.fr/_astro/geogebra.CZH9VYqc_19v4nj.webp"
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    },
     {
       "id": "f312c33d-e7c9-4a69-9ba0-913957b8f7dd",
       "type": "discovery",

api/src/devcomp/infrastructure/factories/module-factory.js

@@ -93,6 +93,8 @@ export class ModuleFactory {
         return ModuleFactory.#buildDownload(element);
       case 'embed':
         return ModuleFactory.#buildEmbed(element);
+      case 'web-component':
+        return ModuleFactory.#buildWebComponent(element);
       case 'expand':
         return ModuleFactory.#buildExpand(element);
       case 'image':
@@ -138,6 +140,14 @@ export class ModuleFactory {
     });
   }
 
+  static #buildWebComponent(element) {
+    return {
+      ...element,
+      id: element.id,
+      type: 'web-component',
+    };
+  }
+
   static #buildExpand(element) {
     return new Expand({
       id: element.id,

mon-pix/app/app.js

@@ -1,4 +1,5 @@
 import './deprecation-workflow';
+import '@1024pix/web-components';
 
 import Application from '@ember/application';
 import { init as initSentry } from '@sentry/ember';

mon-pix/app/components/module/component/element.gjs

@@ -12,6 +12,7 @@ import QrocmElement from 'mon-pix/components/module/element/qrocm';
 import SeparatorElement from 'mon-pix/components/module/element/separator';
 import TextElement from 'mon-pix/components/module/element/text';
 import VideoElement from 'mon-pix/components/module/element/video';
+import WebComponentElement from 'mon-pix/components/module/element/web-component';
 
 export default class ModulixElement extends Component {
   @action
@@ -30,6 +31,8 @@ export default class ModulixElement extends Component {
       <DownloadElement @download={{@element}} @onDownload={{@onFileDownload}} />
     {{else if (eq @element.type "embed")}}
       <EmbedElement @embed={{@element}} @onAnswer={{@onElementAnswer}} />
+    {{else if (eq @element.type "web-component")}}
+      <WebComponentElement @component={{@element}} @onAnswer={{@onElementAnswer}} />
     {{else if (eq @element.type "expand")}}
       <ExpandElement @expand={{@element}} @onExpandToggle={{@onExpandToggle}} />
     {{else if (eq @element.type "separator")}}

mon-pix/app/components/module/element/web-component.gjs

@@ -0,0 +1,25 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { eq } from 'ember-truth-helpers';
+
+import ModuleElement from './module-element';
+
+export default class ModulixWebComponent extends ModuleElement {
+  @action
+  handleAnswer(event) {
+    this.args.onAnswer({
+      userResponse: [event.detail[0]],
+      element: this.args.embed,
+    });
+  }
+
+  <template>
+    <div class="element-webcomponent">
+      <div class="element-webcomponent__container">
+        {{#if (eq @component.tagName "qcu-image")}}
+          <qcu-image props={{@component.props}} />
+        {{/if}}
+      </div>
+    </div>
+  </template>
+}

mon-pix/app/components/module/grain/grain.gjs

@@ -19,6 +19,7 @@ export default class ModuleGrain extends Component {
   static AVAILABLE_ELEMENT_TYPES = [
     'download',
     'embed',
+    'web-component',
     'expand',
     'flashcards',
     'image',

mon-pix/package-lock.json

@@ -49,6 +49,7 @@
     "@1024pix/eslint-plugin": "^2.1.0",
     "@1024pix/pix-ui": "^54.14.1",
     "@1024pix/stylelint-config": "^5.1.27",
+    "@1024pix/web-components": "^0.2.7",
     "@babel/eslint-parser": "^7.25.1",
     "@babel/plugin-proposal-decorators": "^7.24.7",
     "@ember-data/json-api": "^5.3.8",