@kematjaya/crud-ui-generator 0.1.0

package/dist/templates/form.js

@@ -0,0 +1,172 @@
+import { humanize } from '../naming.js';
+function fieldMarkup(field, entitiesKebab, autoFocus) {
+    const label = humanize(field.name);
+    const id = `${entitiesKebab}-${field.name}`;
+    const autoFocusProp = autoFocus ? '\n                    autoFocus={mode === \'create\'}' : '';
+    if (field.type === 'textarea') {
+        return `                <TextareaField
+                    id="${id}"
+                    label="${label}"
+                    rows={6}${field.maxLength !== null ? `\n                    maxLength={${field.maxLength}}` : ''}
+                    error={errors.${field.name}}
+                    registration={register('${field.name}')}
+                />`;
+    }
+    if (field.type === 'boolean') {
+        return `                <div className="form-check mb-3">
+                    <input
+                        id="${id}"
+                        type="checkbox"
+                        className="form-check-input"
+                        {...register('${field.name}')}
+                    />
+                    <label htmlFor="${id}" className="form-check-label">
+                        ${label}
+                    </label>
+                </div>`;
+    }
+    if (field.type === 'number') {
+        return `                <TextField
+                    id="${id}"
+                    label="${label}"
+                    type="number"${autoFocusProp}
+                    error={errors.${field.name}}
+                    registration={register('${field.name}', { valueAsNumber: true })}
+                />`;
+    }
+    return `                <TextField
+                    id="${id}"
+                    label="${label}"
+                    type="text"${field.maxLength !== null ? `\n                    maxLength={${field.maxLength}}` : ''}
+                    autoComplete="off"${autoFocusProp}
+                    error={errors.${field.name}}
+                    registration={register('${field.name}')}
+                />`;
+}
+export function form(spec, names) {
+    const { entityPascal, entityCamel, entitiesKebab } = names;
+    const usesTextarea = spec.fields.some((f) => f.type === 'textarea');
+    const usesText = spec.fields.some((f) => f.type === 'text' || f.type === 'number');
+    const fieldComponents = [usesText ? 'TextField' : null, usesTextarea ? 'TextareaField' : null]
+        .filter((c) => c !== null)
+        .join(', ');
+    const fieldsMarkup = spec.fields
+        .map((f, i) => fieldMarkup(f, entitiesKebab, i === 0))
+        .join('\n');
+    const resetFields = spec.fields.map((f) => `${f.name}: data.${f.name}`).join(', ');
+    return `'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button, ListPageCard${fieldComponents ? `, ${fieldComponents}` : ''} } from '@kematjaya/bootstrap-ui-kit';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { is${entityPascal} } from '@/lib/api-shapes';
+import { ${entityCamel}Schema, type ${entityPascal}FormValues } from '@/lib/schemas';
+
+type Props = {
+    mode: 'create' | 'edit';
+    ${entityCamel}Id?: string;
+};
+
+export function ${entityPascal}Form({ mode, ${entityCamel}Id }: Props) {
+    const router = useRouter();
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(mode === 'edit');
+    const {
+        register,
+        handleSubmit,
+        reset,
+        formState: { errors, isSubmitting }
+    } = useForm<${entityPascal}FormValues>({
+        resolver: zodResolver(${entityCamel}Schema),
+        mode: 'onBlur',
+        reValidateMode: 'onChange'
+    });
+
+    useEffect(() => {
+        if (mode !== 'edit' || !${entityCamel}Id) return;
+        let cancelled = false;
+        (async () => {
+            let response: Response;
+            try {
+                response = await fetch(\`/api/${entitiesKebab}/\${${entityCamel}Id}\`, { cache: 'no-store' });
+            } catch {
+                if (!cancelled) setError('Network error while loading the record. Check your connection and try again.');
+                return;
+            }
+            if (response.status === 401) {
+                router.push('/login');
+                return;
+            }
+            if (!response.ok) {
+                if (!cancelled) setError('Could not load the record. Try again.');
+                return;
+            }
+            const data: unknown = await response.json();
+            if (!is${entityPascal}(data)) {
+                if (!cancelled) setError('Unexpected response.');
+                return;
+            }
+            if (!cancelled) {
+                reset({ ${resetFields} });
+                setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [mode, ${entityCamel}Id, reset, router]);
+
+    async function submit(values: ${entityPascal}FormValues) {
+        setError('');
+        const path = mode === 'edit' ? \`/api/${entitiesKebab}/\${${entityCamel}Id}\` : '/api/${entitiesKebab}';
+        let response: Response;
+        try {
+            response = await fetch(path, {
+                method: mode === 'edit' ? 'PATCH' : 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(values)
+            });
+        } catch {
+            setError('Network error while saving. Check your connection and try again.');
+            return;
+        }
+        if (!response.ok) {
+            setError('Could not save. Try again.');
+            return;
+        }
+        const toast = mode === 'edit' ? 'Updated.' : 'Created.';
+        router.push(\`/dashboard/${entitiesKebab}?toast=\${encodeURIComponent(toast)}\`);
+    }
+
+    if (loading) {
+        return <p style={{ fontSize: 14, color: 'var(--color-fog)' }}>Loading...</p>;
+    }
+
+    return (
+        <ListPageCard
+            title={mode === 'edit' ? 'Edit' : 'New'}
+            error={error}
+            style={{ maxWidth: 640 }}
+        >
+            <form onSubmit={handleSubmit(submit)} noValidate>
+${fieldsMarkup}
+                <div className="d-flex gap-2">
+                    <Button type="submit" disabled={isSubmitting}>
+                        {isSubmitting ? 'Saving...' : mode === 'edit' ? 'Save changes' : 'Create'}
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => router.push('/dashboard/${entitiesKebab}')}
+                    >
+                        Cancel
+                    </Button>
+                </div>
+            </form>
+        </ListPageCard>
+    );
+}
+`;
+}

