@js-empire/emperor-ui 1.3.10 → 1.3.12

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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/components/avatar-label.tsx

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

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

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

@@ -0,0 +1,36 @@
+"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}
+    />
+  );
+}

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

@@ -0,0 +1,92 @@
+"use client";
+
+import { Spinner } from "@heroui/spinner";
+import { cn, mergeUploaderLocale } from "@/utils";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
+import { UploadCloud } from "lucide-react";
+import { useState } from "react";
+import { getLocales, Locale } from "@/i18n";
+
+export function UploadFileLabel() {
+  const { config } = useEmperorUI();
+  const [draggableMessage, setDraggableMessage] = useState("");
+  const {
+    labelId,
+    classNames,
+    labelContent,
+    isDraggable,
+    onInputChange,
+    isLoading,
+    isMulti,
+    files,
+    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("w-full flex mx-auto", classNames?.label)}>
+        <Spinner className="mx-auto" size="lg" />;
+      </div>
+    );
+
+  return (
+    <label
+      className={cn("w-full cursor-pointer mx-auto", classNames?.label)}
+      htmlFor={labelId}
+      onDrop={isDraggable ? handleDrop : () => {}}
+      onDragOver={isDraggable ? handleDragOver : () => {}}
+      onDragLeave={isDraggable ? handleDragLeave : () => {}}
+    >
+      {labelContent || (
+        <div className="pointer-events-none flex size-full flex-col items-center justify-center gap-2 rounded-md border border-dashed bg-primary/10 px-2 py-8 text-xs">
+          <UploadCloud className="size-10 text-primary" />
+
+          <p className="font-bold">{uploaderLocale.selectFile}</p>
+          <p className="opacity-70">{uploaderLocale.selectionTypes}</p>
+
+          {draggableMessage && (
+            <p className="text-sm font-bold">{draggableMessage}</p>
+          )}
+        </div>
+      )}
+    </label>
+  );
+}