@js-empire/emperor-ui 1.3.11 → 1.3.13

package/src/types/components/molecules/index.ts

@@ -0,0 +1,9 @@
+export type * from "./header";
+export type * from "./listings";
+export type * from "./nav-bar";
+export type * from "./side-bar";
+export type * from "./scaffold";
+export type * from "./footer";
+export type * from "./item-card";
+export type * from "./item-details";
+export type * from "./theme-switch";

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

@@ -0,0 +1 @@
+export type * from "./item-card";

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

@@ -0,0 +1,69 @@
+import type { SharedComponentProps } from "@/types";
+import { ReactNode } from "react";
+import { Variants } from "framer-motion";
+import { ChipProps } from "@heroui/chip";
+import { DropdownItemProps } from "@heroui/dropdown";
+import type { ButtonProps } from "@heroui/button";
+
+export type ItemCardClassnames = {
+  base?: string;
+  image?: string;
+  header?: string;
+  footer?: string;
+  imageWrapper?: string;
+  mainWrapper?: string;
+  banner?: string;
+  dropdown?: string;
+  body?: string;
+  title?: string;
+  price?: string;
+  description?: string;
+  chips?: string;
+  chip?: string;
+  actions?: string;
+  action?: string;
+};
+
+export type ItemCardAction = DropdownItemProps &
+  ButtonProps & {
+    key: string;
+    label: string;
+  };
+
+export type ItemCardHoverEffect = "none" | "zoom" | "rotate";
+
+export type ItemCardOrientation = "horizontal" | "vertical";
+
+export type ItemCardActionsViewVariant =
+  | "dropdown"
+  | "buttons"
+  | "hover-overlay";
+
+export type ItemChipProps = ChipProps & {
+  label: string;
+};
+
+export type ItemProps = {
+  key: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  image?: {
+    src: string;
+    alt: string;
+  };
+  chips?: ItemChipProps[];
+  banner?: ReactNode;
+  price?: ReactNode;
+};
+
+export type ItemCardProps = SharedComponentProps & {
+  variants?: Variants;
+  isLoading?: boolean;
+  hoverEffect?: ItemCardHoverEffect;
+  classNames?: ItemCardClassnames;
+  item: ItemProps;
+  actions?: ItemCardAction[];
+  onActionClick?: (key: string) => void;
+  orientation?: ItemCardOrientation;
+  actionsViewVariant?: ItemCardActionsViewVariant;
+};

package/src/types/components/molecules/item-details/index.ts

@@ -0,0 +1 @@
+export type * from "./item-details";

package/src/types/components/molecules/item-details/item-details.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@/types";
+
+export type ItemDetailsClassnames = {
+  base?: string;
+};
+
+export type ItemDetailsProps = SharedComponentProps & {
+  classNames?: ItemDetailsClassnames;
+};

package/src/types/components/molecules/listings/index.ts

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

package/src/types/components/molecules/listings/listings.ts

@@ -0,0 +1,29 @@
+import type {
+  ItemCardAction,
+  ItemCardProps,
+  SharedComponentProps,
+} from "@/types";
+
+export type ListingsClassnames = {
+  base?: string;
+  item?: string;
+  pagination?: string;
+};
+
+export type ListingsLayout = "grid" | "list" | "carousel";
+
+export type ListingsProps = SharedComponentProps & {
+  classNames?: ListingsClassnames;
+  layout?: ListingsLayout;
+  items: ItemCardProps[];
+  isLoading?: boolean;
+  actions?: ItemCardAction[];
+  onActionClick?: (key: string) => void;
+  pagination?: {
+    page: number;
+    setPage: (page: number) => void;
+    pageSize: number;
+    totalItemsCount: number;
+    pagesCount: number;
+  };
+};

package/src/types/components/molecules/nav-bar/index.ts

@@ -0,0 +1 @@
+export type * from "./nav-bar";

package/src/types/components/molecules/nav-bar/nav-bar.ts

