@js-empire/emperor-ui 1.0.0 → 1.1.0

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

@@ -0,0 +1,104 @@
+import type { SharedComponentProps } from "@types";
+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>;
+};
+
+export type UploaderContextState = {
+  isOpen?: boolean;
+  onClose?: () => void;
+  onOpen?: () => void;
+  onOpenChange?: (isOpen: boolean) => void;
+
+  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?: {
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onOpenChange?: (isOpen: boolean) => 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/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/molecules/nav-bar/nav-bar.ts

@@ -0,0 +1,65 @@
+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;
+};
+
+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/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/react";
+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/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,54 @@
+import { type ReactNode } from "react";
+import { HeroUIProviderProps } from "@heroui/react";
+
+export type ConfigContextState = {
+  config: EmperorUIConfig;
+};
+
+export type ConfigProviderProps = {
+  children: ReactNode;
+  config?: EmperorUIConfig;
+};
+
+export type ColorMode = "light" | "dark";
+export type AppDirection = "ltr" | "rtl";
+
+export type ColorsPalette = {
+  primary: string;
+  secondary: string;
+  success: string;
+  danger: string;
+  warning: string;
+  info: string;
+  background: string;
+  foreground: string;
+};
+
+export type EmperorUITheme = {
+  mode: ColorMode;
+  colors: Partial<ColorsPalette>;
+};
+
+export type EmperorUILayout = {
+  withScaffold: boolean;
+};
+
+export type EmperorUILang = "en" | "ar";
+
+export type EmperorUILocales = Record<EmperorUILang, Record<string, string>>;
+
+export type EmperorUIInterLocalization = {
+  lang?: EmperorUILang;
+  languages?: EmperorUILang[];
+  defaultLanguage?: EmperorUILang;
+  isMultiLingual?: boolean;
+  dir?: AppDirection;
+  locales?: EmperorUILocales;
+};
+
+export type EmperorUIConfig = {
+  theme?: Partial<EmperorUITheme>;
+  layout?: Partial<EmperorUILayout>;
+  interLocalization?: Partial<EmperorUIInterLocalization>;
+  toast?: HeroUIProviderProps;
+};

package/src/types/context/index.ts

@@ -1 +1,2 @@
-export type * from "./emperor-ui";
+export type * from "./config";
+export type * from "./navigation";

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/shared/components.ts

@@ -4,3 +4,7 @@ export type SharedComponentProps = {
   className?: string;
   children?: ReactNode;
 };
+
+export type ComponentSize = "xs" | "sm" | "base" | "md" | "lg" | "xl";
+
+export type ComponentRadius = "none" | "sm" | "md" | "lg" | "full";

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

@@ -1 +1,3 @@
 export * from "./cn";
+export * from "./storybook";
+export * from "./compress-images";

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>
+  ),
+];

package/tsconfig.app.json

@@ -20,7 +20,6 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
 
@@ -33,7 +32,9 @@
       "@context": ["./src/context"],
       "@examples": ["./src/examples"],
       "@providers": ["./src/providers"],
-      "@types": ["./src/types"]
+      "@types": ["./src/types"],
+      "@mocks": ["./src/mocks"],
+      "@enums": ["./src/enums"]
     }
   },
   "include": [

package/tsconfig.node.json

@@ -18,7 +18,6 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },

package/vite.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
     dts({
       include: ["src/**/*.ts", "src/**/*.tsx"],
       exclude: ["src/**/*.test.ts", "src/**/*.test.tsx"],
-      rollupTypes: false,
+      rollupTypes: true,
       tsconfigPath: "./tsconfig.app.json",
     }),
   ],
@@ -28,6 +28,8 @@ export default defineConfig({
       "@hooks": path.resolve(__dirname, "./src/hooks"),
       "@context": path.resolve(__dirname, "./src/context"),
       "@examples": path.resolve(__dirname, "./src/examples"),
+      "@mocks": path.resolve(__dirname, "./src/mocks"),
+      "@enums": path.resolve(__dirname, "./src/enums"),
     },
   },
   build: {
@@ -36,6 +38,7 @@ export default defineConfig({
       name: "EmperorUI",
       fileName: "emperor-ui",
     },
+    cssCodeSplit: false,
     rollupOptions: {
       external: ["react", "react-dom"],
       output: {
@@ -43,6 +46,7 @@ export default defineConfig({
           react: "React",
           "react-dom": "ReactDOM",
         },
+        assetFileNames: "globals.css",
       },
     },
   },