@develemit/commerce-admin 0.4.0 → 0.7.0

package/dist/views/products/add-several/admin-add-several.d.ts

@@ -0,0 +1,5 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+export interface AdminAddSeveralProps {
+    onDone: (products: AdminProduct[]) => void;
+}
+export declare function AdminAddSeveral({ onDone }: AdminAddSeveralProps): import('react').JSX.Element;

package/dist/views/products/add-several/photo-picker.d.ts

@@ -0,0 +1,7 @@
+export interface PhotoPickerProps {
+    label: string;
+    onFiles: (files: File[]) => void;
+    multiple?: boolean;
+    primary?: boolean;
+}
+export declare function PhotoPicker({ label, onFiles, multiple, primary, }: PhotoPickerProps): import('react').JSX.Element;

package/dist/views/products/admin-product-editor.d.ts

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
 import { AdminProduct } from '@develemit/commerce-contracts';
+import { ProductFlowStep } from '../../lib/product-flow-labels';
 export interface AdminProductEditorProps {
     productId?: string;
     onSaved?: (product: AdminProduct) => void;
     imagesSlot?: ReactNode;
     categories?: string[];
+    initialStep?: ProductFlowStep;
 }
-export declare function AdminProductEditor({ productId, onSaved, imagesSlot, categories, }: AdminProductEditorProps): import('react').JSX.Element;
+export declare function AdminProductEditor({ productId, onSaved, imagesSlot, categories, initialStep, }: AdminProductEditorProps): import('react').JSX.Element;

package/dist/views/products/admin-product-list.d.ts

@@ -1 +1,13 @@
-export declare function AdminProductList(): import('react').JSX.Element;
+import { ReactNode } from 'react';
+import { AdminProduct } from '@develemit/commerce-contracts';
+import { SetupStep } from '../../components/setup-checklist/setup-checklist';
+import { EditProduct } from './product-sheet/sheet-edit-link';
+export interface AdminProductListProps {
+    welcome?: ReactNode;
+    setup?: SetupStep[];
+    onAddMany?: () => void;
+    onFinishDrafts?: () => void;
+    onOpenProduct?: (product: AdminProduct) => void;
+    onEditProduct?: EditProduct;
+}
+export declare function AdminProductList({ welcome, setup, onAddMany, onFinishDrafts, onOpenProduct, onEditProduct, }?: AdminProductListProps): import('react').JSX.Element;

package/dist/views/products/finish-drafts/admin-finish-drafts.d.ts

@@ -0,0 +1,7 @@
+import { PublishOutcome } from './use-publish-pieces';
+export interface AdminFinishDraftsProps {
+    productIds?: string[];
+    categories?: string[];
+    onDone: (result: PublishOutcome) => void;
+}
+export declare function AdminFinishDrafts({ productIds, categories, onDone, }: AdminFinishDraftsProps): import('react').JSX.Element;

package/dist/views/products/finish-drafts/piece-card.d.ts

@@ -0,0 +1,10 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+export interface PieceCardProps {
+    product: AdminProduct;
+    index: number;
+    total: number;
+    categories?: string[];
+    onAdvance: (product: AdminProduct) => void;
+    onBack?: () => void;
+}
+export declare function PieceCard({ product, index, total, categories, onAdvance, onBack, }: PieceCardProps): import('react').JSX.Element;

package/dist/views/products/finish-drafts/piece-fields.d.ts

@@ -0,0 +1,7 @@
+import { ProductForm } from '../../../lib/product-form';
+export interface PieceFieldsProps {
+    form: ProductForm;
+    update: <K extends 'name' | 'price' | 'category'>(field: K, value: string) => void;
+    categories?: string[];
+}
+export declare function PieceFields({ form, update, categories }: PieceFieldsProps): import('react').JSX.Element;

package/dist/views/products/finish-drafts/piece-summary.d.ts

@@ -0,0 +1,10 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+export interface PieceSummaryProps {
+    pieces: AdminProduct[];
+    pending: boolean;
+    failure: unknown;
+    onPublish: (ready: AdminProduct[], rest: AdminProduct[]) => void;
+    onKeepDrafts: () => void;
+}
+export declare function isReady(piece: AdminProduct): boolean;
+export declare function PieceSummary({ pieces, pending, failure, onPublish, onKeepDrafts, }: PieceSummaryProps): import('react').JSX.Element;

