@rettangoli/ui 0.1.2-rc9 → 0.1.3

package/src/components/form/form.store.js

@@ -1,45 +1,199 @@
-export const INITIAL_STATE = Object.freeze({
-  formValues: {}
+import { parseAndRender } from "jempl";
+
+const encode = (input) => {
+  function escapeHtml(text) {
+    const map = {
+      '&': '&',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
+    };
+    return text.replace(/[&<>"']/g, char => map[char]);
+  }
+  if (input === undefined || input === null) {
+    return ""
+  }
+  return `"${escapeHtml(String(input))}"`;
+}
+
+function pick(obj, keys) {
+  return keys.reduce((acc, key) => {
+    if (key in obj) acc[key] = obj[key];
+    return acc;
+  }, {});
+}
+
+export const createInitialState = () => Object.freeze({
+  formValues: {},
+  tooltipState: {
+    open: false,
+    x: 0,
+    y: 0,
+    content: ''
+  },
 });
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+// Lodash-like utility functions for nested property access
+const get = (obj, path, defaultValue = undefined) => {
+  if (!path) {
+    return;
+  }
+  const keys = path.split(/[\[\].]/).filter((key) => key !== "");
+  let current = obj;
+
+  for (const key of keys) {
+    if (current === null || current === undefined || !(key in current)) {
+      return defaultValue;
+    }
+    current = current[key];
+  }
+  return current;
+};
+
+const set = (obj, path, value) => {
+  const keys = path.split(/[\[\].]/).filter((key) => key !== "");
+
+  // If path contains array notation, delete the original flat key
+  if (path.includes("[") && path in obj) {
+    delete obj[path];
+  }
+
+  let current = obj;
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (
+      !(key in current) ||
+      typeof current[key] !== "object" ||
+      current[key] === null
+    ) {
+      // Check if next key is a number to create array
+      const nextKey = keys[i + 1];
+      const isArrayIndex = /^\d+$/.test(nextKey);
+      current[key] = isArrayIndex ? [] : {};
+    }
+    current = current[key];
+  }
+
+  current[keys[keys.length - 1]] = value;
+  return obj;
+};
+
+const blacklistedAttrs = ["id", "class", "style", "slot"];
 
 const stringifyAttrs = (attrs) => {
-  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
-}
+  return Object.entries(attrs)
+    .filter(([key]) => !blacklistedAttrs.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" ");
+};
+
+export const selectForm = ({ state, props }) => {
+  const { form } = props;
+  const { context } = props;
+
+  if (context) {
+    return parseAndRender(form, context);
+  }
+
+  return form;
+};
 
-export const toViewData = ({ state, props, attrs }) => {
+
+export const selectViewData = ({ state, props, attrs }) => {
   const containerAttrString = stringifyAttrs(attrs);
-  const fields = structuredClone(props.form.fields || []);
   const defaultValues = props.defaultValues || {};
+
+  const form = selectForm({ state, props });
+  const fields = structuredClone(form.fields || []);
   fields.forEach((field) => {
-    field.defaultValue = defaultValues[field.name]
-  })
+    // Use formValues from state if available, otherwise fall back to defaultValues from props
+    const defaultValue = get(state.formValues, field.name) ?? get(defaultValues, field.name)
+    if (["popover-input", "select", "read-only-text"].includes(field.inputType)) {
+      field.defaultValue = defaultValue
+    } else {
+      field.defaultValue = encode(defaultValue);
+    }
+
+    if (["inputText"].includes(field.inputType)) {
+      field.placeholder = encode(field.placeholder)
+    }
+
+    if (field.inputType === "image") {
+      const src = field.src;
+      // Only set imageSrc if src exists and is not empty
+      field.imageSrc = src && src.trim() ? src : null;
+      // Set placeholder text
+      field.placeholderText = field.placeholder || "No Image";
+    }
+    if (field.inputType === "waveform") {
+      const waveformData = field.waveformData;
+      // Only set waveformData if it exists
+      field.waveformData = waveformData || null;
+      // Set placeholder text
+      field.placeholderText = field.placeholder || "No Waveform";
+    }
+  });
 
   return {
+    key: attrs?.key,
     containerAttrString,
-    title: props.form?.title || '',
-    description: props?.form?.description || '',
+    title: form?.title || "",
+    description: form?.description || "",
     fields: fields,
     actions: props?.form?.actions || {
-      buttons: []
+      buttons: [],
     },
     formValues: state.formValues,
+    tooltipState: state.tooltipState,
   };
-}
+};
 
 export const selectState = ({ state }) => {
   return state;
-}
+};
 
