@granularjs/ui 0.1.0

package/src/components/Fieldset.js

@@ -0,0 +1,12 @@
+import { Fieldset as HtmlFieldset, Legend, when } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Fieldset(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { legend, className, ...rest } = props;
+  return HtmlFieldset(
+    { ...rest, className: cx('g-ui-fieldset', className) },
+    when(legend, () => Legend({ className: 'g-ui-legend' }, legend)),
+    children
+  );
+}

package/src/components/Flex.js

@@ -0,0 +1,25 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Flex(...args) {
+  const { props, children } = splitPropsChildren(args, { align: 'center', direction: 'row' });
+  const { direction, wrap, align, justify, gap, className, ...rest } = props;
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-flex',
+        [direction, (value) => {
+          if (value === 'column') return 'g-ui-flex-column';
+          return 'g-ui-flex-row';
+        }],
+        [wrap, 'g-ui-flex-wrap'],
+        [align, (value) => value && `g-ui-align-${value}`],
+        [justify, (value) => value && `g-ui-justify-${value}`],
+        [gap, (value) => value && `g-ui-gap-${value}`],
+        className
+      ),
+    },
+    children
+  );
+}

package/src/components/Grid.js

@@ -0,0 +1,8 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Grid(...args) {
+  const { props, children } = splitPropsChildren(args, { gap: 'md' });
+  const { className, gap, ...rest } = props;
+  return Div({ ...rest, className: cx('g-ui-grid-system', [gap, (value) => `g-ui-gap-${value}`], className) }, children);
+}

package/src/components/GridTable.js

@@ -0,0 +1,99 @@
+import { Div, Span, after, context } from '@granularjs/core';
+import { splitPropsChildren, cx, classFlag } from '../utils.js';
+
+const sizeContext = context([]);
+const tableContext = context({ sort: null, onSort: null });
+
+export function GridTable(...args) {
+    const { props, rawProps, children } = splitPropsChildren(args, { sizes: [], sort: null, stickyHeader: false });
+    const { className, sizes: sizesProp, sort: sortProp, stickyHeader: stickyProp, ...rest } = props;
+    const { onSort } = rawProps;
+
+    const sizes = sizeContext.scope(sizesProp.get());
+    after(sizesProp).change(v => sizes.set(v));
+
+    const table = tableContext.scope({ sort: sortProp.get(), onSort: onSort || null });
+    after(sortProp).change(v => table.set().sort = v);
+
+    return sizes.serve(table.serve(Div({
+        className: cx(
+            'g-ui-grid-table',
+            classFlag('g-ui-grid-table-sticky', stickyProp),
+            className
+        ),
+        style: {
+            gridTemplateColumns: after(sizes).compute(s =>
+                Array.isArray(s) ? s.join(' ') : ''
+            ),
+        },
+        ...rest,
+    }, children)));
+}
+
+GridTable.GridRow = (...args) => {
+    const { props, children } = splitPropsChildren(args, {});
+    const { className, header, ...rest } = props;
+
+    return Div(
+        {
+            className: cx(
+                'g-ui-grid-table-row',
+                classFlag('g-ui-grid-table-row-header', header),
+                className
+            ),
+            ...rest,
+        },
+        ...children
+    );
+};
+
+GridTable.GridCell = function (...args) {
+    const { props, rawProps, children } = splitPropsChildren(args, {});
+    const { className, sort: _sort, ...rest } = props;
+    const sortKey = rawProps.sort;
+
+    if (sortKey) {
+        const table = tableContext.state();
+
+        const direction = after(table.sort).compute(s =>
+            s?.key === sortKey ? s.direction : null
+        );
+
+        const handleSort = () => {
+            const current = table.get().sort;
+            let next;
+            if (current?.key === sortKey) {
+                next = current.direction === 'asc'
+                    ? { key: sortKey, direction: 'desc' }
+                    : null;
+            } else {
+                next = { key: sortKey, direction: 'asc' };
+            }
+            table.set().sort = next;
+            const { onSort } = table.get();
+            if (onSort) onSort(next);
+        };
+
+        return Div(
+            {
+                className: cx('g-ui-grid-table-cell', 'g-ui-grid-table-cell-sortable', className),
+                onClick: handleSort,
+                ...rest,
+            },
+            children,
+            Span({ className: 'g-ui-grid-table-sort-icon' },
+                after(direction).compute(d =>
+                    d === 'asc' ? ' ↑' : d === 'desc' ? ' ↓' : ''
+                )
+            )
+        );
+    }
+
+    return Div(
+        {
+            className: cx('g-ui-grid-table-cell', className),
+            ...rest,
+        },
+        children
+    );
+};

