rettangoli-ui 0.1.0-rc2 → 0.1.0-rc4

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "rettangoli-ui",
-  "version": "0.1.0-rc2",
+  "version": "0.1.0-rc4",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "module": "./src/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/yuusoft-org/rettangoli.git"
@@ -17,12 +22,14 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "bun run ../rettangoli-cli/cli.js fe build -d ./src -o ./viz/static/public/main.js && bun run esbuild.js"
+    "build:dev": "bun run ../rettangoli-cli/cli.js fe build && bun run esbuild-dev.js",
+    "build": "bun run ../rettangoli-cli/cli.js fe build && bun run esbuild.js"
   },
   "devDependencies": {
     "esbuild": "^0.20.0",
-    "playwright": "^1.46.0",
+    "looks-same": "^9.0.1",
     "pixelmatch": "^6.0.0",
+    "playwright": "^1.46.0",
     "pngjs": "^7.0.0"
   },
   "keywords": [

package/src/common/BaseElement.js

@@ -0,0 +1,182 @@
+/**
+ * Subscribes to all observables and returns a functionthat will unsubscribe
+ * from all observables when called
+ * @param {*} observables
+ * @returns
+ */
+const subscribeAll = (observables) => {
+  // Subscribe to all observables and store the subscription objects
+  const subscriptions = observables.map((observable) => observable.subscribe());
+
+  // Return a function that will unsubscribe from all observables when called
+  return () => {
+    for (const subscription of subscriptions) {
+      if (subscription && typeof subscription.unsubscribe === "function") {
+        subscription.unsubscribe();
+      }
+    }
+  };
+};
+
+/**
+ * Creates a base web component element to be used in environments
+ * where the output is strings such as server side rendering environments
+ * @param {Object} param
+ * @param {Function} param.render - The render function to be used in the element. compliant with uhtml.render
+ * @returns
+ */
+export const createSsrBaseElement = ({ render }) => {
+
+  class CSSStyleSheet {
+    _css = "";
+
+    get css() {
+      return this._css;
+    }
+
+    replaceSync(css) {
+      this._css = css;
+    }
+  }
+  class SsrRenderTarget {
+    innerHTML = "";
+    adoptedStyleSheets = [];
+    write(html) {
+      this.innerHTML = html;
+    }
+  }
+  class BaseBaseSsrElement {
+    renderTarget = new SsrRenderTarget();
+
+    constructor() {
+      const styleSheet = new CSSStyleSheet();
+      styleSheet.replaceSync(`:host { display: contents; }`);
+      this.renderTarget.adoptedStyleSheets = [styleSheet];
+    }
+  }
+  return class BaseSsrElement extends createGenericBaseElement({
+    BaseElement: BaseBaseSsrElement,
+    render,
+    skipOnMount: true,
+  }) {};
+};
+
+/**
+ * Creates a base web component element to be used in web browser environments
+ * @param {Object} param
+ * @param {Function} param.render - The render function to be used in the element. compliant with uhtml.render
+ * @returns
+ */
+export const createWebComponentBaseElement = ({ render, styleSheet }) => {
+  let actualStyleSheet;
+
+  if (styleSheet) {
+    actualStyleSheet = styleSheet;
+  } else {
+    actualStyleSheet = new CSSStyleSheet();
+    actualStyleSheet.replaceSync(`:host { display: contents; }`);
+  }
+
+  return class BaseWebComponentElement extends createGenericBaseElement({
+    BaseElement: HTMLElement,
+    render,
+    skipOnMount: false,
+  }) {
+    static get observedAttributes() {
+      return ["key"];
+    }
+
+    constructor() {
+      super();
+      this.renderTarget = this.attachShadow({ mode: "closed" });
+    }
+
+    connectedCallback() {
+      this.renderTarget.adoptedStyleSheets = [actualStyleSheet];
+      this.baseOnMount();
+    }
+
+    disconnectedCallback() {
+      this.baseOnUnmount();
+    }
+
+    attributeChangedCallback() {
+      setTimeout(() => {
+        this.reRender();
+      }, 0);
+    }
+  };
+};
+
+/**
+ * Creates a base web component element to be used in environments
+ * where the output is strings such as server side rendering environments
+ * @param {Object} param
+ * @param {Object} param.BaseElement - The base element to be used in the element.
+ * @param {Function} param.render - The render function to be used in the element. compliant with uhtml.render
+ * @param {Boolean} param.skipOnMount - Whether to skip the onMount callback. Default is false.
+ * @returns 
+ */
+export const createGenericBaseElement = ({ BaseElement, render, skipOnMount = false }) => {
+  class GenericBaseElement extends BaseElement {
+
+    _renderKey = 0;
+    _unmountCallback;
+    // renderTarget;
+    disableFirstAutomatedRender = false;
+
+    get renderKey() {
+      return String(this._renderKey);
+    }
+
+    baseOnMount = () => {
+      if (!skipOnMount && this.onMount) {
+        this._unmountCallback = this.onMount();
+      }
+
+      if (!this.disableFirstAutomatedRender) {
+        this.reRender();
+      }
+
+      if (this.attachedObservables) {
+        if (Array.isArray(this.attachedObservables)) {
+          this.unsubscribe = subscribeAll(this.attachedObservables);
+        } else {
+          this.unsubscribe = subscribeAll(this.attachedObservables());
+        }
+      } else if (this.subscriptions) {
+        this.unsubscribe = subscribeAll(this.subscriptions);
+      }
+    };
+
+    baseOnUnmount = () => {
+      if (this._unmountCallback) {
+        this._unmountCallback();
+      }
+      if (this.onUnmount) {
+        this.onUnmount();
+      }
+      if (this.unsubscribe) {
+        this.unsubscribe();
+      }
+    };
+
+    /**
+     * @deprecated
+     * @see reRender
+     */
+    triggerRender = () => {
+      this.reRender();
+    };
+
+    /**
+     * ReRenders the component
+     */
+    reRender = () => {
+      this._renderKey++;
+      render(this.renderTarget, this.render());
+    };
+  }
+
+  return GenericBaseElement;
+};

package/src/common.js

@@ -0,0 +1,190 @@
+function css(strings, ...values) {
+  // Combine the strings and values back into a single string
+  let str = "";
+  strings.forEach((string, i) => {
+    str += string + (values[i] || "");
+  });
+  return str;
+}
+
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+
+const styleMap = {
+  mt: "margin-top",
+  mr: "margin-right",
+  mb: "margin-bottom",
+  ml: "margin-left",
+  m: "margin",
+  mh: "margin-left margin-right",
+  mv: "margin-top margin-bottom",
+  pt: "padding-top",
+  pr: "padding-right",
+  pb: "padding-bottom",
+  pl: "padding-left",
+  p: "padding",
+  ph: "padding-left padding-right",
+  pv: "padding-top padding-bottom",
+  g: "gap",
+  gv: "row-gap",
+  gh: "column-gap",
+  bw: "border-width",
+  bwt: "border-top-width",
+  bwr: "border-right-width",
+  bwb: "border-bottom-width",
+  bwl: "border-left-width",
+  bc: "border-color",
+  br: "border-radius",
+  pos: "position",
+  shadow: "box-shadow",
+  ta: "text-align",
+  c: "color",
+  cur: "cursor",
+};
+
+export const styleMapKeys = Object.keys(styleMap);
+
+export const permutateBreakpoints = (keys) => {
+  return keys.concat(
+    breakpoints.flatMap((breakpoint) =>
+      keys.map((key) => `${breakpoint}-${key}`)
+    )
+  );
+};
+
+const mediaQueries = {
+  default: undefined,
+  xl: "@media only screen and (max-width: 1280px)",
+  lg: "@media only screen and (max-width: 1024px)",
+  md: "@media only screen and (max-width: 768px)",
+  sm: "@media only screen and (max-width: 640px)",
+};
+
+const generateCSS = (styles, descendants = {}) => {
+  let css = "";
+
+  for (const [size, mediaQuery] of Object.entries(mediaQueries)) {
+    if (size !== "default") {
+      css += `${mediaQuery} {`;
+    }
+    for (const [attr, values] of Object.entries(styles)) {
+      const dscendant = descendants[attr] ? ` ${descendants[attr]} ` : " ";
+      for (const [value, rule] of Object.entries(values)) {
+        const cssProperties = styleMap[attr];
+        const cssRule = rule.startsWith("--") ? `var(${rule})` : rule;
+
+        const attributeWithBreakpoint =
+          size === "default" ? attr : `${size}-${attr}`;
+        const hoverAttributeWithBreakpoint =
+          size === "default" ? `h-${attr}` : `${size}-h-${attr}`;
+
+        if (cssProperties) {
+          // Handle multiple properties if mapped in styleMap
+          const properties = cssProperties.split(" ");
+          let propertyRules = properties
+            .map((property) => `${property}: ${cssRule};`)
+            .join(" ");
+
+          css += `
+            :host([${attributeWithBreakpoint}="${value}"])${dscendant}{
+              ${propertyRules}
+            }
+            :host([${hoverAttributeWithBreakpoint}="${value}"]:hover)${dscendant}{
+              ${propertyRules}
+            }
+          `;
+        } else {
+          // Attribute is not mapped, handle directly
+          css += `
+            :host([${attributeWithBreakpoint}="${value}"])${dscendant}{
+              ${rule}
+            }
+            :host([${hoverAttributeWithBreakpoint}="${value}"]:hover)${dscendant}{
+              ${rule}
+            }
+          `;
+        }
+      }
+    }
+    if (size !== "default") {
+      css += `}`;
+    }
+  }
+  return css;
+};
+
+function endsWithDigit(inputValue) {
+  if (inputValue === null) {
+    return false;
+  }
+  if (inputValue.includes("/")) {
+    return false;
+  }
+  // Convert the input value to a string if it's not already one.
+  const inputStr = String(inputValue);
+  // Check if the last character of the string is a digit.
+  return /[0-9]$/.test(inputStr);
+}
+
+const endsWithPercentage = (inputStr) => {
+  return /%$/.test(inputStr);
+};
+
+const dimensionWithUnit = (dimension) => {
+  if (dimension === undefined) {
+    return;
+  }
+
+  if (endsWithPercentage(dimension)) {
+    return dimension;
+  }
+
+  if (endsWithDigit(dimension)) {
+    return `${dimension}px`;
+  }
+
+  if (Object.keys(spacing).includes(dimension)) {
+    return `var(${spacing[dimension]})`;
+  }
+
+  return dimension;
+};
+
+const spacing = {
+  xs: "--spacing-xs",
+  sm: "--spacing-sm",
+  md: "--spacing-md",
+  lg: "--spacing-lg",
+  xl: "--spacing-xl",
+};
+
+function convertObjectToCssString(styleObject, selector = ':host') {
+  let result = "";
+  for (const [size, mediaQuery] of Object.entries(mediaQueries)) {
+    if (size !== "default") {
+      result += `${mediaQuery} {\n`;
+    }
+    let cssString = "";
+    for (const [key, value] of Object.entries(styleObject[size])) {
+      if (value !== undefined && value !== null) {
+        cssString += `${key}: ${value};\n`;
+      }
+    }
+    result += `${selector} {
+    ${cssString.trim()}
+    }\n`;
+
+    if (size !== "default") {
+      result += `}\n`;
+    }
+  }
+  return result;
+}
+
+export {
+  css,
+  generateCSS,
+  dimensionWithUnit,
+  spacing,
+  convertObjectToCssString,
+  mediaQueries,
+};

package/src/components/dialog/dialog.handlers.js

@@ -0,0 +1,5 @@
+
+export const handleClickDialogueOverlay = (e, deps) => {
+  const { dispatchEvent } = deps;
+  dispatchEvent(new CustomEvent('close-dialogue'));
+}

package/src/components/dialog/dialog.store.js

@@ -0,0 +1,24 @@
+export const INITIAL_STATE = Object.freeze({
+  //
+});
+
+export const toViewData = ({ state, props }) => {
+  return {
+    isOpen: props.isOpen,
+    position: {
+      x: 0,
+      y: 0
+    }
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const setState = (state) => {
+  // do doSomething
+}
+
+
+

package/src/components/dialog/dialog.view.yaml

@@ -0,0 +1,41 @@
+elementName: rtgl-dialog
+
+viewDataSchema:
+  type: object
+
+propsSchema:
+  type: object
+  properties:
+    isOpen:
+      type: boolean
+
+refs:
+  dialog-overlay:
+    eventListeners:
+      click:
+        handler: handleClickDialogueOverlay
+
+events:
+  close-dialogue:
+    type: object
+    properties: {}
+
+styles:
+  # '@keyframes dialog-in':
+  #   from:
+  #     opacity: 0
+  #     transform: scale(0.95)
+  #   to:
+  #     opacity: 1
+  #     transform: scale(1)
+
+  # '#dialog-container':
+  #   animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1)
+  #   transform-origin: top
+
+template:
+  - $if isOpen:
+    - rtgl-view pos=fix cor=full ah=c av=c:
+      - 'rtgl-view#dialog-overlay pos=fix cor=full ah=c av=c bgc=bg op=0.5':
+      - rtgl-view#dialog-container pos=fix bw=xs p=lg bgc=bg w=600 br=sm:
+        - slot name=content:

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

@@ -0,0 +1,5 @@
+
+export const handleClickPopoverOverlay = (e, deps) => {
+  const { dispatchEvent } = deps;
+  dispatchEvent(new CustomEvent('click-overlay'));
+}

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

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

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

@@ -0,0 +1,52 @@
+elementName: rtgl-dropdown-menu
+
+viewDataSchema:
+  type: object
+
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          type:
+            type: string
+            enum:
+              - label
+              - item
+              - separator
+    isOpen:
+      type: boolean
+    position:
+      type: object
+      properties:
+        x:
+          type: number
+        y:
+          type: number
+
+refs:
+  popover:
+    eventListeners:
+      click-overlay:
+        handler: handleClickPopoverOverlay
+
+events: {}
+
+template:
+  - rtgl-popover#popover .isOpen=isOpen .position=position:
+    - rtgl-view wh=300 g=xs slot=content bgc=background br=md:
+      - $for item, i in items:
+        - $if item.type == 'label':
+            - rtgl-view w=f ph=lg pv=md:
+              - rtgl-text s=sm c=mu-fg: ${item.label}
+          $elif item.type == 'item':
+            - rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=mu:
+              - 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

@@ -0,0 +1,30 @@
+export const handleOnMount = (deps) => {
+  const { store, props } = deps;
+  store.setDefaultValues(props.defaultValues);
+};
+
+export const handleActionClick = (e, deps) => {
+  const { store, dispatchEvent } = deps;
+  const id = e.currentTarget.id.replace("action-", "");
+  dispatchEvent(
+    new CustomEvent("action-click", {
+      detail: {
+        actionId: id,
+        formValues: store.selectFormValues(),
+      },
+    }),
+  );
+};
+
+export const handleInputChange = (e, deps) => {
+  const { store } = deps;
+  const id = e.currentTarget.id.replace("input-", "");
+  // TODO fix double event
+  if (id && e.detail.value !== undefined) {
+    store.setFormFieldValue({
+      // TODO user field name instead of id
+      fieldName: id,
+      value: e.detail.value,
+    });
+  }
+};

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

@@ -0,0 +1,45 @@
+export const INITIAL_STATE = Object.freeze({
+  formValues: {}
+});
+
+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 = ({ state, props, attrs }) => {
+  const containerAttrString = stringifyAttrs(attrs);
+  return {
+    containerAttrString,
+    title: props.form?.title || '',
+    description: props?.form?.description || '',
+    fields: props?.form?.fields || [],
+    actions: props?.form?.actions || {
+      buttons: []
+    },
+    // TODO fix default values
+    formValues: state.formValues,
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const selectFormValues = ({ state }) => {
+  return state.formValues;
+}
+
+export const setState = (state) => {
+  // do doSomething
+}
+
+export const setDefaultValues = (state, defaultValues) => {
+  state.formValues = defaultValues || {};
+}
+
+export const setFormFieldValue = (state, { fieldName, value }) => {
+  state.formValues[fieldName] = value;
+}
+

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

@@ -0,0 +1,47 @@
+elementName: rtgl-form
+
+viewDataSchema:
+  type: object
+
+propsSchema:
+  type: object
+  properties:
+    defaultValues:
+      type: object
+      properties: {}
+    form:
+      type: object
+      properties:
+        title:
+          type: string
+        description:
+          type: string
+
+refs:
+  action-*:
+    eventListeners:
+      click:
+        handler: handleActionClick
+  input-*:
+    eventListeners:
+      input-keydown:
+        handler: handleInputChange
+
+events: {}
+
+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=sm w=f:
+      - $for field, i in fields:
+        - rtgl-view g=sm w=f:
+            - rtgl-text: ${field.label}
+            - rtgl-text s=sm c=mu-fg: ${field.description}
+            - $if field.inputType == "inputText":
+                - rtgl-input#input-${field.id} w=f: 
+    - rtgl-view g=sm w=f:
+      - $for button, i in actions.buttons:
+        - rtgl-view d=h ah=e g=sm w=f:
+          - rtgl-button#action-${button.id}: ${button.content}