@granularjs/ui 0.1.0

package/src/components/Tabs.js

@@ -0,0 +1,194 @@
+import { Button, Div, state, after, list, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classMap, classVar, resolveValue, resolveBool } from '../utils.js';
+
+export function Tabs(...args) {
+  const { props, rawProps } = splitPropsChildren(args, {
+    tabs: [],
+    orientation: 'horizontal',
+    variant: 'default',
+    sticky: true,
+  });
+  const { value, tabs, orientation, variant, sticky, className, style } = props;
+  const { onChange } = rawProps;
+
+  const currentState = state(resolveValue(value) ?? resolveValue(tabs)?.[0]?.value ?? '');
+  const sentinelNode = state();
+  const listNode = state();
+  const spacerHeight = state(0);
+  const stickyLeft = state(0);
+  const stickyWidth = state(0);
+  const stickyTop = state(0);
+  const isSticky = state(false);
+  const lastScrollTop = state(0);
+  let listening = false;
+  let rafId = null;
+  let initScheduled = false;
+  const listenerTargets = new Set();
+
+  after(value).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved == null) return;
+    currentState.set(resolved);
+  });
+
+  const setValue = (next) => {
+    currentState.set(next);
+    onChange?.(next);
+  };
+
+  const getScrollParents = (node) => {
+    const parents = [];
+    let current = node?.parentElement;
+    while (current) {
+      const style = getComputedStyle(current);
+      const overflow = `${style.overflow}${style.overflowY}${style.overflowX}`;
+      if (/(auto|scroll)/.test(overflow)) {
+        parents.push(current);
+      }
+      current = current.parentElement;
+    }
+    return parents;
+  };
+
+  const getScrollRoot = (node) => getScrollParents(node)[0] ?? null;
+
+  const getRootTop = (root) => (root ? root.getBoundingClientRect().top : 0);
+
+  const getScrollTop = (root) => (root ? root.scrollTop : (window.scrollY || window.pageYOffset || 0));
+
+  const getScrollDirection = (current, last) => {
+    if (current > last) return 'down';
+    if (current < last) return 'up';
+    return 'none';
+  };
+
+  const getNextSticky = (direction, sentinelTop, rootTop, currentSticky) => {
+    if (direction === 'down' && sentinelTop < rootTop) return true;
+    if (direction === 'up' && sentinelTop >= rootTop) return false;
+    return currentSticky;
+  };
+
+  const updateSticky = () => {
+    const sentinelEl = sentinelNode.get();
+    const listEl = listNode.get();
+    if (!sentinelEl || !listEl) return;
+    if (!resolveBool(sticky)) {
+      isSticky.set(false);
+      spacerHeight.set(0);
+      return;
+    }
+    if (typeof window === 'undefined') return;
+
+    const sentinelRect = sentinelEl.getBoundingClientRect();
+    const listRect = listEl.getBoundingClientRect();
+    const root = getScrollRoot(sentinelEl);
+    const rootTop = getRootTop(root);
+    const currentScrollTop = getScrollTop(root);
+    const direction = getScrollDirection(currentScrollTop, lastScrollTop.get());
+    lastScrollTop.set(currentScrollTop);
+
+    const nextSticky = getNextSticky(direction, sentinelRect.top, rootTop, isSticky.get());
+
+    spacerHeight.set(listRect.height);
+    stickyLeft.set(sentinelRect.left);
+    stickyWidth.set(sentinelRect.width);
+    stickyTop.set(rootTop);
+    if (nextSticky !== isSticky.get()) {
+      isSticky.set(nextSticky);
+    }
+  };
+
+  const scheduleUpdate = () => {
+    if (rafId != null) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      updateSticky();
+    });
+  };
+
+  const addListenerTarget = (target) => {
+    if (!target || listenerTargets.has(target)) return;
+    listenerTargets.add(target);
+    target.addEventListener('scroll', scheduleUpdate, { passive: true });
+  };
+
+  const initListeners = () => {
+    if (listening) return;
+    const sentinelEl = sentinelNode.get();
+    const listEl = listNode.get();
+    if (!sentinelEl || !listEl) return;
+    if (typeof window === 'undefined') return;
+    listening = true;
+    updateSticky();
+    addListenerTarget(window);
+    window.addEventListener('resize', scheduleUpdate);
+    getScrollParents(sentinelEl).forEach(addListenerTarget);
+  };
+
+  after(listNode, sentinelNode, sticky).change(initListeners);
+
+  if (!initScheduled && typeof window !== 'undefined') {
+    initScheduled = true;
+    setTimeout(() => initListeners(), 0);
+  }
+
+  const stickyStyle = after(isSticky, stickyLeft, stickyWidth, stickyTop).compute((values) => {
+    const [active, left, width, top] = values;
+    if (!active) {
+      return {
+        position: 'static',
+        top: 'auto',
+        left: 'auto',
+        width: 'auto',
+        zIndex: 'auto',
+        background: 'transparent',
+      };
+    }
+    return {
+      position: 'fixed',
+      top: `${top}px`,
+      left: `${left}px`,
+      width: `${width}px`,
+      background: 'var(--g-ui-surface)',
+      zIndex: 100,
+    };
+  });
+
+  const spacerStyle = after(isSticky, spacerHeight).compute((values) => {
+    const [active, height] = values;
+    return { height: active ? `${height}px` : '0px' };
+  });
+
+  return Div(
+    Div(
+      {
+        className: cx(
+          'g-ui-tabs',
+          classMap(orientation, { vertical: 'g-ui-tabs-vertical' }),
+          classVar('g-ui-tabs-variant-', variant, 'default'),
+          props.className ?? className
+        ),
+      },
+      Div({ node: sentinelNode }),
+      Div({ style: spacerStyle }),
+      Div(
+        { node: listNode, className: 'g-ui-tabs-list', style: stickyStyle },
+        list(tabs, (tab) =>
+          Button(
+            {
+              className: after(currentState, tab.value).compute(([v, tabVal]) =>
+                cx('g-ui-tabs-tab', tabVal === v && 'g-ui-tabs-tab-active')
+              ),
+              onClick: () => setValue(tab.value.get()),
+            },
+            tab.label
+          )
+        )
+      ),
+      Div(
+        { className: 'g-ui-tabs-panel' },
+        when(currentState, () => tabs.get()?.find((tab) => tab.value === currentState.get())?.content ?? null)
+      )
+    )
+  );
+}

