@js-empire/emperor-ui 1.0.1 → 1.2.0

package/src/index.ts

@@ -1,8 +1,12 @@
+import "./styles/globals.css";
+
 export * from "./components";
-export type * from "./types";
-export * from "./utils";
-export * from "./providers";
-export * from "./context";
-export * from "./hooks";
 export * from "./constants";
+export * from "./context";
 export * from "./examples";
+export * from "./hooks";
+export * from "./providers";
+export type * from "./types";
+export * from "./utils";
+export * from "./mocks";
+export * from "./enums";

package/src/main.tsx

@@ -0,0 +1,3 @@
+export function Main() {
+  return <div></div>;
+}

package/src/mocks/header.tsx

@@ -0,0 +1,118 @@
+import { SideBarAction, NavigationItem } from "@/types";
+import {
+  HelpCircleIcon,
+  HomeIcon,
+  InfoIcon,
+  LifeBuoyIcon,
+  LogOutIcon,
+  MailIcon,
+  ServerIcon,
+  SettingsIcon,
+} from "lucide-react";
+
+export const MOCK_HEADER_SUB_ITEMS: NavigationItem[] = [
+  {
+    id: "info",
+    label: "Info",
+    href: "#info",
+    Icon: InfoIcon,
+  },
+  {
+    id: "contact",
+    label: "Contact",
+    href: "#contact",
+    Icon: MailIcon,
+  },
+  {
+    id: "services",
+    label: "Services",
+    href: "#services",
+    Icon: ServerIcon,
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    href: "#settings",
+    Icon: SettingsIcon,
+  },
+  {
+    id: "help",
+    label: "Help",
+    href: "#help",
+    Icon: HelpCircleIcon,
+  },
+  {
+    id: "support",
+    label: "Support",
+    href: "#support",
+    Icon: LifeBuoyIcon,
+  },
+];
+
+export const MOCK_HEADER_ITEMS: NavigationItem[] = [
+  {
+    id: "home",
+    label: "Home",
+    href: "#home",
+    Icon: HomeIcon,
+  },
+  {
+    id: "about",
+    label: "About",
+    href: "#about",
+    Icon: InfoIcon,
+  },
+  {
+    id: "contact",
+    label: "Contact",
+    href: "#contact",
+    Icon: MailIcon,
+  },
+  {
+    id: "services",
+    label: "Services",
+    href: "#services",
+    Icon: ServerIcon,
+  },
+];
+
+export const MOCK_HEADER_ITEMS_WITH_SUB_ITEMS: NavigationItem[] = [
+  {
+    id: "home",
+    label: "Home",
+    href: "#home",
+    Icon: HomeIcon,
+    subItems: MOCK_HEADER_SUB_ITEMS,
+  },
+  {
+    id: "about",
+    label: "About",
+    href: "#about",
+    Icon: InfoIcon,
+    subItems: MOCK_HEADER_SUB_ITEMS,
+  },
+  {
+    id: "contact",
+    label: "Contact",
+    href: "#contact",
+    Icon: MailIcon,
+    subItems: MOCK_HEADER_SUB_ITEMS,
+  },
+  {
+    id: "services",
+    label: "Services",
+    href: "#services",
+    Icon: ServerIcon,
+    subItems: MOCK_HEADER_SUB_ITEMS,
+  },
+];
+
+export const MOCK_HEADER_ACTIONS: SideBarAction[] = [
+  {
+    key: "logout",
+    label: "Logout",
+    color: "danger",
+    onPress: () => console.log("logout"),
+    startContent: <LogOutIcon />,
+  },
+];

package/src/mocks/index.ts

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

package/src/providers/config-provider.tsx

