@unicitylabs/sphere-ui 0.1.0

package/dist/index-DMHfA7fr.d.ts

@@ -0,0 +1,90 @@
+/** Shared types for quest/track/achievement forms */
+interface QuestData {
+    _id?: string;
+    title: string;
+    description: string;
+    points: number;
+    projectPoints?: number;
+    tags: string[];
+    platform: string | null;
+    action: string;
+    actionConfig: Record<string, unknown>;
+    status: string;
+    startDate?: string | null;
+    endDate?: string | null;
+    maxCompletions?: number | null;
+    sortOrder?: number;
+    imageUrl?: string | null;
+    backgroundUrl?: string | null;
+    trackId?: string | null;
+    isRepeatable?: boolean;
+    repeatInterval?: string | null;
+    prerequisites?: string[];
+    unlockRules?: unknown[];
+    questType?: string;
+    verificationType?: string;
+    autoApproveAfterHours?: number | null;
+    chains?: Record<string, number>;
+    [key: string]: unknown;
+}
+interface TrackData {
+    _id?: string;
+    title: string;
+    description: string;
+    status: string;
+    startDate?: string | null;
+    endDate?: string | null;
+    sortOrder?: number;
+    imageUrl?: string | null;
+    accentHex?: string | null;
+    glowColor?: string | null;
+    borderColor?: string | null;
+    gradient?: string | null;
+    coreColor?: string | null;
+    [key: string]: unknown;
+}
+interface AchievementData {
+    _id?: string;
+    title: string;
+    description: string;
+    points: number;
+    source: string;
+    dataSource: string;
+    action: string;
+    actionConfig: Record<string, unknown>;
+    target: number;
+    status: string;
+    trackId?: string | null;
+    imageUrl?: string | null;
+    backgroundUrl?: string | null;
+    sortOrder?: number;
+    chains?: Record<string, number>;
+    [key: string]: unknown;
+}
+/** API callbacks injected by consumers */
+interface QuestFormApi {
+    createQuest: (data: Record<string, unknown>) => Promise<unknown>;
+    updateQuest: (id: string, data: Record<string, unknown>) => Promise<unknown>;
+    createTrack: (data: Record<string, unknown>) => Promise<unknown>;
+    getExternalApis?: () => Promise<{
+        _id: string;
+        name: string;
+        slug: string;
+    }[]>;
+}
+interface TrackFormApi {
+    createTrack: (data: Record<string, unknown>) => Promise<unknown>;
+    updateTrack: (id: string, data: Record<string, unknown>) => Promise<unknown>;
+}
+interface AchievementFormApi {
+    createAchievement: (data: Record<string, unknown>) => Promise<unknown>;
+    updateAchievement: (id: string, data: Record<string, unknown>) => Promise<unknown>;
+}
+/** Query key factory — consumers provide their own prefix */
+interface QueryKeys {
+    quests: readonly unknown[];
+    tracks: readonly unknown[];
+    achievements: readonly unknown[];
+}
+
+export type { AchievementData as A, QueryKeys as Q, TrackData as T, AchievementFormApi as a, QuestData as b, QuestFormApi as c, TrackFormApi as d };

package/dist/index-DsEO4kM1.d.ts