@@ -0,0 +1,66 @@
+import type {
+  ComponentRadius,
+  ComponentSize,
+  SharedComponentProps,
+} from "@/types";
+import type { ElementType } from "react";
+
+export type NavBarClassnames = {
+  base?: string;
+};
+
+export type NavigationItem = {
+  id: string;
+  label?: string;
+  href?: string;
+  subItems?: NavigationItem[];
+  onClick?: () => void;
+  Icon?: ElementType;
+};
+
+export type NavBarHoverEffect =
+  | "default"
+  | "underline"
+  | "solid"
+  | "ghost"
+  | "bordered"
+  | "none";
+
+export type NavBarVariant = "default" | "solid" | "bordered";
+
+export type NavBarStylesProps = {
+  primaryColor?: string;
+  foregroundColor?: string;
+  variant?: NavBarVariant;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type NavBarMenuStylesProps = {};
+
+export type NavBarItemStylesProps = {
+  foregroundColor?: string;
+  primaryColor?: string;
+  hoverEffect: NavBarHoverEffect;
+  isHovered?: boolean;
+  variant?: NavBarVariant;
+};
+
+export type NavBarProps = SharedComponentProps & {
+  items: NavigationItem[];
+  classNames?: NavBarClassnames;
+  hoverEffect?: NavBarHoverEffect;
+  radius?: ComponentRadius;
+  size?: ComponentSize;
+  variant?: NavBarVariant;
+  subItemsColumns?: number;
+};
+
+export type NavBarItemProps = {
+  item: NavigationItem;
+  variant: NavBarVariant;
+  hoverEffect: NavBarHoverEffect;
+};
+
+export type SubItemsBoxProps = {
+  subItemsColumns?: number;
+};

package/src/types/components/molecules/scaffold/index.ts

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

package/src/types/components/molecules/scaffold/scaffold.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@/types";
+
+export type ScaffoldClassnames = {
+  base?: string;
+};
+
+export type ScaffoldProps = SharedComponentProps & {
+  classNames?: ScaffoldClassnames;
+};

package/src/types/components/molecules/side-bar/index.ts

@@ -0,0 +1 @@
+export type * from "./side-bar";

package/src/types/components/molecules/side-bar/side-bar.ts

@@ -0,0 +1,40 @@
+import { ButtonProps } from "@heroui/button";
+import type { NavigationItem, SharedComponentProps } from "@/types";
+import type { ReactNode } from "react";
+
+export type SideBarVariant = "default" | "compact";
+
+export type SideBarClassnames = {
+  base?: string;
+  trigger?: string;
+  title?: string;
+  menu?: string;
+  menuItem?: string;
+  actionsWrapper?: string;
+  actionItem?: string;
+};
+
+export type SideBarAction = ButtonProps & {
+  key: string;
+  label?: string;
+};
+
+export type SideBarProps = SharedComponentProps & {
+  classNames?: SideBarClassnames;
+  variant?: SideBarVariant;
+  items: NavigationItem[];
+  actions?: SideBarAction[];
+  triggerProps?: Omit<ButtonProps, "content"> & { content?: ReactNode };
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  header?: ReactNode;
+};
+
+export type SideBarItemStylesProps = {
+  foregroundColor?: string;
+  primaryColor?: string;
+  isHovered?: boolean;
+  variant?: SideBarVariant;
+};
+
+export type CompactSideBarProps = SideBarProps & {};

package/src/types/components/molecules/theme-switch/index.ts

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

package/src/types/components/molecules/theme-switch/theme-switch.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@/types";
+
+export type ThemeSwitchClassnames = {
+  base?: string;
+};
+
+export type ThemeSwitchProps = SharedComponentProps & {
+  classNames?: ThemeSwitchClassnames;
+};

package/src/types/components/organisms/deletion-confirmor/deletion-confirmor.ts

@@ -0,0 +1,22 @@
+import type { ButtonProps } from "@heroui/button";
+
+export type DeletionConfirmorClassnames = {
+  base?: string;
+  content?: string;
+  header?: string;
+  body?: string;
+  footer?: string;
+  confirmButton?: string;
+  declineButton?: string;
+};
+
+export type DeletionConfirmorProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description: string;
+  className?: string;
+  classNames?: DeletionConfirmorClassnames;
+  confirmProps?: ButtonProps;
+  declineProps?: ButtonProps;
+};

