@86d-app/products 0.0.3

package/src/index.ts

@@ -0,0 +1,120 @@
+import type { Module, ModuleConfig } from "@86d-app/core";
+import { adminEndpoints } from "./admin/endpoints";
+import { controllers } from "./controllers";
+import {
+	toMarkdownCollectionDetail,
+	toMarkdownCollectionListing,
+	toMarkdownProductDetail,
+	toMarkdownProductListing,
+} from "./markdown";
+import { productsSchema } from "./schema";
+import { storeEndpoints } from "./store/endpoints";
+
+export interface ProductsOptions extends ModuleConfig {
+	/**
+	 * Default number of products per page
+	 * @default 20
+	 */
+	defaultPageSize?: number;
+	/**
+	 * Maximum number of products per page
+	 * @default 100
+	 */
+	maxPageSize?: number;
+	/**
+	 * Enable inventory tracking by default
+	 * @default true
+	 */
+	trackInventory?: boolean;
+}
+
+export default function products(options?: ProductsOptions): Module {
+	return {
+		id: "products",
+		version: "0.0.1",
+		schema: productsSchema,
+		exports: {
+			read: [
+				"productTitle",
+				"productPrice",
+				"productSlug",
+				"productStatus",
+				"categoryName",
+				"categorySlug",
+				"collectionName",
+				"collectionSlug",
+			],
+		},
+		events: {
+			emits: ["product.created", "product.updated", "product.deleted"],
+		},
+		controllers,
+		options,
+		endpoints: {
+			store: storeEndpoints,
+			admin: adminEndpoints,
+		},
+		search: { store: "/products/store-search" },
+		admin: {
+			pages: [
+				{
+					path: "/admin/products",
+					component: "ProductList",
+					label: "Products",
+					icon: "Package",
+					group: "Catalog",
+				},
+				{
+					path: "/admin/products/new",
+					component: "ProductNew",
+				},
+				{
+					path: "/admin/products/:id/edit",
+					component: "ProductEdit",
+				},
+				{
+					path: "/admin/products/:id",
+					component: "ProductDetail",
+				},
+				{
+					path: "/admin/categories",
+					component: "CategoriesAdmin",
+					label: "Categories",
+					icon: "SquaresFour",
+					group: "Catalog",
+				},
+				{
+					path: "/admin/collections",
+					component: "CollectionsAdmin",
+					label: "Collections",
+					icon: "Stack",
+					group: "Catalog",
+				},
+			],
+		},
+		store: {
+			pages: [
+				{
+					path: "/products",
+					component: "ProductListing",
+					toMarkdown: toMarkdownProductListing,
+				},
+				{
+					path: "/products/:slug",
+					component: "ProductDetail",
+					toMarkdown: toMarkdownProductDetail,
+				},
+				{
+					path: "/collections",
+					component: "CollectionGrid",
+					toMarkdown: toMarkdownCollectionListing,
+				},
+				{
+					path: "/collections/:slug",
+					component: "CollectionDetail",
+					toMarkdown: toMarkdownCollectionDetail,
+				},
+			],
+		},
+	};
+}

package/src/markdown.ts

