@develemit/commerce-admin 0.0.0-stage → 0.3.0

package/dist/lib/product-labels.d.ts

@@ -0,0 +1,52 @@
+import { ImageLabels } from './image-labels';
+export type ProductFilter = 'all' | 'live' | 'sold' | 'draft' | 'archived';
+export interface ProductLabels {
+    title: string;
+    newProduct: string;
+    searchLabel: string;
+    searchPlaceholder: string;
+    filters: Record<ProductFilter, string>;
+    empty: Record<ProductFilter, string>;
+    noMatches: string;
+    loadMore: string;
+    columns: {
+        image: string;
+        name: string;
+        price: string;
+        status: string;
+        quantity: string;
+        actions: string;
+    };
+    noImage: string;
+    viewInShop: string;
+    markSold: string;
+    archive: string;
+    markSoldTitle: string;
+    markSoldBody: string;
+    archiveTitle: string;
+    archiveBody: string;
+    updated: string;
+    createTitle: string;
+    editTitle: string;
+    saved: string;
+    fields: {
+        name: string;
+        category: string;
+        description: string;
+        materials: string;
+        dimensions: string;
+        price: string;
+        quantity: string;
+        status: string;
+        featured: string;
+    };
+    images: ImageLabels;
+    statusHelp: string;
+    priceHelp: string;
+    validation: {
+        required: string;
+        price: string;
+        quantity: string;
+    };
+}
+export declare const defaultProductLabels: ProductLabels;

package/dist/lib/provider.d.ts

@@ -0,0 +1,73 @@
+import { AdminClient } from '../client';
+import { ReactNode } from 'react';
+import { OrderLabels } from './order-labels';
+import { ShippingLabels } from './shipping-labels';
+import { ProductLabels } from './product-labels';
+export interface LinkProps {
+    href: string;
+    children: ReactNode;
+    className?: string;
+}
+export interface AdminImageProps {
+    src: string;
+    alt: string;
+    sizes?: string;
+    className?: string;
+    priority?: boolean;
+}
+export type AdminErrorKey = 'unauthorized' | 'notFound' | 'invalidInput' | 'invalidOrderState' | 'insufficientStock' | 'refundExceedsBalance' | 'refundGateway' | 'refundOutcomeUnknown' | 'imageInvalid' | 'imageTooLarge' | 'generic';
+export interface AdminLabels {
+    loading: string;
+    empty: string;
+    save: string;
+    cancel: string;
+    confirm: string;
+    dismiss: string;
+    navLabel: string;
+    nav: {
+        products: string;
+        orders: string;
+        shippingRates: string;
+    };
+    statuses: Record<string, string>;
+    errors: Record<AdminErrorKey, string>;
+    products: ProductLabels;
+    orders: OrderLabels;
+    shipping: ShippingLabels;
+}
+export interface AdminConfig {
+    renderLink: (props: LinkProps) => ReactNode;
+    renderImage: (props: AdminImageProps) => ReactNode;
+    locale: string;
+    currency: string;
+    hrefs: {
+        products: string;
+        product: (id: string) => string;
+        newProduct: string;
+        orders: string;
+        order: (id: string) => string;
+        shippingRates: string;
+        storefrontProduct?: (slug: string) => string;
+    };
+    client: AdminClient | null;
+    labels: AdminLabels;
+}
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? Partial<T[K]> : T[K];
+};
+export interface AdminProviderProps extends Partial<Omit<AdminConfig, 'hrefs' | 'labels'>> {
+    hrefs?: Partial<AdminConfig['hrefs']>;
+    labels?: Partial<Omit<AdminLabels, 'nav' | 'statuses' | 'errors' | 'products' | 'orders' | 'shipping'> & {
+        nav: Partial<AdminLabels['nav']>;
+        statuses: Partial<AdminLabels['statuses']>;
+        errors: Partial<AdminLabels['errors']>;
+        products: DeepPartial<ProductLabels>;
+        orders: DeepPartial<OrderLabels>;
+        shipping: Partial<ShippingLabels>;
+    }>;
+    children: ReactNode;
+}
+export declare function AdminProvider({ children, hrefs, labels, ...overrides }: AdminProviderProps): import('react').JSX.Element;
+export declare function useAdmin(): AdminConfig;
+export declare function useAdminClient(): AdminClient;
+export {};

