create-freakpunch 0.1.0 → 0.2.0

package/template/src/modules/products/api/products.service.ts

@@ -1,84 +0,0 @@
-import { createMockCollection, delay, notFound, paginate } from '@/core/api/mock'
-import type { ListParams, Paginated } from '@/core/api/types'
-import { productFormSchema, type Product, type ProductFilters, type ProductInput, type ProductStats } from '../types'
-import { createProductSeed } from './products.mock'
-
-/**
- * The only contract screens depend on. To connect a real backend, implement
- * this interface with `http` from '@/core/api/http' and export it below, e.g.
- *
- *   const restProductsService: ProductsService = {
- *     list: (p) => http.get('/products', { query: toQuery(p) }),
- *     get: (id) => http.get(`/products/${id}`),
- *     ...
- *   }
- */
-export interface ProductsService {
-  list(params: ListParams<ProductFilters>): Promise<Paginated<Product>>
-  get(id: string): Promise<Product>
-  create(input: ProductInput): Promise<Product>
-  update(id: string, input: ProductInput): Promise<Product>
-  remove(id: string): Promise<void>
-  stats(): Promise<ProductStats>
-}
-
-const LOW_STOCK = 10
-
-function createMockProductsService(): ProductsService {
-  const db = createMockCollection('products', createProductSeed)
-  const find = (id: string) => db.find(id) ?? notFound('Product', id)
-  const nextId = () => `p_${String(Math.max(0, ...db.all().map((p) => Number(p.id.slice(2)))) + 1).padStart(4, '0')}`
-
-  return {
-    async list(params) {
-      await delay()
-      const { status, category } = params.filters ?? {}
-      const filtered = db.all().filter(
-        (p) => (!status || p.status === status) && (!category || p.category === category),
-      )
-      return paginate(filtered, params, ['name', 'sku', 'category'])
-    },
-
-    async get(id) {
-      await delay(150, 350)
-      return find(id)
-    },
-
-    async create(input) {
-      await delay()
-      const data = productFormSchema.parse(input)
-      const now = new Date().toISOString()
-      const product: Product = { ...data, id: nextId(), createdAt: now, updatedAt: now }
-      db.save([product, ...db.all()])
-      return product
-    },
-
-    async update(id, input) {
-      await delay()
-      const data = productFormSchema.parse(input)
-      const updated: Product = { ...find(id), ...data, updatedAt: new Date().toISOString() }
-      db.save(db.all().map((p) => (p.id === id ? updated : p)))
-      return updated
-    },
-
-    async remove(id) {
-      await delay()
-      find(id)
-      db.save(db.all().filter((p) => p.id !== id))
-    },
-
-    async stats() {
-      await delay(150, 300)
-      const rows = db.all()
-      return {
-        total: rows.length,
-        active: rows.filter((p) => p.status === 'active').length,
-        lowStock: rows.filter((p) => p.status === 'active' && p.stock < LOW_STOCK).length,
-        inventoryValue: rows.reduce((sum, p) => sum + p.price * p.stock, 0),
-      }
-    },
-  }
-}
-
-export const productsService: ProductsService = createMockProductsService()
-export { LOW_STOCK }

package/template/src/modules/products/components/product-status.tsx

@@ -1,21 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { StatusBadge, type StatusTone } from '@/core/components/status-badge'
-import { useFormat } from '@/core/i18n/use-format'
-import { LOW_STOCK } from '../api/products.service'
-import type { ProductStatus } from '../types'
-
-const tones: Record<ProductStatus, StatusTone> = { active: 'success', draft: 'neutral', archived: 'warning' }
-
-export function ProductStatusBadge({ status }: { status: ProductStatus }) {
-  const { t } = useTranslation('products')
-  return <StatusBadge tone={tones[status]}>{t(`status.${status}`)}</StatusBadge>
-}
-
-export function StockLevel({ stock }: { stock: number }) {
-  const { t } = useTranslation('products')
-  const fmt = useFormat()
-  if (stock === 0) return <span className="text-danger">{t('stock.out')}</span>
-  if (stock < LOW_STOCK) return <span className="text-warning">{t('stock.left', { count: stock })}</span>
-  return <span>{fmt.number(stock)}</span>
-}

