@granularjs/ui 0.1.0

package/src/components/Select.js

@@ -0,0 +1,71 @@
+import { Div, Span, when, state, after } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
+
+export function Select(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { data: [], size: 'md' });
+  const { data, value, size, leftSection, rightSection, placeholder, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const open = state(false);
+  const currentState = state(resolveValue(value) ?? '');
+
+  after(value).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved === undefined) return;
+    currentState.set(resolved ?? '');
+  });
+
+  const selectValue = (next) => {
+    currentState.set(next);
+    onChange?.(next);
+    open.set(false);
+  };
+
+  const valueClass = after(currentState).compute((current) => {
+    if (!current) return 'g-ui-select-placeholder';
+    return '';
+  });
+  const displayLabel = after(currentState).compute((current) => {
+    const items = resolveValue(data) ?? [];
+    const match = items.find((item) => item.value === current);
+    if (current) return match?.label ?? '';
+    return placeholder ?? '';
+  });
+
+  return Div(
+    { ...rest, className: cx('g-ui-select-root', className) },
+    Div(
+      { className: cx('g-ui-input-wrapper', classVar('g-ui-input-size-', size, 'md')) },
+      when(leftSection, () => Div({ className: 'g-ui-input-section' }, leftSection)),
+      Div(
+        {
+          className: cx('g-ui-select', valueClass),
+          onClick: () => open.set(!open.get()),
+        },
+        Span({ className: 'g-ui-select-value' }, displayLabel)
+      ),
+      when(rightSection, () => Div({ className: 'g-ui-input-section' }, rightSection), () =>
+        Span({ className: 'g-ui-select-caret' }, '▾')
+      )
+    ),
+    when(open, () =>
+      Div(
+        { className: 'g-ui-select-dropdown' },
+        (resolveValue(data) ?? []).map((item) =>
+          Div(
+            {
+              className: cx(
+                'g-ui-select-item',
+                after(currentState).compute((current) => {
+                  if (current === item.value) return 'g-ui-select-item-active';
+                  return '';
+                })
+              ),
+              onClick: () => selectValue(item.value),
+            },
+            item.label
+          )
+        )
+      )
+    )
+  );
+}

package/src/components/SelectSearch.js

@@ -0,0 +1,37 @@
+import { Div, Span } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+import { state } from '@granularjs/core';
+import { TextInput } from './TextInput.js';
+
+export function SelectSearch(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { data: [] });
+  const { data, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const query = state('');
+
+  const items = data.filter((item) =>
+    String(item.label || '').toLowerCase().includes(String(query.get()).toLowerCase())
+  );
+
+  return Div(
+    { ...rest, className: cx('g-ui-select-search', className) },
+    TextInput({
+      inputClassName: 'g-ui-select-search-input',
+      placeholder: 'Search...',
+      value: query,
+      onInput: (ev) => query.set(ev?.target?.value ?? ''),
+    }),
+    Div(
+      { className: 'g-ui-select-search-list' },
+      items.map((item) =>
+        Div(
+          {
+            className: 'g-ui-select-search-item',
+            onClick: () => onChange?.(item.value),
+          },
+          item.label
+        )
+      )
+    )
+  );
+}

package/src/components/Sidebar.js