package/dist/lib/refund-rules.d.ts

@@ -0,0 +1,7 @@
+import { AdminOrderDetail } from '@develemit/commerce-contracts';
+export declare function pendingRefundCents(order: AdminOrderDetail): number;
+export declare function remainingRefundCents(order: AdminOrderDetail): number;
+export declare function hasPendingRefund(order: AdminOrderDetail): boolean;
+export declare function canRestock(order: AdminOrderDetail, amountCents: number | null): boolean;
+export declare function canShip(order: AdminOrderDetail): boolean;
+export declare function canRefund(order: AdminOrderDetail): boolean;

package/dist/lib/shipping-labels.d.ts

@@ -0,0 +1,33 @@
+export interface ShippingLabels {
+    title: string;
+    loading: string;
+    empty: string;
+    add: string;
+    save: string;
+    saved: string;
+    label: string;
+    amount: string;
+    currency: string;
+    mixedCurrency: string;
+    minDays: string;
+    maxDays: string;
+    active: string;
+    rowName: string;
+    moveEarlier: string;
+    moveLater: string;
+    remove: string;
+    removeTitle: string;
+    removeBody: string;
+    newRateLabel: string;
+    removalWarning: string;
+    unsaved: string;
+    noActive: string;
+    labelRequired: string;
+    labelDuplicate: string;
+    amountInvalid: string;
+    currencyInvalid: string;
+    daysInvalid: string;
+    daysOrder: string;
+    rowInvalid: string;
+}
+export declare const defaultShippingLabels: ShippingLabels;

package/dist/lib/shipping-rates.d.ts

@@ -0,0 +1,31 @@
+import { ShippingRate, ShippingRateInput } from '@develemit/commerce-contracts';
+import { ShippingLabels } from './shipping-labels';
+export interface RateDraft {
+    key: string;
+    label: string;
+    amount: string;
+    currency: string;
+    minDays: string;
+    maxDays: string;
+    active: boolean;
+}
+export interface RateErrors {
+    label?: string;
+    amount?: string;
+    minDays?: string;
+    maxDays?: string;
+    currency?: string;
+    row?: string;
+}
+export interface DraftCheck {
+    rates: ShippingRateInput[];
+    rowErrors: Record<string, RateErrors>;
+    noActive: boolean;
+    valid: boolean;
+}
+export declare const newKey: () => string;
+export declare function toDrafts(rates: ShippingRate[]): RateDraft[];
+export declare function blankDraft(currency: string, label: string): RateDraft;
+export declare const snapshot: (drafts: RateDraft[]) => string;
+export declare function checkDrafts(drafts: RateDraft[], copy: ShippingLabels): DraftCheck;
+export declare function serverRowErrors(issues: unknown[], drafts: RateDraft[], copy: ShippingLabels): Record<string, RateErrors>;

package/dist/lib/use-admin-mutation.d.ts

@@ -0,0 +1,7 @@
+export interface AdminMutation<A extends unknown[], R> {
+    run: (...args: A) => Promise<R | undefined>;
+    pending: boolean;
+    error: unknown;
+    reset: () => void;
+}
+export declare function useAdminMutation<A extends unknown[], R>(fn: (...args: A) => Promise<R>): AdminMutation<A, R>;

package/dist/lib/use-admin-query.d.ts

@@ -0,0 +1,7 @@
+export interface AdminQuery<T> {
+    data: T | undefined;
+    error: unknown;
+    loading: boolean;
+    reload: () => void;
+}
+export declare function useAdminQuery<T>(key: readonly unknown[], fn: (signal: AbortSignal) => Promise<T>): AdminQuery<T>;

package/dist/lib/use-debounced.d.ts

@@ -0,0 +1 @@
+export declare function useDebounced<T>(value: T, delayMs: number): T;

package/dist/lib/use-image-upload.d.ts

