@js-empire/emperor-ui 1.1.0 → 1.2.0

package/eslint.config.js

@@ -10,21 +10,13 @@ import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
   globalIgnores(["dist"]),
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  reactHooks.configs.flat.recommended,
+  reactRefresh.configs.vite,
+  ...storybook.configs["flat/recommended"],
   {
     files: ["**/*.{ts,tsx}"],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:react-hooks/recommended",
-      "plugin:storybook/recommended"
-    ],
-    ignorePatterns: ["dist", ".eslintrc.cjs"],
-    parser: "@typescript-eslint/parser",
-    plugins: ["react-refresh"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
@@ -40,4 +32,3 @@ export default defineConfig([
     },
   },
 ]);
-

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-empire/emperor-ui",
   "description": "They provide the atoms, we provide the empire.",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "JS Empire - Mustafa Alhasanat",
   "license": "ISC",
   "type": "module",
@@ -44,6 +44,9 @@
       "main"
     ]
   },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
   "dependencies": {
     "@heroui/react": "^2.8.5",
     "@heroui/theme": "^2.4.25",
@@ -90,8 +93,5 @@
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.15"
-  },
-  "resolutions": {
-    "jackspeak": "2.1.1"
   }
 }

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

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Brand } from "@components";
-import { getStorybookDecorators } from "@utils";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Brand } from "@/components";
+import { getStorybookDecorators } from "@/utils";
 
 const meta: Meta<typeof Brand> = {
   title: "Atoms/Brand",

package/src/components/atoms/brand/brand.tsx

@@ -1,8 +1,8 @@
-import type { BrandProps } from "@types";
-import { cn } from "@utils";
+import type { BrandProps } from "@/types";
+import { cn } from "@/utils";
 import { VariantProps } from "class-variance-authority";
 import { ComponentProps, forwardRef } from "react";
-import { Row } from "@components";
+import { Row } from "@/components";
 import { brandStyles } from "./styles";
 import { Image } from "@heroui/react";
 

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

@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Column } from "@components";
-import { getStorybookDecorators } from "@utils";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Column } from "@/components";
+import type { ColumnProps } from "@/types";
+import { getStorybookDecorators } from "@/utils";
 
 const meta: Meta<typeof Column> = {
   title: "Atoms/Column",
@@ -24,7 +25,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
-  render: (args) => (
+  render: (args: ColumnProps) => (
     <Column {...args}>
       {Array.from({ length: 5 }).map((_, index) => (
         <div key={index} className="bg-blue-300 p-2 rounded-md">

package/src/components/atoms/column/column.tsx

@@ -1,5 +1,5 @@
-import type { ColumnProps } from "@types";
-import { cn } from "@utils";
+import type { ColumnProps } from "@/types";
+import { cn } from "@/utils";
 import { cva, VariantProps } from "class-variance-authority";
 import { forwardRef, ComponentProps } from "react";
 

package/src/components/atoms/container/column.stories.tsx

@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Container } from "@components";
-import { getStorybookDecorators } from "@utils";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Container } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import type { ContainerProps } from "@/types";
 
 const meta: Meta<typeof Container> = {
   title: "Atoms/Container",
@@ -26,7 +27,7 @@ export const Default: Story = {
   args: {
     className: "h-screen flex items-center justify-center",
   },
-  render: (args) => (
+  render: (args: ContainerProps) => (
     <Container {...args}>
       <div className="bg-blue-300 p-2 text-center rounded-md w-full h-fit">
         Responsive contained content

package/src/components/atoms/container/container.tsx

@@ -1,5 +1,5 @@
-import type { ContainerProps } from "@types";
-import { cn } from "@utils";
+import type { ContainerProps } from "@/types";
+import { cn } from "@/utils";
 import { cva, VariantProps } from "class-variance-authority";
 import { forwardRef, ComponentProps } from "react";
 

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

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Portal } from "@components";
-import { getStorybookDecorators } from "@utils";
-import { FAKE_PARAGRAPH } from "@constants";
+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",

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

@@ -1,4 +1,4 @@
-import { PortalProps } from "@types";
+import { PortalProps } from "@/types";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
@@ -12,7 +12,9 @@ export function Portal({
   useEffect(() => {
     const element = document.getElementById(containerId);
 
-    setContainer(element);
+    setTimeout(() => {
+      setContainer(element);
+    }, 100);
   }, [containerId]);
 
   if (!container || !isVisible) {

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

@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Row } from "@components";
-import { getStorybookDecorators } from "@utils";
+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",
@@ -24,7 +25,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
-  render: (args) => (
+  render: (args: RowProps) => (
     <Row {...args}>
       {Array.from({ length: 5 }).map((_, index) => (
         <div key={index} className="bg-blue-300 p-2 rounded-md">

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

@@ -1,5 +1,5 @@
-import type { RowProps } from "@types";
-import { cn } from "@utils";
+import type { RowProps } from "@/types";
+import { cn } from "@/utils";
 import { cva, VariantProps } from "class-variance-authority";
 import { forwardRef, ComponentProps } from "react";
 

package/src/components/atoms/uploader/avatar-label.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { Placeholders } from "@enums";
+import { Placeholders } from "@/enums";
 import { Avatar, Spinner, cn } from "@heroui/react";
-import { useEmperorUI, useUploaderContext } from "@hooks";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
 import { useState } from "react";
 
 export function AvatarLabel() {

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

@@ -1,8 +1,9 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Uploader } from "@components";
-import { getStorybookDecorators } from "@utils";
-import { UploaderProps } from "@types";
-import { useUploader } from "@hooks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Uploader } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { UploaderProps } from "@/types";
+import { useUploader } from "@/hooks";
+import { useDisclosure } from "@heroui/react";
 
 const meta: Meta<typeof Uploader> = {
   title: "Atoms/Uploader",
@@ -30,12 +31,130 @@ export const Default: Story = {
     const uploadProps = useUploader({
       fileTypes: ["image"],
       labelId: "image",
-      maxCount: 1,
-      isRequired: false,
-      compressFiles: true,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};
+
+export const MultiFiles: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
       isMulti: true,
     });
 
     return <Uploader {...uploadProps} {...args} />;
   },
 };
+
+export const WithMaxCount: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      isMulti: true,
+      maxCount: 2,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};
+
+export const Required: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      isRequired: true,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};
+
+export const HideListings: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+    });
+
+    return <Uploader hideListing {...uploadProps} {...args} />;
+  },
+};
+
+export const ViewableImages: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+    });
+
+    const modalProps = useDisclosure();
+
+    return (
+      <Uploader
+        isFileViewable
+        modal={{
+          ...modalProps,
+        }}
+        {...uploadProps}
+        {...args}
+      />
+    );
+  },
+};
+
+export const AllowDuplicates: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      preventDuplicates: false,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};
+
+export const CompressFiles: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "uncompressed-image",
+      compressFiles: false,
+    });
+
+    const compressedUploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "compressed-image",
+      compressFiles: true,
+    });
+
+    return (
+      <div className="grid grid-cols-2 gap-4">
+        <h3 className="text-lg font-bold">Uncompressed</h3>
+        <h3 className="text-lg font-bold">Compressed</h3>
+
+        <Uploader {...uploadProps} {...args} />
+        <Uploader {...compressedUploadProps} {...args} />
+
+        <p className="text-sm text-gray-500">
+          File size: {uploadProps.files[0]?.file?.size || "---"}
+        </p>
+        <p className="text-sm text-gray-500">
+          File size: {compressedUploadProps.files[0]?.file?.size || "---"}
+        </p>
+      </div>
+    );
+  },
+};

