@flaredev/cli 0.7.2 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "The flare command-line tool: create, generate, migrate, and deploy Flare apps",
   "license": "MIT",
   "author": "Muke Johnbaptist",
@@ -41,7 +41,7 @@
     "jiti": "^2.7.0",
     "jsonc-parser": "^3.3.1",
     "picocolors": "^1.1.1",
-    "@flaredev/core": "0.7.2"
+    "@flaredev/core": "0.8.0"
   },
   "engines": {
     "node": ">=22"

package/templates/app/components/dashboard/fields/field-widget.tsx

@@ -59,7 +59,56 @@ export function FieldWidget(props: WidgetProps) {
       return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
 
     case "int":
-    case "float":
+    case "float": {
+      // A rating is a row of stars, not a number to type.
+      if (field.format === "rating") {
+        const most = field.max ?? 5;
+        const score = Number(text) || 0;
+        return (
+          <div className="flex items-center gap-1" role="radiogroup" aria-label={field.label}>
+            {Array.from({ length: most }, (_, index) => index + 1).map((star) => (
+              <button
+                key={star}
+                type="button"
+                role="radio"
+                aria-checked={score === star}
+                aria-label={`${star} of ${most}`}
+                disabled={disabled}
+                // Clicking the current score clears it, which is the only way to unset one.
+                onClick={() => onChange(score === star ? "" : String(star))}
+                className="rounded p-0.5 text-lg leading-none text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 data-[on=true]:text-foreground"
+                data-on={star <= score}
+              >
+                {star <= score ? "★" : "☆"}
+              </button>
+            ))}
+            {score > 0 && !disabled && (
+              <button type="button" onClick={() => onChange("")} className="ml-1 text-xs text-muted-foreground hover:text-foreground">
+                clear
+              </button>
+            )}
+          </div>
+        );
+      }
+
+      // Money and percent get their unit where the number is, so nobody has to guess.
+      if (field.format === "money" || field.format === "percent") {
+        return (
+          <InputGroup>
+            {field.format === "money" && <InputGroupAddon>{field.currency ?? "$"}</InputGroupAddon>}
+            <InputGroupInput
+              {...common}
+              type="text"
+              inputMode="decimal"
+              className="tabular-nums"
+              value={groupDigits(text)}
+              onChange={(event) => onChange(ungroup(event.target.value, true))}
+            />
+            {field.format === "percent" && <InputGroupAddon align="inline-end">%</InputGroupAddon>}
+          </InputGroup>
+        );
+      }
+
       // Shown grouped (2,000) and stored plain (2000), so a price can be read at a glance
       // and nothing downstream has to strip a comma back out.
       return (
@@ -72,6 +121,7 @@ export function FieldWidget(props: WidgetProps) {
           onChange={(event) => onChange(ungroup(event.target.value, field.kind === "float"))}
         />
       );
+    }
 
     case "boolean":
       return (
@@ -189,6 +239,37 @@ export function FieldWidget(props: WidgetProps) {
           return <Input {...common} type="email" autoComplete="email" value={text} onChange={(event) => onChange(event.target.value)} />;
         case "url":
           return <Input {...common} type="url" placeholder={field.placeholder ?? "https://"} value={text} onChange={(event) => onChange(event.target.value)} />;
+        case "username":
+          return (
+            <InputGroup>
+              <InputGroupAddon>@</InputGroupAddon>
+              <InputGroupInput {...common} autoCapitalize="none" spellCheck={false} placeholder={field.placeholder ?? "ada_lovelace"} value={text} onChange={(event) => onChange(event.target.value)} />
+            </InputGroup>
+          );
+        case "ip":
+          return <Input {...common} inputMode="numeric" spellCheck={false} className="font-mono" placeholder={field.placeholder ?? "192.168.1.1"} value={text} onChange={(event) => onChange(event.target.value)} />;
+        case "uuid":
+          return <Input {...common} spellCheck={false} className="font-mono" placeholder={field.placeholder ?? "3f2504e0-4f89-11d3-9a0c-0305e82c3301"} value={text} onChange={(event) => onChange(event.target.value)} />;
+        case "timezone":
+          // The browser knows every zone; no list to ship or keep current.
+          return (
+            <>
+              <Input {...common} list={`${common.id}-zones`} spellCheck={false} placeholder={field.placeholder ?? "Africa/Kampala"} value={text} onChange={(event) => onChange(event.target.value)} />
+              <datalist id={`${common.id}-zones`}>
+                {(Intl.supportedValuesOf?.("timeZone") ?? []).map((zone) => (
+                  <option key={zone} value={zone} />
+                ))}
+              </datalist>
+            </>
+          );
+        case "currency":
+          return (
+            <Input {...common} spellCheck={false} maxLength={3} className="font-mono uppercase" placeholder={field.placeholder ?? "UGX"} value={text} onChange={(event) => onChange(event.target.value.toUpperCase())} />
+          );
+        case "locale":
+          return <Input {...common} spellCheck={false} className="font-mono" placeholder={field.placeholder ?? "en-GB"} value={text} onChange={(event) => onChange(event.target.value)} />;
+        case "postcode":
+          return <Input {...common} autoCapitalize="characters" spellCheck={false} placeholder={field.placeholder ?? "SW1A 1AA"} value={text} onChange={(event) => onChange(event.target.value.toUpperCase())} />;
         default:
           return (
             <WithSuggestion suggest={suggest} disabled={disabled} onChange={onChange}>

package/templates/app/lib/resource/rows.ts

@@ -36,7 +36,20 @@ export interface RowsQuery {
    * `(sort field, id)` together so rows sharing a sort value are neither skipped nor
    * repeated.
    */
-  cursor?: { field: string; value: unknown; id: string; greaterThan: boolean };
+  cursor?: {
+    field: string;
+    value: unknown;
+    id: string;
+    greaterThan: boolean;
+    /**
+     * Whether the sort column holds a date.
+     *
+     * A cursor travels through a URL, so a Date arrives back as a number. SQLite stores
+     * dates as milliseconds and wants that number; Postgres wants a Date. Neither
+     * adapter can tell which a column is, and the store can — so it says.
+     */
+    isDate?: boolean;
+  };
   limit: number;
   /** Offset paging, for the page-number case. Never combined with a cursor. */
   offset?: number;

package/templates/app/lib/resource/store.ts

@@ -42,7 +42,7 @@ export type Result<T> = { ok: true; data: T } | Failure;
  */
 export const COUNT_LIMIT = 10_000;
 
-/** Dates are stored as milliseconds, and a cursor has to compare the way the column does. */
+/** A cursor is JSON in a URL, so a Date has to cross it as a number. */
 function toCursorValue(value: unknown): string | number | boolean | null {
   if (value instanceof Date) return value.getTime();
   if (value === null || value === undefined) return null;
@@ -211,6 +211,16 @@ export function createResourceStore(options: ResourceStoreOptions) {
       if ("issues" in parsed) return fail(400, "Invalid query.", { queryIssues: parsed.issues });
       const { page, perPage, sort, q, filters, cursor } = parsed.query;
 
+      /**
+       * Whether a sort column holds a date, so the adapter can shape the cursor for it.
+       * The timestamps every row has, plus any date or datetime field.
+       */
+      const isDateField = (key: string) => {
+        if (key === "createdAt" || key === "updatedAt") return true;
+        const def = fields.find(([name]) => name === key)?.[1];
+        return def?.kind === "date" || def?.kind === "datetime";
+      };
+
       const searchable = fields.filter(([, def]) => isSearchable(def)).map(([key]) => key);
       const matching = { search: q ? { term: q, fields: searchable } : undefined, filters };
 
@@ -224,7 +234,9 @@ export function createResourceStore(options: ResourceStoreOptions) {
         rows.find({
           ...matching,
           sort: { field: sort.field, direction: descending ? "desc" : "asc" },
-          cursor: cursor ? { field: sort.field, value: cursor.value, id: cursor.id, greaterThan: !descending } : undefined,
+          cursor: cursor
+            ? { field: sort.field, value: cursor.value, id: cursor.id, greaterThan: !descending, isDate: isDateField(sort.field) }
+            : undefined,
           limit: perPage + 1,
           offset: cursor ? undefined : (page - 1) * perPage,
         }),

package/templates/next/lib/resource/prisma-rows.ts

@@ -97,8 +97,12 @@ export function prismaRows(delegate: PrismaDelegate, client: unknown): ResourceR
     async find(query) {
       const where = matching(query);
       if (query.cursor) {
-        const { field, value, id, greaterThan } = query.cursor;
+        const { field, id, greaterThan, isDate } = query.cursor;
         const op = greaterThan ? "gt" : "lt";
+        // Postgres compares a timestamp against a Date, not the number the cursor
+        // carried. Without this, paging past the first page of a date-sorted list fails
+        // with "Expected DateTime, provided Int".
+        const value = isDate && (typeof query.cursor.value === "number" || typeof query.cursor.value === "string") ? new Date(query.cursor.value) : query.cursor.value;
         // (sort, id) as one comparison, so rows sharing a sort value are neither skipped
         // nor repeated. AND-ed with the filters rather than replacing them.
         const keyset = [{ [field]: { [op]: value } }, { AND: [{ [field]: value }, { id: { [op]: id } }] }];