@@ -0,0 +1,18 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+export interface UploadEntry {
+    id: number;
+    name: string;
+    status: 'queued' | 'uploading' | 'error';
+    reason?: string;
+    error?: unknown;
+}
+interface Options {
+    productId: string;
+    onUploaded: (product: AdminProduct) => void;
+}
+export declare function useImageUpload({ productId, onUploaded }: Options): {
+    entries: UploadEntry[];
+    upload: (files: File[], alt: string) => void;
+    dismiss: (id: number) => void;
+};
+export {};

package/dist/lib/use-order-pages.d.ts

@@ -0,0 +1,17 @@
+import { AdminOrderQuery } from '../client/admin-client';
+export declare function useOrderPages(query: Omit<AdminOrderQuery, 'cursor'>): {
+    items: {
+        id: string;
+        status: "pending" | "paid" | "shipped" | "cancelled" | "expired" | "needs_attention" | "refunded";
+        email: string | null;
+        totalCents: number;
+        currency: string;
+        itemCount: number;
+        createdAt: string;
+    }[];
+    loading: boolean;
+    error: unknown;
+    hasMore: boolean;
+    loadingMore: boolean;
+    loadMore: () => void;
+};

package/dist/lib/use-product-pages.d.ts

@@ -0,0 +1,30 @@
+import { AdminProductQuery } from '../client/admin-client';
+export declare function useProductPages(query: Omit<AdminProductQuery, 'cursor'>): {
+    items: {
+        id: string;
+        slug: string;
+        name: string;
+        description: string;
+        materials: string | null;
+        dimensions: string | null;
+        priceCents: number;
+        currency: string;
+        category: string;
+        quantity: number;
+        status: "draft" | "active" | "archived";
+        featured: boolean;
+        images: {
+            id: string;
+            url: string;
+            alt: string;
+            position: number;
+        }[];
+    }[];
+    loaded: boolean;
+    loading: boolean;
+    error: unknown;
+    hasMore: boolean;
+    loadingMore: boolean;
+    reload: () => void;
+    loadMore: () => void;
+};

package/dist/styles.css

