@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/layout/command-menu.tsx

@@ -0,0 +1,355 @@
+"use client";
+
+import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
+import { ChevronDown, Search } from "lucide-react";
+
+import type { DictionaryType } from "../../hooks";
+import type {
+  LocaleType,
+  NavigationNestedItem,
+  NavigationRootItem,
+  NavigationType,
+  SearchGroup,
+} from "../../types";
+import type { DialogProps } from "@radix-ui/react-dialog";
+
+import { ensureLocalizedPathname } from "../../utils";
+import {
+  cn,
+  getDictionaryValue,
+  isActivePathname,
+  titleCaseToCamelCase,
+} from "../../utils";
+
+import {
+  Badge,
+  Button,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  DialogTitle,
+  Keyboard,
+  ScrollArea,
+  DynamicIcon,
+  Spinner,
+} from "../index";
+
+import { useDebounce, useSettings } from "../../hooks";
+
+interface CommandMenuProps extends DialogProps {
+  dictionary: DictionaryType;
+  navigation: NavigationType[];
+  buttonClassName?: string;
+  variant?: "default" | "icon" | "fiori";
+  onSearch?: (query: string) => void;
+  searchResults?: SearchGroup[];
+  loading?: boolean;
+}
+
+export function CommandMenu({
+  buttonClassName,
+  dictionary,
+  navigation,
+  variant = "default",
+  onSearch,
+  searchResults,
+  loading,
+  ...props
+}: CommandMenuProps) {
+  const { settings } = useSettings(); // Use settings context if needed
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const debouncedQuery = useDebounce(query, 300);
+  const pathname = usePathname();
+  const params = useParams();
+  const router = useRouter();
+
+  const locale = params.lang as LocaleType;
+
+  const filteredNavigation = useMemo(() => {
+    if (!query) return navigation;
+    const lowerQuery = query.toLowerCase();
+
+    const filterItem = (
+      item: NavigationRootItem | NavigationNestedItem,
+    ): NavigationRootItem | NavigationNestedItem | null => {
+      const title = getDictionaryValue(
+        titleCaseToCamelCase(item.title),
+        dictionary.navigation as Record<string, unknown>,
+        item.title,
+      ).toLowerCase();
+
+      const label =
+        item.label &&
+        getDictionaryValue(
+          titleCaseToCamelCase(item.label),
+          dictionary.label as Record<string, unknown>,
+          item.label,
+        ).toLowerCase();
+
+      const matchesSelf =
+        title.includes(lowerQuery) || (label && label.includes(lowerQuery));
+
+      if (item.items) {
+        const filteredChildren = item.items
+          .map((subItem) => filterItem(subItem))
+          .filter(Boolean) as NavigationNestedItem[];
+
+        if (filteredChildren.length > 0) {
+          return { ...item, items: filteredChildren };
+        }
+
+        if (matchesSelf) return item;
+        return null;
+      }
+
+      return matchesSelf ? item : null;
+    };
+
+    return navigation
+      .map((nav) => {
+        const filteredItems = nav.items
+          .map((item) => filterItem(item))
+          .filter(Boolean) as NavigationRootItem[];
+
+        if (filteredItems.length > 0) {
+          return { ...nav, items: filteredItems };
+        }
+        return null;
+      })
+      .filter(Boolean) as NavigationType[];
+  }, [query, navigation, dictionary]);
+
+  useEffect(() => {
+    if (onSearch) {
+      onSearch(debouncedQuery);
+    }
+  }, [debouncedQuery, onSearch]);
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (!newOpen) {
+      setQuery(""); // Reset query on close
+    }
+  };
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return;
+        }
+
+        e.preventDefault();
+        setOpen((open) => !open);
+      }
+    };
+
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  const runCommand = useCallback((command: () => unknown) => {
+    setOpen(false);
+    command();
+  }, []);
+
+  const renderMenuItem = (item: NavigationRootItem | NavigationNestedItem) => {
+    const title = getDictionaryValue(
+      titleCaseToCamelCase(item.title),
+      dictionary.navigation as Record<string, unknown>,
+      item.title,
+    );
+    const label =
+      item.label &&
+      getDictionaryValue(
+        titleCaseToCamelCase(item.label),
+        dictionary.label as Record<string, unknown>,
+        item.label,
+      );
+
+    // If the item has nested items, render it with a collapsible dropdown.
+    if (item.items) {
+      return (
+        <Collapsible key={item.title} className="group/collapsible">
+          <CommandItem asChild>
+            <CollapsibleTrigger className="w-full flex justify-between items-center gap-2 px-2 py-1.5 [&[data-state=open]>svg]:rotate-180">
+              <span className="flex items-center gap-2">
+                {"iconName" in item && (
+                  <DynamicIcon name={item.iconName} className="h-4 w-4" />
+                )}
+                <span>{title}</span>
+                {"label" in item && <Badge variant="secondary">{label}</Badge>}
+              </span>
+              <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+            </CollapsibleTrigger>
+          </CommandItem>
+          <CollapsibleContent className="ml-4 space-y-1 overflow-hidden border-l data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+            {item.items.map((subItem: NavigationNestedItem) =>
+              renderMenuItem(subItem),
+            )}
+          </CollapsibleContent>
+        </Collapsible>
+      );
+    }
+
+    // Otherwise, render the item with a link.
+    if ("href" in item) {
+      const localizedPathname = ensureLocalizedPathname(item.href, locale);
+      const isActive = isActivePathname(localizedPathname, pathname);
+
+      return (
+        <CommandItem
+          key={item.title}
+          onSelect={() => runCommand(() => router.push(localizedPathname))}
+          className={cn(
+            "flex items-center gap-2 px-2 py-1.5",
+            isActive && "bg-accent",
+          )}
+        >
+          {"iconName" in item ? (
+            <DynamicIcon name={item.iconName} />
+          ) : (
+            <DynamicIcon name="Circle" />
+          )}
+          <span>{title}</span>
+          {label && <Badge variant="secondary">{label}</Badge>}
+        </CommandItem>
+      );
+    }
+  };
+
+  return (
+    <>
+      <Button
+        variant={variant === "icon" ? "ghost" : "outline"}
+        size={variant === "icon" ? "icon-sm" : "default"}
+        className={cn(
+          variant === "icon"
+            ? ""
+            : variant === "fiori"
+              ? "w-[240px] justify-start rounded-full bg-accent/50 hover:bg-accent/70 border-none h-9 px-3 text-muted-foreground font-normal"
+              : "max-w-64 w-full justify-start px-3 rounded-md bg-muted/50 text-muted-foreground",
+          buttonClassName,
+        )}
+        onClick={() => setOpen(true)}
+        aria-label={dictionary.search.search}
+        {...props}
+      >
+        <Search className={cn("h-4 w-4", variant !== "icon" && "me-2")} />
+        {variant !== "icon" && (
+          <>
+            <span>{dictionary.search.search}</span>
+            {variant !== "fiori" && <Keyboard className="ms-auto">K</Keyboard>}
+          </>
+        )}
+      </Button>
+      <CommandDialog
+        open={open}
+        onOpenChange={handleOpenChange}
+        commandProps={{ shouldFilter: !onSearch }}
+        {...props}
+      >
+        <DialogTitle className="sr-only">Search Menu</DialogTitle>
+        <div
+          className="relative border-b px-3"
+          data-slot="command-input-wrapper"
+        >
+          <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 shrink-0 opacity-50" />
+          <input
+            className="flex h-11 w-full rounded-md bg-transparent py-3 pl-10 pr-10 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            placeholder={dictionary.search.typeCommand}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            autoFocus
+          />
+          {loading && (
+            <div className="absolute right-4 top-1/2 -translate-y-1/2">
+              <Spinner size="sm" />
+            </div>
+          )}
+        </div>
+        <CommandList>
+          {loading ? (
+            <div className="py-6 text-center text-sm text-muted-foreground">
+              Searching...
+            </div>
+          ) : (
+            !searchResults?.length &&
+            query && <CommandEmpty>{dictionary.search.noResults}</CommandEmpty>
+          )}
+
+          <ScrollArea className="h-[300px] max-h-[300px]">
+            {searchResults &&
+              searchResults.length > 0 &&
+              searchResults.map((group) => (
+                <CommandGroup key={group.heading} heading={group.heading}>
+                  {group.items.map((result) => (
+                    <CommandItem
+                      key={result.id}
+                      value={result.title}
+                      onSelect={() =>
+                        runCommand(() => {
+                          if (result.action) result.action();
+                          if (result.url) router.push(result.url);
+                        })
+                      }
+                    >
+                      {result.iconName ? (
+                        <DynamicIcon
+                          name={result.iconName}
+                          className="mr-2 h-4 w-4"
+                        />
+                      ) : (
+                        <div className="mr-2 h-4 w-4" />
+                      )}
+                      <div className="flex flex-col">
+                        <span>{result.title}</span>
+                        {result.subtitle && (
+                          <span className="text-xs text-muted-foreground">
+                            {result.subtitle}
+                          </span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))}
+
+            {filteredNavigation.map((nav) => {
+              const title = getDictionaryValue(
+                titleCaseToCamelCase(nav.title),
+                dictionary.navigation,
+                nav.title,
+              );
+
+              return (
+                <CommandGroup
+                  key={nav.title}
+                  heading={title}
+                  className="[&_[cmdk-group-items]]:space-y-1"
+                >
+                  {nav.items.map((item) => (
+                    <Fragment key={item.title}>{renderMenuItem(item)}</Fragment>
+                  ))}
+                </CommandGroup>
+              );
+            })}
+          </ScrollArea>
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

package/src/ui/layout/customizer.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { useCallback } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
+import {
+  AlignLeft,
+  AlignRight,
+  AlignStartHorizontal,
+  AlignStartVertical,
+  MoonStar,
+  RotateCcw,
+  Sun,
+  SunMoon,
+} from "lucide-react";
+
+import type {
+  LocaleType,
+  ModeType,
+  SidebarVariantType,
+  ThemeType,
+  RadiusType,
+  SidebarCollapsibleType,
+  DensityType,
+} from "../../types";
+import type { CSSProperties, ReactNode } from "react";
+
+import { radii, themes } from "../../configs";
+import { relocalizePathname } from "../../utils";
+import { cn } from "../../utils";
+
+import { useSettings } from "../../hooks"; // Exported from core/hooks
+
+import { Button } from "../index";
+import {
+  ScrollArea,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+} from "../primitives/client";
+
+interface CustomizerProps {
+  trigger?: ReactNode;
+  triggerClassName?: string;
+}
+
+const sidebarVariants: SidebarVariantType[] = ["sidebar", "floating", "inset"];
+const sidebarCollapsibleOptions: SidebarCollapsibleType[] = [
+  "offcanvas",
+  "icon",
+  "none",
+];
+const densityOptions: DensityType[] = ["comfortable", "compact"];
+
+export function Customizer({ trigger, triggerClassName }: CustomizerProps) {
+  const { settings, updateSettings, resetSettings } = useSettings();
+  const pathname = usePathname();
+  const router = useRouter();
+  const params = useParams();
+
+  const locale = params.lang as LocaleType;
+
+  const handleSetLocale = useCallback(
+    (localeName: LocaleType) => {
+      // Logic for locale set
+      updateSettings({ ...settings, locale: localeName });
+      router.push(relocalizePathname(pathname, localeName));
+    },
+    [settings, updateSettings, router, pathname],
+  );
+
+  const handleSetMode = useCallback(
+    (modeName: ModeType) => {
+      updateSettings({ ...settings, mode: modeName });
+    },
+    [settings, updateSettings],
+  );
+
+  const handleReset = useCallback(() => {
+    resetSettings();
+    router.push(relocalizePathname(pathname, "en"), { scroll: false });
+  }, [resetSettings, router, pathname]);
+
+  return (
+    <Sheet>
+      {trigger && <SheetTrigger asChild>{trigger}</SheetTrigger>}
+      <SheetPortal>
+        <SheetContent className="p-0" side="end">
+          <ScrollArea className="h-full p-4">
+            <div className="flex flex-1 flex-col space-y-4">
+              <SheetHeader>
+                <SheetTitle>Customizer</SheetTitle>
+                <SheetDescription>
+                  Pick a style and color for the dashboard.
+                </SheetDescription>
+              </SheetHeader>
+              <div className="space-y-1.5">
+                <p className="text-sm">Color</p>
+                <div className="grid grid-cols-3 gap-2">
+                  {Object.entries(themes).map(([name, value]) => {
+                    const isActive = settings.theme === name;
+
+                    return (
+                      <Button
+                        key={name}
+                        variant={isActive ? "secondary" : "default"}
+                        style={
+                          {
+                            "--primary":
+                              value.activeColor[
+                                settings.mode === "dark" ? "dark" : "light"
+                              ],
+                            "--primary-foreground":
+                              value.activeColor["foreground"],
+                          } as CSSProperties
+                        }
+                        onClick={() =>
+                          updateSettings({
+                            ...settings,
+                            theme: name as ThemeType,
+                          })
+                        }
+                      >
+                        <span>{value.label}</span>
+                      </Button>
+                    );
+                  })}
+                </div>
+              </div>
+              <div className="space-y-1.5">
+                <p className="text-sm">Radius</p>
+                <div className="grid grid-cols-5 gap-2">
+                  {radii.map((value) => (
+                    <Button
+                      variant={
+                        settings.radius === value ? "secondary" : "outline"
+                      }
+                      key={value}
+                      onClick={() => {
+                        updateSettings({
+                          ...settings,
+                          radius: value as RadiusType,
+                        });
+                      }}
+                    >
+                      {value}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+              <div className="space-y-1.5">
+                <p className="text-sm">Mode</p>
+                <div className="grid grid-cols-3 gap-2">
+                  <Button
+                    variant={
+                      settings.mode === "light" ? "secondary" : "outline"
+                    }
+                    onClick={() => handleSetMode("light")}
+                  >
+                    <Sun className="shrink-0 h-4 w-4 me-2" />
+                    Light
+                  </Button>
+                  <Button
+                    variant={settings.mode === "dark" ? "secondary" : "outline"}
+                    onClick={() => handleSetMode("dark")}
+                  >
+                    <MoonStar className="shrink-0 h-4 w-4 me-2" />
+                    Dark
+                  </Button>
+                  <Button
+                    variant={
+                      settings.mode === "system" ? "secondary" : "outline"
+                    }
+                    onClick={() => handleSetMode("system")}
+                  >
+                    <SunMoon className="shrink-0 h-4 w-4 me-2" />
+                    System
+                  </Button>
+                </div>
+                <div className="space-y-1.5">
+                  <span className="text-sm">Layout</span>
+                  <div className="grid grid-cols-2 gap-2">
+                    <Button
+                      variant={
+                        settings.layout === "horizontal"
+                          ? "secondary"
+                          : "outline"
+                      }
+                      onClick={() =>
+                        updateSettings({
+                          ...settings,
+                          layout: "horizontal",
+                        })
+                      }
+                    >
+                      <AlignStartHorizontal className="shrink-0 h-4 w-4 me-2" />
+                      Horizontal
+                    </Button>
+                    <Button
+                      variant={
+                        settings.layout === "vertical" ? "secondary" : "outline"
+                      }
+                      onClick={() =>
+                        updateSettings({
+                          ...settings,
+                          layout: "vertical",
+                        })
+                      }
+                    >
+                      <AlignStartVertical className="shrink-0 h-4 w-4 me-2" />
+                      Vertical
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <span className="text-sm">Sidebar Variant</span>
+                  <div className="grid grid-cols-3 gap-2">
+                    {sidebarVariants.map((variant) => (
+                      <Button
+                        key={variant}
+                        variant={
+                          settings.sidebarVariant === variant
+                            ? "secondary"
+                            : "outline"
+                        }
+                        onClick={() =>
+                          updateSettings({
+                            ...settings,
+                            sidebarVariant: variant,
+                          })
+                        }
+                      >
+                        {variant.charAt(0).toUpperCase() + variant.slice(1)}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <span className="text-sm">Sidebar Collapsible</span>
+                  <div className="grid grid-cols-3 gap-2">
+                    {sidebarCollapsibleOptions.map((option) => (
+                      <Button
+                        key={option}
+                        variant={
+                          settings.sidebarCollapsible === option
+                            ? "secondary"
+                            : "outline"
+                        }
+                        onClick={() =>
+                          updateSettings({
+                            ...settings,
+                            sidebarCollapsible: option,
+                          })
+                        }
+                      >
+                        {option.charAt(0).toUpperCase() + option.slice(1)}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <span className="text-sm">Density</span>
+                  <div className="grid grid-cols-2 gap-2">
+                    {densityOptions.map((density) => (
+                      <Button
+                        key={density}
+                        variant={
+                          settings.density === density ? "secondary" : "outline"
+                        }
+                        onClick={() =>
+                          updateSettings({
+                            ...settings,
+                            density: density,
+                          })
+                        }
+                      >
+                        {density.charAt(0).toUpperCase() + density.slice(1)}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <span className="text-sm">Language</span>
+                  <div className="grid grid-cols-2 gap-2">
+                    <Button
+                      variant={locale === "vi" ? "secondary" : "outline"}
+                      onClick={() => handleSetLocale("vi")}
+                    >
+                      <AlignLeft className="shrink-0 h-4 w-4 me-2" />
+                      VI
+                    </Button>
+                    <Button
+                      variant={locale === "en" ? "secondary" : "outline"}
+                      onClick={() => handleSetLocale("en")}
+                    >
+                      <AlignRight className="shrink-0 h-4 w-4 me-2" />
+                      EN
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              <Button
+                variant="outline"
+                className="w-full"
+                onClick={handleReset}
+              >
+                <RotateCcw className="shrink-0 h-4 w-4 me-2" />
+                Reset
+              </Button>
+            </div>
+          </ScrollArea>
+        </SheetContent>
+      </SheetPortal>
+    </Sheet>
+  );
+}