@@ -0,0 +1,54 @@
+import { Scaffold } from "@/components";
+import { defaultEmperorUIConfig } from "@/constants";
+import { EmperorUIContext } from "@/context";
+import type {
+  ConfigContextState,
+  ConfigProviderProps,
+  EmperorUIConfig,
+} from "@/types";
+import { useMemo } from "react";
+
+export function ConfigProvider({
+  children,
+  config = defaultEmperorUIConfig,
+}: ConfigProviderProps) {
+  const emperorUIProviderValue: ConfigContextState = useMemo(() => {
+    const mergedConfig: EmperorUIConfig = {
+      layout: {
+        ...defaultEmperorUIConfig?.layout,
+        ...config?.layout,
+      },
+      theme: {
+        ...defaultEmperorUIConfig?.theme,
+        ...config?.theme,
+        colors: {
+          ...defaultEmperorUIConfig?.theme?.colors,
+          ...config?.theme?.colors,
+        },
+      },
+      interLocalization: {
+        ...defaultEmperorUIConfig?.interLocalization,
+        ...config?.interLocalization,
+      },
+    };
+
+    return {
+      config: mergedConfig,
+    };
+  }, [config]);
+
+  const withScaffold = config.layout?.withScaffold ?? true;
+
+  if (withScaffold)
+    return (
+      <EmperorUIContext.Provider value={emperorUIProviderValue}>
+        <Scaffold>{children}</Scaffold>
+      </EmperorUIContext.Provider>
+    );
+
+  return (
+    <EmperorUIContext.Provider value={emperorUIProviderValue}>
+      {children}
+    </EmperorUIContext.Provider>
+  );
+}

package/src/providers/emperor-ui-provider.tsx

@@ -1,31 +1,24 @@
-import type { EmperorUIContextState, EmperorUIProviderProps } from "@types";
-import { useMemo } from "react";
-import { EmperorUIContext } from "@context";
-import { defaultEmperorUIConfig } from "@constants";
-import { Scaffold } from "@components";
+import { ConfigProviderProps } from "@/types";
+import { ConfigProvider, NavigationProvider } from "@/providers";
+import { HeroUIProvider, ToastProvider } from "@heroui/react";
+import { Fragment } from "react";
+
+type EmperorUIProviderProps = ConfigProviderProps & {};
 
 export function EmperorUIProvider({
   children,
-  config = defaultEmperorUIConfig,
+  ...props
 }: EmperorUIProviderProps) {
-  const emperorUIProviderValue: EmperorUIContextState = useMemo(() => {
-    return {
-      config,
-    };
-  }, [config]);
-
-  const withScaffold = config.layout?.withScaffold ?? true;
-
-  if (withScaffold)
-    return (
-      <EmperorUIContext.Provider value={emperorUIProviderValue}>
-        <Scaffold>{children}</Scaffold>
-      </EmperorUIContext.Provider>
-    );
-
   return (
-    <EmperorUIContext.Provider value={emperorUIProviderValue}>
-      {children}
-    </EmperorUIContext.Provider>
+    <ConfigProvider {...props}>
+      <HeroUIProvider>
+        <NavigationProvider>
+          <Fragment>
+            <ToastProvider {...props?.config?.toast} />
+            {children}
+          </Fragment>
+        </NavigationProvider>
+      </HeroUIProvider>
+    </ConfigProvider>
   );
 }

package/src/providers/index.ts

@@ -1 +1,4 @@
+export * from "./config-provider";
 export * from "./emperor-ui-provider";
+export * from "./navigation-provider";
+export * from "./uploader-provider";

package/src/providers/navigation-provider.tsx

