@js-empire/emperor-ui 1.0.1 → 1.2.0

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/{scaffold → molecules/scaffold}/scaffold.ts

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

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,4 @@
 export * from "./cn";
+export * from "./storybook";
+export * from "./compress-images";
+export * from "./uploader";

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/src/utils/uploader.ts

@@ -0,0 +1,148 @@
+import {
+  ALLOWED_DOC_TYPES,
+  ALLOWED_IMAGES_TYPES,
+  ALLOWED_PDF_TYPES,
+  ONE_MEGABYTE,
+} from "@/constants";
+import { FileObject, FileType } from "@/types";
+import { addToast } from "@heroui/react";
+import { compressImage } from "@/utils";
+import { Dispatch, SetStateAction } from "react";
+
+// get the corresponding FileType giving the extension of the uploaded file
+export const mapFileType = (fileType: string): FileType | null => {
+  if (ALLOWED_IMAGES_TYPES.includes(fileType)) return "image";
+  if (ALLOWED_PDF_TYPES.includes(fileType)) return "pdf";
+  if (ALLOWED_DOC_TYPES.includes(fileType)) return "doc";
+
+  return null;
+};
+
+// get the allowed file types according to the specified types from the 'fileTypes' array
+export const getAllowedTypes = (fileTypes: FileType[]): string[] => {
+  const allowedTypes: string[] = [];
+
+  fileTypes.forEach((fileType) => {
+    if (fileType === "image") allowedTypes.push(...ALLOWED_IMAGES_TYPES);
+    if (fileType === "doc") allowedTypes.push(...ALLOWED_DOC_TYPES);
+    if (fileType === "pdf") allowedTypes.push(...ALLOWED_PDF_TYPES);
+  });
+
+  return allowedTypes;
+};
+
+export const isFileDuplicated = ({
+  files,
+  fileName,
+}: {
+  files: FileObject[];
+  fileName: string;
+}): boolean => files?.filter(({ file }) => file?.name === fileName)?.length > 0;
+
+// check if the file size exceeds the maxFileSize
+export const isMaxFileSizeExceeded = ({
+  fileSize,
+  maxFileSize,
+}: {
+  fileSize: number;
+  maxFileSize: number;
+}): boolean => fileSize > maxFileSize * 1024;
+
+export async function validateUploadedFiles({
+  uploadedFiles,
+  maxFileSize = ONE_MEGABYTE * 10,
+  compressFiles,
+  locale,
+  preventDuplicates,
+  files,
+}: {
+  uploadedFiles: File[];
+  maxFileSize?: number;
+  compressFiles?: boolean;
+  locale?: Record<string, string> | undefined;
+  preventDuplicates?: boolean;
+  files: FileObject[];
+}) {
+  let isInValid = false;
+
+  const compressedFiles = await Promise.all(
+    uploadedFiles?.map(async (file) => {
+      if (isMaxFileSizeExceeded({ fileSize: file?.size, maxFileSize })) {
+        addToast({
+          title: locale?.maxSizeExceededError
+            .replace("MAX_FILE_SIZE", (maxFileSize / 1024 || 0)?.toString())
+            .replace(
+              "UPLOADED_FILE_SIZE",
+              (file?.size / 1024 / 1024 || 0)?.toFixed(1)?.toString(),
+            ),
+        });
+
+        if (compressFiles) {
+          return (await compressImage({ file }))?.file;
+        } else {
+          isInValid = true;
+          return file;
+        }
+      }
+
+      if (
+        preventDuplicates &&
+        isFileDuplicated({ fileName: file?.name, files })
+      ) {
+        addToast({
+          title: locale?.duplicatesDenied,
+        });
+        isInValid = true;
+      }
+
+      return file;
+    }),
+  );
+
+  return {
+    compressedFiles,
+    isInValid,
+  };
+}
+
+export async function refineUploadedFiles({
+  uploadedFiles,
+  locale,
+  allowedTypes,
+  isMulti,
+  setFiles,
+}: {
+  uploadedFiles: (File | undefined)[];
+  locale?: Record<string, string> | undefined;
+  allowedTypes: string[];
+  isMulti: boolean;
+  setFiles: Dispatch<SetStateAction<FileObject[]>>;
+}) {
+  return uploadedFiles?.map((uploadedFile) => {
+    if (uploadedFile) {
+      // validate the file extension according to the allowed extensions
+      const fileType = mapFileType(uploadedFile?.type);
+      if (!fileType) {
+        addToast({
+          title: `${locale?.errorUploadedTypes} ${allowedTypes.join(", ")}`,
+        });
+        return;
+      }
+
+      // set the file to be utilized, and the image to be viewed
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFiles((prevFiles) => [
+          ...(isMulti ? prevFiles : []),
+          {
+            file: uploadedFile,
+            view: reader.result as string,
+            type: fileType,
+            url: URL.createObjectURL(uploadedFile),
+          },
+        ]);
+      };
+      reader.readAsDataURL(uploadedFile);
+    }
+  });
+}

package/tsconfig.app.json

@@ -20,20 +20,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
 
     "baseUrl": ".",
     "paths": {
-      "@utils": ["./src/utils"],
-      "@components": ["./src/components"],
-      "@constants": ["./src/constants"],
-      "@hooks": ["./src/hooks"],
-      "@context": ["./src/context"],
-      "@examples": ["./src/examples"],
-      "@providers": ["./src/providers"],
-      "@types": ["./src/types"]
+      "@/*": ["./src/*"]
     }
   },
   "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