package/src/components/Group.js

@@ -0,0 +1,29 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classMap, classFlag } from '../utils.js';
+
+export function Group(...args) {
+  const { props, children } = splitPropsChildren(args, { gap: 'md', align: 'center' });
+  const { gap, align, justify, position, noWrap, className, style, ...rest } = props;
+  const positionClass = classMap(position, {
+    apart: 'g-ui-justify-between',
+    center: 'g-ui-justify-center',
+    right: 'g-ui-justify-end',
+    left: 'g-ui-justify-start',
+  });
+  return Div(
+    {
+      ...rest,
+      style,
+      className: cx(
+        'g-ui-group',
+        classVar('g-ui-gap-', gap, 'md'),
+        classVar('g-ui-align-', align, 'center'),
+        classVar('g-ui-justify-', justify, 'none'),
+        positionClass,
+        classFlag('g-ui-no-wrap', noWrap),
+        className
+      ),
+    },
+    children
+  );
+}

package/src/components/HoverCard.js

@@ -0,0 +1,24 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function HoverCard(...args) {
+  const { props, children } = splitPropsChildren(args, { position: 'left' });
+  const { position, content, className, ...rest } = props;
+  return Div(
+    { ...rest, className: cx('g-ui-hover-card', className) },
+    children,
+    Div({
+      className: cx(
+        'g-ui-hover-card-dropdown',
+        [position, (value) => {
+          if (value === 'right') return 'g-ui-hover-card-right';
+          return '';
+        }],
+        [position, (value) => {
+          if (value === 'center') return 'g-ui-hover-card-center';
+          return '';
+        }]
+      ),
+    }, content)
+  );
+}

package/src/components/Icon.js

@@ -0,0 +1,19 @@
+import { Span } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+export function Icon(...args) {
+  const { props, children } = splitPropsChildren(args, { size: 'md' });
+  
+  return Span(
+    {
+      ...props,
+      className: cx(
+        'g-ui-icon',
+        classVar('g-ui-icon-size-', props.size, 'md'),
+        classVar('g-ui-icon-color-', props.color),
+        props.className
+      ),
+    },
+    ...children
+  );
+}

package/src/components/Image.js

@@ -0,0 +1,8 @@
+import { Img } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Image(...args) {
+  const { props } = splitPropsChildren(args);
+  const { className, ...rest } = props;
+  return Img({ ...rest, className: cx('g-ui-image', className) });
+}

package/src/components/Indicator.js

@@ -0,0 +1,21 @@
+import { Div, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+export function Indicator(...args) {
+  const { props, children } = splitPropsChildren(args, { show: true, position: 'top-right', color: 'danger', size: 'md' });
+  const { show, position, color, size, className, ...rest } = props;
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-indicator',
+        classVar('g-ui-indicator-position-', position, 'top-right'),
+        classVar('g-ui-indicator-color-', color, 'danger'),
+        classVar('g-ui-indicator-size-', size, 'md'),
+        className
+      ),
+    },
+    children,
+    when(show, () => Div({ className: 'g-ui-indicator-badge' }))
+  );
+}

package/src/components/Kbd.js