package/src/components/atoms/uploader/upload-file-error-box.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@heroui/react";
-import { useEmperorUI, useUploaderContext } from "@hooks";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
 import { useMemo } from "react";
 
 export function UploadFileErrorBox() {

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { cn } from "@heroui/react";
-import { useUploaderContext } from "@hooks";
-import { fileTypesMapping } from "@constants";
+import { useUploaderContext } from "@/hooks";
+import { fileTypesMapping } from "@/constants";
 
 export function UploadFileInput() {
   const {

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Spinner, cn } from "@heroui/react";
-import { useEmperorUI, useUploaderContext } from "@hooks";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
 import { UploadCloud } from "lucide-react";
 import { useState } from "react";
 

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, cn } from "@heroui/react";
-import { useUploaderContext } from "@hooks";
+import { useUploaderContext } from "@/hooks";
 import { Eye, Trash2 } from "lucide-react";
 
 export function UploadFileListing() {
@@ -21,7 +21,9 @@ export function UploadFileListing() {
             classNames?.listing,
           )}
         >
-          <p className="w-full text-ellipsis text-xs">{file?.file?.name}</p>
+          <p className="w-full line-clamp-1 text-xs max-w-60">
+            {file?.file?.name}
+          </p>
 
           <Button
             isIconOnly
@@ -29,7 +31,7 @@ export function UploadFileListing() {
             className="size-8 min-w-8 rounded-full"
             color="danger"
             onPress={() => handleClearFile(file?.file?.name)}
-            startContent={<Trash2 className="rounded-lg" />}
+            startContent={<Trash2 className="rounded-lg size-4" />}
           />
 
           {isFileViewable && (
@@ -42,7 +44,7 @@ export function UploadFileListing() {
                 setSelectedFile?.(file);
                 modal?.onOpen?.();
               }}
-              startContent={<Eye className="rounded-lg" />}
+              startContent={<Eye className="rounded-lg size-4" />}
             />
           )}
         </div>

package/src/components/atoms/uploader/uploader.tsx

@@ -1,8 +1,8 @@
-import type { UploaderProps } from "@types";
-import { cn } from "@utils";
+import type { UploaderProps } from "@/types";
+import { cn } from "@/utils";
 import { cva, VariantProps } from "class-variance-authority";
 import { forwardRef, ComponentProps } from "react";
-import { UploaderProvider } from "@providers";
+import { UploaderProvider } from "@/providers";
 import {
   AvatarLabel,
   UploadFileLabel,
@@ -10,7 +10,7 @@ import {
   UploadFileListing,
   UploadFileErrorBox,
   UploadFileInput,
-} from "@components";
+} from "@/components";
 
 const uploaderStyles = cva(["w-full flex flex-col gap-2"], {
   variants: {},

package/src/components/atoms/uploader/view-image-modal.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { Image, Modal, ModalBody, ModalContent } from "@heroui/react";
-import { useEmperorUI, useUploaderContext } from "@hooks";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
 
 export function ViewImageModal() {
   const { config } = useEmperorUI();
-  const { isOpen, onClose, onOpenChange, selectedFile } = useUploaderContext();
+  const { modal, selectedFile } = useUploaderContext();
 
   const lang = config?.interLocalization?.lang || "en";
 
@@ -17,11 +17,12 @@ export function ViewImageModal() {
   return (
     <Modal
       placement="center"
-      isOpen={isOpen}
+      isOpen={modal?.isOpen}
       dir={lang === "ar" ? "rtl" : "ltr"}
-      onClose={onClose}
-      onOpenChange={onOpenChange}
+      onClose={modal?.onClose}
+      onOpenChange={modal?.onOpenChange}
       size="xl"
+      {...modal}
     >
       <ModalContent className="px-5">
         <ModalBody className="h-[60vh]">

package/src/components/molecules/filter/filter.tsx

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

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

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

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

@@ -1,9 +1,9 @@
-import { cn } from "@utils";
+import { cn } from "@/utils";
 import { VariantProps } from "class-variance-authority";
 import { forwardRef, ComponentProps } from "react";
-import type { NavBarItemProps } from "@types";
+import type { NavBarItemProps } from "@/types";
 import { navBarItemClasses, navBarItemStyles } from "./styles";
-import { useEmperorUI, useNavigation } from "@hooks";
+import { useEmperorUI, useNavigation } from "@/hooks";
 
 export const NavBarItem = forwardRef<
   HTMLLIElement,

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

@@ -1,15 +1,15 @@
-import { cn } from "@utils";
+import { cn } from "@/utils";
 import { VariantProps } from "class-variance-authority";
 import { forwardRef, ComponentProps } from "react";
-import type { NavBarProps } from "@types";
-import { useEmperorUI } from "@hooks";
+import type { NavBarProps } from "@/types";
+import { useEmperorUI } from "@/hooks";
 import {
   navBarClasses,
   navBarMenuClasses,
   navBarMenuStyles,
   navBarStyles,
 } from "./styles";
-import { NavBarItem, SubItemsBox } from "@components";
+import { NavBarItem, SubItemsBox } from "@/components";
 
 export const NavBar = forwardRef<
   HTMLDivElement,

package/src/components/molecules/nav-bar/stories/hover-effect/nav-bar-hover-effect.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { NavBar } from "@components";
-import { getStorybookDecorators } from "@utils";
-import { MOCK_HEADER_ITEMS } from "@mocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { NavBar } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { MOCK_HEADER_ITEMS } from "@/mocks";
 
 const meta: Meta<typeof NavBar> = {
   title: "Molecules/NavBar/HoverEffect",

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

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { NavBar } from "@components";
-import { getStorybookDecorators } from "@utils";
-import { MOCK_HEADER_ITEMS, MOCK_HEADER_ITEMS_WITH_SUB_ITEMS } from "@mocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { NavBar } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { MOCK_HEADER_ITEMS, MOCK_HEADER_ITEMS_WITH_SUB_ITEMS } from "@/mocks";
 
 const meta: Meta<typeof NavBar> = {
   title: "Molecules/NavBar",

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

@@ -2,7 +2,7 @@ import {
   NavBarItemStylesProps,
   NavBarMenuStylesProps,
   NavBarStylesProps,
-} from "@types";
+} from "@/types";
 import { CSSProperties } from "react";
 
 export const navBarStyles = ({
@@ -20,6 +20,7 @@ export const navBarStyles = ({
   return {};
 };
 
+// eslint-disable-next-line no-empty-pattern
 export const navBarMenuStyles = ({}: NavBarMenuStylesProps): CSSProperties => {
   return {};
 };

package/src/components/molecules/nav-bar/sub-items-box.tsx

@@ -1,6 +1,6 @@
 import { cn, Link } from "@heroui/react";
-import { useNavigation } from "@hooks";
-import { SubItemsBoxProps } from "@types";
+import { useNavigation } from "@/hooks";
+import { SubItemsBoxProps } from "@/types";
 
 export const SubItemsBox = ({ subItemsColumns = 3 }: SubItemsBoxProps) => {
   const {

package/src/components/molecules/scaffold/scaffold.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Scaffold } from "@components";
-import { getStorybookDecorators } from "@utils";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Scaffold } from "@/components";
+import { getStorybookDecorators } from "@/utils";
 
 const meta: Meta<typeof Scaffold> = {
   title: "Molecules/Scaffold",

package/src/components/molecules/scaffold/scaffold.tsx

@@ -1,6 +1,6 @@
-import { useEmperorUI } from "@hooks";
-import type { ScaffoldProps } from "@types";
-import { cn } from "@utils";
+import { useEmperorUI } from "@/hooks";
+import type { ScaffoldProps } from "@/types";
+import { cn } from "@/utils";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 
@@ -20,7 +20,7 @@ export const Scaffold = forwardRef<HTMLDivElement, ScaffoldProps>(
     return (
       <div
         ref={ref}
-        dir={config?.dir}
+        dir={config?.interLocalization?.dir}
         data-slot="scaffold"
         className={cn(scaffoldStyles({ className }), className)}
         style={{

package/src/components/molecules/side-bar/compact-side-bar.tsx

@@ -1,8 +1,8 @@
 import { createPortal } from "react-dom";
 import { useEffect, useState } from "react";
-import { cn } from "@utils";
+import { cn } from "@/utils";
 import { Button, Divider, ScrollShadow } from "@heroui/react";
-import { CompactSideBarProps } from "@types";
+import { CompactSideBarProps } from "@/types";
 
 const CompactSideBarContent = ({
   items = [],
@@ -62,7 +62,9 @@ export const CompactSideBar = (props: CompactSideBarProps) => {
 
   useEffect(() => {
     const element = document.getElementById("emperor-compact-sidebar");
-    setContainer(element);
+    setTimeout(() => {
+      setContainer(element);
+    }, 100);
   }, []);
 
   if (!container) {