@js-empire/emperor-ui 1.2.3 → 1.2.5

package/src/components/atoms/filter/units/checkbox-filter.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { Checkbox } from "@heroui/checkbox";
+import { cn } from "@/utils";
+import { useSearchParamsHandler } from "@/hooks";
+
+export function CheckboxFilter({
+  classNames,
+  checkboxProps,
+  paramKey,
+  ...props
+}: Pick<FilterProps, "classNames" | "checkboxProps" | "paramKey">) {
+  const { getParam, setParams } = useSearchParamsHandler();
+  const value = getParam(paramKey);
+  const isSelected = value === "true" || value === "1" || value === "yes";
+
+  return (
+    <Checkbox
+      isSelected={isSelected}
+      onValueChange={(selected) =>
+        setParams({
+          params: { [paramKey]: selected ? "true" : undefined },
+        })
+      }
+      {...checkboxProps}
+      {...props}
+      className={cn(filterClasses({ type: "checkbox" }), classNames?.field)}
+    />
+  );
+}

package/src/components/atoms/filter/units/checkbox-group-filter.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { CheckboxGroup } from "@heroui/checkbox";
+import { cn } from "@/utils";
+import { useSearchParamsHandler } from "@/hooks";
+
+export function CheckboxGroupFilter({
+  classNames,
+  checkboxGroupProps,
+  paramKey,
+  ...props
+}: Pick<FilterProps, "classNames" | "checkboxGroupProps" | "paramKey">) {
+  const { getParam, setParams } = useSearchParamsHandler();
+  const valueStr = getParam(paramKey);
+  const value = valueStr ? valueStr.split(",").filter(Boolean) : [];
+
+  return (
+    <CheckboxGroup
+      value={value}
+      onValueChange={(values) =>
+        setParams({
+          params: {
+            [paramKey]: values.length > 0 ? values.join(",") : undefined,
+          },
+        })
+      }
+      {...checkboxGroupProps}
+      {...props}
+      className={cn(
+        filterClasses({ type: "checkboxGroup" }),
+        classNames?.field,
+      )}
+    />
+  );
+}

package/src/components/atoms/filter/units/date-filter.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { DatePicker } from "@heroui/date-picker";
+import { cn } from "@/utils";
+import { useSearchParamsHandler } from "@/hooks";
+import { parseDate, type DateValue } from "@internationalized/date";
+import { useMemo } from "react";
+
+export function DateFilter({
+  classNames,
+  dateProps,
+  paramKey,
+  ...props
+}: Pick<FilterProps, "classNames" | "dateProps" | "paramKey">) {
+  const { getParam, setParams } = useSearchParamsHandler();
+  const valueStr = getParam(paramKey);
+
+  const value = useMemo(() => {
+    if (!valueStr) return null;
+
+    try {
+      return parseDate(valueStr);
+    } catch {
+      return null;
+    }
+  }, [valueStr]);
+
+  return (
+    <DatePicker
+      labelPlacement="outside-top"
+      variant="faded"
+      radius="sm"
+      value={value}
+      onChange={(date: DateValue | null) =>
+        setParams({
+          params: {
+            [paramKey]: date
+              ? `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`
+              : undefined,
+          },
+        })
+      }
+      {...dateProps}
+      {...props}
+      className={cn(filterClasses({ type: "date" }), classNames?.field)}
+    />
+  );
+}

package/src/components/atoms/filter/units/index.ts

@@ -0,0 +1,9 @@
+export * from "./search-filter";
+export * from "./select-filter";
+export * from "./autocomplete-filter";
+export * from "./date-filter";
+export * from "./numeric-filter";
+export * from "./checkbox-filter";
+export * from "./checkbox-group-filter";
+export * from "./switch-filter";
+export * from "./range-filter";

package/src/components/atoms/filter/units/numeric-filter.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { Input } from "@heroui/input";
+import { cn } from "@/utils";
+import { useSearchParamsHandler } from "@/hooks";
+
+export function NumericFilter({
+  classNames,
+  numericProps,
+  paramKey,
+  ...props
+}: Pick<FilterProps, "classNames" | "numericProps" | "paramKey">) {
+  const { getParam, setParams } = useSearchParamsHandler();
+
+  const value = getParam(paramKey);
+
+  return (
+    <Input
+      type="number"
+      labelPlacement="outside-top"
+      variant="faded"
+      radius="sm"
+      value={value ?? ""}
+      onValueChange={(v) =>
+        setParams({
+          params: { [paramKey]: v || undefined },
+        })
+      }
+      {...numericProps}
+      {...props}
+      className={cn(filterClasses({ type: "numeric" }), classNames?.field)}
+    />
+  );
+}

