@tuturuuu/ui 0.0.4

package/src/components/ui/custom/file-uploader.tsx

@@ -0,0 +1,349 @@
+'use client';
+
+import { useControllableState } from '../../../hooks/use-controllable-state';
+import { Button } from '../button';
+import { ScrollArea } from '../scroll-area';
+import { Separator } from '../separator';
+import { cn, formatBytes } from '@tuturuuu/utils/format';
+import { File, FileText, Upload, X } from 'lucide-react';
+import { HTMLAttributes, useCallback, useState } from 'react';
+import Dropzone, {
+  type DropzoneProps,
+  type FileRejection,
+} from 'react-dropzone';
+import { toast } from 'sonner';
+
+export interface StatedFile {
+  rawFile: File;
+  url: string;
+  status: 'pending' | 'uploading' | 'uploaded' | 'error';
+}
+
+interface FileUploaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Value of the uploader.
+   * @type StatedFile[]
+   * @default undefined
+   * @example value={files}
+   */
+  value?: StatedFile[];
+
+  /**
+   * Function to be called when the value changes.
+   * @type (files: StatedFile[]) => void
+   * @default undefined
+   * @example onValueChange={(files) => setFiles(files)}
+   */
+  // eslint-disable-next-line no-unused-vars
+  onValueChange?: (files: StatedFile[]) => void;
+
+  /**
+   * Function to be called when files are uploaded.
+   * @type (files: StatedFile[]) => Promise<void>
+   * @default undefined
+   * @example onUpload={(files) => uploadFiles(files)}
+   */
+  // eslint-disable-next-line no-unused-vars
+  onUpload?: (files: StatedFile[]) => Promise<void>;
+
+  /**
+   * Accepted file types for the uploader.
+   * @type { [key: string]: string[]}
+   * @default
+   * ```ts
+   * { "image/*": [] }
+   * ```
+   * @example accept={["image/png", "image/jpeg"]}
+   */
+  accept?: DropzoneProps['accept'];
+
+  /**
+   * Maximum file size for the uploader.
+   * @type number | undefined
+   * @default 1024 * 1024 * 2 // 2MB
+   * @example maxSize={1024 * 1024 * 2} // 2MB
+   */
+  maxSize?: DropzoneProps['maxSize'];
+
+  /**
+   * Maximum number of files for the uploader.
+   * @type number | undefined
+   * @default 1
+   * @example maxFileCount={4}
+   */
+  maxFileCount?: DropzoneProps['maxFiles'];
+
+  /**
+   * Whether the uploader should accept multiple files.
+   * @type boolean
+   * @default false
+   * @example multiple
+   */
+  multiple?: boolean;
+
+  /**
+   * Whether the uploader is disabled.
+   * @type boolean
+   * @default false
+   * @example disabled
+   */
+  disabled?: boolean;
+}
+
+export function FileUploader(props: FileUploaderProps) {
+  const {
+    value: valueProp,
+    onValueChange,
+    onUpload,
+    accept = {},
+    maxSize = 1024 * 1024 * 2,
+    maxFileCount = 1,
+    multiple = false,
+    disabled = false,
+    className,
+    ...dropzoneProps
+  } = props;
+
+  const [files, setFiles] = useControllableState({
+    prop: valueProp,
+    onChange: onValueChange,
+  });
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {
+        toast.error('Cannot upload more than 1 file at a time');
+        return;
+      }
+
+      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {
+        toast.error(`Cannot upload more than ${maxFileCount} files`);
+        return;
+      }
+
+      const newFiles: StatedFile[] = acceptedFiles.map((file) => ({
+        rawFile: file,
+        url: URL.createObjectURL(file),
+        status: 'pending',
+      }));
+
+      const updatedFiles = files ? [...files, ...newFiles] : newFiles;
+      setFiles(updatedFiles);
+
+      if (rejectedFiles.length > 0) {
+        rejectedFiles.forEach(({ file }) => {
+          toast.error(`File ${file.name} was rejected`);
+        });
+      }
+    },
+    [files, maxFileCount, multiple, onUpload, setFiles]
+  );
+
+  function onRemove(index: number) {
+    if (files?.[index]?.url) {
+      URL.revokeObjectURL(files[index].url);
+    }
+
+    const newFiles = files?.filter((_, i) => i !== index);
+    setFiles(newFiles);
+  }
+
+  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;
+
+  const [uploading, setUploading] = useState(false);
+
+  async function onSubmit() {
+    if (uploading || !files || !files.length) return;
+    setUploading(true);
+    await onUpload?.(files);
+    setUploading(false);
+  }
+
+  return (
+    <div className="relative flex flex-col overflow-hidden">
+      <Dropzone
+        onDrop={onDrop}
+        accept={accept}
+        maxSize={maxSize}
+        maxFiles={maxFileCount}
+        multiple={maxFileCount > 1 || multiple}
+        disabled={isDisabled}
+      >
+        {({ getRootProps, getInputProps, isDragActive }) => (
+          <div
+            {...getRootProps()}
+            className={cn(
+              'group relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-muted-foreground/25 px-6 py-2 text-center transition hover:bg-muted/25',
+              'ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden',
+              isDragActive && 'border-muted-foreground/50',
+              isDisabled && 'pointer-events-none opacity-60',
+              className
+            )}
+            {...dropzoneProps}
+          >
+            <input {...getInputProps()} />
+            {isDragActive ? (
+              <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
+                <div className="rounded-full border border-dashed p-3">
+                  <Upload
+                    className="size-7 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                </div>
+                <p className="font-medium text-muted-foreground">
+                  Drop the files here
+                </p>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
+                <div className="rounded-full border border-dashed p-3">
+                  <Upload
+                    className="size-7 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div className="flex flex-col gap-px">
+                  <p className="font-medium text-muted-foreground">
+                    Drag {`'n'`} drop files here, or click to select files
+                  </p>
+                  <p className="text-sm text-muted-foreground/70">
+                    You can upload
+                    {maxFileCount > 1
+                      ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}
+                      files (up to ${formatBytes(maxSize)} each)`
+                      : ` a file with ${formatBytes(maxSize)}`}
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </Dropzone>
+
+      {files?.length ? (
+        <ScrollArea className="h-fit w-full p-2 px-3">
+          <div className="flex max-h-48 flex-col gap-1 py-4">
+            {files?.map((file, index) => (
+              <FileCard
+                key={index}
+                file={file}
+                onRemove={() => onRemove(index)}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      ) : null}
+
+      <Separator className={files?.length ? 'mb-4' : 'my-4'} />
+
+      <div className="flex gap-2">
+        <Button
+          type="button"
+          className="w-fit"
+          onClick={() => {
+            setFiles([]);
+          }}
+          variant="ghost"
+          disabled={
+            uploading ||
+            (files?.length ?? 0) === 0 ||
+            ((files?.length ?? 0) > 0 &&
+              files?.every((file) => file.status === 'uploaded'))
+          }
+        >
+          Clear Files
+        </Button>
+        <Button
+          type="button"
+          className="w-full"
+          onClick={onSubmit}
+          disabled={
+            uploading ||
+            (files?.length ?? 0) === 0 ||
+            ((files?.length ?? 0) > 0 &&
+              files?.every((file) => file.status === 'uploaded'))
+          }
+        >
+          Upload Files
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+interface FileCardProps {
+  file: StatedFile;
+  onRemove: () => void;
+}
+
+function FileCard({ file, onRemove }: FileCardProps) {
+  return (
+    <div className="relative flex items-center gap-2 rounded-md p-2 hover:bg-foreground/5">
+      <div className="flex flex-1 gap-2">
+        <div className="aspect-square size-10 flex-none">
+          <FilePreview file={file} />
+        </div>
+        <div className="flex w-full flex-col items-start gap-2 text-start">
+          <div className="flex flex-col gap-px">
+            <p className="line-clamp-1 text-sm font-semibold text-foreground/80">
+              {file.rawFile.name}
+            </p>
+            <div className="text-xs font-semibold text-muted-foreground">
+              {file.status === 'pending' && (
+                <span>{formatBytes(file.rawFile.size)}</span>
+              )}
+              {file.status === 'uploading' && (
+                <span className="opacity-70">Uploading...</span>
+              )}
+              {file.status === 'uploaded' && <span>Uploaded</span>}
+              {file.status === 'error' && (
+                <span className="text-destructive">Error</span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="size-7"
+          onClick={onRemove}
+        >
+          <X className="size-4" aria-hidden="true" />
+          <span className="sr-only">Remove file</span>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function FilePreview({ file }: { file: StatedFile }) {
+  const isImage = file.rawFile.type.startsWith('image/');
+  const isPdf = file.rawFile.type.startsWith('application/pdf');
+  const isOther = !isImage && !isPdf;
+
+  return (
+    <>
+      {isImage && (
+        <a href={file.url} target="_blank" rel="noopener noreferrer">
+          <img
+            src={file.url}
+            alt={file.rawFile.name}
+            width={48}
+            height={48}
+            loading="lazy"
+            className="rounded-md object-cover"
+          />
+        </a>
+      )}
+      {isPdf && (
+        <a href={file.url} target="_blank" rel="noopener noreferrer">
+          <FileText className="size-10" aria-hidden="true" />
+        </a>
+      )}
+      {isOther && <File className="size-10" aria-hidden="true" />}
+    </>
+  );
+}

package/src/components/ui/custom/input-field.tsx

@@ -0,0 +1,29 @@
+import { Input } from '../input';
+import { Label } from '../label';
+import React, { forwardRef } from 'react';
+
+interface InputFieldProps {
+  id: string;
+  label?: string;
+  placeholder?: string;
+}
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+// Merge the two interfaces
+type Props = InputFieldProps & InputProps;
+
+const InputField = forwardRef<HTMLInputElement, Props>(
+  ({ id, label, ...props }, ref) => {
+    return (
+      <div className="grid w-full gap-2">
+        {label && <Label htmlFor={id}>{label}</Label>}
+        <Input id={id} ref={ref} {...props} />
+      </div>
+    );
+  }
+);
+
+InputField.displayName = 'InputField';
+export { InputField };

package/src/components/ui/custom/loading-indicator.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@tuturuuu/utils/format';
+
+export function LoadingIndicator({ className }: { className?: string }) {
+  return (
+    <div className="inline-flex items-center rounded-md border border-transparent text-base">
+      <svg
+        className={cn('animate-spin text-foreground', className || 'h-4')}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    </div>
+  );
+}

package/src/components/ui/custom/modifiable-dialog-trigger.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../dialog';
+import { ReactElement, ReactNode, cloneElement, useState } from 'react';
+
+interface FormProps<T> {
+  data?: T;
+  forceDefault?: boolean;
+  onFinish?: () => void;
+}
+
+interface Props<T> {
+  data?: T & { id?: string };
+  trigger?: ReactNode;
+  form?: ReactElement<FormProps<T>>;
+  open?: boolean;
+  title?: string;
+  editDescription?: string;
+  createDescription?: string;
+  requireExpansion?: boolean;
+  forceDefault?: boolean;
+  // eslint-disable-next-line no-unused-vars
+  setOpen?: (open: boolean) => void;
+}
+
+export default function ModifiableDialogTrigger<T>({
+  data,
+  trigger,
+  form,
+  open: externalOpen,
+  title,
+  editDescription,
+  createDescription,
+  requireExpansion,
+  forceDefault,
+  setOpen: setExternalOpen,
+}: Props<T>) {
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  const open = externalOpen ?? internalOpen;
+  const setOpen = setExternalOpen ?? setInternalOpen;
+
+  const formWithCallback = form
+    ? cloneElement(
+        form as ReactElement,
+        {
+          data,
+          forceDefault,
+          onFinish: () => setOpen(false),
+        } as FormProps<T>
+      )
+    : null;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        // onInteractOutside={(e) => e.preventDefault()}
+        className={
+          requireExpansion
+            ? 'md:max-w-2xl lg:max-w-4xl xl:max-w-6xl'
+            : undefined
+        }
+      >
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>
+            {data?.id ? editDescription : createDescription}
+          </DialogDescription>
+        </DialogHeader>
+        {formWithCallback}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/custom/month-picker.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { Button } from '../button';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import {
+  add,
+  eachMonthOfInterval,
+  endOfYear,
+  format,
+  isFuture,
+  parse,
+} from 'date-fns';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+
+interface MonthPickerProps {
+  lang: string;
+  resetPage?: boolean;
+  className?: string;
+  defaultMonth?: string;
+  onUpdate?: (
+    // eslint-disable-next-line no-unused-vars
+    args: {
+      month: string;
+      page?: string;
+    },
+    // eslint-disable-next-line no-unused-vars
+    refresh: boolean
+  ) => void;
+}
+
+export default function MonthPicker({
+  lang,
+  defaultMonth,
+  resetPage = true,
+  className,
+  onUpdate,
+}: MonthPickerProps) {
+  const queryMonth = defaultMonth;
+
+  const currentYYYYMM = Array.isArray(queryMonth)
+    ? queryMonth?.[0] || format(new Date(), 'yyyy-MM')
+    : queryMonth || format(new Date(), 'yyyy-MM');
+
+  const currentMonth =
+    typeof currentYYYYMM === 'string'
+      ? parse(currentYYYYMM, 'yyyy-MM', new Date())
+      : new Date();
+
+  const [open, setOpen] = useState(false);
+  const [previewDate, setPreviewDate] = useState(currentMonth);
+
+  const updateQuery = (month: string) => {
+    if (onUpdate) onUpdate({ month, page: resetPage ? '1' : undefined }, false);
+    setOpen(false);
+  };
+
+  const firstDayCurrentYear = new Date(previewDate.getFullYear(), 0, 1);
+
+  const months = eachMonthOfInterval({
+    start: firstDayCurrentYear,
+    end: endOfYear(firstDayCurrentYear),
+  });
+
+  function previousYear() {
+    let firstDayLastYear = add(firstDayCurrentYear, { years: -1 });
+    setPreviewDate(firstDayLastYear);
+  }
+
+  function nextYear() {
+    let firstDayNextYear = add(firstDayCurrentYear, { years: 1 });
+    setPreviewDate(firstDayNextYear);
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          size="xs"
+          variant="outline"
+          onClick={() => setOpen((prev) => !prev)}
+          className={className}
+        >
+          {currentMonth.toLocaleString(lang, {
+            month: '2-digit',
+            year: 'numeric',
+          })}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="flex items-center justify-between pb-2">
+          <Button
+            size="xs"
+            variant="outline"
+            name="previous-year"
+            aria-label="Go to previous year"
+            onClick={previousYear}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+
+          <div
+            className="text-sm font-medium"
+            aria-live="polite"
+            role="presentation"
+            id="month-picker"
+          >
+            {format(firstDayCurrentYear, 'yyyy')}
+          </div>
+
+          <Button
+            size="xs"
+            variant="outline"
+            name="next-year"
+            aria-label="Go to next year"
+            onClick={nextYear}
+            disabled={
+              firstDayCurrentYear.getFullYear() >= new Date().getFullYear()
+            }
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div
+          className="grid w-full grid-cols-3 gap-2"
+          role="grid"
+          aria-labelledby="month-picker"
+        >
+          {months.map((month) => (
+            <div
+              key={month.toString()}
+              className="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-slate-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md dark:[&:has([aria-selected])]:bg-slate-800"
+              role="presentation"
+            >
+              <Button
+                variant={
+                  currentMonth.getMonth() === month.getMonth() &&
+                  currentMonth.getFullYear() === month.getFullYear()
+                    ? 'default'
+                    : 'ghost'
+                }
+                className="w-full"
+                disabled={isFuture(month)}
+                onClick={() => updateQuery(format(month, 'yyyy-MM'))}
+              >
+                <time dateTime={format(month, 'yyyy-MM-dd')}>
+                  {month.toLocaleString(lang, { month: 'short' })}
+                </time>
+              </Button>
+            </div>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}