package/src/types/components/organisms/deletion-confirmor/index.ts

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

package/src/types/components/organisms/filters/filters.ts

@@ -0,0 +1,11 @@
+import type { SharedComponentProps } from "@/types";
+import { ReactNode } from "react";
+
+export type FiltersClassnames = {
+  base?: string;
+};
+
+export type FiltersProps = Omit<SharedComponentProps, "children"> & {
+  classNames?: FiltersClassnames;
+  children: ReactNode;
+};

package/src/types/components/organisms/filters/index.ts

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

package/src/types/components/organisms/form-builder/context.ts

@@ -0,0 +1,6 @@
+import { Control, FieldValues } from "react-hook-form";
+
+export type FormBuilderValue<TSchema extends FieldValues> = {
+  control: Control<TSchema, any, TSchema>;
+  formValues: Partial<TSchema>;
+};

package/src/types/components/organisms/form-builder/form-builder.ts

@@ -0,0 +1,39 @@
+import type { SharedComponentProps } from "@/types";
+import { ReactNode } from "react";
+import type {
+  FieldErrors,
+  FieldValues,
+  UseFormProps,
+  UseFormReturn,
+} from "react-hook-form";
+import type { ZodType } from "zod";
+import { z } from "zod";
+
+export type FormBuilderSubmitArgs<TFieldValues extends FieldValues> = {
+  values: TFieldValues;
+  form: UseFormReturn<TFieldValues>;
+};
+
+export type FormBuilderSuccessArgs<TFieldValues extends FieldValues> = {
+  values: TFieldValues;
+  form: UseFormReturn<TFieldValues>;
+};
+
+export type FormBuilderErrorArgs<TFieldValues extends FieldValues> = {
+  error?: unknown;
+  errors?: FieldErrors<TFieldValues>;
+  form: UseFormReturn<TFieldValues>;
+};
+
+export type FormBuilderProps<TSchema extends ZodType<any, any, any>> = Omit<
+  SharedComponentProps,
+  "children"
+> & {
+  children: ReactNode;
+  formProps?: UseFormProps<z.infer<TSchema>>;
+  onSubmit: (values: z.infer<TSchema>) => Promise<unknown> | unknown;
+  onSuccess?: (values: z.infer<TSchema>) => void;
+  onError?: (error: unknown) => void;
+  /** Called whenever form values change. Use this to read values outside FormBuilder (e.g. in parent state). */
+  onValuesChange?: (values: Partial<z.infer<TSchema>>) => void;
+};

package/src/types/components/organisms/form-builder/index.ts

@@ -0,0 +1,2 @@
+export type * from "./form-builder";
+export type * from "./context";

package/src/types/components/organisms/index.ts

@@ -0,0 +1,3 @@
+export * from "./deletion-confirmor";
+export * from "./filters";
+export * from "./form-builder";

package/src/types/components/templates/index.ts

@@ -0,0 +1 @@
+export type * from "./landing-page";

package/src/types/components/templates/landing-page.ts

@@ -0,0 +1,10 @@
+import type { SharedComponentProps } from "@/types";
+
+export type LandingPageClassnames = {
+  base?: string;
+};
+
+export type LandingPageProps = SharedComponentProps & {
+  classNames?: LandingPageClassnames;
+  variant?: "default";
+};