@@ -0,0 +1,150 @@
+import type { ModuleContext } from "@86d-app/core";
+import type {
+	Collection,
+	CollectionWithProducts,
+	Product,
+	ProductWithVariants,
+} from "./controllers";
+
+function formatPrice(cents: number): string {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+	}).format(cents / 100);
+}
+
+/** Build minimal endpoint-like ctx for controller calls. */
+function withQuery(ctx: ModuleContext, query: Record<string, string>) {
+	return { context: ctx, query, params: {} };
+}
+
+function withParams(ctx: ModuleContext, params: Record<string, string>) {
+	return { context: ctx, query: {}, params };
+}
+
+export async function toMarkdownProductListing(
+	ctx: ModuleContext,
+	_params: Record<string, string>,
+): Promise<string | null> {
+	const result = await (
+		ctx.controllers as {
+			product: {
+				list: (ctx: unknown) => Promise<{ products?: ProductWithVariants[] }>;
+			};
+		}
+	).product.list(withQuery(ctx, { limit: "100", status: "active" }));
+	const products = (result?.products ?? []) as ProductWithVariants[];
+	let md = `# Products\n\n`;
+	if (products.length === 0) {
+		md += "No products yet.\n";
+		return md;
+	}
+	for (const p of products) {
+		md += `- [${p.name}](/products/${p.slug}) — ${formatPrice(p.price)}\n`;
+	}
+	return md;
+}
+
+export async function toMarkdownProductDetail(
+	ctx: ModuleContext,
+	params: Record<string, string>,
+): Promise<string | null> {
+	const slug = params.slug;
+	if (!slug) return null;
+
+	const bySlug = (await (
+		ctx.controllers as {
+			product: { getBySlug: (ctx: unknown) => Promise<Product | null> };
+		}
+	).product.getBySlug(withQuery(ctx, { slug }))) as Product | null;
+	if (!bySlug || bySlug.status !== "active") return null;
+
+	const product = (await (
+		ctx.controllers as {
+			product: {
+				getWithVariants: (ctx: unknown) => Promise<ProductWithVariants | null>;
+			};
+		}
+	).product.getWithVariants(
+		withParams(ctx, { id: bySlug.id }),
+	)) as ProductWithVariants | null;
+	if (!product) return null;
+
+	let md = `# ${product.name}\n\n`;
+	if (product.shortDescription) {
+		md += `${product.shortDescription}\n\n`;
+	}
+	if (product.description) {
+		md += `${product.description}\n\n`;
+	}
+	md += `## Price\n\n${formatPrice(product.price)}\n\n`;
+	if (product.images?.length > 0) {
+		md += `## Images\n\n`;
+		for (const img of product.images) {
+			md += `![${product.name}](${img})\n`;
+		}
+	}
+	md += `\n[View product](/products/${product.slug})\n`;
+	return md;
+}
+
+export async function toMarkdownCollectionListing(
+	ctx: ModuleContext,
+	_params: Record<string, string>,
+): Promise<string | null> {
+	const result = await (
+		ctx.controllers as {
+			collection: {
+				list: (ctx: unknown) => Promise<{ collections?: Collection[] }>;
+			};
+		}
+	).collection.list(withQuery(ctx, { limit: "100", visible: "true" }));
+	const collections = (result?.collections ?? []) as Collection[];
+	let md = `# Collections\n\n`;
+	if (collections.length === 0) {
+		md += "No collections yet.\n";
+		return md;
+	}
+	for (const c of collections) {
+		md += `- [${c.name}](/collections/${c.slug})\n`;
+	}
+	return md;
+}
+
+export async function toMarkdownCollectionDetail(
+	ctx: ModuleContext,
+	params: Record<string, string>,
+): Promise<string | null> {
+	const slug = params.slug;
+	if (!slug) return null;
+
+	const bySlug = (await (
+		ctx.controllers as {
+			collection: { getBySlug: (ctx: unknown) => Promise<Collection | null> };
+		}
+	).collection.getBySlug(withQuery(ctx, { slug }))) as Collection | null;
+	if (!bySlug || !bySlug.isVisible) return null;
+
+	const collection = (await (
+		ctx.controllers as {
+			collection: {
+				getWithProducts: (
+					ctx: unknown,
+				) => Promise<CollectionWithProducts | null>;
+			};
+		}
+	).collection.getWithProducts(
+		withParams(ctx, { id: bySlug.id }),
+	)) as CollectionWithProducts | null;
+	if (!collection) return null;
+
+	let md = `# ${collection.name}\n\n`;
+	if (collection.description) {
+		md += `${collection.description}\n\n`;
+	}
+	if (collection.image) {
+		md += `![${collection.name}](${collection.image})\n\n`;
+	}
+	md += `[View collection](/collections/${collection.slug})\n`;
+	return md;
+}

package/src/mdx.d.ts

@@ -0,0 +1,5 @@
+declare module "*.mdx" {
+	import type { ComponentType } from "react";
+	const Component: ComponentType<Record<string, unknown>>;
+	export default Component;
+}

package/src/schema.ts

