@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/forms/emoji-picker.tsx

@@ -0,0 +1,109 @@
+// Refer to emoji-picker-react README.md file for more details https://github.com/ealush/emoji-picker-react
+"use client";
+
+import dynamic from "next/dynamic";
+import { Theme } from "emoji-picker-react";
+import { Smile } from "lucide-react";
+
+import type { Button } from "../primitives";
+import type { ComponentProps, ComponentPropsWithoutRef } from "react";
+
+import { cn } from "../../utils";
+
+import { useIsDarkMode } from "../../hooks";
+import { buttonVariants } from "../primitives";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/client";
+
+// Avoid errors such as "document is not defined" on the server side
+// See https://github.com/ealush/emoji-picker-react?tab=readme-ov-file#nextjs
+const Picker = dynamic(
+  () => {
+    return import("emoji-picker-react");
+  },
+  { ssr: false },
+);
+
+import type { PickerProps } from "emoji-picker-react";
+
+interface EmojiPickerProps extends PickerProps {
+  popoverContentClassName?: string;
+  popoverContentOptions?: ComponentPropsWithoutRef<typeof PopoverContent>;
+  buttonClassName?: string;
+  buttonOptions?: ComponentProps<typeof Button>;
+  placeholder?: string;
+}
+
+export function EmojiPicker({
+  popoverContentClassName,
+  popoverContentOptions,
+  buttonClassName,
+  buttonOptions,
+  ...props
+}: EmojiPickerProps) {
+  const isDarkMode = useIsDarkMode();
+
+  const theme = isDarkMode ? Theme.DARK : Theme.LIGHT;
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        className={cn(
+          buttonVariants({ variant: "ghost", size: "icon" }),
+          buttonClassName,
+        )}
+        {...buttonOptions}
+        aria-label="Emoji"
+      >
+        <Smile className="h-4 w-4" />
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("w-auto p-0", popoverContentClassName)}
+        align="start"
+        {...popoverContentOptions}
+      >
+        <Picker theme={theme} searchPlaceholder="Search..." {...props} />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function ReactionPicker({
+  popoverContentClassName,
+  popoverContentOptions,
+  buttonClassName,
+  buttonOptions,
+  ...props
+}: EmojiPickerProps) {
+  const isDarkMode = useIsDarkMode();
+
+  const theme = isDarkMode ? Theme.DARK : Theme.LIGHT;
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        className={cn(
+          buttonVariants({ variant: "ghost", size: "icon" }),
+          buttonClassName,
+        )}
+        {...buttonOptions}
+        aria-label="Emoji"
+      >
+        <Smile className="h-4 w-4" />
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("w-auto p-0", popoverContentClassName)}
+        align="start"
+        {...popoverContentOptions}
+      >
+        <Picker
+          theme={theme}
+          searchPlaceholder="Search..."
+          lazyLoadEmojis
+          allowExpandReactions={false}
+          {...props}
+          reactionsDefaultOpen
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/ui/forms/file-dropzone.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Image from "next/image";
+import { useDropzone } from "react-dropzone";
+import { Loader2, UploadCloud, X } from "lucide-react";
+
+import type { FileType } from "../../types";
+import type { DropzoneOptions } from "react-dropzone";
+
+import { cn, formatFileSize, wait } from "../../utils";
+
+import { Button } from "../primitives";
+import { FileThumbnail } from "./file-thumbnail";
+import { ScrollArea } from "../primitives/client";
+
+export interface FileDropzoneProps extends Partial<DropzoneOptions> {
+  className?: string;
+  value?: FileType[];
+  onFilesChange?: (files: FileType[]) => void;
+}
+
+export function FileDropzone({
+  className,
+  value,
+  onFilesChange,
+  ...props
+}: FileDropzoneProps) {
+  const [files, setFiles] = useState<FileType[]>(value || []);
+  const [loadingFiles, setLoadingFiles] = useState<Set<string>>(new Set());
+
+  const maxFiles = props.multiple ? props.maxFiles : 1;
+  const isDisabled = maxFiles === files.length;
+
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      const newFiles = acceptedFiles.map((file) => ({
+        id: crypto.randomUUID(),
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        url: URL.createObjectURL(file),
+      }));
+
+      const updatedFiles = [...files, ...newFiles];
+      setFiles(updatedFiles);
+      onFilesChange?.(updatedFiles);
+      setLoadingFiles(new Set(newFiles.map((file) => file.id)));
+
+      // Simulate file processing
+      for (const file of newFiles) {
+        await wait(2000); // Simulate 2 seconds of processing
+        setLoadingFiles((prev) => {
+          const newLoadingFiles = new Set(prev);
+          newLoadingFiles.delete(file.id);
+          return newLoadingFiles;
+        });
+      }
+    },
+    [files, onFilesChange],
+  );
+
+  useEffect(() => {
+    if (value) {
+      setFiles(value);
+    }
+  }, [value]);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    disabled: isDisabled,
+    ...props,
+    maxFiles,
+  });
+
+  const removeFile = (fileId: string) => {
+    const updatedFiles = files.filter((file) => {
+      if (file.id === fileId) {
+        URL.revokeObjectURL(file.url);
+        return false;
+      }
+
+      return true;
+    });
+
+    setFiles(updatedFiles);
+    onFilesChange?.(updatedFiles);
+  };
+
+  return (
+    <div
+      data-slot="file-dropzone"
+      {...(() => {
+        const { popover, ...rest } = getRootProps() as any;
+        return rest;
+      })()}
+      className={cn(
+        "h-[17.75rem] w-full relative flex rounded-lg border-2 border-dashed border-muted-foreground cursor-pointer transition-colors hover:border-primary hover:bg-muted/50",
+        isDragActive && "border-primary bg-muted/50",
+        isDisabled && "cursor-not-allowed",
+        className,
+      )}
+    >
+      <input
+        {...(() => {
+          const { popover, ...rest } = getInputProps() as any;
+          return rest;
+        })()}
+      />
+      <ScrollArea className="w-0 flex-1 p-6">
+        {files.length > 0 ? (
+          <div className="grid gap-4 grid-cols-2">
+            {files.map((file) => (
+              <div
+                key={file.id}
+                className="relative flex flex-col gap-2 rounded-lg border bg-background p-2 cursor-auto"
+              >
+                {file.type.startsWith("image/") ? (
+                  <Image
+                    src={file.url}
+                    alt={file.name}
+                    width={165}
+                    height={165}
+                    className="self-center aspect-square rounded object-contain pointer-events-none"
+                  />
+                ) : (
+                  <FileThumbnail
+                    fileName={file.name}
+                    className="self-center aspect-square size-full text-sm"
+                  />
+                )}
+                {loadingFiles.has(file.id) && (
+                  <div className="absolute inset-0 flex items-center justify-center bg-background/50 rounded">
+                    <Loader2 className="h-8 w-8 text-primary animate-spin" />
+                  </div>
+                )}
+                <div className="space-y-1">
+                  <p className="text-sm font-medium truncate">{file.name}</p>
+                  <p className="text-xs text-muted-foreground font-semibold">
+                    {formatFileSize(file.size)}
+                  </p>
+                </div>
+                <Button
+                  variant="secondary"
+                  size="icon"
+                  className="absolute end-1 top-1 h-4 w-4"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeFile(file.id);
+                  }}
+                  aria-label="Remove"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="h-56 flex flex-col justify-center items-center gap-2 text-center p-4">
+            <UploadCloud className="h-8 w-8 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">
+              Drag and drop some files here, or click to select files
+            </p>
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}

package/src/ui/forms/file-thumbnail.tsx

@@ -0,0 +1,29 @@
+import { FileIcon } from "lucide-react";
+
+import { cn } from "../../utils";
+
+interface FileThumbnailProps {
+  fileName: string;
+  className?: string;
+}
+
+export function FileThumbnail({ fileName, className }: FileThumbnailProps) {
+  // Extract the file extension from the file name
+  const fileExtension = fileName
+    .slice(fileName.lastIndexOf(".") + 1)
+    .toUpperCase();
+
+  return (
+    <div className={cn("relative size-8 text-[6px] font-black", className)}>
+      <FileIcon className="size-full stroke-1" aria-labelledby="file-name" />
+      <div
+        className="absolute inset-0 flex justify-center items-center"
+        id="file-name"
+        aria-hidden
+      >
+        <span className="select-none">{fileExtension}</span>
+        <span className="sr-only">File</span>
+      </div>
+    </div>
+  );
+}

package/src/ui/forms/index.tsx

@@ -0,0 +1,201 @@
+// @goerp/core/ui/forms
+// Form components for GoERP applications
+// Based on react-hook-form and shadcn/ui patterns
+
+"use client";
+
+import { createContext, useContext, useId } from "react";
+import type { ReactElement } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider as ReactHookFormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import type { ComponentProps } from "react";
+import type {
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  Control,
+} from "react-hook-form";
+
+import { cn } from "../../utils";
+import { Label } from "../primitives/client";
+
+export * from "./radio-group";
+export * from "./rating";
+export * from "./command";
+export * from "./multi-select";
+export * from "./date-picker";
+export * from "./date-range-picker";
+export * from "./date-time-picker";
+export * from "./emoji-picker";
+export * from "./file-dropzone";
+export * from "./file-thumbnail";
+export * from "./input-file";
+export * from "./input-group";
+export * from "./input-otp";
+export * from "./input-phone";
+export * from "./input-spin";
+export * from "./input-tags";
+export * from "./input-time";
+export * from "./multiple-date-picker";
+export * from "./time-picker";
+export * from "./editor";
+
+// Form component that accepts UseFormReturn from react-hook-form
+// Using type assertion to avoid subscribe property requirement (react-hook-form version compatibility)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Form = ReactHookFormProvider as any;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+// FormField component with version-compatible types
+export function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+  props: Omit<ControllerProps<TFieldValues, TName>, "control"> & {
+    // Allow control from different react-hook-form versions for compatibility
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    control?: any;
+  },
+) {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      {/* Type assertion to handle react-hook-form version compatibility */}
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      <Controller {...(props as any)} />
+    </FormFieldContext.Provider>
+  );
+}
+
+export function useFormField() {
+  const fieldContext = useContext(FormFieldContext);
+  const itemContext = useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+}
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+export function FormItem({ className, ...props }: ComponentProps<"div">) {
+  const id = useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+export function FormLabel({
+  className,
+  ...props
+}: ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+export function FormControl({ ...props }: ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+export function FormDescription({ className, ...props }: ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function FormMessage({
+  className,
+  children,
+  ...props
+}: ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}

package/src/ui/forms/input-file.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+
+import type { ChangeEvent, ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+import { Button } from "../primitives";
+
+interface InputFileProps
+  extends Omit<ComponentProps<"input">, "value" | "onChange"> {
+  containerClassName?: string;
+  buttonVariant?: ComponentProps<typeof Button>["variant"];
+  buttonLabel?: string;
+  placeholder?: string;
+  value?: FileList;
+  onValueChange?: (value: FileList) => void;
+}
+
+export function InputFile({
+  className,
+  containerClassName,
+  buttonVariant,
+  buttonLabel,
+  placeholder = "No file chosen",
+  value,
+  onValueChange,
+  ...props
+}: InputFileProps) {
+  const [fileName, setFileName] = useState<string>(placeholder);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Forward the ref to the internal ref
+  useImperativeHandle(props.ref, () => inputRef.current!);
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+
+    if (files) {
+      if (files.length > 1) {
+        setFileName(`${files.length} Files`);
+      } else if (files.length === 1) {
+        setFileName(files[0].name);
+      } else {
+        setFileName(placeholder);
+      }
+
+      onValueChange?.(files);
+    }
+  };
+
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+
+  useEffect(() => {
+    if (value) {
+      if (value.length > 1) {
+        setFileName(`${value.length} Files`);
+      } else {
+        setFileName(value[0].name);
+      }
+    } else {
+      setFileName(placeholder);
+    }
+  }, [value, placeholder]);
+
+  return (
+    <div
+      data-slot="input-file"
+      className={cn(
+        "h-9 w-full flex rounded-md border border-input bg-transparent text-sm transition-colors",
+        props.disabled && "cursor-not-allowed opacity-50",
+        containerClassName,
+      )}
+    >
+      <Button
+        type="button"
+        variant={buttonVariant}
+        className="h-full w-28 rounded-e-none border-0 border-e border-input"
+        onClick={handleClick}
+        disabled={props.disabled}
+      >
+        {buttonLabel ?? `Choose File${props.multiple ? "s" : ""}`}
+      </Button>
+      <div className="flex-1 flex items-center text-muted-foreground px-3 break-all">
+        <span className="w-0 flex-1 truncate">{fileName}</span>
+      </div>
+      <input
+        {...props}
+        ref={inputRef}
+        type="file"
+        className={cn("hidden", className)}
+        onChange={handleFileChange}
+      />
+    </div>
+  );
+}

package/src/ui/forms/input-group.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+export interface InputGroupProps extends ComponentProps<"div"> {}
+
+export function InputGroup({ className, children, ...props }: InputGroupProps) {
+  return (
+    <div
+      data-slot="input-group"
+      className={cn(
+        "flex min-h-9 w-full rounded-md border border-input bg-transparent text-sm transition-colors [&>*:not(.input-group-text)]:border-0 [&>input]:z-10 [&>input]:first:rounded-e-none [&>input]:last:rounded-s-none [&>input:not(:first-child):not(:last-child)]:rounded-none [&>textarea]:z-10 [&>textarea]:first:rounded-e-none [&>textarea]:last:rounded-s-none [&>textarea:not(:first-child):not(:last-child)]:rounded-none [&>button]:first:rounded-e-none [&>button]:last:rounded-s-none [&>button]:[&:not(:first-child):not(:last-child)]:rounded-none",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface InputGroupTextProps extends ComponentProps<"div"> {
+  merged?: boolean;
+}
+
+export function InputGroupText({
+  className,
+  merged = false,
+  ...props
+}: InputGroupTextProps) {
+  return (
+    <div
+      data-slot="input-group-text"
+      className={cn(
+        "input-group-text",
+        "flex items-center justify-center border-input px-3 py-1 text-sm text-muted-foreground",
+        !merged &&
+          "first:rounded-s-md last:rounded-e-md first:border-e last:border-s [&:not(:first-child):not(:last-child)]:border-x",
+        className,
+      )}
+      {...props}
+    />
+  );
+}