package/src/types/context/config.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import { EmperorUIInterLocalization } from "@/types";
+import { ToastProps } from "@heroui/toast";
+import { EmperorUITheme } from "@/types";
+
+export type ConfigContextState = {
+  config: EmperorUIConfig;
+};
+
+export type ConfigProviderProps = {
+  children: ReactNode;
+  config?: EmperorUIConfig;
+};
+
+export type EmperorUILayout = {
+  withScaffold: boolean;
+};
+
+export type EmperorUIConfig = {
+  layout?: Partial<EmperorUILayout>;
+  interLocalization?: Partial<EmperorUIInterLocalization>;
+  toast?: ToastProps;
+  theme?: Partial<EmperorUITheme>;
+};

package/src/types/context/index.ts

@@ -0,0 +1,4 @@
+export type * from "./config";
+export type * from "./navigation";
+export type * from "./localization";
+export type * from "./theme";

package/src/types/context/localization.ts

@@ -0,0 +1,24 @@
+import { Locale } from "@/i18n";
+
+export type AppDirection = "ltr" | "rtl";
+
+export type EmperorUILang = "en" | "ar";
+
+export type EmperorUILocales = Record<
+  EmperorUILang,
+  Partial<{
+    atoms?: {
+      uploader?: Partial<Locale["atoms"]["uploader"]>;
+      colorPicker?: Partial<Locale["atoms"]["colorPicker"]>;
+    };
+  }>
+>;
+
+export type EmperorUIInterLocalization = {
+  lang?: EmperorUILang;
+  languages?: EmperorUILang[];
+  defaultLanguage?: EmperorUILang;
+  isMultiLingual?: boolean;
+  dir?: AppDirection;
+  locales?: EmperorUILocales;
+};

package/src/types/context/navigation.ts

@@ -0,0 +1,17 @@
+import { NavigationItem } from "@/types";
+import { ReactNode } from "react";
+
+export type NavigationContextState = {
+  hoveredItemId: string | null;
+  subItems: NavigationItem[];
+  isSubItemsBoxOpen: boolean;
+  subItemsBoxIsHovered: boolean;
+  setHoveredItemId: (id: string | null) => void;
+  setSubItems: (items: NavigationItem[]) => void;
+  setIsSubItemsBoxOpen: (isOpen: boolean) => void;
+  setSubItemsBoxIsHovered: (isHovered: boolean) => void;
+};
+
+export type NavigationProviderProps = {
+  children: ReactNode;
+};

package/src/types/context/theme.ts

@@ -0,0 +1,33 @@
+import { InputProps, TextAreaProps } from "@heroui/input";
+import { ButtonProps } from "@heroui/button";
+import { CardProps } from "@heroui/card";
+import { DropdownProps } from "@heroui/dropdown";
+import { ModalProps } from "@heroui/modal";
+import { CheckboxGroupProps, CheckboxProps } from "@heroui/checkbox";
+import { AutocompleteItemProps, AutocompleteProps } from "@heroui/autocomplete";
+import { SelectProps, SelectItemProps } from "@heroui/select";
+import { RadioGroupProps } from "@heroui/radio";
+import { SwitchProps } from "@heroui/switch";
+import { DatePickerProps } from "@heroui/date-picker";
+import { SliderProps } from "@heroui/slider";
+
+export type EmperorUITheme = {
+  components?: {
+    input?: InputProps;
+    textarea?: TextAreaProps;
+    button?: ButtonProps;
+    card?: CardProps;
+    dropdown?: DropdownProps;
+    modal?: ModalProps;
+    checkbox?: CheckboxProps;
+    checkboxGroup?: CheckboxGroupProps;
+    autocomplete?: Omit<AutocompleteProps, "children">;
+    autocompleteItem?: Omit<AutocompleteItemProps, "children">;
+    radio?: Omit<RadioGroupProps, "children">;
+    select?: Omit<SelectProps, "children">;
+    selectItem?: Omit<SelectItemProps, "children">;
+    switch?: SwitchProps;
+    datePicker?: DatePickerProps;
+    slider?: SliderProps;
+  };
+};

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export type * from "./components";
+export type * from "./shared";
+export type * from "./context";

package/{dist/src/types/shared/components.d.ts → src/types/shared/components.ts}