package/src/components/atoms/filter/units/range-filter.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { Slider } from "@heroui/slider";
+import { cn } from "@/utils";
+import { useSearchParamsHandler } from "@/hooks";
+
+export function RangeFilter({
+  classNames,
+  rangeProps,
+  paramKey,
+  ...props
+}: Pick<FilterProps, "classNames" | "rangeProps" | "paramKey">) {
+  const { getParam, setParams } = useSearchParamsHandler();
+
+  const valueStr = getParam(paramKey);
+  const value = valueStr != null ? Number(valueStr) : undefined;
+  const numValue = value != null && !Number.isNaN(value) ? value : undefined;
+
+  return (
+    <Slider
+      value={numValue}
+      onChange={(v) =>
+        setParams({
+          params: {
+            [paramKey]: v != null ? String(v) : undefined,
+          },
+        })
+      }
+      {...rangeProps}
+      {...props}
+      className={cn(filterClasses({ type: "range" }), classNames?.field)}
+    />
+  );
+}

package/src/components/atoms/filter/units/search-filter.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { Input } from "@heroui/input";
+import { cn } from "@/utils";
+import { useEffect, useState } from "react";
+import { useDebounce } from "use-debounce";
+import { Search } from "lucide-react";
+import { useSearchParamsHandler } from "@/hooks";
+
+export function SearchFilter({
+  classNames,
+  searchProps,
+  paramKey,
+  ...props
+}: Pick<FilterProps, "classNames" | "searchProps" | "paramKey">) {
+  const [searchValue, setSearchValue] = useState(
+    searchProps?.defaultValue || "",
+  );
+  const { setParams } = useSearchParamsHandler();
+
+  const [debouncedSearchValue] = useDebounce(searchValue, 700);
+
+  useEffect(() => {
+    setParams({
+      params: {
+        [paramKey]: debouncedSearchValue,
+      },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSearchValue]);
+
+  return (
+    <Input
+      labelPlacement="outside-top"
+      variant="faded"
+      radius="sm"
+      endContent={<Search className="size-4" />}
+      {...searchProps}
+      {...props}
+      value={searchValue}
+      onValueChange={setSearchValue}
+      className={cn(filterClasses({ type: "search" }), classNames?.field)}
+      classNames={{
+        input: "min-w-40",
+        label: "font-semibold",
+        ...searchProps?.classNames,
+      }}
+    />
+  );
+}

package/src/components/atoms/filter/units/select-filter.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { Select, SelectItem } from "@heroui/select";
+import { cn } from "@/utils";
+import { useSearchParamsHandler } from "@/hooks";
+
+export function SelectFilter({
+  classNames,
+  selectProps,
+  paramKey,
+  options,
+  ...props
+}: Pick<FilterProps, "classNames" | "selectProps" | "paramKey" | "options">) {
+  const { getParam, setParams } = useSearchParamsHandler();
+  const key = paramKey ?? "select";
+  const value = getParam(key);
+
+  if (!options?.length)
+    throw new Error("Filter with type 'select' must have 'options' property.");
+
+  return (
+    <Select
+      labelPlacement="outside-top"
+      variant="faded"
+      radius="sm"
+      selectedKeys={value ? [value] : []}
+      onSelectionChange={(keys) => {
+        const selectedKey = Array.from(keys)[0];
+        setParams({
+          params: { [key]: selectedKey ? String(selectedKey) : undefined },
+        });
+      }}
+      {...selectProps}
+      {...props}
+      className={cn(filterClasses({ type: "select" }), classNames?.field)}
+      classNames={{
+        trigger: "min-w-40",
+        label: "font-semibold",
+        ...selectProps?.classNames,
+      }}
+    >
+      {options.map((option) => (
+        <SelectItem key={option.key}>{option.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}

package/src/components/atoms/filter/units/switch-filter.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { Switch } from "@heroui/switch";
+import { cn } from "@/utils";
+import { useSearchParamsHandler } from "@/hooks";
+
+export function SwitchFilter({
+  classNames,
+  switchProps,
+  paramKey,
+  ...props
+}: Pick<FilterProps, "classNames" | "switchProps" | "paramKey">) {
+  const { getParam, setParams } = useSearchParamsHandler();
+
+  const value = getParam(paramKey);
+  const isSelected = value === "true" || value === "1" || value === "yes";
+
+  return (
+    <Switch
+      isSelected={isSelected}
+      onValueChange={(selected) =>
+        setParams({
+          params: { [paramKey]: selected ? "true" : undefined },
+        })
+      }
+      {...switchProps}
+      {...props}
+      className={cn(filterClasses({ type: "switch" }), classNames?.field)}
+    />
+  );
+}

package/src/components/atoms/index.ts

@@ -4,3 +4,8 @@ export * from "./container";
 export * from "./row";
 export * from "./portal";
 export * from "./uploader";
+export * from "./filter";
+export * from "./field";
+export * from "./theme-switch";
+export * from "./color-picker";
+export * from "./copy-button";

package/src/components/atoms/theme-switch/index.ts

@@ -0,0 +1 @@
+export * from "./theme-switch";

package/src/components/atoms/theme-switch/styles/classes.ts

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority";
+
+export const themeSwitcherClasses = cva(
+  [
+    "flex items-center justify-center size-9 rounded-lg transition-all duration-300 text-foreground/80 cursor-pointer",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ",
+    "hover:bg-default-100 hover:text-foreground",
+  ],
+  {
+    variants: {
+      variant: {},
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

package/src/components/atoms/theme-switch/styles/index.ts

@@ -0,0 +1 @@
+export * from "./classes";

package/src/components/atoms/theme-switch/theme-switch.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ThemeSwitch } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+
+const meta: Meta<typeof ThemeSwitch> = {
+  title: "Atoms/ThemeSwitch",
+  component: ThemeSwitch,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({}),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: () => (
+    <div className="flex justify-center items-center w-screen h-screen">
+      <ThemeSwitch className="m-auto" />
+    </div>
+  ),
+};

package/src/components/atoms/theme-switch/theme-switch.tsx

@@ -0,0 +1,54 @@
+import { cn } from "@/utils";
+import { themeSwitcherClasses } from "./styles";
+import { ThemeSwitchProps } from "@/types";
+import { useTheme } from "next-themes";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+
+export function ThemeSwitch({
+  className,
+  classNames,
+  ...props
+}: ThemeSwitchProps) {
+  const { setTheme, resolvedTheme } = useTheme();
+
+  const handleThemeToggle = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <motion.button
+      data-slot="emperor-ui-theme-knob"
+      className={cn(themeSwitcherClasses(), className, classNames?.base)}
+      onClick={handleThemeToggle}
+      initial={false}
+      whileHover={{ scale: 1.08 }}
+      whileTap={{ scale: 0.92 }}
+      transition={{
+        type: "spring" as const,
+        stiffness: 500,
+        damping: 28,
+      }}
+      {...props}
+    >
+      <span className="relative flex size-5 items-center justify-center">
+        <AnimatePresence mode="wait">
+          <motion.span
+            key={resolvedTheme ?? "loading"}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="absolute inset-0 flex items-center justify-center"
+          >
+            {resolvedTheme === "dark" ? (
+              <SunIcon className="size-5" />
+            ) : (
+              <MoonIcon className="size-5" />
+            )}
+          </motion.span>
+        </AnimatePresence>
+      </span>
+    </motion.button>
+  );
+}

package/src/components/atoms/uploader/avatar-label.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { Placeholders } from "@/enums";
-import { Avatar, Spinner, cn } from "@heroui/react";
+import { Avatar } from "@heroui/avatar";
+import { Spinner } from "@heroui/spinner";
+import { cn } from "@/utils";
 import { useEmperorUI, useUploaderContext } from "@/hooks";
 import { useState } from "react";
 

package/src/components/atoms/uploader/stories/uploader.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Uploader } from "@/components";
 import { getStorybookDecorators } from "@/utils";
 import { useUploader } from "@/hooks";
-import { useDisclosure } from "@heroui/react";
+import { useDisclosure } from "@heroui/modal";
 import { LangKey } from "@/i18n";
 
 const meta: Meta<typeof Uploader> = {

package/src/components/atoms/uploader/upload-file-error-box.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "@heroui/react";
+import { cn } from "@/utils";
 import { useEmperorUI, useUploaderContext } from "@/hooks";
 import { useMemo } from "react";
 

package/src/components/atoms/uploader/upload-file-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "@heroui/react";
+import { cn } from "@/utils";
 import { useUploaderContext } from "@/hooks";
 import { fileTypesMapping } from "@/constants";
 

package/src/components/atoms/uploader/upload-file-label.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Spinner, cn } from "@heroui/react";
+import { Spinner } from "@heroui/spinner";
+import { cn } from "@/utils";
 import { useEmperorUI, useUploaderContext } from "@/hooks";
 import { UploadCloud } from "lucide-react";
 import { useState } from "react";

package/src/components/atoms/uploader/upload-file-listing.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, cn } from "@heroui/react";
+import { Button } from "@heroui/button";
+import { cn } from "@/utils";
 import { useUploaderContext } from "@/hooks";
 import { Eye, Trash2 } from "lucide-react";
 

package/src/components/atoms/uploader/view-image-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Image, Modal, ModalBody, ModalContent } from "@heroui/react";
+import { Image } from "@heroui/image";
+import { Modal, ModalBody, ModalContent } from "@heroui/modal";
 import { useEmperorUI, useUploaderContext } from "@/hooks";
 
 export function ViewImageModal() {

package/src/components/molecules/index.ts

@@ -1,4 +1,3 @@
-export * from "./filter";
 export * from "./item-card";
 export * from "./nav-bar";
 export * from "./side-bar";

package/src/components/molecules/item-card/index.ts

@@ -1 +1,7 @@
 export * from "./item-card";
+export * from "./loading-item";
+export * from "./item-banner";
+export * from "./item-actions-dropdown";
+export * from "./item-card-header";
+export * from "./item-card-body";
+export * from "./item-card-footer";

package/src/components/molecules/item-card/item-actions-dropdown.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import { Button } from "@heroui/button";
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@heroui/dropdown";
+import { EllipsisVertical } from "lucide-react";
+
+export function ItemActionsDropdown({
+  actions,
+  classNames,
+  onActionClick,
+}: Pick<ItemCardProps, "actions" | "classNames" | "onActionClick">) {
+  if (!actions || actions?.length === 0) return null;
+
+  return (
+    <Dropdown placement="bottom-end">
+      <DropdownTrigger data-slot="emperor-ui-item-card-actions-dropdown-trigger">
+        <Button
+          isIconOnly
+          size="sm"
+          variant="flat"
+          radius="full"
+          className={cn(
+            "absolute right-2 top-2 z-10 size-7 min-w-7 backdrop-blur-lg",
+            "border border-default-300",
+            classNames?.dropdown,
+          )}
+        >
+          <EllipsisVertical className="size-4" />
+        </Button>
+      </DropdownTrigger>
+
+      <DropdownMenu
+        data-slot="emperor-ui-item-card-actions-dropdown-menu"
+        aria-label="Card actions"
+        onAction={(key) => onActionClick?.(String(key))}
+        items={actions}
+      >
+        {({ key, label, ...props }) => (
+          <DropdownItem
+            key={key}
+            data-slot="emperor-ui-item-card-actions-dropdown-item"
+            textValue={label}
+            title={label}
+            {...props}
+          />
+        )}
+      </DropdownMenu>
+    </Dropdown>
+  );
+}

package/src/components/molecules/item-card/item-banner.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import { itemBannerClasses } from "./styles";
+
+export function ItemBanner({
+  item,
+  orientation,
+  classNames,
+}: Pick<ItemCardProps, "item" | "orientation" | "classNames">) {
+  if (!item?.banner) return null;
+
+  return (
+    <div
+      data-slot="emperor-ui-item-card-banner"
+      className={cn(itemBannerClasses({ orientation }), classNames?.banner)}
+    >
+      {item?.banner}
+    </div>
+  );
+}