@@ -0,0 +1,352 @@
+import type { ModuleSchema } from "@86d-app/core";
+
+export const productsSchema = {
+	product: {
+		fields: {
+			id: {
+				type: "string",
+				required: true,
+			},
+			name: {
+				type: "string",
+				required: true,
+			},
+			slug: {
+				type: "string",
+				required: true,
+				unique: true,
+			},
+			description: {
+				type: "string",
+				required: false,
+			},
+			shortDescription: {
+				type: "string",
+				required: false,
+			},
+			price: {
+				type: "number",
+				required: true,
+			},
+			compareAtPrice: {
+				type: "number",
+				required: false,
+			},
+			costPrice: {
+				type: "number",
+				required: false,
+			},
+			sku: {
+				type: "string",
+				required: false,
+				unique: true,
+			},
+			barcode: {
+				type: "string",
+				required: false,
+			},
+			inventory: {
+				type: "number",
+				required: true,
+				defaultValue: 0,
+			},
+			trackInventory: {
+				type: "boolean",
+				required: true,
+				defaultValue: true,
+			},
+			allowBackorder: {
+				type: "boolean",
+				required: true,
+				defaultValue: false,
+			},
+			status: {
+				type: ["draft", "active", "archived"],
+				required: true,
+				defaultValue: "draft",
+			},
+			categoryId: {
+				type: "string",
+				required: false,
+				references: {
+					model: "category",
+					field: "id",
+					onDelete: "set null",
+				},
+			},
+			images: {
+				type: "json",
+				required: false,
+				defaultValue: [],
+			},
+			tags: {
+				type: "json",
+				required: false,
+				defaultValue: [],
+			},
+			metadata: {
+				type: "json",
+				required: false,
+				defaultValue: {},
+			},
+			weight: {
+				type: "number",
+				required: false,
+			},
+			weightUnit: {
+				type: ["kg", "lb", "oz", "g"],
+				required: false,
+				defaultValue: "kg",
+			},
+			isFeatured: {
+				type: "boolean",
+				required: true,
+				defaultValue: false,
+			},
+			createdAt: {
+				type: "date",
+				required: true,
+				defaultValue: () => new Date(),
+			},
+			updatedAt: {
+				type: "date",
+				required: true,
+				defaultValue: () => new Date(),
+				onUpdate: () => new Date(),
+			},
+		},
+	},
+	productVariant: {
+		fields: {
+			id: {
+				type: "string",
+				required: true,
+			},
+			productId: {
+				type: "string",
+				required: true,
+				references: {
+					model: "product",
+					field: "id",
+					onDelete: "cascade",
+				},
+			},
+			name: {
+				type: "string",
+				required: true,
+			},
+			sku: {
+				type: "string",
+				required: false,
+				unique: true,
+			},
+			barcode: {
+				type: "string",
+				required: false,
+			},
+			price: {
+				type: "number",
+				required: true,
+			},
+			compareAtPrice: {
+				type: "number",
+				required: false,
+			},
+			costPrice: {
+				type: "number",
+				required: false,
+			},
+			inventory: {
+				type: "number",
+				required: true,
+				defaultValue: 0,
+			},
+			options: {
+				type: "json",
+				required: true,
+				defaultValue: {},
+			},
+			images: {
+				type: "json",
+				required: false,
+				defaultValue: [],
+			},
+			weight: {
+				type: "number",
+				required: false,
+			},
+			weightUnit: {
+				type: ["kg", "lb", "oz", "g"],
+				required: false,
+			},
+			position: {
+				type: "number",
+				required: true,
+				defaultValue: 0,
+			},
+			createdAt: {
+				type: "date",
+				required: true,
+				defaultValue: () => new Date(),
+			},
+			updatedAt: {
+				type: "date",
+				required: true,
+				defaultValue: () => new Date(),
+				onUpdate: () => new Date(),
+			},
+		},
+	},
+	category: {
+		fields: {
+			id: {
+				type: "string",
+				required: true,
+			},
+			name: {
+				type: "string",
+				required: true,
+			},
+			slug: {
+				type: "string",
+				required: true,
+				unique: true,
+			},
+			description: {
+				type: "string",
+				required: false,
+			},
+			parentId: {
+				type: "string",
+				required: false,
+				references: {
+					model: "category",
+					field: "id",
+					onDelete: "set null",
+				},
+			},
+			image: {
+				type: "string",
+				required: false,
+			},
+			position: {
+				type: "number",
+				required: true,
+				defaultValue: 0,
+			},
+			isVisible: {
+				type: "boolean",
+				required: true,
+				defaultValue: true,
+			},
+			metadata: {
+				type: "json",
+				required: false,
+				defaultValue: {},
+			},
+			createdAt: {
+				type: "date",
+				required: true,
+				defaultValue: () => new Date(),
+			},
+			updatedAt: {
+				type: "date",
+				required: true,
+				defaultValue: () => new Date(),
+				onUpdate: () => new Date(),
+			},
+		},
+	},
+	collection: {
+		fields: {
+			id: {
+				type: "string",
+				required: true,
+			},
+			name: {
+				type: "string",
+				required: true,
+			},
+			slug: {
+				type: "string",
+				required: true,
+				unique: true,
+			},
+			description: {
+				type: "string",
+				required: false,
+			},
+			image: {
+				type: "string",
+				required: false,
+			},
+			isFeatured: {
+				type: "boolean",
+				required: true,
+				defaultValue: false,
+			},
+			isVisible: {
+				type: "boolean",
+				required: true,
+				defaultValue: true,
+			},
+			position: {
+				type: "number",
+				required: true,
+				defaultValue: 0,
+			},
+			metadata: {
+				type: "json",
+				required: false,
+				defaultValue: {},
+			},
+			createdAt: {
+				type: "date",
+				required: true,
+				defaultValue: () => new Date(),
+			},
+			updatedAt: {
+				type: "date",
+				required: true,
+				defaultValue: () => new Date(),
+				onUpdate: () => new Date(),
+			},
+		},
+	},
+	collectionProduct: {
+		fields: {
+			id: {
+				type: "string",
+				required: true,
+			},
+			collectionId: {
+				type: "string",
+				required: true,
+				references: {
+					model: "collection",
+					field: "id",
+					onDelete: "cascade",
+				},
+			},
+			productId: {
+				type: "string",
+				required: true,
+				references: {
+					model: "product",
+					field: "id",
+					onDelete: "cascade",
+				},
+			},
+			position: {
+				type: "number",
+				required: true,
+				defaultValue: 0,
+			},
+			createdAt: {
+				type: "date",
+				required: true,
+				defaultValue: () => new Date(),
+			},
+		},
+	},
+} satisfies ModuleSchema;

