@js-empire/emperor-ui 1.3.6 → 1.3.7

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

@@ -1,65 +0,0 @@
-"use client";
-
-import { FilterProps } from "@/types";
-import { filterClasses } from "@/components";
-import { Slider } from "@heroui/slider";
-import { cn } from "@/utils";
-import { useMemo } from "react";
-import { useEmperorUI, useSearchParamsHandler } from "@/hooks";
-
-export function RangeFilter({
-  classNames,
-  rangeProps,
-  paramKey,
-}: Pick<FilterProps, "classNames" | "rangeProps" | "paramKey">) {
-  const { getParam, setParams, allParams } = useSearchParamsHandler();
-  const { config } = useEmperorUI();
-
-  const theme = config?.theme?.components?.slider;
-
-  const minVal = rangeProps?.minValue ?? 0;
-  const maxVal = rangeProps?.maxValue ?? 100;
-
-  const value = useMemo(() => {
-    const valueStr = getParam(paramKey);
-    const defaultRange: [number, number] = [minVal, maxVal];
-
-    if (valueStr == null) return defaultRange;
-
-    const [a, b] = valueStr.split(",").map(Number);
-    if (!Number.isNaN(a) && !Number.isNaN(b) && a <= b) {
-      return [a, b];
-    }
-    return defaultRange;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [paramKey, minVal, maxVal, allParams]);
-
-  return (
-    <Slider
-      {...theme}
-      {...rangeProps}
-      value={value}
-      onChange={(value) => {
-        const range = Array.isArray(value) ? value : [value];
-        const isFullRange =
-          range.length === 2 && range[0] === minVal && range[1] === maxVal;
-
-        setParams({
-          params: {
-            [paramKey]:
-              range.length === 2 && !isFullRange
-                ? `${range[0]},${range[1]}`
-                : undefined,
-          },
-        });
-      }}
-      classNames={{
-        base: "min-w-40",
-        label: "font-semibold",
-        ...theme?.classNames,
-        ...rangeProps?.classNames,
-      }}
-      className={cn(filterClasses({ type: "range" }), classNames?.field)}
-    />
-  );
-}

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

@@ -1,53 +0,0 @@
-"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 { useEmperorUI, useSearchParamsHandler } from "@/hooks";
-
-export function SearchFilter({
-  classNames,
-  searchProps,
-  paramKey,
-}: Pick<FilterProps, "classNames" | "searchProps" | "paramKey">) {
-  const { config } = useEmperorUI();
-
-  const theme = config?.theme?.components?.input;
-
-  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
-      {...theme}
-      {...searchProps}
-      endContent={<Search className="size-4" />}
-      value={searchValue}
-      onValueChange={setSearchValue}
-      className={cn(filterClasses({ type: "search" }), classNames?.field)}
-      classNames={{
-        input: "min-w-40",
-        label: "font-semibold",
-        ...theme?.classNames,
-        ...searchProps?.classNames,
-      }}
-    />
-  );
-}

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

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

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

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

package/src/components/atoms/index.ts

@@ -1,11 +0,0 @@
-export * from "./brand";
-export * from "./column";
-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/portal/index.ts

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

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

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Portal } from "@/components";
-import { getStorybookDecorators } from "@/utils";
-import { FAKE_PARAGRAPH } from "@/constants";
-
-const meta: Meta<typeof Portal> = {
-  title: "Atoms/Portal",
-  component: Portal,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-  decorators: getStorybookDecorators({
-    config: {
-      layout: {
-        withScaffold: false,
-      },
-    },
-  }),
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-  render: () => (
-    <main className="h-screen w-full flex flex-col gap-10 p-5">
-      <div id="portal-container" />
-
-      <p>{FAKE_PARAGRAPH}</p>
-      <p>{FAKE_PARAGRAPH}</p>
-      <p>{FAKE_PARAGRAPH}</p>
-
-      <Portal containerId="portal-container">
-        <div className="bg-blue-300 p-2 rounded-md absolute top-5 left-1/2 -translate-x-1/2">
-          <h2>Portal Content</h2>
-        </div>
-      </Portal>
-    </main>
-  ),
-};

