@viliha/vui-ui 1.1.8 → 1.2.0

package/template/app/(app)/forms/page.tsx

@@ -0,0 +1,388 @@
+"use client";
+
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { format } from "date-fns";
+import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react";
+import { Pencil2Icon } from "@radix-ui/react-icons";
+import { toast } from "sonner";
+
+import { cn } from "@/lib/utils";
+import { Breadcrumbs } from "@/app/_components/breadcrumbs";
+import { SetPageTitle } from "@/app/_components/set-page-title";
+import { Demo } from "@/app/_components/showcase";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { Toaster } from "@/components/ui/sonner";
+
+const COUNTRIES = [
+  { value: "us", label: "United States" },
+  { value: "gb", label: "United Kingdom" },
+  { value: "in", label: "India" },
+  { value: "de", label: "Germany" },
+  { value: "jp", label: "Japan" },
+];
+
+const schema = z.object({
+  username: z.string().min(2, "At least 2 characters."),
+  email: z.string().email("Enter a valid email."),
+  bio: z.string().max(160, "160 characters max.").optional(),
+  role: z.string().min(1, "Pick a role."),
+  country: z.string().min(1, "Pick a country."),
+  dob: z.date({ message: "Pick a date." }),
+  plan: z.enum(["free", "pro", "team"], { message: "Choose a plan." }),
+  volume: z.number().min(0).max(100),
+  marketing: z.boolean(),
+  terms: z.boolean().refine((v) => v, "You must accept the terms."),
+  pin: z.string().length(6, "Enter all 6 digits."),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+export default function FormsPage() {
+  const [comboOpen, setComboOpen] = React.useState(false);
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      username: "",
+      email: "",
+      bio: "",
+      role: "",
+      country: "",
+      plan: undefined,
+      volume: 50,
+      marketing: true,
+      terms: false,
+      pin: "",
+    },
+  });
+
+  function onSubmit(values: FormValues) {
+    toast("Form submitted", {
+      description: (
+        <pre className="mt-1 max-h-48 overflow-auto rounded bg-muted p-2 text-xs">
+          {JSON.stringify(values, null, 2)}
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <SetPageTitle title="Forms" icon={Pencil2Icon} />
+      <Toaster />
+
+      {/* Action header */}
+      <div className="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4">
+        <Breadcrumbs />
+        <span className="hidden truncate text-muted-foreground md:block">
+          shadcn/ui Form — react-hook-form + Zod, validated inline.
+        </span>
+      </div>
+
+      {/* Content */}
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-4 p-4">
+          <div className="rounded-lg border border-border bg-muted/40 px-4 py-3 text-sm leading-relaxed text-muted-foreground">
+            One <code className="font-mono text-foreground">Form</code> wiring
+            every shadcn field type — input, textarea, select, combobox, date
+            picker, radio, checkbox, switch, slider and OTP — with{" "}
+            <strong className="text-foreground">Zod</strong> validation and
+            inline <code className="font-mono text-foreground">FormMessage</code>{" "}
+            errors. Submit with empty fields to see validation.
+          </div>
+
+          <Demo title="Everything form" desc="Fully validated, themed by tokens.">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="grid w-full grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2"
+              >
+                <FormField
+                  control={form.control}
+                  name="username"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Username</FormLabel>
+                      <FormControl>
+                        <Input placeholder="ada" {...field} />
+                      </FormControl>
+                      <FormDescription>Your public display name.</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
+                        <Input type="email" placeholder="you@example.com" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="bio"
+                  render={({ field }) => (
+                    <FormItem className="sm:col-span-2">
+                      <FormLabel>Bio</FormLabel>
+                      <FormControl>
+                        <Textarea placeholder="Tell us about yourself" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="role"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Role</FormLabel>
+                      <Select onValueChange={field.onChange} value={field.value}>
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select a role" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="administrator">Administrator</SelectItem>
+                          <SelectItem value="manager">Manager</SelectItem>
+                          <SelectItem value="member">Member</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="country"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-col">
+                      <FormLabel>Country</FormLabel>
+                      <Popover open={comboOpen} onOpenChange={setComboOpen}>
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              variant="outline"
+                              role="combobox"
+                              className={cn(
+                                "justify-between",
+                                !field.value && "text-muted-foreground",
+                              )}
+                            >
+                              {field.value
+                                ? COUNTRIES.find((c) => c.value === field.value)?.label
+                                : "Select country"}
+                              <ChevronsUpDown className="ml-2 size-4 opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search country…" />
+                            <CommandList>
+                              <CommandEmpty>No country found.</CommandEmpty>
+                              <CommandGroup>
+                                {COUNTRIES.map((c) => (
+                                  <CommandItem
+                                    key={c.value}
+                                    value={c.label}
+                                    onSelect={() => {
+                                      form.setValue("country", c.value, {
+                                        shouldValidate: true,
+                                      });
+                                      setComboOpen(false);
+                                    }}
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 size-4",
+                                        field.value === c.value
+                                          ? "opacity-100"
+                                          : "opacity-0",
+                                      )}
+                                    />
+                                    {c.label}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                      <FormDescription>Searchable combobox.</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="dob"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-col">
+                      <FormLabel>Date of birth</FormLabel>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              variant="outline"
+                              className={cn(
+                                "justify-start text-left font-normal",
+                                !field.value && "text-muted-foreground",
+                              )}
+                            >
+                              <CalendarIcon className="mr-2 size-4" />
+                              {field.value ? format(field.value, "PPP") : "Pick a date"}
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={field.value}
+                            onSelect={field.onChange}
+                            captionLayout="dropdown"
+                          />
+                        </PopoverContent>
+                      </Popover>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="plan"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Plan</FormLabel>
+                      <FormControl>
+                        <RadioGroup
+                          onValueChange={field.onChange}
+                          value={field.value}
+                          className="flex gap-6"
+                        >
+                          {["free", "pro", "team"].map((p) => (
+                            <label key={p} className="flex items-center gap-2 text-sm capitalize">
+                              <RadioGroupItem value={p} /> {p}
+                            </label>
+                          ))}
+                        </RadioGroup>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="volume"
+                  render={({ field }) => (
+                    <FormItem className="sm:col-span-2">
+                      <FormLabel>Volume — {field.value}</FormLabel>
+                      <FormControl>
+                        <Slider
+                          value={[field.value]}
+                          max={100}
+                          step={1}
+                          onValueChange={(v) => field.onChange(v[0])}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="pin"
+                  render={({ field }) => (
+                    <FormItem className="sm:col-span-2">
+                      <FormLabel>Verification code</FormLabel>
+                      <FormControl>
+                        <InputOTP maxLength={6} value={field.value} onChange={field.onChange}>
+                          <InputOTPGroup>
+                            {Array.from({ length: 6 }, (_, i) => (
+                              <InputOTPSlot key={i} index={i} />
+                            ))}
+                          </InputOTPGroup>
+                        </InputOTP>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="marketing"
+                  render={({ field }) => (
+                    <FormItem className="flex items-center justify-between rounded-lg border border-border p-3 sm:col-span-2">
+                      <div className="space-y-0.5">
+                        <FormLabel>Marketing emails</FormLabel>
+                        <FormDescription>Product news and offers.</FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="terms"
+                  render={({ field }) => (
+                    <FormItem className="flex items-start gap-2 sm:col-span-2">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Accept terms and conditions</FormLabel>
+                        <FormMessage />
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <div className="flex gap-2 sm:col-span-2">
+                  <Button type="submit">Submit</Button>
+                  <Button type="button" variant="outline" onClick={() => form.reset()}>
+                    Reset
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </Demo>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/app/(app)/layout.tsx

@@ -0,0 +1,74 @@
+import { PageChromeProvider } from "@viliha/vui-ui/record-view";
+import { FOOTER_NOTICE, FOOTER_OVERRIDDEN, SITE } from "@/lib/seo";
+import {
+  AppSidebar,
+  MobileNav,
+  SidebarProvider,
+} from "@/app/_components/app-sidebar";
+import { TopBar } from "@/app/_components/top-bar";
+import { Breadcrumbs } from "@/app/_components/breadcrumbs";
+import { QuickActionsProvider } from "@/app/_components/quick-actions";
+import { GlobalSearchProvider } from "@/app/_components/global-search";
+import {
+  KeepAliveTabs,
+  OpenTabsProvider,
+  TabStrip,
+} from "@/app/_components/open-tabs";
+
+export default function AppLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <SidebarProvider>
+      <QuickActionsProvider>
+       <GlobalSearchProvider>
+        <OpenTabsProvider>
+        <div className="flex h-screen overflow-hidden">
+          <AppSidebar />
+          <PageChromeProvider titleLeading={<Breadcrumbs />}>
+            <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+              <TopBar />
+              <TabStrip />
+              {/* Single scroll owner is each page's own inner content area; this
+                  wrapper clips (overflow-hidden) and is `relative` so any
+                  absolutely-positioned descendant (e.g. cmdk's hidden label) is
+                  contained here instead of escaping to extend the document. */}
+              <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden pb-14 md:pb-0">
+                {/* Keep-alive: open tabs stay mounted so switching is instant
+                    (no remount/flash) and each page keeps its live state. */}
+                <KeepAliveTabs>{children}</KeepAliveTabs>
+              </div>
+              <footer className="hidden shrink-0 border-t border-border bg-background px-4 py-1 text-center text-[10px] text-muted-foreground md:block">
+                {FOOTER_OVERRIDDEN ? (
+                  FOOTER_NOTICE
+                ) : (
+                  <>
+                    © {SITE.copyrightYear}{" "}
+                    {SITE.companyUrl ? (
+                      <a
+                        href={SITE.companyUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline-offset-2 hover:text-foreground hover:underline"
+                      >
+                        {SITE.company}
+                      </a>
+                    ) : (
+                      SITE.company
+                    )}{" "}
+                    · {SITE.license}
+                  </>
+                )}
+              </footer>
+            </div>
+          </PageChromeProvider>
+          <MobileNav />
+        </div>
+        </OpenTabsProvider>
+       </GlobalSearchProvider>
+      </QuickActionsProvider>
+    </SidebarProvider>
+  );
+}

package/template/app/(app)/markets/markets-table.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  CubeIcon as Building,
+  GlobeIcon as Compass,
+  RulerHorizontalIcon as Ruler,
+  SewingPinFilledIcon as MapPin,
+} from "@radix-ui/react-icons";
+
+import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
+import { markets, type Market } from "@/lib/mock-data";
+
+function formatCenter(market: Market): string {
+  if (market.centerLatitude === null || market.centerLongitude === null) {
+    return "—";
+  }
+  return `${market.centerLatitude.toFixed(4)}, ${market.centerLongitude.toFixed(4)}`;
+}
+
+const fields: RecordField<Market>[] = [
+  { key: "name", label: "Name", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "organization", label: "Organization", icon: Building, editable: true, width: 200, group: "General" },
+  {
+    key: "centerLatitude",
+    label: "Center (lat, lng)",
+    icon: Compass,
+    width: 180,
+    group: "System",
+    render: (row) => (
+      <span className="whitespace-nowrap font-mono tabular-nums text-muted-foreground">
+        {formatCenter(row)}
+      </span>
+    ),
+  },
+  {
+    key: "radiusMiles",
+    label: "Radius",
+    icon: Ruler,
+    // No explicit align — auto-aligns center (numeric).
+    group: "System",
+    render: (row) => (
+      <span className="tabular-nums">
+        {row.radiusMiles === null ? (
+          <span className="text-muted-foreground">—</span>
+        ) : (
+          `${row.radiusMiles} mi`
+        )}
+      </span>
+    ),
+  },
+];
+
+export function MarketsTable() {
+  return (
+    <RecordView
+      title="Markets"
+      singular="Market"
+      icon={MapPin}
+      fields={fields}
+      initialData={markets}
+      getPrimary={(row) => ({
+        title: row.name,
+        subtitle: row.organization,
+        initials: row.name.slice(0, 2).toUpperCase(),
+      })}
+      makeEmptyRow={() => ({
+        id: Date.now(),
+        organization: "",
+        name: "",
+        centerLatitude: null,
+        centerLongitude: null,
+        radiusMiles: null,
+      })}
+    />
+  );
+}

package/template/app/(app)/markets/page.tsx

@@ -0,0 +1,13 @@
+import { pageMeta } from "@/lib/seo";
+
+import { MarketsTable } from "./markets-table";
+
+export const metadata = pageMeta("/markets");
+
+export default function MarketsPage() {
+  return (
+    <main className="h-full">
+      <MarketsTable />
+    </main>
+  );
+}

package/template/app/(app)/organizations/edit/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+import { RecordForm } from "@viliha/vui-ui/record-view";
+import { SetPageTitle } from "@/app/_components/set-page-title";
+import { orgStore } from "@/lib/org-store";
+import {
+  fields,
+  getPrimary,
+  ORG_FORM_DESCRIPTION,
+  ORG_ICON,
+  ORG_SINGULAR,
+  ORG_TITLE,
+} from "../organizations-config";
+
+function EditOrganizationForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const row = orgStore.get(Number(searchParams.get("id")));
+
+  if (!row) {
+    // Unknown id — e.g. a refresh cleared an in-session record.
+    return (
+      <main className="grid h-full place-items-center p-8 text-center text-muted-foreground">
+        <p>
+          Organization not found.{" "}
+          <button
+            type="button"
+            onClick={() => router.push("/organizations")}
+            className="text-[var(--button-primary)] hover:underline"
+          >
+            Back to organizations
+          </button>
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="h-full">
+      <SetPageTitle title={ORG_TITLE} icon={ORG_ICON} />
+      <RecordForm
+        persistKey={`/organizations/edit?id=${row.id}`}
+        columns={1}
+        fields={fields}
+        row={row}
+        title={ORG_TITLE}
+        singular={ORG_SINGULAR}
+        icon={ORG_ICON}
+        getPrimary={getPrimary}
+        formDescription={ORG_FORM_DESCRIPTION}
+        onHome={() => router.push("/dashboard")}
+        onSave={(saved) => {
+          orgStore.update(saved);
+          router.push("/organizations");
+        }}
+        onCancel={() => router.push("/organizations")}
+      />
+    </main>
+  );
+}
+
+export default function EditOrganizationPage() {
+  // useSearchParams needs a Suspense boundary under static export.
+  return (
+    <Suspense>
+      <EditOrganizationForm />
+    </Suspense>
+  );
+}

package/template/app/(app)/organizations/new/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { RecordForm } from "@viliha/vui-ui/record-view";
+import { SetPageTitle } from "@/app/_components/set-page-title";
+import { orgStore } from "@/lib/org-store";
+import {
+  fields,
+  getPrimary,
+  makeEmptyRow,
+  ORG_FORM_DESCRIPTION,
+  ORG_ICON,
+  ORG_SINGULAR,
+  ORG_TITLE,
+} from "../organizations-config";
+
+export default function NewOrganizationPage() {
+  const router = useRouter();
+  // Stable draft row (a fresh id per mount) so the form doesn't reset on render.
+  const [row] = useState(makeEmptyRow);
+  return (
+    <main className="h-full">
+      <SetPageTitle title={ORG_TITLE} icon={ORG_ICON} />
+      <RecordForm
+        isNew
+        persistKey="/organizations/new"
+        columns={1}
+        fields={fields}
+        row={row}
+        title={ORG_TITLE}
+        singular={ORG_SINGULAR}
+        icon={ORG_ICON}
+        getPrimary={getPrimary}
+        formDescription={ORG_FORM_DESCRIPTION}
+        onHome={() => router.push("/dashboard")}
+        onSave={(saved) => {
+          orgStore.add(saved);
+          router.push("/organizations");
+        }}
+        onCancel={() => router.push("/organizations")}
+      />
+    </main>
+  );
+}