@viliha/vui-ui 1.1.7 → 1.2.0

package/template/app/_components/auth.tsx

@@ -0,0 +1,184 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { RequiredMark } from "@viliha/vui-ui/required-mark";
+
+/** Multicolor Google "G" (brand mark — colors are intentional). */
+export function GoogleIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" className={cn("size-4", className)} aria-hidden="true">
+      <path
+        fill="#4285F4"
+        d="M23.06 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h6.2a5.3 5.3 0 0 1-2.3 3.48v2.89h3.72c2.18-2 3.44-4.96 3.44-8.38Z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 24c3.1 0 5.7-1.03 7.6-2.79l-3.72-2.88c-1.03.69-2.35 1.1-3.88 1.1-2.98 0-5.5-2.01-6.4-4.72H1.75v2.97A11.5 11.5 0 0 0 12 24Z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.6 14.71a6.9 6.9 0 0 1 0-4.42V7.32H1.75a11.5 11.5 0 0 0 0 10.36l3.85-2.97Z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 4.75c1.68 0 3.19.58 4.38 1.71l3.28-3.28C17.7 1.19 15.1 0 12 0 7.44 0 3.5 2.62 1.75 6.42l3.85 2.97C6.5 6.76 9.02 4.75 12 4.75Z"
+      />
+    </svg>
+  );
+}
+
+/** "or" separator between provider buttons and the email form. */
+export function OrDivider({ label = "or" }: { label?: string }) {
+  return (
+    <div className="flex items-center gap-3 py-1 text-muted-foreground">
+      <span className="h-px flex-1 bg-border" />
+      <span>{label}</span>
+      <span className="h-px flex-1 bg-border" />
+    </div>
+  );
+}
+
+/** Labeled form field with optional required marker / hint / error text. */
+export function Field({
+  label,
+  htmlFor,
+  hint,
+  error,
+  required,
+  children,
+}: {
+  label: string;
+  htmlFor?: string;
+  hint?: string;
+  error?: string;
+  required?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <label
+        htmlFor={htmlFor}
+        className="flex items-center gap-1 font-medium leading-relaxed"
+      >
+        {label}
+        {required && <RequiredMark />}
+      </label>
+      {children}
+      {error ? (
+        <p className="text-destructive">{error}</p>
+      ) : hint ? (
+        <p className="text-muted-foreground">{hint}</p>
+      ) : null}
+    </div>
+  );
+}
+
+/** Circular icon badge used on confirmation screens ("check your email"). */
+export function IconBadge({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto grid size-12 place-items-center rounded-full bg-primary/10 text-primary">
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Sectioned auth card — the same header / body / footer treatment as the app's
+ * dialogs (bordered sections), so every auth screen is consistent and reusable.
+ * Compose: <AuthCard><AuthCardHeader …/><AuthCardBody>…</AuthCardBody>
+ * <AuthCardFooter>…</AuthCardFooter></AuthCard>.
+ */
+export function AuthCard({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-lg border border-border bg-background shadow-sm",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Bordered header section: optional icon badge, title, optional description. */
+export function AuthCardHeader({
+  title,
+  description,
+  icon,
+}: {
+  title: string;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+}) {
+  return (
+    <div className="border-b border-border bg-muted/40 px-5 py-4 text-center">
+      {icon && (
+        <div className="mb-3">
+          <IconBadge>{icon}</IconBadge>
+        </div>
+      )}
+      <h1 className="text-base font-semibold tracking-tight">{title}</h1>
+      {description && (
+        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+      )}
+    </div>
+  );
+}
+
+/** Content section. */
+export function AuthCardBody({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={cn("space-y-4 px-5 py-6 leading-relaxed", className)}>
+      {children}
+    </div>
+  );
+}
+
+/** Secondary nav row in a footer (e.g. "New here? Sign up") — set off from the
+ *  primary action by its own top divider for a clean, consistent hierarchy. */
+export function AuthCardAside({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "mt-4 space-y-3 border-t border-border pt-4 text-center leading-relaxed text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Bordered actions/footer section. */
+export function AuthCardFooter({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={cn("border-t border-border bg-muted/40 px-5 py-4", className)}>
+      {children}
+    </div>
+  );
+}

package/template/app/_components/breadcrumbs.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+
+import { Breadcrumbs as UiBreadcrumbs } from "@viliha/vui-ui/breadcrumbs";
+import { crumbsFor } from "@/app/_components/route-meta";
+
+/** Route-derived breadcrumb trail. Delegates rendering to the shared
+    `Breadcrumbs` component so every page uses one consistent style. */
+export function Breadcrumbs() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const crumbs = crumbsFor(pathname);
+
+  return (
+    <UiBreadcrumbs
+      onBack={() => router.back()}
+      linkComponent={Link}
+      crumbs={crumbs.map((c) => ({
+        label: c.label,
+        href: c.isLast ? undefined : c.href,
+      }))}
+    />
+  );
+}

package/template/app/_components/global-search.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+
+import {
+  CommandPalette,
+  type CommandAction,
+} from "@viliha/vui-ui/command-palette";
+import { organizations, employees } from "@/lib/demo-data";
+import {
+  branches,
+  departments,
+  markets,
+  businesses,
+  regions,
+  countries,
+  cities,
+  currencies,
+  languages,
+} from "@/lib/mock-data";
+import { companies, people, opportunities } from "@/lib/crm-data";
+
+/**
+ * Global search — a ⌘⌥K palette that searches across *records* (organizations,
+ * people, opportunities, reference data…), as opposed to Quick actions (⌘K),
+ * which navigates between *pages*. Both reuse the same headless `CommandPalette`
+ * from @viliha/vui-ui; only the action list differs.
+ *
+ * The record index below is the demo's stand-in for a real search backend —
+ * swap `INDEX` for results from your API and everything else stays the same.
+ * Each result navigates to where the record lives (its list page, or the edit
+ * route when there is one).
+ */
+
+type Indexed = {
+  id: string;
+  label: string;
+  group: string;
+  /** Extra text the search matches beyond the label. */
+  keywords: string;
+  /** Where selecting the result navigates. */
+  href: string;
+};
+
+/** Flat, searchable index of every demo record. Built once at module load. */
+const INDEX: Indexed[] = [
+  ...organizations.map((o) => ({
+    id: `org-${o.id}`,
+    label: o.name,
+    group: "Organizations",
+    keywords: `${o.url} ${o.email} ${o.country}`,
+    href: `/organizations/edit?id=${o.id}`,
+  })),
+  ...employees.map((e) => ({
+    id: `emp-${e.id}`,
+    label: `${e.firstName} ${e.lastName}`,
+    group: "Employees",
+    keywords: `${e.code} ${e.email} ${e.department} ${e.organization}`,
+    href: "/employees",
+  })),
+  ...branches.map((b) => ({
+    id: `br-${b.id}`,
+    label: b.name,
+    group: "Branches",
+    keywords: `${b.code} ${b.city} ${b.organization} ${b.email}`,
+    href: "/branches",
+  })),
+  ...departments.map((d) => ({
+    id: `dep-${d.id}`,
+    label: d.title,
+    group: "Departments",
+    keywords: `${d.code} ${d.organization}`,
+    href: "/departments",
+  })),
+  ...markets.map((m) => ({
+    id: `mkt-${m.id}`,
+    label: m.name,
+    group: "Markets",
+    keywords: m.organization,
+    href: "/markets",
+  })),
+  ...businesses.map((b) => ({
+    id: `biz-${b.id}`,
+    label: b.title,
+    group: "Businesses",
+    keywords: `${b.code} ${b.description}`,
+    href: "/businesses",
+  })),
+  ...companies.map((c) => ({
+    id: `co-${c.id}`,
+    label: c.name,
+    group: "Companies",
+    keywords: `${c.domain} ${c.industry} ${c.city} ${c.country}`,
+    href: "/crm/companies",
+  })),
+  ...people.map((p) => ({
+    id: `pp-${p.id}`,
+    label: `${p.firstName} ${p.lastName}`,
+    group: "People",
+    keywords: `${p.email} ${p.jobTitle} ${p.company} ${p.city}`,
+    href: "/crm/people",
+  })),
+  ...opportunities.map((o) => ({
+    id: `opp-${o.id}`,
+    label: o.name,
+    group: "Opportunities",
+    keywords: `${o.company} ${o.owner} ${o.stage}`,
+    href: "/crm/opportunities",
+  })),
+  ...regions.map((r) => ({
+    id: `rg-${r.id}`,
+    label: r.name,
+    group: "Regions",
+    keywords: r.code,
+    href: "/system/regions",
+  })),
+  ...countries.map((c) => ({
+    id: `ct-${c.id}`,
+    label: c.name,
+    group: "Countries",
+    keywords: `${c.code} ${c.region}`,
+    href: "/system/countries",
+  })),
+  ...cities.map((c) => ({
+    id: `cy-${c.id}`,
+    label: c.name,
+    group: "Cities",
+    keywords: `${c.state} ${c.country}`,
+    href: "/system/cities",
+  })),
+  ...currencies.map((c) => ({
+    id: `cur-${c.id}`,
+    label: c.name,
+    group: "Currencies",
+    keywords: `${c.code} ${c.symbol}`,
+    href: "/system/currencies",
+  })),
+  ...languages.map((l) => ({
+    id: `lng-${l.id}`,
+    label: l.name,
+    group: "Languages",
+    keywords: l.code,
+    href: "/system/languages",
+  })),
+];
+
+type Ctx = { open: () => void };
+const GlobalSearchContext = React.createContext<Ctx | null>(null);
+
+export function useGlobalSearch(): Ctx {
+  const ctx = React.useContext(GlobalSearchContext);
+  if (!ctx)
+    throw new Error(
+      "useGlobalSearch must be used within <GlobalSearchProvider>",
+    );
+  return ctx;
+}
+
+/** Holds the open state, mounts the palette once, and wires the global ⌘⌥K
+ *  shortcut. Wrap the app shell with this. */
+export function GlobalSearchProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const router = useRouter();
+
+  React.useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      // ⌘⌥K / Ctrl+Alt+K — ⌘K (no Alt) is Quick actions. e.code, because macOS
+      // Option remaps e.key to a composed character.
+      if ((e.metaKey || e.ctrlKey) && e.altKey && e.code === "KeyK") {
+        e.preventDefault();
+        setOpen((v) => !v);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  const actions = React.useMemo<CommandAction[]>(
+    () =>
+      INDEX.map((r) => ({
+        id: r.id,
+        label: r.label,
+        group: r.group,
+        keywords: r.keywords,
+        onSelect: () => router.push(r.href),
+      })),
+    [router],
+  );
+
+  const value = React.useMemo(() => ({ open: () => setOpen(true) }), []);
+
+  return (
+    <GlobalSearchContext.Provider value={value}>
+      {children}
+      <CommandPalette
+        open={open}
+        onClose={() => setOpen(false)}
+        actions={actions}
+        placeholder="Search organizations, people, records…"
+        emptyMessage="No records match — try a name, code or email."
+      />
+    </GlobalSearchContext.Provider>
+  );
+}

package/template/app/_components/logo.tsx

@@ -0,0 +1,49 @@
+import Image from "next/image";
+
+import { cn } from "@/lib/utils";
+
+type LogoProps = {
+  /** Kept for call-site compatibility; the mark is the same either way. */
+  variant?: "mark" | "wordmark";
+  className?: string;
+};
+
+/** Optional custom logo: drop an image in /public and set NEXT_PUBLIC_LOGO_URL
+ *  (e.g. "/logo.svg"). Unset falls back to the built-in mark below. */
+const LOGO_URL = process.env.NEXT_PUBLIC_LOGO_URL;
+
+/**
+ * App logo — your image via NEXT_PUBLIC_LOGO_URL, else a self-contained rounded
+ * blue badge with a stylised "V". Scales with the `className` size (default 24px).
+ */
+export function Logo({ className }: LogoProps) {
+  if (LOGO_URL) {
+    return (
+      <Image
+        src={LOGO_URL}
+        alt="Logo"
+        width={24}
+        height={24}
+        className={cn("h-6 w-6 object-contain", className)}
+      />
+    );
+  }
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      role="img"
+      aria-label="Vui Starter"
+      className={cn("h-6 w-6", className)}
+    >
+      <rect width="24" height="24" rx="6" fill="var(--brand-indigo)" />
+      <path
+        d="M6.5 7.25 L12 16.75 L17.5 7.25"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/template/app/_components/nav-config.ts

@@ -0,0 +1,138 @@
+import {
+  AvatarIcon as UserCircle,
+  BackpackIcon as Briefcase,
+  BarChartIcon as BarChart3,
+  BookmarkIcon as Flag,
+  CalendarIcon,
+  ChatBubbleIcon,
+  CheckCircledIcon as BadgeCheck,
+  CubeIcon as Building,
+  ExclamationTriangleIcon as AlertTriangle,
+  CubeIcon as Building2,
+  DashboardIcon as LayoutGrid,
+  EnterIcon as LogIn,
+  GearIcon as Settings,
+  GlobeIcon as Globe,
+  HomeIcon as Home,
+  HomeIcon as Landmark,
+  IdCardIcon as Contact,
+  LockClosedIcon as Lock,
+  MixIcon as Blocks,
+  Pencil2Icon as FormInput,
+  PersonIcon as Users,
+  QuestionMarkCircledIcon as HelpCircle,
+  RowsIcon as StepsIcon,
+  SewingPinFilledIcon as MapPin,
+  Share2Icon as Network,
+  TargetIcon as Target,
+  TextIcon as Languages,
+  TokensIcon as Coins,
+} from "@radix-ui/react-icons";
+
+/** Single source of truth for navigation. The sidebar renders it, and the
+ *  breadcrumbs derive their behaviour from it (see SECTION_INDEX) — so adding a
+ *  section or moving a page only ever needs editing here. */
+
+/** Shared icon component type (all Radix icons share this shape). */
+export type IconType = typeof Home;
+export type NavLink = { label: string; href: string; icon: IconType; color?: string };
+/** A collapsible parent with nested links (a "subsection"). */
+export type NavGroup = {
+  label: string;
+  icon: IconType;
+  color?: string;
+  children: NavLink[];
+};
+export type NavEntry = NavLink | NavGroup;
+export type NavSection = { title?: string; items: NavEntry[] };
+
+export function isGroup(entry: NavEntry): entry is NavGroup {
+  return (entry as NavGroup).children !== undefined;
+}
+
+export const NAV: NavSection[] = [
+  {
+    items: [
+      { label: "Home", href: "/dashboard", icon: Home, color: "text-blue-500" },
+      { label: "Charts", href: "/charts", icon: BarChart3, color: "text-fuchsia-500" },
+      {
+        label: "Auth",
+        icon: Lock,
+        color: "text-rose-500",
+        children: [
+          { label: "Sign in", href: "/auth/signin", icon: LogIn, color: "text-blue-500" },
+          { label: "Sign up", href: "/auth/signup", icon: Users, color: "text-emerald-500" },
+          { label: "Forgot password", href: "/auth/forgot-password", icon: HelpCircle, color: "text-amber-500" },
+          { label: "Reset password", href: "/auth/reset-password", icon: Lock, color: "text-violet-500" },
+          { label: "Verify code", href: "/auth/verify", icon: BadgeCheck, color: "text-teal-500" },
+          // Links to a non-existent path so it renders the real 404 (not-found.tsx).
+          { label: "404 page", href: "/404", icon: AlertTriangle, color: "text-slate-500" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "shadcn/ui",
+    items: [
+      { label: "Components", href: "/components", icon: Blocks, color: "text-indigo-500" },
+      { label: "Forms", href: "/forms", icon: FormInput, color: "text-teal-500" },
+      { label: "Steps", href: "/steps", icon: StepsIcon, color: "text-violet-500" },
+      { label: "Calendar", href: "/calendar", icon: CalendarIcon, color: "text-rose-500" },
+      { label: "Chat", href: "/chat", icon: ChatBubbleIcon, color: "text-sky-500" },
+      { label: "Support", href: "/support", icon: HelpCircle, color: "text-emerald-500" },
+    ],
+  },
+  {
+    title: "Records",
+    items: [
+      { label: "Organizations", href: "/organizations", icon: Building2, color: "text-blue-500" },
+      { label: "Branches", href: "/branches", icon: Network, color: "text-violet-500" },
+      { label: "Departments", href: "/departments", icon: LayoutGrid, color: "text-amber-500" },
+      { label: "Employees", href: "/employees", icon: Users, color: "text-cyan-500" },
+      { label: "Markets", href: "/markets", icon: MapPin, color: "text-rose-500" },
+      { label: "Businesses", href: "/businesses", icon: Briefcase, color: "text-emerald-500" },
+    ],
+  },
+  {
+    title: "Workspace",
+    items: [
+      {
+        label: "CRM",
+        icon: UserCircle,
+        color: "text-indigo-500",
+        children: [
+          { label: "Companies", href: "/crm/companies", icon: Building, color: "text-blue-500" },
+          { label: "People", href: "/crm/people", icon: Contact, color: "text-sky-500" },
+          { label: "Opportunities", href: "/crm/opportunities", icon: Target, color: "text-orange-500" },
+        ],
+      },
+      {
+        label: "System",
+        icon: Settings,
+        color: "text-slate-500",
+        children: [
+          { label: "Regions", href: "/system/regions", icon: Globe, color: "text-teal-500" },
+          { label: "Countries", href: "/system/countries", icon: Flag, color: "text-red-500" },
+          { label: "Cities", href: "/system/cities", icon: Landmark, color: "text-amber-500" },
+          { label: "Currencies", href: "/system/currencies", icon: Coins, color: "text-green-500" },
+          { label: "Languages", href: "/system/languages", icon: Languages, color: "text-purple-500" },
+        ],
+      },
+    ],
+  },
+];
+
+/** Group parents have no index page of their own, so a breadcrumb (or any link)
+ *  for one would 404. Derived automatically from NAV: each group maps its parent
+ *  path → its first child, e.g. "/crm" → "/crm/companies". Add a group to NAV and
+ *  its breadcrumb resolves correctly with zero extra wiring. */
+export const SECTION_INDEX: Record<string, string> = (() => {
+  const map: Record<string, string> = {};
+  for (const section of NAV) {
+    for (const entry of section.items) {
+      const first = isGroup(entry) ? entry.children[0] : undefined;
+      if (first) map[first.href.slice(0, first.href.lastIndexOf("/")) || "/"] = first.href;
+    }
+  }
+  return map;
+})();