@@ -0,0 +1,42 @@
+import type {
+  NavigationProviderProps,
+  NavigationContextState,
+  NavigationItem,
+} from "@/types";
+import { useMemo, useState } from "react";
+import { NavigationContext } from "@/context";
+import { PreservedKeys } from "@/enums";
+
+export function NavigationProvider({ children }: NavigationProviderProps) {
+  const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);
+  const [subItems, setSubItems] = useState<NavigationItem[]>([]);
+  const [isSubItemsBoxOpen, setIsSubItemsBoxOpen] = useState(false);
+  const [subItemsBoxIsHovered, setSubItemsBoxIsHovered] = useState(false);
+
+  const navigationProviderValue: NavigationContextState = useMemo(() => {
+    return {
+      hoveredItemId,
+      subItems,
+      isSubItemsBoxOpen,
+      subItemsBoxIsHovered,
+      setHoveredItemId,
+      setSubItems,
+      setIsSubItemsBoxOpen,
+      setSubItemsBoxIsHovered,
+    };
+  }, [hoveredItemId, subItems, isSubItemsBoxOpen, subItemsBoxIsHovered]);
+
+  return (
+    <NavigationContext.Provider
+      value={navigationProviderValue}
+      data-slot="emperor-navigation-provider"
+    >
+      <div
+        id={PreservedKeys.COMPACT_SIDEBAR_ID}
+        data-slot="emperor-compact-sidebar"
+      />
+
+      {children}
+    </NavigationContext.Provider>
+  );
+}

package/src/providers/uploader-provider.tsx

@@ -0,0 +1,53 @@
+import type {
+  UploaderProviderProps,
+  UploaderContextState,
+  FileObject,
+} from "@/types";
+import { useMemo, useState } from "react";
+import { UploaderContext } from "@/context";
+import { useDisclosure } from "@heroui/react";
+
+export function UploaderProvider({
+  children,
+  ...props
+}: UploaderProviderProps) {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const [selectedFile, setSelectedFile] = useState<FileObject | null>(null);
+
+  const isFileViewable = useMemo(
+    () =>
+      !!selectedFile?.view &&
+      !!selectedFile?.file?.name &&
+      selectedFile?.type === "image",
+    [selectedFile],
+  );
+
+  const uploaderProviderValue: UploaderContextState = useMemo(() => {
+    return {
+      isOpen,
+      onOpen,
+      onOpenChange,
+      selectedFile,
+      setSelectedFile,
+      isFileViewable,
+      ...props,
+    };
+  }, [
+    isOpen,
+    isFileViewable,
+    selectedFile,
+    onOpen,
+    onOpenChange,
+    setSelectedFile,
+    props,
+  ]);
+
+  return (
+    <UploaderContext.Provider
+      value={uploaderProviderValue}
+      data-slot="emperor-uploader-provider"
+    >
+      {children}
+    </UploaderContext.Provider>
+  );
+}

package/src/styles/globals.css

@@ -0,0 +1,13 @@
+@import "tailwindcss";
+@plugin './hero.ts';
+@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+@custom-variant dark (&:is(.dark *));
+
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}

package/src/styles/hero.ts

@@ -0,0 +1,2 @@
+import { heroui } from "@heroui/react";
+export default heroui();

package/src/types/components/atoms/brand.ts

@@ -0,0 +1,13 @@
+import { SharedComponentProps } from "@/types";
+
+export type BrandProps = SharedComponentProps & {
+  src?: string;
+  alt?: string;
+  name?: string;
+  isIconOnly?: boolean;
+  classNames?: {
+    base?: string;
+    logo?: string;
+    name?: string;
+  };
+};

package/src/types/components/atoms/column.ts

@@ -0,0 +1,3 @@
+import type { SharedComponentProps } from "@/types";
+
+export type ColumnProps = SharedComponentProps & {};

package/src/types/components/atoms/container.ts

@@ -0,0 +1,3 @@
+import type { SharedComponentProps } from "@/types";
+
+export type ContainerProps = SharedComponentProps & {};

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

@@ -0,0 +1,6 @@
+export * from "./brand";
+export * from "./portal";
+export * from "./uploader";
+export * from "./column";
+export * from "./row";
+export * from "./container";

package/src/types/components/atoms/portal.ts

@@ -0,0 +1,6 @@
+import { SharedComponentProps } from "@/types";
+
+export type PortalProps = SharedComponentProps & {
+  containerId: string;
+  isVisible?: boolean;
+};

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