@@ -0,0 +1,405 @@
+.sfa-root {
+  color: var(--sf-color-fg, #1a1a1a);
+  background: var(--sf-color-bg, #ffffff);
+  font-family: var(--sf-font-body, system-ui, sans-serif);
+}
+.sfa-panel {
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-surface, #f6f6f6);
+  padding: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-btn {
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 4);
+  font: inherit;
+  font-size: 1rem;
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-bg, #ffffff);
+  color: inherit;
+  cursor: pointer;
+}
+.sfa-btn--primary {
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+}
+.sfa-btn--danger {
+  background: var(--sf-color-danger, #b00020);
+  color: #ffffff;
+}
+.sfa-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.sfa-nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  margin: 0;
+  padding: calc(var(--sf-space-unit, 0.25rem) * 2);
+  list-style: none;
+}
+.sfa-nav__link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 3);
+}
+/* Bare inline links measure ~22px; hosts cannot restyle kit internals. */
+.sfa-link--tap {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-layout__content {
+  flex: 1;
+  padding: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--sf-color-surface, #f6f6f6);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  font-size: 0.875rem;
+}
+.sfa-badge--needs-attention {
+  border-color: var(--sf-color-danger, #b00020);
+}
+.sfa-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.sfa-table th,
+.sfa-table td {
+  padding: calc(var(--sf-space-unit, 0.25rem) * 2);
+  text-align: left;
+  border-bottom: 1px solid var(--sf-color-border, #e0e0e0);
+}
+@media (max-width: 640px) {
+  .sfa-table--stacked thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+  .sfa-table--stacked,
+  .sfa-table--stacked tbody,
+  .sfa-table--stacked tr,
+  .sfa-table--stacked td {
+    display: block;
+  }
+  .sfa-table--stacked tr {
+    margin-bottom: calc(var(--sf-space-unit, 0.25rem) * 3);
+    border: 1px solid var(--sf-color-border, #e0e0e0);
+    border-radius: var(--sf-radius, 4px);
+  }
+  .sfa-table--stacked td::before {
+    content: attr(data-label);
+    display: block;
+    font-size: 0.75rem;
+    opacity: 0.7;
+  }
+}
+.sfa-notice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  padding: calc(var(--sf-space-unit, 0.25rem) * 3);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+}
+.sfa-notice--error {
+  border-color: var(--sf-color-danger, #b00020);
+}
+.sfa-notice--toast {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
+  background: var(--sf-color-bg, #ffffff);
+  z-index: 60;
+}
+.sfa-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+}
+.sfa-dialog {
+  width: min(92vw, 28rem);
+  padding: calc(var(--sf-space-unit, 0.25rem) * 5);
+  background: var(--sf-color-bg, #ffffff);
+  border-radius: var(--sf-radius, 4px);
+}
+.sfa-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-root input,
+.sfa-root select,
+.sfa-root textarea {
+  font-size: 1rem;
+  min-height: 44px;
+}
+.sfa-filter-group {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 3px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+.sfa-filter-group::-webkit-scrollbar {
+  display: none;
+}
+.sfa-filter-group .sfa-filter {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.sfa-products__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+}
+.sfa-products__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
+}
+.sfa-filter[aria-pressed='true'] {
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+}
+.sfa-thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-surface, #f6f6f6);
+  font-size: 0.625rem;
+  text-align: center;
+}
+.sfa-row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-row-actions a.sfa-btn {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+.sfa-form {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 4);
+  max-width: 40rem;
+}
+.sfa-field {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 1);
+}
+.sfa-field__label {
+  font-weight: 600;
+}
+.sfa-field__help {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+.sfa-field__error {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--sf-color-danger, #b00020);
+}
+.sfa-field [aria-invalid='true'] {
+  border-color: var(--sf-color-danger, #b00020);
+}
+.sfa-check {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  min-height: 44px;
+}
+.sfa-check input {
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
+}
+.sfa-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+.sfa-image-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-image-picker__btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+.sfa-image-picker__btn:focus-within {
+  outline: 2px solid var(--sf-color-accent, #1a1a1a);
+  outline-offset: 2px;
+}
+.sfa-image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sfa-image-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  min-width: 120px;
+  padding: calc(var(--sf-space-unit, 0.25rem) * 2);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+}
+.sfa-image-tile[aria-busy='true'] {
+  opacity: 0.7;
+}
+.sfa-image-tile__img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+.sfa-image-tile__cover {
+  position: absolute;
+  top: calc(var(--sf-space-unit, 0.25rem) * 3);
+  left: calc(var(--sf-space-unit, 0.25rem) * 3);
+  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 2);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+  font-size: 0.75rem;
+}
+.sfa-image-tile__actions {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-spinner {
+  font-size: 0.875rem;
+}
+.sfa-spinner::before {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 0.5em;
+  vertical-align: -0.125em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: sfa-spin 0.8s linear infinite;
+}
+@keyframes sfa-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sfa-spinner::before {
+    animation: none;
+  }
+}
+.sfa-orders__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
+}
+.sfa-orders__more {
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-order__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+}
+.sfa-order__section {
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 6);
+}
+.sfa-order__totals {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: end;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 1)
+    calc(var(--sf-space-unit, 0.25rem) * 4);
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 3);
+}
+.sfa-order__address {
+  font-style: normal;
+}
+.sfa-order__refund--pending {
+  font-style: italic;
+}
+.sfa-order__actions,
+.sfa-order__action {
+  display: grid;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  justify-items: start;
+}
+.sfa-rates {
+  list-style: none;
+  margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
+  padding: 0;
+  display: grid;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-rate {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  align-items: end;
+  padding: calc(var(--sf-space-unit, 0.25rem) * 4);
+  border: 1px solid var(--sf-color-border, #d4d4d4);
+  border-radius: var(--sf-radius, 4px);
+}
+.sfa-rate__active {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-rate__actions,
+.sfa-shipping__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}

package/dist/views/orders/admin-order-detail.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { AdminOrderDetail as OrderDetail } from '@develemit/commerce-contracts';
+export interface AdminOrderDetailProps {
+    orderId: string;
+    actions?: (ctx: {
+        order: OrderDetail;
+        reload: () => void;
+    }) => ReactNode;
+}
+export declare function AdminOrderDetail({ orderId, actions }: AdminOrderDetailProps): import('react').JSX.Element;

package/dist/views/orders/admin-order-list.d.ts

@@ -0,0 +1 @@
+export declare function AdminOrderList(): import('react').JSX.Element;