@@ -0,0 +1,126 @@
+import * as react from 'react';
+import { DragOverEvent, DragEndEvent } from '@dnd-kit/core';
+
+/** Minimal interface for track-like objects */
+interface CanvasTrack {
+    _id: string;
+    title: string;
+    sortOrder: number;
+    accentHex?: string | null;
+    [key: string]: unknown;
+}
+/** Minimal interface for quest-like objects */
+interface CanvasQuest {
+    _id: string;
+    title: string;
+    sortOrder: number;
+    trackId?: string | null;
+    chains?: Record<string, number>;
+    [key: string]: unknown;
+}
+type SelectedItem = {
+    type: 'quest';
+    id: string;
+} | {
+    type: 'track';
+    id: string;
+} | null;
+type PendingChange = {
+    kind: 'quest-reorder';
+    laneId: string;
+} | {
+    kind: 'track-reorder';
+} | {
+    kind: 'quest-field';
+    id: string;
+    fields: Record<string, unknown>;
+} | {
+    kind: 'track-field';
+    id: string;
+    fields: Record<string, unknown>;
+};
+/** Deterministic color from a string — used for chain group coloring */
+declare function chainColor(group: string): string;
+declare function getLaneId(quest: CanvasQuest): string;
+declare function useCanvasState<T extends CanvasTrack, Q extends CanvasQuest>(tracks: T[], quests: Q[]): {
+    orderedTracks: T[];
+    getQuestsForLane: (laneId: string) => Q[];
+    getQuest: (id: string) => Q | undefined;
+    getTrack: (id: string) => T | undefined;
+    trackOrder: string[];
+    questOrderByLane: Map<string, string[]>;
+    activeDragId: string | null;
+    handleDragStart: (id: string) => void;
+    handleDragOver: (event: DragOverEvent) => void;
+    handleDragEnd: (event: DragEndEvent) => void;
+    selectedItem: SelectedItem;
+    selectItem: (item: SelectedItem) => void;
+    activePanelTab: "chains" | "quests" | "tracks" | "settings" | "create";
+    setActivePanelTab: react.Dispatch<react.SetStateAction<"chains" | "quests" | "tracks" | "settings" | "create">>;
+    updateQuestField: (id: string, fields: Partial<Q>) => void;
+    updateTrackField: (id: string, fields: Partial<T>) => void;
+    undo: () => void;
+    pendingChanges: PendingChange[];
+    hasPendingChanges: boolean;
+    clearPendingChanges: () => void;
+    reset: () => void;
+};
+
+/** Minimal interface for achievement-like objects */
+interface CanvasAchievement {
+    _id: string;
+    title: string;
+    sortOrder: number;
+    trackId?: string | null;
+    chains?: Record<string, number>;
+    [key: string]: unknown;
+}
+type AchSelectedItem = {
+    type: 'achievement';
+    id: string;
+} | {
+    type: 'track';
+    id: string;
+} | null;
+type AchPendingChange = {
+    kind: 'ach-reorder';
+    laneId: string;
+} | {
+    kind: 'track-reorder';
+} | {
+    kind: 'ach-field';
+    id: string;
+    fields: Record<string, unknown>;
+} | {
+    kind: 'track-field';
+    id: string;
+    fields: Record<string, unknown>;
+};
+declare function getAchLaneId(ach: CanvasAchievement): string;
+declare function useAchievementCanvasState<T extends CanvasTrack, A extends CanvasAchievement>(tracks: T[], achievements: A[]): {
+    orderedTracks: T[];
+    getAchievementsForLane: (laneId: string) => A[];
+    getAchievement: (id: string) => A | undefined;
+    getTrack: (id: string) => T | undefined;
+    trackOrder: string[];
+    achOrderByLane: Map<string, string[]>;
+    groupMode: "track" | "source";
+    setGroupMode: react.Dispatch<react.SetStateAction<"track" | "source">>;
+    activeDragId: string | null;
+    handleDragStart: (id: string) => void;
+    handleDragOver: (event: DragOverEvent) => void;
+    handleDragEnd: (event: DragEndEvent) => void;
+    selectedItem: AchSelectedItem;
+    selectItem: (item: AchSelectedItem) => void;
+    activePanelTab: "chains" | "tracks" | "settings" | "create" | "achievements";
+    setActivePanelTab: react.Dispatch<react.SetStateAction<"chains" | "tracks" | "settings" | "create" | "achievements">>;
+    updateAchField: (id: string, fields: Partial<A>) => void;
+    updateTrackField: (id: string, fields: Partial<T>) => void;
+    undo: () => void;
+    pendingChanges: AchPendingChange[];
+    hasPendingChanges: boolean;
+    clearPendingChanges: () => void;
+    reset: () => void;
+};
+
+export { type AchPendingChange as A, type CanvasAchievement as C, type PendingChange as P, type SelectedItem as S, type AchSelectedItem as a, type CanvasQuest as b, type CanvasTrack as c, chainColor as d, getLaneId as e, useCanvasState as f, getAchLaneId as g, useAchievementCanvasState as u };

package/dist/index.d.ts