package/dist/templates/pages.js

@@ -0,0 +1,38 @@
+export function listPage({ entitiesKebab, entityPascal, entitiesPascal }) {
+    return `import { Suspense } from 'react';
+import { ${entityPascal}Table } from '@/components/${entitiesKebab}/${entityPascal}Table';
+import { requirePermission } from '@/lib/permissions';
+
+export default async function ${entitiesPascal}Page() {
+    await requirePermission('${entitiesKebab}');
+    return (
+        <Suspense>
+            <${entityPascal}Table />
+        </Suspense>
+    );
+}
+`;
+}
+export function newPage({ entitiesKebab, entityPascal }) {
+    return `import { ${entityPascal}Form } from '@/components/${entitiesKebab}/${entityPascal}Form';
+import { requirePermission } from '@/lib/permissions';
+
+export default async function New${entityPascal}Page() {
+    await requirePermission('${entitiesKebab}.create');
+    return <${entityPascal}Form mode="create" />;
+}
+`;
+}
+export function editPage({ entitiesKebab, entityPascal, entityCamel }) {
+    return `import { ${entityPascal}Form } from '@/components/${entitiesKebab}/${entityPascal}Form';
+import { requirePermission } from '@/lib/permissions';
+
+type Props = { params: Promise<{ id: string }> };
+
+export default async function Edit${entityPascal}Page({ params }: Props) {
+    await requirePermission('${entitiesKebab}.edit');
+    const { id } = await params;
+    return <${entityPascal}Form mode="edit" ${entityCamel}Id={id} />;
+}
+`;
+}

package/dist/templates/queryLib.js

