/** * test-crud-public-rest.tsx * -------------------------------- * * Full-feature CRUD demo of `@crudx/core` + `@crudx/rest-tanstack-adapter` * rendered through `@crudx/mui`. Wired live against JSONPlaceholder * (https://jsonplaceholder.typicode.com). * * Demonstrates the breadth of `` in one page: page * header + page actions, filter view, table tabs with counts, sticky * checkbox + action columns, sorting, density, expand slot, custom * header actions, modal forms, detail drawer, row selection + bulk * actions, and a live `contentViewType` toggle that swaps the table * grid for a card view via `renderItemView`. The exact source for * the page is rendered via the `` panel. */ import { useMemo, useState } from 'react'; import toast from 'react-hot-toast'; import { CrudProps } from '@crudx/core'; import { CrudPanelView, Dialog } from '@crudx/mui'; import { createRestTanstackAdapter } from '@crudx/rest-tanstack-adapter'; import GridViewIcon from '@mui/icons-material/GridView'; import RestartAltIcon from '@mui/icons-material/RestartAlt'; import ViewListIcon from '@mui/icons-material/ViewList'; import { Box, Button, Card, CardContent, Chip, IconButton, Paper, Stack, TextField, Tooltip, Typography, } from '@mui/material'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { GetStaticProps } from 'next'; import { AppBar, JsonView, SourceView } from '../components'; import { readPageSource } from '../lib/pageSource'; const PAGE_SOURCE_PATH = 'apps/example/src/pages/test-crud-public-rest.tsx'; /** * -------------------------- * Schema typings * -------------------------- */ type Post = { id: number; title: string; body: string; userId?: number; }; type PostsListResponse = { data: Post[]; total: number }; type PostsListVariables = { _page?: number; _limit?: number; }; type PostDetailVariables = { id: number }; type PostCreateVariables = { title: string; body: string; userId?: number }; type PostUpdateVariables = { id: number; title?: string; body?: string; }; type PostDeleteVariables = { id: number }; const BASE = 'https://jsonplaceholder.typicode.com'; /** * -------------------------- * The CRUD page * -------------------------- */ type PostSchemata = { get: [Post, PostDetailVariables, Post]; list: [PostsListResponse, PostsListVariables, Post]; create: [Post, PostCreateVariables]; update: [Post, PostUpdateVariables]; delete: [{ id: number }, PostDeleteVariables]; }; /** * -------------------------- * Adapter + schema (builder path) * -------------------------- * * `createRestTanstackAdapter().schema()` collapses the per-slot * `restList` / `restGet` / `restMutation` factories into a single * config block per CRUD operation and returns a fully-typed * `CrudSchemata` ready to drop into ``. */ const restAdapter = createRestTanstackAdapter(); const postsSchema = restAdapter.schema({ list: { key: 'posts', resource: 'posts', fetch: async ({ variables, signal }) => { const params = new URLSearchParams(); if (variables._page) params.set('_page', String(variables._page)); if (variables._limit) params.set('_limit', String(variables._limit)); const res = await fetch(`${BASE}/posts?${params.toString()}`, { signal }); const data = (await res.json()) as Post[]; const total = parseInt(res.headers.get('x-total-count') ?? '0', 10); return { data, total }; }, }, get: { key: 'post', resource: ['posts', 'detail'], fetch: async ({ variables, signal }) => { const res = await fetch(`${BASE}/posts/${variables.id}`, { signal }); return (await res.json()) as Post; }, }, create: { key: 'post', resource: ['posts', 'create'], invalidates: 'posts', request: async ({ variables }) => { const res = await fetch(`${BASE}/posts`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: 1, ...variables }), }); return (await res.json()) as Post; }, }, update: { key: 'post', resource: ['posts', 'update'], invalidates: 'posts', request: async ({ variables }) => { const { id, ...body } = variables; const res = await fetch(`${BASE}/posts/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); return (await res.json()) as Post; }, }, delete: { key: 'post', resource: ['posts', 'delete'], invalidates: 'posts', request: async ({ variables }) => { await fetch(`${BASE}/posts/${variables.id}`, { method: 'DELETE' }); return { id: variables.id }; }, }, }); function PostForm(props: { mode: 'create' | 'update'; initial?: Partial; onSubmit: (values: { title: string; body: string }) => Promise; onCancel: () => void; }) { const { mode, initial, onSubmit, onCancel } = props; const [title, setTitle] = useState(initial?.title ?? ''); const [body, setBody] = useState(initial?.body ?? ''); const [submitting, setSubmitting] = useState(false); const handleSubmit = async () => { if (!title.trim() || !body.trim()) { toast.error('Title and body are required'); return; } setSubmitting(true); try { await onSubmit({ title, body }); onCancel(); } finally { setSubmitting(false); } }; return ( JSONPlaceholder accepts the {mode} call and echoes the post back, but does not persist server-side — the list refetches anyway thanks to invalidates: 'posts' on the mutation. setTitle(e.target.value)} fullWidth /> setBody(e.target.value)} fullWidth /> ); } /** * Card item used when contentViewType === 'view' (renderItemView). */ function PostCard(props: { post: Post; index: number; checkbox: () => React.ReactNode; action: () => React.ReactNode; }) { const { post, index, checkbox, action } = props; return ( {checkbox()} #{post.id} {action()} {post.title} {post.body} row {index + 1} id:{post.id} ); } function PostsPanel({ source }: { source: string }) { // Local UI state layered on top of the panel's data. const [contentViewType, setContentViewType] = useState<'table' | 'view'>( 'table' ); const [tab, setTab] = useState<'all' | 'even' | 'odd'>('all'); const [search, setSearch] = useState(''); const [sortDir, setSortDir] = useState<'DEFAULT' | 'ASC' | 'DESC'>('DEFAULT'); const [expanded, setExpanded] = useState(true); const hasActiveFilters = tab !== 'all' || sortDir !== 'DEFAULT' || search.trim() !== ''; const resetFilters = () => { setSearch(''); setTab('all'); setSortDir('DEFAULT'); }; // Apply tab + search + sort client-side on top of the fetched page. const transform = (rows: Post[] | undefined): Post[] => { let next = rows ?? []; if (tab === 'even') next = next.filter((r) => r.id % 2 === 0); if (tab === 'odd') next = next.filter((r) => r.id % 2 === 1); if (search.trim()) { const q = search.trim().toLowerCase(); next = next.filter( (r) => r.title.toLowerCase().includes(q) || r.body.toLowerCase().includes(q) ); } if (sortDir === 'ASC') { next = [...next].sort((a, b) => a.title.localeCompare(b.title)); } else if (sortDir === 'DESC') { next = [...next].sort((a, b) => b.title.localeCompare(a.title)); } return next; }; return ( Status {search ? : null} {!hasActiveFilters ? ( no filters applied ) : null} {hasActiveFilters ? ( ) : null} ( )} /> name="post" schema={postsSchema} paging={{ strategy: 'CUSTOM', pageSize: 10, custom: restAdapter.offsetPagination({ pageKey: '_page', pageSizeKey: '_limit', }), }} pageTitle="Posts" pageBackPath="/" pageBreadcrumbs={[ { label: 'Demos', url: '/' }, { label: 'REST CRUD' }, ]} pageActions={[ { key: 'view-toggle', content: ( ), }, ]} filterTitle="Search" filterNode={ setSearch(e.target.value)} /> } contentViewType={contentViewType} tableTitle="Posts" tableTabState={tab} tableTabs={[ { key: 'all', label: 'All' }, { key: 'even', label: 'Even IDs' }, { key: 'odd', label: 'Odd IDs' }, ]} onTableTabChange={(next) => setTab(next as typeof tab)} tableInfos={[ { type: 'title' }, { type: 'total', text: '{count} posts' }, { type: 'bulk', text: '{count} selected' }, ]} tableActions={[ { action: 'create' }, { action: 'refresh' }, { action: 'sorting' }, { action: 'density' }, { action: 'expand' }, { action: 'settings', items: [ { key: 'columns', title: 'Columns…' }, { key: 'export', title: 'Export CSV' }, ], }, { key: 'view-mode', action: 'custom', tooltip: 'Toggle table / card view', render: () => ( setContentViewType((v) => v === 'table' ? 'view' : 'table' ) } > {contentViewType === 'table' ? ( ) : ( )} ), }, ]} tableExpandState={expanded} tableExpandView={ Header expand slot — use it for inline filters, charts, or contextual help. Toggle via the chevron in the table actions row. } tableCheckboxColumnSticky tableActionColumnSticky columnDataIndex="id" columns={[ { key: 'id', title: 'ID', width: 70, dataIndex: 'id' }, { key: 'userId', title: 'User', width: 90, dataIndex: 'userId', render: (value) => ( ), }, { key: 'title', title: 'Title', width: 320, dataIndex: 'title', render: (value) => ( {String(value ?? '')} ), }, { key: 'body', title: 'Body', dataIndex: 'body', render: (value) => ( {String(value ?? '')} ), }, ]} columnActions={{ name: 'post', identifier: 'title', enableView: true, enableUpdate: true, enableDelete: true, enableExport: false, enableAlert: ['delete'], deleteAction: async (_e, ctx) => { const id = ctx?.data?.id; const trigger = ctx?.mutation?.delete?.[0]; if (!id || !trigger) return; try { await trigger({ variables: { id } }); toast.success('Post deleted'); ctx?.context?.pagingProps?.refresh?.(); } catch { toast.error('Failed to delete post'); } }, }} enableRowSelection prepareTableViewProps={(nodeProps) => ({ data: transform(nodeProps.data as Post[] | undefined) as any, onTriggerSorting: (next) => setSortDir(next), onTriggerExpand: (_current, nextState) => setExpanded(nextState), onTriggerBulkAction: (action) => { toast(`Bulk action: ${action}`); }, })} prepareContentViewProps={(nodeProps) => ({ data: transform(nodeProps.data as Post[] | undefined) as any, onTriggerSorting: (next) => setSortDir(next), onTriggerExpand: (_current, nextState) => setExpanded(nextState), onTriggerBulkAction: (action) => { toast(`Bulk action: ${action}`); }, paginateType: 'pagination', })} modalForms={{ create: { title: 'Create post', render: (options) => ( ), }, update: { title: 'Edit post', render: (options) => ( ), }, }} detailsViewType="drawer" renderDetailsView={(nodeProps) => ( Detail {nodeProps?.data?.title ?? 'Post'} )} renderItemView={(record, views, state) => ( )} /> ); } type IndexProps = { source: string }; export function Index({ source }: IndexProps) { const queryClient = useMemo( () => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1 }, }, }), [] ); return ( ); } export const getStaticProps: GetStaticProps = async () => ({ props: { source: readPageSource(PAGE_SOURCE_PATH) }, }); export default Index; // keep CrudProps imported so future ref-based interactions stay typed export type _PostsCrudProps = CrudProps;

	ID	USER	TITLE	BODY	ACTION