@@ -0,0 +1,136 @@
+import { Div, portal, after, isSignal, isState, isStatePath, state, when } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveValue, resolveBool } from '../utils.js';
+
+export function Sidebar(...args) {
+  const { props, children } = splitPropsChildren(args, {
+    position: 'left',
+    size: 'md',
+    blur: true,
+    fixed: false,
+    minWidth: 'button',
+  });
+  
+  return when(props.fixed,
+    () => FixedSidebar(props, children), 
+    () => DrawerSidebar(props, children)
+  );
+}
+
+const DrawerSidebar = (props, children)=>{
+  const {
+    open,
+    onClose,
+    position,
+    size,
+    blur,
+    fixed,
+    minWidth,
+    className,
+    ...rest
+  } = props;
+  const mounted = state(false);
+  const openState = state(false);
+  const transitionMs = 220;
+  
+  const applyOpen = (next) => {
+    if (next) {
+      mounted.set(true);
+      if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(() => openState.set(true));
+      } else {
+        setTimeout(() => openState.set(true), 0);
+      }
+      return;
+    }
+    openState.set(false);
+    setTimeout(() => mounted.set(false), transitionMs);
+  };
+
+  applyOpen(!!open.get());
+  after(open).change((next) => applyOpen(!!next));
+
+  const overlayClass = after(openState, blur).compute((values) => {
+    const [open, blur] = values;
+  
+    return cx(
+      'g-ui-sidebar-overlay',
+      open && 'g-ui-sidebar-overlay-open',
+      !blur && 'g-ui-sidebar-overlay-noblur'
+    )
+  });
+
+  const drawerClass = after(
+    size,
+    position,
+    openState,
+    className
+  ).compute((values) => {
+    const [size, position, open, className] = values;
+    const positionClass = position === 'right'
+      ? 'g-ui-sidebar-drawer-right g-ui-sidebar-position-right'
+      : 'g-ui-sidebar-drawer-left';
+    return cx(
+      'g-ui-sidebar',
+      'g-ui-sidebar-drawer',
+      `g-ui-sidebar-size-${size}`,
+      positionClass,
+      open && 'g-ui-sidebar-drawer-open',
+      resolveValue(className)
+    )
+  });
+
+  return when(mounted, () =>
+    portal(
+      Div({ className: overlayClass, onClick: onClose },
+        Div({ className: drawerClass, onClick: (ev) => ev.stopPropagation() },
+          children
+        )
+      )
+    )
+  )
+}
+
+const FixedSidebar = (props, children)=>{
+  const {
+    open,
+    position,
+    size,
+    minWidth,
+    className,
+    ...rest
+  } = props;
+  
+  const classNameComposition = after(
+    size,
+    position,
+    open,
+    minWidth,
+    className,
+  ).compute((values)=>{
+    const [size, position, open, minWidth, className] = values;
+    
+    const minWidthValue = minWidth || 'button';
+    let minWidthClass = null;
+    if (minWidthValue === 'button') minWidthClass = 'g-ui-sidebar-min-button';
+    else if (minWidthValue === 'xs') minWidthClass = 'g-ui-sidebar-min-xs';
+    else if (minWidthValue === 'sm') minWidthClass = 'g-ui-sidebar-min-sm';
+    else if (minWidthValue === 'md') minWidthClass = 'g-ui-sidebar-min-md';
+
+    const classNameString = cx(
+      'g-ui-sidebar g-ui-sidebar-fixed',
+      `g-ui-sidebar-size-${size||'md'}`,
+      minWidthClass,
+      open && 'g-ui-sidebar-fixed-open',
+      className
+    );
+    return classNameString;
+  });
+  
+  return Div(
+    {
+      ...rest,
+      className: classNameComposition,
+    },
+    children
+  );
+}

package/src/components/SimpleGrid.js

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

package/src/components/Skeleton.js

@@ -0,0 +1,24 @@
+import { Div, after } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Skeleton(...args) {
+  const { props } = splitPropsChildren(args, { height: 'md', width: 'full' });
+  const { height, width, className, ...rest } = props;
+  const customStyle = after(height, width).compute(([h, w]) => {
+    const style = {};
+    if (!isNaN(h)) style.height = `${h}px`;
+    if (!isNaN(w)) style.width = `${w}px`;
+    return style;
+  });
+
+  return Div({
+    ...rest,
+    style: { width: customStyle.width, height: customStyle.height, ...(rest.style || {}) },
+    className: cx(
+      'g-ui-skeleton',
+      [height, (value) => `g-ui-skeleton-h-${value}`],
+      [width, (value) => `g-ui-skeleton-w-${value}`],
+      className
+    ),
+  });
+}

package/src/components/Slider.js

