@elvora/react-native 1.0.0-rc.1

package/src/DataGrid.tsx

@@ -0,0 +1,170 @@
+import { useCallback, useMemo, useState, type ReactNode } from 'react';
+import { FlatList, Pressable, ScrollView, Text, View, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export type DataGridSortOrder = 'asc' | 'desc' | null;
+
+export interface DataGridColumn<Row = Record<string, unknown>> {
+  key: string;
+  title: ReactNode;
+  dataIndex?: keyof Row | string;
+  width?: number;
+  render?: (value: unknown, row: Row, index: number) => ReactNode;
+  sortable?: boolean;
+  sorter?: (a: Row, b: Row) => number;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface DataGridProps<Row = Record<string, unknown>> extends Omit<ViewProps, 'children'> {
+  columns: DataGridColumn<Row>[];
+  dataSource: Row[];
+  rowKey?: keyof Row | ((row: Row, index: number) => string | number);
+  rowHeight?: number;
+  height?: number;
+  empty?: ReactNode;
+  onRowPress?: (row: Row, index: number) => void;
+}
+
+function defaultCompare(a: unknown, b: unknown): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  return String(a).localeCompare(String(b));
+}
+
+export function DataGrid<Row extends Record<string, unknown>>(props: DataGridProps<Row>) {
+  const {
+    columns,
+    dataSource,
+    rowKey,
+    rowHeight = 40,
+    height = 400,
+    empty,
+    onRowPress,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortOrder, setSortOrder] = useState<DataGridSortOrder>(null);
+
+  const sorted = useMemo(() => {
+    if (!sortKey || !sortOrder) return dataSource;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col || !col.sortable) return dataSource;
+    const arr = [...dataSource];
+    const compare = col.sorter
+      ? col.sorter
+      : (a: Row, b: Row) => defaultCompare(a[col.dataIndex as keyof Row], b[col.dataIndex as keyof Row]);
+    arr.sort((a, b) => (sortOrder === 'asc' ? compare(a, b) : -compare(a, b)));
+    return arr;
+  }, [columns, dataSource, sortKey, sortOrder]);
+
+  const toggleSort = useCallback(
+    (key: string) => {
+      if (sortKey !== key) {
+        setSortKey(key);
+        setSortOrder('asc');
+        return;
+      }
+      if (sortOrder === 'asc') setSortOrder('desc');
+      else if (sortOrder === 'desc') {
+        setSortKey(null);
+        setSortOrder(null);
+      } else setSortOrder('asc');
+    },
+    [sortKey, sortOrder],
+  );
+
+  const getRowKey = (row: Row, idx: number): string => {
+    if (typeof rowKey === 'function') return String(rowKey(row, idx));
+    if (rowKey) return String((row as Record<string, unknown>)[rowKey as string] ?? idx);
+    return String(idx);
+  };
+
+  if (sorted.length === 0 && empty) {
+    return (
+      <View accessibilityRole="text" style={style}>
+        {typeof empty === 'string' ? <Text>{empty}</Text> : empty}
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={style} {...rest}>
+      <View
+        style={{
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: 8,
+          backgroundColor: theme.colors.surfaceElevated,
+          overflow: 'hidden',
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            backgroundColor: theme.colors.intent.neutral.subtle,
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border,
+          }}
+        >
+          {columns.map((col) => (
+            <Pressable
+              key={col.key}
+              accessibilityRole={col.sortable ? 'button' : undefined}
+              onPress={col.sortable ? () => toggleSort(col.key) : undefined}
+              style={{ width: col.width ?? 120, paddingHorizontal: 12, paddingVertical: 8 }}
+            >
+              <Text style={{ color: theme.colors.fg, fontWeight: '600', fontSize: 14 }}>
+                {typeof col.title === 'string' ? col.title : null}
+                {col.sortable
+                  ? sortKey === col.key
+                    ? sortOrder === 'asc'
+                      ? ' ↑'
+                      : sortOrder === 'desc'
+                        ? ' ↓'
+                        : ''
+                    : ' ⇅'
+                  : ''}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+        <FlatList<Row>
+          data={sorted}
+          keyExtractor={(row, idx) => getRowKey(row, idx)}
+          style={{ height }}
+          getItemLayout={(_data, index) => ({ length: rowHeight, offset: rowHeight * index, index })}
+          renderItem={({ item: row, index: rowIndex }) => (
+            <Pressable
+              onPress={onRowPress ? () => onRowPress(row, rowIndex) : undefined}
+              style={{
+                flexDirection: 'row',
+                height: rowHeight,
+                borderBottomWidth: 1,
+                borderBottomColor: theme.colors.border,
+                alignItems: 'center',
+              }}
+            >
+              {columns.map((col) => {
+                const value = col.dataIndex !== undefined ? (row as Record<string, unknown>)[col.dataIndex as string] : undefined;
+                const content = col.render ? col.render(value, row, rowIndex) : (value as ReactNode);
+                return (
+                  <View key={col.key} style={{ width: col.width ?? 120, paddingHorizontal: 12 }}>
+                    {typeof content === 'string' || typeof content === 'number' ? (
+                      <Text style={{ color: theme.colors.fg, fontSize: 14 }}>{String(content)}</Text>
+                    ) : (
+                      content
+                    )}
+                  </View>
+                );
+              })}
+            </Pressable>
+          )}
+        />
+      </View>
+    </ScrollView>
+  );
+}

package/src/DatePicker.tsx

@@ -0,0 +1,195 @@
+import { useMemo, useState } from 'react';
+import { Modal, Pressable, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export type DateValue = Date | null;
+
+export interface DatePickerProps extends Omit<ViewProps, 'onChange'> {
+  value?: DateValue;
+  defaultValue?: DateValue;
+  onChange?: (value: DateValue) => void;
+  min?: Date;
+  max?: Date;
+  placeholder?: string;
+  isDisabled?: boolean;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  format?: (d: Date) => string;
+}
+
+function pad(n: number) {
+  return String(n).padStart(2, '0');
+}
+
+const defaultFormat = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+
+function isSameDay(a: Date | null, b: Date | null): boolean {
+  if (!a || !b) return false;
+  return a.toDateString() === b.toDateString();
+}
+
+function startOfMonth(d: Date) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+
+function addMonths(d: Date, n: number) {
+  return new Date(d.getFullYear(), d.getMonth() + n, 1);
+}
+
+function buildMatrix(view: Date, weekStartsOn: number): Date[][] {
+  const first = startOfMonth(view);
+  const firstWeekday = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = new Date(first);
+  start.setDate(first.getDate() - firstWeekday);
+  const weeks: Date[][] = [];
+  for (let w = 0; w < 6; w++) {
+    const row: Date[] = [];
+    for (let d = 0; d < 7; d++) {
+      const day = new Date(start);
+      day.setDate(start.getDate() + w * 7 + d);
+      row.push(day);
+    }
+    weeks.push(row);
+  }
+  return weeks;
+}
+
+export function DatePicker(props: DatePickerProps) {
+  const {
+    value: valueProp,
+    defaultValue = null,
+    onChange,
+    min,
+    max,
+    placeholder = 'YYYY-MM-DD',
+    isDisabled,
+    weekStartsOn = 0,
+    format = defaultFormat,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<DateValue>(defaultValue);
+  const value = valueProp !== undefined ? valueProp : internal;
+  const [isOpen, setOpen] = useState(false);
+  const [view, setView] = useState<Date>(value ?? new Date());
+
+  const matrix = useMemo(() => buildMatrix(view, weekStartsOn), [view, weekStartsOn]);
+  const weekdays = useMemo(() => {
+    const arr: string[] = [];
+    const base = new Date(2024, 0, 7);
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(base);
+      d.setDate(base.getDate() + ((i + weekStartsOn) % 7));
+      arr.push(d.toLocaleString(undefined, { weekday: 'short' }));
+    }
+    return arr;
+  }, [weekStartsOn]);
+
+  const pick = (d: Date) => {
+    if (valueProp === undefined) setInternal(d);
+    onChange?.(d);
+    setOpen(false);
+  };
+
+  const display = value ? format(value) : '';
+
+  return (
+    <View style={style} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        disabled={isDisabled}
+        onPress={() => setOpen(true)}
+        style={({ pressed }) => ({
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: Number(theme.radii.md),
+          backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.6 : 1,
+        })}
+      >
+        <Text style={{ color: display ? theme.colors.fg : theme.colors.fgMuted, fontSize: 14 }}>{display || placeholder}</Text>
+      </Pressable>
+      <Modal transparent visible={isOpen} animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.4)' }}
+          onPress={() => setOpen(false)}
+        >
+          <Pressable
+            onPress={() => undefined}
+            style={{
+              padding: 12,
+              backgroundColor: theme.colors.surfaceElevated,
+              borderRadius: Number(theme.radii.md),
+              width: 280,
+            }}
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+              <Pressable onPress={() => setView((v) => addMonths(v, -1))} style={{ padding: 6 }}>
+                <Text style={{ color: theme.colors.fg, fontSize: 18 }}>‹</Text>
+              </Pressable>
+              <Text style={{ fontSize: 14, fontWeight: '500', color: theme.colors.fg }}>
+                {view.toLocaleString(undefined, { month: 'long', year: 'numeric' })}
+              </Text>
+              <Pressable onPress={() => setView((v) => addMonths(v, 1))} style={{ padding: 6 }}>
+                <Text style={{ color: theme.colors.fg, fontSize: 18 }}>›</Text>
+              </Pressable>
+            </View>
+            <View style={{ flexDirection: 'row' }}>
+              {weekdays.map((wd) => (
+                <Text key={wd} style={{ flex: 1, textAlign: 'center', fontSize: 11, color: theme.colors.fgMuted, paddingVertical: 4 }}>
+                  {wd}
+                </Text>
+              ))}
+            </View>
+            {matrix.map((week, wi) => (
+              <View key={wi} style={{ flexDirection: 'row' }}>
+                {week.map((d) => {
+                  const inMonth = d.getMonth() === view.getMonth();
+                  const selected = isSameDay(d, value);
+                  const tooEarly = min && d < new Date(min.getFullYear(), min.getMonth(), min.getDate());
+                  const tooLate = max && d > new Date(max.getFullYear(), max.getMonth(), max.getDate());
+                  const disabled = !!tooEarly || !!tooLate;
+                  return (
+                    <Pressable
+                      key={d.toISOString()}
+                      disabled={disabled}
+                      onPress={() => pick(d)}
+                      style={({ pressed }) => ({
+                        flex: 1,
+                        margin: 1,
+                        paddingVertical: 6,
+                        alignItems: 'center',
+                        borderRadius: Number(theme.radii.sm),
+                        backgroundColor: selected
+                          ? theme.colors.intent.primary.solid
+                          : pressed
+                            ? theme.colors.intent.neutral.subtle
+                            : 'transparent',
+                      })}
+                    >
+                      <Text
+                        style={{
+                          fontSize: 13,
+                          color: selected
+                            ? theme.colors.intent.primary.solidFg
+                            : inMonth
+                              ? theme.colors.fg
+                              : theme.colors.fgSubtle,
+                          opacity: disabled ? 0.4 : 1,
+                        }}
+                      >
+                        {d.getDate()}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+              </View>
+            ))}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}

package/src/DateRangePicker.tsx

@@ -0,0 +1,249 @@
+import { useMemo, useState } from 'react';
+import { Modal, Pressable, ScrollView, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface DateRange {
+  start: Date | null;
+  end: Date | null;
+}
+
+export interface DateRangePickerProps extends Omit<ViewProps, 'onChange'> {
+  value?: DateRange;
+  defaultValue?: DateRange;
+  onChange?: (value: DateRange) => void;
+  min?: Date;
+  max?: Date;
+  isDisabled?: boolean;
+  format?: (d: Date) => string;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  placeholder?: { start?: string; end?: string };
+}
+
+const pad = (n: number) => String(n).padStart(2, '0');
+const defaultFormat = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+
+function startOfMonth(d: Date) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+
+function addMonths(d: Date, n: number) {
+  return new Date(d.getFullYear(), d.getMonth() + n, 1);
+}
+
+function buildMatrix(view: Date, weekStartsOn: number): Date[][] {
+  const first = startOfMonth(view);
+  const firstWeekday = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = new Date(first);
+  start.setDate(first.getDate() - firstWeekday);
+  const weeks: Date[][] = [];
+  for (let w = 0; w < 6; w++) {
+    const row: Date[] = [];
+    for (let d = 0; d < 7; d++) {
+      const day = new Date(start);
+      day.setDate(start.getDate() + w * 7 + d);
+      row.push(day);
+    }
+    weeks.push(row);
+  }
+  return weeks;
+}
+
+function dayKey(d: Date): number {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+
+function isSameDay(a: Date | null, b: Date | null): boolean {
+  if (!a || !b) return false;
+  return a.toDateString() === b.toDateString();
+}
+
+export function DateRangePicker(props: DateRangePickerProps) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onChange,
+    min,
+    max,
+    isDisabled,
+    format = defaultFormat,
+    weekStartsOn = 0,
+    placeholder,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<DateRange>(defaultValue ?? { start: null, end: null });
+  const value = valueProp ?? internal;
+  const [isOpen, setOpen] = useState(false);
+  const [view, setView] = useState<Date>(value.start ?? new Date());
+  const [pendingStart, setPendingStart] = useState<Date | null>(null);
+
+  const setRange = (next: DateRange) => {
+    if (valueProp === undefined) setInternal(next);
+    onChange?.(next);
+  };
+
+  const pickDay = (d: Date) => {
+    if (!pendingStart || (value.start && value.end)) {
+      setPendingStart(d);
+      setRange({ start: d, end: null });
+      return;
+    }
+    const start = pendingStart;
+    const end = d;
+    if (dayKey(end) < dayKey(start)) setRange({ start: end, end: start });
+    else setRange({ start, end });
+    setPendingStart(null);
+    setOpen(false);
+  };
+
+  const weekdays = useMemo(() => {
+    const arr: string[] = [];
+    const base = new Date(2024, 0, 7);
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(base);
+      d.setDate(base.getDate() + ((i + weekStartsOn) % 7));
+      arr.push(d.toLocaleString(undefined, { weekday: 'short' }));
+    }
+    return arr;
+  }, [weekStartsOn]);
+
+  const renderMonth = (offset: number) => {
+    const monthView = addMonths(view, offset);
+    const matrix = buildMatrix(monthView, weekStartsOn);
+    return (
+      <View key={offset} style={{ width: 240 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
+          {offset === 0 ? (
+            <Pressable onPress={() => setView((v) => addMonths(v, -1))} style={{ padding: 4 }}>
+              <Text style={{ fontSize: 18, color: theme.colors.fg }}>‹</Text>
+            </Pressable>
+          ) : (
+            <View style={{ width: 24 }} />
+          )}
+          <Text style={{ fontSize: 14, fontWeight: '500', color: theme.colors.fg }}>
+            {monthView.toLocaleString(undefined, { month: 'long', year: 'numeric' })}
+          </Text>
+          {offset === 1 ? (
+            <Pressable onPress={() => setView((v) => addMonths(v, 1))} style={{ padding: 4 }}>
+              <Text style={{ fontSize: 18, color: theme.colors.fg }}>›</Text>
+            </Pressable>
+          ) : (
+            <View style={{ width: 24 }} />
+          )}
+        </View>
+        <View style={{ flexDirection: 'row' }}>
+          {weekdays.map((wd) => (
+            <Text key={wd} style={{ flex: 1, textAlign: 'center', fontSize: 11, color: theme.colors.fgMuted, paddingVertical: 4 }}>
+              {wd}
+            </Text>
+          ))}
+        </View>
+        {matrix.map((week, wi) => (
+          <View key={wi} style={{ flexDirection: 'row' }}>
+            {week.map((d) => {
+              const inMonth = d.getMonth() === monthView.getMonth();
+              const isStart = isSameDay(d, value.start);
+              const isEnd = isSameDay(d, value.end);
+              const inRange =
+                value.start && value.end && dayKey(d) > dayKey(value.start) && dayKey(d) < dayKey(value.end);
+              const tooEarly = min && d < new Date(min.getFullYear(), min.getMonth(), min.getDate());
+              const tooLate = max && d > new Date(max.getFullYear(), max.getMonth(), max.getDate());
+              const disabled = !!tooEarly || !!tooLate;
+              const isEndpoint = isStart || isEnd;
+              return (
+                <Pressable
+                  key={d.toISOString()}
+                  disabled={disabled}
+                  onPress={() => pickDay(d)}
+                  style={{
+                    flex: 1,
+                    margin: 1,
+                    paddingVertical: 6,
+                    alignItems: 'center',
+                    borderRadius: Number(theme.radii.sm),
+                    backgroundColor: isEndpoint
+                      ? theme.colors.intent.primary.solid
+                      : inRange
+                        ? theme.colors.intent.primary.subtle
+                        : 'transparent',
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 13,
+                      color: isEndpoint
+                        ? theme.colors.intent.primary.solidFg
+                        : inMonth
+                          ? theme.colors.fg
+                          : theme.colors.fgSubtle,
+                      opacity: disabled ? 0.4 : 1,
+                    }}
+                  >
+                    {d.getDate()}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        ))}
+      </View>
+    );
+  };
+
+  const startText = value.start ? format(value.start) : '';
+  const endText = value.end ? format(value.end) : '';
+
+  return (
+    <View style={style} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        disabled={isDisabled}
+        onPress={() => setOpen(true)}
+        style={({ pressed }) => ({
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: Number(theme.radii.md),
+          backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.6 : 1,
+          gap: 8,
+        })}
+      >
+        <Text style={{ color: startText ? theme.colors.fg : theme.colors.fgMuted, fontSize: 14, minWidth: 90 }}>
+          {startText || placeholder?.start || 'Start'}
+        </Text>
+        <Text style={{ color: theme.colors.fgMuted }}>→</Text>
+        <Text style={{ color: endText ? theme.colors.fg : theme.colors.fgMuted, fontSize: 14, minWidth: 90 }}>
+          {endText || placeholder?.end || 'End'}
+        </Text>
+      </Pressable>
+      <Modal transparent visible={isOpen} animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.4)' }}
+          onPress={() => setOpen(false)}
+        >
+          <Pressable
+            onPress={() => undefined}
+            style={{
+              backgroundColor: theme.colors.surfaceElevated,
+              borderRadius: Number(theme.radii.md),
+              padding: 12,
+              maxWidth: '95%',
+            }}
+          >
+            <ScrollView horizontal>
+              <View style={{ flexDirection: 'row', gap: 12 }}>
+                {renderMonth(0)}
+                {renderMonth(1)}
+              </View>
+            </ScrollView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}