package/template/src/modules/products/hooks.ts

@@ -1,73 +0,0 @@
-import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-
-import type { ListParams } from '@/core/api/types'
-import { productsService } from './api/products.service'
-import type { Product, ProductFilters, ProductInput } from './types'
-
-/** Query keys: invalidate `productKeys.all` after any write. */
-export const productKeys = {
-  all: ['products'] as const,
-  list: (params: ListParams<ProductFilters>) => [...productKeys.all, 'list', params] as const,
-  detail: (id: string) => [...productKeys.all, 'detail', id] as const,
-  stats: () => [...productKeys.all, 'stats'] as const,
-}
-
-export function useProducts(params: ListParams<ProductFilters>) {
-  return useQuery({
-    queryKey: productKeys.list(params),
-    queryFn: () => productsService.list(params),
-    placeholderData: keepPreviousData,
-  })
-}
-
-export function useProduct(id: string | undefined) {
-  return useQuery({
-    queryKey: productKeys.detail(id ?? ''),
-    queryFn: () => productsService.get(id!),
-    enabled: Boolean(id),
-  })
-}
-
-/** Every row matching the current search and filters, for CSV export. */
-export function useExportProducts(params: ListParams<ProductFilters>) {
-  return async () => (await productsService.list({ ...params, page: 1, pageSize: 10_000 })).items
-}
-
-export function useProductStats() {
-  return useQuery({ queryKey: productKeys.stats(), queryFn: () => productsService.stats() })
-}
-
-/** Sidebar badge: active products running low on stock. */
-export function useLowStockCount() {
-  return useProductStats().data?.lowStock
-}
-
-export function useCreateProduct() {
-  const qc = useQueryClient()
-  return useMutation({
-    mutationFn: (input: ProductInput) => productsService.create(input),
-    onSuccess: () => qc.invalidateQueries({ queryKey: productKeys.all }),
-  })
-}
-
-export function useUpdateProduct(id: string) {
-  const qc = useQueryClient()
-  return useMutation({
-    mutationFn: (input: ProductInput) => productsService.update(id, input),
-    onSuccess: (product: Product) => {
-      qc.setQueryData(productKeys.detail(id), product)
-      return qc.invalidateQueries({ queryKey: productKeys.all })
-    },
-  })
-}
-
-export function useDeleteProduct() {
-  const qc = useQueryClient()
-  return useMutation({
-    mutationFn: (id: string) => productsService.remove(id),
-    onSuccess: (_, id) => {
-      qc.removeQueries({ queryKey: productKeys.detail(id) })
-      return qc.invalidateQueries({ queryKey: productKeys.all })
-    },
-  })
-}

package/template/src/modules/products/index.ts

@@ -1,50 +0,0 @@
-import { Package, PackagePlus } from 'lucide-react'
-
-import { lazyPage } from '@/core/modules/lazy-page'
-import type { AppModule } from '@/core/modules/types'
-import { useLowStockCount } from './hooks'
-
-export const productsModule: AppModule = {
-  id: 'products',
-  nav: [
-    {
-      label: 'products:nav',
-      path: '/app/products',
-      icon: Package,
-      group: 'catalog',
-      useBadge: useLowStockCount,
-      permission: 'products.view',
-    },
-  ],
-  quickActions: [
-    {
-      label: 'products:quickActions.new',
-      description: 'products:quickActions.newDescription',
-      path: '/app/products/new',
-      icon: PackagePlus,
-      permission: 'products.create',
-    },
-  ],
-  routes: [
-    {
-      path: 'products',
-      handle: { crumb: 'products:crumbs.list', permission: 'products.view' },
-      children: [
-        { index: true, lazy: lazyPage(() => import('./pages/products-list-page')) },
-        { path: 'new', handle: { crumb: 'products:crumbs.new', permission: 'products.create' }, lazy: lazyPage(() => import('./pages/product-form-page')) },
-        {
-          path: ':id',
-          handle: { crumb: 'products:crumbs.details' },
-          children: [
-            { index: true, lazy: lazyPage(() => import('./pages/product-detail-page')) },
-            {
-              path: 'edit',
-              handle: { crumb: 'products:crumbs.edit', permission: 'products.edit' },
-              lazy: lazyPage(() => import('./pages/product-form-page')),
-            },
-          ],
-        },
-      ],
-    },
-  ],
-}

