@rettangoli/ui 0.1.0

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 updateSelectOption = (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
+  }));
+}

package/src/components/sidebar/sidebar.store.js

@@ -0,0 +1,142 @@
+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(' ');
+}
+
+function flattenItems(items, selectedItemId = null) {
+  let result = [];
+
+  for (const item of items) {
+    const itemId = item.id || item.href || item.path;
+    const isSelected = selectedItemId === itemId;
+    
+    // Add the parent item if it's not just a group label
+    result.push({
+      id: itemId,
+      title: item.title,
+      href: item.href,
+      type: item.type || 'item',
+      icon: item.icon,
+      hrefAttr: item.href ? `href=${item.href}` : '',
+      isSelected,
+      itemBgc: isSelected ? 'ac' : 'bg',
+      itemHoverBgc: isSelected ? 'ac' : 'mu',
+    });
+
+    // Add child items if they exist
+    if (item.items && Array.isArray(item.items)) {
+      for (const subItem of item.items) {
+        const subItemId = subItem.id || subItem.href || subItem.path;
+        const isSubSelected = selectedItemId === subItemId;
+        
+        result.push({
+          id: subItemId,
+          title: subItem.title,
+          href: subItem.href,
+          type: subItem.type || 'item',
+          icon: subItem.icon,
+          hrefAttr: subItem.href ? `href=${subItem.href}` : '',
+          isSelected: isSubSelected,
+          itemBgc: isSubSelected ? 'ac' : 'bg',
+          itemHoverBgc: isSubSelected ? 'ac' : 'mu',
+        });
+      }
+    }
+  }
+
+  return result;
+}
+
+export const toViewData = ({ state, props, attrs }) => {
+  const attrsHeader = attrs.header ? JSON.parse(decodeURIComponent(attrs.header)) : props.header;
+  const attrsItems = attrs.items ? JSON.parse(decodeURIComponent(attrs.items)) : props.items;
+  const selectedItemId = attrs.selectedItemId || props.selectedItemId;
+
+  const containerAttrString = stringifyAttrs(attrs);
+  const mode = attrs.mode || 'full';
+  const header = attrsHeader || {
+    label: '',
+    path: '',
+    image: {
+      src: '',
+      alt: '',
+      width: 0,
+      height: 0,
+    },
+  };
+
+  const items = attrsItems ? flattenItems(attrsItems, selectedItemId) : [];
+
+  // Computed values based on mode
+  const sidebarWidth = mode === 'full' ? 272 : 64;
+  const headerAlign = mode === 'full' ? 'fs' : 'c';
+  const itemAlign = mode === 'full' ? 'fs' : 'c';
+  const headerPadding = mode === 'full' ? 'lg' : 'sm';
+  const itemPadding = mode === 'full' ? 'md' : 'sm';
+  const itemHeight = mode === 'shrunk-lg' ? 48 : 40;
+  const iconSize = mode === 'shrunk-lg' ? 28 : 20;
+  const firstLetterSize = mode === 'shrunk-lg' ? 'md' : 'sm';
+  const showLabels = mode === 'full';
+  const showGroupLabels = mode === 'full';
+  
+  // For items with icons in full mode, we need left alignment within the container
+  // but the container itself should use flex-start alignment
+  const itemContentAlign = mode === 'full' ? 'fs' : 'c';
+  
+  // Item container alignment - only set for shrunk modes, leave default for full mode
+  const itemAlignAttr = mode === 'full' ? '' : `ah=${itemAlign}`;
+  
+  // Item width - for shrunk modes, make it square to constrain the highlight
+  const itemWidth = mode === 'full' ? 'f' : itemHeight;
+  
+  // Header width - should match item width for alignment
+  const headerWidth = itemWidth;
+
+  const ah = mode === 'shrunk-lg' || mode === 'shrunk-md' ? 'c' : '';
+
+  return {
+    containerAttrString,
+    mode,
+    header,
+    items,
+    sidebarWidth,
+    headerAlign,
+    itemAlign,
+    headerPadding,
+    itemPadding,
+    itemHeight,
+    iconSize,
+    firstLetterSize,
+    showLabels,
+    showGroupLabels,
+    itemContentAlign,
+    itemAlignAttr,
+    itemWidth,
+    headerWidth,
+    selectedItemId,
+    ah,
+  };
+}
+
+export const selectHeader = ({ state, props, attrs }) => {
+  const attrsHeader = attrs.header ? JSON.parse(decodeURIComponent(attrs.header)) : props.header;
+  return attrsHeader;
+}
+
+export const selectActiveItem = ({ state, props }) => {
+  const items = props.items ? flattenItems(props.items) : [];
+  return items.find(item => item.active);
+}
+
+export const selectItem = ({ state, props, attrs }, id) => {
+  const attrsItems = attrs.items ? JSON.parse(decodeURIComponent(attrs.items)) : props.items;
+  const items = attrsItems ? flattenItems(attrsItems) : [];
+  return items.find(item => item.id === id);
+}
+
+export const setState = (state) => {
+  // State management if needed
+}

