@granularjs/ui 0.1.0

package/src/components/CopyButton.js

@@ -0,0 +1,30 @@
+import { Button, after, when } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+import { state } from '@granularjs/core';
+
+export function CopyButton(...args) {
+  const { props, children } = splitPropsChildren(args, { value: '', timeout: 1500 });
+  const { value, timeout, className, ...rest } = props;
+  const copied = state(false);
+  const buttonClass = after(copied).compute((next) =>
+    cx('g-ui-copy-button', next && 'g-ui-copy-button-done', className)
+  );
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(String(value));
+      copied.set(true);
+      setTimeout(() => copied.set(false), timeout);
+    } catch {}
+  };
+
+  return Button(
+    {
+      ...rest,
+      className: buttonClass,
+      onClick: copy,
+      type: 'button',
+    },
+    when(children?.length, () => children, () => when(copied, () => 'Copied', () => 'Copy'))
+  );
+}

package/src/components/DateInput.js

@@ -0,0 +1,123 @@
+import { state, after } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
+import { Calendar } from './Calendar.js';
+import { Popover } from './Popover.js';
+import { TextInput } from './TextInput.js';
+
+export function DateInput(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { size: 'md', format: { pattern: 'dddd-dd-dd' } });
+  const {
+    value,
+    size,
+    calendarSize,
+    leftSection,
+    rightSection,
+    className,
+    format,
+    minDate,
+    maxDate,
+    ...rest
+  } = props;
+  const { onChange } = rawProps;
+
+  const resolveDate = (next) => {
+    const resolved = resolveValue(next);
+    if (resolved instanceof Date) return resolved;
+    if (resolved == null || resolved === '') return null;
+    const parsed = new Date(resolved);
+    if (Number.isNaN(parsed.getTime())) return null;
+    return parsed;
+  };
+  const isSameDay = (left, right) =>
+    left &&
+    right &&
+    left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth() &&
+    left.getDate() === right.getDate();
+
+  const formatDate = (date) => {
+    if (!date) return '';
+    const year = String(date.getFullYear()).padStart(4, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  const parseDate = (text) => {
+    const digits = String(text ?? '').replace(/\D/g, '');
+    if (digits.length < 8) return null;
+    const year = Number(digits.slice(0, 4));
+    const month = Number(digits.slice(4, 6));
+    const day = Number(digits.slice(6, 8));
+    if (!year || !month || !day) return null;
+    const candidate = new Date(year, month - 1, day);
+    if (
+      candidate.getFullYear() !== year ||
+      candidate.getMonth() !== month - 1 ||
+      candidate.getDate() !== day
+    ) {
+      return null;
+    }
+    const min = resolveDate(minDate);
+    if (min && candidate < min) return null;
+    const max = resolveDate(maxDate);
+    if (max && candidate > max) return null;
+    return candidate;
+  };
+
+  const currentDate = state(resolveDate(value));
+  const textValue = state(formatDate(currentDate.get()));
+  const opened = state(false);
+
+  after(value).change((next) => {
+    if (value.get() == next) return;
+    const resolved = resolveDate(next);
+    if (resolved == null) {
+      currentDate.set(null);
+      textValue.set('');
+      return;
+    }
+    currentDate.set(resolved);
+    textValue.set(formatDate(resolved));
+  });
+
+  after(textValue).change((next) => {
+    const parsed = parseDate(next);
+    console.log('parsed', parsed);
+    console.log('currentDate', currentDate.get());
+    if (!parsed) return;
+    if (isSameDay(parsed, currentDate.get())) return;
+    currentDate.set(parsed);
+    onChange?.(parsed);
+  });
+
+  const setDate = (next) => {
+    if (!next) return;
+    if (isSameDay(next, currentDate.get())) return;
+    currentDate.set(next);
+    textValue.set(formatDate(next));
+    onChange?.(next);
+    opened.set(false);
+  };
+
+  return Popover(
+    {
+      opened,
+      onChange: (next) => opened.set(!!next),
+      content: Calendar({ size: classVar('', calendarSize, 'xs'), value: currentDate, onChange: setDate }),
+      className: 'g-ui-date-input-popover',
+    },
+    TextInput({
+      ...rest,
+      size,
+      className: cx('g-ui-dateinput', className),
+      leftSection,
+      rightSection,
+      type: 'text',
+      inputMode: 'numeric',
+      format: format,
+      value: textValue,
+      onChange: (next) => textValue.set(next),
+    })
+  );
+}

package/src/components/DatePicker.js

@@ -0,0 +1,7 @@
+import { Calendar } from './Calendar.js';
+import { splitPropsChildren } from '../utils.js';
+
+export function DatePicker(...args) {
+  const { props } = splitPropsChildren(args);
+  return Calendar(props);
+}

package/src/components/Divider.js

@@ -0,0 +1,22 @@
+import { Div, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classFlag, classVar } from '../utils.js';
+import { Text } from './Text.js';
+
+export function Divider(...args) {
+  const { props } = splitPropsChildren(args, { labelPosition: 'center' });
+  const { label, labelPosition, vertical, className, ...rest } = props;
+
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-divider',
+        classFlag('label', label),
+        classVar('g-ui-divider-label-', labelPosition, 'center'),
+        classFlag('g-ui-divider-vertical', vertical),
+        className
+      ),
+    },
+    when(label, () => Text({ className: 'g-ui-divider-label-text', size: 'sm' }, label))
+  );
+}

package/src/components/Drawer.js

@@ -0,0 +1,32 @@
+import { Div, portal, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classMap } from '../utils.js';
+
+export function Drawer(...args) {
+  const { props, children } = splitPropsChildren(args, {
+    position: 'right',
+    size: 'md',
+    overlay: 'normal',
+    shadowed: true,
+  });
+  const { opened, onClose, position, size, overlay, shadowed, className, style } = props;
+  return when(opened, () =>
+    portal(
+      Div(
+        { className: cx('g-ui-drawer-overlay', classVar('g-ui-drawer-overlay-', overlay, 'normal')), onClick: onClose },
+        Div(
+          {
+            className: cx(
+              'g-ui-drawer',
+              classMap(shadowed, { true: 'g-ui-drawer-shadowed' }, true),
+              classVar('g-ui-drawer-', position, 'right'),
+              classVar('g-ui-drawer-size-', size, 'md'),
+              className
+            ),
+            onClick: (ev) => ev.stopPropagation(),
+          },
+          children
+        )
+      )
+    )
+  );
+}