@@ -0,0 +1,199 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColumnDef } from '@tanstack/react-table';
+export { A as AchievementData, a as AchievementFormApi, Q as QueryKeys, b as QuestData, c as QuestFormApi, T as TrackData, d as TrackFormApi } from './index-DMHfA7fr.js';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    error?: boolean;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    error?: boolean;
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    icon?: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface FieldProps {
+    label: string;
+    required?: boolean;
+    error?: string;
+    hint?: string;
+    className?: string;
+    children: ReactNode;
+}
+declare function Field({ label, required, error, hint, className, children }: FieldProps): react_jsx_runtime.JSX.Element;
+interface SectionProps {
+    title: string;
+    children: ReactNode;
+}
+declare function Section({ title, children }: SectionProps): react_jsx_runtime.JSX.Element;
+
+interface FormModalProps {
+    title: string;
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    maxWidth?: string;
+}
+declare function FormModal({ title, isOpen, onClose, children, maxWidth }: FormModalProps): react.ReactPortal | null;
+
+interface ConfirmDialogProps {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    variant?: 'danger' | 'default';
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+declare function ConfirmDialog({ isOpen, title, message, confirmLabel, variant, onConfirm, onCancel, }: ConfirmDialogProps): react.ReactPortal | null;
+
+interface StatusBadgeProps {
+    status: string;
+    className?: string;
+}
+declare function StatusBadge({ status, className }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+declare function SearchInput({ value, onChange, placeholder }: SearchInputProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+    action?: ReactNode;
+}
+declare function EmptyState({ title, description, action }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface CustomSelectProps {
+    options: SelectOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    size?: 'sm' | 'md';
+}
+declare function CustomSelect({ options, value, onChange, placeholder, className, size, }: CustomSelectProps): react_jsx_runtime.JSX.Element;
+
+interface PageShellProps {
+    title: string;
+    subtitle?: string;
+    action?: ReactNode;
+    maxWidth?: string;
+    children: ReactNode;
+}
+declare function PageShell({ title, subtitle, action, maxWidth, children }: PageShellProps): react_jsx_runtime.JSX.Element;
+
+interface DataTableProps<T> {
+    columns: ColumnDef<T, unknown>[];
+    data: T[];
+    isLoading?: boolean;
+    emptyMessage?: string;
+    searchPlaceholder?: string;
+    enableSearch?: boolean;
+    onRowClick?: (row: T) => void;
+}
+declare function DataTable<T>({ columns, data, isLoading, emptyMessage, searchPlaceholder, enableSearch, onRowClick, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface AlertBannerProps {
+    type: 'warning' | 'info';
+    title: string;
+    children: ReactNode;
+}
+declare function AlertBanner({ type, title, children }: AlertBannerProps): react_jsx_runtime.JSX.Element;
+
+interface AddressDisplayProps {
+    address: string;
+    nametag?: string | null;
+    truncate?: boolean;
+}
+declare function AddressDisplay({ address, nametag, truncate }: AddressDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface JsonPanelProps<T> {
+    /** Current form state to display as JSON */
+    value: T;
+    /** Called when user edits JSON and it parses successfully */
+    onChange: (parsed: T) => void;
+    /** Fields to exclude from display (internal fields like _id, completionCount) */
+    excludeKeys?: string[];
+    /** Panel title */
+    title?: string;
+}
+declare function JsonPanel<T extends Record<string, unknown>>({ value, onChange, excludeKeys, title, }: JsonPanelProps<T>): react_jsx_runtime.JSX.Element;
+declare function JsonToggleButton({ active, onClick }: {
+    active: boolean;
+    onClick: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+declare function tagColor(tag: string): {
+    bg: string;
+    color: string;
+    border: string;
+};
+declare function ChainInput({ chains, suggestions, onChange, size }: {
+    chains: Record<string, number>;
+    suggestions: string[];
+    onChange: (chains: Record<string, number>) => void;
+    size?: 'sm' | 'md';
+}): react_jsx_runtime.JSX.Element;
+
+interface MemoCondition {
+    key: string;
+    operator: string;
+    value?: string;
+    value2?: string;
+}
+declare function MemoConditionsEditor({ conditions, onChange }: {
+    conditions: MemoCondition[];
+    onChange: (conditions: MemoCondition[]) => void;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Consistent SVG icon set for the admin panel.
+ * Same style as sidebar icons in App.tsx: strokeWidth 1.5, single-path, 24x24 viewBox.
+ */
+interface IconProps {
+    size?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const IconBack: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconUndo: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconQuests: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconTracks: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconSettings: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconChain: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconPlus: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconEdit: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconTrash: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconX: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconCheck: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconSearch: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconChevronUp: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconChevronDown: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconChevronsDown: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconChevronsRight: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconArrowRight: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconPlay: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconStar: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconDiamond: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconCircle: (p: IconProps) => react_jsx_runtime.JSX.Element;
+
+export { AddressDisplay, AlertBanner, Button, type ButtonProps, type ButtonVariant, ChainInput, ConfirmDialog, CustomSelect, DataTable, EmptyState, Field, FormModal, IconArrowRight, IconBack, IconChain, IconCheck, IconChevronDown, IconChevronUp, IconChevronsDown, IconChevronsRight, IconCircle, IconDiamond, IconEdit, IconPlay, IconPlus, IconQuests, IconSearch, IconSettings, IconStar, IconTracks, IconTrash, IconUndo, IconX, Input, type InputProps, JsonPanel, JsonToggleButton, type MemoCondition, MemoConditionsEditor, PageShell, SearchInput, Section, Select, type SelectOption, type SelectProps, StatusBadge, Textarea, type TextareaProps, tagColor };