package/src/components/atoms/portal/portal.tsx

@@ -1,25 +0,0 @@
-import { PortalProps } from "@/types";
-import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
-
-export function Portal({
-  children,
-  containerId,
-  isVisible = true,
-}: PortalProps) {
-  const [container, setContainer] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    const element = document.getElementById(containerId);
-
-    setTimeout(() => {
-      setContainer(element);
-    }, 100);
-  }, [containerId]);
-
-  if (!container || !isVisible) {
-    return null;
-  }
-
-  return createPortal(children, container);
-}

package/src/components/atoms/row/index.ts

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

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

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Row } from "@/components";
-import { getStorybookDecorators } from "@/utils";
-import type { RowProps } from "@/types";
-
-const meta: Meta<typeof Row> = {
-  title: "Atoms/Row",
-  component: Row,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  decorators: getStorybookDecorators({
-    config: {
-      layout: {
-        withScaffold: false,
-      },
-    },
-  }),
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-  render: (args: RowProps) => (
-    <Row {...args}>
-      {Array.from({ length: 5 }).map((_, index) => (
-        <div key={index} className="bg-blue-300 p-2 rounded-md">
-          Item {index + 1}
-        </div>
-      ))}
-    </Row>
-  ),
-};

package/src/components/atoms/row/row.tsx

@@ -1,26 +0,0 @@
-import type { RowProps } from "@/types";
-import { cn } from "@/utils";
-import { cva, VariantProps } from "class-variance-authority";
-import { forwardRef, ComponentProps } from "react";
-
-const rowStyles = cva(["flex items-center gap-3"], {
-  variants: {},
-  defaultVariants: {},
-  compoundVariants: [],
-});
-
-export const Row = forwardRef<
-  HTMLElement,
-  ComponentProps<"section"> & VariantProps<typeof rowStyles> & RowProps
->(({ className, children, ...props }, ref) => {
-  return (
-    <section
-      ref={ref}
-      data-slot="row"
-      className={cn(rowStyles({ className }))}
-      {...props}
-    >
-      {children}
-    </section>
-  );
-});

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

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

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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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/components/avatar-label.tsx

@@ -1,102 +0,0 @@
-"use client";
-
-import { Placeholders } from "@/enums";
-import { Avatar } from "@heroui/avatar";
-import { Spinner } from "@heroui/spinner";
-import { cn, mergeUploaderLocale } from "@/utils";
-import { useEmperorUI, useUploaderContext } from "@/hooks";
-import { useState } from "react";
-import { getLocales, Locale } from "@/i18n";
-
-export function AvatarLabel() {
-  const { config } = useEmperorUI();
-  const [draggableMessage, setDraggableMessage] = useState<string | null>(null);
-
-  const {
-    labelId,
-    classNames,
-    labelContent,
-    isDraggable,
-    onInputChange,
-    avatarLabelContent,
-    placeholderImage,
-    files,
-    isLoading,
-    isMulti,
-    locales,
-  } = useUploaderContext();
-
-  const configLocales = config?.interLocalization?.locales;
-  const lang =
-    config?.interLocalization?.lang ||
-    config?.interLocalization?.defaultLanguage ||
-    "en";
-
-  const defaultLocale = getLocales(lang);
-  const uploaderLocale = mergeUploaderLocale({
-    defaultUploaderLocale: defaultLocale.atoms.uploader,
-    configUploaderLocale: (configLocales?.[lang] as Locale | undefined)?.atoms
-      ?.uploader,
-    contextUploaderLocale: locales,
-  });
-
-  const handleDrop = (
-    event: React.ChangeEvent<HTMLInputElement> &
-      React.DragEvent<HTMLLabelElement>,
-  ) => {
-    event.preventDefault();
-    if (onInputChange) onInputChange(event);
-  };
-
-  const handleDragOver = (
-    event: React.ChangeEvent<HTMLInputElement> &
-      React.DragEvent<HTMLLabelElement>,
-  ) => {
-    event.preventDefault();
-    setDraggableMessage(uploaderLocale.dropHere);
-  };
-
-  const handleDragLeave = () => {
-    setDraggableMessage("");
-  };
-
-  if (!isMulti && files?.length > 0) {
-    return null;
-  }
-
-  if (isLoading)
-    return (
-      <div className={cn("mx-auto", classNames?.label)}>
-        <Spinner className="mx-auto" size="lg" />;
-      </div>
-    );
-
-  return (
-    <label
-      className={cn(
-        "w-full cursor-pointer mx-auto transition-opacity flex flex-col gap-5",
-        draggableMessage && "opacity-60",
-        classNames?.label,
-      )}
-      htmlFor={labelId}
-      onDrop={isDraggable ? handleDrop : () => {}}
-      onDragOver={isDraggable ? handleDragOver : () => {}}
-      onDragLeave={isDraggable ? handleDragLeave : () => {}}
-    >
-      {avatarLabelContent}
-
-      {labelContent || (
-        <Avatar
-          src={
-            files?.[0]?.view ||
-            placeholderImage ||
-            Placeholders.PLACEHOLDER_MALE_AVATAR
-          }
-          alt="avatar"
-          size="lg"
-          className={cn("size-24", classNames?.avatar)}
-        />
-      )}
-    </label>
-  );
-}

