@rettangoli/ui 0.1.0

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

@@ -0,0 +1,174 @@
+elementName: rtgl-form
+
+viewDataSchema:
+  type: object
+
+propsSchema:
+  type: object
+  properties:
+    defaultValues:
+      type: object
+    form:
+      type: object
+      properties:
+        title:
+          type: string
+        description:
+          type: string
+        fields:
+          type: array
+          items:
+            anyOf:
+              - type: object
+                properties:
+                  id:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: inputText
+                  placeholder:
+                    type: string
+                required:
+                  - id
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  id:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: select
+                  placeholder:
+                    type: string
+                  options:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        id:
+                          type: string
+                        label:
+                          type: string
+                        value:
+                          type: any
+                      required:
+                        - id
+                        - label
+                        - value
+                required:
+                  - id
+                  - label
+                  - inputType
+                  - options
+                additionalProperties: false
+              - type: object
+                properties:
+                  id:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: colorPicker
+                  value:
+                    type: string
+                required:
+                  - id
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  id:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: slider
+                  min:
+                    type: number
+                  max:
+                    type: number
+                  step:
+                    type: number
+                  value:
+                    type: number
+                required:
+                  - id
+                  - label
+                  - inputType
+                additionalProperties: false
+        actions:
+          type: object
+          properties:
+            buttons:
+              type: array
+              items:
+                type: object
+                properties:
+                  id:
+                    type: string
+                  content:
+                    type: string
+                required:
+                  - id
+                  - content
+
+refs:
+  action-*:
+    eventListeners:
+      click:
+        handler: handleActionClick
+  input-*:
+    eventListeners:
+      input-keydown:
+        handler: handleInputChange
+  select-*:
+    eventListeners:
+      select-change:
+        handler: handleSelectChange
+  colorpicker-*:
+    eventListeners:
+      colorpicker-change:
+        handler: handleColorPickerChange
+  slider-*:
+    eventListeners:
+      slider-change:
+        handler: handleSliderChange
+
+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=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.id} w=f placeholder=${field.placeholder}:
+            - $if field.inputType == "select":
+                - rtgl-select#select-${field.id} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=formValues[field.id]:
+            - $if field.inputType == "colorPicker":
+                - rtgl-color-picker#colorpicker-${field.id} value=${field.value}:
+            - $if field.inputType == "slider":
+                - rtgl-slider#slider-${field.id} min=${field.min} max=${field.max} step=${field.step} value=${field.value}: 
+    - 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}

package/src/components/navbar/navbar.examples.yaml

@@ -0,0 +1,86 @@
+config: {}
+
+---
+name: 'basic_with_href'
+viewData:
+  start:
+    label: "My App"
+    href: "/"
+
+---
+name: 'with_path_navigation'
+viewData:
+  start:
+    label: "Dashboard"
+    path: "/dashboard"
+
+---
+name: 'with_logo_image'
+viewData:
+  start:
+    label: "Company Name"
+    image:
+      src: "/logo.png"
+      width: 32
+      height: 32
+      alt: "Company Logo"
+
+---
+name: 'with_logo_and_href'
+viewData:
+  start:
+    label: "Rettangoli"
+    href: "/"
+    image:
+      src: "/assets/logo.svg"
+      width: 40
+      height: 40
+      alt: "Rettangoli Logo"
+
+---
+name: 'with_logo_and_path'
+viewData:
+  start:
+    label: "Project Hub"
+    path: "/projects"
+    image:
+      src: "/icons/hub.png"
+      width: 28
+      height: 28
+      alt: "Hub Icon"
+
+---
+name: 'text_only_no_navigation'
+viewData:
+  start:
+    label: "Static Header"
+
+---
+name: 'long_label_with_image'
+viewData:
+  start:
+    label: "Enterprise Resource Planning System"
+    image:
+      src: "/brand/enterprise-logo.jpg"
+      width: 36
+      height: 36
+      alt: "Enterprise Logo"
+
+---
+name: 'minimal_brand'
+viewData:
+  start:
+    label: "Brand"
+    href: "/home"
+
+---
+name: 'app_with_square_logo'
+viewData:
+  start:
+    label: "TaskFlow"
+    path: "/tasks"
+    image:
+      src: "/logos/taskflow-square.png"
+      width: 30
+      height: 30
+      alt: "TaskFlow Square Logo"

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

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

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

