@sonamu-kit/react-components 0.1.0 → 0.1.2

package/src/components/ui/carousel.tsx

@@ -1,243 +0,0 @@
-"use client";
-
-import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import * as React from "react";
-import ArrowLeftIcon from "~icons/lucide/arrow-left";
-import ArrowRightIcon from "~icons/lucide/arrow-right";
-
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
-};
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-
-  return context;
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins,
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) {
-      return;
-    }
-
-    setCanScrollPrev(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
-      }
-    },
-    [scrollPrev, scrollNext],
-  );
-
-  React.useEffect(() => {
-    if (!api || !setApi) {
-      return;
-    }
-
-    setApi(api);
-  }, [api, setApi]);
-
-  React.useEffect(() => {
-    if (!api) {
-      return;
-    }
-
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
-
-    return () => {
-      api?.off("select", onSelect);
-    };
-  }, [api, onSelect]);
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        ref={ref}
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  );
-});
-Carousel.displayName = "Carousel";
-
-const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { carouselRef, orientation } = useCarousel();
-
-    return (
-      <div ref={carouselRef} className="overflow-hidden">
-        <div
-          ref={ref}
-          className={cn(
-            "flex",
-            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-            className,
-          )}
-          {...props}
-        />
-      </div>
-    );
-  },
-);
-CarouselContent.displayName = "CarouselContent";
-
-const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { orientation } = useCarousel();
-
-    return (
-      <div
-        ref={ref}
-        role="group"
-        aria-roledescription="slide"
-        className={cn(
-          "min-w-0 shrink-0 grow-0 basis-full",
-          orientation === "horizontal" ? "pl-4" : "pt-4",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-CarouselItem.displayName = "CarouselItem";
-
-const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          "absolute  h-8 w-8 rounded-full",
-          orientation === "horizontal"
-            ? "-left-12 top-1/2 -translate-y-1/2"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-          className,
-        )}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        {...props}
-      >
-        <ArrowLeftIcon className="h-4 w-4" />
-        <span className="sr-only">Previous slide</span>
-      </Button>
-    );
-  },
-);
-CarouselPrevious.displayName = "CarouselPrevious";
-
-const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          "absolute h-8 w-8 rounded-full",
-          orientation === "horizontal"
-            ? "-right-12 top-1/2 -translate-y-1/2"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-          className,
-        )}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        {...props}
-      >
-        <ArrowRightIcon className="h-4 w-4" />
-        <span className="sr-only">Next slide</span>
-      </Button>
-    );
-  },
-);
-CarouselNext.displayName = "CarouselNext";
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-};

package/src/components/ui/checkbox.tsx

@@ -1,67 +0,0 @@
-"use client";
-
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import * as React from "react";
-import CheckIcon from "~icons/lucide/check";
-import type { Override } from "../../lib/helpers";
-import { cn } from "../../lib/utils";
-
-type CheckboxProps = Override<
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-  {
-    name?: string;
-    onValueChange?: (checked: boolean) => void;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  }
->;
-
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, name, checked, defaultChecked, onValueChange, onBlur, ...props }, ref) => {
-    const inputRef = React.useRef<HTMLInputElement>(null);
-
-    // biome-ignore lint/style/noNonNullAssertion: useImperativeHandle은 ref가 할당된 후 실행되므로 안전함
-    React.useImperativeHandle(ref, () => inputRef.current!);
-
-    const handleCheckedChange = (newChecked: boolean | "indeterminate") => {
-      const boolValue = newChecked === "indeterminate" ? false : newChecked;
-      onValueChange?.(boolValue);
-    };
-
-    return (
-      <>
-        <input
-          type="checkbox"
-          ref={inputRef}
-          name={name}
-          defaultChecked={defaultChecked === true}
-          onBlur={onBlur}
-          className="sr-only"
-          tabIndex={-1}
-          aria-hidden="true"
-        />
-        <CheckboxPrimitive.Root
-          data-slot="checkbox"
-          checked={checked}
-          defaultChecked={defaultChecked}
-          onCheckedChange={handleCheckedChange}
-          className={cn(
-            "peer border border-muted-foreground/30 bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-            className,
-          )}
-          {...props}
-        >
-          <CheckboxPrimitive.Indicator
-            data-slot="checkbox-indicator"
-            className="flex items-center justify-center text-current transition-none"
-          >
-            <CheckIcon className="size-3.5" />
-          </CheckboxPrimitive.Indicator>
-        </CheckboxPrimitive.Root>
-      </>
-    );
-  },
-);
-
-Checkbox.displayName = "Checkbox";
-
-export { Checkbox };

package/src/components/ui/collapsible.tsx

@@ -1,9 +0,0 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
-const Collapsible = CollapsiblePrimitive.Root;
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/ui/combobox.tsx