@@ -0,0 +1,8 @@
+import { Span } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Kbd(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { className, ...rest } = props;
+  return Span({ ...rest, className: cx('g-ui-kbd', className) }, children);
+}

package/src/components/List.js

@@ -0,0 +1,77 @@
+import { Ul, Ol, Li, Div, Span, after, when, isSignal, isState, isStatePath, isComputed } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classFlag, classMap } from '../utils.js';
+
+export function List(...args) {
+  const { props, children } = splitPropsChildren(args, { type: 'none', size: 'md' });
+  const { type, size, withPadding, className, ...rest } = props;
+  const typeClass = classMap(type, {
+    ordered: 'g-ui-list-ordered',
+    unordered: 'g-ui-list-unordered',
+    none: 'g-ui-list-none',
+  });
+  const isOrdered = after(type).compute((next) => next === 'ordered');
+  const isListNode = (value) =>
+    value && typeof value === 'object' && typeof value.tagName === 'string' &&
+    (value.tagName.toLowerCase() === 'ul' || value.tagName.toLowerCase() === 'ol');
+  const isListItemNode = (value) =>
+    value && typeof value === 'object' && typeof value.tagName === 'string' &&
+    value.tagName.toLowerCase() === 'li';
+  const wrapChild = (child) => {
+    const wrapValue = (value) => {
+      if (value == null || value === false) return null;
+      if (Array.isArray(value)) return value.map((item) => wrapValue(item));
+      if (isListItemNode(value)) return value;
+      if (isListNode(value)) return Li({ className: 'g-ui-list-nested-item' }, value);
+      return Li(Span({ className: 'g-ui-list-item-shell' }, value));
+    };
+    if (isSignal(child) || isState(child) || isStatePath(child) || isComputed(child)) {
+      return after(child).compute((next) => wrapValue(next));
+    }
+    return wrapValue(child);
+  };
+  const listChildren = children.map((child) => wrapChild(child));
+  const listProps = {
+    ...rest,
+    className: cx(
+      'g-ui-list',
+      classVar('g-ui-list-size-', size, 'md'),
+      classFlag('g-ui-list-with-padding', withPadding),
+      typeClass,
+      className
+    ),
+  };
+  return when(
+    isOrdered,
+    () => Ol(listProps, listChildren),
+    () => Ul(listProps, listChildren)
+  );
+}
+
+export function ListItem(...args) {
+  const { props, children } = splitPropsChildren(args, { withBorder: false });
+  const { leftSection, rightSection, title, body, withBorder, className, ...rest } = props;
+  const hasStructured = after(title, body).compute(([nextTitle, nextBody]) => !!nextTitle || !!nextBody);
+  return Li(
+    {
+      ...rest,
+      className: cx('g-ui-list-item', classFlag('g-ui-list-item-border', withBorder), className),
+    },
+    Div(
+      { className: 'g-ui-list-item-shell' },
+      when(leftSection, () => Span({ className: 'g-ui-list-item-section g-ui-list-item-section-left' }, leftSection)),
+      when(
+        hasStructured,
+        () =>
+          Div(
+            { className: 'g-ui-list-item-content' },
+            when(title, () => Div({ className: 'g-ui-list-item-title' }, title)),
+            when(body, () => Div({ className: 'g-ui-list-item-body' }, body))
+          ),
+        () => children
+      ),
+      when(rightSection, () => Span({ className: 'g-ui-list-item-section g-ui-list-item-section-right' }, rightSection))
+    )
+  );
+}
+
+List.Item = ListItem;

package/src/components/Loading.js