-export const selectFormValues = ({ state }) => {
-  return state.formValues;
-}
+export const selectFormValues = ({ state, props }) => {
+  const form = selectForm({ state, props });
+
+  return pick(
+    state.formValues,
+    form.fields.map((field) => field.name),
+  );
+};
+
+export const getFormFieldValue = ({ state }, name) => {
+  return get(state.formValues, name);
+};
 
 export const setFormValues = (state, defaultValues) => {
   state.formValues = defaultValues || {};
-}
+};
 
-export const setFormFieldValue = (state, { name, value }) => {
-  state.formValues[name] = value;
-}
+export const setFormFieldValue = (state, { name, value, props }) => {
+  set(state.formValues, name, value);
+  // remove non visible values
+  const form = selectForm({ state, props });
+  const formValues = pick(
+    state.formValues,
+    form.fields.map((field) => field.name),
+  );
+  state.formValues = formValues;
+};
+
+export const showTooltip = (state, { x, y, content }) => {
+  state.tooltipState = {
+    open: true,
+    x: x,
+    y: y,
+    content: content
+  };
+};
+
+export const hideTooltip = (state) => {
+  state.tooltipState = {
+    ...state.tooltipState,
+    open: false
+  };
+};

package/src/components/form/form.view.yaml

@@ -8,6 +8,8 @@ propsSchema:
   properties:
     defaultValues:
       type: object
+    context:
+      type: object
     form:
       type: object
       properties:
@@ -31,6 +33,11 @@ propsSchema:
                     const: inputText
                   placeholder:
                     type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -48,21 +55,30 @@ propsSchema:
                     const: select
                   placeholder:
                     type: string
+                  noClear:
+                    type: boolean
+                  addOption:
+                    type: object
+                    properties:
+                      label:
+                        type: string
                   options:
                     type: array
                     items:
                       type: object
                       properties:
-                        id:
-                          type: string
                         label:
                           type: string
                         value:
                           type: any
                       required:
-                        - id
                         - label
                         - value
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -81,6 +97,11 @@ propsSchema:
                     const: colorPicker
                   value:
                     type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -104,6 +125,11 @@ propsSchema:
                     type: number
                   value:
                     type: number
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -127,6 +153,89 @@ propsSchema:
                     type: number
                   value:
                     type: number
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: image
+                  width:
+                    type: number
+                  height:
+                    type: number
+                  placeholder:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: waveform
+                  width:
+                    type: number
+                  height:
+                    type: number
+                  placeholder:
+                    type: string
+                  defaultValue:
+                    type: object
+                  waveformData:
+                    type: object
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: popover-input
+                  placeholder:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -153,6 +262,12 @@ refs:
     eventListeners:
       click:
         handler: handleActionClick
+  tooltip-icon-*:
+    eventListeners:
+      mouseenter:
+        handler: handleTooltipMouseEnter
+      mouseleave:
+        handler: handleTooltipMouseLeave
   input-*:
     eventListeners:
       input-change:
@@ -161,6 +276,8 @@ refs:
     eventListeners:
       select-change:
         handler: handleSelectChange
+      add-option-selected:
+        handler: handleSelectAddOption
   colorpicker-*:
     eventListeners:
       colorpicker-change:
@@ -173,32 +290,70 @@ refs:
     eventListeners:
       slider-input-value-change:
         handler: handleSliderInputChange
+  image-*:
+    eventListeners:
+      click:
+        handler: handleImageClick
+      contextmenu:
+        handler: handleImageClick
+  waveform-*:
+    eventListeners:
+      click:
+        handler: handleWaveformClick
+      contextmenu:
+        handler: handleWaveformClick
+  popover-input-*:
+    eventListeners:
+      input-change:
+        handler: handlePopoverInputChange
 
 events:
   form-change: {}
+  extra-event: {}
+  action-click: {}
 
 template:
