@rettangoli/ui 0.1.2-rc2 → 0.1.2-rc21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc2",
+  "version": "0.1.2-rc21",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -9,7 +9,8 @@
     "src"
   ],
   "exports": {
-    ".": "./src/index.js"
+    ".": "./src/index.js",
+    "./cli": "./src/cli/index.js"
   },
   "module": "./src/index.js",
   "repository": {
@@ -48,10 +49,11 @@
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
+    "@rettangoli/fe": "0.0.7-rc11",
     "commander": "^13.1.0",
+    "jempl": "^0.1.2",
     "js-yaml": "^4.1.0",
     "liquidjs": "^10.21.0",
-    "@rettangoli/fe": "0.0.7-rc4",
     "snabbdom": "^3.6.2"
   }
 }

package/src/cli/buildSvg.js

@@ -0,0 +1,86 @@
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
+import { join, basename } from 'node:path';
+
+function getAllSvgFiles(dir) {
+  const svgFiles = [];
+  
+  function traverse(currentDir) {
+    const files = readdirSync(currentDir);
+    
+    for (const file of files) {
+      const fullPath = join(currentDir, file);
+      const stats = statSync(fullPath);
+      
+      if (stats.isDirectory()) {
+        traverse(fullPath);
+      } else if (file.endsWith('.svg')) {
+        svgFiles.push(fullPath);
+      }
+    }
+  }
+  
+  traverse(dir);
+  return svgFiles;
+}
+
+function removeFrontmatter(content) {
+  // Look for a line containing only '---'
+  const lines = content.split('\n');
+  
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].trim() === '---') {
+      // Found the separator, return everything after it
+      return lines.slice(i + 1).join('\n').trim();
+    }
+  }
+  
+  // No frontmatter separator found, return original content
+  return content;
+}
+
+const buildSvgIcons = (options) => {
+  const { dir, outfile } = options;
+  
+  if (!dir || !outfile) {
+    console.error('Error: Both dir and outfile options are required');
+    return;
+  }
+  
+  console.log(`Scanning for SVG files in: ${dir}`);
+  
+  const svgFiles = getAllSvgFiles(dir);
+  
+  if (svgFiles.length === 0) {
+    console.log('No SVG files found');
+    return;
+  }
+  
+  console.log(`Found ${svgFiles.length} SVG files`);
+  
+  const icons = {};
+  
+  for (const filePath of svgFiles) {
+    const fileName = basename(filePath, '.svg');
+    let content = readFileSync(filePath, 'utf8');
+    
+    content = removeFrontmatter(content);
+    
+    content = content.replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
+    
+    icons[fileName] = content;
+  }
+  
+  // Convert to custom format with single quotes for keys and backticks for values
+  const iconEntries = Object.entries(icons).map(([key, value]) => {
+    return `  '${key}': \`${value}\``;
+  });
+  
+  const output = `window.rtglIcons = {\n${iconEntries.join(',\n')}\n};`;
+  
+  writeFileSync(outfile, output);
+  
+  console.log(`SVG icons written to: ${outfile}`);
+  console.log(`Total icons: ${Object.keys(icons).length}`);
+};
+
+export default buildSvgIcons;

package/src/cli/index.js

@@ -0,0 +1 @@
+export { default as buildSvg } from './buildSvg.js';

package/src/components/breadcrumb/breadcrumb.handlers.js

@@ -0,0 +1,9 @@
+export const handleClickItem = (e, deps) => {
+  const { dispatchEvent } = deps;
+  const id = e.currentTarget.dataset.id;
+  dispatchEvent(new CustomEvent('item-click', {
+    detail: {
+      id
+    }
+  }));
+}

package/src/components/breadcrumb/breadcrumb.store.js

@@ -0,0 +1,29 @@
+export const INITIAL_STATE = Object.freeze({});
+
+const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+
+const stringifyAttrs = (attrs) => {
+  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
+}
+
+export const toViewData = ({ props, attrs }) => {
+  const containerAttrString = stringifyAttrs(attrs);
+
+  const items = props.items || [];
+  const separator = props.separator || 'breadcrumb-arrow';
+
+  // Add separators between items, but not after the last one
+  const itemsWithSeparators = [];
+  items.forEach((item, index) => {
+    itemsWithSeparators.push(item);
+    if (index < items.length - 1) {
+      itemsWithSeparators.push({ isSeparator: true });
+    }
+  });
+
+  return {
+    containerAttrString,
+    items: itemsWithSeparators,
+    separator
+  };
+}

package/src/components/breadcrumb/breadcrumb.view.yaml

