@carlonicora/nextjs-jsonapi 0.0.1 → 1.0.4

package/src/components/forms/FormSelect.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../shadcnui";
+
+export function FormSelect({
+  form,
+  id,
+  name,
+  placeholder,
+  disabled,
+  values,
+  onChange,
+  useRows,
+  testId,
+}: {
+  form: any;
+  id: string;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  values: { id: string; text: string }[];
+  onChange?: (value: string) => void;
+  useRows?: boolean;
+  testId?: string;
+}) {
+  return (
+    <div className={`flex w-full flex-col`}>
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className={`flex w-full ${useRows ? `flex-row items-center justify-between gap-x-4` : `flex-col`}`}>
+            {name && <FormLabel className={`${useRows ? `min-w-28` : ``}`}>{name}</FormLabel>}
+            <Select
+              onValueChange={(e) => {
+                field.onChange(e);
+                if (onChange) onChange(e);
+              }}
+              defaultValue={field.value}
+              data-testid={testId}
+            >
+              <FormControl className="w-full">
+                <SelectTrigger>
+                  <SelectValue placeholder={placeholder} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {values.map((type: { id: string; text: string }) => (
+                  <SelectItem key={type.id} value={type.id}>
+                    {type.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/forms/FormSlider.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useWatch } from "react-hook-form";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, Slider } from "../../shadcnui";
+
+export function FormSlider({
+  form,
+  id,
+  name,
+  disabled,
+  showPercentage,
+}: {
+  form: any;
+  id: string;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  showPercentage?: boolean;
+}) {
+  const value = useWatch({ control: form.control, name: id });
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className={`${name ? "mb-5" : "mb-1"}`}>
+            {name && <FormLabel>{name}</FormLabel>}
+            <FormControl>
+              <div>
+                {showPercentage && (
+                  <div className="text-muted-foreground mb-2 flex w-full justify-center text-xs">{`${value}%`}</div>
+                )}
+                <Slider
+                  onValueChange={(value: number[]) => form.setValue(id, value[0])}
+                  value={[value]}
+                  max={100}
+                  step={5}
+                  disabled={disabled === true || form.formState.isSubmitting}
+                />
+                {/* </div> */}
+              </div>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/forms/FormSwitch.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, Switch } from "../../shadcnui";
+
+export function FormSwitch({ form, id, name, disabled }: { form: any; id: string; name?: string; disabled?: boolean }) {
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className={`${name ? "mb-5" : "mb-1"}`}>
+            <FormControl>
+              <div className="flex flex-row gap-x-4">
+                <Switch checked={field.value} onCheckedChange={field.onChange} />
+                {name && <FormLabel>{name}</FormLabel>}
+              </div>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/forms/FormTextarea.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, Textarea } from "../../shadcnui";
+import { cn } from "../../utils";
+
+export function FormTextarea({
+  form,
+  id,
+  name,
+  className,
+  placeholder,
+  testId,
+}: {
+  form: any;
+  id: string;
+  name: string;
+  placeholder?: string;
+  className?: string;
+  testId?: string;
+}) {
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className="mb-5">
+            <FormLabel>{name}</FormLabel>
+            <FormControl>
+              <Textarea
+                {...field}
+                className={cn("min-h-96 w-full", className)}
+                disabled={form.formState.isSubmitting}
+                placeholder={placeholder}
+                data-testid={testId}
+              />
+            </FormControl>
+            <FormMessage data-testid={testId ? `${testId}-error` : undefined} />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/forms/MultiFileUploader.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { FileIcon, FileImageIcon, FileSpreadsheetIcon, FileTextIcon, UploadIcon, XIcon } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { DropzoneOptions } from "react-dropzone";
+import { cn } from "../../utils";
+import { FileInput, FileUploader } from "./FileUploader";
+
+type MultiFileUploaderProps = {
+  files: File[];
+  setFiles: (files: File[]) => void;
+};
+
+const dropzone = {
+  multiple: false,
+  maxSize: 100 * 1024 * 1024,
+  preventDropOnDocument: false,
+  accept: {
+    "application/images": [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".docx", ".xslx", ".pdf", ".txt", ".md"],
+  },
+} satisfies DropzoneOptions;
+
+export default function MultiFileUploader({ files, setFiles }: MultiFileUploaderProps) {
+  const uploadFiles = (newFiles: File[] | null) => {
+    if (!newFiles) return;
+
+    setFiles([...files, ...newFiles]);
+  };
+
+  const handleRemoveFile = (indexToRemove: number) => {
+    setFiles(files.filter((_, index) => index !== indexToRemove));
+  };
+
+  return (
+    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
+      <FileUploader
+        value={files}
+        onValueChange={uploadFiles}
+        dropzoneOptions={dropzone}
+        className="text-muted-foreground hover:text-primary relative aspect-square h-full cursor-pointer overflow-hidden rounded-lg border"
+      >
+        <FileInput className={cn("text-muted-foreground flex h-full w-full flex-col items-center justify-center")}>
+          <UploadIcon className="my-4 h-8 w-8" />
+        </FileInput>
+      </FileUploader>
+      {files.map((file, index) => (
+        <FilePreviewItem key={file.name + "-" + index} file={file} onRemoveClick={() => handleRemoveFile(index)} />
+      ))}
+    </div>
+  );
+}
+
+const FilePreviewItem = ({ file, onRemoveClick }: { file: File; onRemoveClick: () => void }) => {
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (file.type.startsWith("image/")) {
+      const url = URL.createObjectURL(file);
+      setObjectUrl(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    setObjectUrl(null);
+  }, [file]);
+
+  const getFileIcon = () => {
+    const extension = file.name.split(".").pop()?.toLowerCase();
+    if (file.type.startsWith("image/")) {
+      return <FileImageIcon className="text-muted h-10 w-10 sm:h-12 sm:w-12" />;
+    }
+    if (file.type === "application/pdf") {
+      return <FileTextIcon className="text-destructive h-10 w-10 sm:h-12 sm:w-12" />;
+    }
+    if (file.type.includes("wordprocessingml") || extension === "docx" || extension === "doc") {
+      return <FileTextIcon className="text-primary h-10 w-10 sm:h-12 sm:w-12" />;
+    }
+    if (file.type.includes("spreadsheetml") || extension === "xlsx" || extension === "xls") {
+      return <FileSpreadsheetIcon className="text-secondary h-10 w-10 sm:h-12 sm:w-12" />;
+    }
+    if (file.type.startsWith("text/")) {
+      return <FileTextIcon className="h-10 w-10 sm:h-12 sm:w-12" />;
+    }
+    return <FileIcon className="text-muted h-10 w-10 sm:h-12 sm:w-12" />;
+  };
+
+  return (
+    <div className="text-muted-foreground group relative aspect-square h-full overflow-hidden rounded-lg border">
+      <button
+        onClick={onRemoveClick}
+        className="absolute top-1.5 right-1.5 z-20 rounded-full bg-black/60 p-1 text-white opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100 hover:bg-red-600 focus:outline-none"
+        aria-label="Remove file"
+      >
+        <XIcon className="h-3.5 w-3.5" />
+      </button>
+      {objectUrl ? (
+        <Image src={objectUrl} alt={file.name} className="h-full w-full object-cover" width={200} height={200} />
+      ) : (
+        <div className="bg-muted/30 flex h-full w-full flex-col items-center justify-center p-2">
+          {getFileIcon()}
+          <span className="text-foreground/80 mt-2 w-full truncate px-1 text-center text-[10px] sm:text-xs">
+            {file.name}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/forms/PasswordInput.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button, Input } from "../../shadcnui";
+import { cn } from "../../utils";
+
+export interface PasswordInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(({ className, type, ...props }, ref) => {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const disabled = props.value === "" || props.value === undefined || props.disabled;
+  const t = useTranslations();
+
+  return (
+    <div className="relative">
+      <Input type={showPassword ? "text" : "password"} className={cn("", className)} ref={ref} {...props} />
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+        onClick={() => setShowPassword((prev) => !prev)}
+        disabled={disabled}
+      >
+        {showPassword && !disabled ? (
+          <EyeIcon className="h-4 w-4" aria-hidden="true" />
+        ) : (
+          <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+        )}
+        <span className="sr-only">{showPassword ? t(`generic.hide_password`) : t(`generic.show_password`)}</span>
+      </Button>
+
+      <style>{`
+					.hide-password-toggle::-ms-reveal,
+					.hide-password-toggle::-ms-clear {
+						visibility: hidden;
+						pointer-events: none;
+						display: none;
+					}
+				`}</style>
+    </div>
+  );
+});
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };

package/src/components/forms/index.ts

@@ -0,0 +1,21 @@
+export * from "./CommonAssociationForm";
+export * from "./CommonDeleter";
+export * from "./CommonEditorButtons";
+export * from "./CommonEditorHeader";
+export * from "./CommonEditorTrigger";
+export * from "./DatePickerPopover";
+export * from "./DateRangeSelector";
+export * from "./FileUploader";
+export * from "./FormCheckbox";
+export * from "./FormContainerGeneric";
+export * from "./FormDate";
+export * from "./FormDateTime";
+export * from "./FormInput";
+export * from "./FormPassword";
+export * from "./FormPlaceAutocomplete";
+export * from "./FormSelect";
+export * from "./FormSlider";
+export * from "./FormSwitch";
+export * from "./FormTextarea";
+export * from "./MultiFileUploader";
+export * from "./PasswordInput";

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export * from "./containers";
+export * from "./contents";
+export * from "./details";
+export * from "./editors";
+export * from "./errors";
+export * from "./forms";
+export * from "./navigations";
+export * from "./pages";
+export * from "./tables";
+
+export * from "../features/user/components";

package/src/components/navigations/Breadcrumb.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Fragment, useState } from "react";
+import { usePageUrlGenerator } from "../../hooks";
+import { BreadcrumbItemData } from "../../interfaces";
+import {
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Link,
+  Breadcrumb as UIBreadcrumb,
+} from "../../shadcnui";
+
+type BreadcrumbProps = { items: BreadcrumbItemData[] };
+
+const ITEMS_TO_DISPLAY = 3;
+
+export function Breadcrumb({ items }: BreadcrumbProps) {
+  const generateUrl = usePageUrlGenerator();
+  const t = useTranslations();
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  return (
+    <UIBreadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <Link href={generateUrl({ page: `/` })}>{t(`generic.home`)}</Link>
+        </BreadcrumbItem>
+        {items.length > 0 && <BreadcrumbSeparator />}
+
+        {items.length > ITEMS_TO_DISPLAY ? (
+          <>
+            <BreadcrumbItem>
+              {items[0].href ? <Link href={items[0].href}>{items[0].name}</Link> : <>{items[0].name}</>}
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <DropdownMenu open={open} onOpenChange={setOpen}>
+                <DropdownMenuTrigger className="flex items-center gap-1" aria-label="Toggle menu">
+                  <BreadcrumbEllipsis className="h-4 w-4" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  {items.slice(1, -ITEMS_TO_DISPLAY + 1).map((item, index) => (
+                    <DropdownMenuItem key={index}>
+                      <Link href={item.href ? item.href : "#"}>{item.name}</Link>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
+              <Fragment key={index}>
+                <BreadcrumbItem>
+                  {item.href ? <Link href={item.href}>{item.name}</Link> : <>{item.name}</>}
+                </BreadcrumbItem>
+                {index < items.slice(-ITEMS_TO_DISPLAY + 1).length - 1 && <BreadcrumbSeparator />}
+              </Fragment>
+            ))}
+          </>
+        ) : (
+          <>
+            {items.map((item, index) => (
+              <Fragment key={index}>
+                <BreadcrumbItem>
+                  {item.href ? <Link href={item.href}>{item.name}</Link> : <>{item.name}</>}
+                </BreadcrumbItem>
+                {index < items.length - 1 && <BreadcrumbSeparator />}
+              </Fragment>
+            ))}
+          </>
+        )}
+      </BreadcrumbList>
+    </UIBreadcrumb>
+  );
+}

package/src/components/navigations/ContentTitle.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ReactNode, useEffect, useState } from "react";
+import { cn } from "../../utils";
+
+type TitleProps = {
+  type?: string | string[];
+  element?: string;
+  functions?: ReactNode;
+  className?: string;
+};
+
+export function ContentTitle({ type, element, functions, className }: TitleProps) {
+  const [clientFunctions, setClientFunctions] = useState<ReactNode>(null);
+  const [isClient, setIsClient] = useState(false);
+
+  // Defer function rendering to client-side only to prevent hydration mismatches
+  // caused by Radix UI's dynamic ID generation in Dialog/AlertDialog components
+  useEffect(() => {
+    setIsClient(true);
+    setClientFunctions(functions);
+  }, [functions]);
+
+  if (!element) return null;
+
+  return (
+    <div className={cn(`mb-4 flex w-full flex-col`, className)}>
+      {(type || isClient) && (
+        <div className="flex flex-row items-center justify-between gap-x-4">
+          {type && <div className={`text-muted-foreground text-xl font-light`}>{type}</div>}
+          {isClient && clientFunctions && (
+            <div className="flex flex-row items-center justify-start">{clientFunctions}</div>
+          )}
+        </div>
+      )}
+      <div className={`text-primary w-full text-3xl font-semibold`}>{element}</div>
+    </div>
+  );
+}

package/src/components/navigations/Header.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useSharedContext } from "../../contexts/SharedContext";
+import { SidebarTrigger } from "../../shadcnui";
+import { Breadcrumb } from "./Breadcrumb";
+
+type HeaderProps = {
+  children?: React.ReactNode;
+};
+
+export function Header({ children }: HeaderProps) {
+  const { breadcrumbs } = useSharedContext();
+
+  return (
+    <header className={`sticky top-0 z-10 flex h-12 flex-col items-center justify-start gap-x-4 border-b`}>
+      <div className="bg-sidebar flex h-12 w-full flex-row items-center justify-between pl-2 pr-4">
+        <SidebarTrigger aria-label="Toggle sidebar" />
+        <div className="flex w-full flex-row items-center justify-start">
+          <Breadcrumb items={breadcrumbs} />
+        </div>
+        <div className="flex w-64 flex-row items-center justify-end gap-x-4 whitespace-nowrap">
+          {children ? children : null}
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/components/navigations/ModeToggleSwitch.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Switch } from "../../shadcnui";
+
+export function ModeToggleSwitch() {
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+  return (
+    <div className="flex items-center">
+      <Switch checked={theme === "dark"} onCheckedChange={handleToggle} className="relative">
+        {theme === "dark" ? (
+          <MoonIcon className="text-primary-foreground h-4 w-4" />
+        ) : (
+          <SunIcon className="text-primary h-4 w-4" />
+        )}
+      </Switch>
+    </div>
+  );
+}

package/src/components/navigations/PageSection.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import { ReactNode, useEffect, useState } from "react";
+import { v4 } from "uuid";
+
+type PageSectionProps = {
+  children: ReactNode;
+  title?: string;
+  options?: ReactNode[];
+  open?: boolean;
+  small?: boolean;
+  onToggle?: (isOpen: boolean) => void;
+};
+
+export function PageSection({ children, title, options, open, small, onToggle }: PageSectionProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(open ?? true);
+  const [shouldRender, setShouldRender] = useState<boolean>(open ?? true);
+
+  useEffect(() => {
+    if (onToggle) {
+      onToggle(isOpen);
+    }
+  }, [isOpen]);
+
+  const toggleOpen = () => setIsOpen(!isOpen);
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+    } else {
+      const timer = setTimeout(() => setShouldRender(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  return (
+    <section
+      id={title ? title.toLowerCase().replaceAll(" ", "") : v4()}
+      className={`${isOpen ? "mb-4" : "my-0"} flex w-full scroll-mt-40 flex-col`}
+    >
+      {title && (
+        <div
+          className={`${isOpen ? "mb-4" : "mb-0"} flex w-full justify-between border-b ${small ? `border-muted` : `border-primary`} pb-1`}
+        >
+          <div className="flex w-full cursor-pointer items-center justify-start gap-x-2" onClick={toggleOpen}>
+            {isOpen ? (
+              <ChevronDownIcon className={`text-primary h-4 w-4`} />
+            ) : (
+              <ChevronRightIcon className="text-primary h-4 w-4" />
+            )}
+            <h2 className={`flex w-full ${small === true ? `text-sm` : `text-lg`} text-primary font-semibold`}>
+              {title}
+            </h2>
+          </div>
+          {options && <div className="flex gap-2">{options}</div>}
+        </div>
+      )}
+      <div className={`overflow-hidden transition-all duration-300 ${isOpen ? "" : "max-h-0"}`}>
+        {shouldRender && children}
+      </div>
+    </section>
+  );
+}

package/src/components/navigations/RecentPagesNavigator.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { HistoryIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { recentPagesAtom } from "../../atoms";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Link,
+  useSidebar,
+} from "../../shadcnui";
+
+export function RecentPagesNavigator() {
+  const recentPages = useAtomValue(recentPagesAtom);
+  const t = useTranslations();
+  const { state } = useSidebar();
+
+  if (recentPages.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="flex w-full cursor-pointer items-center gap-2">
+          {state === "collapsed" ? <HistoryIcon className="h-4 w-4" /> : <span>{t(`generic.recent_pages`)}</span>}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-96">
+        <DropdownMenuLabel>{t(`generic.recent_pages`)}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {recentPages.map((page, index) => (
+          <DropdownMenuItem key={`${page.url}-${index}`} asChild>
+            <Link href={page.url} className="flex items-center gap-2">
+              <div className="flex flex-col">
+                <div className="truncate text-sm">{page.title}</div>
+                <div className="text-muted-foreground text-xs font-normal">
+                  {t(`types.${page.moduleType}`, { count: 1 })}
+                </div>
+              </div>
+            </Link>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}