create-freakpunch 0.0.0-stage → 0.2.0

package/template/tools/templates/module/pages/__id__-list-page.tsx.tpl

@@ -0,0 +1,234 @@
+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 { Download, MoreHorizontal, 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 { StatusBadge, type StatusTone } from '@/core/components/status-badge'
+import { useFormat } from '@/core/i18n/use-format'
+import { downloadCsv } from '@/core/lib/csv'
+import { useDelete__Name__, useExport__Name__, use__Name__List } from '../hooks'
+import { __id__Statuses, type __Name__Record, type __Name__Status } from '../types'
+
+const FILTER_KEYS = ['status'] as const
+const DEFAULT_SORT = { id: 'updatedAt', desc: true }
+const helper = createColumnHelper<DataTableFeatures, __Name__Record>()
+const tones: Record<__Name__Status, StatusTone> = { active: 'success', draft: 'neutral', archived: 'warning' }
+
+export default function __Name__ListPage() {
+  const list = useListUrlState({ filterKeys: FILTER_KEYS, defaultSort: DEFAULT_SORT })
+  const query = use__Name__List(list.listParams)
+  const exportRows = useExport__Name__(list.listParams)
+  const { mutateAsync: deleteAsync } = useDelete__Name__()
+  const confirm = useConfirm()
+  const navigate = useNavigate()
+  const { t } = useTranslation(['__id__', 'common'])
+  const fmt = useFormat()
+  const { can } = usePermissions()
+  const [selected, setSelected] = useState<RowSelectionState>({})
+
+  async function onExport() {
+    downloadCsv(
+      '__id__',
+      [
+        { header: t('list.columns.name'), value: (r: __Name__Record) => r.name },
+        { header: t('list.columns.status'), value: (r: __Name__Record) => t(`status.${r.status}`) },
+        { header: t('list.columns.updated'), value: (r: __Name__Record) => fmt.date(r.updatedAt) },
+      ],
+      await exportRows(),
+    )
+  }
+
+  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.description'),
+      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(record: __Name__Record) {
+      const ok = await confirm({
+        title: t('delete.title', { name: record.name }),
+        description: t('delete.description'),
+        confirmLabel: t('common:actions.delete'),
+        destructive: true,
+      })
+      if (!ok) return
+      toast.promise(deleteAsync(record.id), {
+        loading: t('delete.deleting'),
+        success: t('delete.deleted', { name: record.name }),
+        error: (e: Error) => e.message,
+      })
+    }
+
+    return helper.columns([
+      helper.accessor('name', {
+        header: t('list.columns.name'),
+        cell: ({ row }) => (
+          <Link to={row.original.id} className="font-medium outline-none hover:underline focus-visible:underline">
+            {row.original.name}
+          </Link>
+        ),
+      }),
+      helper.accessor('status', {
+        header: t('list.columns.status'),
+        cell: ({ getValue }) => <StatusBadge tone={tones[getValue()]}>{t(`status.${getValue()}`)}</StatusBadge>,
+      }),
+      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 }) =>
+          (can('__id__.edit') || can('__id__.delete')) && (
+            <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">
+                {can('__id__.edit') && (
+                  <DropdownMenuItem onClick={() => navigate(`${row.original.id}/edit`)}>
+                    <Pencil />
+                    {t('common:actions.edit')}
+                  </DropdownMenuItem>
+                )}
+                {can('__id__.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 = __id__Statuses.map((s) => ({ value: s, label: t(`status.${s}`) }))
+
+  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="__id__.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={(r) => r.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('__id__.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)}
+            />
+            {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="__id__.create">
+                  <ButtonLink to="new">{t('list.new')}</ButtonLink>
+                </Can>
+              }
+            />
+          )
+        }
+      />
+    </Page>
+  )
+}

package/template/tools/templates/module/types.ts.tpl

@@ -0,0 +1,32 @@
+import { z } from 'zod'
+
+import { vmsg } from '@/core/i18n/keys'
+
+export const __id__Statuses = ['active', 'draft', 'archived'] as const
+export type __Name__Status = (typeof __id__Statuses)[number]
+
+export type __Name__Record = {
+  id: string
+  name: string
+  status: __Name__Status
+  notes: string
+  createdAt: string
+  updatedAt: string
+}
+
+export type __Name__Filters = {
+  status?: string
+}
+
+/** Validation for create/edit. Shared with the service so mock and real APIs agree. */
+export const __id__FormSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(2, vmsg('validation.minChars', { min: 2 }))
+    .max(80, vmsg('validation.maxChars', { max: 80 })),
+  status: z.enum(__id__Statuses),
+  notes: z.string().trim().max(500, vmsg('validation.maxChars', { max: 500 })),
+})
+
+export type __Name__Input = z.infer<typeof __id__FormSchema>

package/template/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path aliases */
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/template/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/template/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,47 @@
+import path from 'node:path'
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import { defineConfig, loadEnv } from 'vite'
+
+/** Long-lived vendor chunks so app deploys don't bust the library cache. */
+const vendorChunks: [name: string, pattern: RegExp][] = [
+  ['react', /node_modules[\\/](react|react-dom|react-router|scheduler)[\\/]/],
+  ['ui', /node_modules[\\/](@base-ui|@floating-ui|cmdk|sonner|lucide-react)[\\/]/],
+  ['data', /node_modules[\\/](@tanstack|zod|react-hook-form|@hookform)[\\/]/],
+  ['charts', /node_modules[\\/](recharts|d3-[^\\/]+|victory-vendor|es-toolkit|immer|redux|@reduxjs)[\\/]/],
+]
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, import.meta.dirname, '')
+  return {
+    /** Where the panel is served from, e.g. /admin/ (keep the trailing slash). */
+    base: env.VITE_BASE_PATH || '/',
+    plugins: [react(), tailwindcss()],
+    /** Dev only: forward API calls to the project's backend, e.g. VITE_DEV_API_PROXY=http://localhost:8000 */
+    server: {
+      port: Number(env.VITE_DEV_PORT) || undefined,
+      proxy: env.VITE_DEV_API_PROXY
+        ? { [env.VITE_API_URL || '/api']: { target: env.VITE_DEV_API_PROXY, changeOrigin: true } }
+        : undefined,
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(import.meta.dirname, './src'),
+      },
+    },
+    build: {
+      rolldownOptions: {
+        output: {
+          codeSplitting: {
+            groups: [
+              {
+                name: (id: string) => vendorChunks.find(([, pattern]) => pattern.test(id))?.[0] ?? null,
+              },
+            ],
+          },
+        },
+      },
+    },
+  }
+})