package/dist/views/products/finish-drafts/use-publish-pieces.d.ts

@@ -0,0 +1,52 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+export interface PublishOutcome {
+    published: AdminProduct[];
+    drafts: AdminProduct[];
+}
+export declare function usePublishPieces(): {
+    publish: (ready: AdminProduct[], rest: AdminProduct[]) => Promise<{
+        published: {
+            id: string;
+            slug: string;
+            name: string;
+            description: string;
+            materials: string | null;
+            dimensions: string | null;
+            priceCents: number | null;
+            currency: string;
+            category: string | null;
+            quantity: number;
+            status: "draft" | "active" | "archived";
+            featured: boolean;
+            images: {
+                id: string;
+                url: string;
+                alt: string;
+                position: number;
+            }[];
+        }[];
+        drafts: {
+            id: string;
+            slug: string;
+            name: string;
+            description: string;
+            materials: string | null;
+            dimensions: string | null;
+            priceCents: number | null;
+            currency: string;
+            category: string | null;
+            quantity: number;
+            status: "draft" | "active" | "archived";
+            featured: boolean;
+            images: {
+                id: string;
+                url: string;
+                alt: string;
+                position: number;
+            }[];
+        }[];
+    }>;
+    pending: boolean;
+    failure: unknown;
+    outcome: PublishOutcome | null;
+};

package/dist/views/products/product-card.d.ts

@@ -0,0 +1,6 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+export interface ProductCardProps {
+    product: AdminProduct;
+    onOpen: () => void;
+}
+export declare function ProductCard({ product, onOpen }: ProductCardProps): import('react').JSX.Element;

package/dist/views/products/product-flow/admin-product-flow.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { AdminProduct } from '@develemit/commerce-contracts';
+import { ProductFlowStep } from '../../../lib/product-flow-labels';
+export type { ProductFlowStep } from '../../../lib/product-flow-labels';
+export interface AdminProductFlowProps {
+    productId?: string;
+    initialStep?: ProductFlowStep;
+    onDone?: (product: AdminProduct) => void;
+    onClose?: (product: AdminProduct | null) => void;
+    categories?: string[];
+    materialSuggestions?: string[];
+    isFirstProduct?: boolean;
+    imagesSlot?: ReactNode;
+}
+export declare function AdminProductFlow(props: AdminProductFlowProps): import('react').JSX.Element;

package/dist/views/products/product-flow/basics-section.d.ts

@@ -0,0 +1,6 @@
+import { FlowSectionProps } from './flow-section-props';
+export interface BasicsSectionProps extends FlowSectionProps {
+    categories?: string[];
+    currency: string;
+}
+export declare function BasicsSection({ form, update, categories, currency, }: BasicsSectionProps): import('react').JSX.Element;

package/dist/views/products/product-flow/flow-actions.d.ts

@@ -0,0 +1,10 @@
+import { ProductFlowStep } from '../../../lib/product-flow-labels';
+import { ProductFlowState } from './use-product-flow';
+export declare function nextStep(step: ProductFlowStep): ProductFlowStep;
+export declare function previousStep(step: ProductFlowStep): ProductFlowStep | null;
+export declare function FinishActions({ flow }: {
+    flow: ProductFlowState;
+}): import('react').JSX.Element;
+export declare function StepActions({ flow }: {
+    flow: ProductFlowState;
+}): import('react').JSX.Element;