package/template/src/modules/products/locales/en.ts

@@ -1,78 +0,0 @@
-/** Products module strings (namespace `products`). */
-export default {
-  nav: 'Products',
-  crumbs: { list: 'Products', new: 'New', details: 'Details', edit: 'Edit' },
-  quickActions: { new: 'New product', newDescription: 'Add to your catalog' },
-  noun: 'products',
-  status: { active: 'Active', draft: 'Draft', archived: 'Archived' },
-  categories: { Lighting: 'Lighting', Furniture: 'Furniture', Decor: 'Decor', Kitchen: 'Kitchen', Textiles: 'Textiles' },
-  stock: { out: 'Out of stock', left: '{{count}} left' },
-  list: {
-    title: 'Products',
-    description: 'Manage your catalog, pricing and stock.',
-    new: 'New product',
-    export: 'Export CSV',
-    search: 'Search name or SKU…',
-    filterStatus: 'Status',
-    allStatuses: 'All statuses',
-    filterCategory: 'Category',
-    allCategories: 'All categories',
-    columns: { product: 'Product', category: 'Category', status: 'Status', stock: 'Stock', price: 'Price', updated: 'Updated' },
-    copySku: 'Copy SKU',
-    skuCopied: 'SKU copied',
-    noMatchesTitle: 'No matching products',
-    noMatchesDescription: 'Try a different search or clear the filters.',
-    emptyTitle: 'No products yet',
-    emptyDescription: 'Create your first product to start selling.',
-  },
-  delete: {
-    title: 'Delete “{{name}}”?',
-    description: 'This product will be removed from your catalog. This cannot be undone.',
-    deleting: 'Deleting…',
-    deleted: '{{name}} deleted',
-    bulkTitle_one: 'Delete {{count}} product?',
-    bulkTitle_other: 'Delete {{count}} products?',
-    bulkDescription: 'They will be removed from your catalog. This cannot be undone.',
-    bulkDeleted_one: '{{count}} product deleted',
-    bulkDeleted_other: '{{count}} products deleted',
-  },
-  detail: {
-    back: 'Back to products',
-    overview: 'Overview',
-    summary: 'Summary',
-    noDescription: 'No description.',
-    fields: { status: 'Status', price: 'Price', stock: 'Stock', category: 'Category', created: 'Created', updated: 'Updated' },
-  },
-  form: {
-    newTitle: 'New product',
-    editTitle: 'Edit {{name}}',
-    newDescription: 'Add a product to your catalog.',
-    editDescription: 'Update details, pricing and inventory.',
-    create: 'Create product',
-    created: 'Product created',
-    saved: 'Changes saved',
-    saveFailed: 'Could not save product',
-    sections: {
-      details: 'Details',
-      detailsDescription: 'Name and description shown to customers.',
-      organization: 'Organization',
-      organizationDescription: 'How the product is grouped and whether it is visible.',
-      pricing: 'Pricing & inventory',
-    },
-    fields: {
-      name: 'Name',
-      description: 'Description',
-      descriptionHint: 'Up to 500 characters.',
-      category: 'Category',
-      status: 'Status',
-      sku: 'SKU',
-      price: 'Price',
-      stock: 'Stock',
-    },
-    errors: {
-      sku: 'Use 3–20 uppercase letters, numbers or dashes',
-      price: 'Enter a price',
-      stock: 'Enter a stock level',
-    },
-  },
-}