@@ -0,0 +1,64 @@
+elementName: rtgl-breadcrumb
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+    separator:
+      type: string
+
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+    separator:
+      type: string
+      default: "breadcrumb-arrow"
+
+refs:
+  item-*:
+    eventListeners:
+      click:
+        handler: handleClickItem
+events:
+  item-click:
+    type: object
+    properties:
+      item:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+      index:
+        type: number
+
+template:
+  - rtgl-view d=h av=c g=md p=sm ${containerAttrString}:
+    - $for item in items:
+        - $if item.isSeparator:
+            - rtgl-svg wh=16 svg=${separator} c=mu-fg:
+          $elif item.id:
+            - rtgl-view#item-${item.id} data-id=${item.id} cur=p:
+              - rtgl-text s=sm c=mu-fg: "${item.label}"
+          $else:
+            - rtgl-text s=sm c=mu-fg: "${item.label}"

package/src/components/dropdownMenu/dropdownMenu.handlers.js

@@ -1,18 +1,18 @@
 
-export const handleClickPopoverOverlay = (e, deps) => {
+export const handleClosePopover = (e, deps) => {
   const { dispatchEvent } = deps;
-  dispatchEvent(new CustomEvent('click-overlay'));
+  dispatchEvent(new CustomEvent('close'));
 }
 
 export const handleClickMenuItem = (e, deps) => {
   const { dispatchEvent } = deps;
   const index = parseInt(e.currentTarget.id.replace('option-', ''));
   const item = deps.props.items[index];
-  
+
   dispatchEvent(new CustomEvent('click-item', {
     detail: {
       index,
       item
     }
   }));
-}
+}

package/src/components/dropdownMenu/dropdownMenu.store.js

@@ -2,24 +2,12 @@
 export const INITIAL_STATE = Object.freeze({
 });
 
-export const toViewData = ({ state, props }) => {
+export const toViewData = ({ props, attrs }) => {
   return {
     items: props.items || [],
-    isOpen: props.isOpen || false,
-    position: props.position || {
-      x: 0,
-      y: 0,
-    },
+    open: !!attrs.open,
+    x: attrs.x,
+    y: attrs.y,
+    placement: attrs.placement
   };
 }
-
-export const selectState = ({ state }) => {
-  return state;
-}
-
-export const setState = (state) => {
-  // do doSomething
-}
-
-
-

package/src/components/dropdownMenu/dropdownMenu.view.yaml

@@ -19,28 +19,31 @@ propsSchema:
               - label
               - item
               - separator
-    isOpen:
-      type: boolean
-    position:
-      type: object
-      properties:
-        x:
-          type: number
-        y:
-          type: number
+
+attrsSchema:
+  type: object
+  properties:
+    open:
+      type: string
+    x:
+      type: string
+    y:
+      type: string
+    placement:
+      type: string
 
 refs:
   popover:
     eventListeners:
-      click-overlay:
-        handler: handleClickPopoverOverlay
+      close:
+        handler: handleClosePopover
   option-*:
     eventListeners:
       click:
         handler: handleClickMenuItem
 
 template:
-  - rtgl-popover#popover .isOpen=isOpen .position=position:
+  - rtgl-popover#popover ?open=${open} x=${x} y=${y} placement=${placement}:
     - rtgl-view wh=300 g=xs slot=content bgc=background br=md:
       - $for item, i in items:
         - $if item.type == 'label':
@@ -51,4 +54,3 @@ template:
               - rtgl-text: ${item.label}
           $elif item.type == 'separator':
             - rtgl-view w=f h=1 ph=lg mv=md bgc=bo:
-            

package/src/components/form/form.handlers.js

@@ -1,13 +1,25 @@
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   const { store, props } = deps;
-  store.setDefaultValues(props.defaultValues);
+  store.setFormValues(props.defaultValues);
 };
 