@@ -0,0 +1,3 @@
+import type { SharedComponentProps } from "@/types";
+
+export type RowProps = SharedComponentProps & {};

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

@@ -0,0 +1,97 @@
+import type { SharedComponentProps } from "@/types";
+import { ModalProps } from "@heroui/react";
+import { Dispatch, ReactNode, SetStateAction } from "react";
+
+export type UploaderProps = SharedComponentProps &
+  UploaderContextState & {
+    className?: string;
+    hideListing?: boolean;
+    isAvatar?: boolean;
+  };
+
+export type FileType = "image" | "doc" | "pdf" | "video" | "sheet";
+
+export type FileObject = {
+  view?: string;
+  type?: FileType;
+  file?: File;
+  url?: string;
+};
+
+export type SharedFilesType = FileObject[];
+
+export type SharedLabelIdType = string;
+
+export type SharedOnInputChangeType = (
+  event: React.ChangeEvent<HTMLInputElement> &
+    React.DragEvent<HTMLLabelElement>,
+) => Promise<void>;
+
+export type UseUploadFileProps = {
+  labelId: string;
+  fileTypes: FileType[];
+  labelContent?: ReactNode;
+  isRequired?: boolean;
+  isMulti?: boolean;
+  isDraggable?: boolean;
+  maxCount?: number;
+  maxFileSize?: number; // in Kilobytes
+  compressFiles?: boolean;
+  preventDuplicates?: boolean;
+  onChange?: () => void;
+};
+
+export type UseUploadFileReturn = {
+  files: FileObject[];
+  fileTypes: FileType[];
+  labelId: string;
+  isRequired: boolean;
+  labelContent: ReactNode;
+  isDraggable: boolean;
+  isMulti: boolean;
+  isLoading: boolean;
+  setFiles: Dispatch<SetStateAction<FileObject[]>>;
+  handleClearFile: (fileName?: string) => void;
+  onInputChange: (
+    event: React.ChangeEvent<HTMLInputElement> &
+      React.DragEvent<HTMLLabelElement>,
+  ) => Promise<void | string | null>;
+};
+
+export type UploaderContextState = {
+  selectedFile?: FileObject | null;
+  setSelectedFile?: (file: FileObject | null) => void;
+
+  labelId: SharedLabelIdType;
+  labelContent?: ReactNode;
+  avatarLabelContent?: ReactNode;
+
+  isFileViewable?: boolean;
+  isRequired?: boolean;
+  isDraggable?: boolean;
+  isLoading: boolean;
+  hideErrorMessage?: boolean;
+  isMulti: boolean;
+
+  placeholderImage?: string;
+  files: SharedFilesType;
+  fileTypes: FileType[];
+
+  onInputChange: SharedOnInputChangeType;
+  handleClearFile: (fileName?: string) => void;
+
+  modal?: Omit<ModalProps, "children"> & {
+    onOpen?: () => void;
+  };
+  classNames?: {
+    label?: string;
+    avatar?: string;
+    listing?: string;
+    error?: string;
+    input?: string;
+  };
+};
+
+export type UploaderProviderProps = UploaderContextState & {
+  children: ReactNode;
+};

package/src/types/components/index.ts

@@ -1,8 +1,3 @@
-export type * from "./header";
-export type * from "./listings";
-export type * from "./nav-bar";
-export type * from "./scaffold";
-export type * from "./filter";
-export type * from "./footer";
-export type * from "./item-card";
-export type * from "./item-details";
+export type * from "./molecules";
+export type * from "./atoms";
+export type * from "./templates";

package/src/types/components/{filter → molecules/filter}/filter.ts

