@everystack/admin 0.1.0

package/src/components/AvatarFieldInput.tsx

@@ -0,0 +1,100 @@
+/**
+ * AvatarFieldInput
+ *
+ * Edit/create form field renderer for `type: 'image', renderer: 'avatar'`.
+ * Composes AvatarUpload with the web file picker and presigned upload utility.
+ * Degrades to TextInput when storage is not configured.
+ */
+
+import React, { useState, useCallback, useRef } from 'react';
+import { FormField, AvatarUpload, TextInput } from '@everystack/ui';
+import { useStorageConfig } from '../hooks/useStorageConfig';
+import { pickImageWeb } from '../utils/pick-image-web';
+import { uploadFile } from '../utils/upload-file';
+import { resolveImageUrl } from '../utils/resolve-image-url';
+import type { FieldDefinition } from '../types';
+
+interface AvatarFieldInputProps {
+  field: FieldDefinition;
+  value: unknown;
+  error?: string;
+  onChange: (value: unknown) => void;
+}
+
+export function AvatarFieldInput({ field, value, error, onChange }: AvatarFieldInputProps): React.ReactElement {
+  const storage = useStorageConfig();
+  const label = field.label ?? field.name;
+  const required = field.validation?.required;
+
+  const [previewUri, setPreviewUri] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  // No storage config — fall back to plain URL text input
+  if (!storage) {
+    return (
+      <FormField label={label} error={error} required={required}>
+        <TextInput
+          value={String(value ?? '')}
+          onChangeText={onChange}
+          keyboardType="url"
+          placeholder="Enter avatar URL"
+        />
+      </FormField>
+    );
+  }
+
+  const currentUri = value
+    ? resolveImageUrl(String(value), {
+        cdnUrl: storage.cdnUrl,
+        endpoint: storage.endpoint,
+        transform: { width: 128, height: 128, fit: 'cover' },
+      })
+    : undefined;
+
+  const handlePick = useCallback(async () => {
+    setUploadError(null);
+    const result = await pickImageWeb();
+    if (!result) return;
+
+    setPreviewUri(result.preview.uri);
+
+    setUploading(true);
+    setUploadProgress(0);
+    abortRef.current = new AbortController();
+
+    try {
+      const { key } = await uploadFile({
+        endpoint: storage.endpoint,
+        file: result.file,
+        getToken: storage.getToken,
+        onProgress: setUploadProgress,
+        signal: abortRef.current.signal,
+      });
+      onChange(key);
+    } catch (err) {
+      if ((err as Error).message !== 'Upload cancelled') {
+        setUploadError((err as Error).message);
+        setPreviewUri(null);
+      }
+    } finally {
+      setUploading(false);
+      abortRef.current = null;
+    }
+  }, [storage, onChange]);
+
+  return (
+    <FormField label={label} error={error || uploadError || undefined} required={required}>
+      <AvatarUpload
+        uri={currentUri}
+        previewUri={previewUri ?? undefined}
+        uploading={uploading}
+        uploadProgress={uploadProgress}
+        onPick={handlePick}
+        size="lg"
+      />
+    </FormField>
+  );
+}

package/src/components/ImageDisplay.tsx