@@ -0,0 +1,29 @@
+import { Div, Span, after, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+export function Loading(...args) {
+  const { props } = splitPropsChildren(args, { variant: 'spinner', size: 'md' });
+  const { variant, size, className } = props;
+  const isDots = after(variant).compute((next) => next === 'dots');
+  const isBars = after(variant).compute((next) => next === 'bars');
+  return when(isDots,
+    () => Div({
+      className: cx('g-ui-loading g-ui-dots', classVar('g-ui-loading-size-', size, 'md'), className),
+    }),
+    () => when(
+      isBars,
+      () => Div(
+        { className: cx('g-ui-loading g-ui-bars', classVar('g-ui-loading-size-', size, 'md'), className) },
+        Span(''),
+        Span(''),
+        Span('')
+      ),
+      () => Div(
+        {
+          className: cx('g-ui-loading', classVar('g-ui-loading-size-', size, 'md'), className),
+        },
+        Div({ className: 'g-ui-spinner' })
+      )
+    )
+  );
+}

package/src/components/LoadingOverlay.js

@@ -0,0 +1,9 @@
+import { Div, when } from '@granularjs/core';
+import { splitPropsChildren } from '../utils.js';
+import { Loading } from './Loading.js';
+
+export function LoadingOverlay(...args) {
+  const { props } = splitPropsChildren(args);
+  const { visible, ...rest } = props;
+  return when(visible, () => Div({ ...rest, className: 'g-ui-loading-overlay' }, Loading({})));
+}

package/src/components/Menu.js

@@ -0,0 +1,129 @@
+import { Div, when, after, state, portal } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveValue } from '../utils.js';
+
+export const menuControlStore = state({ currentOpenState: null })
+
+export function Menu(...args) {
+  const mainNode = state();
+  const dropdownNode = state();
+  const dropdownStyle = state({});
+  const { props, rawProps, children } = splitPropsChildren(args, { position: 'right' });
+  const { opened, content, position, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(resolveValue(opened) ?? false);
+  after(opened).change((value) => {
+    const resolved = resolveValue(value);
+    if (resolved == null) return;
+    currentState.set(!!resolved);
+    if (!!resolved) {
+      closeOldSetCurrent()
+    }
+  });
+
+  const closeOldSetCurrent = () => {
+    if (menuControlStore.get().currentOpenState === currentState) return;
+    menuControlStore.get().currentOpenState?.set(false)
+    menuControlStore.set().currentOpenState = currentState;
+  }
+
+  if (opened.get()) {
+    closeOldSetCurrent()
+  }
+
+  const parsePosition = (value) => {
+    const raw = String(value ?? 'right').toLowerCase();
+    const parts = raw.split('-').filter(Boolean);
+    if (parts.length === 1) {
+      const single = parts[0];
+      if (single === 'top' || single === 'bottom') return { placement: single, align: 'center' };
+      if (single === 'left' || single === 'right') return { placement: 'bottom', align: single };
+      if (single === 'center') return { placement: 'bottom', align: 'center' };
+      return { placement: 'bottom', align: 'right' };
+    }
+    const [first, second] = parts;
+    if (first === 'top' || first === 'bottom') {
+      return { placement: first, align: second || 'center' };
+    }
+    if (first === 'left' || first === 'right') {
+      return { placement: first, align: second || 'center' };
+    }
+    return { placement: 'bottom', align: 'right' };
+  };
+
+  const updatePosition = () => {
+    const trigger = mainNode.get();
+    const dropdown = dropdownNode.get();
+    if (!trigger || !dropdown) return;
+    if (typeof window === 'undefined') return;
+    const rect = trigger.getBoundingClientRect();
+    const dropdownRect = dropdown.getBoundingClientRect();
+    const positionValue = resolveValue(position) ?? 'right';
+    const spaceVar = getComputedStyle(document.documentElement).getPropertyValue('--g-ui-space-20');
+    const margin = Number.parseFloat(spaceVar) || 20;
+    const viewportWidth = window.innerWidth || 0;
+    const viewportHeight = window.innerHeight || 0;
+    const maxLeft = Math.max(margin, viewportWidth - dropdownRect.width - margin);
+    const maxTop = Math.max(margin, viewportHeight - dropdownRect.height - margin);
+    const { placement, align } = parsePosition(positionValue);
+    const gap = 8;
+    let top = rect.bottom + gap;
+    let left = rect.left;
+    if (placement === 'top' || placement === 'bottom') {
+      top = placement === 'top' ? rect.top - dropdownRect.height - gap : rect.bottom + gap;
+      if (align === 'center') {
+        left = rect.left + rect.width / 2 - dropdownRect.width / 2;
+      } else if (align === 'right') {
+        left = rect.right - dropdownRect.width;
+      } else {
+        left = rect.left;
+      }
+    } else if (placement === 'left' || placement === 'right') {
+      left = placement === 'left' ? rect.left - dropdownRect.width - gap : rect.right + gap;
+      if (align === 'center') {
+        top = rect.top + rect.height / 2 - dropdownRect.height / 2;
+      } else if (align === 'bottom') {
+        top = rect.bottom - dropdownRect.height;
+      } else {
+        top = rect.top;
+      }
+    }
+    left = Math.max(margin, Math.min(left, maxLeft));
+    top = Math.max(margin, Math.min(top, maxTop));
+    dropdownStyle.set({
+      top: `${top}px`,
+      left: `${left}px`,
+    });
+  };
+
+  const setOpen = (next) => {
+    currentState.set(next);
+    onChange?.(next);
+
+    if (next) {
+      closeOldSetCurrent()
+      if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(() => updatePosition());
+      } else {
+        setTimeout(() => updatePosition(), 0);
+      }
+    }
+  };
+  const toggle = () => setOpen(!currentState.get())
+  const close = () => setOpen(false)
+
+  return Div(
+    { ...rest, node: mainNode, className: cx('g-ui-menu', className) },
+    Div({ onClick: toggle }, children),
+    when(currentState, () =>
+      portal(
+        Div(
+          Div({ className: 'g-ui-menu-overlay', onClick: close }),
+          Div(
+            { className: 'g-ui-menu-dropdown', node: dropdownNode, style: dropdownStyle },
+            content
+          )
+        )
+      )
+    )
+  );
+}