package/src/components/sidebar/sidebar.view.yaml

@@ -0,0 +1,190 @@
+elementName: rtgl-sidebar
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    mode:
+      type: string
+      enum: ['full', 'shrunk', 'shrunk-lg']
+      default: 'full'
+    sidebarWidth:
+      type: number
+    headerAlign:
+      type: string
+    itemAlign:
+      type: string
+    headerPadding:
+      type: string
+    itemPadding:
+      type: string
+    itemHeight:
+      type: number
+    iconSize:
+      type: number
+    firstLetterSize:
+      type: string
+    showLabels:
+      type: boolean
+    showGroupLabels:
+      type: boolean
+    itemContentAlign:
+      type: string
+    itemAlignAttr:
+      type: string
+    itemWidth:
+      type: string
+    headerWidth:
+      type: string
+    selectedItemId:
+      type: string
+    header:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+            width:
+              type: number
+            height:
+              type: number
+            alt:
+              type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          title:
+            type: string
+          slug:
+            type: string
+          type:
+            type: string
+          active:
+            type: boolean
+          icon:
+            type: string
+
+propsSchema:
+  type: object
+  properties:
+    selectedItemId:
+      type: string
+    header:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+            width:
+              type: number
+            height:
+              type: number
+            alt:
+              type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          title:
+            type: string
+          slug:
+            type: string
+          type:
+            type: string
+          items:
+            type: array
+
+refs:
+  header-image:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+  header-label:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+  header:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+  item-*:
+    eventListeners:
+      click:
+        handler: handleItemClick
+
+events:
+  headerClick:
+    type: object
+    properties:
+      path:
+        type: string
+
+anchors:
+  - &headerContent
+    - $if header.image && header.image.src:
+      - $if header.image.href:
+          - a href=${header.image.href}:
+            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}":
+        $elif header.image.path:
+          - rtgl-view#header-image cur=p:
+            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}":
+        $else:
+          - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}":
+    - $if header.label && showLabels:
+      - $if header.labelHref:
+          - rtgl-text href=${header.labelHref} s=lg: "${header.label}"
+        $elif header.labelPath:
+          - rtgl-view#header-label cur=p:
+            - rtgl-text s=lg: "${header.label}"
+        $else:
+          - rtgl-text s=lg: "${header.label}"
+
+template:
+  - rtgl-view h=f w=${sidebarWidth} bwr=xs ah=${ah} ${containerAttrString}:
+    - rtgl-view ph=${headerPadding} pv=lg:
+      - $if header.href:
+          - rtgl-view href=${header.href} d=h av=c ah=${headerAlign} g=lg w=${headerWidth}:
+            - *headerContent
+        $else:
+            - rtgl-view#header d=h av=c ah=${headerAlign} g=lg w=${headerWidth} cur=p:
+              - *headerContent
+
+    - rtgl-view w=f ph=${headerPadding} pb=lg g=xs ah=${ah}:
+      - $for item, i in items:
+        - $if item.type == "groupLabel":
+            - $if showGroupLabels:
+                - rtgl-view mt=md h=32 av=c ph=md:
+                  - rtgl-text s=xs c=mu-fg: "${item.title}"
+              $else:
+                - rtgl-view mt=md h=1 bgc=mu-bg:
+          $else:
+            - rtgl-view#item-${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=p title="${item.title}":
+              - $if item.icon:
+                  - $if showLabels:
+                      - rtgl-view d=h ah=${itemContentAlign} g=sm:
+                        - rtgl-svg wh=16 svg=${item.icon} c=fg:
+                        - rtgl-text s=sm: "${item.title}"
+                    $else:
+                      - rtgl-svg wh=${iconSize} svg=${item.icon} c=fg:
+                $else:
+                  - $if showLabels:
+                      - rtgl-text s=sm: "${item.title}"
+                    $else:
+                      - rtgl-view wh=${iconSize} br=f bgc=mu av=c ah=c:
+                        - rtgl-text s=${firstLetterSize} c=fg: "${item.title.charAt(0).toUpperCase()}"

package/src/components/table/table.handlers.js