@@ -0,0 +1,57 @@
+/**
+ * ImageDisplay
+ *
+ * Read-only image display for ResourceShow and table cells.
+ * Resolves storage keys to CDN or endpoint URLs. Falls back to
+ * raw URL display for legacy data.
+ */
+
+import React from 'react';
+import { View, Text, Image } from 'react-native';
+import { Avatar } from '@everystack/ui';
+import { useStorageConfig } from '../hooks/useStorageConfig';
+import { resolveImageUrl } from '../utils/resolve-image-url';
+import type { FieldDefinition } from '../types';
+
+interface ImageDisplayProps {
+  field: FieldDefinition;
+  value: unknown;
+}
+
+export function ImageDisplay({ field, value }: ImageDisplayProps): React.ReactElement {
+  const storage = useStorageConfig();
+
+  if (value == null) {
+    return <Text className="text-sm text-gray-400">{'\u2014'}</Text>;
+  }
+
+  const stringValue = String(value);
+  const uri = resolveImageUrl(stringValue, {
+    cdnUrl: storage?.cdnUrl,
+    endpoint: storage?.endpoint,
+    transform: field.renderer === 'avatar'
+      ? { width: 128, height: 128, fit: 'cover' }
+      : { width: 400, height: 300, fit: 'cover' },
+  });
+
+  if (field.renderer === 'avatar') {
+    return (
+      <View className="flex-row items-center gap-2">
+        <Avatar uri={uri} size="lg" />
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      <Image
+        source={{ uri }}
+        className="w-48 h-36 rounded-lg"
+        style={{ resizeMode: 'cover' }}
+      />
+      <Text className="text-xs text-gray-500 mt-1" numberOfLines={1}>
+        {stringValue}
+      </Text>
+    </View>
+  );
+}

package/src/components/ImageFieldInput.tsx

@@ -0,0 +1,140 @@
+/**
+ * ImageFieldInput
+ *
+ * Edit/create form field renderer for `type: 'image'` (default renderer).
+ * Composes ImageInput + UploadProgress with the web file picker and
+ * presigned upload utility. Degrades to TextInput when storage is not configured.
+ */
+
+import React, { useState, useCallback, useRef } from 'react';
+import { View, Image } from 'react-native';
+import { FormField, ImageInput, UploadProgress, TextInput, type PickResult } from '@everystack/ui';
+import { useStorageConfig } from '../hooks/useStorageConfig';
+import { pickImageWeb } from '../utils/pick-image-web';
+import { uploadFile } from '../utils/upload-file';
+import { resolveImageUrl } from '../utils/resolve-image-url';
+import type { FieldDefinition } from '../types';
+
+interface ImageFieldInputProps {
+  field: FieldDefinition;
+  value: unknown;
+  error?: string;
+  onChange: (value: unknown) => void;
+}
+
+export function ImageFieldInput({ field, value, error, onChange }: ImageFieldInputProps): React.ReactElement {
+  const storage = useStorageConfig();
+  const label = field.label ?? field.name;
+  const required = field.validation?.required;
+
+  const [preview, setPreview] = useState<PickResult | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  // No storage config — fall back to plain URL text input + static preview
+  if (!storage) {
+    return (
+      <FormField label={label} error={error} required={required}>
+        <TextInput
+          value={String(value ?? '')}
+          onChangeText={onChange}
+          keyboardType="url"
+          placeholder="Enter image URL"
+        />
+        {value ? (
+          <Image
+            source={{ uri: String(value) }}
+            className="w-24 h-24 rounded-lg mt-2"
+            style={{ resizeMode: 'cover' }}
+          />
+        ) : null}
+      </FormField>
+    );
+  }
+
+  const displayUri = preview?.uri
+    ?? (value ? resolveImageUrl(String(value), {
+        cdnUrl: storage.cdnUrl,
+        endpoint: storage.endpoint,
+        transform: { width: 400, height: 300, fit: 'cover' },
+      }) : undefined);
+
+  const handlePick = useCallback(async () => {
+    setUploadError(null);
+    const result = await pickImageWeb();
+    if (!result) return;
+
+    setPreview(result.preview);
+
+    // Start upload
+    setUploading(true);
+    setUploadProgress(0);
+    abortRef.current = new AbortController();
+
+    try {
+      const { key } = await uploadFile({
+        endpoint: storage.endpoint,
+        file: result.file,
+        getToken: storage.getToken,
+        onProgress: setUploadProgress,
+        signal: abortRef.current.signal,
+      });
+      onChange(key);
+    } catch (err) {
+      if ((err as Error).message !== 'Upload cancelled') {
+        setUploadError((err as Error).message);
+      }
+    } finally {
+      setUploading(false);
+      abortRef.current = null;
+    }
+  }, [storage, onChange]);
+
+  const handleClear = useCallback(() => {
+    abortRef.current?.abort();
+    setPreview(null);
+    setUploadProgress(0);
+    setUploadError(null);
+    setUploading(false);
+    onChange(null);
+  }, [onChange]);
+
+  const handleCancel = useCallback(() => {
+    abortRef.current?.abort();
+    setUploading(false);
+    setUploadProgress(0);
+    setPreview(null);
+  }, []);
+
+  return (
+    <FormField label={label} error={error || uploadError || undefined} required={required}>
+      <ImageInput
+        value={displayUri ? { uri: displayUri } : null}
+        onPick={handlePick}
+        onClear={value || preview ? handleClear : undefined}
+        disabled={uploading}
+        placeholder="Click to select image"
+      />
+      {uploading && (
+        <UploadProgress
+          percentage={uploadProgress}
+          status="uploading"
+          fileName={preview?.fileName}
+          fileSize={preview?.fileSize}
+          onCancel={handleCancel}
+          style={{ marginTop: 8 }}
+        />
+      )}
+      {uploadError && !uploading && (
+        <UploadProgress
+          percentage={uploadProgress}
+          status="error"
+          error={uploadError}
+          style={{ marginTop: 8 }}
+        />
+      )}
+    </FormField>
+  );
+}

package/src/components/dashboard/Brush.tsx

@@ -0,0 +1,139 @@
+/**
+ * Brush — Gesture-based selection overlay for chart brushing.
+ *
+ * Uses react-native PanResponder for cross-platform gesture tracking
+ * (no dependency on react-native-gesture-handler).  Maps pixel
+ * coordinates to data domain values via a d3 scale's `.invert()` method.
+ *
+ * Render as a sibling overlaid on top of chart content inside a
+ * position: relative container.
+ */
+
+import React, { useRef, useState } from 'react';
+import { View, PanResponder } from 'react-native';
+
+export interface BrushProps {
+  /** d3 scale with `.invert()` for mapping pixels → data domain. */
+  xScale: { invert: (px: number) => unknown };
+  /** Chart width in pixels. */
+  width: number;
+  /** Chart height in pixels. */
+  height: number;
+  /** Called when brush selection changes.  null = cleared. */
+  onBrush: (extent: [unknown, unknown] | null) => void;
+  /** Called when brush is cleared (double-tap). */
+  onClear?: () => void;
+  /** Overlay color for the selection region. */
+  brushColor?: string;
+}
+
+/**
+ * Clamp a value between min and max.
+ */
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+/**
+ * Compute brush extent from two pixel positions and a scale.
+ *
+ * Returns domain values in [min, max] order regardless of drag direction.
+ */
+export function computeBrushExtent(
+  startPx: number,
+  endPx: number,
+  width: number,
+  invert: (px: number) => unknown,
+): [unknown, unknown] {
+  const minPx = clamp(Math.min(startPx, endPx), 0, width);
+  const maxPx = clamp(Math.max(startPx, endPx), 0, width);
+  return [invert(minPx), invert(maxPx)];
+}
+
+export function Brush({
+  xScale,
+  width,
+  height,
+  onBrush,
+  onClear,
+  brushColor = 'rgba(99, 102, 241, 0.2)',
+}: BrushProps): React.ReactElement {
+  const [selection, setSelection] = useState<{ left: number; width: number } | null>(null);
+  const startXRef = useRef(0);
+  const lastTapRef = useRef(0);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+
+      onPanResponderGrant: (evt) => {
+        const now = Date.now();
+        const x = evt.nativeEvent.locationX;
+
+        // Double-tap detection (< 300ms)
+        if (now - lastTapRef.current < 300) {
+          setSelection(null);
+          onBrush(null);
+          onClear?.();
+          lastTapRef.current = 0;
+          return;
+        }
+        lastTapRef.current = now;
+        startXRef.current = x;
+        setSelection({ left: x, width: 0 });
+      },
+
+      onPanResponderMove: (evt) => {
+        const currentX = evt.nativeEvent.locationX;
+        const startX = startXRef.current;
+        const left = clamp(Math.min(startX, currentX), 0, width);
+        const right = clamp(Math.max(startX, currentX), 0, width);
+        setSelection({ left, width: right - left });
+      },
+
+      onPanResponderRelease: (evt) => {
+        const endX = evt.nativeEvent.locationX;
+        const startX = startXRef.current;
+
+        // Minimum 4px drag to count as a brush (not just a tap)
+        if (Math.abs(endX - startX) < 4) {
+          setSelection(null);
+          return;
+        }
+
+        const extent = computeBrushExtent(startX, endX, width, xScale.invert.bind(xScale));
+        onBrush(extent);
+      },
+    }),
+  ).current;
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width,
+        height,
+      }}
+      {...panResponder.panHandlers}
+    >
+      {selection && selection.width > 0 && (
+        <View
+          style={{
+            position: 'absolute',
+            left: selection.left,
+            top: 0,
+            width: selection.width,
+            height,
+            backgroundColor: brushColor,
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderColor: 'rgba(99, 102, 241, 0.5)',
+          }}
+        />
+      )}
+    </View>
+  );
+}