package/src/components/Modal.js

@@ -0,0 +1,61 @@
+import { Div, Button as HtmlButton, portal, when, after } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+import { closeSvg } from '../theme/icons.js';
+
+
+
+export function Modal(...args) {
+  const { props, rawProps, children } = splitPropsChildren(args, { size: 'md', centered: true, overlay: 'normal' });
+  const {
+    opened,
+    title,
+    size,
+    centered,
+    overlay,
+    position,
+    className,
+    style,
+  } = props;
+  const { onClose } = rawProps;
+  const positionClass = after(position, centered).compute(([pos, isCentered]) => {
+    const value = pos ?? (isCentered === false ? 'top-center' : 'center');
+    return `g-ui-modal-position-${value}`;
+  });
+
+  return when(opened, () =>
+    portal(
+      Div(
+        {
+          className: cx(
+            'g-ui-modal-overlay',
+            classVar('g-ui-modal-overlay-', overlay, 'normal'),
+            positionClass
+          ),
+          onClick: (ev) => {
+            if (ev.target === ev.currentTarget) onClose?.();
+          },
+        },
+        Div(
+          {
+            className: cx('g-ui-modal', classVar('g-ui-modal-size-', size, 'md'), className),
+          },
+          Div(
+            { className: 'g-ui-modal-header' },
+            when(title, () => Div({ className: 'g-ui-modal-title' }, title)),
+            when(onClose, () =>
+              HtmlButton(
+                {
+                  type: 'button',
+                  className: 'g-ui-button g-ui-button-variant-subtle g-ui-button-size-xs g-ui-modal-close',
+                  onClick: onClose,
+                  innerHTML: closeSvg,
+                }
+              )
+            )
+          ),
+          children
+        )
+      )
+    )
+  );
+}