@@ -0,0 +1,126 @@
+import { Div, after, state, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classFlag, resolveBool, resolveValue } from '../utils.js';
+
+export function Slider(...args) {
+  const { props, rawProps } = splitPropsChildren(args, {
+    size: 'md',
+    min: 0,
+    max: 100,
+    step: 1,
+  });
+  const { onChange } = rawProps;
+  const {
+    value,
+    marks,
+    size,
+    min,
+    max,
+    step,
+    disabled,
+    className,
+    ...rest
+  } = props;
+  const currentState = state(resolveValue(value ?? min));
+  after(value).change((next) => {
+    if (next == null) return;
+    currentState.set(resolveValue(next));
+  });
+  const getBounds = () => {
+    const minValue = Number(resolveValue(min));
+    const maxValue = Number(resolveValue(max));
+    if (!Number.isFinite(minValue) || !Number.isFinite(maxValue)) {
+      return { minValue: 0, maxValue: 100 };
+    }
+    return { minValue: Math.min(minValue, maxValue), maxValue: Math.max(minValue, maxValue) };
+  };
+  const getStep = () => {
+    const stepValue = Number(resolveValue(step));
+    if (Number.isFinite(stepValue) && stepValue > 0) return stepValue;
+    return 1;
+  };
+  const setValue = (next) => {
+    const { minValue, maxValue } = getBounds();
+    const stepValue = getStep();
+    const clamped = Math.max(minValue, Math.min(maxValue, Number(next)));
+    const stepped = Math.round((clamped - minValue) / stepValue) * stepValue + minValue;
+    if (stepped === currentState.get()) return;
+    currentState.set(stepped);
+    onChange?.(stepped);
+  };
+  const percent = after(currentState).compute((v) => {
+    const { minValue, maxValue } = getBounds();
+    const range = maxValue - minValue;
+    if (range <= 0) return 0;
+    const pct = ((Number(v ?? minValue) - minValue) / range) * 100;
+    return Math.max(0, Math.min(100, pct));
+  });
+  const updateFromEvent = (ev, getRect) => {
+    const rect = getRect?.();
+    if (!rect || rect.width === 0) return;
+    const x = Math.min(Math.max(ev.clientX - rect.left, 0), rect.width);
+    const ratio = x / rect.width;
+    const { minValue, maxValue } = getBounds();
+    setValue(minValue + ratio * (maxValue - minValue));
+  };
+  const startDrag = (ev) => {
+    if (resolveBool(disabled)) return;
+    ev.preventDefault?.();
+    const trackEl = ev.currentTarget;
+    const getRect = () => trackEl.getBoundingClientRect();
+    trackEl.setPointerCapture?.(ev.pointerId);
+    updateFromEvent(ev, getRect);
+    const handleMove = (moveEv) => updateFromEvent(moveEv, getRect);
+    const handleUp = () => {
+      trackEl.releasePointerCapture?.(ev.pointerId);
+      window.removeEventListener('pointermove', handleMove);
+      window.removeEventListener('pointerup', handleUp);
+    };
+    window.addEventListener('pointermove', handleMove);
+    window.addEventListener('pointerup', handleUp);
+  };
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-slider',
+        classVar('g-ui-slider-size-', size, 'md'),
+        classFlag('g-ui-slider-disabled', disabled),
+        className
+      ),
+    },
+    Div(
+      { className: 'g-ui-slider-track', onPointerDown: startDrag },
+      Div({
+        className: 'g-ui-slider-bar',
+        style: after(percent).compute((p) => ({ width: `${p}%` })),
+      }),
+      Div({
+        className: 'g-ui-slider-thumb',
+        style: after(percent).compute((p) => ({ left: `${p}%` })),
+      })
+    ),
+    when(marks, () => Div(
+      { className: 'g-ui-slider-marks' },
+      marks.map((mark) => SliderMark({ mark, getBounds }))
+    ))
+  );
+}
+
+export const SliderMark = ({ mark, getBounds }) => {
+  const { minValue, maxValue } = getBounds();
+  const range = maxValue - minValue;
+
+  const value = mark.value ?? mark;
+  const label = mark.label ?? String(mark.value) ?? value;
+
+  const markValue = Number(value);
+  let pct = 0;
+  if (range > 0) pct = ((markValue - minValue) / range) * 100;
+  return Div(
+    {
+      className: 'g-ui-slider-mark',
+      style: { left: `${Math.max(0, Math.min(100, pct))}%` },
+    },
+    Div({ className: 'g-ui-slider-mark-label' }, label)
+  );
+}

