@flaredev/cli 0.1.2 → 0.2.0

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

@@ -1,128 +1,186 @@
-"use client";
-
-import { optionLabel, type FileField as FileFieldDef, type StoredField } from "@flaredev/core";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Textarea } from "@/components/ui/textarea";
-import { DateField, DateTimeField } from "./date-field";
-import { FileField } from "./file-field";
-import { RelationField } from "./relation-field";
-
-export interface RelationMeta {
-  name: string;
-  label: string;
-  pluralLabel: string;
-  slug: string;
-  titleField: string;
-}
-
-export interface WidgetProps {
-  id: string;
-  name: string;
-  /** Resource name and field key, for upload actions. */
-  resourceName: string;
-  fieldKey: string;
-  field: StoredField & { label: string };
-  value: string | boolean;
-  onChange: (value: string | boolean) => void;
-  invalid: boolean;
-  disabled?: boolean;
-  /** belongsTo: the related resource and the current value's title. */
-  relation?: RelationMeta & { initialTitle?: string };
-}
-
-const NONE = "__none__";
-
-/** The input for a field, chosen from its kind in the descriptor. */
-export function FieldWidget(props: WidgetProps) {
-  const { id, name, field, value, onChange, invalid, disabled, relation, resourceName, fieldKey } = props;
-  const text = typeof value === "string" ? value : "";
-  const common = { id, name, disabled, "aria-invalid": invalid || undefined, placeholder: field.placeholder };
-
-  switch (field.kind) {
-    case "text":
-      return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
-
-    case "int":
-    case "float":
-      return (
-        <Input
-          {...common}
-          type="text"
-          inputMode={field.kind === "int" ? "numeric" : "decimal"}
-          className="tabular-nums"
-          value={text}
-          onChange={(event) => onChange(event.target.value)}
-        />
-      );
-
-    case "boolean":
-      return (
-        <Switch
-          id={id}
-          name={name}
-          disabled={disabled}
-          aria-invalid={invalid || undefined}
-          checked={value === true}
-          onCheckedChange={(checked) => onChange(checked)}
-        />
-      );
-
-    case "enum":
-      return (
-        // No selection is `undefined`, so the placeholder shows; "None" clears an optional value.
-        <Select value={text || undefined} onValueChange={(next) => onChange(next === NONE ? "" : next)} disabled={disabled} name={name}>
-          <SelectTrigger id={id} aria-invalid={invalid || undefined} className="w-full">
-            <SelectValue placeholder={field.placeholder ?? `Choose ${field.label.toLowerCase()}`} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              {!field.required && <SelectItem value={NONE}>None</SelectItem>}
-              {field.options.map((option) => (
-                <SelectItem key={option} value={option}>
-                  {optionLabel(field, option)}
-                </SelectItem>
-              ))}
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      );
-
-    case "date":
-      return (
-        <DateField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
-      );
-
-    case "datetime":
-      return (
-        <DateTimeField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
-      );
-
-    case "belongsTo":
-      return relation ? (
-        <RelationField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} relation={relation} />
-      ) : (
-        <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />
-      );
-
-    case "file":
-      return (
-        <FileField
-          id={id}
-          value={text}
-          onChange={onChange}
-          invalid={invalid}
-          disabled={disabled}
-          field={field as FileFieldDef & { label: string }}
-          resourceName={resourceName}
-          fieldKey={fieldKey}
-        />
-      );
-
-    default: {
-      const type = field.kind === "string" && field.format === "email" ? "email" : field.kind === "string" && field.format === "url" ? "url" : "text";
-      return <Input {...common} type={type} value={text} onChange={(event) => onChange(event.target.value)} />;
-    }
-  }
-}
+"use client";
+
+import { normalizeDomain, optionLabel, slugify, type FileField as FileFieldDef, type MultiSelectField as MultiSelectDef, type StoredField } from "@flaredev/core";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { DateField, DateTimeField } from "./date-field";
+import { CountryField } from "./country-field";
+import { FileField } from "./file-field";
+import { MultiSelectField } from "./multi-select-field";
+import { PhoneField } from "./phone-field";
+import { RelationField } from "./relation-field";
+
+export interface RelationMeta {
+  name: string;
+  label: string;
+  pluralLabel: string;
+  slug: string;
+  titleField: string;
+}
+
+export interface WidgetProps {
+  id: string;
+  name: string;
+  /** Resource name and field key, for upload actions. */
+  resourceName: string;
+  fieldKey: string;
+  field: StoredField & { label: string };
+  value: string | boolean;
+  onChange: (value: string | boolean) => void;
+  invalid: boolean;
+  disabled?: boolean;
+  /** belongsTo: the related resource and the current value's title. */
+  relation?: RelationMeta & { initialTitle?: string };
+}
+
+const NONE = "__none__";
+
+/** The input for a field, chosen from its kind in the descriptor. */
+export function FieldWidget(props: WidgetProps) {
+  const { id, name, field, value, onChange, invalid, disabled, relation, resourceName, fieldKey } = props;
+  const text = typeof value === "string" ? value : "";
+  const common = { id, name, disabled, "aria-invalid": invalid || undefined, placeholder: field.placeholder };
+
+  switch (field.kind) {
+    case "text":
+      return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
+
+    case "int":
+    case "float":
+      return (
+        <Input
+          {...common}
+          type="text"
+          inputMode={field.kind === "int" ? "numeric" : "decimal"}
+          className="tabular-nums"
+          value={text}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      );
+
+    case "boolean":
+      return (
+        <Switch
+          id={id}
+          name={name}
+          disabled={disabled}
+          aria-invalid={invalid || undefined}
+          checked={value === true}
+          onCheckedChange={(checked) => onChange(checked)}
+        />
+      );
+
+    case "enum":
+      if (field.widget === "radio") {
+        return (
+          <RadioGroup id={id} name={name} value={text} onValueChange={onChange} disabled={disabled} aria-invalid={invalid || undefined} className="flex flex-wrap gap-x-5 gap-y-2.5">
+            {field.options.map((option) => (
+              <div key={option} className="flex items-center gap-2">
+                <RadioGroupItem id={`${id}-${option}`} value={option} aria-invalid={invalid || undefined} />
+                <Label htmlFor={`${id}-${option}`} className="font-normal">
+                  {optionLabel(field, option)}
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        );
+      }
+      return (
+        // No selection is `undefined`, so the placeholder shows; "None" clears an optional value.
+        <Select value={text || undefined} onValueChange={(next) => onChange(next === NONE ? "" : next)} disabled={disabled} name={name}>
+          <SelectTrigger id={id} aria-invalid={invalid || undefined} className="w-full">
+            <SelectValue placeholder={field.placeholder ?? `Choose ${field.label.toLowerCase()}`} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {!field.required && <SelectItem value={NONE}>None</SelectItem>}
+              {field.options.map((option) => (
+                <SelectItem key={option} value={option}>
+                  {optionLabel(field, option)}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+
+    case "multiselect":
+      return (
+        <MultiSelectField id={id} field={field as MultiSelectDef & { label: string }} value={text} onChange={onChange} invalid={invalid} disabled={disabled} />
+      );
+
+    case "date":
+      return (
+        <DateField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
+      );
+
+    case "datetime":
+      return (
+        <DateTimeField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
+      );
+
+    case "belongsTo":
+      return relation ? (
+        <RelationField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} relation={relation} />
+      ) : (
+        <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />
+      );
+
+    case "file":
+      return (
+        <FileField
+          id={id}
+          value={text}
+          onChange={onChange}
+          invalid={invalid}
+          disabled={disabled}
+          field={field as FileFieldDef & { label: string }}
+          resourceName={resourceName}
+          fieldKey={fieldKey}
+        />
+      );
+
+    case "string":
+      switch (field.format) {
+        case "tel":
+          return <PhoneField id={id} name={name} label={field.label} value={text} onChange={onChange} invalid={invalid} disabled={disabled} placeholder={field.placeholder} />;
+        case "country":
+          return <CountryField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />;
+        case "color":
+          return (
+            <div className="flex items-center gap-2">
+              <input
+                type="color"
+                aria-label={`${field.label} picker`}
+                value={/^#[0-9a-f]{6}$/i.test(text) ? text : "#000000"}
+                onChange={(event) => onChange(event.target.value)}
+                disabled={disabled}
+                className="h-9 w-11 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1"
+              />
+              <Input {...common} className="font-mono" placeholder={field.placeholder ?? "#f2541d"} value={text} onChange={(event) => onChange(event.target.value)} />
+            </div>
+          );
+        case "slug":
+          return (
+            <Input {...common} className="font-mono" placeholder={field.placeholder ?? "my-first-post"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(slugify(text))} />
+          );
+        case "domain":
+          return (
+            <Input {...common} inputMode="url" autoCapitalize="none" spellCheck={false} placeholder={field.placeholder ?? "example.com"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(normalizeDomain(text))} />
+          );
+        case "email":
+          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)} />;
+        default:
+          return <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />;
+      }
+
+    default:
+      return <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />;
+  }
+}

package/templates/app/components/admin/fields/multi-select-field.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { optionLabel, parseMultiValue, type MultiSelectField as MultiSelectDef } from "@flaredev/core";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+
+interface Props {
+  id: string;
+  field: MultiSelectDef & { label: string };
+  /** Form state: a JSON array of the picked values. */
+  value: string;
+  onChange: (value: string) => void;
+  invalid: boolean;
+  disabled?: boolean;
+}
+
+/** A `multiselect` field: one checkbox per option, in the descriptor's order. */
+export function MultiSelectField({ id, field, value, onChange, invalid, disabled }: Props) {
+  const picked = parseMultiValue(value);
+  const toggle = (option: string, on: boolean) => {
+    const next = field.options.filter((item) => (item === option ? on : picked.includes(item)));
+    onChange(JSON.stringify(next));
+  };
+
+  return (
+    <div id={id} role="group" aria-label={field.label} aria-invalid={invalid || undefined} className="grid gap-2.5 sm:grid-cols-2">
+      {field.options.map((option) => {
+        const optionId = `${id}-${option}`;
+        return (
+          <div key={option} className="flex items-center gap-2">
+            <Checkbox
+              id={optionId}
+              checked={picked.includes(option)}
+              onCheckedChange={(checked) => toggle(option, checked === true)}
+              disabled={disabled}
+              aria-invalid={invalid || undefined}
+            />
+            <Label htmlFor={optionId} className="font-normal">
+              {optionLabel(field, option)}
+            </Label>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/app/components/admin/fields/phone-field.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { splitPhone, toE164 } from "@flaredev/core";
+import { Input } from "@/components/ui/input";
+import { DialCodePicker } from "./country-field";
+
+interface Props {
+  id: string;
+  name: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  invalid: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+/** The viewer's region from their browser language ("en-UG" → "UG"), else US. */
+function localRegion(): string {
+  try {
+    return new Intl.Locale(navigator.language).maximize().region ?? "US";
+  } catch {
+    return "US";
+  }
+}
+
+/**
+ * A `tel` field: a searchable country-code picker and the number. Stores E.164
+ * ("+256772123456"); a number pasted with its own "+code" switches the country.
+ */
+export function PhoneField({ id, name, label, value, onChange, invalid, disabled, placeholder }: Props) {
+  const initial = splitPhone(value);
+  const [country, setCountry] = useState(initial.country ?? "US");
+  const [national, setNational] = useState(initial.national);
+
+  // On a new record, start from the viewer's own country (after hydration, so server and client agree).
+  useEffect(() => {
+    if (!value && !initial.country) setCountry(localRegion());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const emit = (nextCountry: string, nextNational: string) => onChange(nextNational.trim() ? toE164(nextCountry, nextNational) : "");
+
+  return (
+    <div className="flex">
+      <DialCodePicker
+        value={country}
+        disabled={disabled}
+        invalid={invalid}
+        label={`Country code for ${label}`}
+        onChange={(next) => {
+          setCountry(next.code);
+          emit(next.code, national);
+        }}
+      />
+      <Input
+        id={id}
+        name={name}
+        type="tel"
+        inputMode="tel"
+        autoComplete="tel-national"
+        className="rounded-l-none tabular-nums"
+        placeholder={placeholder ?? "772 123456"}
+        disabled={disabled}
+        aria-invalid={invalid || undefined}
+        value={national}
+        onChange={(event) => {
+          const text = event.target.value;
+          if (text.trim().startsWith("+")) {
+            // A full international number: take its country and keep the rest.
+            const parsed = splitPhone(toE164(country, text));
+            if (parsed.country) {
+              setCountry(parsed.country);
+              setNational(parsed.national);
+              onChange(toE164(parsed.country, parsed.national));
+              return;
+            }
+          }
+          setNational(text);
+          emit(country, text);
+        }}
+      />
+    </div>
+  );
+}