rettangoli-ui 0.1.0-rc2 → 0.1.0-rc4

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,46 @@
+
+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 } = deps;
+  const id = e.currentTarget.id.replace('option-', '');
+
+  const option = props.options[id];
+
+  dispatchEvent(new CustomEvent('option-selected', {
+    detail: { value: option.value, label: option.label },
+    bubbles: true
+  }));
+  
+  render();
+}

package/src/components/select/select.store.js

@@ -0,0 +1,65 @@
+export const INITIAL_STATE = Object.freeze({
+  isOpen: false,
+  position: {
+    x: 0,
+    y: 0,
+  },
+  selectedValue: null,
+  selectedLabel: null,
+});
+
+export const toViewData = ({ state, props }) => {
+  // Calculate display label
+  let displayLabel = props.placeholder || 'Select an option';
+  
+  // Use state's selected value if available, otherwise use props.selectedValue
+  const currentValue = state.selectedValue !== null ? state.selectedValue : props.selectedValue;
+  
+  if (currentValue !== null && currentValue !== undefined && props.options) {
+    const selectedOption = props.options.find(opt => opt.value === currentValue);
+    if (selectedOption) {
+      displayLabel = selectedOption.label;
+    }
+  } else if (state.selectedLabel) {
+    displayLabel = state.selectedLabel;
+  }
+  
+  // Map options to include isSelected flag and computed background color
+  const optionsWithSelection = (props.options || []).map(option => ({
+    ...option,
+    isSelected: option.value === currentValue,
+    bgc: option.value === currentValue ? 'mu' : ''
+  }));
+  
+  return {
+    isOpen: state.isOpen,
+    position: state.position,
+    options: optionsWithSelection,
+    selectedValue: currentValue,
+    selectedLabel: displayLabel,
+    placeholder: props.placeholder || 'Select an option'
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const openOptionsPopover = (state, payload) => {
+  const { position } = payload;
+  state.position = position;
+  state.isOpen = true;
+}
+
+export const closeOptionsPopover = (state) => {
+  state.isOpen = false;
+}
+
+export const selectOption = (state, option) => {
+  state.selectedValue = option.value;
+  state.selectedLabel = option.label;
+  state.isOpen = false;
+}
+
+
+

package/src/components/select/select.view.yaml

@@ -0,0 +1,50 @@
+elementName: rtgl-select
+
+viewDataSchema:
+  type: object
+
+propsSchema:
+  type: object
+  properties:
+    options:
+      type: array
+      items:
+        type: object
+        properties:
+          id:
+            type: string
+          label:
+            type: string
+          value:
+            type: any
+    selectedValue:
+      type: any
+    placeholder:
+      type: string
+    onChange:
+      type: function
+
+refs:
+  select-button:
+    eventListeners:
+      click:
+        handler: handleButtonClick
+  popover:
+    eventListeners:
+      click-overlay:
+        handler: handleClickOptionsPopoverOverlay
+  option-*:
+    eventListeners:
+      click:
+        handler: handleOptionClick
+
+events: {}
+
+template:
+  - rtgl-button#select-button v=ol:
+    - ${selectedLabel}
+  - rtgl-popover#popover .isOpen=isOpen .position=position:
+    - rtgl-view wh=300 g=xs slot=content bgc=background br=md:
+      - $for option, i in options:
+        - rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=${option.bgc}:
+          - rtgl-text: ${option.label}

package/src/components/sidebar/sidebar.handlers.js

@@ -0,0 +1,36 @@
+export const handleHeaderClick = (e, deps) => {
+  const { store, dispatchEvent } = deps;
+
+  let path;
+
+  const header = store.selectHeader();
+
+  if (e.currentTarget.id === 'header-label') {
+    path = header.labelPath;
+  } else if (e.currentTarget.id === 'header-image') {
+    path = header.image.path;
+  } else if (e.currentTarget.id === 'header') {
+    path = header.path;
+  }
+
+  dispatchEvent(new CustomEvent('headerClick', {
+    detail: {
+      path
+    },
+    bubbles: true,
+    composed: true
+  }));
+}
+
+export const handleItemClick = (e, deps) => {
+  const { store, dispatchEvent } = deps;
+  const id = e.currentTarget.id.replace('item-', '');
+  const item = store.selectItem(id);
+  dispatchEvent(new CustomEvent('itemClick', {
+    detail: {
+      item,
+    },
+    bubbles: true,
+    composed: true
+  }));
+}