package/src/components/Tag.js

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

package/src/components/Text.js

@@ -0,0 +1,42 @@
+import { Span } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classFlag, classMap } from '../utils.js';
+
+export function Text(...args) {
+  const { props, children } = splitPropsChildren(args, { size: 'md' });
+  const { size, weight, color, dimmed, align, className, style, ...rest } = props;
+  const weightClass = classMap(weight, {
+    bold: 'g-ui-text-weight-700',
+    semibold: 'g-ui-text-weight-600',
+    medium: 'g-ui-text-weight-500',
+    700: 'g-ui-text-weight-700',
+    600: 'g-ui-text-weight-600',
+    500: 'g-ui-text-weight-500',
+    400: 'g-ui-text-weight-400',
+  });
+  const colorClass = classMap(color, {
+    primary: 'g-ui-text-primary',
+    success: 'g-ui-text-success',
+    danger: 'g-ui-text-danger',
+    muted: 'g-ui-text-dimmed',
+  });
+  const alignClass = classMap(align, {
+    center: 'g-ui-text-align-center',
+    right: 'g-ui-text-align-right',
+    left: 'g-ui-text-align-left',
+  });
+  return Span(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-text',
+        classVar('g-ui-text-size-', size, 'md'),
+        classFlag('g-ui-text-dimmed', dimmed),
+        weightClass,
+        colorClass,
+        alignClass,
+        className
+      ),
+    },
+    children
+  );
+}