-  - rtgl-view w=f h=f p=md g=lg ${containerAttrString}:
-    - rtgl-view g=sm w=f:
-      - rtgl-text s=lg: ${title}
-      - rtgl-text c=mu-fg: ${description}
-    - rtgl-view g=lg w=f:
-      - $for field, i in fields:
-        - rtgl-view g=md w=f:
-            - rtgl-view g=sm:
-              - rtgl-text: ${field.label}
-              - rtgl-text s=sm c=mu-fg: ${field.description}
-            - $if field.inputType == "inputText":
-                - rtgl-input#input-${field.name} w=f placeholder=${field.placeholder} value=${field.defaultValue}:
-            - $if field.inputType == "select":
-                - rtgl-select#select-${field.name} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=fields[${i}].defaultValue:
-            - $if field.inputType == "colorPicker":
-                - rtgl-color-picker#colorpicker-${field.name} value=${field.defaultValue}:
-            - $if field.inputType == "slider":
-                - rtgl-slider#slider-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} value=${field.defaultValue}:
-            - $if field.inputType == "slider-input":
-                - rtgl-slider-input#slider-input-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} defaultValue=${field.defaultValue}:
-    - rtgl-view g=sm w=f:
-      - rtgl-view d=h ah=e g=sm w=f:
-        - $for button, i in actions.buttons:
-          - rtgl-button#action-${button.id}: ${button.content}
+  - rtgl-view w=f p=md g=lg ${containerAttrString}:
+      - rtgl-view g=sm w=f:
+          - rtgl-text s=lg: ${title}
+          - rtgl-text c=mu-fg: ${description}
+      - rtgl-view g=lg w=f:
+          - $for field, i in fields:
+              - rtgl-view g=md w=f:
+                  - rtgl-view g=sm:
+                      - rtgl-view d=h g=md av=c:
+                          - rtgl-text: ${field.label}
+                          - $if field.tooltip:
+                              - rtgl-svg#tooltip-icon-${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs:
+                      - rtgl-text s=sm c=mu-fg: ${field.description}
+                  - $if field.inputType == "read-only-text":
+                      - rtgl-text s=sm: ${field.defaultValue}
+                  - $if field.inputType == "inputText":
+                      - rtgl-input#input-${field.name} key=${key} w=f placeholder=${field.placeholder} value=${field.defaultValue}:
+                  - $if field.inputType == "popover-input":
+                      - rtgl-popover-input#popover-input-${field.name} label="${field.label}" .defaultValue=fields[${i}].defaultValue:
+                  - $if field.inputType == "select":
+                      - rtgl-select#select-${field.name} key=${key} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=fields[${i}].defaultValue ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption:
+                  - $if field.inputType == "colorPicker":
+                      - rtgl-color-picker#colorpicker-${field.name} key=${key} value=${field.defaultValue}:
+                  - $if field.inputType == "slider":
+                      - rtgl-slider#slider-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} value=${field.defaultValue}:
+                  - $if field.inputType == "slider-input":
+                      - rtgl-slider-input#slider-input-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} defaultValue=${field.defaultValue}:
+                  - $if field.inputType == "image" && field.imageSrc:
+                      - rtgl-image#image-${field.name} src=${field.imageSrc} w=${field.width} h=${field.height} cur=p:
+                  - $if field.inputType == "image" && !field.imageSrc:
+                      - rtgl-view#image-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
+                          - rtgl-text c=mu-fg ta=c: ${field.placeholderText}
+                  - $if field.inputType == "waveform" && field.waveformData:
+                      - rtgl-waveform#waveform-${field.name} .waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=p:
+                  - $if field.inputType == "waveform" && !field.waveformData:
+                      - rtgl-view#waveform-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
+                          - rtgl-text c=mu-fg ta=c: ${field.placeholder}
+                  - $if field.inputType == "slot":
+                      - 'slot#slot-${field.slotName} name=${field.slot} style="display: contents;"':
+      - rtgl-view g=sm w=f:
+          - rtgl-view d=h ah=e g=sm w=f:
+              - $for button, i in actions.buttons:
+                  - rtgl-button#action-${button.id}: ${button.content}
+      - rtgl-tooltip ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} placement="top" content="${tooltipState.content}":

package/src/components/globalUi/globalUi.handlers.js

@@ -0,0 +1,51 @@
+export const handleDialogClose = (_, deps) => {
+  const { store, render } = deps;
+  
+  store.closeDialog();
+  render();
+};
+
+export const handleConfirm = (_, deps) => {
+  const { store, render, globalUI } = deps;
+  
+  store.closeDialog();
+  render();
+  globalUI.emit('event', true);
+};
+
+export const handleCancel = (_, deps) => {
+  const { store, render, globalUI } = deps;
+
+  store.closeDialog();
+  render();
+  globalUI.emit('event', false);
+};
+
+export const showAlert = (options, deps) => {
+  const { store, render } = deps;
+  
+  if (store.selectIsOpen()) {
+    throw new Error("A dialog is already open");
+  }
+  
+  store.setAlertConfig(options);
+  render();
+};
+
+export const showConfirm = async (options, deps) => {
+  const { store, render, globalUI } = deps;
+  
+  if (store.selectIsOpen()) {
+    throw new Error("A dialog is already open");
+  }
+  
+  store.setConfirmConfig(options);
+  render();
+
+  return new Promise((resolve) => {
+    globalUI.once('event', (result) => {
+      // result contains info of whehter is confirm of cancel
+      resolve(result)
+    });
+  });
+};