package/template/src/modules/products/locales/tr.ts

@@ -1,82 +0,0 @@
-import type { Messages } from '@/core/i18n/types'
-import type en from './en'
-
-const products: Messages<typeof en> = {
-  nav: 'Ürünler',
-  crumbs: { list: 'Ürünler', new: 'Yeni', details: 'Ayrıntılar', edit: 'Düzenle' },
-  quickActions: { new: 'Yeni ürün', newDescription: 'Kataloğunuza ekleyin' },
-  noun: 'ürün',
-  status: { active: 'Aktif', draft: 'Taslak', archived: 'Arşivlendi' },
-  categories: { Lighting: 'Aydınlatma', Furniture: 'Mobilya', Decor: 'Dekorasyon', Kitchen: 'Mutfak', Textiles: 'Tekstil' },
-  stock: { out: 'Stokta yok', left: '{{count}} adet kaldı' },
-  list: {
-    title: 'Ürünler',
-    description: 'Kataloğunuzu, fiyatlarınızı ve stoklarınızı yönetin.',
-    new: 'Yeni ürün',
-    export: 'CSV olarak dışa aktar',
-    search: 'Ad veya SKU ara…',
-    filterStatus: 'Durum',
-    allStatuses: 'Tüm durumlar',
-    filterCategory: 'Kategori',
-    allCategories: 'Tüm kategoriler',
-    columns: { product: 'Ürün', category: 'Kategori', status: 'Durum', stock: 'Stok', price: 'Fiyat', updated: 'Güncellendi' },
-    copySku: 'SKU’yu kopyala',
-    skuCopied: 'SKU kopyalandı',
-    noMatchesTitle: 'Eşleşen ürün yok',
-    noMatchesDescription: 'Farklı bir arama deneyin veya filtreleri temizleyin.',
-    emptyTitle: 'Henüz ürün yok',
-    emptyDescription: 'Satışa başlamak için ilk ürününüzü oluşturun.',
-  },
-  delete: {
-    title: '“{{name}}” silinsin mi?',
-    description: 'Bu ürün kataloğunuzdan kaldırılacak. Bu işlem geri alınamaz.',
-    deleting: 'Siliniyor…',
-    deleted: '{{name}} silindi',
-    bulkTitle_one: '{{count}} ürün silinsin mi?',
-    bulkTitle_other: '{{count}} ürün silinsin mi?',
-    bulkDescription: 'Kataloğunuzdan kaldırılacaklar. Bu işlem geri alınamaz.',
-    bulkDeleted_one: '{{count}} ürün silindi',
-    bulkDeleted_other: '{{count}} ürün silindi',
-  },
-  detail: {
-    back: 'Ürünlere dön',
-    overview: 'Genel bakış',
-    summary: 'Özet',
-    noDescription: 'Açıklama yok.',
-    fields: { status: 'Durum', price: 'Fiyat', stock: 'Stok', category: 'Kategori', created: 'Oluşturuldu', updated: 'Güncellendi' },
-  },
-  form: {
-    newTitle: 'Yeni ürün',
-    editTitle: '{{name}} ürününü düzenle',
-    newDescription: 'Kataloğunuza bir ürün ekleyin.',
-    editDescription: 'Ayrıntıları, fiyatı ve stoğu güncelleyin.',
-    create: 'Ürün oluştur',
-    created: 'Ürün oluşturuldu',
-    saved: 'Değişiklikler kaydedildi',
-    saveFailed: 'Ürün kaydedilemedi',
-    sections: {
-      details: 'Ayrıntılar',
-      detailsDescription: 'Müşterilere gösterilen ad ve açıklama.',
-      organization: 'Düzenleme',
-      organizationDescription: 'Ürünün nasıl gruplandığı ve görünür olup olmadığı.',
-      pricing: 'Fiyat ve stok',
-    },
-    fields: {
-      name: 'Ad',
-      description: 'Açıklama',
-      descriptionHint: 'En fazla 500 karakter.',
-      category: 'Kategori',
-      status: 'Durum',
-      sku: 'SKU',
-      price: 'Fiyat',
-      stock: 'Stok',
-    },
-    errors: {
-      sku: '3–20 büyük harf, rakam veya tire kullanın',
-      price: 'Bir fiyat girin',
-      stock: 'Bir stok miktarı girin',
-    },
-  },
-}
-
-export default products