package/src/components/atoms/uploader/components/index.ts

@@ -1,8 +0,0 @@
-export * from "./uploader";
-export * from "./avatar-label";
-export * from "./upload-file-label";
-export * from "./view-image-modal";
-export * from "./upload-file-listing";
-export * from "./upload-file-error-box";
-export * from "./upload-file-input";
-export * from "./uploader-title";

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

@@ -1,40 +0,0 @@
-"use client";
-
-import { cn, mergeUploaderLocale } from "@/utils";
-import { useEmperorUI, useUploaderContext } from "@/hooks";
-import { useMemo } from "react";
-import { getLocales, Locale } from "@/i18n";
-
-export function UploadFileErrorBox() {
-  const { config } = useEmperorUI();
-  const { files, isRequired, classNames, errorMessage, locales } =
-    useUploaderContext();
-
-  const configLocales = config?.interLocalization?.locales;
-  const lang =
-    config?.interLocalization?.lang ||
-    config?.interLocalization?.defaultLanguage ||
-    "en";
-
-  const defaultLocale = getLocales(lang);
-  const uploaderLocale = mergeUploaderLocale({
-    defaultUploaderLocale: defaultLocale.atoms.uploader,
-    configUploaderLocale: (configLocales?.[lang] as Locale | undefined)?.atoms
-      ?.uploader,
-    contextUploaderLocale: locales,
-  });
-
-  const isError = useMemo(
-    () => files?.length === 0 && isRequired,
-    [files, isRequired],
-  );
-
-  if (isError)
-    return (
-      <p className={cn("text-[14px] text-danger", classNames?.error)}>
-        {errorMessage ?? uploaderLocale.errorUploadingFile}
-      </p>
-    );
-
-  return null;
-}

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

@@ -1,36 +0,0 @@
-"use client";
-
-import { cn } from "@/utils";
-import { useUploaderContext } from "@/hooks";
-import { fileTypesMapping } from "@/constants";
-
-export function UploadFileInput() {
-  const {
-    fileTypes = [],
-    isMulti,
-    labelId,
-    onInputChange,
-    classNames,
-  } = useUploaderContext();
-
-  const getFileAccepts = (): string => {
-    const acceptedTypes: string[] = [];
-
-    fileTypes?.forEach((fileType) => {
-      acceptedTypes.push(...(fileTypesMapping?.[fileType] || []));
-    });
-
-    return acceptedTypes.join(", ");
-  };
-
-  return (
-    <input
-      id={labelId}
-      type="file"
-      accept={getFileAccepts()}
-      className={cn("hidden", classNames?.input)}
-      onChange={onInputChange}
-      multiple={isMulti}
-    />
-  );
-}