package/src/components/Space.js

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

package/src/components/Stack.js

@@ -0,0 +1,27 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classMap } from '../utils.js';
+
+export function Stack(...args) {
+  const { props, children } = splitPropsChildren(args, { gap: 'md' });
+  const { gap, align, justify, className, style, ...rest } = props;
+  const justifyClass = classMap(justify, {
+    between: 'g-ui-justify-between',
+    center: 'g-ui-justify-center',
+    end: 'g-ui-justify-end',
+    start: 'g-ui-justify-start',
+  });
+  return Div(
+    {
+      ...rest,
+      style,
+      className: cx(
+        'g-ui-stack',
+        classVar('g-ui-gap-', gap, 'md'),
+        classVar('g-ui-align-', align),
+        justifyClass,
+        className
+      ),
+    },
+    children
+  );
+}

package/src/components/Stepper.js

@@ -0,0 +1,20 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Stepper(...args) {
+  const { props } = splitPropsChildren(args, { active: 0, items: [] });
+  const { active, items, className, ...rest } = props;
+  return Div(
+    { ...rest, className: cx('g-ui-stepper', className) },
+    items.map((item, idx) =>
+      Div(
+        { className: cx('g-ui-stepper-item', [active, (value) => {
+          if (idx === value) return 'g-ui-stepper-active';
+          return '';
+        }]) },
+        Div({ className: 'g-ui-stepper-index' }, String(idx + 1)),
+        Div({ className: 'g-ui-stepper-label' }, item.label)
+      )
+    )
+  );
+}

package/src/components/Switch.js

@@ -0,0 +1,16 @@
+import { Input, Label, Span, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+export function Switch(...args) {
+  const { props } = splitPropsChildren(args, { size: 'md' });
+  const { label, size, className, style, inputProps, ...rest } = props;
+  return Label(
+    { className: cx('g-ui-switch', classVar('g-ui-switch-size-', size, 'md'), className) },
+    Input({
+      type: 'checkbox',
+      className: cx('g-ui-switch-input', classVar('g-ui-switch-size-', size, 'md'), inputProps?.className),
+      ...rest,
+    }),
+    when(label, () => Span({ className: 'g-ui-switch-label' }, label))
+  );
+}

package/src/components/SwitchGroup.js

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

package/src/components/Table.js

@@ -0,0 +1,42 @@
+import { Table as HtmlTable, Thead, Tbody, Tr, Th, Td } from '@granularjs/core';
+import { cx, splitPropsChildren, classFlag } from '../utils.js';
+
+export function Table(...args) {
+  const { props } = splitPropsChildren(args, { headers: [], rows: [] });
+  const {
+    headers,
+    rows,
+    striped,
+    highlightOnHover,
+    withBorder,
+    withColumnBorders,
+    className,
+    style,
+    ...rest
+  } = props;
+  return HtmlTable(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-table',
+        classFlag('g-ui-table-striped', striped),
+        classFlag('g-ui-table-hover', highlightOnHover),
+        classFlag('g-ui-table-with-border', withBorder),
+        classFlag('g-ui-table-column-borders', withColumnBorders),
+        className
+      ),
+    },
+    headers.length
+      ? Thead(Tr(headers.map((header) => Th(header))))
+      : null,
+    Tbody(
+      rows.map((row) =>
+        Tr(
+          Array.isArray(row)
+            ? row.map((cell) => Td(cell))
+            : Object.values(row).map((cell) => Td(cell))
+        )
+      )
+    )
+  );
+}