package/src/components/dashboard/DimensionBars.tsx

@@ -0,0 +1,67 @@
+/**
+ * DimensionBars — Horizontal bar chart for any categorical dimension.
+ *
+ * Generalized from PlatformBars. Accepts title, data, colors, and filter state.
+ * Tapping a bar toggles that value in the parent's filter state.
+ */
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+
+export interface DimensionBarsProps {
+  title: string;
+  data: { value: string; count: number }[];
+  colors?: Record<string, string>;
+  activeFilters?: string[];
+  onFilter: (value: string) => void;
+}
+
+const DEFAULT_COLOR = '#6366f1';
+
+export function DimensionBars({ title, data, colors, activeFilters, onFilter }: DimensionBarsProps): React.ReactElement {
+  const sorted = [...data].sort((a, b) => b.count - a.count);
+  const maxValue = Math.max(...sorted.map(e => e.count), 1);
+
+  if (sorted.length === 0) {
+    return (
+      <View style={{ flex: 1 }}>
+        <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
+          {title}
+        </Text>
+        <Text style={{ color: '#9ca3af', fontSize: 12 }}>No data</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
+        {title}
+      </Text>
+      {sorted.map((entry) => {
+        const color = colors?.[entry.value] ?? DEFAULT_COLOR;
+        const widthPercent = (entry.count / maxValue) * 100;
+        const isActive = activeFilters?.includes(entry.value);
+
+        return (
+          <Pressable
+            key={entry.value}
+            onPress={() => onFilter(entry.value)}
+            style={{ marginBottom: 6, opacity: activeFilters && !isActive ? 0.4 : 1 }}
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 2 }}>
+              <Text style={{ fontSize: 11, color: '#374151', flex: 1 }}>{entry.value}</Text>
+              <Text style={{ fontSize: 11, color: '#6b7280', fontWeight: '500' }}>{entry.count}</Text>
+            </View>
+            <View style={{ height: 12, backgroundColor: '#f1f5f9', borderRadius: 6 }}>
+              <View style={{
+                height: 12, width: `${widthPercent}%`, backgroundColor: color,
+                borderRadius: 6, minWidth: 4,
+              }} />
+            </View>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/dashboard/DimensionDonut.tsx

@@ -0,0 +1,98 @@
+/**
+ * DimensionDonut — Stacked bar showing distribution for any categorical dimension.
+ *
+ * Generalized from LevelDonut. Accepts title, data, colors, order, and filter state.
+ * Tapping a segment toggles that value in the parent's filter state.
+ */
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+
+export interface DimensionDonutProps {
+  title: string;
+  data: { value: string; count: number }[];
+  colors?: Record<string, string>;
+  order?: string[];
+  activeFilters?: string[];
+  onFilter: (value: string) => void;
+}
+
+const DEFAULT_COLOR = '#6b7280';
+
+export function DimensionDonut({ title, data, colors, order, activeFilters, onFilter }: DimensionDonutProps): React.ReactElement {
+  // Sort by order if provided, else by count
+  const sorted = order
+    ? order
+        .map(val => {
+          const entry = data.find(e => e.value === val);
+          return { value: val, count: entry?.count ?? 0 };
+        })
+        .filter(e => e.count > 0)
+    : [...data].sort((a, b) => b.count - a.count);
+
+  const total = sorted.reduce((sum, e) => sum + e.count, 0);
+
+  if (sorted.length === 0) {
+    return (
+      <View style={{ flex: 1 }}>
+        <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
+          {title}
+        </Text>
+        <Text style={{ color: '#9ca3af', fontSize: 12 }}>No data</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Text style={{ fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 8 }}>
+        {title}
+      </Text>
+
+      {/* Stacked bar */}
+      <View style={{
+        flexDirection: 'row', height: 24, borderRadius: 12, overflow: 'hidden',
+        marginBottom: 12,
+      }}>
+        {sorted.map((entry) => {
+          const color = colors?.[entry.value] ?? DEFAULT_COLOR;
+          const widthPercent = (entry.count / total) * 100;
+          const isActive = activeFilters?.includes(entry.value);
+          return (
+            <Pressable
+              key={entry.value}
+              onPress={() => onFilter(entry.value)}
+              style={{
+                width: `${widthPercent}%`,
+                backgroundColor: color,
+                minWidth: 4,
+                opacity: activeFilters && !isActive ? 0.4 : 1,
+              }}
+            />
+          );
+        })}
+      </View>
+
+      {/* Legend */}
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+        {sorted.map((entry) => {
+          const color = colors?.[entry.value] ?? DEFAULT_COLOR;
+          const percent = total > 0 ? ((entry.count / total) * 100).toFixed(1) : '0';
+          const isActive = activeFilters?.includes(entry.value);
+          return (
+            <Pressable
+              key={entry.value}
+              onPress={() => onFilter(entry.value)}
+              style={{ flexDirection: 'row', alignItems: 'center', opacity: activeFilters && !isActive ? 0.4 : 1 }}
+            >
+              <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: color, marginRight: 4 }} />
+              <Text style={{ fontSize: 11, color: '#374151' }}>
+                {entry.value} ({percent}%)
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}