package/src/components/TextInput.js

@@ -0,0 +1,74 @@
+import { Div, Input, Textarea as HtmlTextarea, Label, Span, when, state, after, isState } from '@granularjs/core';
+import { cx, splitPropsChildren, classFlag, classVar, resolveValue, resolveBool } from '../utils.js';
+
+export function TextInput(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { size: 'md' });
+  const {
+    label,
+    description,
+    error,
+    size,
+    leftSection,
+    rightSection,
+    className,
+    inputClassName,
+    multiline,
+    value: computed_value,
+    ...rest
+  } = props;
+  const { value: raw_value, onChange, onInput, onFocus, onBlur, onKeyDown, onKeyUp, onClick } = rawProps;
+
+  const isValueTwoWay = isState(raw_value) && !onChange && !onInput
+  const currentState = isValueTwoWay ? raw_value : state(resolveValue(computed_value) ?? '');
+
+  after(computed_value).change((next) => {
+    if (isValueTwoWay) return;
+    currentState.set(resolveValue(next) ?? '');
+  });
+
+  const handleInput = (ev) => {
+    const next = ev?.target?.value ?? '';
+    if (next === computed_value.get()) return;
+    currentState.set(next);
+    onChange?.(ev);
+    onInput?.(ev);
+  };
+
+  const isMultiline = resolveBool(multiline);
+  const Control = isMultiline ? HtmlTextarea : Input;
+  const finalInputClassName = cx(inputClassName, isMultiline && 'g-ui-textarea');
+
+  const input = Control({
+    ...rest,
+    value: currentState,
+    onInput: handleInput,
+    onChange: handleInput,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onKeyUp,
+    onClick,
+    className: cx('g-ui-input', finalInputClassName),
+  });
+
+
+  return Div(
+    { className: cx('g-ui-text-input', className) },
+    when(label, () => Label({ className: 'g-ui-text-input-label' }, label)),
+    when(description, () => Span({ className: 'g-ui-text-input-description' }, description)),
+    Div(
+      {
+        className: cx(
+          'g-ui-input-wrapper',
+          classFlag('g-ui-input-multiline', multiline),
+          classVar('g-ui-input-size-', size, 'md'),
+          classFlag('g-ui-input-error', error)
+        ),
+      },
+      when(leftSection, () => Div({ className: 'g-ui-input-section' }, leftSection)),
+      input,
+      when(rightSection, () => Div({ className: 'g-ui-input-section' }, rightSection))
+    ),
+    when(error, () => Div({ className: 'g-ui-text-input-error-text' }, error))
+  );
+}

package/src/components/Textarea.js

@@ -0,0 +1,15 @@
+import { splitPropsChildren } from '../utils.js';
+import { TextInput } from './TextInput.js';
+
+export function Textarea(...args) {
+  const { props } = splitPropsChildren(args, { size: 'md' });
+  const { size, leftSection, rightSection, className, ...rest } = props;
+  return TextInput({
+    ...rest,
+    size,
+    className,
+    leftSection,
+    rightSection,
+    multiline: true,
+  });
+}

package/src/components/Timeline.js

@@ -0,0 +1,22 @@
+import { Div, when } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Timeline(...args) {
+  const { props } = splitPropsChildren(args, { items: [] });
+  const { items, className, ...rest } = props;
+  return Div(
+    { ...rest, className: cx('g-ui-timeline', className) },
+    items.map((item) =>
+      Div(
+        { className: 'g-ui-timeline-item' },
+        Div({ className: 'g-ui-timeline-dot' }),
+        Div(
+          { className: 'g-ui-timeline-content' },
+          when(item.title, () => Div({ className: 'g-ui-timeline-title' }, item.title)),
+          when(item.description, () => Div({ className: 'g-ui-timeline-desc' }, item.description)),
+          item.content
+        )
+      )
+    )
+  );
+}