@@ -1,4 +1,4 @@
-import type { SharedComponentProps } from "@types";
+import type { SharedComponentProps } from "@/types";
 
 export type FilterClassnames = {
   base?: string;

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

@@ -0,0 +1,68 @@
+import type { SharedComponentProps } from "@/types";
+import { ReactNode } from "react";
+
+export type FooterClassnames = {
+  base?: string;
+  content?: string;
+  policiesWrapper?: string;
+  policy?: string;
+  quickLinksWrapper?: string;
+  quickLinksTitle?: string;
+  quickLinksList?: string;
+  quickLinksItem?: string;
+  quickLinksLink?: string;
+  socialLinksWrapper?: string;
+  socialLink?: string;
+  copyRightsWrapper?: string;
+  copyRightsText?: string;
+  contactsWrapper?: string;
+  contact?: string;
+};
+
+export type QuickLink = {
+  label: string;
+  href: string;
+  isExternal?: boolean;
+};
+
+export type QuickLinkCollection = {
+  title?: string;
+  links: QuickLink[];
+};
+
+export type SocialLink = {
+  label?: string;
+  href: string;
+  icon?: ReactNode;
+  isExternal?: boolean;
+};
+
+export type Address = {
+  country?: string;
+  street?: string;
+  city?: string;
+  state?: string;
+  zip?: string;
+};
+
+export type CopyRights = {
+  year: number;
+  text: string;
+};
+
+export type Contacts = {
+  mobile?: string;
+  email?: string;
+  addresses?: Address[];
+  website?: string;
+  workingHours?: string;
+};
+
+export type FooterProps = SharedComponentProps & {
+  classNames?: FooterClassnames;
+  policies?: QuickLink[];
+  quickLinks?: QuickLinkCollection[];
+  socialLinks?: SocialLink[];
+  copyRights?: CopyRights;
+  contacts?: Contacts;
+};

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

@@ -0,0 +1,51 @@
+import type { SharedComponentProps } from "@/types";
+
+export type HeaderClassnames = {
+  base?: string;
+  logo?: string;
+  navbar?: string;
+  userDropdown?: string;
+  sideMenu?: string;
+};
+
+export type HeaderActivations = {
+  hideLog?: boolean;
+  hideNavbar?: boolean;
+  hideUserDropdown?: boolean;
+  hideSideMenu?: boolean;
+};
+
+export type HeaderVariant =
+  | "default"
+  | "floating"
+  | "light"
+  | "segmented-floating";
+
+export type HeaderGlassEffect = {
+  enabled?: boolean;
+  blur?: number;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  opacity?: number;
+};
+
+export type HeaderProps = SharedComponentProps & {
+  variant?: HeaderVariant;
+  classNames?: HeaderClassnames;
+  glassEffect?: HeaderGlassEffect;
+};
+
+export type HeaderDropdownProps = SharedComponentProps & {};
+
+export type UserDropdownProps = SharedComponentProps & {};
+
+export type HeaderStylesProps = {
+  primaryColor?: string;
+  foregroundColor?: string;
+  variant?: HeaderVariant;
+  glassEffect?: HeaderGlassEffect;
+};
+
+export type SegmentedHeaderContentProps = SharedComponentProps & {
+  glassEffect?: HeaderGlassEffect;
+};

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 "./filter";
+export type * from "./footer";
+export type * from "./item-card";
+export type * from "./item-details";

package/src/types/components/{item-card → molecules/item-card}/item-card.ts

@@ -1,4 +1,4 @@
-import type { SharedComponentProps } from "@types";
+import type { SharedComponentProps } from "@/types";
 
 export type ItemCardClassnames = {
   base?: string;

package/src/types/components/{item-details → molecules/item-details}/item-details.ts

@@ -1,4 +1,4 @@
-import type { SharedComponentProps } from "@types";
+import type { SharedComponentProps } from "@/types";
 
 export type ItemDetailsClassnames = {
   base?: string;

package/src/types/components/{listings → molecules/listings}/listings.ts

@@ -1,4 +1,4 @@
-import type { SharedComponentProps } from "@types";
+import type { SharedComponentProps } from "@/types";
 
 export type ListingsClassnames = {
   base?: string;