package/src/state.ts

@@ -0,0 +1,84 @@
+import { makeAutoObservable } from "@86d-app/core/state";
+
+export type SortField = "name" | "price" | "createdAt";
+export type SortOrder = "asc" | "desc";
+export type ViewMode = "grid" | "list";
+
+/**
+ * Products UI state — shared across components via MobX.
+ * Persists active filters, sort order, and view mode across navigations.
+ */
+export const productsState = makeAutoObservable({
+	/** Active category filter (empty = all categories) */
+	activeCategory: "",
+	/** Search query */
+	searchQuery: "",
+	/** Sort field */
+	sortField: "createdAt" as SortField,
+	/** Sort direction */
+	sortOrder: "desc" as SortOrder,
+	/** Grid vs list view */
+	viewMode: "grid" as ViewMode,
+	/** Price range filter (in display dollars, not cents) */
+	minPrice: "",
+	maxPrice: "",
+	/** Stock filter */
+	inStockOnly: false,
+	/** Tag filter */
+	activeTag: "",
+
+	setCategory(category: string) {
+		this.activeCategory = category;
+	},
+
+	setSearchQuery(query: string) {
+		this.searchQuery = query;
+	},
+
+	setSortField(field: SortField) {
+		this.sortField = field;
+	},
+
+	setSortOrder(order: SortOrder) {
+		this.sortOrder = order;
+	},
+
+	setViewMode(mode: ViewMode) {
+		this.viewMode = mode;
+	},
+
+	setPriceRange(min: string, max: string) {
+		this.minPrice = min;
+		this.maxPrice = max;
+	},
+
+	setInStockOnly(v: boolean) {
+		this.inStockOnly = v;
+	},
+
+	setActiveTag(tag: string) {
+		this.activeTag = tag;
+	},
+
+	clearFilters() {
+		this.activeCategory = "";
+		this.searchQuery = "";
+		this.minPrice = "";
+		this.maxPrice = "";
+		this.inStockOnly = false;
+		this.activeTag = "";
+	},
+
+	get hasActiveFilters(): boolean {
+		return (
+			!!this.searchQuery ||
+			!!this.activeCategory ||
+			!!this.minPrice ||
+			!!this.maxPrice ||
+			this.inStockOnly ||
+			!!this.activeTag
+		);
+	},
+});
+
+export type ProductsState = typeof productsState;