@@ -0,0 +1,55 @@
+export const handleOnMount = (deps) => {
+  // No special initialization needed for basic table
+};
+
+export const handleRowClick = (e, deps) => {
+  const { dispatchEvent, props } = deps;
+  const rowIndex = parseInt(e.currentTarget.id.replace("row-", ""));
+  const rowData = props.data?.rows?.[rowIndex];
+  
+  if (rowData) {
+    dispatchEvent(
+      new CustomEvent("row-click", {
+        detail: {
+          rowIndex,
+          rowData,
+        },
+      }),
+    );
+  }
+};
+
+export const handleHeaderClick = (e, deps) => {
+  const { store, render, dispatchEvent } = deps;
+  const columnKey = e.currentTarget.id.replace("header-", "");
+  const currentSort = store.selectSortInfo();
+  
+  // Determine new sort direction
+  let newDirection = 'asc';
+  if (currentSort.column === columnKey) {
+    if (currentSort.direction === 'asc') {
+      newDirection = 'desc';
+    } else if (currentSort.direction === 'desc') {
+      newDirection = null; // Clear sort
+    }
+  }
+  
+  if (newDirection) {
+    store.setSortColumn({ column: columnKey, direction: newDirection });
+  } else {
+    store.clearSort();
+  }
+  
+  render();
+  
+  // Dispatch custom event for external handling
+  dispatchEvent(
+    new CustomEvent("header-click", {
+      detail: {
+        column: columnKey,
+        direction: newDirection,
+        sortInfo: newDirection ? { column: columnKey, direction: newDirection } : null,
+      },
+    }),
+  );
+};

package/src/components/table/table.store.js

@@ -0,0 +1,72 @@
+export const INITIAL_STATE = Object.freeze({
+  sortColumn: null,
+  sortDirection: null,
+});
+
+const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+
+const stringifyAttrs = (attrs) => {
+  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
+}
+
+const getNestedValue = (obj, path) => {
+  const keys = path.split('.');
+  let result = obj;
+  
+  for (const key of keys) {
+    if (result === null || result === undefined) {
+      return null;
+    }
+    result = result[key];
+  }
+  
+  return result;
+}
+
+export const toViewData = ({ state, props, attrs }) => {
+  const containerAttrString = stringifyAttrs(attrs);
+  const data = props.data || { columns: [], rows: [] };
+  
+  // Transform rows to create cells array for easier template access
+  const transformedRows = data.rows.map((row, rowIndex) => {
+    const cells = data.columns.map(column => {
+      const value = getNestedValue(row, column.key);
+      return {
+        key: column.key,
+        value: value !== null && value !== undefined ? String(value) : ''
+      };
+    });
+    
+    return {
+      index: rowIndex,
+      cells: cells
+    };
+  });
+
+  return {
+    containerAttrString,
+    columns: data.columns || [],
+    rows: transformedRows || [],
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const selectSortInfo = ({ state }) => {
+  return {
+    column: state.sortColumn,
+    direction: state.sortDirection
+  };
+}
+
+export const setSortColumn = (state, { column, direction }) => {
+  state.sortColumn = column;
+  state.sortDirection = direction;
+}
+
+export const clearSort = (state) => {
+  state.sortColumn = null;
+  state.sortDirection = null;
+}

package/src/components/table/table.view.yaml

@@ -0,0 +1,103 @@
+elementName: rtgl-table
+
+viewDataSchema:
+  type: object
+  properties:
+    columns:
+      type: array
+    rows:
+      type: array
+    containerAttrString:
+      type: string
+
+propsSchema:
+  type: object
+  properties:
+    data:
+      type: object
+      properties:
+        columns:
+          type: array
+          items:
+            type: object
+            properties:
+              key:
+                type: string
+              label:
+                type: string
+        rows:
+          type: array
+          items:
+            type: object
+    responsive:
+      type: boolean
+      default: true
+
+refs:
+  row-*:
+    eventListeners:
+      click:
+        handler: handleRowClick
+  header-*:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+
+events: {}
+
+styles:
+  table:
+    width: 100%
+    border-collapse: collapse
+    border-spacing: 0
+  
+  thead:
+    border-bottom: 2px solid var(--border)
+  
+  th:
+    padding: 12px
+    text-align: left
+    font-weight: 500
+    color: var(--foreground)
+    background-color: var(--muted)
+    cursor: pointer
+    position: sticky
+    top: 0
+    z-index: 1
+  
+  tbody tr:
+    border-bottom: 1px solid var(--border)
+  
+  tbody tr:last-child:
+    border-bottom: none
+  
+  td:
+    padding: 12px
+    color: var(--foreground)
+  
+  .table-container:
+    width: 100%
+    height: 100%
+    overflow: auto
+  
+  .empty-state:
+    text-align: center
+    padding: 24px
+    color: var(--muted-foreground)
+
+template:
+  - rtgl-view.table-container ${containerAttrString}:
+    - $if rows.length > 0:
+      - table:
+        - thead:
+          - tr:
+            - $for column, i in columns:
+              - th#header-${column.key}: ${column.label}
+        - tbody:
+          - $for row, rowIndex in rows:
+            - tr#row-${row.index}:
+              - $for cell, cellIndex in row.cells:
+                - td: ${cell.value}
+      $else:
+        - rtgl-view.empty-state w=f p=xl:
+          - rtgl-text c=mu-fg: No data available