CMS CRUD

type FieldDef = {
    name: string; // key in the values object
    label?: ReactNode;
    type?: 'text' | 'email' | 'password' | 'textarea' | 'number' | 'select' | 'multiselect'
        | 'radio' | 'checkbox' | 'switch' | 'date' | 'time' | 'color' | 'slider' | 'rating'
        | 'file' | 'custom'; // default "text"
    placeholder?: string;
    hint?: ReactNode;
    required?: boolean;
    disabled?: boolean;
    options?: { label: ReactNode; value: string; disabled?: boolean }[]; // select/multiselect/radio
    min?: number; max?: number; step?: number; // number/slider
    rows?: number; // textarea
    defaultValue?: unknown;
    validate?: (value, values) => ReactNode | null; // return an error message
    render?: (props) => ReactNode; // for type "custom"
    fullWidth?: boolean; // span both columns in a two-column layout
};

import { ResourceTable } from '@gg-software/cms';
 
<ResourceTable<Person>
    columns={[
        { key: 'name', header: 'Name', sortable: true },
        { key: 'role', header: 'Role', sortable: true },
        { key: 'active', header: 'Status', render: (row) => <Badge label={row.active ? 'active' : 'inactive'} /> },
    ]}
    data={people}
    rowKey={(row) => row.id}
    pageSize={20}
    filters={[
        { name: 'role', label: 'Role', options: roleOptions },
        { name: 'active', label: 'Active', type: 'boolean' },
    ]}
    bulkActions={[{ key: 'delete', label: 'Delete', danger: true, onClick: (keys) => removeAll(keys) }]}
    exportFilename="people"
    toolbarActions={<Button variant="primary">New person</Button>}
    onRowClick={(row) => openDetail(row)}
/>;

import { ResourceForm } from '@gg-software/cms';
 
<ResourceForm
    columns={2}
    fields={[
        { name: 'name', label: 'Name', required: true },
        { name: 'email', label: 'Email', type: 'email', required: true },
        { name: 'role', label: 'Role', type: 'select', options: roleOptions, defaultValue: 'member' },
        { name: 'bio', label: 'Bio', type: 'textarea', fullWidth: true },
    ]}
    initialValues={person}         // omit for a create form
    onSubmit={(values) => api.save(values)}
    onCancel={() => router.back()}
/>;

const [values, setValues] = useState<FormValues>({});
 
<FormBuilder fields={fields} values={values} onChange={setValues} errors={errors} columns={2} />;

<DetailView
    title="Customer"
    actions={<Button size="sm">Edit</Button>}
    record={customer}
    fields={[
        { key: 'name', label: 'Name' },
        { label: 'Status', render: (r) => <Badge label={r.status} /> },
    ]}
    bordered
/>

const [values, setValues] = useState<FilterValues>({});
 
<FilterBar
    filters={[
        { name: 'status', label: 'Status', options: statusOptions },
        { name: 'q', label: 'Search text', type: 'text' },
        { name: 'created', label: 'Created', type: 'date' },
    ]}
    values={values}
    onChange={setValues}
/>;

<BulkActions
    selectedKeys={selected}
    actions={[{ key: 'delete', label: 'Delete', danger: true, onClick: (keys) => removeAll(keys) }]}
    onClear={() => setSelected([])}
/>

<DataTableToolbar
    search={search}
    onSearchChange={setSearch}
    columns={columns.map((c) => ({ key: c.key, header: c.header, visible: visible.has(c.key) }))}
    onColumnsChange={(keys) => setVisible(new Set(keys))}
    actions={<DataExport data={rows} columns={exportColumns} filename="orders" />}
/>

<ConfirmDeleteDialog
    open={open}
    onClose={() => setOpen(false)}
    onConfirm={() => api.remove(project.id)}
    itemName={project.name}
    requireTyping
/>

<DataExport
    data={orders}
    columns={[
        { key: 'id', header: 'Order' },
        { key: 'total', header: 'Total', value: (o) => o.total.toFixed(2) },
    ]}
    filename="orders"
/>