@@ -20,14 +20,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      "@utils": path.resolve(__dirname, "./src/utils"),
-      "@components": path.resolve(__dirname, "./src/components"),
-      "@types": path.resolve(__dirname, "./src/types"),
-      "@providers": path.resolve(__dirname, "./src/providers"),
-      "@constants": path.resolve(__dirname, "./src/constants"),
-      "@hooks": path.resolve(__dirname, "./src/hooks"),
-      "@context": path.resolve(__dirname, "./src/context"),
-      "@examples": path.resolve(__dirname, "./src/examples"),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
   build: {
@@ -36,6 +29,7 @@ export default defineConfig({
       name: "EmperorUI",
       fileName: "emperor-ui",
     },
+    cssCodeSplit: false,
     rollupOptions: {
       external: ["react", "react-dom"],
       output: {
@@ -43,6 +37,7 @@ export default defineConfig({
           react: "React",
           "react-dom": "ReactDOM",
         },
+        assetFileNames: "globals.css",
       },
     },
   },

package/vitest.shims.d.ts

@@ -1 +1 @@
-/// <reference types="@vitest/browser-playwright" />
+/// <reference types="@vitest/browser-playwright" />

package/src/components/footer/footer.tsx

@@ -1,6 +0,0 @@
-import type { ItemCardProps } from "src";
-import { cn } from "@utils";
-
-export function ItemCard({ className }: ItemCardProps) {
-  return <div className={cn("", className)}>ItemCard Component</div>;
-}

package/src/components/footer/index.ts

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

package/src/components/header/header.tsx

@@ -1,49 +0,0 @@
-import type { HeaderProps } from "@types";
-import { cn } from "@utils";
-import { cva, VariantProps } from "class-variance-authority";
-import { ComponentProps, forwardRef } from "react";
-
-const headerStyles = cva(["flex justify-center items-center min-h-16"], {
-  variants: {
-    variant: {
-      primary: "bg-blue-500 text-white",
-      secondary: "bg-gray-500 text-black",
-    },
-    padding: {
-      sm: "p-2",
-      md: "p-4",
-      lg: "p-6",
-    },
-  },
-  defaultVariants: {
-    variant: "primary",
-    padding: "md",
-  },
-  compoundVariants: [
-    {
-      variant: "primary",
-      padding: "lg",
-      class: "shadow-lg",
-    },
-    {
-      variant: "secondary",
-      padding: "sm",
-      class: "border-2 border-black",
-    },
-  ],
-});
-
-export const Header = forwardRef<
-  HTMLElement,
-  ComponentProps<"header"> & VariantProps<typeof headerStyles> & HeaderProps
->(({ className, variant, padding, ...props }, ref) => {
-  return (
-    <header
-      ref={ref}
-      className={cn(headerStyles({ variant, padding, className }))}
-      {...props}
-    >
-      this is a header
-    </header>
-  );
-});

package/src/components/item-card/item-card.tsx

@@ -1,6 +0,0 @@
-import type { FooterProps } from "@types";
-import { cn } from "@utils";
-
-export function Footer({ className }: FooterProps) {
-  return <div className={cn("", className)}>Footer Component</div>;
-}

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

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

package/src/components/nav-bar/nav-bar.tsx

@@ -1,6 +0,0 @@
-import type { NavBarProps } from "src";
-import { cn } from "@utils";
-
-export function NavBar({ className }: NavBarProps) {
-  return <div className={cn("", className)}>NavBar Component</div>;
-}

package/src/components/scaffold/scaffold.tsx

@@ -1,15 +0,0 @@
-import { useEmperorUI } from "@hooks";
-import type { ScaffoldProps } from "@types";
-import { cn } from "@utils";
-
-export function Scaffold({ className, children }: ScaffoldProps) {
-  const { config } = useEmperorUI();
-
-  const backgroundColor = config?.theme?.colors?.background;
-
-  return (
-    <div className={cn("flex flex-col", className)} style={{ backgroundColor }}>
-      {children}
-    </div>
-  );
-}

package/src/index.css

@@ -1 +0,0 @@
-@import "tailwindcss";

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

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

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

@@ -1,21 +0,0 @@
-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 HeaderProps = SharedComponentProps & {
-  variant?: "default" | "compact";
-  classNames?: HeaderClassnames;
-};

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

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

package/src/types/context/emperor-ui.ts

@@ -1,37 +0,0 @@
-import { type ReactNode } from "react";
-
-export type EmperorUIContextState = {
-  config: EmperorUIConfig;
-};
-
-export type EmperorUIProviderProps = {
-  children: ReactNode;
-  config: EmperorUIConfig;
-};
-
-export type ColorMode = "light" | "dark";
-
-export type ColorsPalette = {
-  primary: string;
-  secondary: string;
-  success: string;
-  danger: string;
-  warning: string;
-  info: string;
-  background: string;
-  text: string;
-};
-
-export type EmperorUITheme = {
-  mode: ColorMode;
-  colors: Partial<ColorsPalette>;
-};
-
-export type EmperorUILayout = {
-  withScaffold: boolean;
-};
-
-export type EmperorUIConfig = {
-  theme?: Partial<EmperorUITheme>;
-  layout?: Partial<EmperorUILayout>;
-};

package/tailwind.config.js

@@ -1,6 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-    content: ["./src/**/*.{js,ts,jsx,tsx}"],
-    theme: {},
-    plugins: [],
-};