@@ -0,0 +1,46 @@
+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 = ({ state, props, attrs }) => {
+  console.log('attrs', {
+    attrs,
+    entries: Object.entries(attrs)
+  })
+
+  const attrsStart = attrs.start ? JSON.parse(decodeURIComponent(attrs.start)) : props.start;
+
+  const containerAttrString = stringifyAttrs(attrs);
+  const start = attrsStart || {
+    label: '',
+    // href: undefined,
+    // path: undefined,
+    image: {
+      src: '',
+      width: 32,
+      height: 32,
+      alt: ''
+    }
+  }
+  // start.hasImage = start.image && start.image.src;
+  // start.hasHref = !!start.href;
+  return {
+    containerAttrString,
+    start
+  };
+}
+
+export const selectPath = ({ props }) => {
+  return props.start.path;
+}
+
+export const setState = (state) => {
+  // do doSomething
+}
+
+
+

package/src/components/navbar/navbar.view.yaml

@@ -0,0 +1,74 @@
+elementName: rtgl-navbar
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    start:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+        hasImage:
+          type: boolean
+        hasHref:
+          type: boolean
+
+propsSchema:
+  type: object
+  properties:
+    start:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+
+refs:
+  start:
+    eventListeners:
+      click:
+        handler: handleClickStart
+
+events:
+  clickStart:
+    type: object
+    properties:
+      path:
+        type: string
+
+anchors:
+  - &image
+    - rtgl-text s=lg: "${start.label}"
+    - $if start.image && start.image.src:
+        - rtgl-image w=${start.image.width} h=${start.image.height} src=${start.image.src} alt=${start.image.alt}:
+
+template:
+  - rtgl-view bgc=bg d=h h=48 av=c w=f ${containerAttrString}:
+    - $if start.href:
+        - a href=${start.href}:
+          - rtgl-view d=h av=c g=lg g=md:
+            - *image
+      $elif start.path:
+        - rtgl-view#start d=h av=c g=lg g=md cur=p:
+          - *image
+      $else:
+        - rtgl-view d=h av=c g=lg g=md:
+          - *image
+    - rtgl-view flex=1:
+    - rtgl-view d=h av=c g=lg:
+      - slot name=right:

package/src/components/pageOutline/pageOutline.handlers.js

@@ -0,0 +1,69 @@
+
+
+/**
+ * 
+ * @param {*} headingElements 
+ * @param {*} deps 
+ */
+const updateToLatestCurrentId = (headingElements, deps) => {
+  const { store, render } = deps;
+
+  let currentHeadingId;
+  let closestTopPosition = -Infinity;
+  
+  headingElements.forEach((heading) => {
+    const rect = heading.getBoundingClientRect();
+    
+    if (rect.top <= 20) {
+      if (rect.top > closestTopPosition) {
+        closestTopPosition = rect.top;
+        currentHeadingId = heading.id;
+      }
+    }
+  });
+  
+  if (currentHeadingId && currentHeadingId !== store.selectCurrentId()) {
+    store.setCurrentId(currentHeadingId);
+    render();
+  }
+};
+
+const startListening = (contentContainer, deps) => {
+  const { store, render } = deps;
+  
+  // Extract headings
+  const headings = contentContainer.querySelectorAll("rtgl-text[id]");
+  const headingElements = Array.from(headings);
+  
+  const items = headingElements.map((heading) => ({
+    id: heading.id,
+    href: `#${heading.id}`,
+    title: heading.textContent
+  }));
+  
+  store.setItems(items);
+  updateToLatestCurrentId(headingElements, deps);
+  render();
+
+  const boundCheckCurrentHeading = updateToLatestCurrentId.bind(this, headingElements, deps);
+  
+  // Add scroll listener to the content container
+  contentContainer.addEventListener("scroll", boundCheckCurrentHeading, {
+    passive: true,
+  });
+
+  return () => {
+    contentContainer.removeEventListener("scroll", boundCheckCurrentHeading);
+  }
+};
+
+export const handleOnMount = (deps) => {
+  const { attrs } = deps;
+  requestAnimationFrame(() => {
+    const targetElement = document.getElementById(attrs['target-id'])
+    const stopListening = startListening(targetElement, deps)
+    return () => {
+      stopListening();
+    }
+  })
+}

package/src/components/pageOutline/pageOutline.store.js