package/src/components/globalUi/globalUi.store.js

@@ -0,0 +1,57 @@
+export const createInitialState = () => Object.freeze({
+  isOpen: false,
+  config: {
+    status: undefined, // undefined | info | warning | error
+    title: "",
+    message: "",
+    confirmText: "OK",
+    cancelText: "Cancel",
+    mode: "alert", // alert | confirm
+  },
+});
+
+export const setAlertConfig = (state, options) => {
+  if (!options.message) {
+    throw new Error("message is required for showAlert");
+  }
+  
+  state.config = {
+    status: options.status || undefined,
+    title: options.title || "",
+    message: options.message,
+    confirmText: options.confirmText || "OK",
+    cancelText: "",
+    mode: "alert",
+  };
+  state.isOpen = true;
+};
+
+export const setConfirmConfig = (state, options) => {
+  if (!options.message) {
+    throw new Error("message is required for showConfirm");
+  }
+  
+  state.config = {
+    status: options.status || undefined,
+    title: options.title || "",
+    message: options.message,
+    confirmText: options.confirmText || "Yes",
+    cancelText: options.cancelText || "Cancel",
+    mode: "confirm",
+  };
+  state.isOpen = true;
+};
+
+export const closeDialog = (state) => {
+  state.isOpen = false;
+};
+
+export const selectConfig = ({ state }) => state.config;
+export const selectIsOpen = ({ state }) => state.isOpen;
+
+export const selectViewData = ({ state }) => {
+  return {
+    isOpen: state.isOpen,
+    config: state.config,
+  };
+};

package/src/components/globalUi/globalUi.view.yaml

@@ -0,0 +1,50 @@
+elementName: rtgl-global-ui
+
+viewDataSchema:
+  type: object
+  properties:
+    isOpen:
+      type: boolean
+    config:
+      type: object
+      properties:
+        status:
+          type: string
+        title:
+          type: string
+        message:
+          type: string
+        confirmText:
+          type: string
+        cancelText:
+          type: string
+        mode:
+          type: string
+
+refs:
+  dialog:
+    eventListeners:
+      close:
+        handler: handleDialogClose
+  confirm-button:
+    eventListeners:
+      click:
+        handler: handleConfirm
+  cancel-button:
+    eventListeners:
+      click:
+        handler: handleCancel
+
+template:
+  - rtgl-dialog#dialog ?open=${isOpen} s=sm:
+      - rtgl-view slot=content g=lg p=lg:
+        - rtgl-view d=h g=md:
+          - rtgl-view d=h ah=c av=c g=md:
+          - rtgl-view g=md:
+            - rtgl-view h=24 av=c:
+              - rtgl-text fw=600: ${config.title}
+            - rtgl-text: ${config.message}
+        - rtgl-view d=h g=md mt=lg w=f ah=e:
+          - $if config.mode == 'confirm':
+            - rtgl-button#cancel-button v=se: ${config.cancelText}
+          - rtgl-button#confirm-button v=pr: ${config.confirmText}

package/src/components/navbar/navbar.handlers.js

@@ -1,5 +1,5 @@
 
-export const handleClickStart = (e, deps) => {
+export const handleClickStart = (deps, event) => {
   const { dispatchEvent, store } = deps;
   console.log('handle click start', store.selectPath());
   dispatchEvent(new CustomEvent('clickStart', {

package/src/components/navbar/navbar.store.js

@@ -1,4 +1,4 @@
-export const INITIAL_STATE = Object.freeze({});
+export const createInitialState = () => Object.freeze({});
 
 const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
 
@@ -6,7 +6,7 @@ const stringifyAttrs = (attrs) => {
   return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
 }
 
-export const toViewData = ({ state, props, attrs }) => {
+export const selectViewData = ({ state, props, attrs }) => {
   console.log('attrs', {
     attrs,
     entries: Object.entries(attrs)