create-freakpunch 0.1.0 → 0.2.0

package/template/src/modules/products/pages/products-list-page.tsx

@@ -1,286 +0,0 @@
-import { useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Link, useNavigate } from 'react-router'
-import { createColumnHelper, type RowSelectionState } from '@tanstack/react-table'
-import { Copy, Download, Eye, MoreHorizontal, Package, Pencil, Plus, Trash2 } from 'lucide-react'
-import { toast } from 'sonner'
-
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Can, usePermissions } from '@/core/auth/can'
-import { ButtonLink } from '@/core/components/button-link'
-import { useConfirm } from '@/core/components/confirm-dialog'
-import { DataTable } from '@/core/components/data-table/data-table'
-import type { DataTableFeatures } from '@/core/components/data-table/features'
-import { ClearFiltersButton, FilterSelect, TableSearch } from '@/core/components/data-table/toolbar'
-import { useListUrlState } from '@/core/components/data-table/use-list-url-state'
-import { Page } from '@/core/components/page'
-import { EmptyState } from '@/core/components/states'
-import { useFormat } from '@/core/i18n/use-format'
-import { downloadCsv } from '@/core/lib/csv'
-import { ProductStatusBadge, StockLevel } from '../components/product-status'
-import { useDeleteProduct, useExportProducts, useProducts } from '../hooks'
-import { productCategories, productStatuses, type Product } from '../types'
-
-const FILTER_KEYS = ['status', 'category'] as const
-const DEFAULT_SORT = { id: 'updatedAt', desc: true }
-const helper = createColumnHelper<DataTableFeatures, Product>()
-
-export default function ProductsListPage() {
-  const list = useListUrlState({ filterKeys: FILTER_KEYS, defaultSort: DEFAULT_SORT })
-  const query = useProducts(list.listParams)
-  const { mutateAsync: deleteAsync } = useDeleteProduct()
-  const confirm = useConfirm()
-  const navigate = useNavigate()
-  const { t } = useTranslation(['products', 'common'])
-  const fmt = useFormat()
-  const { can } = usePermissions()
-  const [selected, setSelected] = useState<RowSelectionState>({})
-  const exportRows = useExportProducts(list.listParams)
-
-  async function onExport() {
-    const rows = await exportRows()
-    downloadCsv(
-      'products',
-      [
-        { header: t('form.fields.name'), value: (p: Product) => p.name },
-        { header: t('form.fields.sku'), value: (p: Product) => p.sku },
-        { header: t('form.fields.status'), value: (p: Product) => t(`status.${p.status}`) },
-        { header: t('form.fields.price'), value: (p: Product) => p.price },
-        { header: t('form.fields.stock'), value: (p: Product) => p.stock },
-      ],
-      rows,
-    )
-  }
-
-  async function onBulkDelete() {
-    const ids = Object.keys(selected).filter((id) => selected[id])
-    const ok = await confirm({
-      title: t('delete.bulkTitle', { count: ids.length }),
-      description: t('delete.bulkDescription'),
-      confirmLabel: t('common:actions.delete'),
-      destructive: true,
-    })
-    if (!ok) return
-    toast.promise(Promise.all(ids.map((id) => deleteAsync(id))), {
-      loading: t('delete.deleting'),
-      success: () => {
-        setSelected({})
-        return t('delete.bulkDeleted', { count: ids.length })
-      },
-      error: (e: Error) => e.message,
-    })
-  }
-
-  const columns = useMemo(() => {
-    async function onDelete(product: Product) {
-      const ok = await confirm({
-        title: t('delete.title', { name: product.name }),
-        description: t('delete.description'),
-        confirmLabel: t('common:actions.delete'),
-        destructive: true,
-      })
-      if (!ok) return
-      toast.promise(deleteAsync(product.id), {
-        loading: t('delete.deleting'),
-        success: t('delete.deleted', { name: product.name }),
-        error: (e: Error) => e.message,
-      })
-    }
-
-    return helper.columns([
-      helper.accessor('name', {
-        header: t('list.columns.product'),
-        cell: ({ row }) => (
-          <div className="flex min-w-0 items-center gap-3">
-            <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-fill-2 text-muted-foreground">
-              <Package className="size-4" />
-            </div>
-            <div className="min-w-0">
-              <Link
-                to={row.original.id}
-                className="block truncate font-medium outline-none hover:underline focus-visible:underline"
-              >
-                {row.original.name}
-              </Link>
-              <div className="tabular-nums text-2xs text-muted-foreground">{row.original.sku}</div>
-            </div>
-          </div>
-        ),
-      }),
-      helper.accessor('category', {
-        header: t('list.columns.category'),
-        meta: { hideOnMobile: true },
-        cell: ({ getValue }) => t(`categories.${getValue()}`),
-      }),
-      helper.accessor('status', {
-        header: t('list.columns.status'),
-        cell: ({ getValue }) => <ProductStatusBadge status={getValue()} />,
-      }),
-      helper.accessor('stock', {
-        header: t('list.columns.stock'),
-        meta: { align: 'right', hideOnMobile: true },
-        cell: ({ getValue }) => <StockLevel stock={getValue()} />,
-      }),
-      helper.accessor('price', {
-        header: t('list.columns.price'),
-        meta: { align: 'right' },
-        cell: ({ getValue }) => fmt.currency(getValue()),
-      }),
-      helper.accessor('updatedAt', {
-        header: t('list.columns.updated'),
-        meta: { hideOnMobile: true, className: 'text-muted-foreground' },
-        cell: ({ getValue }) => fmt.date(getValue()),
-      }),
-      helper.display({
-        id: 'actions',
-        header: () => <span className="sr-only">{t('common:table.actions')}</span>,
-        meta: { align: 'right', className: 'w-12' },
-        cell: ({ row }) => (
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              render={
-                <Button
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={t('common:table.actionsFor', { name: row.original.name })}
-                >
-                  <MoreHorizontal />
-                </Button>
-              }
-            />
-            <DropdownMenuContent align="end" className="w-44">
-              <DropdownMenuItem onClick={() => navigate(row.original.id)}>
-                <Eye />
-                {t('common:actions.view')}
-              </DropdownMenuItem>
-              {can('products.edit') && (
-                <DropdownMenuItem onClick={() => navigate(`${row.original.id}/edit`)}>
-                  <Pencil />
-                  {t('common:actions.edit')}
-                </DropdownMenuItem>
-              )}
-              <DropdownMenuItem
-                onClick={() => {
-                  void navigator.clipboard?.writeText(row.original.sku)
-                  toast.success(t('list.skuCopied'))
-                }}
-              >
-                <Copy />
-                {t('list.copySku')}
-              </DropdownMenuItem>
-              {can('products.delete') && (
-                <>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem variant="destructive" onClick={() => onDelete(row.original)}>
-                    <Trash2 />
-                    {t('common:actions.delete')}
-                  </DropdownMenuItem>
-                </>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        ),
-      }),
-    ])
-  }, [confirm, deleteAsync, navigate, t, fmt, can])
-
-  const statusOptions = productStatuses.map((s) => ({ value: s, label: t(`status.${s}`) }))
-  const categoryOptions = productCategories.map((c) => ({ value: c, label: t(`categories.${c}`) }))
-
-  return (
-    <Page
-      title={t('list.title')}
-      description={t('list.description')}
-      actions={
-        <>
-          <Button variant="outline" onClick={onExport}>
-            <Download data-icon="inline-start" />
-            {t('list.export')}
-          </Button>
-          <Can permission="products.create">
-            <ButtonLink to="new">
-              <Plus data-icon="inline-start" />
-              {t('list.new')}
-            </ButtonLink>
-          </Can>
-        </>
-      }
-    >
-      <DataTable
-        columns={columns}
-        data={query.data?.items}
-        total={query.data?.total ?? 0}
-        getRowId={(p) => p.id}
-        pagination={list.pagination}
-        onPaginationChange={list.onPaginationChange}
-        sorting={list.sorting}
-        onSortingChange={list.onSortingChange}
-        isLoading={query.isPending}
-        isFetching={query.isFetching}
-        error={query.error}
-        onRetry={() => query.refetch()}
-        noun={t('noun')}
-        selection={
-          can('products.delete')
-            ? {
-                value: selected,
-                onChange: setSelected,
-                actions: (
-                  <Button variant="destructive" size="sm" onClick={onBulkDelete}>
-                    <Trash2 data-icon="inline-start" />
-                    {t('common:actions.delete')}
-                  </Button>
-                ),
-              }
-            : undefined
-        }
-        toolbar={
-          <>
-            <TableSearch value={list.search} onChange={list.setSearch} placeholder={t('list.search')} />
-            <FilterSelect
-              label={t('list.filterStatus')}
-              allLabel={t('list.allStatuses')}
-              value={list.filters.status}
-              options={statusOptions}
-              onChange={(v) => list.setFilter('status', v)}
-            />
-            <FilterSelect
-              label={t('list.filterCategory')}
-              allLabel={t('list.allCategories')}
-              value={list.filters.category}
-              options={categoryOptions}
-              onChange={(v) => list.setFilter('category', v)}
-            />
-            {list.hasActiveFilters && <ClearFiltersButton onClick={list.clearAll} />}
-          </>
-        }
-        empty={
-          list.hasActiveFilters ? (
-            <EmptyState
-              title={t('list.noMatchesTitle')}
-              description={t('list.noMatchesDescription')}
-              action={<ClearFiltersButton onClick={list.clearAll} />}
-            />
-          ) : (
-            <EmptyState
-              title={t('list.emptyTitle')}
-              description={t('list.emptyDescription')}
-              action={
-                <Can permission="products.create">
-                  <ButtonLink to="new">{t('list.new')}</ButtonLink>
-                </Can>
-              }
-            />
-          )
-        }
-      />
-    </Page>
-  )
-}

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

@@ -1,61 +0,0 @@
-import { z } from 'zod'
-
-import { vmsg } from '@/core/i18n/keys'
-
-export const productStatuses = ['active', 'draft', 'archived'] as const
-export type ProductStatus = (typeof productStatuses)[number]
-
-/** Category ids are stored data; labels come from `products:categories.<id>`. */
-export const productCategories = ['Lighting', 'Furniture', 'Decor', 'Kitchen', 'Textiles'] as const
-export type ProductCategory = (typeof productCategories)[number]
-
-export type Product = {
-  id: string
-  name: string
-  sku: string
-  category: ProductCategory
-  price: number
-  stock: number
-  status: ProductStatus
-  description: string
-  createdAt: string
-  updatedAt: string
-}
-
-export type ProductFilters = {
-  status?: string
-  category?: string
-}
-
-export type ProductStats = {
-  total: number
-  active: number
-  lowStock: number
-  inventoryValue: number
-}
-
-/** Validation for create/edit. Shared with the service so mock and real APIs agree. */
-export const productFormSchema = z.object({
-  name: z
-    .string()
-    .trim()
-    .min(2, vmsg('validation.minChars', { min: 2 }))
-    .max(80, vmsg('validation.maxChars', { max: 80 })),
-  sku: z
-    .string()
-    .trim()
-    .regex(/^[A-Z0-9-]{3,20}$/, vmsg('products:form.errors.sku')),
-  category: z.enum(productCategories, { error: vmsg('validation.choose') }),
-  price: z
-    .number({ error: vmsg('products:form.errors.price') })
-    .min(0, vmsg('validation.nonNegative'))
-    .max(100_000, vmsg('validation.max', { max: 100_000 })),
-  stock: z
-    .number({ error: vmsg('products:form.errors.stock') })
-    .int(vmsg('validation.integer'))
-    .min(0, vmsg('validation.nonNegative')),
-  status: z.enum(productStatuses),
-  description: z.string().trim().max(500, vmsg('validation.maxChars', { max: 500 })),
-})
-
-export type ProductInput = z.infer<typeof productFormSchema>

package/template/src/pages/dashboard/dashboard.service.ts

@@ -1,92 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-
-import { delay, seededRandom } from '@/core/api/mock'
-
-export type Range = '7d' | '30d' | '90d'
-
-export type KpiId = 'revenue' | 'orders' | 'customers' | 'conversion'
-
-export type Kpi = {
-  /** Label comes from `dashboard:kpis.<id>`. */
-  id: KpiId
-  value: number
-  format: 'currency' | 'number' | 'percent'
-  /** Change vs previous period, in percent. */
-  change: number
-  spark: number[]
-}
-
-export type RevenuePoint = { date: string; revenue: number; orders: number }
-
-/** Event kinds map to `dashboard:activity.<kind>` sentences. */
-export type ActivityKind = 'orderPlaced' | 'lowStock' | 'updated' | 'refund' | 'published'
-
-export type Activity = {
-  id: string
-  /** A person's name, or `system` / `payments` for automated events. */
-  actor: string
-  kind: ActivityKind
-  target: string
-  /** Order amount; formatted in the active locale and appended to the target. */
-  amount?: number
-  at: string
-  tone: 'success' | 'warning' | 'danger' | 'info' | 'neutral'
-}
-
-export interface DashboardService {
-  kpis(range: Range): Promise<Kpi[]>
-  revenue(range: Range): Promise<RevenuePoint[]>
-  activity(): Promise<Activity[]>
-}
-
-export const rangeDays: Record<Range, number> = { '7d': 7, '30d': 30, '90d': 90 }
-
-function series(n: number, seed: number) {
-  const rand = seededRandom(seed)
-  let v = 3200
-  return Array.from({ length: n }, (_, i) => {
-    v = Math.max(1200, v + (rand() - 0.42) * 600)
-    const date = new Date(Date.now() - (n - 1 - i) * 86_400_000)
-    return { date: date.toISOString().slice(0, 10), revenue: Math.round(v), orders: Math.round(v / (38 + rand() * 12)) }
-  })
-}
-
-const mockDashboardService: DashboardService = {
-  async kpis(range) {
-    await delay()
-    const pts = series(rangeDays[range], 7)
-    const revenue = pts.reduce((s, p) => s + p.revenue, 0)
-    const orders = pts.reduce((s, p) => s + p.orders, 0)
-    const scale = rangeDays[range] / 30
-    return [
-      { id: 'revenue', value: revenue, format: 'currency', change: 12.4, spark: pts.map((p) => p.revenue) },
-      { id: 'orders', value: orders, format: 'number', change: 8.1, spark: pts.map((p) => p.orders) },
-      { id: 'customers', value: Math.round(412 * scale), format: 'number', change: -2.3, spark: pts.map((p) => p.orders * 0.4) },
-      { id: 'conversion', value: 3.42, format: 'percent', change: 0.6, spark: pts.map((p) => p.revenue / p.orders) },
-    ]
-  },
-  async revenue(range) {
-    await delay()
-    return series(rangeDays[range], 7)
-  },
-  async activity() {
-    await delay()
-    const ago = (min: number) => new Date(Date.now() - min * 60_000).toISOString()
-    return [
-      { id: 'a1', actor: 'Maya Chen', kind: 'orderPlaced', target: '#10482', amount: 284, at: ago(4), tone: 'success' },
-      { id: 'a2', actor: 'system', kind: 'lowStock', target: 'Halo Pendant', at: ago(26), tone: 'warning' },
-      { id: 'a3', actor: 'Jonas Weber', kind: 'updated', target: 'Oak Side Table', at: ago(58), tone: 'info' },
-      { id: 'a4', actor: 'payments', kind: 'refund', target: '#10467', amount: 79, at: ago(140), tone: 'danger' },
-      { id: 'a5', actor: 'Ana Lopez', kind: 'published', target: 'Linen Cushion Natural', at: ago(310), tone: 'neutral' },
-      { id: 'a6', actor: 'Maya Chen', kind: 'orderPlaced', target: '#10461', amount: 1120, at: ago(620), tone: 'success' },
-    ]
-  },
-}
-
-export const dashboardService: DashboardService = mockDashboardService
-
-export const useKpis = (range: Range) =>
-  useQuery({ queryKey: ['dashboard', 'kpis', range], queryFn: () => dashboardService.kpis(range) })
-export const useRevenue = (range: Range) =>
-  useQuery({ queryKey: ['dashboard', 'revenue', range], queryFn: () => dashboardService.revenue(range) })
-export const useActivity = () => useQuery({ queryKey: ['dashboard', 'activity'], queryFn: () => dashboardService.activity() })

package/template/src/pages/landing-page.tsx

@@ -1,79 +0,0 @@
-import { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ArrowRight, Boxes, Gauge, Palette } from 'lucide-react'
-
-import { appConfig } from '@/app.config'
-import { useSession } from '@/core/auth/use-auth'
-import { ButtonLink } from '@/core/components/button-link'
-import { LanguageSwitcher } from '@/core/i18n/language-switcher'
-import { ThemeToggle } from '@/core/theme/theme-toggle'
-
-const YEAR = new Date().getFullYear()
-
-const features = [
-  { id: 'modular', icon: Boxes },
-  { id: 'tokens', icon: Palette },
-  { id: 'api', icon: Gauge },
-] as const
-
-export default function LandingPage() {
-  const session = useSession()
-  const { t } = useTranslation(['landing', 'common'])
-
-  useEffect(() => {
-    document.title = appConfig.name
-  }, [])
-
-  return (
-    <div className="flex min-h-svh flex-col bg-canvas">
-      <header className="mx-auto flex h-16 w-full max-w-5xl items-center justify-between px-6">
-        <span className="flex items-center gap-2 text-[15px] font-semibold tracking-tight">
-          <span className="flex size-7 items-center justify-center rounded-lg bg-foreground text-xs text-background">
-            {appConfig.name[0]?.toUpperCase()}
-          </span>
-          {appConfig.name}
-        </span>
-        <div className="flex items-center gap-1.5">
-          <LanguageSwitcher />
-          <ThemeToggle />
-          <ButtonLink to={session ? '/app' : '/login'} variant="outline" size="sm">
-            {session ? t('openApp') : t('signIn')}
-          </ButtonLink>
-        </div>
-      </header>
-
-      <main className="flex flex-1 flex-col items-center justify-center px-6 py-20 text-center">
-        <span className="label-caps mb-6 inline-flex items-center gap-2 rounded-full border bg-raised px-3 py-1 shadow-(--shadow-raised)">
-          <span className="size-1.5 rounded-full bg-primary" />
-          {t('common:app.tagline')}
-        </span>
-        <h1 className="max-w-2xl text-5xl font-semibold tracking-tight text-balance sm:text-6xl">
-          {t('headline')}
-          <br />
-          <span className="text-muted-foreground">{t('headlineMuted')}</span>
-        </h1>
-        <p className="mt-5 max-w-lg text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">{t('lead')}</p>
-        <div className="mt-9 flex items-center gap-3">
-          <ButtonLink to={session ? '/app' : '/login'} size="xl" className="rounded-full px-5">
-            {session ? t('openDashboard') : t('signIn')}
-            <ArrowRight data-icon="inline-end" />
-          </ButtonLink>
-        </div>
-
-        <ul className="mt-20 grid w-full max-w-4xl gap-4 text-left sm:grid-cols-3">
-          {features.map(({ id, icon: Icon }) => (
-            <li key={id} className="rounded-xl border bg-card p-5 shadow-(--shadow-card)">
-              <Icon className="size-5 text-primary" strokeWidth={1.75} />
-              <h2 className="mt-4 text-sm font-medium">{t(`features.${id}.title`)}</h2>
-              <p className="mt-1 text-sm text-muted-foreground">{t(`features.${id}.text`)}</p>
-            </li>
-          ))}
-        </ul>
-      </main>
-
-      <footer className="mx-auto w-full max-w-5xl px-6 py-8 tabular-nums text-[11px] text-muted-foreground">
-        {t('copyright', { year: YEAR, name: appConfig.name })}
-      </footer>
-    </div>
-  )
-}