@@ -1,135 +0,0 @@
-"use client";
-
-import * as React from "react";
-import CheckIcon from "~icons/lucide/check";
-import ChevronsUpDownIcon from "~icons/lucide/chevrons-up-down";
-import XCircleIcon from "~icons/lucide/x-circle";
-
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "./command";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-
-export interface ComboboxOption {
-  value: string;
-  label: string;
-}
-
-interface ComboboxProps {
-  options: ComboboxOption[];
-  name?: string;
-  value?: string;
-  onValueChange?: (value: string | undefined) => void;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  placeholder?: string;
-  searchPlaceholder?: string;
-  emptyText?: string;
-  disabled?: boolean;
-  className?: string;
-  clearable?: boolean;
-}
-
-const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(
-  (
-    {
-      options,
-      name,
-      value,
-      onValueChange,
-      onBlur,
-      placeholder = "Select option...",
-      searchPlaceholder = "Search...",
-      emptyText = "No option found.",
-      disabled = false,
-      className,
-      clearable = false,
-    },
-    ref,
-  ) => {
-    const [open, setOpen] = React.useState(false);
-    const inputRef = React.useRef<HTMLInputElement>(null);
-
-    // biome-ignore lint/style/noNonNullAssertion: useImperativeHandle은 ref가 할당된 후 실행되므로 안전함
-    React.useImperativeHandle(ref, () => inputRef.current!);
-
-    const handleSelect = (currentValue: string) => {
-      const newValue = currentValue === value ? "" : currentValue;
-      onValueChange?.(newValue || undefined);
-      setOpen(false);
-    };
-
-    const handleClear = (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onValueChange?.(undefined);
-      setOpen(false);
-    };
-
-    const hasValue = Boolean(value);
-
-    return (
-      <>
-        <input type="hidden" ref={inputRef} name={name} value={value || ""} onBlur={onBlur} />
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              role="combobox"
-              aria-expanded={open}
-              disabled={disabled}
-              className={cn("w-full justify-between", className)}
-            >
-              <span className="flex-1 truncate text-left">
-                {value ? options.find((option) => option.value === value)?.label : placeholder}
-              </span>
-              <div className="flex items-center gap-1 shrink-0 pl-2">
-                {clearable && hasValue && (
-                  <span
-                    className="flex items-center justify-center"
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onClick={handleClear}
-                  >
-                    <XCircleIcon className="h-4 w-4 cursor-pointer opacity-50 hover:opacity-100 transition-opacity" />
-                  </span>
-                )}
-                <ChevronsUpDownIcon className="h-4 w-4 opacity-50" />
-              </div>
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-full p-0">
-            <Command>
-              <CommandInput placeholder={searchPlaceholder} className="h-9" />
-              <CommandList>
-                <CommandEmpty>{emptyText}</CommandEmpty>
-                <CommandGroup>
-                  {options.map((option) => (
-                    <CommandItem key={option.value} value={option.value} onSelect={handleSelect}>
-                      {option.label}
-                      <CheckIcon
-                        className={cn(
-                          "ml-auto",
-                          value === option.value ? "opacity-100" : "opacity-0",
-                        )}
-                      />
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
-      </>
-    );
-  },
-);
-
-Combobox.displayName = "Combobox";
-
-export { Combobox };

package/src/components/ui/command.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import type { DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import * as React from "react";
-import SearchIcon from "~icons/lucide/search";
-
-import { cn } from "../../lib/utils";
-import { Dialog, DialogContent } from "./dialog";
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 **:[[cmdk-input-wrapper]_svg]:size-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 **:[[cmdk-item]_svg]:size-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 **:[svg]:pointer-events-none **:[svg]:size-4 **:[svg]:shrink-0",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};

package/src/components/ui/common-modal.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import { atom, useAtom } from "jotai";
-import type * as React from "react";
-import { cn } from "../../lib/utils";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
-
-type ExtendedModalProps = {
-  title?: string;
-  description?: string;
-  className?: string;
-  onCompleted?: (data?: unknown) => void;
-};
-
-export const commonModalAtom = atom<
-  {
-    open: boolean;
-    reactNode: React.ReactNode | null;
-  } & ExtendedModalProps
->({
-  open: false,
-  reactNode: null,
-});
-
-type CommonModalProps = {
-  className?: string;
-};
-
-export function CommonModal({ className }: CommonModalProps) {
-  const [atomValue, setAtomValue] = useAtom(commonModalAtom);
-  const { open, reactNode, title, description, className: modalClassName } = atomValue;
-
-  const closeAndClear = () => {
-    setAtomValue({
-      open: false,
-      reactNode: null,
-    });
-  };
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(isOpen) => {
-        if (!isOpen) {
-          closeAndClear();
-        }
-      }}
-    >
-      <DialogContent className={cn("max-w-4xl", modalClassName, className)}>
-        {(title || description) && (
-          <DialogHeader>
-            {title && <DialogTitle>{title}</DialogTitle>}
-            {description && <DialogDescription>{description}</DialogDescription>}
-          </DialogHeader>
-        )}
-        {reactNode}
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export function useCommonModal() {
-  const [atomValue, setAtomValue] = useAtom(commonModalAtom);
-  const { open, reactNode, onCompleted } = atomValue;
-
-  const openModal = (reactNode: React.ReactNode, props?: ExtendedModalProps) => {
-    setAtomValue({
-      open: true,
-      reactNode,
-      ...props,
-    });
-  };
-
-  const closeModal = () => {
-    setAtomValue({
-      open: false,
-      reactNode: null,
-    });
-  };
-
-  const doneModal = (data?: unknown) => {
-    closeModal();
-    if (onCompleted) {
-      onCompleted(data);
-    }
-  };
-
-  return {
-    open,
-    reactNode,
-    openModal,
-    closeModal,
-    doneModal,
-  };
-}