package/src/components/Title.js

@@ -0,0 +1,18 @@
+import { H1, H2, H3, H4, H5, H6 } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveValue, classVar } from '../utils.js';
+
+const map = { 1: H1, 2: H2, 3: H3, 4: H4, 5: H5, 6: H6 };
+
+export function Title(...args) {
+  const { props, children } = splitPropsChildren(args, { order: 2 });
+  const { order, className, style, ...rest } = props;
+  const orderValue = resolveValue(order) || 2;
+  const Tag = map[orderValue] || H2;
+  return Tag(
+    {
+      ...rest,
+      className: cx('g-ui-title', classVar('g-ui-title-order-', order, 2), className),
+    },
+    children
+  );
+}

package/src/components/Toast.js

@@ -0,0 +1,16 @@
+import { Div, Button, when } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Toast(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { title, onClose, className, ...rest } = props;
+  return Div(
+    { ...rest, className: cx('g-ui-toast', className) },
+    Div(
+      { className: 'g-ui-toast-row' },
+      when(title, () => Div({ className: 'g-ui-toast-title' }, title)),
+      when(onClose, () => Button({ className: 'g-ui-toast-close', onClick: onClose }, '×'))
+    ),
+    children
+  );
+}

package/src/components/ToastStack.js

@@ -0,0 +1,21 @@
+import { Div, when } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function ToastStack(...args) {
+  const { props } = splitPropsChildren(args, { items: [] });
+  const { items, className, onClose, timeout, ...rest } = props;
+  return Div(
+    { ...rest, className: cx('g-ui-toast-stack', className) },
+    items.map((item) =>
+      Div(
+        { className: cx('g-ui-toast', [timeout, 'g-ui-toast-auto']) },
+        Div(
+          { className: 'g-ui-toast-row' },
+          when(item.title, () => Div({ className: 'g-ui-toast-title' }, item.title)),
+          when(onClose, () => Div({ className: 'g-ui-toast-close', onClick: () => onClose(item) }, '×'))
+        ),
+        item.message
+      )
+    )
+  );
+}

package/src/components/Tooltip.js

@@ -0,0 +1,12 @@
+import { Span } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Tooltip(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { label, className, style } = props;
+  return Span(
+    { className: cx('g-ui-tooltip', className) },
+    children,
+    Span({ className: 'g-ui-tooltip-content' }, label)
+  );
+}

package/src/hooks/useDisclosure.js

@@ -0,0 +1,13 @@
+import { state } from '@granularjs/core';
+
+export function useDisclosure(initial = false) {
+  const opened = state(!!initial);
+  return [
+    opened,
+    {
+      open: () => opened.set(true),
+      close: () => opened.set(false),
+      toggle: () => opened.set(!opened.get()),
+    },
+  ];
+}

package/src/index.js