@@ -0,0 +1,40 @@
+export const INITIAL_STATE = Object.freeze({
+  items: [],
+  currentId: null,
+  contentContainer: null
+});
+
+export const toViewData = ({ state }) => {
+  return {
+    items: state.items.map((item) => {
+      return {
+        ...item,
+        c: item.id === state.currentId ? 'fg' : 'mu-fg'
+      }
+    }),
+    currentId: state.currentId
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const selectCurrentId = ({ state }) => {
+  return state.currentId;
+}
+
+export const setItems = (state, items) => {
+  state.items = items;
+}
+
+export const setCurrentId = (state, id) => {
+  state.currentId = id;
+}
+
+export const setContentContainer = (state, container) => {
+  state.contentContainer = container;
+}
+
+
+

package/src/components/pageOutline/pageOutline.view.yaml

@@ -0,0 +1,34 @@
+elementName: rtgl-page-outline
+
+viewDataSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          slug:
+            type: string
+          title:
+            type: string
+    selectedSlug:
+      type: string
+      nullable: true
+
+propsSchema:
+  type: object
+  properties: {}
+
+refs: {}
+
+events:
+  onItemClick:
+    type: object
+
+template:
+  - rtgl-view h=f w=272:
+    - rtgl-view w=f g=sm mt=xl:
+      - $for item, i in items:
+        - rtgl-view pv=xs av=c href=${item.href}:
+          - rtgl-text s=sm c=${item.c} h-c=fg: ${item.title}

package/src/components/popover/popover.handlers.js

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

package/src/components/popover/popover.store.js

@@ -0,0 +1,12 @@
+export const INITIAL_STATE = Object.freeze({});
+
+export const toViewData = ({ state, props }) => {
+  return {
+    isOpen: props.isOpen,
+    position: props.position,
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}

package/src/components/popover/popover.view.yaml

@@ -0,0 +1,57 @@
+elementName: rtgl-popover
+
+viewDataSchema:
+  type: object
+  properties:
+    isOpen:
+      type: boolean
+    position:
+      type: object
+      properties:
+        x:
+          type: number
+        y:
+          type: number
+    placement:
+      type: string
+
+propsSchema:
+  type: object
+  properties:
+    placement:
+      type: string
+      default: bottom
+    isOpen:
+      type: boolean
+    position:
+      type: object
+      properties:
+        x:
+          type: number
+        y:
+          type: number
+
+refs:
+  popoverOverlay:
+    eventListeners:
+      click:
+        handler: handleClickOverlay
+
+styles:
+  '@keyframes popover-in':
+    from:
+      opacity: 0
+      transform: scale(0.95)
+    to:
+      opacity: 1
+      transform: scale(1)
+
+  '#popoverContainer':
+    animation: popover-in 150ms cubic-bezier(0.16, 1, 0.3, 1)
+    transform-origin: top
+
+template:
+  - $if isOpen:
+    - rtgl-view#popoverOverlay pos=fix cor=full:
+    - 'rtgl-view#popoverContainer pos=fix style="left: ${position.x}px; top: ${position.y}px;" id=floatingElement bw=xs p=md bgc=mu':
+      - slot name=content:

package/src/components/select/select.handlers.js

@@ -0,0 +1,61 @@
+
+export const handleOnMount = (deps) => {
+  const { store, props, render } = deps;
+  
+  if (props.selectedValue !== null && props.selectedValue !== undefined && props.options) {
+    const selectedOption = props.options.find(opt => opt.value === props.selectedValue);
+    if (selectedOption) {
+      store.update((state) => {
+        state.selectedValue = selectedOption.value;
+        state.selectedLabel = selectedOption.label;
+      });
+      render();
+    }
+  }
+}
+
+export const handleButtonClick = (e, deps) => {
+  const { store, render, getRefIds } = deps;
+  store.openOptionsPopover({
+    position: {
+      y: e.clientY,
+      x: e.clientX,
+    }
+  })
+  render();
+}
+
+export const handleClickOptionsPopoverOverlay = (e, deps) => {
+  const { store, render } = deps;
+  store.closeOptionsPopover();
+  render();
+}
+
+export const handleOptionClick = (e, deps) => {
+  const { render, dispatchEvent, props, store } = deps;
+  const id = e.currentTarget.id.replace('option-', '');
+
+  const option = props.options[id];
+
+  // Update internal state
+  store.updateSelectOption(option);
+
+  // Call onChange if provided
+  if (props.onChange && typeof props.onChange === 'function') {
+    props.onChange(option.value);
+  }
+
+  // Dispatch custom event for backward compatibility
+  dispatchEvent(new CustomEvent('option-selected', {
+    detail: { value: option.value, label: option.label },
+    bubbles: true
+  }));
+
+  // Also dispatch select-change event to match form's event listener pattern
+  dispatchEvent(new CustomEvent('select-change', {
+    detail: { selectedValue: option.value },
+    bubbles: true
+  }));
+  
+  render();
+}