package/dist/views/products/product-flow/flow-frame.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { ProductFlowStep } from '../../../lib/product-flow-labels';
+import { AutosaveState } from '../../../lib/use-product-autosave';
+export interface FlowHeadProps {
+    title: string;
+    onBack: () => void;
+    canGoBack: boolean;
+    close: ReactNode;
+}
+export declare function FlowHead({ title, onBack, canGoBack, close }: FlowHeadProps): import('react').JSX.Element;
+export interface StepBarProps {
+    step: ProductFlowStep;
+    allOpen: boolean;
+    onStep: (step: ProductFlowStep) => void;
+}
+export declare function StepBar({ step, allOpen, onStep }: StepBarProps): import('react').JSX.Element;
+export interface SaveNoteProps {
+    state: AutosaveState;
+    isNew: boolean;
+    onRetry: () => void;
+}
+export declare function SaveNote({ state, isNew, onRetry }: SaveNoteProps): import('react').JSX.Element | null;
+export interface FlowSectionFrameProps {
+    step: ProductFlowStep;
+    active: boolean;
+    children: ReactNode;
+}
+export declare function FlowSectionFrame({ step, active, children, }: FlowSectionFrameProps): import('react').JSX.Element;

package/dist/views/products/product-flow/flow-images.d.ts

@@ -0,0 +1,7 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+export declare function sortedImages(product: AdminProduct | null): {
+    id: string;
+    url: string;
+    alt: string;
+    position: number;
+}[];

package/dist/views/products/product-flow/flow-section-props.d.ts

@@ -0,0 +1,5 @@
+import { ProductForm } from '../../../lib/product-form';
+export interface FlowSectionProps {
+    form: ProductForm;
+    update: <K extends keyof ProductForm>(field: K, value: ProductForm[K]) => void;
+}

package/dist/views/products/product-flow/flow-success.d.ts

@@ -0,0 +1,8 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+import { FlowSuccess } from './use-product-flow';
+export interface FlowSuccessViewProps {
+    success: FlowSuccess;
+    onAddAnother: () => void;
+    onDone?: (product: AdminProduct) => void;
+}
+export declare function FlowSuccessView({ success, onAddAnother, onDone, }: FlowSuccessViewProps): import('react').JSX.Element;

package/dist/views/products/product-flow/flow-test-helpers.d.ts

@@ -0,0 +1,12 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+export declare function draft(overrides?: Partial<AdminProduct>): AdminProduct;
+export declare function image(id: string, position: number, alt?: string): {
+    id: string;
+    url: string;
+    alt: string;
+    position: number;
+};
+export declare function type(label: string, value: string): void;
+export declare function click(name: string | RegExp): void;
+export declare function pickFiles(files: File[]): void;
+export declare const png: (name?: string) => File;