@@ -0,0 +1,98 @@
+import { ensureStyles } from './theme/styles.js';
+
+ensureStyles();
+
+export { setThemeVars, setThemeMode } from './theme/theme.js';
+export { cx } from './utils.js';
+export { Button } from './components/Button.js';
+export { Text } from './components/Text.js';
+export { Title } from './components/Title.js';
+export { Container } from './components/Container.js';
+export { Stack } from './components/Stack.js';
+export { Group } from './components/Group.js';
+export { Card } from './components/Card.js';
+export { Badge } from './components/Badge.js';
+export { TextInput } from './components/TextInput.js';
+export { Textarea } from './components/Textarea.js';
+export { NumberInput } from './components/NumberInput.js';
+export { Modal } from './components/Modal.js';
+export { Loading } from './components/Loading.js';
+export { Checkbox } from './components/Checkbox.js';
+export { Switch } from './components/Switch.js';
+export { Select } from './components/Select.js';
+export { Tabs } from './components/Tabs.js';
+export { Table } from './components/Table.js';
+export { Accordion } from './components/Accordion.js';
+export { Tooltip } from './components/Tooltip.js';
+export { Menu } from './components/Menu.js';
+export { Drawer } from './components/Drawer.js';
+export { Notification } from './components/Notification.js';
+export { Divider } from './components/Divider.js';
+export { Paper } from './components/Paper.js';
+export { Alert } from './components/Alert.js';
+export { Avatar } from './components/Avatar.js';
+export { Kbd } from './components/Kbd.js';
+export { Code } from './components/Code.js';
+export { Blockquote } from './components/Blockquote.js';
+export { SimpleGrid } from './components/SimpleGrid.js';
+export { List } from './components/List.js';
+export { Anchor } from './components/Anchor.js';
+export { Image } from './components/Image.js';
+export { Icon } from './components/Icon.js';
+export { Progress } from './components/Progress.js';
+export { Slider } from './components/Slider.js';
+export { Skeleton } from './components/Skeleton.js';
+export { Chip } from './components/Chip.js';
+export { SegmentedControl } from './components/SegmentedControl.js';
+export { Pagination } from './components/Pagination.js';
+export { Radio } from './components/Radio.js';
+export { RadioGroup } from './components/RadioGroup.js';
+export { Breadcrumbs } from './components/Breadcrumbs.js';
+export { Center } from './components/Center.js';
+export { Space } from './components/Space.js';
+export { Collapse } from './components/Collapse.js';
+export { ActionIcon } from './components/ActionIcon.js';
+export { Popover } from './components/Popover.js';
+export { HoverCard } from './components/HoverCard.js';
+export { Affix } from './components/Affix.js';
+export { Fieldset } from './components/Fieldset.js';
+export { AppBar } from './components/AppBar.js';
+export { Sidebar } from './components/Sidebar.js';
+export { Timeline } from './components/Timeline.js';
+export { Stepper } from './components/Stepper.js';
+export { Rating } from './components/Rating.js';
+export { Tag } from './components/Tag.js';
+export { Calendar } from './components/Calendar.js';
+export { MultiSelect } from './components/MultiSelect.js';
+export { ToastStack } from './components/ToastStack.js';
+export { DatePicker } from './components/DatePicker.js';
+export { Notifications } from './components/Notifications.js';
+export { RangeSlider } from './components/RangeSlider.js';
+export { DateInput } from './components/DateInput.js';
+export { NumberField } from './components/NumberField.js';
+export { Popper } from './components/Popper.js';
+export { PasswordInput } from './components/PasswordInput.js';
+export { SearchInput } from './components/SearchInput.js';
+export { CopyButton } from './components/CopyButton.js';
+export { ProgressRing } from './components/ProgressRing.js';
+export { Toast } from './components/Toast.js';
+export { SelectSearch } from './components/SelectSearch.js';
+export { SwitchGroup } from './components/SwitchGroup.js';
+export { RangePicker } from './components/RangePicker.js';
+export { Flex } from './components/Flex.js';
+export { NavLink } from './components/NavLink.js';
+export { Indicator } from './components/Indicator.js';
+export { Burger } from './components/Burger.js';
+export { LoadingOverlay } from './components/LoadingOverlay.js';
+export { Grid } from './components/Grid.js';
+export { Col } from './components/Col.js';
+export { ScrollArea } from './components/ScrollArea.js';
+export { PinInput } from './components/PinInput.js';
+export { CheckboxGroup } from './components/CheckboxGroup.js';
+export { AvatarGroup } from './components/AvatarGroup.js';
+export { BadgeGroup } from './components/BadgeGroup.js';
+export { GridTable } from './components/GridTable.js';
+export { BottomBar } from './components/BottomBar.js';
+export { EventCalendar } from './components/EventCalendar.js';
+export { useDisclosure } from './hooks/useDisclosure.js';
+