-const dispatchFormChange = (fieldName, fieldValue, formValues, dispatchEvent) => {
+export const handleOnUpdate = (changes, deps) => {
+  const { oldAttrs, newAttrs } = changes;
+  const { store, props, render } = deps;
+
+  if (oldAttrs?.key === newAttrs?.key) {
+    return;
+  }
+
+  store.setFormValues(props.defaultValues);
+  render();
+};
+
+const dispatchFormChange = (name, fieldValue, formValues, dispatchEvent) => {
   dispatchEvent(
     new CustomEvent("form-change", {
       detail: {
-        fieldName,
+        name,
         fieldValue,
         formValues,
       },
@@ -29,51 +41,148 @@ export const handleActionClick = (e, deps) => {
 };
 
 export const handleInputChange = (e, deps) => {
+  const { store, dispatchEvent, props } = deps;
+  const name = e.currentTarget.id.replace("input-", "");
+  // TODO fix double event
+  if (name && e.detail.value !== undefined) {
+    store.setFormFieldValue({
+      name: name,
+      value: e.detail.value,
+      props,
+    });
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+  }
+};
+
+export const handlePopoverInputChange = (e, deps) => {
   const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace("input-", "");
+  const name = e.currentTarget.id.replace("popover-input-", "");
   // TODO fix double event
-  if (id && e.detail.value !== undefined) {
+  if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
-      // TODO user field name instead of id
-      fieldName: id,
+      name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(id, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
 export const handleSelectChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace("select-", "");
-  if (id && e.detail.selectedValue !== undefined) {
+  const { store, dispatchEvent, render, props } = deps;
+  const name = e.currentTarget.id.replace("select-", "");
+  if (name && e.detail.selectedValue !== undefined) {
     store.setFormFieldValue({
-      fieldName: id,
+      name: name,
       value: e.detail.selectedValue,
+      props,
     });
-    dispatchFormChange(id, e.detail.selectedValue, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.selectedValue,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+    render();
   }
 };
 
 export const handleColorPickerChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace("colorpicker-", "");
-  if (id && e.detail.value !== undefined) {
+  const { store, dispatchEvent, props } = deps;
+  const name = e.currentTarget.id.replace("colorpicker-", "");
+  if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
-      fieldName: id,
+      name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(id, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
 export const handleSliderChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace("slider-", "");
-  if (id && e.detail.value !== undefined) {
+  const { store, dispatchEvent, props } = deps;
+  const name = e.currentTarget.id.replace("slider-", "");
+  if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
-      fieldName: id,
+      name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(id, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
+
+export const handleSliderInputChange = (e, deps) => {
+  const { store, dispatchEvent, props } = deps;
+  const name = e.currentTarget.id.replace("slider-input-", "");
+  if (name && e.detail.value !== undefined) {
+    store.setFormFieldValue({
+      name: name,
+      value: e.detail.value,
+      props,
+    });
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+  }
+};
+
+export const handleImageClick = (e, deps) => {
+  if (e.type === "contextmenu") {
+    e.preventDefault();
+  }
+  const { dispatchEvent } = deps;
+  const name = e.currentTarget.id.replace("image-", "");
+  dispatchEvent(
+    new CustomEvent("extra-event", {
+      detail: {
+        name: name,
+        x: e.clientX,
+        y: e.clientY,
+        trigger: e.type,
+      },
+    }),
+  );
+};
+
+export const handleWaveformClick = (e, deps) => {
+  if (e.type === "contextmenu") {
+    e.preventDefault();
+  }
+  const { dispatchEvent } = deps;
+  const name = e.currentTarget.id.replace("waveform-", "");
+  dispatchEvent(
+    new CustomEvent("extra-event", {
+      detail: {
+        name: name,
+        x: e.clientX,
+        y: e.clientY,
+        trigger: e.type,
+      },
+    }),
+  );
+};

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

@@ -1,45 +1,147 @@
+import { parseAndRender } from "jempl";
+
+function pick(obj, keys) {
+  return keys.reduce((acc, key) => {
+    if (key in obj) acc[key] = obj[key];
+    return acc;
+  }, {});
+}
+
 export const INITIAL_STATE = Object.freeze({
-  formValues: {}
+  formValues: {},
 });
 
-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 }) => {
   const containerAttrString = stringifyAttrs(attrs);
+  const defaultValues = props.defaultValues || {};
+
+  const form = selectForm({ state, props });
+  const fields = structuredClone(form.fields || []);
+  fields.forEach((field) => {
+    field.defaultValue = get(defaultValues, field.name);
+
+    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 {
     containerAttrString,
-    title: props.form?.title || '',
-    description: props?.form?.description || '',
-    fields: props?.form?.fields || [],
+    title: form?.title || "",
+    description: form?.description || "",
+    fields: fields,
     actions: props?.form?.actions || {
-      buttons: []
+      buttons: [],
     },
-    // TODO fix default values
     formValues: state.formValues,
   };
-}
+};
 
 export const selectState = ({ state }) => {
   return state;
-}
+};
 
-export const selectFormValues = ({ state }) => {
-  return state.formValues;
-}
+export const selectFormValues = ({ state, props }) => {
+  const form = selectForm({ state, props });
 
-export const setState = (state) => {
-  // do doSomething
-}
+  return pick(
+    state.formValues,
+    form.fields.map((field) => field.name),
+  );
+};
 
-export const setDefaultValues = (state, defaultValues) => {
-  state.formValues = defaultValues || {};
-}
+export const getFormFieldValue = ({ state }, name) => {
+  return get(state.formValues, name);
+};
 
-export const setFormFieldValue = (state, { fieldName, value }) => {
-  state.formValues[fieldName] = value;
-}
+export const setFormValues = (state, defaultValues) => {
+  state.formValues = defaultValues || {};
+};
 
+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;
+};