package/template/src/modules/products/pages/product-form-page.tsx

@@ -1,211 +0,0 @@
-import { Controller, useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useTranslation } from 'react-i18next'
-import { useNavigate, useParams } from 'react-router'
-import { toast } from 'sonner'
-
-import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
-import { Input } from '@/components/ui/input'
-import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '@/components/ui/input-group'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Textarea } from '@/components/ui/textarea'
-import { ButtonLink } from '@/core/components/button-link'
-import { FormFieldError } from '@/core/components/form-error'
-import { FormLayout, FormSection } from '@/core/components/form-page'
-import { Page } from '@/core/components/page'
-import { ErrorState, LoadingState } from '@/core/components/states'
-import { useFormat } from '@/core/i18n/use-format'
-import { useCreateProduct, useProduct, useUpdateProduct } from '../hooks'
-import { productCategories, productFormSchema, productStatuses, type Product, type ProductInput } from '../types'
-
-function BackToList() {
-  const { t } = useTranslation(['products', 'common'])
-  return (
-    <ButtonLink to="/app/products" variant="outline">
-      {t('detail.back')}
-    </ButtonLink>
-  )
-}
-
-const emptyProduct: ProductInput = {
-  name: '',
-  sku: '',
-  category: 'Lighting',
-  price: 0,
-  stock: 0,
-  status: 'draft',
-  description: '',
-}
-
-const toInput = ({ name, sku, category, price, stock, status, description }: Product): ProductInput => ({
-  name,
-  sku,
-  category,
-  price,
-  stock,
-  status,
-  description,
-})
-
-/** /app/products/new and /app/products/:id/edit */
-export default function ProductFormPage() {
-  const { id } = useParams()
-  const query = useProduct(id)
-
-  if (!id) return <ProductForm />
-  if (query.isPending) return <LoadingState />
-  if (query.error) return <ErrorState error={query.error} onRetry={() => query.refetch()} notFoundAction={<BackToList />} />
-  return <ProductForm key={query.data.id} product={query.data} />
-}
-
-function ProductForm({ product }: { product?: Product }) {
-  const navigate = useNavigate()
-  const create = useCreateProduct()
-  const update = useUpdateProduct(product?.id ?? '')
-  const { t } = useTranslation(['products', 'common'])
-  const fmt = useFormat()
-  const isEdit = Boolean(product)
-
-  const form = useForm<ProductInput>({
-    resolver: zodResolver(productFormSchema),
-    defaultValues: product ? toInput(product) : emptyProduct,
-  })
-  const { register, control, handleSubmit, formState } = form
-  const { errors } = formState
-
-  const onSubmit = handleSubmit(async (values) => {
-    try {
-      const saved = isEdit ? await update.mutateAsync(values) : await create.mutateAsync(values)
-      toast.success(isEdit ? t('form.saved') : t('form.created'), { description: saved.name })
-      navigate(`/app/products/${saved.id}`)
-    } catch (e) {
-      toast.error(t('form.saveFailed'), { description: e instanceof Error ? e.message : undefined })
-    }
-  })
-
-  const categoryItems = productCategories.map((c) => ({ value: c, label: t(`categories.${c}`) }))
-  const statusItems = productStatuses.map((s) => ({ value: s, label: t(`status.${s}`) }))
-
-  return (
-    <Page
-      title={isEdit ? t('form.editTitle', { name: product!.name }) : t('form.newTitle')}
-      description={isEdit ? t('form.editDescription') : t('form.newDescription')}
-    >
-      <FormLayout
-        onSubmit={onSubmit}
-        submitLabel={isEdit ? t('common:actions.saveChanges') : t('form.create')}
-        isSubmitting={formState.isSubmitting}
-        isDirty={!isEdit || formState.isDirty}
-        onCancel={() => navigate(-1)}
-      >
-        <FormSection title={t('form.sections.details')} description={t('form.sections.detailsDescription')}>
-          <Field data-invalid={!!errors.name}>
-            <FieldLabel htmlFor="name">{t('form.fields.name')}</FieldLabel>
-            <Input id="name" autoFocus={!isEdit} aria-invalid={!!errors.name} {...register('name')} />
-            <FormFieldError error={errors.name} />
-          </Field>
-          <Field data-invalid={!!errors.description}>
-            <FieldLabel htmlFor="description">{t('form.fields.description')}</FieldLabel>
-            <Textarea id="description" rows={4} aria-invalid={!!errors.description} {...register('description')} />
-            <FieldDescription>{t('form.fields.descriptionHint')}</FieldDescription>
-            <FormFieldError error={errors.description} />
-          </Field>
-        </FormSection>
-
-        <FormSection title={t('form.sections.organization')} description={t('form.sections.organizationDescription')}>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <Field data-invalid={!!errors.category}>
-              <FieldLabel htmlFor="category">{t('form.fields.category')}</FieldLabel>
-              <Controller
-                control={control}
-                name="category"
-                render={({ field }) => (
-                  <Select items={categoryItems} value={field.value} onValueChange={(v) => v && field.onChange(v)}>
-                    <SelectTrigger id="category" className="w-full" onBlur={field.onBlur}>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {categoryItems.map((c) => (
-                        <SelectItem key={c.value} value={c.value}>
-                          {c.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-              <FormFieldError error={errors.category} />
-            </Field>
-            <Field data-invalid={!!errors.status}>
-              <FieldLabel htmlFor="status">{t('form.fields.status')}</FieldLabel>
-              <Controller
-                control={control}
-                name="status"
-                render={({ field }) => (
-                  <Select items={statusItems} value={field.value} onValueChange={(v) => v && field.onChange(v)}>
-                    <SelectTrigger id="status" className="w-full" onBlur={field.onBlur}>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {statusItems.map((s) => (
-                        <SelectItem key={s.value} value={s.value}>
-                          {s.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-              <FormFieldError error={errors.status} />
-            </Field>
-          </div>
-          <Field data-invalid={!!errors.sku}>
-            <FieldLabel htmlFor="sku">{t('form.fields.sku')}</FieldLabel>
-            <Input
-              id="sku"
-              className="tabular-nums uppercase"
-              aria-invalid={!!errors.sku}
-              {...register('sku', { setValueAs: (v: string) => v.toUpperCase() })}
-            />
-            <FormFieldError error={errors.sku} />
-          </Field>
-        </FormSection>
-
-        <FormSection title={t('form.sections.pricing')}>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <Field data-invalid={!!errors.price}>
-              <FieldLabel htmlFor="price">{t('form.fields.price')}</FieldLabel>
-              <InputGroup>
-                <InputGroupAddon>
-                  <InputGroupText>{fmt.currencySymbol}</InputGroupText>
-                </InputGroupAddon>
-                <InputGroupInput
-                  id="price"
-                  type="number"
-                  inputMode="decimal"
-                  step="0.01"
-                  min={0}
-                  aria-invalid={!!errors.price}
-                  {...register('price', { valueAsNumber: true })}
-                />
-              </InputGroup>
-              <FormFieldError error={errors.price} />
-            </Field>
-            <Field data-invalid={!!errors.stock}>
-              <FieldLabel htmlFor="stock">{t('form.fields.stock')}</FieldLabel>
-              <Input
-                id="stock"
-                type="number"
-                inputMode="numeric"
-                min={0}
-                aria-invalid={!!errors.stock}
-                {...register('stock', { valueAsNumber: true })}
-              />
-              <FormFieldError error={errors.stock} />
-            </Field>
-          </div>
-        </FormSection>
-      </FormLayout>
-    </Page>
-  )
-}