@@ -1,10 +1,13 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from "react";
+
 export type SharedComponentProps = {
-    className?: string;
-    classNames?: {
-        base?: string;
-    };
-    children?: ReactNode;
+  className?: string;
+  classNames?: {
+    base?: string;
+  };
+  children?: ReactNode;
 };
+
 export type ComponentSize = "xs" | "sm" | "base" | "md" | "lg" | "xl";
+
 export type ComponentRadius = "none" | "sm" | "md" | "lg" | "full";

package/src/types/shared/index.ts

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

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import clsx, { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...classes: ClassValue[]) {
+  return twMerge(clsx(classes));
+}

package/src/utils/compress-images.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import { FileObject } from "@/types";
+/**
+ * Compress an image to reduce its size
+ *
+ * ! NOTE: This function should ONLY run on CLIENT side
+ */
+import imageCompression from "browser-image-compression";
+
+export async function compressImage(
+  fileObject: FileObject,
+  maxSizeMB?: number,
+): Promise<FileObject | null> {
+  try {
+    if (!fileObject?.file) return null;
+
+    const blob = await imageCompression(fileObject?.file, {
+      maxSizeMB: maxSizeMB || 2,
+      useWebWorker: true, // Optimize performance
+      initialQuality: 0.8, // Adjust the compression quality (0.1 to 1)
+    });
+
+    const compressedFile = new File([blob], fileObject?.file?.name, {
+      type: blob.type,
+    });
+
+    return {
+      ...fileObject,
+      file: compressedFile,
+    };
+  } catch (error) {
+    console.error("Image compression failed:", error);
+    return null;
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+export * from "./cn";
+export * from "./storybook";
+export * from "./compress-images";
+export * from "./uploader";
+export * from "./locales";

package/src/utils/locales.ts

@@ -0,0 +1,54 @@
+import { Locale } from "@/i18n";
+
+/**
+ * Checks if a value is a plain object (not array, null, or other object types).
+ */
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+/**
+ * Deep-merges config locales into default locales. Default values are used as base,
+ * and config values override only the keys they provide. Nested objects are merged
+ * recursively so unrelated keys at any level remain unchanged.
+ */
+export const mergeLocales = ({
+  defaultLocales,
+  configLocales,
+}: {
+  defaultLocales: Locale;
+  configLocales?: Partial<Locale>;
+}): Locale => {
+  const deepMerge = <T extends Record<string, unknown>>(
+    defaultObj: T,
+    configObj: Partial<T> | undefined,
+  ): T => {
+    if (configObj == null || Object.keys(configObj).length === 0) {
+      return defaultObj;
+    }
+
+    const result = { ...defaultObj } as T;
+
+    for (const key of Object.keys(configObj) as (keyof T)[]) {
+      const configVal = configObj[key];
+      const defaultVal = defaultObj[key];
+
+      if (configVal === undefined) continue;
+
+      if (isPlainObject(configVal) && isPlainObject(defaultVal as unknown)) {
+        (result as Record<string, unknown>)[key as string] = deepMerge(
+          defaultVal as Record<string, unknown>,
+          configVal,
+        );
+      } else {
+        (result as Record<string, unknown>)[key as string] = configVal;
+      }
+    }
+
+    return result;
+  };
+
+  return deepMerge(
+    defaultLocales as unknown as Record<string, unknown>,
+    configLocales as Partial<Record<string, unknown>>,
+  ) as Locale;
+};

package/src/utils/storybook.tsx

@@ -0,0 +1,15 @@
+import { EmperorUIProvider } from "@/providers";
+import { defaultEmperorUIConfig } from "@/constants";
+import { EmperorUIConfig } from "@/types";
+
+export const getStorybookDecorators = ({
+  config = defaultEmperorUIConfig,
+}: {
+  config?: EmperorUIConfig;
+}) => [
+  (Story: any) => (
+    <EmperorUIProvider config={config}>
+      <Story />
+    </EmperorUIProvider>
+  ),
+];