@@ -0,0 +1,77 @@
+import { searchField } from '../naming.js';
+export function queryLib(spec, names) {
+    const { entitiesKebab, entitiesPascal, entitiesCamel } = names;
+    const field = searchField(spec);
+    const constPrefix = entitiesCamel.toUpperCase();
+    return `export const ${constPrefix}_PAGE_SIZES = [10, 20, 30, 50] as const;
+export const ${constPrefix}_DEFAULT_PAGE_SIZE = 30;
+
+export type ${entitiesPascal}Query = {
+${field !== null ? '    search: string;\n' : ''}    page: number;
+    itemsPerPage: number;
+};
+
+function parsePositiveInteger(value: string | null): number | null {
+    if (value === null || !/^[1-9]\\d*$/.test(value)) return null;
+    const parsed = Number(value);
+    return Number.isSafeInteger(parsed) ? parsed : null;
+}
+
+function isAllowedPageSize(
+    value: number | null
+): value is (typeof ${constPrefix}_PAGE_SIZES)[number] {
+    return value !== null && ${constPrefix}_PAGE_SIZES.some((size) => size === value);
+}
+
+export function parse${entitiesPascal}Query(searchParams: URLSearchParams): ${entitiesPascal}Query {
+    const state: ${entitiesPascal}Query = {
+${field !== null ? `        search: searchParams.get('${field}')?.trim() ?? '',\n` : ''}        page: parsePositiveInteger(searchParams.get('page')) ?? 1,
+        itemsPerPage: ${constPrefix}_DEFAULT_PAGE_SIZE
+    };
+    const pageSize = parsePositiveInteger(searchParams.get('itemsPerPage'));
+    if (isAllowedPageSize(pageSize)) state.itemsPerPage = pageSize;
+
+    return state;
+}
+
+function buildParams(state: ${entitiesPascal}Query): URLSearchParams {
+    const params = new URLSearchParams();
+${field !== null ? `    if (state.search) params.set('${field}', state.search);\n` : ''}    if (state.page !== 1) params.set('page', String(state.page));
+    if (state.itemsPerPage !== ${constPrefix}_DEFAULT_PAGE_SIZE) {
+        params.set('itemsPerPage', String(state.itemsPerPage));
+    }
+    return params;
+}
+
+export function build${entitiesPascal}Href(
+    current: ${entitiesPascal}Query,
+    patch: Partial<${entitiesPascal}Query> = {}
+): string {
+    const query = buildParams({ ...current, ...patch }).toString();
+    return query ? \`/dashboard/${entitiesKebab}?\${query}\` : '/dashboard/${entitiesKebab}';
+}
+
+export function build${entitiesPascal}ApiPath(state: ${entitiesPascal}Query): string {
+    const query = buildParams(state).toString();
+    return query ? \`/api/${entitiesKebab}?\${query}\` : '/api/${entitiesKebab}';
+}
+
+export function clampPageToTotal(
+    page: number,
+    itemsPerPage: number,
+    totalItems: number
+): number {
+    const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
+    return Math.min(Math.max(page, 1), totalPages);
+}
+
+export function nextItemsPerPagePage(
+    currentPage: number,
+    oldItemsPerPage: number,
+    newItemsPerPage: number
+): number {
+    const firstRowShown = (currentPage - 1) * oldItemsPerPage + 1;
+    return Math.max(1, Math.ceil(firstRowShown / newItemsPerPage));
+}
+`;
+}

package/dist/templates/schemas.js

@@ -0,0 +1,36 @@
+import { humanize } from '../naming.js';
+/** Fresh-file bootstrap, only used when src/lib/schemas.ts doesn't exist yet. */
+export const schemasFileHeader = `import { z } from 'zod';
+`;
+export function schemasMarker(entityCamel) {
+    return `export const ${entityCamel}Schema = `;
+}
+function zodField(field) {
+    const label = humanize(field.name);
+    if (field.type === 'boolean')
+        return 'z.boolean()';
+    if (field.type === 'number') {
+        return field.required ? 'z.number()' : 'z.number().optional()';
+    }
+    let expr = 'z.string().trim()';
+    if (field.required)
+        expr += `.min(1, '${label} is required')`;
+    if (field.maxLength !== null)
+        expr += `.max(${field.maxLength})`;
+    if (!field.required)
+        expr += '.optional()';
+    return expr;
+}
+export function schemasBlock(spec, names) {
+    const { entityPascal, entityCamel } = names;
+    const fields = spec.fields
+        .map((f) => `    ${f.name}: ${zodField(f)}`)
+        .join(',\n');
+    return `
+export const ${entityCamel}Schema = z.object({
+${fields}
+});
+
+export type ${entityPascal}FormValues = z.infer<typeof ${entityCamel}Schema>;
+`;
+}