package/dist/views/products/product-flow/photos-section.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { AdminProduct } from '@develemit/commerce-contracts';
+export interface PhotosSectionProps {
+    product: AdminProduct | null;
+    ensureProduct: () => Promise<AdminProduct>;
+    setProduct: (next: AdminProduct) => void;
+    imagesSlot?: ReactNode;
+}
+export declare function PhotosSection({ product, ensureProduct, setProduct, imagesSlot, }: PhotosSectionProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import('react').JSX.Element;

package/dist/views/products/product-flow/preview-section.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { AdminProduct, ProductIncompleteField } from '@develemit/commerce-contracts';
+import { FlowSectionProps } from './flow-section-props';
+export interface PreviewSectionProps extends FlowSectionProps {
+    product: AdminProduct | null;
+    currency: string;
+    missing: ProductIncompleteField[] | null;
+    actions: ReactNode;
+}
+export declare function PreviewSection({ form, update, product, currency, missing, actions, }: PreviewSectionProps): import('react').JSX.Element;

package/dist/views/products/product-flow/story-section.d.ts

@@ -0,0 +1,8 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+import { FlowSectionProps } from './flow-section-props';
+export interface StorySectionProps extends FlowSectionProps {
+    product: AdminProduct | null;
+    setProduct: (next: AdminProduct) => void;
+    materialSuggestions?: string[];
+}
+export declare function StorySection({ form, update, product, setProduct, materialSuggestions, }: StorySectionProps): import('react').JSX.Element;

package/dist/views/products/product-flow/use-product-flow.d.ts

@@ -0,0 +1,138 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+import { ProductForm } from '../../../lib/product-form';
+import { ProductFlowStep } from '../../../lib/product-flow-labels';
+export interface FlowOptions {
+    initial: AdminProduct | null;
+    initialStep?: ProductFlowStep;
+    isFirstProduct?: boolean;
+    onDone?: (product: AdminProduct) => void;
+    onClose?: (product: AdminProduct | null) => void;
+}
+export interface FlowSuccess {
+    product: AdminProduct;
+    first: boolean;
+}
+export declare function useProductFlow({ initial, initialStep, isFirstProduct, onDone, onClose, }: FlowOptions): {
+    form: ProductForm;
+    update: <K extends keyof ProductForm>(field: K, value: ProductForm[K]) => void;
+    step: ProductFlowStep;
+    goTo: import('react').Dispatch<import('react').SetStateAction<ProductFlowStep>>;
+    product: {
+        id: string;
+        slug: string;
+        name: string;
+        description: string;
+        materials: string | null;
+        dimensions: string | null;
+        priceCents: number | null;
+        currency: string;
+        category: string | null;
+        quantity: number;
+        status: "draft" | "active" | "archived";
+        featured: boolean;
+        images: {
+            id: string;
+            url: string;
+            alt: string;
+            position: number;
+        }[];
+    } | null;
+    isNew: boolean;
+    autosave: {
+        product: {
+            id: string;
+            slug: string;
+            name: string;
+            description: string;
+            materials: string | null;
+            dimensions: string | null;
+            priceCents: number | null;
+            currency: string;
+            category: string | null;
+            quantity: number;
+            status: "draft" | "active" | "archived";
+            featured: boolean;
+            images: {
+                id: string;
+                url: string;
+                alt: string;
+                position: number;
+            }[];
+        } | null;
+        setProduct: (next: AdminProduct) => void;
+        state: import('../../../lib/use-product-autosave').AutosaveState;
+        error: unknown;
+        flush: () => Promise<{
+            id: string;
+            slug: string;
+            name: string;
+            description: string;
+            materials: string | null;
+            dimensions: string | null;
+            priceCents: number | null;
+            currency: string;
+            category: string | null;
+            quantity: number;
+            status: "draft" | "active" | "archived";
+            featured: boolean;
+            images: {
+                id: string;
+                url: string;
+                alt: string;
+                position: number;
+            }[];
+        } | null>;
+        ensureProduct: () => Promise<{
+            id: string;
+            slug: string;
+            name: string;
+            description: string;
+            materials: string | null;
+            dimensions: string | null;
+            priceCents: number | null;
+            currency: string;
+            category: string | null;
+            quantity: number;
+            status: "draft" | "active" | "archived";
+            featured: boolean;
+            images: {
+                id: string;
+                url: string;
+                alt: string;
+                position: number;
+            }[];
+        }>;
+        retry: () => Promise<{
+            id: string;
+            slug: string;
+            name: string;
+            description: string;
+            materials: string | null;
+            dimensions: string | null;
+            priceCents: number | null;
+            currency: string;
+            category: string | null;
+            quantity: number;
+            status: "draft" | "active" | "archived";
+            featured: boolean;
+            images: {
+                id: string;
+                url: string;
+                alt: string;
+                position: number;
+            }[];
+        } | null>;
+    };
+    missing: ("name" | "priceCents" | "category" | "images")[] | null;
+    failure: unknown;
+    pending: boolean;
+    success: FlowSuccess | null;
+    notice: string | null;
+    dismissNotice: () => void;
+    closing: boolean;
+    finishClosing: () => void;
+    saveDraft: () => Promise<void>;
+    publish: () => Promise<void>;
+    close: () => Promise<void>;
+};
+export type ProductFlowState = ReturnType<typeof useProductFlow>;

package/dist/views/products/product-sheet/admin-product-sheet.d.ts

@@ -0,0 +1,8 @@
+import { EditProduct } from './sheet-edit-link';
+export interface AdminProductSheetProps {
+    productId: string;
+    onClose: () => void;
+    onEdit?: EditProduct;
+    onChanged?: () => void;
+}
+export declare function AdminProductSheet({ productId, onClose, onEdit, onChanged, }: AdminProductSheetProps): import('react').JSX.Element;

package/dist/views/products/product-sheet/sheet-carousel.d.ts

@@ -0,0 +1,4 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+export declare function SheetCarousel({ product }: {
+    product: AdminProduct;
+}): import('react').JSX.Element;

package/dist/views/products/product-sheet/sheet-edit-link.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { AdminProduct } from '@develemit/commerce-contracts';
+import { ProductFlowStep } from '../../../lib/product-flow-labels';
+export type EditProduct = (product: AdminProduct, step?: ProductFlowStep) => void;
+export declare function hrefWithStep(href: string, step: ProductFlowStep): string;
+export declare function finishStep(product: AdminProduct): ProductFlowStep;
+export interface SheetEditLinkProps {
+    product: AdminProduct;
+    step: ProductFlowStep;
+    onEdit?: EditProduct;
+    className: string;
+    children: ReactNode;
+}
+export declare function SheetEditLink({ product, step, onEdit, className, children, }: SheetEditLinkProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import('react').JSX.Element | null | undefined;

package/dist/views/products/product-sheet/use-product-change.d.ts

@@ -0,0 +1,16 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+import { ProductChange } from '../../../lib/product-sheet-actions';
+export interface SheetNotice {
+    text: string;
+    undo?: ProductChange['undo'];
+}
+export declare function useProductChange(product: AdminProduct, setProduct: (next: AdminProduct) => void, onChanged: () => void): {
+    apply: (change: ProductChange, text: string) => Promise<void>;
+    undo: () => Promise<void>;
+    notice: SheetNotice | null;
+    dismiss: () => void;
+    announce: (text: string) => void;
+    pending: boolean;
+    missing: ("name" | "priceCents" | "category" | "images")[] | null;
+    error: unknown;
+};

package/dist/views/products/product-toolbar.d.ts

@@ -0,0 +1,10 @@
+import { AdminProductCounts } from '@develemit/commerce-contracts';
+import { ProductFilter } from '../../lib/product-labels';
+export interface ProductToolbarProps {
+    filter: ProductFilter;
+    onFilter: (filter: ProductFilter) => void;
+    search: string;
+    onSearch: (value: string) => void;
+    counts: AdminProductCounts | undefined;
+}
+export declare function ProductToolbar({ filter, onFilter, search, onSearch, counts, }: ProductToolbarProps): import('react').JSX.Element;

package/dist/views/products/product-welcome.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { SetupStep } from '../../components/setup-checklist/setup-checklist';
+export interface ProductWelcomeProps {
+    art?: ReactNode;
+    steps?: SetupStep[];
+    onAddMany?: () => void;
+}
+export declare function ProductWelcome({ art, steps, onAddMany }: ProductWelcomeProps): import('react').JSX.Element;

package/dist/views/shipping/admin-shipping-rates.d.ts

@@ -1,4 +1,9 @@
+export interface SuggestedRate {
+    label: string;
+    amountCents: number;
+}
 export interface AdminShippingRatesProps {
+    suggestedRates?: SuggestedRate[];
     onDirtyChange?: (dirty: boolean) => void;
 }
-export declare function AdminShippingRates({ onDirtyChange }: AdminShippingRatesProps): import('react').JSX.Element;
+export declare function AdminShippingRates({ onDirtyChange, suggestedRates, }: AdminShippingRatesProps): import('react').JSX.Element;

package/package.json

@@ -1,6 +1,13 @@
 {
   "name": "@develemit/commerce-admin",
-  "version": "0.4.0",
+  "version": "0.7.0",
+  "description": "React admin UI for products, orders, discounts and shipping rates, backed by the commerce-server admin API.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/develemit/develemit-commerce.git",
+    "directory": "packages/commerce-admin"
+  },
+  "homepage": "https://github.com/develemit/develemit-commerce/blob/main/docs/getting-started.md",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -21,7 +28,8 @@
   },
   "files": [
     "dist",
-    "!**/*.tsbuildinfo"
+    "!**/*.tsbuildinfo",
+    "CHANGELOG.md"
   ],
   "nx": {
     "name": "commerce-admin",
@@ -39,7 +47,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@develemit/commerce-contracts": "0.4.0"
+    "@develemit/commerce-contracts": "0.7.0"
   },
   "devDependencies": {
     "@testing-library/user-event": "^14.6.8"